tenant-Platform/src/views/receivable/handingFee/ticket.vue

<template>
  <div class="ticket">
    <div class="search-list">
      <div class="search-left">
        <el-select v-model="logicJudge">
          <el-option value="and" label="并且"></el-option>
          <el-option value="or" label="或者"></el-option>
        </el-select>
      </div>
      <div class="search-right">
        <div class="search-type" v-for="(item, index) in searchList">
          <el-select v-model="item.name" style="margin-right: 20px; width: 220px" disabled>
            <el-option value="companyId" label="保险公司"></el-option>
            <el-option value="signDate" label="签单时间"></el-option>
            <el-option value="ptlAgreement" label="出单协议"></el-option>
            <el-option value="orderType" label="订单类型"></el-option>
            <el-option value="signYear" label="签单年份"></el-option>
            <el-option value="licenseNo" label="车牌号"></el-option>
            <el-option value="jqPolicyNo" label="交强险保单号"></el-option>
            <el-option value="syPolicyNo" label="商业险保单号"></el-option>
            <el-option value="jyPolicyNo" label="非车险保单号"></el-option>
          </el-select>
          <el-select v-model="item.type" v-if="item.name != 'signDate'" style="margin-right: 20px; width: 150px"
            @change="val => signDateSelectChange(index, val)">
            <el-option value="等于" label="等于"></el-option>
            <el-option value="不等于" label="不等于"></el-option>
            <el-option value="包含" label="包含"></el-option>
            <el-option value="不包含" label="不包含"></el-option>
            <el-option value="为空" label="为空"></el-option>
          </el-select>
          <el-select v-model="item.type" v-else style="margin-right: 20px; width: 150px"
            @change="val => signDateSelectChange(index, val)">
            <el-option value="大于等于" label="大于等于"></el-option>
            <el-option value="小于等于" label="小于等于"></el-option>
            <el-option value="固定范围" label="固定范围"></el-option>
            <el-option value="不在固定范围" label="不在固定范围"></el-option>
            <el-option value="为空" label="为空"></el-option>
          </el-select>
          <el-cascader class="w-350px" filterable clearable :disabled="item.type == '为空'"
            v-if="item.name == 'companyId'" placeholder="请选择" v-model="item.search" :options="companyList"
            :props="companyIdprops" @change="handleCompanyChange(index, $event)" />
          <el-date-picker style="width: 350px" v-model="datesearch" v-if="item.name == 'signDate'"
            :type="item.type == '大于等于' || item.type == '小于等于' ? 'date' : 'daterange'" placeholder="请选择"
            :disabled="item.type == '为空'" @change="handlePtlAgreementChange(index, $event)" value-format="YYYY-MM-DD" />
          <el-select style="width: 350px" v-model="multipleSearch" v-if="item.name == 'ptlAgreement'" multiple
            filterable :disabled="item.type == '为空'" @change="handlePtlAgreementChange(index, $event)">
            <el-option v-for="item in insurerContract" :key="item.id" :value="item.id"
              :label="item.agreementName"></el-option>
          </el-select>
          <el-select style="width: 350px" v-model="orderTypesearch" v-if="item.name == 'orderType'" multiple
            :disabled="item.type == '为空'" @change="handlePtlAgreementChange(index, $event)">
            <el-option value="1" label="车险订单"></el-option>
            <el-option value="2" label="代客录单"></el-option>
            <el-option value="3" label="补录订单"></el-option>
          </el-select>
          <el-date-picker v-if="item.name == 'signYear'" style="width: 350px" format="YYYY" value-format="YYYY"
            v-model="yearrangesearch" type="yearrange" range-separator="-" :disabled="item.type == '为空'"
            @change="handlePtlAgreementChange(index, $event)" />
          <el-input v-if="item.name == 'licenseNo' || item.name == 'jqPolicyNo' || item.name == 'syPolicyNo' || item.name == 'jyPolicyNo'"
            placeholder="请输入" style="width: 350px" v-model="item.search" />
        </div>
        <el-button type="primary" class="w-88px" @click="handleSearch">搜索</el-button>

      </div>

    </div>
    <div class="tips">
      <p>应收明细</p>
      <el-button type="primary" @click="addTicket">添加应收</el-button>
    </div>
    <el-table :data="tableData" style="height: calc(100% - 300px)" show-summary
      :summary-method="val => getSummaries(val, ['jqPremium', 'jqSuperviseCostsProportion', 'syPremium', 'sySuperviseCostsProportion', 'receivableAmount', 'receivableAmount4Car', 'receivableAmount4Other'])">
      <template #empty>
        <div v-if="noData">暂无应收，点击<el-button link type="primary" @click="batchShow = true">导入应收</el-button></div>
        <div v-else>没有符合的应收单据~</div>
      </template>
      <el-table-column prop="licenseNo" label="车牌号"></el-table-column>
      <el-table-column prop="companyName" label="保险公司"></el-table-column>
      <el-table-column prop="partnerCompanySimplyName" label="保险机构"></el-table-column>
      <el-table-column prop="signingTime" label="签单时间"></el-table-column>
      <el-table-column prop="agreementName" label="协议名称"></el-table-column>
      <el-table-column prop="companyNameSimple" label="地区归属"></el-table-column>
      <el-table-column prop="orderType" label="订单类型"></el-table-column>
      <el-table-column prop="signYear" label="签单年份"></el-table-column>
      <el-table-column prop="orderNo" label="订单号"></el-table-column>
      <el-table-column prop="jqPolicyNo" label="交强保单号"></el-table-column>
      <el-table-column prop="syPolicyNo" label="商业保单号"></el-table-column>
      <el-table-column prop="jqPremium" label="交强险保费"></el-table-column>
      <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例"></el-table-column>
      <el-table-column prop="syPremium" label="商业险保费"></el-table-column>
      <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例"></el-table-column>
      <el-table-column prop="receivableAmount" label="总应收"></el-table-column>
      <el-table-column v-if="route.query.invoiceType == '1'" prop="carInsuranceSuperviseCostsPremiums" label="车险手续费"></el-table-column>
      <el-table-column v-if="route.query.invoiceType == '3'" prop="nonCarInsuranceSuperviseCostsPremiums"
        label="非车险手续费"></el-table-column>
    </el-table>
    <div class="footer">
      <el-button plain @click="router.push({
        path: previousRoute,
        query: {
          activeindex: activeindex
        }
      })">取消</el-button>
      <el-button plain type="primary" @click="handleTicket(true)">开票并结算</el-button>
      <el-button type="primary" @click="handleTicket(false)">开票</el-button>
    </div>
    <el-dialog :close-on-click-modal="false" v-model="addShow" width="800" title="添加应收">
      <div class="add-content">
        <el-input v-model="addSearchValue" style="max-width: 500px" :placeholder="`请输入${placeholder}`"
          class="input-with-select">
          <template #prepend>
            <el-select v-model="addSelectType" placeholder="请选择" style="width: 120px"
              @change="handleAddSelectTypeChange">
              <el-option label="订单号查询" value="1" />
              <el-option label="交强险保单号查询" value="2" />
              <el-option label="商业险保单号查询" value="3" />
            </el-select>
          </template>
          <template #append>
            <el-button type="primary" @click="getUnauditedOrder">搜索</el-button>
          </template>
        </el-input>
        <el-table :data="selectingData" style="width: 100%;">
          <el-table-column prop="a" label="费用状态" width="100"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
          <el-table-column prop="jqPolicyNo" label="交强保单号" width="120"></el-table-column>
          <el-table-column prop="syPolicyNo" label="商业保单号" width="120"></el-table-column>
          <el-table-column prop="jqPremium" label="交强保费" width="100"></el-table-column>
          <el-table-column prop="jqSuperviseCostsProportion" label="交强手续费比例" width="100"></el-table-column>
          <el-table-column prop="syPremium" label="商业保费" width="100"></el-table-column>
          <el-table-column prop="sySuperviseCostsProportion" label="商业手续费比例" width="100"></el-table-column>
          <el-table-column prop="a" label="应收金额" width="100"></el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template #default="scope">
              <el-button link type="primary" @click="handleToAdd(scope.row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <p>已添加的应收单据</p>
        <el-table :data="selectedData" style="width: 100%;">
          <el-table-column prop="a" label="费用状态" width="100"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
          <el-table-column prop="jqPolicyNo" label="交强保单号" width="120"></el-table-column>
          <el-table-column prop="syPolicyNo" label="商业保单号" width="120"></el-table-column>
          <el-table-column prop="jqPremium" label="交强保费" width="100"></el-table-column>
          <el-table-column prop="jqSuperviseCostsProportion" label="交强手续费比例" width="100"></el-table-column>
          <el-table-column prop="syPremium" label="商业保费" width="100"></el-table-column>
          <el-table-column prop="sySuperviseCostsProportion" label="商业手续费比例" width="100"></el-table-column>
          <el-table-column prop="a" label="应收金额" width="100"></el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template #default="scope">
              <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="addShow = false">取消</el-button>
        <el-button type="primary" @click="handleAddSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="countShow" width="600" :title="isSettlement ? '开票并结算' : '开票'"
      top="1vh">
      <el-form ref="CountForm" :model="countForm" :rules="countRules" label-width="120">
        <el-form-item prop="invoiceParty" label="开票方">
          <el-select v-model="countForm.invoiceParty" placeholder="请选择开票方">
            <el-option label="我方开票" value="1"></el-option>
            <el-option label="保司开票" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="invoiceNo" label="开票号" v-if="countForm.invoiceParty == '1'">
          <el-input v-model="countForm.invoiceNo" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="taxPoint" label="税点">
          <el-input v-model="countForm.taxPoint" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="应收金额">
          <el-input v-model="receivableSupervisePremium" placeholder="请输入" disabled></el-input>
        </el-form-item>
        <el-form-item prop="receivableSupervisePremium" label="开票金额">
          <el-input-number v-model="countForm.receivableSupervisePremium" style="width: 100%;" :min="0"
            :max="1111111111111" :precision="2" controls-position="right" @change="handleChange(); handleChange1()" />
        </el-form-item>
        <el-form-item v-if="isSettlement" prop="actualReceivedAmount" label="实收金额">
          <el-input-number v-model="countForm.actualReceivedAmount" style="width: 100%;" :min="0"
            :max="1111111111111111" :precision="2" controls-position="right" @change="handleChange" />
        </el-form-item>
        <el-form-item prop="overinflatedAmount" label="虚增金额">
          <el-input v-model="countForm.overinflatedAmount" disabled></el-input>
        </el-form-item>
        <el-form-item prop="paymentReason" label="虚增金额原因">
          <el-input v-model="countForm.paymentReason" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item v-if="isSettlement && countForm.actualReceivedAmount >= countForm.receivableSupervisePremium" prop="settlementPaymentDifference" label="回款差额" >
          <el-input v-model="countForm.settlementPaymentDifference" disabled></el-input>
        </el-form-item>
        <el-form-item v-if="isSettlement && countForm.actualReceivedAmount > countForm.receivableSupervisePremium" prop="settlementPaymentReason" label="差额原因">
          <el-input v-model="countForm.settlementPaymentReason" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="invoiceTime" label="开票日期">
          <el-date-picker v-model="countForm.invoiceTime" style="width: 100%;" type="date"
            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item v-if="isSettlement" prop="receivePaymentDate" label="收款日期">
          <el-date-picker v-model="countForm.receivePaymentDate" style="width: 100%;" type="date"
            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item v-if="isSettlement" 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="countShow = false">取消</el-button>
        <el-button type="primary" @click="handelComfirm()">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="batchShow" width="800" title="数据导入">
      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px">
        下载「标准导入模板」，编辑后上传；系统将自动匹配相关字段
        <el-button link type="primary" @click="downloadTemplate">下载模板</el-button>
      </div>
      <el-upload class="upload-demo " drag accept=".xls, .xlsx" :auto-upload="false" @change="uploadJYFile">
        <div class="flex f-c a-c">
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            点击或将文件拖拽到这里上传
          </div>
          <a style="color: #999; font-size: 12px">目前支持的文件类型为*.xls, *.xlsx</a>
        </div>
      </el-upload>
      <div v-if="importModifyCallback">
        <div>
          您将导入 <span style="color:#409eff;">{{ importModifyCallback?.failedNumber +
            importModifyCallback?.successNumber
            ||
            0 }}
          </span> 条数据，其中 <span style="color:#409eff;">{{ importModifyCallback?.successNumber || 0 }} </span>
          条正常导入；<span style="color: red;">{{ importModifyCallback?.failedNumber || 0 }}</span> 条不符合要求无法导入。
        </div>
        <el-button type="primary" link @click="downloadImportFailedData(importModifyCallback)">下载导入失败文件</el-button>
      </div>
      <template #footer>
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="batchShow = false">取消</el-button>
        <el-button type="primary" @click="batchShow = false">确定</el-button>
      </template>
    </el-dialog>
    <el-image-viewer v-if="imageShow" :url-list="[bigImageUrl]" @close="imageShow = false" />

  </div>
