n20-common-lib 2.2.14 → 2.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "private": false,
   "main": "src/index.js",
   "scripts": {
@@ -55,7 +55,6 @@
     "qrcode": "*",
     "resize-detector": "*",
     "strip-json-comments": "*",
-    "umy-table": "^1.1.8",
     "v-viewer": "*",
     "vuedraggable": "*"
   },
@@ -96,6 +95,7 @@
     "svgo": "1.2.0",
     "swiper": "^8.4.5",
     "url-loader": "^4.1.1",
+    "umy-table": "^1.1.8",
     "vue": "^2.6.11",
     "vue-cli-plugin-axios": "~0.0.4",
     "vue-grid-layout": "^2.3.12",

package/src/assets/css/el-table.scss

@@ -1,19 +1,13 @@
 .el-table--small {
   font-size: 14px;
 }
-
-.el-table--mini .el-table__cell {
-  padding: 2px 0;
-  .cell {
-    padding-left: 4px;
-    padding-right: 4px;
-    // line-height: 18px;
-  }
-  .el-button--mini,
-  .el-link {
-    font-size: 12px;
-  }
+.el-table--mini {
+  font-size: 12px;
 }
+.el-table th {
+  font-weight: $--font-weight-primary;
+}
+
 .el-table--small,
 .el-table--mini {
   .el-table__cell {
@@ -27,91 +21,85 @@
   }
 }
 
-.el-table th {
-  font-weight: $--font-weight-primary;
-}
-
-/* 过滤 */
-.el-table__column-filter-trigger {
-  height: 16px;
-  line-height: 16px;
-  vertical-align: middle;
-  position: relative;
-  bottom: 1px;
-}
-
-.el-table__column-filter-trigger i {
-  font-size: 16px;
-  transform: scale(1);
-}
-
-.el-table-filter__bottom {
-  text-align: center;
-}
-
-/* 排序 */
-.el-table .caret-wrapper {
-  display: inline-flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  vertical-align: middle;
-}
-
-.el-table .sort-caret.ascending {
-  width: 8px;
-  height: 16px;
-  border: none;
-  font-style: normal;
-  position: static;
-
-  &:hover {
-    color: $--color-primary-light-6;
-  }
-
-  &:before {
-    content: '\e61c';
-    font-family: 'core-lib-iconfont';
-    font-size: 12px;
-    line-height: 12px;
-    position: relative;
-    right: 3px;
-    bottom: 1px;
+.el-table--mini {
+  .el-table__cell {
+    padding: 2px 0;
+    .cell {
+      padding-left: 4px;
+      padding-right: 4px;
+      // line-height: 18px;
+    }
+    .el-button--mini,
+    .el-link {
+      font-size: 12px;
+    }
   }
 }
 
-.el-table .ascending .sort-caret.ascending {
-  color: $--color-primary;
-}
+.el-table {
+  /* 排序 */
+  .caret-wrapper {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    vertical-align: middle;
+  }
+  .sort-caret.ascending,
+  .sort-caret.descending {
+    width: 8px;
+    height: 16px;
+    border: none;
+    font-style: normal;
+    position: static;
 
-.el-table .sort-caret.descending {
-  width: 8px;
-  height: 16px;
-  border: none;
-  font-style: normal;
-  position: static;
+    &:hover {
+      color: $--color-primary-light-6;
+    }
 
-  &:hover {
-    color: $--color-primary-light-6;
+    &:before {
+      content: '\e61c';
+      font-family: 'core-lib-iconfont';
+      font-size: 12px;
+      line-height: 12px;
+      position: relative;
+      right: 3px;
+      bottom: 1px;
+    }
   }
-
-  &:before {
+  .sort-caret.descending:before {
     content: '\e61d';
-    font-family: 'core-lib-iconfont';
-    font-size: 12px;
-    line-height: 12px;
     position: relative;
     right: 1px;
     bottom: 1px;
   }
+
+  .ascending .sort-caret.ascending,
+  .descending .sort-caret.descending {
+    color: $--color-primary;
+  }
 }
 
-.el-table .descending .sort-caret.descending {
-  color: $--color-primary;
+/* 过滤 */
+.el-table-filter__bottom {
+  text-align: center;
+}
+.el-table__column-filter-trigger {
+  height: 16px;
+  line-height: 16px;
+  vertical-align: middle;
+  position: relative;
+  bottom: 1px;
+  i {
+    font-size: 16px;
+    transform: scale(1);
+  }
 }
 
 .table-header-popover.el-popover {
   padding: 16px;
 }
+
+@import url('../../components/TableSetSize/style.scss');

package/src/components/Table/filters.js

@@ -32,7 +32,11 @@ function tplFn(row, sc, mck, map = {}) {
             str += dayjs(row[key]).format('HH:mm:ss')
             break
           default:
-            str += row[key]
+            if (/^f/.test(type)) {
+              str += numerify(row[key], type.replace(/^f/, ''), Math.floor)
+            } else {
+              str += row[key]
+            }
             break
         }
       }

package/src/components/Table/index.vue

@@ -6,7 +6,7 @@
     :header-cell-style="{ 'text-align': 'center' }"
     :data="data"
     :height="height"
-    v-bind="$attrs"
+    v-bind="Object.assign({ size: size }, $attrs, sizeBind)"
     v-on="$listeners"
   >
     <template v-for="(item, i) in columns">
@@ -23,6 +23,7 @@
         v-bind="item"
       />
     </template>
+    <tableSetSize v-if="showSetsize" :size="sizeC" @update:size="sizeUp" @resize="sizeSet" />
   </el-table>
   <ux-table
     v-else
@@ -69,6 +70,7 @@
 <script>
 // import { $lc } from '../../utils/i18n/index'
 import { colfF, colftF, colf_BD_F, colft_BD_F } from './filters'
+import tableSetSize from '../TableSetSize/index.vue'
 
 const columnRender = {
   props: {
@@ -90,7 +92,8 @@ const columnRender = {
 export default {
   name: 'Table',
   components: {
-    columnRender
+    columnRender,
+    tableSetSize
   },
   filters: {
     colfF,
@@ -141,11 +144,22 @@ export default {
     height: {
       type: [String, Number],
       default: undefined
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    showSetsize: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
+    let _this = this
     return {
-      colsKey: 0
+      colsKey: 0,
+      sizeC: _this.size,
+      sizeBind: undefined
     }
   },
   provide() {
@@ -157,6 +171,9 @@ export default {
   watch: {
     columns() {
       this.colsKey = this.colsKey + 1
+    },
+    size(val) {
+      this.sizeC = val
     }
   },
   mounted() {
@@ -207,12 +224,24 @@ export default {
           if (_key) key = _key
         }
 
-        elFilters[key || item.property] = item.column.filterMultiple ? item.values : item.values[0]
+        elFilters[key || item.property] = item.values
       })
       this.$emit('filter-change', elFilters, arg)
     },
     bigExpand(arg) {
       this.$emit('expand-change', arg.row, arg.expanded, arg)
+    },
+    sizeUp(size) {
+      this.sizeC = size
+      this.$emit('update:size', size)
+    },
+    sizeSet(el) {
+      this.sizeBind = el
+
+      let inTable = this.$refs['el-table']
+      if (inTable) {
+        inTable.doLayout()
+      }
     }
   }
 }

package/src/components/TableSetSize/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="el-table-set-size flex-box">
+    <div class="el-table-set-size-item m-r-0" :class="sizeC === 'mini' && 'active'" @click="setSize('mini')">
+      <img class="icon-mini" src="./mini.png" />
+      <div class="text-mini">{{ _lang === 'zh' ? '小行距' : 'mini' }}</div>
+    </div>
+    <div class="el-table-set-size-item" :class="sizeC === 'small' && 'active'" @click="setSize('small')">
+      <img class="icon-small" src="./small.png" />
+      <div class="text-small">{{ _lang === 'zh' ? '中行距' : 'small' }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableSetSize',
+  props: {
+    size: {
+      type: String,
+      default: 'small'
+    },
+    mini: {
+      type: Object,
+      default: () => ({
+        border: false,
+        size: 'mini',
+        stripe: true
+      })
+    },
+    small: {
+      type: Object,
+      default: () => ({
+        border: true,
+        size: 'small',
+        stripe: false
+      })
+    }
+  },
+  data() {
+    let _this = this
+    return {
+      sizeC: _this.size
+    }
+  },
+  watch: {
+    size() {
+      this.setSize(this.size, 'pasv')
+    }
+  },
+  created() {
+    this.setSize(this.size, 'pasv')
+  },
+  methods: {
+    setSize(type, t) {
+      this.sizeC = type
+
+      if (type === 'mini') {
+        this.$emit('resize', this.mini)
+      } else if (type === 'small') {
+        this.$emit('resize', this.small)
+      }
+
+      if (t !== 'pasv') {
+        this.$emit('update:size', type)
+      }
+    }
+  }
+}
+</script>

package/src/components/TableSetSize/style.scss

@@ -0,0 +1,83 @@
+@import '@/assets/css/element-variables.scss';
+.el-table .hidden-columns {
+  visibility: initial;
+  position: initial;
+  height: 0;
+  width: 0;
+
+  > * {
+    visibility: hidden;
+  }
+  > .el-table-set-size {
+    visibility: initial;
+  }
+}
+.el-table-set-size {
+  box-sizing: border-box;
+  width: 6px;
+  height: 40px;
+
+  border-radius: 4px 0 0 4px;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 9;
+
+  overflow: hidden;
+
+  transition: all 0.3s;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: $--color-primary;
+    opacity: 0.7;
+  }
+
+  &:hover {
+    width: 88px;
+  }
+
+  &-item {
+    margin: 3px 6px;
+    width: 36px;
+    height: 34px;
+    border-radius: 4px;
+
+    color: $--color-white;
+    z-index: 1;
+    cursor: pointer;
+    &:hover {
+      background: $--color-primary;
+    }
+    &.active {
+      background: $--color-primary-hover;
+    }
+    .icon-small,
+    .icon-mini {
+      display: block;
+      width: 17px;
+      height: 14px;
+      margin: 4px auto 0;
+    }
+    .icon-small {
+      background: url('./small.png');
+      background-size: 100% 100%;
+    }
+    .icon-mini {
+      background: url('./mini.png');
+      background-size: 100% 100%;
+    }
+    .text-small,
+    .text-mini {
+      margin-top: 3px;
+      line-height: 12px;
+      font-size: 12px;
+      text-align: center;
+      transform: scale(0.667);
+      transform-origin: 50% 0;
+    }
+  }
+}

package/src/index.js

@@ -38,6 +38,7 @@ import FooterBox from './components/FooterBox/index.vue'
 import Filters from './components/Filters/index.vue'
 import Table from './components/Table/index.vue'
 import TableOperateColumn from './components/TableOperateColumn/index.vue'
+import TableSetSize from './components/TableSetSize'
 import Button from './components/Button/index.vue'
 import ButtonGroup from './components/Button/button-group.vue'
 import ShowColumn from './components/ShowColumn/index.vue'
@@ -152,6 +153,7 @@ const components = [
   Filters,
   Table,
   TableOperateColumn,
+  TableSetSize,
   Button,
   ButtonGroup,
   ShowColumn,
@@ -288,6 +290,7 @@ export {
   Filters,
   Table,
   TableOperateColumn,
+  TableSetSize,
   Button,
   ButtonGroup,
   ShowColumn,