项目预算

src/views/project/budget-form.vue

@@ -1,171 +1,111 @@
 <template>
-    <HcCard scrollbar>
+    <HcCard>
         <template #header>
             <div class="hac-budget-form-card-header">
                 <el-form ref="formRef" inline :model="formModel" :rules="formRules">
-                    <el-form-item label="合同" prop="key1">
-                        <el-tooltip content="年度合同指标">
-                            <el-input v-model="formModel.key1" placeholder="年度合同指标" />
-                        </el-tooltip>
-                    </el-form-item>
-                    <el-form-item label="利润" prop="key2">
-                        <el-tooltip content="年度利润指标">
-                            <el-input v-model="formModel.key2" placeholder="年度利润指标" />
-                        </el-tooltip>
-                    </el-form-item>
-                    <el-form-item label="预算" prop="key3">
-                        <el-tooltip content="预算总额">
-                            <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
-                                <template #append>元</template>
-                            </el-input>
-                        </el-tooltip>
+                    <el-form-item label="关联项目" prop="key1">
+                        <el-select v-model="formModel.key1" block clearable placeholder="项目名称">
+                            <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
+                        </el-select>
                     </el-form-item>
-                    <el-form-item label="工资" prop="key4">
-                        <el-tooltip content="人员工资预算详情">
-                            <el-input v-model="formModel.key4" placeholder="人员工资预算详情" disabled>
-                                <template #append>元</template>
-                            </el-input>
-                        </el-tooltip>
+                    <el-form-item label="预算制订人" prop="key2">
+                        <el-input v-model="formModel.key2" placeholder="预算制订人" />
                     </el-form-item>
-                    <el-form-item label="综合" prop="key5">
-                        <el-tooltip content="综合管理预算详情">
-                            <el-input v-model="formModel.key5" placeholder="综合管理预算详情" disabled>
-                                <template #append>元</template>
-                            </el-input>
-                        </el-tooltip>
+                    <el-form-item label="预算总额" prop="key3">
+                        <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
+                            <template #append>元</template>
+                        </el-input>
                     </el-form-item>
                 </el-form>
             </div>
         </template>
-
-        <HcCardItem>
-            <template #header>
-                <span class="text-black text-sm">* 人员工资预算详情：</span>
+        <template #extra>
+            <el-button type="primary" hc-btn @click="addTableData">
+                <HcIcon name="add"/>
+                <span>新增预算</span>
+            </el-button>
+        </template>
+        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
+            <template #key1="{row,index}">
+                <el-select v-model="row.key1" placeholder="项目进程" v-if="row.isEditMode">
+                    <el-option v-for="item in projectProcess" :label="item.name" :value="item.key"/>
+                </el-select>
+                <div v-else>{{row.key1}}</div>
             </template>
-            <template #extra>
-                <el-button type="success" @click="addTableData">
-                    <HcIcon name="add-circle"/>
-                    <span>新增</span>
-                </el-button>
+            <template #key2="{row,index}">
+                <el-select v-model="row.key2" placeholder="预算类型" v-if="row.isEditMode">
+                    <el-option v-for="item in budgetType" :label="item.name" :value="item.key"/>
+                </el-select>
+                <div v-else>{{row.key2}}</div>
             </template>
