继续优化

src/views/modules/visual/warning/components/screen-table/index.vue

@@ -1,45 +1,56 @@
 <template>
-  <div class="warning-table">
-    <div class="table">
-      <div class="table-header">
-        <div
-          class="table-header-th"
-          v-for="(item, index) in headerList"
-          :key="item.title"
-          :style="headerStyle[index]"
-        >
-          {{ item.title }}
+  <div>
+    <!-- <div class="warning-table">
+      <div class="table">
+        <div class="table-header">
+          <div
+            class="table-header-th"
+            v-for="(item, index) in headerList"
+            :key="item.title"
+            :style="headerStyle[index]"
+          >
+            {{ item.title }}
+          </div>
         </div>
-      </div>
-      <div class="table-body">
-        <div
-          class="table-body-tr"
-          v-for="(value, index) in tableData"
-          :key="index"
-        >
+        <div class="table-body">
           <div
-            class="td"
-            v-for="(item, indexs) in value"
-            :key="indexs"
-            :style="tableContentStyle[indexs]"
+            class="table-body-tr"
+            v-for="(value, index) in tableData"
+            :key="index"
           >
-            <div v-if="item.type && item.type == 'btn'">
-              <a @click="handleClickBtn(item)">{{ item.name }}</a>
+            <div
+              class="td"
+              v-for="(item, indexs) in value"
+              :key="indexs"
+              :style="tableContentStyle[indexs]"
+            >
+              <div v-if="item.type && item.type == 'btn'">
+                <a @click="handleClickBtn(item)">{{ item.name }}</a>
+              </div>
+              <span v-else>{{ item }}</span>
             </div>
-            <span v-else>{{ item }}</span>
           </div>
-        </div>
-        <screen-loading v-if="visibleLoading">加载中</screen-loading>
-        <div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
-          <img
-            src="../../../../../../assets/img/modules/visual/noData.png"
-            alt=""
-            srcset=""
-            class="no-data-img"
-          />
+          <screen-loading v-if="visibleLoading">加载中</screen-loading>
+          <div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
+            <img
+              src="../../../../../../assets/img/modules/visual/noData.png"
+              alt=""
+              srcset=""
+              class="no-data-img"
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </div> -->
+
+    <cpt-tb
+      :highlight-top3="true"
+      :col-list="tableContentStyle"
+      :loading="visibleLoading"
+      :header="headerList.map((item) => item.title)"
+      :list="cptTbData"
+      @operate="handleOperate"
+    ></cpt-tb>
 
     <people-list
       v-if="showedPeopleList && buildingId"
@@ -53,14 +64,15 @@
 
 <script>
 import ScreenLoading from "../screen-loading/index";
-import Vue from "vue";
 import peopleList from "./people-list";
+import cptTb from "@/views/modules/visual/cpts/tb";
 
 export default {
   name: "warning-table",
   components: {
     ScreenLoading,
     peopleList,
+    cptTb,
   },
   props: {
     headerList: {
@@ -133,22 +145,8 @@ export default {
       type: Boolean,
       default: true,
     },
-    // // 表格平均分的份数
-    // ava: {
-    //   type: Number,
-    //   default: 8
-    // },
-    // // 表头高度--默认占比10%
-    // headerHeightAva: {
-    //   type: String,
-    //   default: '10%'
-    // },
-    // // 表格主体平均分成的份数
-    // tableContentAva: {
-    //   type: Number,
-    //   default: 5
-    // },
   },
+
   data() {
     return {
       // 显示人员详情
@@ -158,6 +156,22 @@ export default {
       gridName: "",
     };
   },
+
+  computed: {
+    cptTbData() {
+      return this.tableData.map((item) => {
+        return item.map((subitem) => {
+          if (subitem.type && subitem.type == "btn") {
+            subitem.type = "operate";
+            subitem.list = [subitem.name];
+          }
+          console.log(subitem);
+          return subitem;
+        });
+      });
+    },
+  },
+
   watch: {},
 
   mounted() {},
@@ -165,6 +179,11 @@ export default {
   created() {},
 
   methods: {
+    handleOperate(index) {
+      let item = this.tableData[index];
+      this.handleClickBtn(item[item.length - 1]);
+    },
+
     handleClickBtn(item) {
       this.showedPeopleList = true;
       this.buildingId = item.buildingId;