tenant-Platform/src/views/receivable/documentary/index.vue

<template>
  <PageMain class="vh100">
    <el-tabs v-model="activeName" class="demo-tabs h-full" @tab-click="handleTabsClick">
      <el-tab-pane label="车险应收" name="1" class="h-full">
        <el-form v-model="receivableForm" label-width="100">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input v-model="receivableForm.licenseNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </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" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签单时间">
                <el-date-picker v-model="receivableForm.signingTime" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单号">
                <el-input v-model="receivableForm.orderNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出单协议">
                <el-select v-model="receivableForm.agreementId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in agreementList" :key="item.id" :value="item.id"
                  :label="item.agreementTitle"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出单机构">
                <el-cascader style="width: 100%" v-model="receivableForm.deptId" placeholder="请选择" :options="deptOption"
                  :props="cascaderProps" clearable></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="险种">
                <el-select v-model="receivableForm.riskCode" placeholder="请选择" clearable>
                  <el-option v-for="(item, index) in insuranceType" :label="item.label" :value="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单类型">
                <el-select v-model="receivableForm.orderType" placeholder="请选择" clearable>
                  <el-option label="车险录入" value="1"></el-option>
                  <el-option label="代客录单" value="2"></el-option>
                  <el-option label="外部订单" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="被保人">
                <el-input v-model="receivableForm.insuredName" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出单人类型">
                <el-select v-model="receivableForm.typeAttr" placeholder="请选择" clearable>
                  <el-option label="团队" value="5"></el-option>
                  <el-option label="个代" value="6"></el-option>
                  <el-option label="渠道" value="7"></el-option>
                  <el-option label="电销组" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="交强险保单号">
                <el-input v-model="receivableForm.jqPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="商业险保单号">
                <el-input v-model="receivableForm.syPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="对接人">
                <el-input v-model="receivableForm.dockingPerson" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="交强起保时间">
                <el-date-picker v-model="receivableForm.jqDate" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="商业起保时间">
                <el-date-picker v-model="receivableForm.syDate" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex; align-items: center; justify-content: flex-end">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button plain @click="reset">重置</el-button>
              <span class="icon_s">
                <span @click="isTrue = !isTrue">高级搜索</span>
                <el-icon class="is_icon" :class="{ 'is_down': isTrue }">
                  <ArrowDown />
                </el-icon>
              </span>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="8" style="margin: 20px 0" class="flex a-c ">
          <span class="flex col-160 m-r-8 bg-F9">
            <el-checkbox class="p-w-12" @change="selectAll" v-model="selectAllValue"></el-checkbox>&nbsp;
            <el-select class="select-all width-100" placeholder="全选" v-model="selectType" @change="selectTypeChange">
              <el-option key="all" value="all" :label="`选中所有数据${total1}条`"></el-option>
              <el-option key="cur" value="cur" label="选中本页数据"></el-option>
            </el-select>
          </span>
          <div class="col-108 m-r-8">
            <el-button class="radius-2px width-100" type="primary" @click="addShow = true">添加应收</el-button>
          </div>
          <div class="col-108 m-r-8">
            <el-button class="radius-2px width-100" type="primary" @click="handleInvoiceSubmit">跟单费开票</el-button>
          </div>
          <div class="col-108 m-r-8">
            <el-button class="radius-2px width-100" type="primary" @click="handleExport(1)">导出</el-button>
          </div>
          <span class="col-108 m-r-8">
            <el-button class="radius-2px width-100" :disabled="selectedList.some(item => item.invoiceStatusName === '已开票')" @click="handleBatchEdit">批量修改比例</el-button>
          </span>
          <span class="col-108 m-r-8">
            <el-dropdown class="width-100" trigger="click" placement="bottom" @command="dropdownCommand">
              <el-button class="radius-2px width-100">
                批量管理&nbsp;&nbsp;<el-icon>
                  <ArrowDown />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="删除">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
          <span class="col-108 m-r-8">
            已选: <span class="text-red">{{ selectedList.length }}</span> 条
          </span>
          <span>应收金额总计：￥{{ receivedAmountTotal || 0 }}</span>
        </el-row>
        <el-table :data="receiveData" :height="isTrue ? 'calc(100% - 396px)' : 'calc(100% - 296px)'"
          style="width: 100%; margin-top: 20px;" ref="ReceiveDataRef1" @select="handleSelectChange1"
          @select-all="handleSelectAll1">
          <el-table-column type="selection" width="50" fixed="left"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
          <el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
          <el-table-column prop="typeAttrName" label="出单人类型" width="120"></el-table-column>
          <el-table-column prop="companyName" label="保险公司" width="120"></el-table-column>
          <el-table-column prop="deptName" label="出单机构" width="120"></el-table-column>
          <el-table-column prop="agreementName" label="出单协议" width="150"></el-table-column>
          <el-table-column prop="orderType" label="订单类型" width="100"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="100"></el-table-column>
          <el-table-column prop="otherCostsPremiums" label="应收跟单费" width="100"></el-table-column>
          <el-table-column prop="productName" label="险种" width="100"></el-table-column>
          <el-table-column prop="insuredPerson" label="被保人" width="100"></el-table-column>
          <el-table-column prop="jqPremium" label="交强险保费" width="100"></el-table-column>
          <el-table-column prop="taxPremium" label="车船税" width="100"></el-table-column>
          <el-table-column prop="jqOtherCostsProportion" label="交强险跟单费比例" width="100"></el-table-column>
          <el-table-column prop="jqOtherCostsPremiums" label="交强险跟单费" width="100"></el-table-column>
          <el-table-column prop="syPremium" label="商业险保费" width="100"></el-table-column>
          <el-table-column prop="syOtherCostsProportion" label="商业险跟单费比例" width="100"></el-table-column>
          <el-table-column prop="syOtherCostsPremiums" label="商业险跟单费" width="100"></el-table-column>
          <el-table-column prop="jyOtherCostsPremiums" label="驾意险跟单费" width="100"></el-table-column>
          <el-table-column prop="jqPolicyNo" label="交强险保单号" width="150"></el-table-column>
          <el-table-column prop="syPolicyNo" label="商业险保单号" width="150"></el-table-column>
          <el-table-column prop="jqStartDate" label="交强险起保日期" width="150"></el-table-column>
          <el-table-column prop="syStartDate" label="商业险起保日期" width="150"></el-table-column>
          <el-table-column prop="updateBy" label="修改人" width="100"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
          <el-table-column prop="dockingPerson" label="对接人" width="100"></el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button link type="primary" @click="toEdit(scope.row)">编辑</el-button>
              <el-button link type="primary" @click="toDelete([scope.row.id])">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="非车险应收" name="2" class="h-full">
        <el-form v-model="receivableForm" label-width="100">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input v-model="receivableForm.licenseNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="保险公司">
                <el-select v-model="receivableForm.companyId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in companyList" :key="item.companyCode" :value="item.companyCode"
                    :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签单时间">
                <el-date-picker v-model="receivableForm.signingTime" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单号">
                <el-input v-model="receivableForm.orderNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出单协议">
                <el-select v-model="receivableForm.agreementId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in agreementList" :key="item.id" :value="item.id"
                  :label="item.agreementTitle"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出单机构">
                <el-cascader style="width: 100%" v-model="receivableForm.deptId" placeholder="请选择" :options="deptOption"
                  :props="cascaderProps" clearable></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="险种">
                <el-select v-model="receivableForm.riskCode" placeholder="请选择" clearable>
                  <el-option v-for="(item, index) in insuranceType" :label="item.label" :value="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单类型">
                <el-select v-model="receivableForm.orderType" placeholder="请选择" clearable>
                  <el-option label="车险录入" value="1"></el-option>
                  <el-option label="代客录单" value="2"></el-option>
                  <el-option label="外部订单" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="被保人">
                <el-input v-model="receivableForm.insuredName" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出单人类型">
                <el-select v-model="receivableForm.typeAttr" placeholder="请选择" clearable>
                  <el-option label="团队" value="5"></el-option>
                  <el-option label="个代" value="6"></el-option>
                  <el-option label="渠道" value="7"></el-option>
                  <el-option label="电销组" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="交强险保单号">
                <el-input v-model="receivableForm.jqPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="商业险保单号">
                <el-input v-model="receivableForm.syPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="对接人">
                <el-input v-model="receivableForm.dockingPerson" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="交强起保时间">
                <el-date-picker v-model="receivableForm.jqDate" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="商业起保时间">
                <el-date-picker v-model="receivableForm.syDate" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex; align-items: center; justify-content: flex-end">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button plain @click="reset">重置</el-button>
              <span class="icon_s">
                <span @click="isTrue = !isTrue">高级搜索</span>
                <el-icon class="is_icon" :class="{ 'is_down': isTrue }">
                  <ArrowDown />
                </el-icon>
              </span>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="8" style="margin: 20px 0" class="flex a-c ">
          <span class="flex col-160 m-r-8 bg-F9">
            <el-checkbox class="p-w-12" @change="selectAll" v-model="selectAllValue"></el-checkbox>&nbsp;
            <el-select class="select-all width-100" placeholder="全选" v-model="selectType" @change="selectTypeChange">
              <el-option key="all" value="all" :label="`选中所有数据${total2}条`"></el-option>
              <el-option key="cur" value="cur" label="选中本页数据"></el-option>
            </el-select>
          </span>
          <div class="col-108 m-r-8">
            <el-button class="radius-2px width-100" type="primary" @click="addShow = true">添加应收</el-button>
          </div>
          <div class="col-108 m-r-8">
            <el-button class="radius-2px width-100" type="primary" @click="handleInvoiceSubmit">跟单费开票</el-button>
          </div>
          <div class="col-108 m-r-8">
            <el-button class="radius-2px width-100" type="primary" @click="dropdownCommand('删除')">删除</el-button>
          </div>
          <div class="col-108 m-r-8">
            <el-button class="radius-2px width-100" type="primary" @click="handleExport(2)">导出</el-button>
          </div>
          <span class="col-108 m-r-8">
            <el-button class="radius-2px width-100" @click="handleBatchEdit">批量修改比例</el-button>
          </span>
          <span class="col-108 m-r-8">
            已选: <span class="text-red">{{ selectedList.length }}</span> 条
          </span>
        </el-row>
        <el-table :data="receiveData" :height="isTrue ? 'calc(100% - 396px)' : 'calc(100% - 296px)'"
          style="width: 100%; margin-top: 20px;" ref="ReceiveDataRef2" @select="handleSelectChange2"
          @select-all="handleSelectAll2">
          <el-table-column type="selection" width="50" fixed="left"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
          <el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
          <el-table-column prop="typeAttrName" label="出单人类型" width="120"></el-table-column>
          <el-table-column prop="companyName" label="保险公司" width="120"></el-table-column>
          <el-table-column prop="deptName" label="出单机构" width="120"></el-table-column>
          <el-table-column prop="agreementName" label="出单协议" width="150"></el-table-column>
          <el-table-column prop="invoiceStatusName" label="开票状态" width="100"></el-table-column>
          <el-table-column prop="orderType" label="订单类型" width="100"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="100"></el-table-column>
          <el-table-column prop="otherCostsPremiums" label="应收跟单费" width="100"></el-table-column>
          <el-table-column prop="productName" label="险种" width="100"></el-table-column>
          <el-table-column prop="insuredPerson" label="被保人" width="100"></el-table-column>
          <el-table-column prop="jyPremium" label="非车险保费" width="100">
            <template #default="scope">
              {{ Number(scope.row.jyPremium) || ' ' }}
            </template>
          </el-table-column>
          <!--                    <el-table-column prop="a" label="非车险不含税保费" width="100"></el-table-column>-->
          <el-table-column prop="jyOtherCostsProportion" label="非车险跟单费比例" width="100">
            <template #default="scope">
              {{ Number(scope.row.jyOtherCostsProportion) || ' ' }}
            </template>
          </el-table-column>
          <el-table-column prop="jyPolicyNo" label="非车险保单号" width="100"></el-table-column>
          <el-table-column prop="jqStartDate" label="交强险起保日期" width="150"></el-table-column>
          <el-table-column prop="syStartDate" label="商业险起保日期" width="150"></el-table-column>
          <el-table-column prop="updateBy" label="修改人" width="100"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="scope">
              <div style="display: flex; align-items: center; justify-content: center">
                <el-button link type="primary" @click="toDelete([scope.row.id])">删除</el-button>
                <el-button link type="primary" @click="toEdit(scope.row)">编辑</el-button>
                <el-dropdown trigger="click" placement="bottom" @command="dropdownCommand">
                  <el-button link type="primary">
                    更多
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total2" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <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="batchShow" width="800"
      :title="`选中修改（已选${selectedData.length}条数据）`">
      <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px">
        下载「标准导入模板」，编辑后上传；系统将自动匹配相关字段
        <el-button link type="primary">下载模板</el-button>
      </div>
      <el-upload class="upload-demo" drag accept=".xls, .xlsx" :auto-upload="false" @change="uploadFile">
        <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>
      </el-upload>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="invoiceShow" width="600" title="提示">
      <el-radio-group v-model="invoiceRadio">
        <el-radio :value="item.id" v-for="(item, index) in options">{{ item.name }}</el-radio>
      </el-radio-group>
      <template #footer>
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="invoiceShow = false">取消</el-button>
        <el-button type="primary" @click="handleInvoiceSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="批量修改" v-model="batchEditShow" width="700">
      <el-tabs v-model="subActiveName" class="demo-tabs">
        <el-tab-pane label="User" name="first">
          <template #label>选中修改（{{ selectedList.length }}）</template>
          <el-form :model="editForm">
            <el-radio v-model="feeRate">跟单比例</el-radio>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="交强险跟单费比例">
                  <el-input v-model="editForm.jqInsurance">
                    <template #append>%</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商业险跟单费比例">
                  <el-input v-model="editForm.syInsurance">
                    <template #append>%</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-radio v-model="signTime">签单时间</el-radio>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="">
                  <el-date-picker v-model="editForm.signTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-radio v-model="people">对接人</el-radio>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input v-model="editForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号">
                  <el-input v-model="editForm.phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="Config" name="second">
          <template #label>导入修改</template>
          <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px">
            下载「标准导入模板」，编辑后上传；系统将自动匹配相关字段
            <el-button link type="primary" @click="downloadImportTemplate">下载模板</el-button>
          </div>
          <el-upload class="upload-demo" drag accept=".xls, .xlsx" :auto-upload="false" @change="uploadJYFile">
            <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>
          </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>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="batchEditShow = false">取消</el-button>
        <el-button type="primary" @click="handleBatchEditSubmit()">确定</el-button>
      </template>
    </el-dialog>
  </PageMain>