-            <div class="h-72">
-                <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
-                    <template #key1="{row,index}">
-                        <el-select v-model="row.key1" v-if="row.isEditMode">
-                            <el-option label="管理中心" value="管理中心"/>
-                            <el-option label="人事行政资源部" value="人事行政资源部"/>
-                            <el-option label="研发部" value="研发部"/>
-                            <el-option label="技术服务部" value="技术服务部"/>
-                        </el-select>
-                        <div v-else>{{row.key1}}</div>
-                    </template>
-                    <template #key2="{row,index}">
-                        <el-select v-model="row.key2" v-if="row.isEditMode">
-                            <el-option label="总经理" value="总经理"/>
-                            <el-option label="人事行政" value="人事行政"/>
-                            <el-option label="产品经理" value="产品经理"/>
-                            <el-option label="软件实施" value="软件实施"/>
-                            <el-option label="业务实施" value="业务实施"/>
-                            <el-option label="技术经理" value="技术经理"/>
-                            <el-option label="JAVA开发" value="JAVA开发"/>
-                            <el-option label="前端开发" value="前端开发"/>
-                            <el-option label="测试" value="测试"/>
-                        </el-select>
-                        <div v-else>{{row.key2}}</div>
-                    </template>
-                    <template #key3="{row,index}">
-                        <el-input v-model="row.key3" v-if="row.isEditMode"/>
-                        <div v-else>{{row.key3}}</div>
-                    </template>
-                    <template #key4="{row,index}">
-                        <el-input v-model="row.key4" v-if="row.isEditMode"/>
-                        <div v-else>{{row.key4}}</div>
-                    </template>
-                    <template #key5="{row,index}">
-                        <el-input v-model="row.key5" v-if="row.isEditMode"/>
-                        <div v-else>{{row.key5}}</div>
-                    </template>
-                    <template #key6="{row,index}">
-                        <el-select v-model="row.key6" v-if="row.isEditMode">
-                            <el-option label="在职" value="在职"/>
-                            <el-option label="计划招聘" value="计划招聘"/>
-                        </el-select>
-                        <div v-else>{{row.key6}}</div>
-                    </template>
-                    <template #key7="{row,index}">
-                        <el-input v-model="row.key7" v-if="row.isEditMode"/>
-                        <div v-else>{{row.key7}}</div>
-                    </template>
-                    <template #action="{row,index}">
-                        <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
-                            <HcIcon name="check"/>
-                            <span>完成</span>
-                        </el-button>
-                        <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
-                            <HcIcon name="edit"/>
-                            <span>编辑</span>
-                        </el-button>
-                        <el-button size="small" type="danger" @click="delTableData(row,index)">
-                            <HcIcon name="delete-bin"/>
-                            <span>删除</span>
-                        </el-button>
-                    </template>
-                </HcTable>
-            </div>
-        </HcCardItem>
-
-        <HcCardItem class="mt-4">
-            <template #header>
-                <span class="text-black text-sm">* 综合管理预算详情：</span>
+            <template #key3="{row,index}">
+                <el-select v-model="row.key3" placeholder="任务明细" v-if="row.isEditMode">
+                    <el-option v-for="item in taskDetail" :label="item.name" :value="item.key"/>
+                </el-select>
+                <div v-else>{{row.key3}}</div>
+            </template>
+            <template #key4="{row,index}">
+                <el-input v-model="row.key4" v-if="row.isEditMode"/>
+                <div v-else>{{row.key4}}</div>
+            </template>
+            <template #key5="{row,index}">
+                <el-input v-model="row.key5" v-if="row.isEditMode"/>
+                <div v-else>{{row.key5}}</div>
+            </template>
+            <template #key6="{row,index}">
+                <el-select v-model="row.key6" v-if="row.isEditMode">
+                    <el-option label="维护" value="1"/>
+                    <el-option label="业务" value="2"/>
+                </el-select>
+                <div v-else>{{row.key6}}</div>
+            </template>
+            <template #key7="{row,index}">
+                <el-input v-model="row.key7" v-if="row.isEditMode" disabled/>
+                <div v-else>{{row.key7}}</div>
             </template>
-            <template #extra>
-                <el-button type="success" @click="addTableData1">
-                    <HcIcon name="add-circle"/>
-                    <span>新增</span>
+            <template #key8="{row,index}">
+                <el-input v-model="row.key8" v-if="row.isEditMode"/>
+                <div v-else>{{row.key8}}</div>
+            </template>
+            <template #key9="{row,index}">
+                <el-input v-model="row.key9" v-if="row.isEditMode"/>
+                <div v-else>{{row.key9}}</div>
+            </template>
+            <template #key10="{row,index}">
+                <el-input v-model="row.key10" v-if="row.isEditMode"/>
+                <div v-else>{{row.key10}}</div>
+            </template>
+            <template #key11="{row,index}">
+                <el-input v-model="row.key11" v-if="row.isEditMode" disabled/>
+                <div v-else>{{row.key11}}</div>
+            </template>
+            <template #key12="{row,index}">
+                <el-input v-model="row.key12" v-if="row.isEditMode"/>
+                <div v-else>{{row.key12}}</div>
+            </template>
+            <template #key13="{row,index}">
+                <el-input v-model="row.key13" v-if="row.isEditMode" disabled/>
+                <div v-else>{{row.key13}}</div>
+            </template>
+            <template #key14="{row,index}">
+                <el-input v-model="row.key14" v-if="row.isEditMode"/>
+                <div v-else>{{row.key14}}</div>
+            </template>
+            <template #action="{row,index}">
+                <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
+                    <HcIcon name="check"/>
+                    <span>完成</span>
+                </el-button>
+                <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
+                    <HcIcon name="edit"/>
+                    <span>编辑</span>
+                </el-button>
+                <el-button size="small" type="danger" @click="delTableData(row,index)">
+                    <HcIcon name="delete-bin"/>
+                    <span>删除</span>
                 </el-button>
             </template>
