n20-common-lib 1.3.29 → 1.3.32

package/src/components/Table/index.vue

@@ -1,6 +1,5 @@
 <template>
   <el-table
-    v-if="!pageObj"
     ref="el-table"
     :header-cell-style="{ 'text-align': 'center' }"
     :data="data"
@@ -25,68 +24,23 @@
         :filters="item.filters | colftF(filtersMap)"
         v-bind="item"
       >
-        <template slot="header">
-          <span v-if="item.filter" class="">
-            {{ item.label }}
-            <ThSelectHeader
-              :property="item.prop"
-              :th-index="dataList"
-              :check-list="checkList"
-              @selectChange="selectChange"
-            />
-          </span>
+        <template v-if="item.filterPre" slot="header">
+          {{ item.label }}
+          <th-select-header
+            :property="item.prop"
+            :data-list="dataList"
+            :check-list="checkList"
+            @selectChange="selectChange"
+          />
         </template>
       </el-table-column>
     </template>
   </el-table>
-
-  <div v-else :style="{ height: heightW }">
-    <el-table
-      ref="el-table"
-      :header-cell-style="{ 'text-align': 'center' }"
-      style="width: 100%"
-      :data="data"
-      v-bind="$attrs"
-      :height="heightC"
-      v-on="$listeners"
-    >
-      <template v-for="(item, i) in columns">
-        <slot v-if="item.slotName" :name="item.slotName"></slot>
-        <el-table-column
-          v-else-if="item.render"
-          :key="'cl-table-' + i"
-          v-bind="item"
-        >
-          <columnRender
-            slot-scope="{ row }"
-            :c-render="item.render"
-            :row="row"
-          />
-        </el-table-column>
-        <el-table-column
-          v-else
-          :key="'cl-table-' + i"
-          :formatter="item.formatter | colfF"
-          v-bind="item"
-        />
-      </template>
-    </el-table>
-    <div v-if="pageObj" class="flex-box flex-r m-t-s">
-      <Pagination
-        :page-obj="pageObj"
-        :page-key="pageKey"
-        @change="(obj) => $emit('pageChange', obj)"
-      />
-    </div>
-  </div>
 </template>
 
 <script>
