tenant-Platform/src/views/finance/index.vue

<template>
  <PageMain class="vh100">
    <el-tabs v-model="activeName" class="demo-tabs h-full" @tab-click="handleClick">
      <el-tab-pane name="0" class="h-full">
        <template #label>
          <el-badge :value="total1">
            <span>待审核</span>
          </el-badge>
        </template>
        <el-form v-model="firstForm" label-width="120" ref="formRef0">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="保险公司">
                <el-select v-model="firstForm.companyId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="保险机构">
                <el-cascader filterable clearable placeholder="请选择" v-model="firstForm.partnerCompanyId"
                  style="width: 100%;" :options="companyoptionsList" :props="companyIdprops"
                  @change="handleCompanyChange" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车牌号">
                <el-input v-model="firstForm.licenseNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务员类型">
                <el-select v-model="firstForm.attrType" 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 :span="6">
              <el-form-item label="业务员">
                <el-input v-model="firstForm.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务员手机号">
                <el-input v-model="firstForm.phone" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单类型">
                <el-select v-model="firstForm.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 :span="6">
              <el-form-item label="投保人">
                <el-input v-model="firstForm.policyholder" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="被保人">
                <el-input v-model="firstForm.insurName" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签单时间 ">
                <el-date-picker v-model="firstForm.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="6">
              <el-form-item label="支付时间">
                <el-date-picker v-model="firstForm.payingTime" 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="6">
              <el-form-item label="报价时间">
                <el-date-picker v-model="firstForm.quotationTime" 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="6">
              <el-form-item label="投保险种">
                <el-select v-model="firstForm.productName" placeholder="请选择" clearable>
                  <el-option label="全部" value=" "></el-option>
                  <el-option v-for="item in riskType" :key="item.value" :value="item.label"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="协议选择">
                <el-select v-model="firstForm.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 v-show="isTrue" :span="6">
              <el-form-item label="订单号">
                <el-input v-model="firstForm.orderNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="对接人">
                <el-input v-model="firstForm.contact" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="出单机构">
                <el-cascader clearable style="width: 100%" v-model="firstForm.deptId" :options="option"
                  @change="handleChange" :props="tableProps"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="交强险起保时间">
                <el-date-picker v-model="firstForm.jqRiskStartDate" 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="6">
              <el-form-item label="商业险起保时间">
                <el-date-picker v-model="firstForm.syRiskStartDate" 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="6">
              <el-form-item label="非车险起保时间">
                <el-date-picker v-model="firstForm.jyRiskStartDate" 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="6">
              <el-form-item label="交强保单号">
                <el-input v-model="firstForm.jqPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="商业保单号">
                <el-input v-model="firstForm.syPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="非车保单号">
                <el-input v-model="firstForm.jyPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex;align-items: flex-start; justify-content: flex-end">
              <el-button plain @click="handleExport('0')">数据导出</el-button>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain @click="handleReset">重置</el-button>
              <span class="icon_s">
                <span @click="toggleAdvanced">高级搜索</span>
                <el-icon class="is_icon" :class="{ 'is_down': isTrue }">
                  <ArrowDown />
                </el-icon>
              </span>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="firstData" :height="tableHeight" style="width: 100%; margin-top: 20px;" highlight-current-row>
          <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
          <el-table-column prop="attrType" label="业务员类型" width="120"></el-table-column>
          <el-table-column prop="mobile" label="业务员手机号" width="120"></el-table-column>
          <el-table-column prop="name" label="业务员" width="120"></el-table-column>
          <el-table-column prop="orderType" label="订单类型" width="120"></el-table-column>
          <el-table-column prop="agreementName" label="出单协议" width="120"></el-table-column>
          <el-table-column prop="companyALlName" label="保险公司" width="120"></el-table-column>
          <el-table-column prop="partnerCompanyName" label="保险机构" width="220"></el-table-column>
          <el-table-column prop="dockingPerson" label="对接人" width="120"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
          <el-table-column prop="insurName" label="被保人" width="120"></el-table-column>
          <el-table-column prop="productName" label="投保险种" width="120"></el-table-column>
          <el-table-column prop="createBy" label="录入人" width="120"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
          <el-table-column prop="payTime" label="支付时间" width="120"></el-table-column>
          <el-table-column prop="quotationTime" label="报价时间" width="120"></el-table-column>
          <el-table-column prop="equityAmount" label="权益金额" width="120"></el-table-column>
          <el-table-column prop="deptName" label="出单机构" width="120"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="auditReceive(scope.row)">领取</el-button>
              <el-button link type="primary" size="small" @click="updateSigningTime(scope.row)">更新签单时间</el-button>
              <el-button link type="primary" size="small" @click="handleToDetail(scope, '0')">详情</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 name="1" class="h-full">
        <template #label>
          <el-badge :value="total2">
            <span>审核通过</span>
          </el-badge>
        </template>
        <el-form v-model="firstForm" label-width="120" ref="formRef1">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="保险公司">
                <el-select v-model="firstForm.companyId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="保险机构">
                <el-cascader filterable clearable placeholder="请选择" v-model="firstForm.partnerCompanyId"
                  style="width: 100%;" :options="companyoptionsList" :props="companyIdprops"
                  @change="handleCompanyChange" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车牌号">
                <el-input v-model="firstForm.licenseNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务员类型">
                <el-select v-model="firstForm.attrType" 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 :span="6">
              <el-form-item label="业务员">
                <el-input v-model="firstForm.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务员手机号">
                <el-input v-model="firstForm.phone" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单类型">
                <el-select v-model="firstForm.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 :span="6">
              <el-form-item label="投保人">
                <el-input v-model="firstForm.policyholder" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="被保人">
                <el-input v-model="firstForm.insurName" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签单时间">
                <el-date-picker v-model="firstForm.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="6">
              <el-form-item label="支付时间">
                <el-date-picker v-model="firstForm.payingTime" 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="6">
              <el-form-item label="报价时间">
                <el-date-picker v-model="firstForm.quotationTime" 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="6">
              <el-form-item label="审核方式">
                <el-select v-model="firstForm.auditType" placeholder="请选择" clearable>
                  <el-option label="人工审核" value="1"></el-option>
                  <el-option label="自动审核" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核人">
                <el-input v-model="firstForm.auditUser" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核时间">
                <el-date-picker v-model="firstForm.auditTime" 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="6">
              <el-form-item label="投保险种">
                <el-select v-model="firstForm.productName" placeholder="请选择" clearable>
                  <el-option label="全部" value=" "></el-option>
                  <el-option v-for="item in riskType" :key="item.value" :value="item.label"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="协议选择">
                <el-select v-model="firstForm.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 v-show="isTrue" :span="6">
              <el-form-item label="订单号">
                <el-input v-model="firstForm.orderNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="对接人">
                <el-input v-model="firstForm.contact" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="出单机构">
                <el-cascader clearable style="width: 100%" v-model="firstForm.deptId" :options="option"
                  @change="handleChange" :props="tableProps"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="交强险起保时间">
                <el-date-picker v-model="firstForm.jqRiskStartDate" 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="6">
              <el-form-item label="商业险起保时间">
                <el-date-picker v-model="firstForm.syRiskStartDate" 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="6">
              <el-form-item label="非车险起保时间">
                <el-date-picker v-model="firstForm.jyRiskStartDate" 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="6">
              <el-form-item label="交强保单号">
                <el-input v-model="firstForm.jyPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="商业保单号">
                <el-input v-model="firstForm.syPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="6">
              <el-form-item label="非车保单号">
                <el-input v-model="firstForm.jyPolicyNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="display: flex;align-items: flex-start; justify-content: flex-end">
              <el-button plain @click="handleExport('1')">数据导出</el-button>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain @click="handleReset">重置</el-button>
              <span class="icon_s">
                <span @click="toggleAdvanced">高级搜索</span>
                <el-icon class="is_icon" :class="{ 'is_down': isTrue }">
                  <ArrowDown />
                </el-icon>
              </span>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="secondData" :height="tableHeight" style="width: 100%; margin-top: 20px;" highlight-current-row>
          <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
          <el-table-column prop="attrType" label="业务员类型" width="120"></el-table-column>
          <el-table-column prop="mobile" label="业务员手机号" width="120"></el-table-column>
          <el-table-column prop="name" label="业务员" width="120"></el-table-column>
          <el-table-column prop="orderType" label="订单类型" width="120"></el-table-column>
          <el-table-column prop="agreementName" label="出单协议" width="120"></el-table-column>
          <el-table-column prop="companyALlName" label="保险公司" width="120"></el-table-column>
          <el-table-column prop="partnerCompanyName" label="保险机构" width="220"></el-table-column>
          <el-table-column prop="dockingPerson" label="对接人" width="120"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
          <el-table-column prop="insurName" label="被保人" width="120"></el-table-column>
          <el-table-column prop="productName" label="投保险种" width="120"></el-table-column>
          <el-table-column prop="createBy" label="录入人" width="120"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
          <el-table-column prop="payTime" label="支付时间" width="120"></el-table-column>
          <el-table-column prop="quotationTime" label="报价时间" width="120"></el-table-column>
          <el-table-column prop="auditUser" label="审核人" width="120"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间" width="120"></el-table-column>
          <el-table-column prop="auditType" label="审核方式" width="120"></el-table-column>
          <el-table-column prop="equityAmount" label="权益金额" width="120"></el-table-column>
          <el-table-column prop="deptName" label="出单机构" width="120"></el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleToDetail(scope, '1')">详情</el-button>
              <el-button link type="primary" size="small" @click="handleTrack(scope)">订单轨迹</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="total2" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane name="2" class="h-full">
        <template #label>
          <el-badge :value="total3">
            <span>审核不通过</span>
          </el-badge>
        </template>
        <el-form v-model="firstForm" label-width="100" ref="formRef2">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="保险公司">
                <el-select v-model="firstForm.companyId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="保险机构">
                <el-cascader filterable clearable placeholder="请选择" v-model="firstForm.partnerCompanyId"
                  style="width: 100%;" :options="companyoptionsList" :props="companyIdprops"
                  @change="handleCompanyChange" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input v-model="firstForm.licenseNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员类型">
                <el-select v-model="firstForm.attrType" 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 :span="8">
              <el-form-item label="业务员">
                <el-input v-model="firstForm.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员手机号">
                <el-input v-model="firstForm.phone" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签单时间">
                <el-date-picker v-model="firstForm.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-date-picker v-model="firstForm.auditTime" 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="isTrue ? 16 : 8" style="display: flex;align-items: flex-start; justify-content: flex-end">
              <el-button plain @click="handleExport('2')">数据导出</el-button>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain @click="handleReset">重置</el-button>
              <span class="icon_s">
                <span @click="toggleAdvanced">高级搜索</span>
                <el-icon class="is_icon" :class="{ 'is_down': isTrue }">
                  <ArrowDown />
                </el-icon>
              </span>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="thirdData" :height="tableHeight"
          style="width: 100%; margin-top: 20px;" highlight-current-row>
          <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
          <el-table-column prop="attrType" label="业务员类型" width="120"></el-table-column>
          <el-table-column prop="mobile" label="业务员手机号" width="120"></el-table-column>
          <el-table-column prop="name" label="业务员" width="120"></el-table-column>
          <el-table-column prop="companyALlName" label="保险公司" width="120"></el-table-column>
          <el-table-column prop="partnerCompanyIdName" label="保险机构" width="220"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
          <el-table-column prop="insurName" label="被保人" width="120"></el-table-column>
          <el-table-column prop="createBy" label="录入人" width="120"></el-table-column>
          <el-table-column prop="refuseReason" label="驳回原因" width="120"></el-table-column>
          <el-table-column prop="auditTime" label="驳回时间" width="120"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
          <el-table-column prop="payTime" label="支付时间" width="120"></el-table-column>
          <el-table-column prop="quotationTime" label="报价时间" width="120"></el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="auditReceive(scope.row)">领取</el-button>
              <el-button link type="primary" size="small" @click="updateSigningTime(scope.row)">更新签单时间</el-button>
              <el-button link type="primary" size="small" @click="handleToDetail(scope, '2')">详情</el-button>
              <el-button link type="primary" size="small" @click="handleTrack(scope)">订单轨迹</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="total3" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane name="3" class="h-full">
        <template #label>
          <el-badge :value="total4">
            <span>疑问订单</span>
          </el-badge>
        </template>
        <el-form v-model="firstForm" label-width="100" ref="formRef3">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="保险公司">
                <el-select v-model="firstForm.companyId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="保险机构">
                <el-cascader filterable clearable placeholder="请选择" v-model="firstForm.partnerCompanyId"
                  style="width: 100%;" :options="companyoptionsList" :props="companyIdprops"
                  @change="handleCompanyChange" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input v-model="firstForm.licenseNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员类型">
                <el-select v-model="firstForm.attrType" 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 :span="8">
              <el-form-item label="业务员">
                <el-input v-model="firstForm.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员手机号">
                <el-input v-model="firstForm.phone" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>


            <el-col :span="8">
              <el-form-item label="签单时间">
                <el-date-picker v-model="firstForm.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-date-picker v-model="firstForm.problemTime" 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-input v-model="firstForm.insurName" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="isTrue" :span="8">
              <el-form-item label="订单类型">
                <el-select v-model="firstForm.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-select v-model="firstForm.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="isTrue ? 16 : 8" style="display: flex;align-items: flex-start; justify-content: flex-end">
              <el-button plain @click="handleExport('3')">数据导出</el-button>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain @click="handleReset">重置</el-button>
              <span class="icon_s">
                <span @click="toggleAdvanced">高级搜索</span>
                <el-icon class="is_icon" :class="{ 'is_down': isTrue }">
                  <ArrowDown />
                </el-icon>
              </span>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="forthData" :height="tableHeight" style="width: 100%; margin-top: 20px;"
          highlight-current-row>
          <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
          <el-table-column prop="attrType" label="业务员类型" width="120">
          </el-table-column>
          <el-table-column prop="mobile" label="业务员手机号" width="120"></el-table-column>
          <el-table-column prop="name" label="业务员" width="120"></el-table-column>
          <el-table-column prop="orderType" label="订单类型" width="120">
          </el-table-column>
          <el-table-column prop="agreementName" label="出单协议" width="120"></el-table-column>
          <el-table-column prop="companyName" label="保险公司" width="120"></el-table-column>
          <el-table-column prop="partnerCompanyName" label="保险机构" width="220"></el-table-column>
          <el-table-column prop="dockingPerson" label="对接人" width="120"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
          <el-table-column prop="insurName" label="被保人" width="120"></el-table-column>
          <el-table-column prop="productName" label="投保险种" width="120"></el-table-column>
          <el-table-column prop="createBy" label="录入人" width="120"></el-table-column>
          <el-table-column prop="auditingUserName" label="审核人" width="120"></el-table-column>
          <el-table-column prop="problemReason" label="疑问原因" width="120"></el-table-column>
          <el-table-column prop="problemTime" label="疑问时间" width="120"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
          <el-table-column prop="payTime" label="支付时间" width="120"></el-table-column>
          <el-table-column prop="quotationTime" label="报价时间" width="120"></el-table-column>
          <el-table-column prop="equityAmount" label="权益金额" width="120"></el-table-column>
          <el-table-column prop="deptName" label="出单机构" width="120"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleToDetail(scope, '3')">详情</el-button>
              <el-button link type="primary" size="small" @click="handleCancel(scope)">取消疑问订单</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="total3" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-click-modal="false" v-model="trackShow" width="1000" title="订单轨迹">
      <el-table :data="orderData" height="300">
        <el-table-column label="变更信息">
          <template #default="scope">
            {{ `${scope.row.createByName}：${scope.row.createTime}` }}
          </template>
        </el-table-column>
        <el-table-column prop="optContent" label="变更内容"></el-table-column>
        <el-table-column prop="changeBefore" label="变更前">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="viewDetail(scope.row)">查看明细</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="changeAfter" label="变更后">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="viewDetail(scope.row)">查看明细</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="保司反馈"></el-table-column>
      </el-table>
    </el-dialog>
  </PageMain>