</template>

<script setup lang="ts">
import api from '@/api'

import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from 'vue-router'

let myRouter = useRouter()

let activeName = ref('1')
let subActiveName = ref('first')
const receivedAmountTotal = ref(0)
const handleTabsClick = (e) => {
  activeName.value = e.props.name
  if (e.props.name == '1') {
    getOtherReceivableList()
    getreceivedAmountTotal()
  } else if (e.props.name == '2') {
    getJyOtherReceivableList()
  }
  isTrue.value = false
  receivableForm.value = {}
  selectedList.value = []
}

let isTrue = ref(false)
let receivableForm = ref({})

const toDelete = (ids) => {
  ElMessageBox.confirm(
    '确定要删除吗',
    '删除应收订单',
    {
      confirmButtonText: '确定',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  ).then(() => {
    api.financeApi.deleteIncomesByIds(ids).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success('删除成功')
        reset()
      }
    })
  })
}
const companyIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
// 保险公司选择器改变时触发
const handleCompanyChange = (e) => {
  console.log(e)

  receivableForm.value.companyId = e[e.length - 1] || ''
}
let ReceiveDataRef1 = ref()
let ReceiveDataRef2 = ref()
// 选中的数据
let selectedList = ref([])
let allData = ref([])

// 全选的类型
let selectType = ref('')
// 外部全选是否勾选
let selectAllValue = ref(false)
// 外部的全选
const selectAll = (type: boolean) => {
  if (type) {
    if (selectType.value) {
      receiveData.value.forEach((item) => {
        ReceiveDataRef1.value!.toggleRowSelection(item, true)
        ReceiveDataRef2.value!.toggleRowSelection(item, true)
      })
      if (selectType.value == 'cur') {
        selectedList.value = receiveData.value
      } else {
        selectedList.value = []
      }
    }
  } else {
    receiveData.value.forEach(item => {
      ReceiveDataRef1.value!.toggleRowSelection(item, false)
    })
    selectType.value = ''
    selectedList.value = []
  }
}
const getreceivedAmountTotal = () => {
  let params = {
    licenseNo: receivableForm.value?.licenseNo,
    typeAttr: receivableForm.value?.typeAttr,
    companyId: receivableForm.value?.companyId,
    signingStartTime: receivableForm.value?.signingTime?.[0],
    signingEndTime: receivableForm.value?.signingTime?.[1],
    orderNo: receivableForm.value?.orderNo,
    agreementId: receivableForm.value?.agreementId,
    deptId: receivableForm.value?.deptId,
    riskCode: receivableForm.value?.riskCode,
    orderType: receivableForm.value?.orderType,
    insuredName: receivableForm.value?.insuredName,
    jqPolicyNo: receivableForm.value?.jqPolicyNo,
    syPolicyNo: receivableForm.value?.syPolicyNo,
    dockingPerson: receivableForm.value?.dockingPerson,
    jqStartDate: receivableForm.value?.jqDate?.[0],
    jqEndDate: receivableForm.value?.jqDate?.[1],
    syStartDate: receivableForm.value?.syDate?.[0],
    syEndDate: receivableForm.value?.syDate?.[1],
    pages: pages.value,
    size: size.value
  }

  api.financeApi.getOtherReceivableTotalAmount(params).then((res: any) => {
    if (res.code == 200) {
      receivedAmountTotal.value = res.data
    }
  })
}
// 全选类型改变
const selectTypeChange = (type) => {
  selectAllValue.value = true
  receiveData.value.forEach(item => {
    ReceiveDataRef1.value!.toggleRowSelection(item, true)
    ReceiveDataRef2.value!.toggleRowSelection(item, true)
  })
  if (type == 'cur') {
    selectedList.value = receiveData.value
  } else {
    selectedList.value = allData.value
  }
}
// 编辑
const toEdit = (row: any) => {
  myRouter.push({
    path: '/insurancePolicy/order/insurancePolicyOrderDetail',
    query: {
      orderNo: row.orderNo
    }
  })
}
// 获取协议列表
const agreementList = ref()
const getagreementList = () => {
  api.agreementApi.agreementList({
    isExternal: '0',
    pages: 1,
    size: 1000,
  }).then((res: any) => {
    if (res.code == 200) {
      agreementList.value = res.data.records
    }
  })
}
let options = ref([])
const handleInvoice = () => {
  if (selectedList.value.length < 1) {
    myRouter.push({
      name: 'HandingFeeTicket',
      query: {
        invoiceType: activeName.value == '1' ? '2' : activeName.value == '2' ? '4' : ''
      }
    })
  } else {
    if (selectedList.value.some((item: any) => item.invoiceStatusName == '已开票')) {
      ElMessage({
        message: '存在已开票数据，不能开票！',
        type: 'warning'
      })
      return
    }
    invoiceShow.value = true
    let arr = selectedList.value.map((item) => {
      return item.id
    })
    api.financeApi.getReceivableCompany({
      incomeIds: [...arr]
    }).then((res: any) => {
      if (res.code == 200) {
        options.value = res.data
      }
    })
  }

}

