n20-common-lib 1.2.20 → 1.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "private": false,
   "main": "src/index.js",
   "scripts": {
@@ -33,6 +33,7 @@
     "jsonwebtoken": "^8.5.1",
     "normalize.css": "^8.0.1",
     "numerify": "^1.2.9",
+    "qrcode": "^1.5.0",
     "resize-detector": "^0.3.0",
     "vuedraggable": "^2.24.3"
   },
@@ -56,7 +57,6 @@
     "mockjs": "^1.1.0",
     "node-sass": "6.0.0",
     "qiankun": "^2.5.1",
-    "qrcode": "^1.5.0",
     "sass-loader": "^10.2.0",
     "strip-json-comments": "^3.1.1",
     "vue": "^2.6.11",

package/src/assets/css/cl-form-item.scss

@@ -492,7 +492,7 @@ $--input-max: 304px;
     font-size: 16px;
   }
   &.has-value {
-    &:hover {
+    &:not(.is-disabled):hover {
       .el-input__prefix {
         display: none;
       }

package/src/assets/css/cl-pagination.scss

@@ -1,3 +1,66 @@
+.n20-pagination-1 {
+  display: inline-block;
+  padding-right: 5px;
+  > * {
+    vertical-align: middle;
+  }
+  .el-pagination {
+    display: inline-block;
+  }
+  .btn-prev,
+  .btn-next {
+    padding-left: 6px;
+    padding-right: 6px;
+    border: 1px solid $--border-color-base;
+    &:not([disabled]):hover {
+      border-color: $--color-primary;
+    }
+  }
+  .btn-next {
+    margin-left: 6px;
+  }
+}
+.n20-pagination-jumper-1 {
+  width: 36px;
+  margin-left: 6px;
+  margin-right: 6px;
+  &.is-without-controls {
+    .el-input__inner {
+      height: 26px;
+      line-height: 26px;
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+  }
+}
+.n20-pagination-sizes-1 {
+  .el-radio-button__inner {
+    border-radius: $--border-radius-base !important;
+    border: 1px solid $--border-color-base;
+    box-shadow: none;
+  }
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    border-color: $--color-primary;
+  }
+}
+.n20-pagination-usersizes-1 {
+  width: 52px;
+  vertical-align: middle;
+  &.is-without-controls {
+    .el-input__inner {
+      height: 26px;
+      line-height: 26px;
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+  }
+  &.is-active {
+    .el-input__inner {
+      border-color: $--border-color-base;
+    }
+  }
+}
+
 .n20-pagination {
   display: inline-block;
   > * {

package/src/assets/css/cl-secondary-tab.scss

@@ -45,4 +45,9 @@
   .el-tabs__active-bar {
     display: none;
   }
+
+  .el-tabs__nav-prev,
+  .el-tabs__nav-next {
+    line-height: 28px;
+  }
 }

package/src/assets/css/cl-tertiary-tab.scss

@@ -1,6 +1,51 @@
+.n20-tertiary-tab-1 {
+  display: inline-block;
+  max-width: 100%;
+  & > .el-tabs__header {
+    border: none;
+    margin-bottom: 0;
+    .el-tabs__nav {
+      border: none;
+    }
+    .el-tabs__item {
+      height: auto;
+      line-height: 1;
+      padding: 6px 16px !important;
+      border: 1px solid $--border-color-light !important;
+      margin-left: -1px;
+
+      &:first-child {
+        margin-left: 0;
+        border-radius: 4px 0 0 4px;
+      }
+      &:last-child {
+        border-radius: 0 4px 4px 0;
+      }
+      &.is-active {
+        border: 1px solid $--color-primary !important;
+        z-index: 1;
+      }
+      &.is-disabled {
+        color: $--color-text-placeholder;
+        background-color: $--button-disabled-background-color;
+        border-color: $--button-default-border-color !important;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .el-tabs__nav-prev,
+  .el-tabs__nav-next {
+    line-height: 28px;
+  }
+}
+
 .n20-tertiary-tab {
+  max-width: 100%;
+  white-space: nowrap;
+  overflow-x: auto;
   .el-radio-button--mini .el-radio-button__inner {
-      padding: 6px 16px;
+    padding: 6px 16px;
   }
   .el-radio-button__orig-radio:checked + .el-radio-button__inner {
     color: $--color-primary;

package/src/components/DragList/index.vue

@@ -12,11 +12,13 @@
       <slot :item="item" :index="index">
         <span>{{ item[labelKey] || item }}</span>
       </slot>
-      <i
+      <el-link
         v-if="!disabled"
-        class="n20-drag-remove n20-icon-shanchu"
+        class="n20-icon-shanchu"
+        :underline="false"
+        :disabled="inSC && item.checked"
         @click="remove(index)"
-      ></i>
+      />
     </div>
   </vue-draggable>
 </template>
@@ -45,6 +47,11 @@ export default {
       default: 'label'
     }
   },
+  computed: {
+    inSC() {
+      return !!this.$attrs['in-show-column']
+    }
+  },
   methods: {
     change() {
       this.$emit('change', this.list)

package/src/components/Pagination/index.vue

@@ -1,38 +1,79 @@
 <template>
-  <div class="n20-pagination">
+  <div class="n20-pagination-1">
     <el-pagination
-      layout="prev,next,slot,jumper"
+      layout="prev,next,slot"
       :current-page.sync="pageObj[pageKey.no]"
       :page-size="pageObj[pageKey.size]"
       :total="pageObj[pageKey.total]"
       :size="size"
       @current-change="setnoOrsize"
+    />
+    <span class="m-r-ss"
+      ><span class="color-primary">{{ pageObj[pageKey.no] }}</span
+      >/{{ max }}</span
     >
-      <span class="n20-pagination-total"
-        ><span class="n20-pagination-no">{{ pageObj[pageKey.no] }}</span
-        >/{{ max }}</span
-      >
-      <span class="el-pagination__sizes">
-        <el-select
+    <span>到第</span>
+    <el-input-number
+      v-model="toNo"
+      class="n20-pagination-jumper-1 m-r-ss"
+      :min="1"
+      :max="max"
+      :step="1"
+      :step-strictly="true"
+      :controls="false"
+      :size="size"
+      @change="setnoOrsize"
+    />
+    <span class="m-r-s">页</span>
+    <el-popover v-model="settingV" placement="top" trigger="click">
+      <el-link
+        slot="reference"
+        icon="n20-icon-shezhi"
+        :underline="false"
+        style="font-size: 18px"
+      />
+      <div>
+        <span>每页显示</span>
+        <el-radio-group
           v-model="pageObj[pageKey.size]"
+          class="n20-pagination-sizes-1 m-l-s"
           size="mini"
-          popper-class="el-pagination__sizes-popper"
-          @change="setnoOrsize"
+          @change="
+            () => {
+              setnoOrsize()
+              settingV = false
+            }
+          "
         >
-          <el-option
+          <el-radio-button
             v-for="item in pageSizes"
             :key="item"
-            :value="item"
-            :label="item + '条/页'"
-          />
-          <el-option
-            :value="pageObj[pageKey.size]"
-            :label="pageObj[pageKey.size] + '条/页'"
-            style="display: none"
+            class="m-r-s"
+            :label="item"
           />
-        </el-select>
-      </span>
-    </el-pagination>
+        </el-radio-group>
+        <el-input-number
+          v-model="userSize"
+          class="n20-pagination-usersizes-1"
+          :class="{
+            'is-active': !pageSizes.includes(pageObj[pageKey.size])
+          }"
+          :min="1"
+          :max="sizeMax"
+          :step="1"
+          :step-strictly="true"
+          :controls="false"
+          size="mini"
+          placeholder="自定义"
+          @change="
+            () => {
+              setnoOrsize()
+              settingV = false
+            }
+          "
+        />
+      </div>
+    </el-popover>
   </div>
 </template>
 
@@ -62,11 +103,16 @@ export default {
     },
     pageSizes: {
       type: Array,
-      default: () => [20, 50, 100, 300, 500]
+      default: () => [20, 50, 100]
+    },
+    sizeMax: {
+      type: Number,
+      default: 1000
     }
   },
   data() {
     return {
+      settingV: false,
       noOrsize: ''
     }
   },
@@ -76,6 +122,31 @@ export default {
       let size = this.pageObj[this.pageKey.size]
 
       return Math.ceil(total / size)
+    },
+    toNo: {
+      get() {
+        return this.pageObj[this.pageKey.no]
+      },
+      set(val) {
+        if (val) {
+          this.pageObj[this.pageKey.no] = val
+        } else {
+          this.pageObj[this.pageKey.no] = 1
+        }
+      }
+    },
+    userSize: {
+      get() {
+        return this.pageObj[this.pageKey.size]
+      },
+      set(val) {
+        if (val) {
+          this.pageObj[this.pageKey.size] = val
+        } else {
+          this.pageObj[this.pageKey.size] = this.pageSizes[0]
+        }
+        this.pageObj[this.pageKey.no] = 1
+      }
     }
   },
   watch: {
@@ -85,11 +156,9 @@ export default {
   },
   methods: {
     setnoOrsize() {
-      this.$nextTick(() => {
-        let no = this.pageObj[this.pageKey.no]
-        let size = this.pageObj[this.pageKey.size]
-        this.noOrsize = no + ',' + size
-      })
+      let no = this.pageObj[this.pageKey.no]
+      let size = this.pageObj[this.pageKey.size]
+      this.noOrsize = no + ',' + size
     }
   }
 }

package/src/components/ShowColumn/index.vue

@@ -46,7 +46,11 @@
             >
           </div>
           <div class="flex-1 overflow-y">
-            <drag-list :list="dragList" :label-key="labelKey" />
+            <drag-list
+              :list="dragList"
+              :label-key="labelKey"
+              :in-show-column="true"
+            />
           </div>
         </div>
       </div>

package/src/components/Table/index.vue

@@ -20,7 +20,7 @@
       <el-table-column
         v-else
         :key="'cl-table-' + i"
-        :formatter="item.formatter | colfF"
+        :formatter="item.formatter | colfF(item.formatterMap)"
         :filters="item.filters | colftF(filtersMap)"
         v-bind="item"
       />
@@ -70,6 +70,7 @@
 
 <script>
 import numerify from 'numerify'
+import dayjs from 'dayjs'
 import Pagination from '../Pagination/index.vue'
 
 const columnRender = {
@@ -86,6 +87,63 @@ const columnRender = {
   }
 }
 
+function colfF(colf, map) {
+  if (typeof colf !== 'string') return colf
+  let sc = colf.split(/{.+?}/g) || []
+  let mc = colf.match(/{.+?}/g) || []
+  let mck = []
+  mc.forEach((t) => {
+    t = t.replace(/^{|\s+|}$/g, '').split('|')
+    mck.push(t)
+  })
+
+  return (row) => tplFn(row, sc, mck, map)
+}
+function tplFn(row, sc, mck, map = {}) {
+  let str = ''
+  sc.forEach((s, i) => {
+    str += s
+    let kA = mck[i]
+    if (kA && kA.length) {
+      let key = kA[0]
+      if (kA.length === 1) {
+        str += row[key]
+      } else {
+        let type = kA[1]
+        switch (type) {
+          case 'money':
+            str += numerify(row[key], '0,0.00')
+            break
+          case 'rate':
+            str += numerify(row[key], '0.000000')
+            break
+          case 'map':
+            str += map[row[key]]
+            break
+          case 'date':
+            str += dayjs(row[key]).format('YYYY-MM-DD')
+            break
+          case 'datetime':
+            str += dayjs(row[key]).format('YYYY-MM-DD HH:mm:ss')
+            break
+          case 'time':
+            str += dayjs(row[key]).format('HH:mm:ss')
+            break
+          default:
+            str += row[key]
+            break
+        }
+      }
+    }
+  })
+  return str
+}
+
+function colftF(colft, fMap) {
+  if (typeof colft !== 'string') return colft
+  return fMap[colft]
+}
+
 export default {
   name: 'Table',
   components: {
@@ -93,36 +151,8 @@ export default {
     columnRender
   },
   filters: {
-    colfF(colf) {
-      if (typeof colf !== 'string') return colf
-
-      if (/\|money/.test(colf)) {
-        let mc = colf.match(/{(\S+)\|money}/)
-        let key = mc && mc[1]
-
-        return (row) => numerify(row[key], '0,0.00')
-      } else if (/\|rate/.test(colf)) {
-        let mc = colf.match(/{(\S+)\|rate}/)
-        let key = mc && mc[1]
-
-        return (row) => numerify(row[key], '0.000000')
-      } else {
-        let mc = colf.match(/{[^}]+}/g) || []
-        let mcv = mc.map((m) => m.replace(/{|}/g, ''))
-
-        return (row) => {
-          let str = colf
-          mc.forEach((tp, i) => {
-            str = str.replace(tp, row[mcv[i]])
-          })
-          return str
-        }
-      }
-    },
-    colftF(colft, fMap) {
-      if (typeof colft !== 'string') return colft
-      return fMap[colft]
-    }
+    colfF,
+    colftF
   },
   props: {
     column: {

package/src/components/TertiaryTab/index.vue

@@ -1,17 +1,26 @@
 
 <template>
-  <el-radio-group :value="init" class="n20-tertiary-tab" :size="size">
-    <el-radio-button
+  <el-tabs
+    :value="init"
+    class="n20-tertiary-tab-1"
+    type="card"
+    :before-leave="beforeFn"
+    @tab-click="clickFn"
+  >
+    <el-tab-pane
       v-for="item of data"
       :key="item.name"
-      :label="item.name"
+      :tab-info="item"
+      :name="item.name"
+      :icon="item.icon"
       :disabled="item.disabled"
-      @click.native.prevent="(ev) => clickFn(item, ev)"
     >
-      <span v-if="item.icon" :class="item.icon"></span>
-      {{ item.name }}
-    </el-radio-button>
-  </el-radio-group>
+      <template slot="label">
+        <span v-if="item.icon" :class="item.icon"></span>
+        {{ item.name }}
+      </template>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script>
@@ -31,22 +40,23 @@ export default {
       default: 'mini'
     }
   },
-  data() {
-    if (!this.$listeners['update:init'] && !this.$listeners['click']) {
-      console.warn('请设置 @click 或 init.sync')
+  computed: {
+    stop() {
+      return !this.$listeners['update:init']
     }
-    return {}
   },
   methods: {
-    clickFn(item, ev) {
-      ev.currentTarget && ev.currentTarget.blur()
-
+    clickFn(C) {
+      let item = C.$attrs['tab-info']
       if (this.$listeners['update:init']) {
         !item.disabled && this.$emit('update:init', item.name)
       }
       if (this.$listeners['click']) {
         this.$emit('click', item)
       }
+    },
+    beforeFn(name) {
+      return name === this.init ? true : !this.stop
     }
   }
 }

package/src/components/WornPagination/index.vue

@@ -60,7 +60,7 @@ export default {
       if (v.no !== this.page) {
         this.$emit('update:page', v.no)
       }
-      if (v.size !== this.size) {
+      if (v.size !== this.pageSize) {
         this.$emit('update:pageSize', v.size)
         // 为修复bug而写的bug
         this.$nextTick(() => {

package/src/index.js

@@ -165,12 +165,21 @@ export default {
 }
 export {
   version,
-  axios,
+  // 方法
   auth,
+  axios,
   getJsonc,
   downloadBlob,
   forEachs,
   list2tree,
+  repairEl,
+  linkPush,
+  linkGo,
+  isHas,
+  isHasG,
+  dayjs,
+  numerify,
+  // 组件
   ContentLoading,
   ContentNull,
   NavMenu,
@@ -216,12 +225,5 @@ export {
   AnchorItem,
   FlowStep,
   CascaderArea,
-  FileExportAsync,
-  repairEl,
-  linkPush,
-  linkGo,
-  isHas,
-  isHasG,
-  dayjs,
-  numerify
+  FileExportAsync
 }

package/src/utils/i18n/index.js

@@ -1,8 +1,6 @@
 import locale from 'element-ui/lib/locale'
 import langEn from 'element-ui/lib/locale/lang/en'
 import langTw from 'element-ui/lib/locale/lang/zh-TW'
-import langCN from 'element-ui/lib/locale/lang/zh-CN'
-langCN?.el?.pagination?.goto && (langCN.el.pagination.goto = '到第')
 
 import zhHk from './cn2hk.json' // 简体繁体映射
 // 语言枚举
@@ -40,8 +38,6 @@ directive.install = (Vue, map = {}) => {
     locale.use(langEn)
   } else if (pageLang === 'zh-hk') {
     locale.use(langTw)
-  } else {
-    locale.use(langCN)
   }
 
   $i18n_map_root = map