-            <div class="h-72">
-                <HcTable :isIndex="false" :column="tableColumn1" :datas="tableData1">
-                    <template #key1="{row,index}">
-                        <el-select v-model="row.key1" v-if="row.isEditMode">
-                            <el-option label="办公费" value="办公费"/>
-                            <el-option label="团建费" value="团建费"/>
-                            <el-option label="水电费" value="水电费"/>
-                            <el-option label="房租物业" value="房租物业"/>
-                            <el-option label="运杂费" value="运杂费"/>
-                            <el-option label="后勤费" value="后勤费"/>
-                        </el-select>
-                        <div v-else>{{row.key1}}</div>
-                    </template>
-                    <template #key2="{row,index}">
-                        <el-input v-model="row.key2" v-if="row.isEditMode"/>
-                        <div v-else>{{row.key2}}</div>
-                    </template>
-                    <template #key3="{row,index}">
-                        <el-input v-model="row.key3" v-if="row.isEditMode"/>
-                        <div v-else>{{row.key3}}</div>
-                    </template>
-                    <template #key4="{row,index}">
-                        <el-input v-model="row.key4" v-if="row.isEditMode"/>
-                        <div v-else>{{row.key4}}</div>
-                    </template>
-                    <template #action="{row,index}">
-                        <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
-                            <HcIcon name="check"/>
-                            <span>完成</span>
-                        </el-button>
-                        <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
-                            <HcIcon name="edit"/>
-                            <span>编辑</span>
-                        </el-button>
-                        <el-button size="small" type="danger" @click="delTableData1(row,index)">
-                            <HcIcon name="delete-bin"/>
-                            <span>删除</span>
-                        </el-button>
-                    </template>
-                </HcTable>
-            </div>
-        </HcCardItem>
+        </HcTable>
     </HcCard>
 </template>
 
@@ -185,52 +125,94 @@ onActivated(() => {
     console.log(useRoutes.query)
 })
 
+//项目名称
+const projectName = ref([
+    {name: '陈油路', key: '陈油路'},
+    {name: '奉建路', key: '奉建路'}
+])
+
+//项目进程
+const projectProcess = ref([
+    {name: '商机-演示沟通', key: '1'},
+    {name: '商机-成本核算及报价', key: '2'},
+    {name: '合同-服务范围洽谈', key: '3'},
+    {name: '产品-研发', key: '4'},
+    {name: '产品-配置', key: '5'},
+    {name: '产品-测试', key: '6'},
+    {name: '产品-交付', key: '7'},
+    {name: '实施-系统培训', key: '8'},
+    {name: '实施-现场服务', key: '9'},
+    {name: '实施-合同回款', key: '10'},
+    {name: '项目验收', key: '11'},
+])
+
+//预算类型
+const budgetType = ref([
+    {name: '合同签订阶段', key: '1'},
+    {name: '项目注册阶段', key: '2'},
+    {name: '项目准备阶段', key: '3'},
+    {name: '项目研发阶段', key: '4'},
+    {name: '项目配置阶段', key: '5'},
+    {name: '项目测试阶段', key: '6'},
+    {name: '项目培训阶段', key: '7'},
+    {name: '项目编辑阶段', key: '8'},
+    {name: '资料编辑阶段', key: '9'},
+    {name: '过程服务阶段', key: '10'},
+    {name: '交工阶段', key: '11'},
+    {name: '资料收集阶段', key: '12'},
+    {name: '竣工编辑阶段', key: '13'},
+    {name: '档案验收阶段', key: '14'},
+    {name: '档案移交阶段', key: '15'},
+    {name: '耗材', key: '16'},
+])
+
+//任务明细
+const taskDetail = ref([
+    {name: '审核图纸', key: '1'},
+    {name: '风险评估', key: '2'},
+    {name: '合同报价', key: '3'},
+    {name: '合同洽谈及签订', key: '4'},
+    {name: '项目注册', key: '5'},
+    {name: '数据配置', key: '6'},
+    {name: '项目WBS划分', key: '7'},
+])
+
 //顶部表单数据
 const formRef = ref(null)
