供应商发票申请--新增--计算差额，税率

src/components/BasicForm/src/BasicForm.vue

@@ -89,7 +89,11 @@
         @inputNumberChange="inputNumberChange"
         @tableFormSelectOnBlur="tableFormSelectOnBlur"
         @formFormDateChange="formFormDateChange"
-      />
+      >
+      <template v-slot="{row}">
+        <slot :row="row"></slot>
+      </template>
+    </TableForm>
     </div>
     <div v-if="isBusiness && formType == 'create' && fromeWhere == 'countPlan'">
       <TableFormCountPlan 
@@ -275,12 +279,17 @@ const props = defineProps({
   //表单中展示的数据，需要用searchTable中字段计算
   /***[{
     formField:form中对应的field,
-    valueField:searchtable中对应的field,
+    tableField:searchtable中对应的field,
   }]*/
-  sumFormData:{
+  sumFormDataField:{
     type: Array,
     required: false,
     default: null
+  },
+  sumFormDataByForm:{
+    type:Function,
+    required: false,
+    default: null
   }
 })
 
@@ -395,11 +404,11 @@ const opensearchTable = (
 }
 
 
-const changeSumFormData = () => {
+const sumFormDataByTable = () => {
-  if(props.sumFormData){
+  if(props.sumFormDataField){
     const sumObject = {}
-    props.sumFormData.forEach(sumItem=>{
+    props.sumFormDataField.forEach(sumItem=>{
-      sumObject[sumItem?.formField]= props.tableData.reduce((prev, item) => prev + item[sumItem?.valueField],0)
+      sumObject[sumItem?.formField]= props.tableData.reduce((prev, item) => prev + item[sumItem?.tableField],0)
     })
     nextTick(()=>{
       formRef.value.setValues(sumObject)
@@ -407,7 +416,13 @@ const changeSumFormData = () => {
   }
 }
 watch(()=>props.tableData,() => {
-  changeSumFormData()
+  sumFormDataByTable()
+
+},{
+  deep:true
+})
+watch(()=>unref(formRef)?.formModel,() => {
+  props?.sumFormDataByForm(formRef,unref(formRef)?.formModel)
 },{
   deep:true
 })

src/components/TableForm/src/TableForm.vue

@@ -69,6 +69,9 @@
             />
             <el-button  v-if="headerItem?.tableForm?.isInpuFocusShow" @click="inpuFocus(headerItem,row,index)"><Icon icon="ep:search" size="14"/></el-button>
           </el-form-item>
+          <el-form-item  v-if="headerItem?.tableForm?.type == 'slot'">
+            <slot :row="row"></slot>
+          </el-form-item>
           <!-- 金额输入框 -->
             <el-form-item 
               v-if="headerItem?.tableForm?.type == 'number'"

src/views/wms/supplierManage/supplierinvoice/supplierinvoiceRequestMain/index.vue

@@ -43,18 +43,28 @@
     :tableAllSchemas="SupplierinvoiceRequestDetail.allSchemas" 
     :tableFormRules="SupplierinvoiceRequestDetailRules"
     :tableData="tableData" 
-    :sumFormData = "[{
+    :sumFormDataField = "[{
       formField:'amount',
-      valueField:'singlePrice'
+      tableField:'singlePrice'
     }]"
+    :sumFormDataByForm ="(formRef,formModel)=>{
+      const {taxRate=0,amount=0} = formModel
+      formRef.value.setValues({
+        taxAmount:taxRate*amount
+      })
+    }"
     :apiUpdate="SupplierinvoiceRequestMainApi.updateSupplierinvoiceRequestMain"
     :apiCreate="SupplierinvoiceRequestMainApi.createSupplierinvoiceRequestMain" 
     :isBusiness="true"
     @handleAddTable="handleAddTable" 
     @handleDeleteTable="handleDeleteTable" 
     @searchTableSuccess="searchTableSuccess"
-    @submitForm="submitForm" 
+    @submitForm="submitForm"
-  />
+  >      
+    <template v-slot="{row}">
+      <el-input :disabled="true" :class="{'is-red': row['singlePrice'] - row['purchasePrice'] > 0}" :modelValue="row['singlePrice'] - row['purchasePrice']"/>
+    </template>
+  </BasicForm>
 
   <!-- 详情 -->
   <Detail
@@ -134,7 +144,7 @@
       searchTablePage: SupplierApi.getSupplierPage
     }
   ])
-
+ 
   // 查询页面返回
   const searchTableSuccess = (formField, searchField, val, searchFormRef, type, row) => {
     nextTick(() => {
@@ -566,3 +576,12 @@ const importSuccess = () => {
     importTemplateData.templateUrl = await SupplierinvoiceRequestMainApi.importTemplate()
   })
 </script>
+
+<style lang="scss" scoped>
+.is-red{
+  border-radius:var(--el-border-radius-base);
+  border:1px solid var(--el-color-danger);
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+
+}
+</style>

src/views/wms/supplierManage/supplierinvoice/supplierinvoiceRequestMain/supplierinvoiceRequestMain.data.ts

@@ -187,6 +187,7 @@ export const SupplierinvoiceRequestMain = useCrudSchemas(reactive<CrudSchema[]>(
       componentProps: {
         min: 0,
         precision: 6,
+        disabled: true,
       }
     },
     tableForm: {
@@ -734,6 +735,7 @@ export const SupplierinvoiceRequestDetail = useCrudSchemas(reactive<CrudSchema[]
       }
     },
     tableForm:{
+      type: 'slot',
       disabled: true
     }
   },