const dropdownCommand = (e) => {
  if (e === '数据导入') {
    batchShow.value = true
  }
  if (e === '删除') {
    if (selectedList.value.length === 0) {
      ElMessage.warning('请选择删除的数据')
      return
    }
    toDelete(selectedList.value.map(item => item.id))
  }
}

let total1 = ref(0)
let total2 = ref(0)
let receiveData = ref([])

// 应收添加
let addShow = ref(false)
let addSearchValue = ref('1932252903508697088')
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;
  }
}

const getUnauditedOrder = () => {
  api.financeApi.getUnauditedOrder({
    orderNo: addSearchValue.value,
    queryType: activeName.value == '1' ? '2' : activeName.value == '2' ? '4' : ''
  }).then((res: any) => {
    if (res.code == 200) {
      selectingData.value = res.data
    }
  })
}

// 批量操作数据导入
let selectData = ref([])
let selectingData = ref([])
let selectedData = ref([])

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'
  // })
}

const handleDel = (row) => {
  selectedData.value = selectedData.value.filter(item => item.id != row.id)
}
const handleAddSubmit = () => {
  if (selectedData.value.length < 1) {
    ElMessage({
      message: '请选择要添加的数据！',
      type: 'warning'
    })
    return
  }
  let arr = selectedData.value?.map(item => {
    return item.orderNo
  })
  api.financeApi.addReceivable({
    orderNo: [...arr],
    queryType: activeName.value == '1' ? '2' : activeName.value == '2' ? '4' : ''
  }).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      addShow.value = false
      getOtherReceivableList()
      getreceivedAmountTotal()
      getJyOtherReceivableList()
    }
  })
}

