需求池333 财务管理-财务列表，开票登记、到款登记，增加编辑功能

src/views/financialManagement/contractProgress.vue

@@ -305,7 +305,6 @@
           contractInfo.form.services_Qy_amount =''
         }
       }
-
     }else{
       if(contractInfo.form.contract_register_id){
         ElMessage.warning('合规套餐类型已定，不允许修改销售数量')
@@ -771,62 +770,57 @@
         amount:'',invoice_date:'',remark:'',amountDomType:'text',remarkDomType:'text'})
     }
   }
+  // 开票销售更改
+  const invoiceSellerChange=(row,value)=>{
+    if(row.service_product_id==1){
+      row.seller_name = contractInfo.sellerInvoiceListF.find(seller => seller.seller_id==value)?.seller_name
+    }else{
+      row.seller_name = contractInfo.sellerInvoiceListQ.find(seller => seller.seller_id==value)?.seller_name
+    }
+  }
+  // 判断表格当前行的信息是否填写完整
+  const canAddorEdit=(type,row)=>{
+    if(!(row.amount && row.invoice_date && row.service_product_id)){
+      return '请填写完整信息'
+    }
+    if(type=='invoice' && !row.seller_id){
+      return '请填写完整信息' 
+    }
+    return 1
+  }
 
   // 表格添加行
   const addRow=(type,row,index)=>{
-    if(!(row.amount && row.invoice_date && row.service_product_id)){
-      ElMessage.error('请填写完整信息')
-      return
-    }
-    if(type=='invoice'){
-      if(!row.seller_id){
-        ElMessage.error('请填写完整信息')
-        return
+    const flag = canAddorEdit(type,row)
+    if(flag==1){
+      if(type=='invoice'){
+        invoiceForm.invoiceData.push(
+        {service_product_id:sellerListType.value == 3?'':sellerListType.value,origin_amount:'',
+        amount:'',invoice_date:'',remark:'',seller_id:'',seller_name:'',amountDomType:'text',remarkDomType:'text'})
+      }else{
+        placementForm.placementData.push(
+        {service_product_id:sellerListType.value == 3?'':sellerListType.value,origin_amount:'',
+        amount:'',invoice_date:'',remark:'',amountDomType:'text',remarkDomType:'text'})
       }
-      invoiceForm.invoiceData.splice((index+1),0,
-      {service_product_id:sellerListType.value == 3?'':sellerListType.value,origin_amount:'',
-      amount:'',invoice_date:'',remark:'',seller_id:'',seller_name:'',amountDomType:'text',remarkDomType:'text'})
     }else{
-      placementForm.placementData.splice((index+1),0,
-      {service_product_id:sellerListType.value == 3?'':sellerListType.value,origin_amount:'',
-      amount:'',invoice_date:'',remark:'',amountDomType:'text',remarkDomType:'text'})
+      ElMessage.error(flag)
     }
   }
-  // 切换套餐类型
-  const productIdChange=(value,type,row)=>{
-    // 清空销售
-    if(type=='invoice'){
-      row.seller_id=''
+  // 表格编辑行
+  const editRow=(type,row)=>{
+    if(!row.isEdit){
+      // 编辑 -> 确定
+      row.isEdit=true
+      return
     }
-    if(!row.origin_amount) return
-    if(type=='invoice'){
-      // 开票
-      if(value==1){
-        //切换成FICC套餐类型
-        contractInfo.moneyData.haveInvoiceMoneyFICC += row.origin_amount
-        contractInfo.moneyData.haveInvoiceMoneyQY -= row.origin_amount
-      }else{
-        //切换成QY套餐类型
-        contractInfo.moneyData.haveInvoiceMoneyFICC -= row.origin_amount
-        contractInfo.moneyData.haveInvoiceMoneyQY += row.origin_amount
-      }
-      contractInfo.moneyData.haveInvoiceMoneyFICC = Math.round(contractInfo.moneyData.haveInvoiceMoneyFICC*100)/100
-      contractInfo.moneyData.haveInvoiceMoneyQY = Math.round(contractInfo.moneyData.haveInvoiceMoneyQY*100)/100
+    const flag = canAddorEdit(type,row)
+    if(flag==1){
+      // 确定 -> 编辑
+      row.isEdit=false
     }else{
-      if(value==1){
-        //切换成FICC套餐类型
-        contractInfo.moneyData.havePlacementMoneyFICC += row.origin_amount
-        contractInfo.moneyData.havePlacementMoneyQY -= row.origin_amount
-      }else{
-        //切换成QY套餐类型
-        contractInfo.moneyData.havePlacementMoneyFICC -= row.origin_amount
-        contractInfo.moneyData.havePlacementMoneyQY += row.origin_amount
-      }
-      contractInfo.moneyData.havePlacementMoneyFICC = Math.round(contractInfo.moneyData.havePlacementMoneyFICC*100)/100
-      contractInfo.moneyData.havePlacementMoneyQY = Math.round(contractInfo.moneyData.havePlacementMoneyQY*100)/100
+      ElMessage.error(flag)
     }
   }
-
   // 表格删除行
   const deleteRow=(type,row,index)=>{
     let tempArr=[]
@@ -888,6 +882,41 @@
       }).catch(()=>{})
     }
   }
+  // 切换套餐类型
+  const productIdChange=(value,type,row)=>{
+    // 清空销售
+    if(type=='invoice'){
+      row.seller_id=''
+      row.seller_name=''
+    }
+    if(!row.origin_amount) return
+    if(type=='invoice'){
+      // 开票
+      if(value==1){
+        //切换成FICC套餐类型
+        contractInfo.moneyData.haveInvoiceMoneyFICC += row.origin_amount
+        contractInfo.moneyData.haveInvoiceMoneyQY -= row.origin_amount
+      }else{
+        //切换成QY套餐类型
+        contractInfo.moneyData.haveInvoiceMoneyFICC -= row.origin_amount
+        contractInfo.moneyData.haveInvoiceMoneyQY += row.origin_amount
+      }
+      contractInfo.moneyData.haveInvoiceMoneyFICC = Math.round(contractInfo.moneyData.haveInvoiceMoneyFICC*100)/100
+      contractInfo.moneyData.haveInvoiceMoneyQY = Math.round(contractInfo.moneyData.haveInvoiceMoneyQY*100)/100
+    }else{
+      if(value==1){
+        //切换成FICC套餐类型
+        contractInfo.moneyData.havePlacementMoneyFICC += row.origin_amount
+        contractInfo.moneyData.havePlacementMoneyQY -= row.origin_amount
+      }else{
+        //切换成QY套餐类型
+        contractInfo.moneyData.havePlacementMoneyFICC -= row.origin_amount
+        contractInfo.moneyData.havePlacementMoneyQY += row.origin_amount
+      }
+      contractInfo.moneyData.havePlacementMoneyFICC = Math.round(contractInfo.moneyData.havePlacementMoneyFICC*100)/100
+      contractInfo.moneyData.havePlacementMoneyQY = Math.round(contractInfo.moneyData.havePlacementMoneyQY*100)/100
+    }
+  }
   // 金额改变
   const moneyChange=(type,value,index,row)=>{ 
     // console.log(value);
@@ -1445,7 +1474,10 @@
             invoice_date:item.invoice_time,
             remark:item.remark,
             seller_id:item.seller_id,
-            seller_name:item.seller_name
+            seller_name:item.seller_name,
+            amountDomType:'text',
+            remarkDomType:'text',
+            isEdit:false
           })
         })
         // 添加一行空的
