表格封装2

src/components/publicModule/lkyTable.vue

@@ -2,12 +2,7 @@
 <template>
   <!-- 本组件样式包含表格、分页 -->
   <div class="table_pagination_body" :style="table_pagination_style">
-    <el-table
+    <el-table class="lky_table" :data="table_data" :height="table_height">
-      class="lky_table"
-      :data="table_data"
-      :height="table_height"
-      :cell-style="{ background: 'revert', 'text-align': 'center' }"
-    >
       <!-- 是否需要多行选择数据 -->
       <el-table-column
         v-if="table_select"
@@ -37,11 +32,11 @@
                 :width="val.width"
                 align="center"
               >
-                <!-- 如果val.picture为ture时，则该列单元格可显示图片 -->
+                <!-- 如果val.picture为true时，则该列单元格可显示图片 -->
                 <template v-if="val.picture" #default="{ row }">
                   <!-- 二级表数据照片 -->
                   <el-image
-                    :src="row.pic_child"
+                    :src="row[val.prop]"
                     style="width: 42px; height: 42px"
                   >
                     <div slot="error" class="image-slot">
@@ -49,6 +44,22 @@
                     </div>
                   </el-image>
                 </template>
+                <!-- 如果val.color为true时，则该列单元格字颜色按需更改 -->
+                <template v-else-if="val.color" #default="{ row }">
+                  <div :style="{ color: child_style_change(row[val.prop]) }">
+                    {{ row[val.prop] }}
+                  </div>
+                </template>
+                <!-- 如果val.link为true时，则该列单元格文字可点击 -->
+                <template v-else-if="val.link" #default="{ row }">
+                  <el-link
+                    :underline="false"
+                    type="primary"
+                    @click="table_link(row)"
+                  >
+                    {{ row[val.prop] }}
+                  </el-link>
+                </template>
               </el-table-column>
             </template>
           </el-table-column>
@@ -62,27 +73,19 @@
             :width="item.width"
             align="center"
           >
-            <!-- 如果item.picture为ture时，则该列单元格可显示图片 -->
+            <!-- 如果item.picture为true时，则该列单元格可显示图片 -->
             <template v-if="item.picture" #default="{ row }">
-              <el-image
+              <el-image :src="row[item.prop]" style="width: 42px; height: 42px">
-                :src="row.pic"
-                style="width: 42px; height: 42px"
-              >
                 <div slot="error" class="image-slot">
                   <img src="@/assets/companyFile/avatar.png" alt="" />
                 </div>
               </el-image>
             </template>
-            <!-- 如果item.picture_two为ture时，则该列单元格可显示图片 -->
+            <!-- 如果item.color为true时，则该列单元格字颜色按需更改 -->
-            <template v-else-if="item.picture_two" #default="{ row }">
+            <template v-else-if="item.color" #default="{ row }">
-              <el-image
+              <div :style="{ color: style_change(row[item.prop]) }">
-                :src="row.pic_two"
+                {{ row[item.prop] }}
-                style="width: 42px; height: 42px"
+              </div>
-              >
-                <div slot="error" class="image-slot">
-                  <img src="@/assets/companyFile/avatar.png" alt="" />
-                </div>
-              </el-image>
             </template>
           </el-table-column>
         </template>
@@ -97,9 +100,17 @@
           <el-button
             size="small"
             class="operation_btn"
+            v-if="table_operation"
             @click="open(scope.row)"
             >{{ operation_text }}</el-button
           >