let batchShow = ref(false)
const uploadFile = async (file) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  const { code, data, msg } = await api.financeApi.importSuperviseExcel(params)
  if (code == 200) {
    ElMessage({
      message: msg,
      type: 'success'
    })
  }
}

// 应收开票
let invoiceShow = ref(false)
let invoiceRadio = ref(null)
const handleInvoiceSubmit = () => {
  myRouter.push({
    name: 'documentaryTicket',
    query: {
        invoiceType: activeName.value == '1' ? '2' : activeName.value == '2' ? '4' : ''
      }
  })
}

const handleSelectChange1 = (a, b) => {
  if (a.length > 0) {
    selectedList.value = a
  } else {
    selectedList.value = []
  }
}
const handleSelectChange2 = (a, b) => {
  if (a.length > 0) {
    selectedList.value = a
  } else {
    selectedList.value = []
  }
}
const handleSelectAll1 = (e) => {
  if (e.length > 0) {
    selectedList.value = e
  } else {
    selectedList.value = []
  }
}
const handleSelectAll2 = (e) => {
  if (e.length > 0) {
    selectedList.value = e
  } else {
    selectedList.value = []
  }
}

// 批量修改比例
// 批量修改比例
let batchEditShow = ref(false)
let feeRate = ref(null)
let signTime = ref(null)
let people = ref(null)
let editForm = ref({})
const handleBatchEdit = () => {
  if (selectedList.value.length < 1) {
    ElMessage({
      message: '请选择数据！',
      type: 'warning'
    })
    return
  }
  editForm.value = {}
  batchEditShow.value = true
}