@@ -1481,7 +1513,10 @@
             amount:item.amount,
             is_pre_pay:item.is_pre_pay,
             invoice_date:item.invoice_time,
-            remark:item.remark
+            remark:item.remark,
+            amountDomType:'text',
+            remarkDomType:'text',
+            isEdit:false
           })
         })
         // 添加一行空的
@@ -1810,7 +1845,7 @@
                             <span style="color: var(--dangerColor);">*</span>套餐类型
                           </template>
                           <template #default="{row,$index}">
-                            <el-form-item :prop="`invoiceData.${$index}.service_product_id`" :show-message="false" v-if="!row.invoice_id"
+                            <el-form-item :prop="`invoiceData.${$index}.service_product_id`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                             :rules="{required:true,message:()=>{ ElMessage.error('套餐类型不能为空')},trigger:'change'}">
                               <el-select v-model="row.service_product_id" style="width: 124px;" @change="value=> productIdChange(value,'invoice',row)"
                               placeholder="请选择套餐" filterable>
@@ -1818,7 +1853,7 @@
                                 <el-option label="权益套餐" :value="2"></el-option>
                               </el-select>
                             </el-form-item>
-                            <span v-else>{{ row.service_product_id?row.service_product_id==1?'FICC套餐':'权益套餐' : '--' }}</span>
+                            <span v-show="row.invoice_id && !row.isEdit">{{ row.service_product_id?row.service_product_id==1?'FICC套餐':'权益套餐' : '--' }}</span>
                           </template>
                         </el-table-column>
                         <el-table-column label="开票金额" width="160" show-overflow-tooltip  align="center" prop="origin_amount">
