'init'

src/views/EquipmentManager/components/TechyTable.vue

@@ -0,0 +1,213 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-06-14 11:12:39
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <div class="visual-base-table-container">
+    <el-table
+      v-loading="isLoading"
+      :header-cell-style="{
+        background: 'rgba(79,114,136,0.29)',
+        color: '#fff',
+        height: 'calc(100vh / 1920 * 48)',
+        lineHeight: 'calc(100vh / 1920 * 48)',
+        padding: 0,
+        fontSize: 'calc(100vh / 1920 * 20)'
+      }"
+      :row-style="setRowStyle"
+      :data="renderData"
+      border
+      style="width: 100%; background: transparent"
+      :cell-style="{
+        height: 'calc(100vh / 1920 * 48)',
+        lineHeight: 'calc(100vh / 1920 * 48)',
+        padding: 0,
+        fontSize: 'calc(100vh / 1920 * 20)'
+      }"
+    >
+      <el-table-column
+        v-if="page && limit && showIndex"
+        prop="_pageIndex"
+        :label="'tableHeader.index' | i18nFilter"
+        :width="70 * beilv"
+        align="center"
+      />
+      <el-table-column
+        v-for="(item, index) in renderTableHeadList"
+        :key="item.prop"
+        :show-overflow-tooltip="showOverflow"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+          <component
+            :is="item.subcomponent"
+            v-if="item.subcomponent"
+            :key="index"
+            :inject-data="{ ...scope.row, ...item }"
+            @emitData="emitData"
+          />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+        </template>
+      </el-table-column>
+      <slot name="content" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'TechyTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 5
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    showOverflow: {
+      type: Boolean,
+      default: true
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      tableConfigBak: [],
+      selectedBox: new Array(100).fill(true)
+    }
+  },
+  computed: {
+    renderData() {
+      if (this.tableData.length && !this.tableData[0]._pageIndex) {
+        this.tableData.forEach((item, index) => {
+          item._pageIndex = (this.page - 1) * this.limit + index + 1
+        })
+      }
+      return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
+    },
+    renderTableHeadList() {
+      return this.tableConfig.filter((item, index) => {
+        return this.selectedBox[index]
+      })
+    }
+  },
+  beforeMount() {
+    this.selectedBox = new Array(100).fill(true)
+  },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    },
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(76,97,123,0.2)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26 * this.beilv + 'px',
+          lineHeight: 26 * this.beilv + 'px',
+          padding: 0,
+          fontSize: 12 * this.beilv + 'px'
+        }
+      } else {
+        return {
+          background: 'rgba(79,114,136,0.29)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26 * this.beilv + 'px',
+          lineHeight: 26 * this.beilv + 'px',
+          padding: 0,
+          fontSize: 12 * this.beilv + 'px'
+        }
+      }
+    },
+    setCellStyle(v) {
+      return {
+        lineHeight: 23 * this.beilv + 'px'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '~@/styles/index.scss';
+.visual-base-table-container {
+  .el-table {
+    border: 0;
+  }
+  .el-table::before,
+  .el-table--border::after {
+    background-color: transparent;
+  }
+  .el-table th,
+  td {
+    border-color: #0d1728 !important;
+    padding: 0;
+  }
+  .el-table tr {
+    background: transparent;
+  }
+  .el-table__row:hover > td {
+    background-color: rgba(79, 114, 136, 0.29) !important;
+  }
+
+  .el-table__row--striped:hover > td {
+    background-color: rgba(79, 114, 136, 0.29) !important;
+  }
+}
+.setting {
+  text-align: right;
+  padding: 15px;
+  .setting-box {
+    width: 100px;
+  }
+  i {
+    color: #aaa;
+    @extend .pointer;
+  }
+}
+.p-0 {
+  padding: 0;
+}
+
+.p-0 >>> .cell {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.font-and-height {
+  font-size: calc(100vh / 1920 * 32);
+}
+</style>