平台应收保险公司筛选下拉框无法关闭bug处理

src/views/platform/index.vue

@@ -11,9 +11,8 @@
             </el-col>
             <el-col :span="8">
               <el-form-item label="保险公司">
-
                 <el-cascader filterable clearable placeholder="请选择" v-model="receivableForm.companyId"
-                :options="companyList" :props="companyIdprops" style="width: 100%;" @change="handleCompanyChange" />
+                  :options="companyList" :props="companyIdprops" style="width: 100%;" @change="handleCompanyChange" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -142,7 +141,9 @@
             <el-button class="radius-2px width-100" type="primary" @click="exportPlatformReceivable">导出</el-button>
           </div>
           <span class="col-108 m-r-8">
-            <el-button class="radius-2px width-100" :disabled="selectedList.some(item => item.settlementStatusName === '已结算')" @click="handleBatchEdit">批量修改比例</el-button>
+            <el-button class="radius-2px width-100"
+              :disabled="selectedList.some(item => item.settlementStatusName === '已结算')"
+              @click="handleBatchEdit">批量修改比例</el-button>
           </span>
           <span class="col-108 m-r-8">
             已选: <span class="text-red">{{ selectedList.length }}</span> 条
@@ -210,7 +211,7 @@
           <el-table-column label="操作" width="180" fixed="right">
             <template #default="scope">
               <el-button link type="primary" :disabled="scope.row.settlementStatusName == '已结算'"
-                @click="ticketRef.openSettlement([scope.row], scope.row.contactPerson)">结算</el-button>
+                @click="handleSettlement(scope.row)">结算</el-button>
               <el-button link type="primary" @click="toEdit(scope.row)">编辑</el-button>
               <el-button link type="primary" :disabled="scope.row.settlementStatusName == '已结算'"
                 @click="toDelete([scope.row.id])">删除</el-button>
@@ -410,6 +411,53 @@
         <el-button type="primary" @click="handleBatchEditSubmit()">确定</el-button>
       </template>
     </el-dialog>
+    <el-dialog :close-on-click-modal="false" v-model="settlementDialog" width="600" title="结算">
+      <el-form ref="CountFormRef" :model="countForm" :rules="settlementRules" label-width="120">
+        <el-form-item label="应收金额">
+          <el-input v-model="receivablePremium" placeholder="请输入" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="actualReceivedAmount" label="实收金额">
+          <el-input-number v-model="countForm.actualReceivedAmount" style="width: 100%;" :min="0" :precision="5"
+            controls-position="right" @change="handleChange" />
+        </el-form-item>
+        <el-form-item prop="settlementPaymentDifference" label="回款差额">
+          <el-input v-model="countForm.settlementPaymentDifference"></el-input>
+        </el-form-item>
+        <el-form-item prop="settlementPaymentReason" label="差额原因">
+          <el-input v-model="countForm.settlementPaymentReason" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivePaymentDate" label="收款日期">
+          <el-date-picker v-model="countForm.receivePaymentDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm:ss" />
+        </el-form-item>
+        <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
+          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h"
+            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage" drag>
+            <el-button style="height: 0;" link size="large" icon="Plus" />
+          </el-upload>
+          <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
+            <img :src="item" />
+            <div class="model">
+              <span class="icon-view" @click="handelViewImage(item, index)">
+                <el-icon>
+                  <View />
+                </el-icon>
+              </span>
+              <span class="icon-del" @click="handelDelImage(item, index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </span>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="settlementDialog = false">取消</el-button>
+        <el-button type="primary" @click="handelComfirm(CountFormRef)">确定结算</el-button>
+      </template>
+    </el-dialog>
+  <el-image-viewer v-if="imageShow" :url-list="[bigImageUrl]" @close="imageShow = false" />
   </PageMain>
   <ticket ref="ticketRef" />
 </template>
@@ -419,8 +467,25 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import { useRouter } from 'vue-router'
 import ticket from "./ticket.vue";
 import api from '@/api'
+const CountFormRef = ref<FormInstance>()
 
 let myRouter = useRouter()
+const countForm = ref({
+  invoicingId: '',
+  actualReceivedAmount: undefined,
+  settlementPaymentDifference: '',
+  settlementPaymentReason: '',
+  receivePaymentDate: '',
+  attachmentIds: [],
+})
+const receivablePremium = ref('')
+const settlementDialog = ref(false)//结算弹窗
+let settlementRules = ref({
+  actualReceivedAmount: [{ required: true, trigger: "blur", message: "请输入" }],
+  receivePaymentDate: [{ required: true, trigger: "change", message: "请选择" }],
+  attachmentIds: [{ required: true, message: "请上传" }]
+})
+let imageUrl = ref([])
 
 let ticketRef = ref(null)
 let activeName = ref('1')