</template>

<script setup lang="ts">
import api from '@/api'
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from 'vue-router'
import { FormInstance } from 'element-plus';
import { nextTick, type Ref } from 'vue'

const myRoute = useRoute()
const myRouter = useRouter()
// 4 个 tab 各自独立的 form ref
const formRef0 = ref<FormInstance>()
const formRef1 = ref<FormInstance>()
const formRef2 = ref<FormInstance>()
const formRef3 = ref<FormInstance>()
const formRefMap: Record<string, Ref<FormInstance | undefined>> = {
  '0': formRef0,
  '1': formRef1,
  '2': formRef2,
  '3': formRef3,
}
const tableHeight = ref(); // 初始化表格高度

// 切换高级搜索,等 DOM 更新后再重算表格高度
const toggleAdvanced = async () => {
  isTrue.value = !isTrue.value
  await nextTick()
  handleResize()
}

function handleResize() {
  // 获取当前窗口的高度
  const height = window.innerHeight;
  // 根据当前激活的 tab 获取对应的 form ref
  const currentFormRef = formRefMap[activeName.value as string]
  // 获取表单元素
  const formElement = currentFormRef?.value?.$el as HTMLElement;
  if (formElement) {
    const formHeight = formElement.offsetHeight; // 获取表单高度
    console.log(formHeight)
    // 获取分页控件的高度
    const paginationElement = document.querySelector('.pagination') as HTMLElement;
    const paginationHeight = paginationElement ? paginationElement.offsetHeight : 40;
    // 计算表格高度：窗口高度 - 表单高度 - 分页高度 - 页面顶部预留空间
    const availableHeight = height - formHeight - paginationHeight - 323; // 60是页面顶部预留空间
    // 确保表格高度不小于最小值
    tableHeight.value = Math.max(availableHeight, 0) + "px";
    console.log(tableHeight.value)
  }
}
let activeName = ref(myRoute.query.activeindex as any || '0')
const handleClick = async (e) => {
  activeName.value = e.props.name
  pages.value = 1
  size.value = 10
  firstForm.value = {}
  isTrue.value = false  // 切换 tab 时收起高级搜索,避免互相影响
  await nextTick()
  // 先重算表格高度(此时 form 已显示,offsetHeight 是真实值),再加载数据,避免数据加载中的 loading/empty 状态干扰高度计算
  handleResize()
  initData(activeName.value)

}
const companyIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
// 保险公司选择器改变时触发
const handleCompanyChange = (e: any) => {
  firstForm.value.partnerCompanyId = e[e.length - 1] || ''
}
// 待审核
let firstForm = ref({})
let option = ref([])
const tableProps = ref({
  value: "id",
  label: "name",
  children: "children",
  checkStrictly: true,
});
const institutionList = () => {
  api.institutionApi.institutionList({ name: '', system: '' }).then((res: any) => {
    if (res.code == 200) {
      option.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
let firstData = ref([])
let secondData = ref([])
let thirdData = ref([])
let forthData = ref([])

let total1 = ref(0)
let total2 = ref(0)
let total3 = ref(0)
let total4 = ref(0)

let pages = ref(1)
let size = ref(10)
const handleSizeChange = (size) => {
  size.value = size
  initData(activeName.value)
}
const handleCurrentChange = (page) => {
  pages.value = page
  initData(activeName.value)
}

// 是否高级搜索
let isTrue = ref(false)

let companyList = ref([])
let companyoptionsList = ref([])
const initCompany = () => {
  api.insuranceApi.leftList('').then((res: any) => {
    if (res.code == 200) {
      companyList.value = res.data
    }
  })
}
const initCompanyOptions = () => {
  api.agreementApi.findTree({ name: "", systemCode: localStorage.getItem('login_system') }).then((res: any) => {
    if (res.code == 200) {
      companyoptionsList.value = res.data
    }
  })
}

// 领取
const auditReceive = (row) => {
  /**
   * 领取财务审核订单
   *
   * 功能说明：
   * 1. 首先检查订单是否被锁定（防止多人同时领取）
   * 2. 若未被锁定（res.data 为 false），则调用领取接口
   * 3. 领取成功后显示成功提示
   * 4. 若订单已被锁定，则显示警告提示
   *
   * @param {Object} row - 订单数据对象
   * @param {string} row.orderNo - 订单编号，用于锁定检查和领取操作
   */
  api.financeApi.isLock(row.orderNo).then((res: any) => {
    if (res.code == 200) {
      if (!res.data) {
        api.financeApi.auditReceive(row.orderNo).then((res: any) => {
          if (res.code == 200) {
            initData(activeName.value)
            ElMessage({
              message: res.msg,
              type: 'success'
            })
            myRouter.push({
              path: '/finance/auditOrderDetail',
              query: {
                id: row.orderNo,
                isShow: 1,
                activeindex: activeName.value
              }
            })
          }
        })
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
    }
  })
}
//更新签单时间
const updateSigningTime = (row) => {
  api.financeApi.updateSigningTime(row.orderNo).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
const handleChange = (val) => {
  firstForm.value.deptId = val[val.length - 1]
}
const handleCancel = (scope) => {
  api.financeApi.updateToUnQuestionOrder(scope.row.orderNo).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
      initData('3')
    }
  })
}

const initData = (type) => {
  let obj = {}
  if (type == '0' || type == '1' || type == '2') {
    obj = {
      ...firstForm.value,
      quotationTimeStart: firstForm.value?.quotationTime?.[0],
      quotationTimeEnd: firstForm.value?.quotationTime?.[1],
      signingTimeStart: firstForm.value?.signingTime?.[0],
      signingTimeEnd: firstForm.value?.signingTime?.[1],
      payingTimeBegin: firstForm.value?.payingTime?.[0],
      payingTimeEnd: firstForm.value?.payingTime?.[1],
      jqRiskStartDateBegin: firstForm.value?.jqRiskStartDate?.[0],
      jqRiskStartDateEnd: firstForm.value?.jqRiskStartDate?.[1],
      syRiskStartDateBegin: firstForm.value?.syRiskStartDate?.[0],
      syRiskStartDateEnd: firstForm.value?.syRiskStartDate?.[1],
      jyRiskStartDateBegin: firstForm.value?.jyRiskStartDate?.[0],
      jyRiskStartDateEnd: firstForm.value?.jyRiskStartDate?.[1],
      auditTimeBegin: firstForm.value?.auditTime?.[0],
      auditTimeEnd: firstForm.value?.auditTime?.[1],
      problemTimeBegin: firstForm.value?.problemTime?.[0],
      problemTimeEnd: firstForm.value?.problemTime?.[1],
      auditStatus: type,
      pages: pages.value,
      size: size.value,
    }
  } else {
    obj = {
      pages: pages.value,
      size: size.value,
      ...firstForm.value,
      quotationTimeStart: firstForm.value?.quotationTime?.[0],
      quotationTimeEnd: firstForm.value?.quotationTime?.[1],
      signingTimeStart: firstForm.value?.signingTime?.[0],
      signingTimeEnd: firstForm.value?.signingTime?.[1],
      payingTimeBegin: firstForm.value?.payingTime?.[0],
      payingTimeEnd: firstForm.value?.payingTime?.[1],
      jqRiskStartDateBegin: firstForm.value?.jqRiskStartDate?.[0],
      jqRiskStartDateEnd: firstForm.value?.jqRiskStartDate?.[1],
      syRiskStartDateBegin: firstForm.value?.syRiskStartDate?.[0],
      syRiskStartDateEnd: firstForm.value?.syRiskStartDate?.[1],
      jyRiskStartDateBegin: firstForm.value?.jyRiskStartDate?.[0],
      jyRiskStartDateEnd: firstForm.value?.jyRiskStartDate?.[1],
      auditTimeBegin: firstForm.value?.auditTime?.[0],
      auditTimeEnd: firstForm.value?.auditTime?.[1],
      problemTimeBegin: firstForm.value?.problemTime?.[0],
      problemTimeEnd: firstForm.value?.problemTime?.[1],
      isProblem: 1
    }
  }
  if (type == '0') {
    obj.allTodoReceive = true;
  }
  api.financeApi.auditList(obj).then((res: any) => {
    if (res.code == 200) {
      switch (type) {
        case '0':
          firstData.value = res.data.records
          total1.value = res.data.total
          break;
        case '1':
          secondData.value = res.data.records
          total2.value = res.data.total
          break;
        case '2':
          thirdData.value = res.data.records
          total3.value = res.data.total
          break;
        case '3':
          forthData.value = res.data.records
          total4.value = res.data.total
          break;
      }
    }
  })
}
const handleSearch = () => {
  initData(activeName.value)
}
const handleReset = () => {
  firstForm.value = {}
  initData(activeName.value)
}

const handleToDetail = (scope, type) => {
  myRouter.push({
    path: '/finance/auditOrderDetail',
    query: {
      id: scope.row.orderNo,
      activeindex: type
    }
  })
}

let orderData = ref([])
let trackShow = ref(false)
const handleTrack = (scope) => {
  api.insurancePolicyApi.orderTrack({
    orderNo: scope.row.orderNo
  }).then((res: any) => {
    if (res.code == 200) {
      orderData.value = res.data
      trackShow.value = true
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
const viewDetail = (row) => {
  myRouter.push({
    name: 'InsurancePolicyViewDetail',
    query: {
      info: JSON.stringify(row),
      activeindex: activeName.value
    }
  })
}
// 数据导出// 数据导出
const handleExport = (type: any) => {
  let obj = {
    ...firstForm.value,
    auditStatus: type,
  }
  if (type == '0') {
    obj.allTodoReceive = true;
  } else {
    delete obj.allTodoReceive;
  }
  api.financeApi.exportOrderExcel(obj).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);
    }
  })
}

const riskType = ref([])
const dictRisk = () => {
  api.additionalApi.dictDetails('report_risk_code').then((res: any) => {
    if (res.code == 200) {
      riskType.value = res.data.filter(v => v.value !== '0')
    }
  })
}
// 获取协议列表
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
    }
  })
}
onMounted(() => {
  institutionList();
  dictRisk();
  initCompany();
  initCompanyOptions()
  initData('0')
  initData('1')
  initData('2')
  initData('3')
  getagreementList()
  handleResize()
})

</script>

<style scoped lang="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);
  }
}

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

:deep(.el-badge__content.is-fixed) {
  right: calc(var(--el-badge-size) / 2 - 10px);
  top: 50%;
}

:deep(.el-badge__content--danger) {
  background-color: #D40000;
}

/* 自定义表格点击高亮颜色 */
:deep(.el-table__body tr.current-row > td) {
  background-color: #c1e8fa !important;
}

:deep(.el-table__body tr.current-row:hover > td) {
  background-color: #b4ddf8 !important;
}
</style>