加高级筛选

src/views/insurancePolicy/order.vue

@@ -1,68 +1,97 @@
 <template>
   <div class="order">
-    <el-form class="search" :model="orderForm" label-width="80">
-      <el-row :gutter="20">
-        <el-col :span="8">
+    <SearchBar :show-toggle="false" @toggle="onToggle" >
+      <template #default="{ fold, toggle }">
+        <el-form class="search-form" :model="orderForm" label-width="120" ref="multipleTableRef">
           <el-form-item label="订单号">
             <el-input placeholder="输入订单号查找" v-model="orderForm.orderNo"></el-input>
           </el-form-item>
-        </el-col>
-        <el-col :span="8">
           <el-form-item label="车牌号">
             <el-input placeholder="输入车牌号查找" v-model="orderForm.licenseNo"></el-input>
           </el-form-item>
-        </el-col>
-        <el-col :span="8">
           <el-form-item label="报价时间">
-            <el-date-picker
-              v-model="orderForm.range"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              value-format="YYYY-MM-DD HH:mm:ss"
-            />
+            <el-date-picker v-model="range" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+              end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
           </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="批改状态">
+          <el-form-item label="订单状态">
             <el-select v-model="orderForm.adjustStatus" placeholder="请选择">
-              <el-option v-for="item in dictData.ADJUST_STATUSDATA" :key="item.value" :value="item.value" :label="item.label"></el-option>
+              <el-option v-for="item in dictData.ADJUST_STATUSDATA" :key="item.value" :value="item.value"
+                :label="item.label"></el-option>
             </el-select>
           </el-form-item>
-        </el-col>
-        <el-col :span="8"></el-col>
-        <el-col :span="8" style="display: flex; justify-content: flex-end">
-          <el-button plain @click="handleCancel">重置</el-button>
-          <el-button type="primary" @click="handleSearch">查询</el-button>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-table
-      :data="tableData"
-      v-loading="loading"
-      height="calc(100% - 180px)"
-      style="margin-top: 24px; width: 100%"
-    >
+          <el-form-item label="保险公司" v-show="!fold">
+            <el-cascader clearable filterable style="width: 100%" v-model="orderForm.companyId" :options="companyOptions"
+            :props="tableProps" @change="handleCompanyChange"></el-cascader>
+          </el-form-item>
+          <el-form-item label="车架号" v-show="!fold">
+            <el-input placeholder="输入车架号查找" v-model="orderForm.vinNo"></el-input>
+          </el-form-item>
+          <el-form-item label="险种" v-show="!fold">
+            <el-select v-model="orderForm.productCode" placeholder="请选择险种">
+              <el-option label="全部" value=" " />
+              <el-option label="单交" value="0330" />
+              <el-option label="单三" value="034002" />
+              <el-option label="单商" value="034001" />
+              <el-option label="交三" value="0330034002" />
+              <el-option label="交商" value="0330034001" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="出单机构" v-show="!fold">
+            <el-cascader clearable filterable style="width: 100%" v-model="orderForm.deptId" :options="institutionList"
+              :props="tableProps" @change="handleInstitutionChange"></el-cascader>
+          </el-form-item>
+          <el-form-item label="业务员" v-show="!fold">
+            <el-input placeholder="输入业务员查找" v-model="orderForm.recorder"></el-input>
+          </el-form-item>
+          <el-form-item label="业务员类型" v-show="!fold">
+            <el-select v-model="orderForm.salesmanType" placeholder="请选择业务员类型">
+              <el-option label="全部" value=" " />
+              <el-option label="团队" value="5" />
+              <el-option label="个代" value="6" />
+              <el-option label="电销" value="7" />
+              <el-option label="渠道" value="8" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="签单时间" v-show="!fold">
+            <el-date-picker v-model="signingTime" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+              end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
+          </el-form-item>
+          <el-form-item label="支付时间" v-show="!fold">
+            <el-date-picker v-model="payTime" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+              end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
+          </el-form-item>
+          <el-form-item>
+            <el-button plain @click="handleCancel">重置</el-button>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button type="primary" link @click="toggle">
+              {{ fold ? '展开' : '收起' }}
+              <el-icon v-if="fold"><caret-bottom /></el-icon>
+              <el-icon v-else><caret-top /></el-icon>
+            </el-button>
+          </el-form-item>
+        </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-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>
       <el-table-column label="状态" prop="orderStatus" width="200">
         <template #default="scope">