+          <el-button
+            size="small"
+            class="operation_btn"
+            v-if="table_operation_second"
+            @click="open(scope.row)"
+            >{{ operation_text_second }}</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -153,6 +164,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 根据开发需要，二级表头如有要求对单元格文字颜色进行变换，通过该list传达判断条件
+    child_color_list: {
+      type: Array,
+      default: () => [],
+    },
+    // 根据开发需要，如有要求对单元格文字颜色进行变换，通过该list传达判断条件
+    color_list: {
+      type: Array,
+      default: () => [],
+    },
     // 单元格名称
     table_columns: {
       type: Array,
@@ -163,6 +184,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 操作单元格是否需要第二个按钮
+    table_operation_second: {
+      type: Boolean,
+      default: false,
+    },
     // 操作单元格表头名
     operation_label: {
       type: String,
@@ -173,6 +199,11 @@ export default {
       type: String,
       default: "",
     },
+    // 第二个操作单元格按钮名称
+    operation_text_second: {
+      type: String,
+      default: "",
+    },
     // 分页可选页数类型
     page_sizes: {
       type: Array,
@@ -222,13 +253,34 @@ export default {
     open(row) {
       this.$emit("open_event", row);
     },
-    // 如果二级表格需要展示照片的话
+    // 二级表根据后端返回判断流程状态颜色
-    get_child_img_url(row) {
+    child_style_change(val) {
-      this.$emit("get_child_img_url", row);
+      switch (val) {
+        case this.child_color_list[0]:
+          return "#3eba75";
+        case this.child_color_list[1]:
+          return "#FDA722";
+        case this.child_color_list[2]:
+          return "#2eb9ef";
+        case this.child_color_list[3]:
+          return "#e55b5b";
+      }
+    },
+    // 根据后端返回判断流程状态颜色
+    style_change(val) {
+      switch (val) {
+        case this.color_list[0]:
+          return "#3eba75";
+        case this.color_list[1]:
+          return "#FDA722";
+        case this.color_list[2]:
+          return "#2eb9ef";
+        case this.color_list[3]:
+          return "#e55b5b";
+      }
     },
-    // 如果一级表格需要展示照片的话
+    table_link(row) {
-    get_img_url(row) {
+      this.$emit('table_link',row)
-      this.$emit("get_img_url", row);
     },
     // 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
     handle_size_change(val) {

src/views/applySupermarket/personBack/index.vue

@@ -115,7 +115,7 @@ export default {
           res.rows[i].abnormal_num = res.rows[
             i
           ].examinationResultDetail.substring(
-            res.rows[i].examinationResultDetail.indexOf("正常,") + 3,
+            res.rows[i].examinationResultDetail.indexOf("正常，") + 3,
             res.rows[i].examinationResultDetail.indexOf("人异常")
           );
           console.log(res.rows[i].abnormal_num);

src/views/module/index.vue

@@ -8,14 +8,19 @@
       :table_height="table_height"
       :table_select="table_select"
       :table_index="table_index"
+      :color_list="color_list"
+      :child_color_list="child_color_list"
       :table_columns="table_columns"
       :table_operation="table_operation"
+      :table_operation_second="table_operation_second"
       :operation_label="operation_label"
       :operation_text="operation_text"
+      :operation_text_second="operation_text_second"
       :page_sizes="page_sizes"
       :pageSize="pageSize"
       :pageNum="pageNum"
       :total="total"
+      @table_link="table_link"
       @open_event="open_event"
       @size_change="size_change"
       @num_change="num_change"
@@ -26,7 +31,7 @@
 export default {
   data() {
     return {
-      table_pagination_width: "60",
+      table_pagination_width: "75",
       table_pagination_height: "60",
       table_data: [
         {
@@ -35,8 +40,9 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "一级",
-          pic_child:'https://t12.baidu.com/it/u=2944858655,3260611328&fm=58',
+          pic_child: "https://t12.baidu.com/it/u=2944858655,3260611328&fm=58",
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核通过",
         },
         {
           company: "宁波保润石化公司",
@@ -44,8 +50,9 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "四级",
-          pic_child:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_child: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核中",
         },
         {
           company: "宁波保润石化公司",
@@ -53,8 +60,10 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "一级",
-          pic_child:'1222.png',
+          pic: "https://img2.baidu.com/it/u=1735491135,1421708020&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691514000&t=9b750206b13e5b42054a728b0e759fe5",
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_child: "1222.png",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核中",
         },
         {
           company: "宁波保润石化公司",
@@ -62,8 +71,10 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "三级",
-          pic_child:'1222.png',
+          pic_child: "1222.png",
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic: "https://t7.baidu.com/it/u=1211026933,587530743&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=D9934B90441845C2548365530300D0BA&sec=1691514000&t=0d3b6cf3971e24bff2a9ad9909868a3e",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "预备审核",
         },
         {
           company: "宁波保润石化公司",
@@ -71,8 +82,9 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "一级",
-          pic_child:'1222.png',
+          pic_child: "1222.png",
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "预备审核",
         },
         {
           company: "宁波保润石化公司",
@@ -80,14 +92,17 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "二级",
-          pic:'1000.png',
+          pic: "1000.png",
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          pic_child:'1222.png',
+          pic_child: "1222.png",
+          company_level: "审核驳回",
         },
       ],
-      table_height: "592", // 表格高度根据实际场景确定高度
+      table_height: "550", // 表格高度根据实际场景确定高度
       table_select: false,
       table_index: true,
+      child_color_list: ["审核驳回", "预备审核", "审核中", "审核通过"],
+      color_list: ["一级", "二级", "三级", "四级"],
       table_columns: [
         {
           prop: "company_all",
@@ -99,7 +114,7 @@ export default {
               width: "180",
             },
             {
-              prop: "personPic",
+              prop: "pic_child",
               label: "个人照片",
               width: "120",
               picture: true,
@@ -118,6 +133,13 @@ export default {
               prop: "unit",
               label: "公司单位",
               width: "180",
+              link: true,
+            },
+            {
+              prop: "company_level",
+              label: "公司次等级",
+              width: "160",
+              color: true,
             },
           ],
         },
@@ -125,6 +147,7 @@ export default {
           prop: "level",
           label: "公司等级",
           width: "80",
+          color: true,
         },
         {
           prop: "pic",
@@ -133,20 +156,22 @@ export default {
           picture: true,
         },
         {
-          prop: "person_pic",
+          prop: "pic_two",
           label: "个人照片",
           width: "100",
-          picture_two: true,
+          picture: true,
         },
       ],
       table_operation: true,
+      table_operation_second: true,
       operation_label: "操作",
       operation_text: "详情",
+      operation_text_second:'编辑',
       page_sizes: [4, 6],
       pageSize: 4,
       pageNum: 1,
       total: 8,
-      pagination_width: "60",
+      pagination_width: "75",
     };
   },
   methods: {
@@ -157,6 +182,9 @@ export default {
     open_event(row) {
       console.log("row456", row);
     },
+    table_link(row) {
+      console.log("row777", row);
+    },
     // 分页--每页多少条
     size_change(val) {
       this.pageNum = 1;
@@ -171,5 +199,3 @@ export default {
   },
 };
 </script>
-<style lang="less" scoped>
-</style>