年度经营预算修改

src/views/program/annual/form.vue

@@ -3,7 +3,7 @@
         <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 mr-6">
+                    <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">
@@ -46,9 +46,9 @@
             </el-form>
         </HcCardItem>
         <div class="hc-program-annual-form-tabs" :style="tabsStyle">
-            <el-tabs type="border-card" class="form-tabs">
+            <el-tabs type="border-card" class="form-tabs"  v-model="editableTabsValue"  @tab-change="changeTab">
                 <el-tab-pane label="年度预算收入">
-                    <HcTable :isIndex="false" :column="tableColumn" :datas="formModel.incomeList">
+                    <HcTable :isIndex="false" :column="tableColumn" :datas="incomeTable"   >
                         <template #projectId="{row,index}">
                             <el-select v-model="row.projectId">
                                 <el-option v-for="item in projectData" :label="item.projectName" :value="item.projectId"/>
@@ -88,7 +88,7 @@
                     </HcTable>
                 </el-tab-pane>
                 <el-tab-pane label="年度预算支出">
-                    <HcTable :isIndex="false" :column="tableColumn1" :datas="formModel.disburseList">
+                    <HcTable :isIndex="false" :column="tableColumn1" :datas="costTable">
                         <template #budgetSubject="{row,index}">
                             <el-select v-model="row.budgetSubject">
                                 <el-option v-for="item in budgetTypeList" :label="item.dictName" :value="item.dictValue"/>
@@ -140,7 +140,7 @@
                                 <HcIcon name="add"/>
                                 <span>新增</span>
                             </el-button>
-                            <el-button size="small" type="danger"  @click="delRow1">
+                            <el-button size="small" type="danger"  @click="delRow1(row,index)">
                                 <HcIcon name="delete-bin"/>
                                 <span>删除</span>
                             </el-button>
@@ -168,7 +168,7 @@ import {useRouter, useRoute} from 'vue-router'
 import annualApi from '~api/program/annual.js';
 import costApi from '~api/project/cost.js';
 import {getChildList} from '~api/system/parameter.js';
-import {getArrValue,getObjValue} from "js-fast-way"
+import {getArrValue,getObjValue,formValidate} from "js-fast-way"
 import {getProjectList, getDictInfo} from "~api/other";
 const router = useRouter()
 const useRoutes = useRoute()
@@ -176,6 +176,7 @@ const dataId = ref(useRoutes?.query?.id ?? '')
 const dataType = ref(useRoutes?.query?.type ?? '')
 //页面激活
 onActivated(() => {
+    editableTabsValue.value='0'
     setFormTabsStyle()
     windowResize()
     dataId.value = useRoutes?.query?.id ?? ''
@@ -183,23 +184,36 @@ onActivated(() => {
     if(dataId.value.length>0){
         getDetail()
     }else{
-       
-        formModel.value={disburseList:[{}],incomeList:[{}]}
+       formModel.value={}
+        incomeTable.value=[{}]
+        costTable.value=[{}]
         betweenTime.value=[]
     }
     getProjectData()
     getIncomeType()
     getBudgetTypeList()
 })
-
+const costTable=ref([])
+const incomeTable=ref([])
+//深度监听
+watch(() => [
+    costTable.value,
+    incomeTable.value
+], ([cost,income]) => {
+    formModel.value.incomeList=cost
+    formModel.value.disburseList=income
+ 
+}, {deep: true})
 const getDetail = async() => {
     const {error, code, data} = await annualApi.getAnnualBudget({id:dataId.value})
     if (!error && code === 200) {
-        console.log(data,'data');
         formModel.value=getObjValue(data)
-  
+        incomeTable.value=data?.incomeList.length>0?data?.incomeList:[{}]
+        costTable.value=data?.disburseList.length>0?data?.disburseList:[{}]
+        
         betweenTime.value[0]=data['budgetStartTime']
         betweenTime.value[1]=data['budgetEndTime']
+       
     } else {
         formModel.value={}
     }
@@ -275,7 +289,9 @@ const formRef = ref(null)
 const formModel = ref({
     key1: '', key2: '', key3: '', key4: '', key5: '',
 })
-const formRules = {}
+const formRules = {
+    name: [{required: true, message: '请输入预算名称', trigger: 'change'}],
+}
 
 //日期时间被选择
 const betweenTime = ref([])
@@ -294,7 +310,8 @@ const resizeEvent = () => {
         setFormTabsStyle()
     })
 }
-
+//tabs切换
+const editableTabsValue=ref('0')
 //获取数据
 const tableColumn = [
     {key: 'projectId', name: '项目名称', minWidth: '180', align: 'center'},
@@ -306,21 +323,36 @@ const tableColumn = [
     {key: 'predictAnnualReturned', name: '预计本年度回款额', width: '180', align: 'center'},
     {key: 'action', name: '操作', width: '200', align: 'center', fixed: 'right'},
 ]
+
+
+//切换tab页
+const changeTab=(val)=>{
+    console.log(val,'val');
+    console.log(incomeTable.value,'incomeTable');
+    console.log(costTable.value,'incomeTable');
+}
+
 const tableData = ref([
     {id: 1}, {id: 2},
 ])
 const addRow=()=>{
-    formModel.value.incomeList.push({})
+    incomeTable.value.push({})
 }
 const delRow=(index)=>{
-    formModel.value.incomeList.splice(index, 1)
+    incomeTable.value.splice(index, 1)
+   if(incomeTable.value.length==0){
+        incomeTable.value.push({})
+    }
  
 }
 const addRow1=()=>{
-    formModel.value.disburseList.push({})
+    costTable.value.push({})
 }
 const delRow1=(index)=>{
-    formModel.value.disburseList.splice(index, 1)
+    costTable.value.splice(index, 1)
+    if(costTable.value.length==0){
+        costTable.value.push({})
+    }
  
 }
 const tableColumn1 = [
@@ -358,6 +390,9 @@ const addAnnualBudget=async(obj)=>{
     saveLoaing.value=false;
     if (!error && code === 200) {
         window.$message.success(msg)
+        router.push({
+            name: 'program-annual',
+        })
     } 
 
 }
@@ -368,22 +403,38 @@ const updateAnnualBudget=async(obj)=>{
     saveLoaing.value=false;
     if (!error && code === 200) {
        window.$message.success(msg)
+       router.push({
+        name: 'program-annual',
+       })
     } 
 
 }
+const isEmptyObj=(obj)=> {
+    let arr = Object.keys(obj);
+    return(arr.length == 0)
+
+}  
 //提交保存
 const saveLoaing=ref(false)
-const saveClick = () => {
-    if(formModel.value.disburseList[0]={}){
+const saveClick = async() => {
+    const res = await formValidate(formRef.value)
+    console.log(formModel.value,'formModel.value');
+    formModel.value.incomeList=incomeTable.value
+    formModel.value.disburseList=costTable.value
+    if(res){
+        if(isEmptyObj(formModel.value.disburseList[0])){
         formModel.value.disburseList=[]
-    }else if(formModel.value.incomeList[0]={}){
-        formModel.value.incomeList=[]
-    }
-    if(dataType.value=='edit'){
-      updateAnnualBudget(formModel.value)
-    }else{
-        addAnnualBudget(formModel.value)
+        }
+         if(isEmptyObj(formModel.value.incomeList[0])){
+            formModel.value.incomeList=[]
+        }
+        if(dataType.value=='edit'){
+            updateAnnualBudget(formModel.value)
+        }else{
+            addAnnualBudget(formModel.value)
+        }
     }
+
 }
 
 //被卸载时