@@ -1826,7 +1861,7 @@
                             <span style="color: var(--dangerColor);">*</span>开票金额
                           </template>
                           <template #default="{row,$index}">
-                            <el-form-item :prop="`invoiceData.${$index}.origin_amount`" :show-message="false" v-if="!row.invoice_id"
+                            <el-form-item :prop="`invoiceData.${$index}.origin_amount`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                             :rules="{required:true,message:()=>{ ElMessage.error('开票金额不能为空')},trigger:'blur'}">
                               <label :for="'invoice'+$index+'origin_amount'" style="cursor: pointer;" 
                               :style="{color:row.origin_amount?'var(--secondaryTextColor)':'var(--hitTextColorOne)'}"
@@ -1837,7 +1872,9 @@
                               v-show="row.amountDomType=='input'" @blur="iandPAmountBlur(row)"
                                 placeholder="请输入金额" @input="(e)=>moneyChange('invoice',e,$index,row)"></el-input>
                             </el-form-item>
-                            <span  v-else>{{ row.origin_amount.toFixed(2)}}</span>
+                            <span  v-show="row.invoice_id && !row.isEdit">
+                              {{ row.origin_amount?parseFloat(row.origin_amount).toFixed(2):'--'}}
+                            </span>
                           </template>
                         </el-table-column>
                         <el-table-column label="换算金额（元）" show-overflow-tooltip width="160" align="center" prop="amount">
@@ -1851,12 +1888,12 @@
                             <span style="color: var(--dangerColor);">*</span>开票日
                           </template>
                           <template #default="{row,$index}" >
-                            <el-form-item :prop="`invoiceData.${$index}.invoice_date`" :show-message="false" v-if="!row.invoice_id"
+                            <el-form-item :prop="`invoiceData.${$index}.invoice_date`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                             :rules="{required:true,message:()=>{ ElMessage.error('请选择开票日')},trigger:'change'}">       
                               <el-date-picker v-model="row.invoice_date" style="width: 124px;"
                               placeholder="请选择日期" value-format="YYYY-MM-DD" :clearable="false" ></el-date-picker>
                             </el-form-item>
-                            <span v-show="row.invoice_id">{{ row.invoice_date || '--' }}</span>
+                            <span v-show="row.invoice_id && !row.isEdit">{{ row.invoice_date || '--' }}</span>
                           </template>
                         </el-table-column >
                         <el-table-column label="销售" width="120" align="center" prop="seller_id">
@@ -1864,16 +1901,16 @@
                             <span style="color: var(--dangerColor);">*</span>销售
                           </template>
                           <template #default="{row,$index}">
-                            <el-form-item :prop="`invoiceData.${$index}.seller_id`" :show-message="false" v-if="!row.invoice_id"
+                            <el-form-item :prop="`invoiceData.${$index}.seller_id`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                             :rules="{required:true,message:()=>{ ElMessage.error('销售不能为空')},trigger:'change'}">
                               <el-select v-model="row.seller_id" style="width: 124px;" :ref='`invoiceData-service_product_id${$index}`'