</template>

<script setup lang="ts">
import api from '@/api'
import { useRoute, useRouter } from 'vue-router'

import { ElMessage } from "element-plus";
import { registerRuntimeCompiler } from 'vue';

let route = useRoute()
let router = useRouter()
let batchShow = ref(false)
const activeindex = ref(route.query.activeindex)
// 获取上一个路由的完整信息
const previousRoute = ref(router.options.history.state.back)
const selectedList = ref([])//选中的应收单据
const companyList = ref()//保险公司
const insurerContract = ref()//保险公司协议
const multipleSearch = ref('')
const orderTypesearch = ref('')
const yearrangesearch = ref('')
const datesearch = ref('')
const countShow = ref(false)
const countForm = ref({
  attachmentIds: [],
})
const companyIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
//获取保险公司协议
const getByCompanyId = () => {
  api.dispatchApi.getByCompanyIdt(route.query.id).then((res: any) => {
    if (res.code == 200) {
      insurerContract.value = res.data
    }
  })
}
//保险公司协议

let logicJudge = ref('and')
let searchList = ref([
  {
    name: 'companyId',
    type: '等于',
    search: ''
  }, {
    name: 'signDate',
    type: '固定范围',
    search: ''
  }, {
    name: 'ptlAgreement',
    type: '等于',
    search: ''
  }, {
    name: 'orderType',
    type: '等于',
    search: ''
  }, {
    name: 'signYear',
    type: '等于',
    search: ''
  },
  {
    name: 'licenseNo',
    type: '等于',
    search: ''
  },
  {
    name: 'jqPolicyNo',
    type: '等于',
    search: ''
  }, {
    name: 'syPolicyNo',
    type: '等于',
    search: ''
  }, {
    name: 'jyPolicyNo',
    type: '等于',
    search: ''
  }
])
if (route.query) {
  console.log(route.query)
  selectedList.value = JSON.parse(route.query.selectedList || '[]')
  searchList.value[0].search = route.query.id
  getByCompanyId()
  console.log(selectedList.value)
}


