工单&物料

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

@@ -7,26 +7,29 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table
-      v-loading="isLoading"
-      :header-cell-style="{background:'rgba(32, 55, 96, 0.8)',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 v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
       <el-table-column
-        v-for="item in renderTableHeadList"
+        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" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <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" />
@@ -36,7 +39,7 @@
 <script>
 import { isObject, isString } from 'lodash'
 export default {
-  name: 'BaseTable',
+  name: 'TechyTable',
   filters: {
     commonFilter: (source, filterType = a => a) => {
       return filterType(source)
@@ -107,70 +110,103 @@ export default {
   methods: {
     emitData(val) {
       this.$emit('emitFun', val)
-    },
-    setRowStyle(v) {
-      if (v.rowIndex % 2 === 0) {
-        return {
-          background: 'rgba(14, 32, 62, 0.8)',
-          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(32, 55, 96, 0.8)',
-          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";
+
+<style scoped>
+.visual-base-table-container >>> ::-webkit-scrollbar {
+  width: calc(8px * var(--beilv));
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-track {
+  background-color: #14243f;
+  border-radius: 0;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-button {
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
+  border-radius: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+}
+
+/* .visual-base-table-container {
+  min-width: 30vw;
+} */
 .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;
-  }
+  height: 100%;
 }
-.setting {
-  text-align: right;
-  padding: 15px;
-  .setting-box {
-    width: 100px;
-  }
-  i {
-    color: #aaa;
-    @extend .pointer;
-  }
+/* .visual-base-table-container >>> .el-table {
+  min-width: 120%;
+} */
+/* 清除默认样式 */
+.visual-base-table-container >>> th.gutter {
+  display: none;
+}
+.visual-base-table-container >>> table {
+  background: transparent;
 }
 
+.visual-base-table-container >>> .el-table,
+.visual-base-table-container >>> th,
+.visual-base-table-container >>> tr {
+  background: unset;
+}
+
+/* 设置设计稿样式 */
+.visual-base-table-container >>> .el-table::before,
+.visual-base-table-container >>> .el-table--group::after,
+.visual-base-table-container >>> .el-table--border::after,
+.visual-base-table-container >>> .el-table--border::after {
+  background: unset;
+}
+
+.visual-base-table-container >>> table * {
+  border-color: #0d1728;
+  border-width: calc(1px * var(--beilv));
+}
+
+.visual-base-table-container >>> td {
+  padding: calc(5px * var(--beilv));
+}
+
+.visual-base-table-container >>> td span {
+  color: #ffffffb3;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+}
+
+.visual-base-table-container >>> thead th {
+  padding: 0;
+}
+
+.visual-base-table-container >>> thead th .cell {
+  color: #fff;
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+  padding: calc(6px * var(--beilv));
+  white-space: nowrap;
+}
+
+.visual-base-table-container >>> .el-table__body tr:hover > td {
+  background-color: #42537130;
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
+  background-color: #0e203e;
+  /* background-color: #0e203e90; */
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
+.visual-base-table-container >>> .el-table thead {
+  background-color: #203760;
+  /* background-color: #20376090; */
+}
 </style>