-import numerify from 'numerify'
-import dayjs from 'dayjs'
-import Pagination from '../Pagination/index.vue'
-
-import ThSelectHeader from './ThSelectHeader.vue'
+import thSelectHeader from './ThSelectHeader.vue'
+import { colfF, colftF } from './filters'
 
 const columnRender = {
   props: {
@@ -102,69 +56,11 @@ 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: {
-    Pagination,
     columnRender,
-    ThSelectHeader
+    thSelectHeader
   },
   filters: {
     colfF,
@@ -208,21 +104,6 @@ export default {
       dataList: []
     }
   },
-  computed: {
-    heightW() {
-      if (this.height === undefined) {
-        return undefined
-      }
-      if (/\D/.test(this.height)) {
-        return this.height
-      } else {
-        return this.height + 'px'
-      }
-    },
-    heightC() {
-      return this.pageObj ? 'calc(100% - 38px)' : '100%'
-    }
-  },
   created() {
     this.dataList = JSON.parse(JSON.stringify(this.data))
     for (let k in this.dataList[0]) {
@@ -230,17 +111,11 @@ export default {
     }
     for (let i in this.dataList) {
       for (let k in this.dataList[i]) {
-        if (
-          this.checkList[k].findIndex((item) => item == this.dataList[i][k]) ==
-          -1
-        ) {
+        if (!this.checkList[k].some((item) => item === this.dataList[i][k])) {
           this.checkList[k].push(this.dataList[i][k])
         }
       }
     }
-    if (this.column) {
-      console.warn('调整列顺序,请使用ShowColumn组件')
-    }
   },
   methods: {
     selectChange(val) {

package/src/components/TableOperateColumn/OperateBtns.vue

@@ -0,0 +1,73 @@
+<template>
+  <span>
+    <el-button
+      v-for="item in dfBtns"
+      :key="item.label"
+      type="text"
+      size="mini"
+      @click="$emit('command', item.command)"
+      >{{ item.label }}</el-button
+    >
+    <el-dropdown v-if="moreBtns.length" @command="(c) => $emit('command', c)">
+      <el-button class="n20-icon-moren" type="text" size="mini" />
+      <el-dropdown-menu slot="dropdown" class="text-c">
+        <el-dropdown-item
+          v-for="item in moreBtns"
+          :key="item.label"
+          :command="item.command"
+          >{{ item.label }}</el-dropdown-item
+        >
+      </el-dropdown-menu>
+    </el-dropdown>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    btnList: {
+      type: Array,
+      default: () => []
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    hasBtns() {
+      return this.btnList.filter((btn) => this.hasBtn(btn.isHas, this.row))
+    },
+    dfBtns() {
+      if (this.hasBtns.length > 3) {
+        return this.hasBtns.slice(0, 2)
+      } else {
+        return this.hasBtns
+      }
+    },
+    moreBtns() {
+      if (this.hasBtns.length > 3) {
+        return this.hasBtns.slice(2)
+      } else {
+        return []
+      }
+    }
+  },
+  methods: {
+    hasBtn(isHas, row) {
+      if (isHas === undefined || isHas === null) {
+        return true
+      } else if (typeof isHas === 'boolean') {
+        return isHas
+      } else if (typeof isHas === 'string' || Array.isArray(isHas)) {
+        return this.$has(isHas)
+      } else if (typeof isHas === 'function') {
+        return isHas(row)
+      }
+    }
+  }
+}
+</script>

package/src/components/TableOperateColumn/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-table-column v-bind="$attrs">
+    <OperateBtns
+      slot-scope="{ row, $index }"
+      :btn-list="btnList"
+      :row="row"
+      @command="(c) => $emit(c, row, $index)"
+    />
+  </el-table-column>
+</template>
+
+<script>
+import OperateBtns from './OperateBtns.vue'
+export default {
+  name: 'TableOperateColumn',
+  components: {
+    OperateBtns
+  },
+  props: {
+    btnList: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>

package/src/directives/VTitle/index.js

@@ -1,3 +1,5 @@
+import { Popover as elPopover } from 'element-ui'
+
 let timer = undefined
 const popClass = 'at-title-pop-' + Date.now()
 
@@ -44,6 +46,9 @@ TitleDirective.install = (Vue) => {
   if (Vue.prototype.$isServer) return
   const tooltip = new Vue({
     el: document.createElement('div'),
+    components: {
+      elPopover
+    },
     data() {
       return {
         visible: false

package/src/index.js

@@ -35,6 +35,7 @@ import FileUploadTable from './components/FileUploadTable/index.vue'
 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 Button from './components/Button/index.vue'
 import ButtonGroup from './components/Button/button-group.vue'
 import ShowColumn from './components/ShowColumn/index.vue'
@@ -124,6 +125,7 @@ const components = [
   FooterBox,
   Filters,
   Table,
+  TableOperateColumn,
   Button,
   ButtonGroup,
   ShowColumn,
@@ -232,6 +234,7 @@ export {
   FooterBox,
   Filters,
   Table,
+  TableOperateColumn,
   Button,
   ButtonGroup,
   ShowColumn,

package/src/plugins/CompatibleOld/index.js

@@ -1,57 +1,11 @@
+import { setTabs, closeTag } from '../../utils/handleTab.js'
+
 // 老系统子应用调用函数，新增页签的函数接口
 export function setTabsForSub(baseUrl, to, tab = true) {
-  let { path, name, meta = {}, query } = to
-  let _path = baseUrl + path
-  _path = _path.replace('//', '/')
-  let _i18n
-  let _title
-
-  let { title, i18n } = meta
-  if (i18n && typeof i18n === 'object') {
-    _i18n = i18n
-  } else if (title && typeof title === 'object') {
-    _i18n = title
-  } else if (name && typeof name === 'object') {
-    _i18n = name
-  }
-  if (_i18n && _i18n.zh) {
-    _title = _i18n.zh
-  } else {
-    _title = title
-  }
-
-  if (tab) {
-    window.postMessage({
-      addTabO: {
-        path: _path,
-        title: _title,
-        i18n: _i18n,
-        query: query
-      },
-      targetName: 'main',
-      originName: name
-    })
-  } else {
-    window.postMessage({
-      replaceTab: {
-        path: _path,
-        title: _title,
-        i18n: _i18n,
-        query: query
-      },
-      targetName: 'main',
-      originName: name
-    })
-  }
+  setTabs(baseUrl, to, tab)
 }
 
 // 老系统子应用调用函数，关闭页签的函数接口
 export function closeTagsForBackPage(url) {
-  window.postMessage({
-    closeTab: {
-      path: url || window.location.pathname
-    },
-    targetName: 'main',
-    originName: '*'
-  })
+  closeTag(url)
 }

package/src/utils/handleTab.js

@@ -0,0 +1,109 @@
+// 操作切换路由生成的页签
+const dN = process.env.VUE_APP_NAME
+/** 打开页签,push对应路由 */
+export function addTab(opt = {}, name) {
+  window.postMessage({
+    addTab: opt,
+    targetName: 'main',
+    originName: name || dN
+  })
+}
+/** 子打开页签,不再push对应路由 */
+export function addTabO(opt = {}, name) {
+  window.postMessage({
+    addTabO: opt,
+    targetName: 'main',
+    originName: name || dN
+  })
+}
+
+export function closeTab(opt = {}, name) {
+  window.postMessage({
+    closeTab: opt,
+    targetName: 'main',
+    originName: name || dN
+  })
+}
+
+export function setTabName(opt = {}, name) {
+  window.postMessage({
+    setTabName: opt,
+    targetName: 'main',
+    originName: name || dN
+  })
+}
+
+export function refreshTab(opt = {}, name) {
+  window.postMessage({
+    refreshTab: opt,
+    targetName: 'main',
+    originName: name || dN
+  })
+}
+/** 不打开页签,替换当前页签保存的路由信息 */
+export function replaceTab(opt = {}, name) {
+  window.postMessage({
+    replaceTab: opt,
+    targetName: 'main',
+    originName: name || dN
+  })
+}
+
+/* 业务应用 */
+// 获取页签名称
+function getI18n(meta = {}, name) {
+  let _i18n = undefined
+  let { title, i18n } = meta
+
+  if (i18n && typeof i18n === 'object') {
+    _i18n = i18n
+  } else if (title && typeof title === 'object') {
+    _i18n = title
+  } else if (name && typeof name === 'object') {
+    _i18n = name
+  }
+  return {
+    i18n: _i18n,
+    title: _i18n && _i18n.zh ? _i18n.zh : title
+  }
+}
+// 获取绝对路径
+function getPath(baseUrl, path) {
+  return (baseUrl + path).replace('//', '/')
+}
+// 获取模块名称
+function getName(baseUrl) {
+  return dN || baseUrl.replace('/', '')
+}
+/** 子模块在门户中打开页签 */
+export function setTabs(baseUrl, to, tab = true) {
+  let { path, name, meta = {}, query } = to
+  let { i18n, title } = getI18n(meta, name)
+  let route = getPath(baseUrl, path)
+
+  if (tab) {
+    addTabO(
+      {
+        path: route,
+        title: title,
+        i18n: i18n,
+        query: query
+      },
+      getName(baseUrl)
+    )
+  } else {
+    replaceTab(
+      {
+        path: route,
+        title: title,
+        i18n: i18n,
+        query: query
+      },
+      getName(baseUrl)
+    )
+  }
+}
+/** 子模块关闭在门户中的页签 */
+export function closeTag(url, name) {
+  closeTab({ path: url || window.location.pathname }, name || '*')
+}

package/src/utils/toExcel.js

@@ -0,0 +1,92 @@
+import ExcelJS from 'exceljs'
+
+function toExcel({ columns = [], rows = [], name = 'sheet01' }) {
+  let cols = []
+  columns.forEach((col) => {
+    if (!col.static) {
+      let _col = {
+        header: col.label,
+        key: col.prop,
+        style: col.style || {}
+      }
+
+      let width = col.width || col.minWidth || col['min-width'] || 0
+      width = Math.max(width / 8, col.label.length * 2.2 + 2)
+      width > 9 && (_col.width = width)
+
+      if (col.numFmt) {
+        _col.style.numFmt = col.numFmt
+      } else if (col.formatter && typeof col.formatter === 'string') {
+        if (/\|\s?money/.test(col.formatter)) {
+          _col.style.numFmt = '#,##0.00'
+        }
+        if (/\|\s?rate/.test(col.formatter)) {
+          _col.style.numFmt = '0.000000'
+        }
+      }
+
+      cols.push(_col)
+    }
+  })
+
+  let cL = cols.length
+  let rL = rows.length
+
+  const workbook = new ExcelJS.Workbook()
+  const worksheet = workbook.addWorksheet(name)
+
+  worksheet.columns = cols
+  worksheet.addRows(rows)
+
+  worksheet.views = [
+    {
+      state: 'frozen',
+      // xSplit: 1,
+      ySplit: 1
+    }
+  ]
+
+  for (let i = 0; i < cL; i++) {
+    worksheet.getCell(1, i + 1).style = {
+      fill: {
+        type: 'pattern',
+        pattern: 'solid',
+        fgColor: { argb: 'FFE1E1E1' }
+      },
+      alignment: {
+        vertical: 'middle',
+        horizontal: 'center'
+      },
+      font: {
+        bold: true
+      }
+    }
+  }
+
+  for (let i = 0; i < cL; i++) {
+    for (let j = 0; j < rL + 1; j++) {
+      worksheet.getCell(j + 1, i + 1).border = {
+        top: { style: 'thin' },
+        left: { style: 'thin' },
+        bottom: { style: 'thin' },
+        right: { style: 'thin' }
+      }
+    }
+  }
+
+  // worksheet.getColumn(1).numFmt = '#,##0.00"%"'
+  // worksheet.getColumn(1).numFmt = '#,##0.00'
+  // worksheet.getColumn(2).width = 32
+
+  return new Promise((resolve, reject) => {
+    workbook.xlsx
+      .writeBuffer()
+      .then((buffer) => {
+        resolve(buffer)
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
+export default toExcel