let noData = ref(true)
let tableData = ref([])
const addTicket = () => {
  addShow.value = true
}
const handleSearch = () => {
  console.log(searchList.value)
  if (!route.query.id && !searchList.value.find(v => v.name === 'companyId')?.search) {
    return ElMessage({
      message: '请先选择公司',
      type: 'warning'
    })
  }
  // router
  api.financeApi.getSelectedReceivableList({
    companyId: route.query.id,
    invoiceType: route.query.invoiceType,
    orderNos: selectedList.value.map(item => item.orderNo),
    searchList: searchList.value,
    logicJudge: logicJudge.value,
  }).then((res: any) => {
    if (res.code == 200) {
      tableData.value = res.data
    }
  })
}

let addShow = ref(false)
let addSearchValue = ref('')
let placeholder = ref('订单号查询')
let addSelectType = ref('1')
const handleAddSelectTypeChange = (e) => {
  switch (e) {
    case '1':
      placeholder.value = '订单号查询'
      break;
    case '2':
      placeholder.value = '交强险保单号查询'
      break;
    case '3':
      placeholder.value = '商业险保单号查询'
      break;
  }
}
let selectingData = ref([])
let selectedData = ref([])

// 出单协议多选转换
const handlePtlAgreementChange = (index: any, e: any) => {
  console.log(e)
  if (Array.isArray(e)) {
    searchList.value[index].search = e.join(',') || ''
  } else {
    searchList.value[index].search = e || ''
  }
}

