更新年度经营预算

src/views/program/annual/form.vue

@@ -1,24 +1,24 @@
 <template>
     <HcCard actionUi="text-center">
-        <HcCardItem class="hc-program-annual-form-card-item">
+        <HcCardItem id="hc-program-annual-form-card-item" class="hc-program-annual-form-card-item">
             <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                 <div>
-                    <el-form-item label="预算名称" prop="name" class="w-1/2">
+                    <el-form-item label="预算名称" prop="name" class="w-1/2 mr-6">
                         <el-input v-model="formModel.name" placeholder="请输入预算名称" />
                     </el-form-item>
-                    <el-form-item label="预算起止时间" prop="time" class="ml-6">
+                    <el-form-item label="预算起止时间" prop="time">
                         <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                     </el-form-item>
                 </div>
                 <div>
                     <el-form-item label="合同" prop="key1">
                         <el-tooltip content="年度合同指标">
-                            <el-input v-model="formModel.key1" placeholder="年度合同指标" />
+                            <el-input v-model="formModel.key1" placeholder="年度合同指标" disabled/>
                         </el-tooltip>
                     </el-form-item>
                     <el-form-item label="利润" prop="key2">
                         <el-tooltip content="年度利润指标">
-                            <el-input v-model="formModel.key2" placeholder="年度利润指标" />
+                            <el-input v-model="formModel.key2" placeholder="年度利润指标" disabled/>
                         </el-tooltip>
                     </el-form-item>
                     <el-form-item label="预算" prop="key3">
@@ -45,8 +45,113 @@
                 </div>
             </el-form>
         </HcCardItem>
-
-        222
+        <div class="hc-program-annual-form-tabs" :style="tabsStyle">
+            <el-tabs type="border-card" class="form-tabs">
+                <el-tab-pane label="年度预算收入">
+                    <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
+                        <template #key1="{row,index}">
+                            <el-select v-model="row.key1">
+                                <el-option label="选项1" value="选项1"/>
+                                <el-option label="选项2" value="选项2"/>
+                            </el-select>
+                        </template>
+                        <template #key2="{row,index}">
+                            <el-select v-model="row.key2">
+                                <el-option label="选项1" value="选项1"/>
+                                <el-option label="选项2" value="选项2"/>
+                            </el-select>
+                        </template>
+                        <template #key3="{row,index}">
+                            <el-input v-model="row.key3" disabled/>
+                        </template>
+                        <template #key4="{row,index}">
+                            <el-input v-model="row.key4" disabled/>
+                        </template>
+                        <template #key5="{row,index}">
+                            <el-date-picker class="block" v-model="row.key5" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                        </template>
+                        <template #key6="{row,index}">
+                            <el-input v-model="row.key6"/>
+                        </template>
+                        <template #key7="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #action="{row,index}">
+                            <el-button size="small" type="primary">
+                                <HcIcon name="add"/>
+                                <span>新增</span>
+                            </el-button>
+                            <el-button size="small" type="danger">
+                                <HcIcon name="delete-bin"/>
+                                <span>删除</span>
+                            </el-button>
+                        </template>
+                    </HcTable>
+                </el-tab-pane>
+                <el-tab-pane label="年度预算支出">
+                    <HcTable :isIndex="false" :column="tableColumn1" :datas="tableData2">
+                        <template #key1="{row,index}">
+                            <el-select v-model="row.key1">
+                                <el-option label="选项1" value="选项1"/>
+                                <el-option label="选项2" value="选项2"/>
+                            </el-select>
+                        </template>
+                        <template #key2="{row,index}">
+                            <el-select v-model="row.key2">
+                                <el-option label="选项1" value="选项1"/>
+                                <el-option label="选项2" value="选项2"/>
+                            </el-select>
+                        </template>
+                        <template #key3="{row,index}">
+                            <el-input v-model="row.key3"/>
+                        </template>
+                        <template #key4="{row,index}">
+                            <el-input v-model="row.key4"/>
+                        </template>
+                        <template #key5="{row,index}">
+                            <el-input v-model="row.key4"/>
+                        </template>
+                        <template #key6="{row,index}">
+                            <el-input v-model="row.key6"/>
+                        </template>
+                        <template #key7="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #key8="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #key9="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #key10="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #key11="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #key12="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #key13="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #key14="{row,index}">
+                            <el-input v-model="row.key7"/>
+                        </template>
+                        <template #action="{row,index}">
+                            <el-button size="small" type="primary">
+                                <HcIcon name="add"/>
+                                <span>新增</span>
+                            </el-button>
+                            <el-button size="small" type="danger">
+                                <HcIcon name="delete-bin"/>
+                                <span>删除</span>
+                            </el-button>
+                        </template>
+                    </HcTable>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
         <template #action>
             <el-button size="large" type="info" hc-btn @click="goBackClick">
                 <HcIcon name="arrow-go-back"/>