@@ -481,9 +546,9 @@ const companyIdprops = {
 }
 // 保险公司选择器改变时触发
 const handleCompanyChange = (e) => {
-  console.log(e)
-
-  recordForm.value.companyId = e[e.length - 1] || ''
+  if (e) {
+    receivableForm.value.companyId = e[e.length - 1] || ''
+  }
 }
 let ReceiveDataRef1 = ref()
 // 选中的数据
@@ -931,9 +996,88 @@ const batchSettle = () => {
       }
     })
   }
+}
+const uploadImage = async (file, fileList) => {
+  let files = file.raw
+  const params = new FormData(); // 声明formData数据类型
+  params.append("file", files);
+  params.append("type", "image");
+  const { code, data, msg } = await api.commonApi.fileUpload(params)
+  if (code == 200) {
+    imageUrl.value.push(data.downloadUrl)
+    countForm.value.attachmentIds.push(data.id)
+  }
+}
+let imageShow = ref(false)
+let bigImageUrl = ref('')
+const handelViewImage = (item, index) => {
+  bigImageUrl.value = item
+  imageShow.value = true
+}
+const handelDelImage = (item, index) => {
+  imageUrl.value.splice(index, 1)
+  countForm.value.attachmentIds.splice(index, 1)
+}
+
 
+const handleChange = async () => {
+  const num = await calSub(countForm.value.actualReceivedAmount, receivablePremium.value)
+  countForm.value.settlementPaymentDifference = num
 }
+/**
+ * 计算两个数值的差值（被减数 - 减数）
+ * @param minuend 被减数
+ * @param subtrahend 减数
+ * @returns 差值，若接口无数据则返回 0
+ */
+const calSub = async (minuend: number = 0, subtrahend: number) => {
+  const res = await api.financeApi.calSub({ minuend, subtrahend })
+  return res.data || 0
+}
+const rowInfo = ref<any>({})
+const handleSettlement = (row: any) => {
+  CountFormRef.value?.resetFields()
+  rowInfo.value = row
+  api.financeApi.getPlatformSettlementReceivableAmount({
+    invoiceType: "5",
+    orderNos: [row.orderNo],
+  }).then((res: any) => {
+    if (res.code == 200) {
+      receivablePremium.value = res.data
+      countForm.value.actualReceivedAmount = res.data
+      settlementDialog.value = true
 
+    }
+  })
+}
+const handelComfirm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      api.financeApi.platformSettlement({
+        settlementVo: countForm.value,
+        invoicingVo: {
+          incomeIds: [rowInfo.value.id],
+          orderNos: [rowInfo.value.orderNo],
+          contactPerson: rowInfo.value.contactPerson || '',
+          contactPersonPhone: rowInfo.value.contactPersonPhone || '',
+          receivablePremium: receivablePremium.value,
+          invoiceType: "5"
+        }
+      }).then((res: any) => {
+        if (res.code == 200) {
+          ElMessage({
+            message: res.msg,
+            type: 'success'
+          })
+          getPlatFormReceivableList()
+          settlementDialog.value = false
+        } else {
+        }
+      })
+    }
+  })
+}
 onMounted(() => {
   dictDetails();
   initCompany();
@@ -976,6 +1120,7 @@ onMounted(() => {
 :deep(.el-radio) {
   width: 100%;
 }
+
 /* 自定义表格点击高亮颜色 */
 :deep(.el-table__body tr.current-row > td) {
   background-color: #c1e8fa !important;
@@ -984,4 +1129,52 @@ onMounted(() => {
 :deep(.el-table__body tr.current-row:hover > td) {
   background-color: #b4ddf8 !important;
 }
+.imageDiv {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 10px 10px 0;
+
+  &:hover {
+    .model {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, .3);
+    }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  .model {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    border-radius: 4px;
+    display: none;
+    top: 0;
+    left: 0;
+
+    .icon-view,
+    .icon-del {
+      color: #FFFFFF;
+      margin: 0 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.upload-btn {
+  :deep(.el-button) {
+    width: 80px;
+    height: 80px;
+    font-size: 30px;
+    color: #ccc;
+  }
+}
 </style>