-                              placeholder="请选择销售" filterable v-if="row.service_product_id==1">
+                              placeholder="请选择销售" filterable v-if="row.service_product_id==1" @change="(value)=> invoiceSellerChange(row,value)">
                                 <el-option :label="item.seller_name" :value="item.seller_id" 
                                 v-for="item in contractInfo.sellerInvoiceListF" :key="item.seller_id">
                                 </el-option>
                               </el-select>
                               <el-select v-model="row.seller_id" style="width: 124px;" :ref='`invoiceData-service_product_id${$index}`'
-                              placeholder="请选择销售" filterable v-else-if="row.service_product_id==2">
+                              placeholder="请选择销售" filterable v-else-if="row.service_product_id==2" @change="(value)=> invoiceSellerChange(row,value)">
                                 <el-option :label="item.seller_name" :value="item.seller_id" 
                                 v-for="item in contractInfo.sellerInvoiceListQ" :key="item.seller_id">
                                 </el-option>
@@ -1883,25 +1920,27 @@
                                 @visible-change="selectVisible">
                               </el-select>
                             </el-form-item>
-                            <span v-else>{{ row.seller_name || '--' }}</span>
+                            <span v-show="row.invoice_id && !row.isEdit">{{ row.seller_name || '--' }}</span>
                           </template>
                         </el-table-column>
                         <el-table-column label="备注" width="160" align="center" prop="remark" show-overflow-tooltip >
                           <template #default="{row,$index}">
-                            <el-form-item  v-if="!row.invoice_id">             
+                            <el-form-item  v-show="!row.invoice_id || row.isEdit">             
                               <label :for="'invoice'+$index+'remark'" style="cursor: pointer;" v-show="row.remarkDomType=='text'" 
                               :style="{color:row.remark?'var(--secondaryTextColor)':'var(--hitTextColorOne)'}"
                               @click="iandPInput(row,'remarkDomType')">{{ row.remark || '单击此处输入备注'}}</label>
                               <el-input v-model="row.remark" :id="'invoice'+$index+'remark'" style="width: 124px;" placeholder="请输入备注" 
                               v-show="row.remarkDomType=='input'" @blur="row.remarkDomType='text'"/>
                             </el-form-item>
-                            <span v-else>{{row.remark || '--'}}</span>
+                            <span v-show="row.invoice_id && !row.isEdit">{{row.remark || '--'}}</span>
                           </template>
                         </el-table-column>
                         <el-table-column label="操作" width="120" align="center" v-if="contractInfo.operationtype=='invoice'">
                           <template #default="{row,$index,column}" >
                             <span class="table-operation-button" v-show="$index==invoiceForm.invoiceData.length-1" 
-                            @click="addRow('invoice',row,$index)" style="margin-right: 10px;">添加</span>
+                            @click="addRow('invoice',row,$index)" style="margin-right: 6px;">添加</span>
+                            <span class="table-operation-button" style="margin-right: 6px;" v-show="row.invoice_id" 
+                            @click="editRow('invoice',row)">{{ row.isEdit?'确定':'编辑' }}</span>
                             <span class="table-operation-button" style="color: var(--dangerColor);" 
                             @click="deleteRow('invoice',row,$index)">删除</span>
                           </template>
@@ -2004,7 +2043,7 @@
                             <span style="color: var(--dangerColor);">*</span>套餐类型
                           </template>
                           <template #default="{row,$index}">
-                            <el-form-item :prop="`placementData.${$index}.service_product_id`" :show-message="false" v-if="!row.invoice_id"
+                            <el-form-item :prop="`placementData.${$index}.service_product_id`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                             :rules="{required:true,message:()=>{ ElMessage.error('套餐类型不能为空')},trigger:'change'}">
                               <el-select v-model="row.service_product_id" style="width: 124px;" @change="value=> productIdChange(value,'placement',row)"
                               placeholder="请选择套餐" filterable>
@@ -2012,7 +2051,7 @@
                                 <el-option label="权益套餐" :value="2"></el-option>
                               </el-select>
                             </el-form-item>
-                            <span v-else>{{ row.service_product_id?row.service_product_id==1?'FICC套餐':'权益套餐' : '--' }}</span>
+                            <span v-show="row.invoice_id && !row.isEdit">{{ row.service_product_id?row.service_product_id==1?'FICC套餐':'权益套餐' : '--' }}</span>
                           </template>
                         </el-table-column>
                         <el-table-column label="到款金额" width="160" align="center" prop="origin_amount">
