门户，公司经营预算

src/router/modules/base.js

@@ -48,6 +48,12 @@ export default [
                 name: 'home-budget',
                 meta: {title: '公司经营预算'},
                 component: () => import('~src/views/home/budget.vue')
+            },
+            {
+                path: '/home/budget-form',
+                name: 'home-budget-form',
+                meta: {title: '新增/编辑公司经营预算'},
+                component: () => import('~src/views/home/budget-form.vue')
             }
         ],
     },

src/router/modules/token.js

@@ -6,6 +6,7 @@ export default [
     'home-task',
     'home-task-details',
     'home-budget',
+    'home-budget-form',
     'user-index',
     'user-config',
     'system-user',

src/views/home/budget-form.vue

@@ -0,0 +1,289 @@
+<template>
+    <HcCard scrollbar>
+        <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>
+                    <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>
+                    <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>
+                </el-form>
+            </div>
+        </template>
+
+        <HcCardItem>
+            <template #header>
+                <span class="text-black text-sm">* 人员工资预算详情：</span>
+            </template>
+            <template #extra>
+                <el-button type="success" @click="addTableData">
+                    <HcIcon name="add-circle"/>
+                    <span>新增</span>
+                </el-button>
+            </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>
+            <template #extra>
+                <el-button type="success" @click="addTableData1">
+                    <HcIcon name="add-circle"/>
+                    <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>
+    </HcCard>
+</template>
+
+<script setup>
+import {onActivated, ref} from "vue";
+import {useRouter, useRoute} from 'vue-router'
+import {delMessage} from "~uti/tools";
+
+//初始变量
+const router = useRouter()
+const useRoutes = useRoute()
+const dataId = ref(useRoutes?.query?.id ?? '')
+
+//缓存页面被激活时
+onActivated(() => {
+    dataId.value = useRoutes?.query?.id ?? ''
+    console.log(useRoutes.query)
+})
+
+//顶部表单数据
+const formRef = ref(null)
+const formModel = ref({
+    key1: '', key2: '', key3: '', key4: '', key5: '',
+})
+const formRules = {
+    key1: {
+        required: true,
+        trigger: 'blur',
+        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: "请输入综合管理预算"
+    },
+}
+
+//工资预算表格
+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'},
+]
+const tableData = ref([
+    {id: 1, key1: '管理中心', key2: '产品经理', key3: '22', key4: '33', key5: '44', key6: '在职', key7: '22', isEditMode: false},
+])
+
+//新增工资预算表格
+const addTableData = () => {
+    tableData.value.push({isEditMode: true})
+}
+
+//删除工资预算表格
+const delTableData = (row,index) => {
+    delMessage(() => {
+        if (!row.id)  {
+            tableData.value.splice(index, 1)
+        }
+    })
+}
+
+
+//综合管理费用表格
+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>
+
+</style>
+
+<style lang="scss">
+.hac-budget-form-card-header {
+    .el-form--inline .el-form-item {
+        margin-right: 16px;
+        margin-bottom: 16px;
+    }
+}
+</style>

src/views/home/budget.vue

@@ -1,12 +1,91 @@
 <template>
-    <div class="home-styles-box">
-        111111
-    </div>
+    <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>
+            </div>
+        </template>
+        <template #extra>
+            <el-button size="large" color="#7728F5" hc-btn>
+                <HcIcon name="folder-chart"/>
+                <span>报表查看</span>
+            </el-button>
+            <el-button size="large" type="primary" hc-btn>
+                <HcIcon name="add"/>
+                <span>新增经营预算</span>
+            </el-button>
+        </template>
+
+        <HcTable :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>
+            </template>
+        </HcTable>
+
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"/>
+        </template>
+    </HcCard>
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
-import {useAppStore} from "~src/store";
+import {ref} from "vue";
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+
+//年度数据
+const annuals = ref([
+    {name: '2023年', key: '2023'},
+    {name: '2022年', key: '2022'},
+    {name: '2021年', key: '2021'}
+])
+
+//搜索表单
+const searchForm = ref({annual: null, current: 1, size: 20, total: 0})
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//获取数据
+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: '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'},
+])
+
+const getTableData = () => {
+
+}
+
+
+//编辑
+const editRowClick = (row) => {
+    router.push({
+        name: 'home-budget-form', query: {
+            id: row.id
+        }
+    })
+}
 
 </script>