订单列表修改为按车牌号和险种区分，然后再获取详细订单列表

src/api/modules/insurancePolicy.ts

@@ -15,6 +15,7 @@ const insurancePolicyApi = (axiosInstance: ApiInstance) => ({
   underwriting: (data: any) => axiosInstance.post('/unify/order/underwriting', data), // 核保
   imageSave: (data: any) => axiosInstance.post('/unify/order/imageSave', data), // 本地影像存储
   queryList: (data: any) => axiosInstance.post('supplementOrder/queryList', data), // 订单
+  queryMainOrderList: (data: any) => axiosInstance.post('supplementOrder/queryMainOrderList', data), // 订单
   deleteOrder: (data: any) => axiosInstance.get(`supplementOrder/deleteById?id=${data.id}`), // 删除订单
   getOrderStatus: (data: any) => axiosInstance.post('/unify/order/getOrderStatus', data), // 状态更新
   mockUnderwited: (data: any) => axiosInstance.post('/unify/order/mockUnderwited', data), // 模拟付款

src/components/complexTable/index.vue

@@ -4,101 +4,111 @@
       <div class="table-title-btn" v-if="$slots['table-title-btn']">
         <slot name="table-title-btn"></slot>
       </div>
-      <el-table ref="multipleTableRef" :row-key="rowKey"
-        :header-cell-style="{ 'background-color': '#F7F7F9', 'border-bottom': '1px solid #EEF1F6', 'font-size': '15px', 'color': '#333', 'padding': '10px 0' }"
-        :data="props.tableData" :height="tableHeight" :max-height="maxHeight" table-layout="fixed" style="width: 100%;"
-        @selection-change="selectionChange" @select-all="selectAllChange" @cell-mouse-enter="handleMouseEnter"
-        @cell-mouse-leave="handleMouseLeave" :highlight-current-row="highlightCurrentRow"
-        @current-change="currentChange" v-loading="loading" :show-summary='props.showSummary' border>
-        <!-- 空内容自定义 -->
-        <template #empty>
-          <div class="flex f-c a-c ">
-            <img src="../../assets/images/empty.png" alt="">
-            <span style="font-size: 14px;color: #909399;">暂无数据</span>
-          </div>
-        </template>
-        <el-table-column type="selection" v-if="showSelect" :selectable="selectable" width="55" fixed="left" />
-        <el-table-column type="expand" v-if="secondaryTable">
-          <template #default="props">
-            <div>
-              <el-table :data="props.row.children">
-                <el-table-column v-for="column in secondaryColumns" :key="column.prop" :prop="column.prop"
-                  :label="column.label" :sortable="column.sortable ? 'custom' : false" :width="column.width">
-                  <template #header>
-                    <slot name="search" :slotData="column"></slot>
-                  </template>
-                  <template #default="scope">
-                    <RouterLink v-if="column.component === 'RouterLink'" :to="getRouterLinkTo(scope.row, column)"
-                      class="custom-link">
-                      {{ scope.row[column.prop] }}
-                    </RouterLink>
-                    <el-tag v-else-if="column.component === 'Tag'" :type="getTagTypeAndText(scope.row, column).type">
-                      {{ getTagTypeAndText(scope.row, column).text }}
-                    </el-tag>
-                    <ImagePreview v-else-if="column.component === 'Image'" :src="getImgTo(scope.row, column)"
-                      width="50px" height="50px"></ImagePreview>
-                    <template v-else>
-                      {{ getDisplayText(scope.row, column) }}
-                    </template>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" fixed="right" :width="props.columnwidth">
-                  <template #default="scope">
-                    <slot name="secondary" :secondaryData="scope.row"></slot>
-                  </template>
-                </el-table-column>
-              </el-table>
+      <!-- <OverlayScrollbarsComponent defer :options="{
+        scrollbars: {
+          autoHide: 'leave',      // 鼠标离开时自动隐藏
+          clickScroll: true,      // 允许点击轨道滚动
+          theme: 'my-theme',      // 自定义主题
+        }
+      }"> -->
+        <el-table ref="multipleTableRef" :row-key="rowKey"
+          :header-cell-style="{ 'background-color': '#F7F7F9', 'border-bottom': '1px solid #EEF1F6', 'font-size': '15px', 'color': '#333', 'padding': '10px 0' }"
+          :data="props.tableData" :height="tableHeight" :max-height="maxHeight" table-layout="fixed"
+          style="width: 100%;" @selection-change="selectionChange" @select-all="selectAllChange"
+          @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave"
+          :highlight-current-row="highlightCurrentRow" @current-change="currentChange" v-loading="loading"
+          :show-summary='props.showSummary' border>
+          <!-- 空内容自定义 -->
+          <template #empty>
+            <div class="flex f-c a-c ">
+              <img src="../../assets/images/empty.png" alt="">
+              <span style="font-size: 14px;color: #909399;">暂无数据</span>
             </div>
-
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showIndex" type="index" label="序号" width="55" />
-        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
-          :sortable="column.sortable ? 'custom' : false" :width="column.width" :filters="column.filters"
-          :filter-method="column.filters ? (value, row) => row[column.prop] === value : undefined"
-          :filtered-value="column.filteredValue ? column.filteredValue : undefined" :fixed="column.fixed || false"
-          :align="column.align ? column.align : 'center'" show-overflow-tooltip>
-          <template #header>
-            <slot name="search" :slotData="column"></slot>
           </template>
-          <template #default="scope" v-if="column.component === 'customSlot'">
-            <slot name="customSlot" :data="scope.row" :bodyCell="{ scope, column }"></slot>
-            <slot :name="column.prop" :data="scope.row" :bodyCell="{ scope, column }"></slot>
-          </template>
-          <template #default="scope" v-else>
-            <RouterLink v-if="column.component === 'RouterLink'" :to="getRouterLinkTo(scope.row, column)"
-              class="custom-link">
-              {{ scope.row[column.prop] }}
-            </RouterLink>
-            <div v-else-if="column.component === 'html'">
-              <span v-html="htmlEvent(scope.row, column).html"></span>
-            </div>
-            <el-tag v-else-if="column.component === 'Tag'" :type="getTagTypeAndText(scope.row, column).type">
-              {{ getTagTypeAndText(scope.row, column).text }}
-            </el-tag>
-            <ImagePreview v-else-if="column.component === 'Image'" :src="getImgTo(scope.row, column)" width="50px"
-              height="50px"></ImagePreview>
-            <span v-else>
-              <div
-                v-if="typeof getDisplayText(scope.row, column) === 'string' && getDisplayText(scope.row, column).includes('\n')"
-                class="flex f-c ">
-                <span v-for="(line, index) in getDisplayText(scope.row, column).split('\n')" :key="index">{{ line
-                  }}</span>
+          <el-table-column type="selection" v-if="showSelect" :selectable="selectable" width="55" fixed="left" />
+          <el-table-column type="expand" v-if="secondaryTable">
+            <template #default="props">
+              <div>
+                <el-table :data="props.row.children">
+                  <el-table-column v-for="column in secondaryColumns" :key="column.prop" :prop="column.prop"
+                    :label="column.label" :sortable="column.sortable ? 'custom' : false" :width="column.width">
+                    <template #header>
+                      <slot name="search" :slotData="column"></slot>
+                    </template>
+                    <template #default="scope">
+                      <RouterLink v-if="column.component === 'RouterLink'" :to="getRouterLinkTo(scope.row, column)"
+                        class="custom-link">
+                        {{ scope.row[column.prop] }}
+                      </RouterLink>
+                      <el-tag v-else-if="column.component === 'Tag'" :type="getTagTypeAndText(scope.row, column).type">
+                        {{ getTagTypeAndText(scope.row, column).text }}
+                      </el-tag>
+                      <ImagePreview v-else-if="column.component === 'Image'" :src="getImgTo(scope.row, column)"
+                        width="50px" height="50px"></ImagePreview>
+                      <template v-else>
+                        {{ getDisplayText(scope.row, column) }}
+                      </template>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" fixed="right" :width="props.columnwidth">
+                    <template #default="scope">
+                      <slot name="secondary" :secondaryData="scope.row"></slot>
+                    </template>
+                  </el-table-column>
+                </el-table>
               </div>
+
+            </template>
+          </el-table-column>
+          <el-table-column v-if="showIndex" type="index" label="序号" width="55" />
+          <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
+            :sortable="column.sortable ? 'custom' : false" :width="column.width" :filters="column.filters"
+            :filter-method="column.filters ? (value, row) => row[column.prop] === value : undefined"
+            :filtered-value="column.filteredValue ? column.filteredValue : undefined" :fixed="column.fixed || false"
+            :align="column.align ? column.align : 'center'" show-overflow-tooltip>
+            <template #header>
+              <slot name="search" :slotData="column"></slot>
+            </template>
+            <template #default="scope" v-if="column.component === 'customSlot'">
+              <slot name="customSlot" :data="scope.row" :bodyCell="{ scope, column }"></slot>
+              <slot :name="column.prop" :data="scope.row" :bodyCell="{ scope, column }"></slot>
+            </template>
+            <template #default="scope" v-else>
+              <RouterLink v-if="column.component === 'RouterLink'" :to="getRouterLinkTo(scope.row, column)"
+                class="custom-link">
+                {{ scope.row[column.prop] }}
+              </RouterLink>
+              <div v-else-if="column.component === 'html'">
+                <span v-html="htmlEvent(scope.row, column).html"></span>
+              </div>
+              <el-tag v-else-if="column.component === 'Tag'" :type="getTagTypeAndText(scope.row, column).type">
+                {{ getTagTypeAndText(scope.row, column).text }}
+              </el-tag>
+              <ImagePreview v-else-if="column.component === 'Image'" :src="getImgTo(scope.row, column)" width="50px"
+                height="50px"></ImagePreview>
               <span v-else>
-                {{ getDisplayText(scope.row, column) }}
+                <div
+                  v-if="typeof getDisplayText(scope.row, column) === 'string' && getDisplayText(scope.row, column).includes('\n')"
+                  class="flex f-c ">
+                  <span v-for="(line, index) in getDisplayText(scope.row, column).split('\n')" :key="index">{{ line
+                  }}</span>
+                </div>
+                <span v-else>
+                  {{ getDisplayText(scope.row, column) }}
+                </span>
               </span>
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" fixed="right" :width="props.columnwidth" v-if="props.showOperation" align="center">
-          <template #default="scope">
-            <div class="flex a-c j-c">
-              <slot name="operation" :operationData="scope.row"></slot>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" fixed="right" :width="props.columnwidth" v-if="props.showOperation"
+            align="center">
+            <template #default="scope">
+              <div class="flex a-c j-c">
+                <slot name="operation" :operationData="scope.row"></slot>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      <!-- </OverlayScrollbarsComponent> -->
     </div>
     <div class="page_box" v-if="props.pageInfo">
       <el-pagination v-model:current-page="props.pageInfo.pageNum" v-model:page-size="props.pageInfo.pageSize"
@@ -109,6 +119,8 @@
 </template>
 
 <script lang="ts" setup>
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+
 import { defineProps, ref, onMounted, defineEmits } from "vue";
 import type { TableInstance } from "element-plus";
 

src/views/insurancePolicy/order/order.vue

@@ -74,8 +74,18 @@
         </el-form>
       </template>
     </SearchBar>
-    <el-table :data="tableData" v-loading="loading" :height="tableHeight" style=" width: 100%">
-      <el-table-column label="订单号" prop="orderNo" width="200"></el-table-column>
+    <el-table :data="tableData" v-loading="loading" :height="tableHeight" :load="loadData" row-key="orderNo" lazy
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
+      <el-table-column label="订单号" prop="orderNo" width="220">
+        <!-- <template #default="scope">
+          <span class="" v-if="scope.row.hasChildren">
+            <span class="mr-60px inline-block w-128px">车牌号：{{ scope.row.licenseNo }}</span>
+            <span class="mr-60px inline-block w-198px">车架号：{{ scope.row.vinNo }}</span>
+            <span class="mr-60px">险种：{{ scope.row.productName }}</span>
+          </span>
+          <span class="" v-else>{{ scope.row.orderNo }}</span>
+        </template> -->
+      </el-table-column>
       <el-table-column label="保险公司" prop="companyName" width="200"></el-table-column>
       <el-table-column label="车牌号" prop="licenseNo" width="200"></el-table-column>
       <el-table-column label="车架号" prop="vinNo" width="200"></el-table-column>
@@ -125,47 +135,49 @@
       <el-table-column label="车船税" prop="vvTax" width="200"></el-table-column>
       <el-table-column label="操作" width="200" fixed="right">
         <template #default="scope">
-          <el-button link type="primary" @click="toDetail(scope.row.orderNo)">详情</el-button>
-          <el-button link type="primary"
-            v-if="scope.row.orderStatus != '7' && scope.row.orderStatus != '7' && scope.row.orderStatus != '8'"
-            @click="toEdit(scope.row)">编辑</el-button>
-          <el-button link type="primary" v-if="scope.row.orderStatus === '1'"
-            @click="toEdit(scope.row)">提交核保</el-button>
-          <el-button link type="primary" v-if="scope.row.orderStatus === '3'">取消核保</el-button>
-          <el-button link type="primary" v-if="scope.row.orderStatus === '4'"
-            @click="updateOrderStatus(scope.row.orderNo)">更新订单</el-button>
-          <!-- 模拟接口，正式上线后，删除 -->
-          <el-button link type="primary" :loading="scope.row.loading" v-if="scope.row.orderStatus === '4'"
-            @click="mockUnderwited(scope.row)">模拟承保</el-button>
-          <el-button link type="primary" v-if="scope.row.orderStatus === '3'"
-            @click="updateOrderStatus(scope.row.orderNo)">同步订单</el-button>
-          <el-button link type="primary" v-if="scope.row.orderStatus === '6'"
-            @click="toEdit(scope.row)">计算保费</el-button>
-          <el-button link type="primary" v-if="scope.row.orderStatus === '8'"
-            @click="toEdit(scope.row)">重新报价</el-button>
-          <el-button link type="primary" @click="downloadElectronicPolicy(scope.row)"
-            v-if="scope.row.orderStatus === '5'">下载电子保单</el-button>
-          <el-button link type="primary" @click="viewElectronicPolicy(scope.row)"
-            v-if="scope.row.orderStatus === '5'">查看电子保单</el-button>
-          <el-button link type="primary" v-if="scope.row.orderStatus === '4'" @click="payCode(scope)">支付码</el-button>
-          <el-button link type="primary" :loading="scope.row.loading" @click="handleQuotationView(scope.row)"
-            v-if="['1', '3', '4'].includes(scope.row.orderStatus)">报价单预览</el-button>
-          <el-button link type="danger" @click="deleteOrder(scope.row.orderNo)"
-            v-if="scope.row.orderStatus === '6' || scope.row.orderStatus === '8'">删除订单</el-button>
-          <el-dropdown trigger="click" class="ml-[12px] align-middle" v-if="scope.row.orderStatus === '5'">
-            <el-button link type="primary">
-              订单批改
-              <el-icon class="el-icon&#45;&#45;right">
-                <arrow-down />
-              </el-icon>
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="onClick(1, scope.row)">险种批改</el-dropdown-item>
-                <el-dropdown-item @click="onClick(0, scope.row)">整单退保</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          <template v-if="!scope.row.hasChildren">
+            <el-button link type="primary" @click="toDetail(scope.row.orderNo)">详情</el-button>
+            <el-button link type="primary"
+              v-if="scope.row.orderStatus != '7' && scope.row.orderStatus != '7' && scope.row.orderStatus != '8'"
+              @click="toEdit(scope.row)">编辑</el-button>
+            <el-button link type="primary" v-if="scope.row.orderStatus === '1'"
+              @click="toEdit(scope.row)">提交核保</el-button>
+            <el-button link type="primary" v-if="scope.row.orderStatus === '3'">取消核保</el-button>
+            <el-button link type="primary" v-if="scope.row.orderStatus === '4'"
+              @click="updateOrderStatus(scope.row.orderNo)">更新订单</el-button>
+            <!-- 模拟接口，正式上线后，删除 -->
+            <el-button link type="primary" :loading="scope.row.loading" v-if="scope.row.orderStatus === '4'"
+              @click="mockUnderwited(scope.row)">模拟承保</el-button>
+            <el-button link type="primary" v-if="scope.row.orderStatus === '3'"
+              @click="updateOrderStatus(scope.row.orderNo)">同步订单</el-button>
+            <el-button link type="primary" v-if="scope.row.orderStatus === '6'"
+              @click="toEdit(scope.row)">计算保费</el-button>
+            <el-button link type="primary" v-if="scope.row.orderStatus === '8'"
+              @click="toEdit(scope.row)">重新报价</el-button>
+            <el-button link type="primary" @click="downloadElectronicPolicy(scope.row)"
+              v-if="scope.row.orderStatus === '5'">下载电子保单</el-button>
+            <el-button link type="primary" @click="viewElectronicPolicy(scope.row)"
+              v-if="scope.row.orderStatus === '5'">查看电子保单</el-button>
+            <el-button link type="primary" v-if="scope.row.orderStatus === '4'" @click="payCode(scope)">支付码</el-button>
+            <el-button link type="primary" :loading="scope.row.loading" @click="handleQuotationView(scope.row)"
+              v-if="['1', '3', '4'].includes(scope.row.orderStatus)">报价单预览</el-button>
+            <el-button link type="danger" @click="deleteOrder(scope.row.orderNo)"
+              v-if="scope.row.orderStatus === '6' || scope.row.orderStatus === '8'">删除订单</el-button>
+            <el-dropdown trigger="click" class="ml-[12px] align-middle" v-if="scope.row.orderStatus === '5'">
+              <el-button link type="primary">
+                订单批改
+                <el-icon class="el-icon&#45;&#45;right">
+                  <arrow-down />
+                </el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="onClick(1, scope.row)">险种批改</el-dropdown-item>
+                  <el-dropdown-item @click="onClick(0, scope.row)">整单退保</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
         </template>
       </el-table-column>
     </el-table>
@@ -511,7 +523,7 @@ const handleReset = () => {
 const initData = () => {
   loading.value = true;
   let { ...params } = orderForm.value;
-  api.insurancePolicyApi.queryList({
+  api.insurancePolicyApi.queryMainOrderList({
     pages: pages.value,
     size: size.value,
     ...params,
@@ -524,7 +536,7 @@ const initData = () => {
     endPayTime: payTime.value?.[1],//结束支付时间
   }).then((res: any) => {
     if (res.code == 200) {
-      tableData.value = res.data.records
+      tableData.value = res.data.records.map(v => ({ ...v, hasChildren: true, children: [] }))
       total.value = res.data.total
     } else {
       ElMessage({
@@ -536,6 +548,31 @@ const initData = () => {
     loading.value = false;
   });
 }
+const loadData = (row, treeNode, resolve) => {
+  let { ...params } = orderForm.value;
+  api.insurancePolicyApi.queryList({
+    pages: 1,
+    size: 1000,
+    ...params,
+    parentId: row.orderNo,
+    salesmanType: props.salesmanType,
+    startDate: range.value?.[0],
+    endDate: range.value?.[1],
+    startSigningTime: signingTime.value?.[0],//开始核保时间
+    endSigningTime: signingTime.value?.[1],//结束核保时间
+    startPayTime: payTime.value?.[0],//开始支付时间
+    endPayTime: payTime.value?.[1],//结束支付时间
+  }).then((res: any) => {
+    if (res.code == 200) {
+      resolve(res.data.records)
+    } else {
+      ElMessage({
+        message: res.msg,
+        type: 'warning'
+      })
+    }
+  })
+}
 // 导出订单
 const exportOrder = () => {
   if (checkList.value.length == 0) {