const handleBatchEditSubmit = async () => {
  const params = {
    incomeIds: selectedList.value.map(item => item.id),
    jqOtherCostsProportion: editForm.value.jqInsurance,
    syOtherCostsProportion: editForm.value.syInsurance,
    signingTime: editForm.value.signTime,
    contractUserName: editForm.value.name,
    contractPhone: editForm.value.phone,
    updateFlag: '2'
  }
  const { code, data, msg } = await api.financeApi.batchModify(params)
  if (code === 200) {
    ElMessage.success(msg)
    batchEditShow.value = false
    search()
  }
}
const downloadImportTemplate = () => {
  let params = {
    licenseNo: receivableForm.value?.licenseNo,
    typeAttr: receivableForm.value?.typeAttr,
    companyId: receivableForm.value?.companyId,
    signingStartTime: receivableForm.value?.signingTime?.[0],
    signingEndTime: receivableForm.value?.signingTime?.[1],
    orderNo: receivableForm.value?.orderNo,
    agreementId: receivableForm.value?.agreementId,
    deptId: receivableForm.value?.deptId,
    riskCode: receivableForm.value?.riskCode,
    orderType: receivableForm.value?.orderType,
    insuredName: receivableForm.value?.insuredName,
    jqPolicyNo: receivableForm.value?.jqPolicyNo,
    syPolicyNo: receivableForm.value?.syPolicyNo,
    dockingPerson: receivableForm.value?.dockingPerson,
    jqStartDate: receivableForm.value?.jqDate?.[0],
    jqEndDate: receivableForm.value?.jqDate?.[1],
    syStartDate: receivableForm.value?.syDate?.[0],
    syEndDate: receivableForm.value?.syDate?.[1],
  }
  api.financeApi.exportTemplateReceivableList(params).then((res: any) => {
    if (res.code == 200) {
      const link = document.createElement('a');
      link.href = res.msg;
      link.download = '';
      // 触发下载
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
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.importReceivableListUpdate(params)
  if (code == 200) {
    importModifyCallback.value = 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);
}
// 获取险种
let insuranceType = ref([])
const dictDetails = () => {
  api.additionalApi.dictDetails('insurance_type').then((res: any) => {
    if (res.code == 200) {
      insuranceType.value = res.data
    }
  })
}

// 归属
let deptOption = ref([])
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  checkStrictly: true,
}
const initDept = () => {
  api.insuranceApi.getDeptTree({ sysCode: localStorage.getItem('sysCode') }).then((res: any) => {
    if (res.code == 200) {
      deptOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 保险公司
let companyList = ref([])
const initCompany = () => {
  api.agreementApi.findTree({ name: "", systemCode: localStorage.getItem('login_system') }).then((res: any) => {
    if (res.code == 200) {
      companyList.value = res.data
    }
  })
}

// 分页
let pages = ref(1)
let size = ref(10)
const handleSizeChange = (val) => {
  console.log(val)
  size.value = val
  if (activeName.value == '1') {
    getOtherReceivableList()
    getreceivedAmountTotal()
  } else if (activeName.value == '2') {
    getJyOtherReceivableList()
  }
}
const handleCurrentChange = (val) => {
  pages.value = val
  if (activeName.value == '1') {
    getOtherReceivableList()
    getreceivedAmountTotal()
  } else if (activeName.value == '2') {
    getJyOtherReceivableList()
  }
}

const search = () => {
  pages.value = 1
  size.value = 10
  if (activeName.value == '1') {
    getOtherReceivableList()
    getreceivedAmountTotal()
  }
  if (activeName.value == '2') {
    getJyOtherReceivableList()
  }
}
const reset = () => {
  receivableForm.value = {}
  pages.value = 1
  size.value = 10
  search()

}
const getOtherReceivableList = () => {
  let params = {
    licenseNo: receivableForm.value?.licenseNo,
    typeAttr: receivableForm.value?.typeAttr,
    companyId: receivableForm.value?.companyId,
    signingStartTime: receivableForm.value?.signingTime?.[0],
    signingEndTime: receivableForm.value?.signingTime?.[1],
    orderNo: receivableForm.value?.orderNo,
    agreementId: receivableForm.value?.agreementId,
    deptId: receivableForm.value?.deptId,
    riskCode: receivableForm.value?.riskCode,
    orderType: receivableForm.value?.orderType,
    insuredName: receivableForm.value?.insuredName,
    jqPolicyNo: receivableForm.value?.jqPolicyNo,
    syPolicyNo: receivableForm.value?.syPolicyNo,
    dockingPerson: receivableForm.value?.dockingPerson,
    jqStartDate: receivableForm.value?.jqDate?.[0],
    jqEndDate: receivableForm.value?.jqDate?.[1],
    syStartDate: receivableForm.value?.syDate?.[0],
    syEndDate: receivableForm.value?.syDate?.[1],
    invoiceType:'2'
  }
  api.financeApi.getOtherReceivableList({
    ...params,
    pages: pages.value,
    size: size.value
  }).then((res: any) => {
    if (res.code == 200) {
      receiveData.value = res.data.insPlyIncomePage.records
      allData.value = res.data.insPlyIncomeOrders
      total1.value = res.data.insPlyIncomePage.total
      receiveData.value.forEach(element => {
        if (selectedList.value.find(v => v.id === element.id)) {
          nextTick(() => {
            ReceiveDataRef1.value!.toggleRowSelection(element, true)
          })
        }
      });
    }
  })
}
const getJyOtherReceivableList = () => {
  let params = {
    licenseNo: receivableForm.value?.licenseNo,
    typeAttr: receivableForm.value?.typeAttr,
    companyId: receivableForm.value?.companyId,
    signingStartTime: receivableForm.value?.signingTime?.[0],
    signingEndTime: receivableForm.value?.signingTime?.[1],
    orderNo: receivableForm.value?.orderNo,
    agreementId: receivableForm.value?.agreementId,
    deptId: receivableForm.value?.deptId,
    riskCode: receivableForm.value?.riskCode,
    orderType: receivableForm.value?.orderType,
    insuredName: receivableForm.value?.insuredName,
    jqPolicyNo: receivableForm.value?.jqPolicyNo,
    syPolicyNo: receivableForm.value?.syPolicyNo,
    dockingPerson: receivableForm.value?.dockingPerson,
    jqStartDate: receivableForm.value?.jqDate?.[0],
    jqEndDate: receivableForm.value?.jqDate?.[1],
    syStartDate: receivableForm.value?.syDate?.[0],
    syEndDate: receivableForm.value?.syDate?.[1],
    invoiceType:'4'
  }
  api.financeApi.getJyOtherReceivableList({
    ...params,
    pageNo: pages.value,
    pageSize: size.value
  }).then((res: any) => {
    if (res.code == 200) {
      receiveData.value = res.data.insPlyIncomePage.records
      allData.value = res.data.insPlyIncomeOrders
      total2.value = res.data.insPlyIncomePage.total
      receiveData.value.forEach(element => {
        if (selectedList.value.find(v => v.id === element.id)) {
          nextTick(() => {
            ReceiveDataRef2.value!.toggleRowSelection(element, true)
          })
        }
      });
    }
  })
}

const handleExport = (type) => {
  switch (type) {
    case 1:
      exportOtherExcel()
      break;
    case 2:
      exportOtherJyExcel()
      break;
  }
}
const exportOtherExcel = () => {
  api.settlementApi.exportOtherExcel({

  }).then((res: any) => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
    const fileName = '跟单费应收车险结算报表明细' + new Date().getTime() + '.xlsx';
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  })
}
const exportOtherJyExcel = () => {
  api.settlementApi.exportOtherJyExcel({

  }).then((res: any) => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
    const fileName = '跟单费应收非车险结算报表明细' + new Date().getTime() + '.xlsx';
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  })
}

onMounted(() => {
  dictDetails();
  initCompany();
  initDept();
  getOtherReceivableList();
  getreceivedAmountTotal();
  getagreementList();
})

</script>

<style scoped lang="scss">
@use "@/assets/styles/common/style.scss";

.icon_s {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 20px;
  color: #00a0f4;
  cursor: pointer;

  .is_icon {
    transition: ease 0.2s;
  }

  .is_down {
    transform: rotate(180deg);
  }
}

.add-content {
  width: 100%;
  max-height: 600px;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}

:deep(.el-radio) {
  width: 100%;
}
</style>