回款差额使用接口计算

src/views/platform/ticket.vue

@@ -159,7 +159,8 @@
         <el-input v-model="receivablePremium" placeholder="请输入" disabled></el-input>
       </el-form-item>
       <el-form-item prop="actualReceivedAmount" label="实收金额">
-        <el-input v-model="countForm.actualReceivedAmount" placeholder="请输入"></el-input>
+        <el-input-number v-model="countForm.actualReceivedAmount" style="width: 100%;" :min="0" :precision="4"
+          controls-position="right"  @change="handleChange" />
       </el-form-item>
       <el-form-item prop="paymentDifference" label="回款金额">
         <el-input v-model="countForm.paymentDifference" placeholder="请输入" disabled></el-input>
@@ -233,13 +234,7 @@ let settlementRules = ref({
   receivePaymentDate: [{ required: true, trigger: "change", message: "请选择" }],
   attachmentIds: [{ required: true, message: "请上传" }]
 })
-watch(
-  () => [countForm.value.actualReceivedAmount, receivablePremium.value],
-  ([actual, receivable]) => {
-    countForm.value.paymentDifference = Number(actual) - Number(receivable)
-  },
-  { immediate: true }
-)
+
 let imageUrl = ref([])
 
 //获取保险公司协议
@@ -477,6 +472,22 @@ const initCompany = () => {
   })
 }
 
+const handleChange = async () => {
+  const num = await calSub(receivablePremium.value, countForm.value.actualReceivedAmount)
+  countForm.value.paymentDifference = num
+}
+
+/**
+ * 计算两个数值的差值（被减数 - 减数）
+ * @param minuend 被减数
+ * @param subtrahend 减数
+ * @returns 差值，若接口无数据则返回 0
+ */
+const calSub = async (minuend:number, subtrahend:number) => {
+  const res = await api.financeApi.calSub({ minuend, subtrahend })
+  return res.data || 0
+}
+
 const openSettlement = (list,id) => {
   companyId.value = id
   selectedList.value = list

src/views/receivable/handingFee/ticket.vue

@@ -167,10 +167,10 @@
         </el-form-item>
         <el-form-item prop="receivableSupervisePremium" label="应收金额">
           <el-input-number v-model="countForm.receivableSupervisePremium" style="width: 100%;" :min="0" :precision="4"
-            @change="handleChange" />
+            controls-position="right"  @change="handleChange" />
         </el-form-item>
         <el-form-item prop="overinflatedAmount" label="虚增金额">
-          <el-input v-model="countForm.overinflatedAmount" placeholder="请输入"></el-input>
+          <el-input v-model="countForm.overinflatedAmount" disabled placeholder="请输入"></el-input>
         </el-form-item>
         <el-form-item prop="actualReceivedAmount" label="差额原因">
           <el-input v-model="countForm.paymentReason" placeholder="请输入"></el-input>
@@ -181,10 +181,10 @@
         </el-form-item>
         <el-form-item v-if="isSettlement" prop="actualReceivedAmount" label="实收金额">
           <el-input-number v-model="countForm.actualReceivedAmount" style="width: 100%;" :min="0" :precision="4"
-            @change="handleChange1" />
+            controls-position="right"  @change="handleChange1" />
         </el-form-item>
         <el-form-item v-if="isSettlement" prop="actualReceivedAmount" label="回款差额">
-          <el-input v-model="countForm.paymentDifference" placeholder="请输入"></el-input>
+          <el-input v-model="countForm.paymentDifference" disabled placeholder="请输入"></el-input>
         </el-form-item>
         <el-form-item v-if="isSettlement" prop="receivePaymentDate" label="收款日期">
           <el-date-picker v-model="countForm.receivePaymentDate" style="width: 100%;" type="date"