-          {{ scope.row.orderStatus === '0'?'订单已提交':scope.row.orderStatus === '1'?'待核保':scope.row.orderStatus === '2'?'核保中':scope.row.orderStatus === '3'?'人工处理':scope.row.orderStatus === '4'?'待缴费':scope.row.orderStatus === '5'?'已承保':scope.row.orderStatus === '6'?'报价失败':scope.row.orderStatus === '7'?'核保失败':scope.row.orderStatus === '8'?'订单关闭':'' }}
+          {{ scope.row.orderStatus === '0' ? '订单已提交' : scope.row.orderStatus === '1' ? '待核保' : scope.row.orderStatus ===
+            '2' ? '核保中' : scope.row.orderStatus === '3' ? '人工处理' : scope.row.orderStatus === '4' ? '待缴费' :
+              scope.row.orderStatus ===
+                '5' ? '已承保' : scope.row.orderStatus === '6' ? '报价失败' : scope.row.orderStatus === '7' ? '核保失败' :
+                  scope.row.orderStatus ===
+                    '8' ? '订单关闭' : '' }}
         </template>
       </el-table-column>
       <el-table-column label="报价时间" prop="createTime" width="200"></el-table-column>
       <el-table-column label="险种" prop="productName" width="200"></el-table-column>
       <el-table-column label="保费计算" prop="sumPremium" width="200">
         <template #default="scope">
-          <el-tooltip
-            effect="dark"
-            content="红色保费是订单批改后的保费"
-            placement="top"
-            :disabled="!scope.row.adjustPremium"
-          >
+          <el-tooltip effect="dark" content="红色保费是订单批改后的保费" placement="top" :disabled="!scope.row.adjustPremium">
             <span :style="{
               color: !scope.row.adjustPremium ? 'inherit' : '#F56C6C'
             }">{{ scope.row.adjustPremium || scope.row.sumPremium }}</span>
@@ -71,7 +100,8 @@
       </el-table-column>
       <el-table-column label="批改状态" prop="status" width="200">
         <template #default="scope">
-          <el-link type="primary" v-if="scope.row.adjustStatus" @click="openDetail(scope.row)">{{ getStateText(dictData.ADJUST_STATUSDATA, scope.row.adjustStatus) }}</el-link>
+          <el-link type="primary" v-if="scope.row.adjustStatus" @click="openDetail(scope.row)">{{
+            getStateText(dictData.ADJUST_STATUSDATA, scope.row.adjustStatus) }}</el-link>
           <span v-else>{{ getStateText(dictData.ADJUST_STATUSDATA, scope.row.adjustStatus) }}</span>
         </template>
       </el-table-column>
@@ -93,18 +123,27 @@
       <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 === '7' || scope.row.orderStatus === '1'" @click="toEdit(scope.row)">提交核保</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 === '7' || 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 === '7' || scope.row.orderStatus === '1' || scope.row.orderStatus === '4'" @click="updateOrderStatus(scope.row.orderNo)">更新订单</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"
+            v-if="scope.row.orderStatus === '7' || scope.row.orderStatus === '1' || scope.row.orderStatus === '4'"
+            @click="updateOrderStatus(scope.row.orderNo)">更新订单</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" v-if="scope.row.orderStatus === '5'">下载电子保单</el-button>
           <el-button link type="primary" 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="danger" 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="danger"
+            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">
@@ -117,27 +156,17 @@
                 <el-dropdown-item @click="onClick(0, scope.row)">整单退保</el-dropdown-item>
               </el-dropdown-menu>
             </template>
-          </el-dropdown>-->
+    </el-dropdown>-->
         </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="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      ></el-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="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"></el-pagination>
     </div>
     <!-- 支付码 -->
-    <el-dialog
-      v-model="payCodeShow"
-      width="400"
-      title="支付码"
-    >
+    <el-dialog v-model="payCodeShow" width="400" title="支付码">
       <img class="payCode" :src="payCodeUrl">
       <template #footer>
         <el-button plain type="danger">撤销二维码</el-button>