// 签单时间选择器改变时触发
const signDateSelectChange = (index: any, e: any) => {
  switch (e) {
    case '为空':
      searchList.value[index].search = ''
      break;
    case '大于等于':
    case '小于等于':
      searchList.value[index].search = ''
      datesearch.value = ''
      break;
  }
}

// 未审核订单查询
const getUnauditedOrder = () => {
  api.financeApi.getUnauditedOrder({
    orderNo: addSearchValue.value,
    agreementType: '2',
    queryType: route.query.invoiceType == '1' ? '1' : route.query.invoiceType == '2' ? '3' : ''
  }).then((res: any) => {
    if (res.code == 200) {
      selectingData.value = res.data
    }
  })
}
const handleDel = (row) => {
  selectedData.value = selectedData.value.filter(item => item.id != row.id)
}
const handleAddSubmit = () => {
  if (selectedData.value.length < 1) {
    ElMessage({
      message: '请选择要添加的数据！',
      type: 'warning'
    })
  } else {
    api.financeApi.addReceivable({
      orderNo: [...selectedData.value.map(item => item.orderNo)]
    }).then((res: any) => {
      if (res.code == 200) {
        ElMessage({
          message: res.msg,
          type: 'success'
        })
        api.financeApi.getSelectedReceivableList({ orderNos: [...selectedData.value.map(item => item.orderNo)] }).then((res: any) => {
          if (res.code == 200) {
            tableData.value = res.data
          }
        })
        addShow.value = false
      }
    })
  }
}