-const formModel = ref({
-    key1: '', key2: '', key3: '', key4: '', key5: '',
-})
+const formModel = ref({key1: '', key2: '', key3: ''})
 const formRules = {
     key1: {
         required: true,
         trigger: 'blur',
-        message: "请输入年度合同指标"
+        message: "请选择关联项目"
     },
     key2: {
         required: true,
         trigger: 'blur',
-        message: "请输入年度利润指标"
-    },
-    key3: {
-        required: true,
-        trigger: 'blur',
-        message: "请输入预算总额"
-    },
-    key4: {
-        required: true,
-        trigger: 'blur',
-        message: "请输入人员工资预算"
-    },
-    key5: {
-        required: true,
-        trigger: 'blur',
-        message: "请输入综合管理预算"
-    },
+        message: "请输入预算制订人"
+    }
 }
 
 //工资预算表格
 const tableColumn = [
-    {key: 'key1', name: '部门', align: 'center'},
-    {key: 'key2', name: '岗位', align: 'center'},
-    {key: 'key3', name: '工资支出', align: 'center'},
-    {key: 'key4', name: '五险一金支出',  align: 'center'},
-    {key: 'key5', name: '人员数量',  align: 'center'},
-    {key: 'key6', name: '状态', align: 'center'},
-    {key: 'key7', name: '工期(月)', align: 'center'},
-    {key: 'action', name: '操作', width: '160', align: 'center'},
+    {key: 'key1', name: '项目环节', width: '200'},
+    {key: 'key2', name: '预算类型', width: '200'},
+    {key: 'key3', name: '任务明细', width: '200'},
+    {key: 'key4', name: '预计工作日(小数/整数/天)', width: '160'},
+    {key: 'key5', name: '投入人员数量', width: '140'},
+    {key: 'key6', name: '人日单价', width: '140'},
+    {key: 'key7', name: '预计人工成本', width: '160'},
+    {key: 'key8', name: '预计差旅费(元)', width: '160'},
+    {key: 'key9', name: '外包单价', width: '140'},
+    {key: 'key10', name: '外包数量', width: '140'},
+    {key: 'key11', name: '外包金额', width: '140'},
+    {key: 'key12', name: '其他', width: '140'},
+    {key: 'key13', name: '预算金额', width: '120'},
+    {key: 'key14', name: '测算备注', width: '200'},
+    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
-    {id: 1, key1: '管理中心', key2: '产品经理', key3: '22', key4: '33', key5: '44', key6: '在职', key7: '22', isEditMode: false},
+    {id: 1, key1: '', key2: '', key3: '', key4: '33', key5: '44', key6: '', key7: '22', isEditMode: false},
 ])
 
 //新增工资预算表格
@@ -246,33 +228,6 @@ const delTableData = (row,index) => {
         }
     })
 }
-
-
-//综合管理费用表格
-const tableColumn1 = [
-    {key: 'key1', name: '支出类目', align: 'center'},
-    {key: 'key2', name: '每月费用', align: 'center'},
-    {key: 'key3', name: '预算期数(月)', align: 'center'},
-    {key: 'key4', name: '测算备注',  align: 'center'},
-    {key: 'action', name: '操作', width: '160', align: 'center'},
-]
-const tableData1 = ref([
-    {id: 1, key1: '办公费', key2: '1', key3: '22', key4: '33', isEditMode: false},
-])
-
-//新增工资预算表格
-const addTableData1 = () => {
-    tableData1.value.push({isEditMode: true})
-}
-
-//删除工资预算表格
-const delTableData1 = (row,index) => {
-    delMessage(() => {
-        if (!row.id)  {
-            tableData1.value.splice(index, 1)
-        }
-    })
-}
 </script>
 
 <style lang="scss" scoped>

src/views/project/budget.vue

@@ -2,23 +2,41 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.annual" block clearable placeholder="选择年度" size="large">
-                    <el-option v-for="item in annuals" :label="item.name" :value="item.key"/>
+                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
+                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
+            <div class="w-40 ml-2">
+                <el-select v-model="searchForm.user" block clearable placeholder="预算制订人" size="large">
+                    <el-option v-for="item in users" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="w-52 ml-2">
+                <el-select v-model="searchForm.project" block clearable placeholder="项目名称" size="large">
+                    <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="ml-4">
+                <el-button type="primary" @click="searchClick" size="large">
+                    <HcIcon name="search-2"/>
+                    <span>搜索</span>
+                </el-button>
+            </div>
+            <div class="ml-2">
+                <el-button size="large" @click="resetClick">
+                    <HcIcon name="close-circle"/>
+                    <span>重置</span>
+                </el-button>
+            </div>
         </template>
         <template #extra>