@@ -158,18 +187,34 @@ import DialogInsuranceCancel from '@/views/orderBatchAdjust/DialogInsuranceCance
 import { dictData } from '@/views/localDict/index';
 import { ElMessage } from "element-plus";
 import { useRouter } from 'vue-router';
-
+import { TableInstance  } from 'element-plus';
 const router = useRouter()
 const loading = ref(false)
 const formData = ref({})
 const isEditVisible = ref(false)
 const isCancelVisible = ref(false)
+const signingTime = ref([]) //核保时间
+const payTime = ref([]) //支付时间
+const range = ref([])//报价时间
+const institutionList = ref([])  // 机构列表数据
+const tableProps = ref({
+  value: "id",            // 选项值字段
+  label: "name",          // 选项标签字段
+  children: "children",   // 子级字段
+  checkStrictly: true,    // 父子节点取消关联
+})
 
 let initialForm = {
   orderNo: '',
   licenseNo: '',
-  range: [],
-  adjustStatus: ''
+  adjustStatus: '',
+  companyId: '',//保险公司
+  vinNo: '',//车架号
+  productCode: '',//险种
+  recorder: '',//业务员
+  salesmanType: '',//业务员类型
+  deptId: '',//出单机构
+
 }
 let orderForm = ref({ ...initialForm })
 let tableData = ref([])
@@ -178,10 +223,38 @@ let pages = ref(1)
 let size = ref(10)
 let total = ref(0)
 