const handleToAdd = (row) => {
  if (selectedData.value.length < 1) {
    selectedData.value.push(row)
  } else {
    if (!selectedData.value.some(item => item.id === row.id)) {
      selectedData.value.push(row)
    }
  }
  // ElMessage({
  //     message: '该订单已被xxx添加到应收开票中',
  //     type: 'warning'
  // })
}

let imageUrl = ref([])
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 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 importModifyCallback = ref()// 导入数据回调
const uploadJYFile = async (file) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  const { code, data, msg } = await api.financeApi.importAccountsReceivableInvoice(params)
  if (code == 200) {
    importModifyCallback.value = data
    if (data.orderNos.length > 0) {
      api.financeApi.getSelectedReceivableList({ orderNos: data.orderNos }).then((res: any) => {
        if (res.code == 200) {
          tableData.value = res.data
        }
      })
    }
    ElMessage({
      message: msg,
      type: 'success'
    })
  }
}
// 下载导入失败文件
const downloadImportFailedData = (item) => {
  const link = document.createElement('a');
  link.href = item.failFileUrl;
  link.download = '';
  // 触发下载
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
const downloadTemplate = () => {
  api.financeApi.exportAccountsReceivableInvoiceTemplate({type:'10'}).then((res: any) => {
    if (res.code == 200) {
      const link = document.createElement('a');
      link.href = res.msg;
      link.download = '应收开票导入模版.xlsx';
      // 触发下载
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  })
}
// 开票并结算
const handleBack = () => {
  router.back()
}

const countRules = {
  receivableSupervisePremium: [
    { required: true, message: '请输入应收金额', trigger: 'blur' }
  ],
  actualReceivedAmount: [
    { required: true, message: '请输入实收金额', trigger: 'blur' }
  ],
  attachmentIds: [
    { required: true, message: '请上传收款凭证', trigger: 'blur' }
  ]
}
const isSettlement = ref(false)
const handleTicket = (bool) => {
  if(!tableData.value.length){
    return ElMessage({
      message: '应收明细为空',
      type: 'warning'
    })
  }
  isSettlement.value = bool
  const companyId= route.query.id || searchList.value.find(v => v.name === 'companyId')?.search || ''
  const params = {
    incomeIds: tableData.value.map(v => v.id),
    orderNos: tableData.value.map(v => v.orderNo),
    companyId,
    invoiceType: route.query.invoiceType
  }
  api.financeApi.invoicingCheck(params).then(async (res: any) => {
    if (res.code == 200) {
      calBeforeInvoice(params)
    }
  })
}
const getSummaries = (param, list) => {
  console.log(param)
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  // 指定需要计算的字段列表（可根据需求添加字段名）
  const specifiedFields = list || [] // 替换为您需要的字段名

  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
        '',
      ])
      return
    }
    // 计算数字类型字段和指定字段
    const values = data.map((item) => {
      const val = item[column.property]
      // 排除空值
      if (val === '' || val === null || val === undefined) {
        return NaN
      }
      // 如果是数字类型，直接参与计算
      if (typeof val === 'number') {
        return val
      }
      // 如果字段在指定列表中，尝试转换为数字
      if (specifiedFields.includes(column.property)) {
        const num = Number(val)
        return Number.isNaN(num) ? NaN : num
      }
      // 其他情况不参与计算
      return NaN
    })
    if (!values.every((value) => Number.isNaN(value))) {
      const total = values.reduce((prev, curr) => {
        if (!Number.isNaN(curr)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      // 保留五位小数
      sums[index] = ` ${total.toFixed(5)}`
    } else {
      sums[index] = '-'
    }
  })
  return sums
}
const receivableSupervisePremium = ref(0)
const calBeforeInvoice = async (params: any) => {
  const res = await api.financeApi.calBeforeInvoice(params)
  if (res.code == 200) {
    openCountForm()
    countForm.value.invoiceTime = res.data.invoiceTime
    // countForm.value.receivableSupervisePremium = res.data.receivableSupervisePremium
    receivableSupervisePremium.value = res.data.receivableSupervisePremium
  }
}