-            <el-button size="large" color="#7728F5" hc-btn @click="toBudgetChartClick">
-                <HcIcon name="folder-chart"/>
-                <span>报表查看</span>
-            </el-button>
             <el-button size="large" type="primary" hc-btn @click="addRowClick">
                 <HcIcon name="add"/>
-                <span>新增经营预算</span>
+                <span>新增项目预算</span>
             </el-button>
         </template>
 
-        <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading">
+        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
             <template #action="{row,index}">
                 <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
                 <el-button plain size="small" type="danger">删除</el-button>
@@ -37,15 +55,44 @@ import {useRouter} from 'vue-router'
 
 const router = useRouter()
 
-//年度数据
-const annuals = ref([
-    {name: '2023年', key: '2023'},
-    {name: '2022年', key: '2022'},
-    {name: '2021年', key: '2021'}
+//项目类型
+const projectType = ref([
+    {name: '二级路', key: '二级路'},
+    {name: '国道', key: '国道'},
+    {name: '水利水电', key: '水利水电'},
+    {name: '市政', key: '市政'},
 ])
 
+//报销人
+const users = ref([
+    {name: '张三', key: '张三'},
+    {name: '李四', key: '李四'}
+])
+
+//项目名称
+const projectName = ref([
+    {name: '陈油路', key: '陈油路'},
+    {name: '奉建路', key: '奉建路'}
+])
+
+
 //搜索表单
-const searchForm = ref({annual: null, current: 1, size: 20, total: 0})
+const searchForm = ref({
+    projectType: null, user: null, project: null,
+    current: 1, size: 20, total: 0
+})
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//重置搜索表单
+const resetClick = () => {
+    searchForm.value = {current: 1, size: 20, total: 0}
+}
+
 //分页被点击
 const pageChange = ({current, size}) => {
     searchForm.value.current = current
@@ -56,21 +103,22 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'name', name: '名称'},
-    {key: 'key1', name: '总经营预算', width: '140', align: 'center'},
-    {key: 'key2', name: '年度合同额指标', width: '140', align: 'center'},
-    {key: 'key3', name: '年度利润指标', width: '140', align: 'center'},
-    {key: 'key4', name: '工资支出', width: '140', align: 'center'},
-    {key: 'key5', name: '其它管理支出', width: '140', align: 'center'},
+    {key: 'key', name: '编号', width: '100', align: 'center'},
+    {key: 'key1', name: '项目名称'},
+    {key: 'key2', name: '预算制订人'},
+    {key: 'key3', name: '总成本预算', width: '140', align: 'center'},
+    {key: 'key4', name: '目前已用预算', width: '140', align: 'center'},
+    {key: 'key5', name: '剩余预算总额', width: '140', align: 'center'},
+    {key: 'key6', name: '项目负责人', width: '140', align: 'center'},
     {key: 'action', name: '操作', width: '130', align: 'center'},
 ]
 const tableData = ref([
-    {id: 1, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 2, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 3, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 4, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 5, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
-    {id: 6, name: '2023年人力支出预算表', key1: 'xxxx', key2: '236323', key3: '65632', key4: '35654', key5: 'xxx'},
+    {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+    {id: 2, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+    {id: 3, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+    {id: 4, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+    {id: 5, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
+    {id: 6, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: '35654', key5: '12312', key6: 'xxxx'},
 ])
 
 const getTableData = () => {
@@ -81,7 +129,8 @@ const getTableData = () => {
 //编辑预算
 const editRowClick = (row) => {
     router.push({
-        name: 'home-budget-form', query: {
+        name: 'project-budget-form',
+        query: {
             id: row.id
         }
     })
@@ -90,21 +139,7 @@ const editRowClick = (row) => {
 //新增预算
 const addRowClick = () => {
     router.push({
-        name: 'home-budget-form'
-    })
-}
-
-const toBudgetChartClick = () => {
-    router.push({
-        name: 'home-budget-chart'
+        name: 'project-budget-form'
     })
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>
-
-<style lang="scss">
-
-</style>