init

src/views/material-manage/cockpit/components/baseTable.vue

@@ -0,0 +1,176 @@
+<!--
+ * @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: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
+      :row-style="setRowStyle"
+      :data="renderData"
+      border
+      style="width: 100%; background: transparent"
+    >
+      <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 in renderTableHeadList"
+        :key="item.prop"
+        :show-overflow-tooltip="showOverflow"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component :is="item.subcomponent" v-if="item.subcomponent" :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: 'BaseTable',
+  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;
+  }
+}
+
+</style>