t20-common-lib 0.1.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "t20-common-lib",
+  "version": "0.1.0",
+  "description": "T20",
+  "private": false,
+  "main": "dist/index.js",
+  "module": "src/index.js",
+  "style": "dist/styles/index.css",
+  "files": [
+    "dist",
+    "src",
+    "packages"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name t20-common-lib --dest dist src/index.js",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs",
+    "prepublishOnly": "npm run lib",
+    "clean": "rimraf dist"
+  },
+  "keywords": [
+    "vue",
+    "element-ui",
+    "t20-common-lib"
+  ],
+  "author": "liuzongxi",
+  "license": "MIT",
+  "dependencies": {
+    "core-js": "^2.6.12",
+    "element-ui": "^2.15.13",
+    "vue": "^2.6.14",
+    "vue-server-renderer": "^2.6.14"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.19",
+    "@vue/cli-plugin-eslint": "~4.5.19",
+    "@vue/cli-service": "~4.5.19",
+    "@vue/component-compiler-utils": "^3.3.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.14.1",
+    "postcss-loader": "^3.0.0",
+    "rimraf": "^3.0.2",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.14",
+    "vuepress": "^1.9.7"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/src/components/MyButton/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-button 
+    :size="size"
+    :type="type"
+    :icon="icon"
+    :loading="loading"
+    :disabled="disabled || !hasPermission"
+    :round="round"
+    :circle="circle"
+    @click="handleClick"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot></slot>
+  </el-button>
+</template>
+
+<script>
+export default {
+  name: 'MyButton',
+  props: {
+    size: {
+      type: String,
+      default: 'medium',
+      validator: val => ['mini', 'small', 'medium', 'large'].includes(val)
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator: val => ['primary', 'success', 'warning', 'danger', 'info', 'text', 'default'].includes(val)
+    },
+    icon: String,
+    loading: Boolean,
+    disabled: Boolean,
+    round: Boolean,
+    circle: Boolean,
+    permission: String
+  },
+  computed: {
+    hasPermission() {
+      if (!this.permission) return true
+      // 实际项目中替换为真实的权限判断逻辑
+      return true
+    }
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-button {
+  margin-right: 8px;
+  
+  &:last-child {
+    margin-right: 0;
+  }
+}
+</style>

package/src/index.js

@@ -0,0 +1,41 @@
+import './styles/index.css'
+/** 全局指令 */
+import fitlers from './filters/index'
+import repairEl from './utils/repairElementUI'
+// 导入组件
+import MyButton from './components/MyButton'
+
+// 存储组件列表
+const components = [
+  MyButton
+]
+
+// 定义 install 方法，接收 Vue 作为参数
+const install = function (Vue, opts = { prefix: 'T20', i18nConfig: {} }) {
+  components.forEach((component) => {
+    let name = component.name
+    if (!name) return console.error('必须设置组件名称:', component)
+
+    name = opts.prefix + name.replace(name[0], name[0].toUpperCase())
+    Vue.component(name, component)
+  })
+
+  Object.keys(fitlers).forEach((key) => {
+    Vue.filter(key + 'Format', fitlers[key])
+  })
+}
+
+// 判断是否是直接引入文件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install
+}
+
+export {
+  // 以下是具体的组件列表
+  MyButton,
+  repairEl
+}

package/src/utils/asciiWidth.js

@@ -0,0 +1,107 @@
+// 设置表头最小宽度,保证表头不换行
+const ASCII_W = {
+  ' ': 4.125,
+  0: 8.21875,
+  1: 8.21875,
+  2: 8.21875,
+  3: 8.21875,
+  4: 8.21875,
+  5: 8.21875,
+  6: 8.21875,
+  7: 8.21875,
+  8: 8.21875,
+  9: 8.21875,
+  '!': 4.375,
+  '"': 6.109375,
+  '#': 8.9375,
+  $: 8.21875,
+  '%': 12.46875,
+  '&': 12.1875,
+  "'": 3.59375,
+  '(': 4.6875,
+  ')': 4.6875,
+  '*': 6.375,
+  '+': 10.390625,
+  ',': 3.375,
+  '-': 6.0625,
+  '.': 3.375,
+  '/': 5.984375,
+  ':': 3.375,
+  ';': 3.375,
+  '<': 10.390625,
+  '=': 10.390625,
+  '>': 10.390625,
+  '?': 6.765625,
+  '@': 14.4375,
+  A: 9.859375,
+  B: 8.796875,
+  C: 9.375,
+  D: 10.671875,
+  E: 7.703125,
+  F: 7.4375,
+  G: 10.421875,
+  H: 10.828125,
+  I: 4.125,
+  J: 5.546875,
+  K: 8.890625,
+  L: 7.1875,
+  M: 13.6875,
+  N: 11.390625,
+  O: 11.421875,
+  P: 8.578125,
+  Q: 11.421875,
+  R: 9.140625,
+  S: 8.09375,
+  T: 8.03125,
+  U: 10.453125,
+  V: 9.46875,
+  W: 14.25,
+  X: 9.03125,
+  Y: 8.453125,
+  Z: 8.6875,
+  '[': 4.6875,
+  '\\': 5.828125,
+  ']': 4.6875,
+  '^': 10.390625,
+  _: 6.28125,
+  '`': 4.140625,
+  a: 7.75,
+  b: 8.953125,
+  c: 7.03125,
+  d: 8.96875,
+  e: 7.953125,
+  f: 4.859375,
+  g: 8.96875,
+  h: 8.625,
+  i: 3.734375,
+  j: 3.75,
+  k: 7.625,
+  l: 3.734375,
+  m: 13.125,
+  n: 8.640625,
+  o: 8.90625,
+  p: 8.953125,
+  q: 8.96875,
+  r: 5.40625,
+  s: 6.546875,
+  t: 5.21875,
+  u: 8.640625,
+  v: 7.359375,
+  w: 11.0625,
+  x: 7.109375,
+  y: 7.421875,
+  z: 6.890625,
+  '{': 4.6875,
+  '|': 3.78125,
+  '}': 4.6875,
+  '~': 10.390625
+}
+
+export default function getWidth(label) {
+  label = label || ''
+  let labels = label.match(/./gu) || []
+  let labelW = 0
+  labels.forEach((s) => (labelW += ASCII_W[s] || 14))
+
+  return labelW
+}

package/src/utils/repairElementUI.js

@@ -0,0 +1,141 @@
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+
+function setPropsDefault(component, props) {
+  let c_props = component.props
+  Object.keys(props).forEach((key) => {
+    c_props[key] = Object.assign({}, c_props[key], props[key])
+  })
+}
+function setMethodsDefault(component, methods) {
+  let c_methods = component.methods
+  Object.keys(methods).forEach((key) => {
+    c_methods[key] = methods[key]
+  })
+}
+
+setPropsDefault(ElementUI.TableColumn, {
+  filterPlacement: {
+    default: 'bottom'
+  }
+})
+
+setPropsDefault(ElementUI.Dropdown, {
+  placement: {
+    default: 'bottom'
+  }
+})
+
+setPropsDefault(ElementUI.Dialog, {
+  appendToBody: {
+    default: true
+  }
+})
+
+import getWidth from './asciiWidth'
+
+setMethodsDefault(ElementUI.TableColumn, {
+  setColumnWidth(column) {
+    if (this.realWidth) {
+      column.width = this.realWidth
+    }
+    if (this.realMinWidth) {
+      column.minWidth = this.realMinWidth
+    }
+    if (!column.minWidth) {
+      if (!column.width) {
+        let labelW = getWidth(column.label)
+
+        let sortable = column.sortable ? 24 : 0
+        let filters = column.filters ? 16 : 0
+        column.minWidth = Math.max(80, labelW + 22 + sortable + filters)
+      } else {
+        column.minWidth = 80
+      }
+    }
+    column.realWidth = column.width === undefined ? column.minWidth : column.width
+    return column
+  }
+})
+
+// 美化表头搜索
+import FilterPanel from './tableheaderFilterpanel.vue'
+function hasClass(el, cls) {
+  if (!el || !cls) return false
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
+  if (el.classList) {
+    return el.classList.contains(cls)
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
+  }
+}
+if (ElementUI.Table.components.TableHeader) {
+  setMethodsDefault(ElementUI.Table.components.TableHeader, {
+    handleFilterClick(event, column) {
+      event.stopPropagation()
+      const target = event.target
+      let cell = target.tagName === 'TH' ? target : target.parentNode
+      if (hasClass(cell, 'noclick')) return
+      cell = cell.querySelector('.el-table__column-filter-trigger') || cell
+      const table = this.$parent
+
+      let filterPanel = this.filterPanels[column.id]
+
+      if (filterPanel && column.filterOpened) {
+        filterPanel.showPopper = false
+        return
+      }
+
+      if (!filterPanel) {
+        filterPanel = new Vue(FilterPanel)
+        this.filterPanels[column.id] = filterPanel
+        if (column.filterPlacement) {
+          filterPanel.placement = column.filterPlacement
+        }
+        filterPanel.table = table
+        filterPanel.cell = cell
+        filterPanel.column = column
+        !this.$isServer && filterPanel.$mount(document.createElement('div'))
+      }
+
+      setTimeout(() => {
+        filterPanel.showPopper = true
+      }, 16)
+    }
+  })
+}
+
+/* 对ElementUI硬优化 */
+import Popper from 'element-ui/lib/utils/popper.js'
+function repairPopper() {
+  if (!Popper.prototype.repairR) {
+    Popper.prototype.repairR = true
+
+    let __getBoundaries = Popper.prototype._getBoundaries
+    Popper.prototype._getBoundaries = function (data, padding, boundariesElement) {
+      const boundaries = __getBoundaries.call(this, data, padding, boundariesElement)
+
+      if (this._options.boundariesElement === 'viewport') {
+        const root = window
+        const body = root.document.body
+        const html = root.document.documentElement
+        let width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
+        let height = Math.max(
+          body.scrollHeight,
+          body.offsetHeight,
+          html.clientHeight,
+          html.scrollHeight,
+          html.offsetHeight
+        )
+
+        boundaries.right = boundaries.right - root.document.documentElement.clientWidth + width
+        boundaries.bottom = boundaries.bottom - root.document.documentElement.clientHeight + height
+      }
+      return boundaries
+    }
+  }
+}
+
+export default function () {
+  repairPopper()
+}

package/src/utils/tableheaderFilterpanel.vue

@@ -0,0 +1,257 @@
+<template>
+  <transition name="el-zoom-in-top">
+    <div
+      v-if="multiple"
+      v-show="showPopper"
+      v-click-outside:capture="handleOutsideClick"
+      class="el-table-filter p-a m-t"
+    >
+      <el-input
+        v-model="searchVal"
+        class="input-w m-b"
+        :placeholder="'请输入' | $lc"
+        clearable
+        suffix-icon="el-icon-search"
+      />
+      <div>
+        <el-checkbox v-model="allCheck" :label="true" :indeterminate="indeterminate"
+          >{{ '全部' | $lc }}{{ filters | alltextF }}</el-checkbox
+        >
+      </div>
+      <el-checkbox-group v-model="filteredValue" class="input-w p-b-s" style="max-height: 226px; overflow: auto">
+        <template v-for="filter in filters">
+          <el-checkbox
+            v-if="filter.text.includes(searchVal)"
+            :key="filter.value"
+            class="m-t-s m-r-0"
+            :label="filter.value"
+            style="display: block"
+          >
+            <!-- v-title="filter.text" :show-overflow-tooltip="true" -->
+            <span class="align-bottom">{{ filter.text }}</span>
+            <span>{{ filter | countF }}</span>
+          </el-checkbox>
+        </template>
+      </el-checkbox-group>
+      <div class="flex-box flex-c m-t-s">
+        <el-button
+          type="primary"
+          size="mini"
+          @click="
+            () => {
+              filteredValue.length ? handleConfirm() : handleReset()
+            }
+          "
+        >
+          {{ '确认' | $lc }}
+        </el-button>
+        <el-button plain size="mini" @click="handleReset">{{ '清空' | $lc }}</el-button>
+      </div>
+    </div>
+    <div v-else v-show="showPopper" v-click-outside:capture="handleOutsideClick" class="el-table-filter p-a m-t">
+      <el-input
+        v-model="searchVal"
+        class="input-w m-b-ss"
+        :placeholder="'请输入' | $lc"
+        clearable
+        suffix-icon="el-icon-search"
+      />
+      <ul class="el-table-filter__list">
+        <li
+          class="el-table-filter__list-item"
+          :class="{
+            'is-active': filterValue === undefined || filterValue === null
+          }"
+          @click="handleSelect(null)"
+        >
+          {{ '全部' | $lc }}{{ filters | alltextF }}
+        </li>
+      </ul>
+      <ul class="el-table-filter__list" style="max-height: 226px; overflow: auto">
+        <template v-for="filter in filters">
+          <li
+            v-if="filter.text.includes(searchVal)"
+            :key="filter.value"
+            class="el-table-filter__list-item"
+            :label="filter.value"
+            :class="{ 'is-active': isActive(filter) }"
+            @click="handleSelect(filter.value)"
+          >
+            <!-- v-title="filter.text" :show-overflow-tooltip="true" -->
+            <span class="text-ellipsis align-bottom" style="display: inline-block; max-width: 12em">{{
+              filter.text
+            }}</span>
+            <span>{{ filter | countF }}</span>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </transition>
+</template>
+
+<script>
+// import { $lc } from './i18n/index'
+import Popper from 'element-ui/lib/utils/vue-popper.js'
+export default {
+  name: 'ElTableFilterPanelPor',
+  filters: {
+    countF(item) {
+      if (item.count === undefined) {
+        return ''
+      } else {
+        return ' (' + item.count + ')'
+      }
+    },
+    alltextF(list = []) {
+      if (list.some((c) => c.count !== undefined)) {
+        let total = 0
+        list.forEach((c) => {
+          if (!isNaN(c.count)) {
+            total = total + Number(c.count)
+          }
+        })
+        return ' (' + total + ')'
+      } else {
+        return ''
+      }
+    }
+  },
+  mixins: [Popper],
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom-end'
+    }
+  },
+
+  data() {
+    return {
+      table: null,
+      cell: null,
+      column: null,
+      searchVal: ''
+      // allCheck: false
+    }
+  },
+
+  computed: {
+    filters() {
+      return this.column && this.column.filters
+    },
+
+    filterValue: {
+      get() {
+        return (this.column.filteredValue || [])[0]
+      },
+      set(value) {
+        if (this.filteredValue) {
+          if (typeof value !== 'undefined' && value !== null) {
+            this.filteredValue.splice(0, 1, value)
+          } else {
+            this.filteredValue.splice(0, 1)
+          }
+        }
+      }
+    },
+
+    filteredValue: {
+      get() {
+        if (this.column) {
+          return this.column.filteredValue || []
+        }
+        return []
+      },
+      set(value) {
+        if (this.column) {
+          this.column.filteredValue = value
+        }
+      }
+    },
+
+    allCheck: {
+      get() {
+        return this.filteredValue.length === 0 ? false : this.filteredValue.length === this.filters.length
+      },
+      set(val) {
+        if (val) {
+          this.filteredValue = this.filters.map((f) => f.value)
+        } else {
+          this.filteredValue = []
+        }
+      }
+    },
+
+    indeterminate() {
+      return this.filteredValue.length > 0 && this.filteredValue.length !== this.filters.length
+    },
+
+    multiple() {
+      if (this.column) {
+        return this.column.filterMultiple
+      }
+      return true
+    }
+  },
+
+  mounted() {
+    this.popperElm = this.$el
+    this.referenceElm = this.cell
+    this.table.bodyWrapper.addEventListener('scroll', () => {
+      this.updatePopper()
+    })
+
+    this.$watch('showPopper', (value) => {
+      if (this.column) this.column.filterOpened = value
+      if (value) this.searchVal = ''
+      // if (value) {
+      //   Dropdown.open(this)
+      // } else {
+      //   Dropdown.close(this)
+      // }
+    })
+  },
+
+  methods: {
+    isActive(filter) {
+      return filter.value === this.filterValue
+    },
+
+    handleOutsideClick() {
+      setTimeout(() => {
+        this.showPopper = false
+      }, 16)
+    },
+
+    handleConfirm() {
+      this.confirmFilter(this.filteredValue)
+      this.handleOutsideClick()
+    },
+
+    handleReset() {
+      this.filteredValue = []
+      this.confirmFilter(this.filteredValue)
+      this.handleOutsideClick()
+    },
+
+    handleSelect(filterValue) {
+      this.filterValue = filterValue
+
+      if (typeof filterValue !== 'undefined' && filterValue !== null) {
+        this.confirmFilter(this.filteredValue)
+      } else {
+        this.confirmFilter([])
+      }
+
+      this.handleOutsideClick()
+    },
+
+    confirmFilter(filteredValue) {
+      this.table.store.commit('filterChange', {
+        column: this.column,
+        values: filteredValue
+      })
+      this.table.store.updateAllSelected()
+    }
+  }
+}
+</script>