@@ -2020,7 +2059,7 @@
                             <span style="color: var(--dangerColor);">*</span>到款金额
                           </template>
                           <template #default="{row,$index}">
-                            <el-form-item :prop="`placementData.${$index}.origin_amount`" :show-message="false" v-if="!row.invoice_id"
+                            <el-form-item :prop="`placementData.${$index}.origin_amount`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                             :rules="{required:true,message:()=>{ ElMessage.error('到款金额不能为空')},trigger:'blur'}">
                               <label :for="'placement'+$index+'origin_amount'" style="cursor: pointer;" 
                               :style="{color:row.origin_amount?'var(--secondaryTextColor)':'var(--hitTextColorOne)'}"
@@ -2031,7 +2070,9 @@
                               style="width: 124px;" v-show="row.amountDomType=='input'" @blur="iandPAmountBlur(row)"
                               placeholder="请输入金额" @input="(e)=>moneyChange('placement',e,$index,row)"></el-input>
                             </el-form-item>
-                            <span  v-else>{{ row.origin_amount.toFixed(2)}}</span>
+                            <span  v-show="row.invoice_id && !row.isEdit">
+                              {{ row.origin_amount?parseFloat(row.origin_amount).toFixed(2):'--' }}
+                            </span>
                           </template>
                         </el-table-column>
                         <el-table-column label="换算金额（元）" width="160" align="center" prop="amount">
@@ -2045,24 +2086,24 @@
                             <span style="color: var(--dangerColor);">*</span>到款日
                           </template>
                           <template #default="{row,$index}">
-                            <el-form-item :prop="`placementData.${$index}.invoice_date`" :show-message="false" v-if="!row.invoice_id"
+                            <el-form-item :prop="`placementData.${$index}.invoice_date`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                             :rules="{required:true,message:()=>{ ElMessage.error('请选择到款日')},trigger:'change'}">             
                               <el-date-picker v-model="row.invoice_date" style="width: 124px;" :clearable="false" 
                               placeholder="请选择日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD"></el-date-picker>
                             </el-form-item>
-                            <span v-show="row.invoice_id">{{ row.invoice_date || '--' }}</span>
+                            <span v-show="row.invoice_id && !row.isEdit">{{ row.invoice_date || '--' }}</span>
                           </template>
                         </el-table-column>
                         <el-table-column label="备注" width="160" align="center" prop="remark" show-overflow-tooltip >
                           <template #default="{row,$index}">
-                            <el-form-item  v-if="!row.invoice_id">
+                            <el-form-item  v-show="!row.invoice_id || row.isEdit">
                               <label :for="'placement'+$index+'remark'" style="cursor: pointer;" v-show="row.remarkDomType=='text'" 
                               :style="{color:row.remark?'var(--secondaryTextColor)':'var(--hitTextColorOne)'}"
                               @click="iandPInput(row,'remarkDomType')">{{ row.remark || '单击此处输入备注'}}</label>         
                               <el-input v-model="row.remark" :id="'placement'+$index+'remark'" style="width: 124px;" placeholder="请输入备注"
                               v-show="row.remarkDomType=='input'" @blur="row.remarkDomType='text'"/>
                             </el-form-item>
-                            <span v-else>{{row.remark || '--'}}</span>
+                            <span v-show="row.invoice_id && !row.isEdit">{{row.remark || '--'}}</span>
                           </template>
                         </el-table-column>
                         <el-table-column label="操作" width="120" align="center" v-if="contractInfo.operationtype=='placement'">
@@ -2070,6 +2111,8 @@
                             <span class="table-operation-button" @click="addRow('placement',row,$index)" 
                             v-show="$index==placementForm.placementData.length-1" 
                             style="margin-right: 10px;">添加</span>
+                            <span class="table-operation-button" style="margin-right: 6px;" v-show="row.invoice_id" 
+                            @click="editRow('placement',row)">{{ row.isEdit?'确定':'编辑' }}</span>
                             <span class="table-operation-button" @click="deleteRow('placement',row,$index)"
                             style="color: var(--dangerColor);">删除</span>
                           </template>