/** 计算实收金额与应收监管保费的差值，并将结果赋值给付款差额字段 */
const handleChange = async () => {
  if (countForm.value.actualReceivedAmount > countForm.value.receivableSupervisePremium) {
    const num = await calSub(countForm.value.actualReceivedAmount, countForm.value.receivableSupervisePremium)
    countForm.value.settlementPaymentDifference = num
  } else {
    countForm.value.settlementPaymentDifference = 0
  }
}
/** 计算应收监管保费差额并更新虚增金额 */

const handleChange1 = async () => {
  const num = await calSub(countForm.value.receivableSupervisePremium, receivableSupervisePremium.value)
  countForm.value.overinflatedAmount = 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 openCountForm = () => {
  countForm.value = {
    attachmentIds: []
  }
  countShow.value = true
}
const handelComfirm = () => {
  let apiFn = api.financeApi.commissionInvoicing
  if (isSettlement.value) apiFn = api.financeApi.invoiceAndSettlement
  const attachmentIds = countForm.value.attachmentIds
  const companyId= route.query.id || searchList.value.find(v => v.name === 'companyId')?.search || ''
  const params = {
    invoiceVO: {
      ...countForm.value,
      attachmentIds,
      incomeIds: tableData.value.map(v => v.id),
      orderNos: tableData.value.map(v => v.orderNo),
      companyId,
      invoiceType: route.query.invoiceType
    },
    ...countForm.value,
    attachmentIds,
    incomeIds: tableData.value.map(v => v.id),
    orderNos: tableData.value.map(v => v.orderNo),
    companyId,
    invoiceType: route.query.invoiceType
  }
  apiFn(params).then((sub: any) => {
    if (sub.code == 200) {
      countShow.value = false
      ElMessage({
        message: sub.msg,
        type: 'success'
      })
      setTimeout(() => {
        router.back()
      }, 1000)
    }
  })
}
const handleCompanyChange = (index: any, e: any) => {
  searchList.value[index].search = e[e.length - 1] || ''
}
const initData = () => {
  // router
  if (selectedList.value.length < 1) return
  api.financeApi.getSelectedReceivableList({ orderNos: selectedList.value.map(v => v.orderNo), companyId: route.query.id }).then((res: any) => {
    if (res.code == 200) {
      tableData.value = res.data
    }
  })
}
// 保险公司
const initCompany = () => {
  api.agreementApi.findTree({ name: "", systemCode: localStorage.getItem('login_system') }).then((res: any) => {
    if (res.code == 200) {
      companyList.value = res.data
    }
  })
}

onMounted(() => {
  initData()
  initCompany()
})

</script>

<style scoped lang="scss">
.ticket {
  height: calc(100vh - 135px);
  width: calc(100% - 24px);
  margin: 12px auto;
  padding: 12px;
  background: #FFFFFF;
  overflow-y: auto;

  .search-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .search-left {
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
    }

    .search-right {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 12px;

      .search-type {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 10px;
      }
    }
  }

  .tips {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    p {
      margin-right: 30px;
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
  }
}

:deep(.el-upload-dragger) {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.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>