优化结算统计功能

src/views/medical-insurance/allpatient/SetlStatistics.vue

@@ -5,7 +5,7 @@
       <el-select v-model="setlConditon.admdvsType" placeholder="参保地归属" style="width: 120px">
         <el-option v-for="item in insuOptins" :key="item.code" :value="item.code" :label="item.name"></el-option>
       </el-select>
-      <el-select v-model="setlConditon.insutype" placeholder="险种类型" filterable style="width: 200px">
+      <el-select v-model="setlConditon.insutype" placeholder="险种类型" filterable clearable style="width: 200px">
         <el-option v-for="item in insutypes" :key="item.code" :value="item.code" :label="item.name"></el-option>
       </el-select>
       <el-divider direction="vertical"></el-divider>
@@ -13,9 +13,23 @@
       <el-button type="primary" icon="el-icon-download" @click="exportSetlinfoExcel">导出Excel</el-button>
     </el-header>
     <el-main>
-      <el-table :data="setlinfos" stripe :max-height="tableHeight" highlight-current-row border show-summary @row-dblclick="fetchSetldetails">
-        <el-table-column type="index" label="序号"></el-table-column>
-        <el-table-column prop="admdvsName" label="参保地名称"></el-table-column>
+      <el-table
+        :data="setlinfos"
+        row-key="childKey"
+        :row-class-name="differChildrenRows"
+        :max-height="tableHeight"
+        highlight-current-row
+        border
+        show-summary
+        @row-dblclick="fetchSetldetails"
+      >
+        <!-- <el-table-column type="index" label="序号"></el-table-column> -->
+        <el-table-column label="参保地" width="144">
+          <template #default="scope">
+            <div :style="admdvsNameStyle(scope.row.children, scope.row.isChildren)" class="ellipsis-text" :title="scope.row.admdvsName">{{ scope.row.admdvsName }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="insutypeName" label="险种类型"></el-table-column>
         <el-table-column prop="psnSumamt" label="人次"></el-table-column>
         <el-table-column prop="medfeeSumamt" label="医疗总费用"></el-table-column>
         <el-table-column prop="baseMedFundpaySumamt" label="基本医疗统筹金额"></el-table-column>
@@ -97,6 +111,21 @@ export default {
     const setldetails = ref([])
     const showSetldetails = ref(false)
 
+    const admdvsNameStyle = (children, isChildren) => {
+      return {
+        position: 'absolute',
+        top: '6px',
+        left: children || isChildren ? '24px' : '10px',
+        width: '110px',
+      }
+    }
+
+    const differChildrenRows = ({ row }) => {
+      if (row.isChildren) {
+        return 'children-row'
+      }
+    }
+
     const filterDialogTitle = computed(() => {
       return `【${setlConditon.month}】【${filterAdmdvsName()}】【${filterInsutypeName()}】结算明细`
     })
@@ -111,15 +140,6 @@ export default {
         })
         return
       }
-      if (!setlConditon.insutype) {
-        ElMessage({
-          message: '请选择险种类型！',
-          type: 'warning',
-          duration: 2500,
-          showClose: true,
-        })
-        return
-      }
       if (!setlConditon.admdvsType) {
         ElMessage({
           message: '请选择参保地归属！',
@@ -214,6 +234,7 @@ export default {
 
     const fetchSetldetails = (row) => {
       setlConditon.insuplcAdmdvs = row.insuplcAdmdvs
+      setlConditon.insutype = row.insutype
       selectSetldetailStatistics(setlConditon)
         .then((res) => {
           setldetails.value = res
@@ -287,6 +308,8 @@ export default {
       currentPage,
       showSetlinfoComponent,
       currentSetldetail,
+      admdvsNameStyle,
+      differChildrenRows,
       handleCurrentChange,
       handleSizeChange,
       fetchSetlinfos,
@@ -323,3 +346,20 @@ function initInsuOptions() {
   ]
 }
 </script>
+
+<style scoped>
+:deep(.el-table .children-row) {
+  background: rgba(145, 247, 145, 0.5);
+}
+:deep(.el-table--border td:first-child .cell, .el-table--border th:first-child .cell) {
+  padding-left: 4px;
+}
+:deep(.el-table) {
+  --el-table-row-hover-background-color: #85dbfd7a;
+}
+:deep(.el-table__footer-wrapper tbody td) {
+  background: #df4a25;
+  color: white;
+  font-weight: bold;
+}
+</style>