@@ -61,11 +166,27 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {nextTick, onActivated, ref, onDeactivated} from "vue";
 import {useRouter} from 'vue-router'
 
 const router = useRouter()
 
+//页面激活
+onActivated(() => {
+    setFormTabsStyle()
+    windowResize()
+})
+
+//设置表单tabs样式
+const tabsStyle = ref('')
+const setFormTabsStyle = () => {
+    //处理为响应式高度
+    nextTick(() => {
+        const cardItemHeight = document.getElementById('hc-program-annual-form-card-item')?.offsetHeight
+        tabsStyle.value = 'height: calc(100% - ' + cardItemHeight + 'px)'
+    })
+}
+
 //顶部表单数据
 const formRef = ref(null)
 const formModel = ref({
@@ -80,25 +201,50 @@ const betweenTimeUpdate = ({arr, query}) => {
     //formModel.value.betweenTime = query
 }
 
+//监听浏览器窗口变化
+const windowResize = () => {
+    window.addEventListener("resize", resizeEvent);
+}
+const resizeEvent = () => {
+    window.requestAnimationFrame(() => {
+        setFormTabsStyle()
+    })
+}
 
 //获取数据
-const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '编号', width: '90', align: 'center'},
-    {key: 'key1', name: '计划名称'},
-    {key: 'key2', name: '计划类型', width: '120', align: 'center'},
-    {key: 'key3', name: '计划起止日期', width: '220', align: 'center'},
-    {key: 'key4', name: '计划数量', width: '120', align: 'center'},
-    {key: 'key5', name: '已完成计划', width: '120', align: 'center'},
-    {key: 'key6', name: '未完成计划', width: '100', align: 'center'},
-    {key: 'key8', name: '计划制定人', width: '100', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key1', name: '项目名称', minWidth: '180', align: 'center'},
+    {key: 'key2', name: '收入类别', width: '180', align: 'center'},
+    {key: 'key3', name: '项目类别', width: '180', align: 'center'},
+    {key: 'key4', name: '产品线', width: '180', align: 'center'},
+    {key: 'key5', name: '预计签单时间', width: '220', align: 'center'},
+    {key: 'key6', name: '预计新签合同额', width: '180', align: 'center'},
+    {key: 'key7', name: '预计本年度回款额', width: '180', align: 'center'},
+    {key: 'action', name: '操作', width: '170', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
-    {id: 1, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 2, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 3, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 4, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
+    {id: 1}, {id: 2},
+])
+
+const tableColumn1 = [
+    {key: 'key1', name: '预算科目（一级）', minWidth: '180', align: 'center'},
+    {key: 'key2', name: '二级科目', minWidth: '180', align: 'center'},
+    {key: 'key3', name: '1月', width: '100', align: 'center'},
+    {key: 'key4', name: '2月', width: '100', align: 'center'},
+    {key: 'key5', name: '3月', width: '100', align: 'center'},
+    {key: 'key6', name: '4月', width: '100', align: 'center'},
+    {key: 'key7', name: '5月', width: '100', align: 'center'},
+    {key: 'key8', name: '6月', width: '100', align: 'center'},
+    {key: 'key9', name: '7月', width: '100', align: 'center'},
+    {key: 'key10', name: '8月', width: '100', align: 'center'},
+    {key: 'key11', name: '9月', width: '100', align: 'center'},
+    {key: 'key12', name: '10月', width: '100', align: 'center'},
+    {key: 'key13', name: '11月', width: '100', align: 'center'},
+    {key: 'key14', name: '12月', width: '100', align: 'center'},
+    {key: 'action', name: '操作', width: '170', align: 'center', fixed: 'right'},
+]
+const tableData2 = ref([
+    {id: 1}, {id: 2},
 ])
 
 
@@ -111,14 +257,31 @@ const goBackClick = () => {
 const saveClick = () => {
 
 }
+
+//被卸载时
+onDeactivated(() => {
+    window.removeEventListener("resize",resizeEvent);
+})
 </script>
 
 <style lang="scss" scoped>
 .hc-program-annual-form-card-item {
     height: auto;
 }
+.hc-program-annual-form-tabs {
+    position: relative;
+    padding-top: 24px;
+    .el-tabs.form-tabs {
+        height: 100%;
+    }
+}
 </style>
 
 <style lang="scss">
-
+.hc-program-annual-form-tabs .el-tabs.form-tabs .el-tabs__content {
+    height: calc(100% - 39px);
+    .el-tab-pane {
+        height: 100%;
+    }
+}
 </style>