-onMounted(() => {
-  initData()
+onMounted( async () => {
+  await initData()
+  await initDept()
+  await company()
+  await handleResize()
 });
+const multipleTableRef = ref<TableInstance>();
+  const tableHeight = ref(); // 初始化表格高度
+
+function handleResize() {
+  // 获取当前窗口的高度
+  const height = window.innerHeight;
+  // 获取表单元素
+  const formElement = multipleTableRef.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 - 200; // 60是页面顶部预留空间
+
+    // 确保表格高度不小于最小值
+    tableHeight.value = Math.max(availableHeight, 200) + "px";
 
+    console.log('计算出的表格高度:', tableHeight.value);
+  }
+}
 const handleSizeChange = (e: number) => {
   size.value = e
   initData()
@@ -190,17 +263,66 @@ const handleCurrentChange = (page: number) => {
   pages.value = page
   initData()
 }
+async function onToggle(fold: boolean) {
+  nextTick(() => {
+    handleResize()
+  })
+
+}
+// 初始化保险公司
+
+const companyOptions = ref([])
+const handleCompanyChange = (val: any) => {
+  orderForm.value.companyId = val[val.length - 1]
+}
+const handleInstitutionChange = (val: any) => {
+  orderForm.value.deptId = val[val.length - 1]
+}
+
+const company = () => {
+  api.agreementApi.findTree({ name: "", systemCode: localStorage.getItem('login_system') }).then((res: any) => {
+    if (res.code == '200') {
+      companyOptions.value = res.data;
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
+        plain: true,
+      })
+    }
+  });
+}
+/**
+ * 初始化部门树结构
+ * 获取当前登录系统的部门层级结构
+ */
+ const initDept = () => {
+  api.insuranceApi.getDeptTree({ sysCode: localStorage.getItem('login_system') }).then((res: any) => {
+    if (res.code == 200) {
+      institutionList.value = res.data
+    } else {
+      ElMessage({
+        message: res.msg,
+        type: 'warning'
+      })
+    }
+  })
+}
 const initData = () => {
   loading.value = true;
-  let { range, ...params } = orderForm.value;
+  let { ...params } = orderForm.value;
   api.insurancePolicyApi.queryList({
     pages: pages.value,
     size: size.value,
     ...params,
-    startDate: orderForm.value.range?.[0],
-    endDate: orderForm.value.range?.[1],
+    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) {
+    if (res.code == 200) {
       tableData.value = res.data.records
       total.value = res.data.total
     } else {
@@ -227,37 +349,37 @@ const handleCancel = () => {
 }
 // 详情
 const toDetail = (orderNo: any) => {
-    router.push({
-        path: '/insurancePolicy/order/insurancePolicyOrderDetail',
-        query: {
-            orderNo: orderNo
-        }
-    })
+  router.push({
+    path: '/insurancePolicy/order/insurancePolicyOrderDetail',
+    query: {
+      orderNo: orderNo
+    }
+  })
 }
 
 // 编辑
 const toEdit = (row: any) => {
-    router.push({
-        path: '/insurancePolicy/index',
-        query: {
-            orderNo: row.orderNo
-        }
-    })
+  router.push({
+    path: '/insurancePolicy/index',
+    query: {
+      orderNo: row.orderNo
+    }
+  })
 }
 
 const updateOrderStatus = (orderNo) => {
   api.insurancePolicyApi.getOrderStatus({ order: { ordersNo: orderNo } }).then((res: any) => {
-    if(res.code == 200) {
-        ElMessage({
-            message: res.msg,
-            type: 'success'
-        })
-        initData()
+    if (res.code == 200) {
+      ElMessage({
+        message: res.msg,
+        type: 'success'
+      })
+      initData()
     } else {
-        ElMessage({
-            message: res.msg,
-            type: 'warning'
-        })
+      ElMessage({
+        message: res.msg,
+        type: 'warning'
+      })
     }
   })
 }
@@ -266,32 +388,32 @@ const updateOrderStatus = (orderNo) => {
 let payCodeShow = ref(false)
 let payCodeUrl = ref('')
 const payCode = (scope: any) => {
-    payCodeShow.value = true
-    api.insurancePolicyApi.getQrCode(scope.row.orderNo).then((res: any) => {
-        if(res.code == 200) {
-            payCodeUrl.value = res.data?.qrcode
-        } else {
-            payCodeUrl.value = ''
-            ElMessage({
-                message: res.msg,
-                type: 'warning'
-            })
-        }
-    })
+  payCodeShow.value = true
+  api.insurancePolicyApi.getQrCode(scope.row.orderNo).then((res: any) => {
+    if (res.code == 200) {
+      payCodeUrl.value = res.data?.qrcode
+    } else {
+      payCodeUrl.value = ''
+      ElMessage({
+        message: res.msg,
+        type: 'warning'
+      })
+    }
+  })
 }
 
 const uploadStatus = (row: any) => {
   api.insurancePolicyApi.getOrderStatus({
-      order:{ordersNo: row.orderNo}
+    order: { ordersNo: row.orderNo }
   }).then((res: any) => {
-      if(res.code == 200) {
-          initData()
-      } else {
-          ElMessage({
-              message: res.msg,
-              type: 'warning'
-          })
-      }
+    if (res.code == 200) {
+      initData()
+    } else {
+      ElMessage({
+        message: res.msg,
+        type: 'warning'
+      })
+    }
   })
 }
 
@@ -301,7 +423,7 @@ const onClick = (type: any, row: any) => {
     type: type,
     orderNo: row.orderNo,
   }).then((res: any) => {
-    if(res.code == 200) {
+    if (res.code == 200) {
       formData.value = {
         ...row,
         adjustId: res.data.id,
@@ -323,8 +445,8 @@ const onClick = (type: any, row: any) => {
 }
 
 const getStateText = (d: any, v: any) => {
-	let label = d.find((item: any) => item.value == v)?.label;
-	return label || '--';
+  let label = d.find((item: any) => item.value == v)?.label;
+  return label || '--';
 };
 
 // 批改记录
@@ -334,26 +456,50 @@ const openDetail = (e: any) => {
 </script>
 
 <style scoped lang="scss">
-.order{
+.search-form {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  :deep(.el-form-item) {
+    grid-column: auto / span 1;
+
+    &:last-child {
+      grid-column-end: -1;
+
+      .el-form-item__content {
+        justify-content: flex-end;
+      }
+    }
+
+    &.search-form-item-name {
+      grid-column: auto / span 2;
+    }
+  }
+}
+
+.order {
   width: 100%;
   height: calc(100vh - 120px);
   background: #FFFFFF;
   padding: 24px;
-  .pagination{
+  overflow-y: auto;
+  .pagination {
     margin-top: 24px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
   }
-  .payCode{
+
+  .payCode {
     display: block;
     width: 140px;
     height: 140px;
     margin: 10px auto;
   }
 }
+
 :deep(.el-dialog__body) {
-	height: 500px;
-	overflow: auto;
+  height: 500px;
+  overflow: auto;
 }
 </style>