shijiplus-web-plugin 0.1.11 → 0.1.12

package/src/components/plus-comp/plus-table/plus-table.vue

@@ -0,0 +1,568 @@
+/* eslint-disable */
+<template>
+  <div
+    ref="plusTableInnerRef"
+    :class="['plus-table-wrap', fixedHeader ? 'fixed-header' : '']"
+  >
+    <div
+      ref="searchAreaRef"
+      :class="[inlineForm && 'i-flex-wrap nowrap', 'p-search-area']"
+      v-if="showSearchArea"
+    >
+      <div :class="[inlineForm && 'f-grow']">
+        <slot name="searchArea"></slot>
+      </div>
+      <div v-if="showButtonArea" class="btn-area f-no-shrink i-flex-wrap">
+        <Button v-if="showSeachButton" type="primary" @click="onSearch">
+          搜索
+        </Button>
+        <Button v-if="showResetButton" type="default" @click="onReset">
+          重置
+        </Button>
+        <div class="operation-area">
+          <slot name="operation"> </slot>
+        </div>
+      </div>
+    </div>
+    <slot name="table">
+      <Table
+        :style="tableStyle"
+        :columns="showColumns"
+        :data="pageData"
+        :loading="loading"
+        :size="sizeType"
+        :height="height"
+        :noDataText="noDataText"
+        @on-selection-change="triggerSelectionChange"
+        @on-select-all="triggerSelectAll"
+        @on-sort-change="onSortChange"
+        @on-filter-change="onFilterChange"
+      >
+        <template
+          v-for="item in showColumns"
+          :slot="item.slot"
+          slot-scope="{ row, column, index }"
+        >
+          <slot
+            v-if="item.slot"
+            :name="item.slot"
+            :index="localPaging ? beginIndex + index : index"
+            :column="column"
+            :row="row"
+          >
+            {{ slotValue(item, row) }}
+          </slot>
+          <slot v-else-if="!item.render && !item.key">
+            {{ item.title }}-未设置渲染方式
+          </slot>
+        </template>
+      </Table>
+    </slot>
+    <div ref="footerRef">
+      <slot name="footer"></slot>
+      <div v-if="showPageArea" class="i-flex-wrap">
+        <Page
+          style="margin: 16px 0 0 auto"
+          :total="totalCount"
+          :current="currentPage"
+          @on-change="onPageChanged"
+          :page-size="pageSize"
+          :page-size-opts="[10, 20, 30, 50, 100]"
+          :show-total="showPageTotal"
+          :show-sizer="showPageSizer"
+          show-elevator
+          @on-page-size-change="onPageSizeChanged"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import exportMixin from './export-mixin'
+import { exportTableExcel } from '../../../libs/util'
+/**
+ * 统一了一些基础方法的写法
+ * 提供了refresh方法, 需要刷新当前页面时通过 $refs 调用
+ * 需要传递的参数 参考props
+ *
+ * 通过响应 'on-load-data' 事件加载数据, 事件参数包含 3 个属性
+ * currentPage: 读取数据的页码
+ * pageSize: 单页数据条数
+ * clearCondition: 是否需要清空搜索条件
+ */
+export default {
+  name: 'PlusTable',
+  mixins: [exportMixin],
+  props: {
+    fixedHeader: {
+      type: Boolean,
+      default: false
+    },
+    inlineForm: {
+      type: Boolean,
+      default: false
+    },
+    // 表格列定义
+    columns: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    localPaging: {
+      type: Boolean,
+      default: false
+    },
+    // 列表数据, 传入res.data即可
+    data: {
+      type: [Object, Array],
+      default() {
+        return {}
+      }
+    },
+    // 表格加载状态, 默认false
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    noDataText: {
+      type: String,
+      default: '暂无数据'
+    },
+    // 显示页码按钮
+    showPageArea: {
+      type: Boolean,
+      default: true
+    },
+    // 显示搜索按钮
+    showSeachButton: {
+      type: Boolean,
+      default: true
+    },
+    // 显示重置按钮
+    showResetButton: {
+      type: Boolean,
+      default: true
+    },
+    // 显示按钮区域
+    showButtonArea: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示搜索区, 默认显示
+    showSearchArea: {
+      type: Boolean,
+      default: true
+    },
+    // 每页条数
+    defaultPageSize: {
+      type: Number,
+      default: 10
+    },
+    sizeType: {
+      type: String,
+      default: 'default'
+    },
+    showPageSizer: {
+      type: Boolean,
+      default: true
+    },
+    showPageTotal: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    fixedHeader: {
+      handler(val) {
+        this.$nextTick(() => {
+          let tHeight = this.$refs.plusTableInnerRef.clientHeight
+          let tableWidth = this.$refs.plusTableInnerRef.clientWidth
+
+          // 获取元素的所有计算样式
+          var styles = window.getComputedStyle(this.$refs.plusTableInnerRef)
+
+          var styleHeight = parseFloat(styles.getPropertyValue('height'))
+          // 如果您只想获取特定方向的padding值，例如padding-top
+          var paddingLeft = parseFloat(styles.getPropertyValue('padding-left'))
+          var paddingRight = parseFloat(
+            styles.getPropertyValue('padding-right')
+          )
+          var paddingTop = parseFloat(styles.getPropertyValue('padding-top'))
+          var paddingBottom = parseFloat(
+            styles.getPropertyValue('padding-bottom')
+          )
+          if (paddingLeft) {
+            tableWidth -= paddingLeft
+          }
+          if (paddingRight) {
+            tableWidth -= paddingRight
+          }
+          if (paddingTop) {
+            tHeight -= paddingTop
+          }
+          if (paddingBottom) {
+            tHeight -= paddingBottom
+          }
+          this.tableWidth = tableWidth
+          if (this.$refs.searchAreaRef) {
+            tHeight -= this.$refs.searchAreaRef.clientHeight
+          }
+          if (this.$refs.footerRef) {
+            tHeight -= this.$refs.footerRef.clientHeight
+          }
+          if (val) {
+            this.height = tHeight
+          } else {
+            let tableWrap =
+              this.$refs.plusTableInnerRef.getElementsByClassName(
+                'ivu-table-wrapper'
+              )[0]
+            if (tableWrap) {
+              if (!this.data.data || !this.data.data.length) {
+                tableWrap.style.minHeight = tHeight + 'px'
+              }
+            }
+          }
+        })
+      },
+      deep: true,
+      immediate: true
+    },
+    defaultPageSize: {
+      handler(val) {
+        if (val > 0) {
+          this.pageSize = val
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    data: {
+      handler(val) {
+        if (val) {
+          console.log('-----data--------', val)
+          let dataArray = []
+          if (val instanceof Array) {
+            dataArray = val
+            this.totalCount = val.length
+          } else {
+            dataArray = val.data || []
+            this.totalCount = 0
+            if (val.meta || val.totalCount) {
+              this.totalCount = val.totalCount || val.meta.totalCount
+            }
+            if (this.totalCount < dataArray.length) {
+              this.totalCount = dataArray.length
+            }
+          }
+          // if (this.localPaging) {
+          //   const sortColumn = this.columns.filter((item) => {
+          //     return item.sortable
+          //   })[0]
+          //   if (sortColumn) {
+          //     dataArray = dataArray
+          //       .map((item) => {
+          //         return item
+          //       })
+          //       .sort((a, b) => {
+          //         if (a[sortColumn.key] && b[sortColumn.key]) {
+          //           if (sortColumn.sortType == 'desc') {
+          //             return b[sortColumn.key] - a[sortColumn.key]
+          //           }
+          //           return a[sortColumn.key] - b[sortColumn.key]
+          //         }
+          //         return 0
+          //       })
+          //   }
+          // }
+
+          this.dataList = dataArray
+        } else {
+          this.dataList = []
+          this.totalCount = 0
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    beginIndex() {
+      if (this.localPaging) {
+        return (this.currentPage - 1) * this.pageSize
+      }
+      return 0
+    },
+    pageData() {
+      if (this.localPaging) {
+        return this.dataList.slice(
+          this.beginIndex,
+          this.beginIndex + this.pageSize
+        )
+      }
+      return this.dataList
+    },
+    tableStyle() {
+      if (this.tableWidth) {
+        return { width: this.tableWidth + 'px' }
+      }
+      return {}
+    },
+    showColumns() {
+      return this.columns
+        .map((item) => {
+          if (!item.render && !item.slot) {
+            item.slot = `slot` + item.title
+          }
+          return item
+        })
+        .filter((item) => {
+          if (item.render) {
+            const oldRender = item.render
+            item.render = (h, params) => {
+              if (this.localPaging) {
+                params.index = this.beginIndex + params.index
+              }
+              return oldRender(h, params)
+            }
+          } else {
+            let realValue = ''
+            if (typeof item.defaultValue == 'function') {
+              realValue = item.defaultValue()
+            } else if (typeof item.defaultValue == 'number') {
+              realValue = `${item.defaultValue}`
+            } else {
+              realValue = item.defaultValue
+            }
+            if (realValue) {
+              item.render = (h, params) => {
+                if (!params.row[item.key]) {
+                  return h('span', realValue)
+                }
+                return h('span', params.row[item.key])
+              }
+            }
+          }
+          if (item.filters) {
+            if (typeof item.filterMultiple != 'boolean') {
+              item.filterMultiple = false
+            }
+            if (!item.filterKey) {
+              item.filterKey = item.key
+            }
+            if (!item.filterRemote) {
+              item.filterRemote = (value, key, column) => {}
+            }
+          }
+          return !item.hide
+        })
+    }
+  },
+  data() {
+    return {
+      tableWidth: 0,
+      height: '',
+      dataList: [],
+      totalCount: 0,
+      currentPage: 1,
+      pageSize: 10
+    }
+  },
+  methods: {
+    slotValue(col, row) {
+      return (col.computeValue && col.computeValue(row)) || row[col.key]
+    },
+    onReset() {
+      this.currentPage = 1
+      this.triggerLoadEvent(true)
+    },
+    onSearch() {
+      this.currentPage = 1
+      this.triggerLoadEvent(false)
+    },
+    triggerSelectionChange(selection) {
+      this.$emit('on-selection-change', selection)
+    },
+    triggerSelectAll() {
+      this.$emit('on-select-all')
+    },
+    onSortChange(e) {
+      this.$emit('on-sort-change', e)
+    },
+    onFilterChange(e) {
+      this.$emit('on-filter-change', { ...e, value: e._filterChecked })
+    },
+    onPageSizeChanged(size) {
+      this.pageSize = size
+      this.triggerLoadEvent(false)
+    },
+    onPageChanged(idx) {
+      this.currentPage = idx
+      this.triggerLoadEvent(false)
+    },
+    refresh() {
+      this.triggerLoadEvent(false)
+    },
+    triggerLoadEvent(clearCondition) {
+      let e = {
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        clearCondition: clearCondition
+      }
+      this.$emit('on-load-data', e)
+    },
+    tableToExcel(p = { params: {}, apiFun: null, fileName: '' }) {
+      return new Promise((resolve, reject) => {
+        const { params, apiFun, fileName } = Object.assign({}, p)
+        if (!apiFun) {
+          // 防止被 外部 destory
+          setTimeout(() => {
+            this.$Message.error({
+              content: '需要指定导出的API'
+            })
+          }, 100)
+          resolve()
+          return
+        }
+        this.invokeExportExcel(
+          {
+            ...params
+          },
+          apiFun
+        )
+          .then((data) => {
+            if (data) {
+              return exportTableExcel(data, this.columns, fileName)
+            }
+          })
+          .finally(() => {
+            resolve()
+          })
+      })
+    }
+  },
+  mounted() {
+    this.onSearch()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.plus-table-wrap {
+  --sibling-nodes-height: 0px;
+  --table-th-bg-color: #f8f8f9;
+  background-color: #ffffff;
+  padding: 0px;
+  box-sizing: border-box;
+  &.fixed-header {
+    height: calc(~'100% - var(--sibling-nodes-height)');
+  }
+  .p-search-area {
+    position: relative;
+    padding-bottom: 16px;
+    /deep/.plus-form-wrap {
+      .ivu-form-item {
+        margin-bottom: 0px;
+      }
+    }
+  }
+  .btn-area {
+    margin-top: auto;
+    button {
+      margin-left: 8px;
+      &:first-child {
+        margin-left: 0px;
+      }
+    }
+  }
+  .operation-area {
+    & > * {
+      &:first-child {
+        margin-left: 48px !important;
+      }
+    }
+  }
+  .ivu-table-wrapper {
+    border: none;
+    /deep/.ivu-table {
+      &::before {
+        background-color: transparent;
+      }
+
+      &::after {
+        background-color: transparent;
+      }
+      th {
+        height: 54px;
+        border-bottom: none;
+        background-color: var(--table-th-bg-color);
+        .ivu-table-cell {
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 14px;
+          color: #515a6e;
+          letter-spacing: 0.7px;
+        }
+      }
+      // td {
+      //   height: 64px;
+      // }
+      .ivu-table-tip {
+        height: ~'calc(100% - 54px)'; // 54 header的高
+        table {
+          height: 100%;
+        }
+      }
+      .ivu-table-tbody {
+        .ivu-table-cell {
+          padding-top: 16px;
+          padding-bottom: 16px;
+          line-height: 1.4;
+        }
+      }
+    }
+    /deep/.ivu-table-cell {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+    /deep/.ivu-table-row {
+      .ivu-table-cell {
+        font-weight: 400;
+        font-size: 14px;
+        color: #515a6e;
+        letter-spacing: 0.7px;
+        .ivu-btn {
+          margin-right: 4px;
+          margin-bottom: 2px;
+          margin-top: 2px;
+          &:last-child {
+            margin-right: 0;
+            &:first-child {
+              margin-bottom: 0;
+              margin-top: 0px;
+            }
+          }
+        }
+      }
+    }
+  }
+  /deep/.ivu-page {
+    .ivu-page-options-sizer {
+      margin-right: 0px;
+    }
+  }
+}
+.ivu-form-item-error .plus-table-wrap {
+  border: #ff0000 1px solid;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  /deep/.ivu-select-selection {
+    border-color: var(--border-color) !important;
+    .ivu-select-arrow {
+      color: var(--subsidiary-color);
+    }
+  }
+}
+</style>

package/src/components/plus-comp/plus-tabs/plus-tabs.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="plus-tabs" class="plus-tabs" ref="plusTabsRef">
+    <Tabs @on-click="onTabClick">
+      <slot></slot>
+    </Tabs>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    calcInkBar() {
+      const inkBar =
+        this.$refs.plusTabsRef.getElementsByClassName('ivu-tabs-ink-bar')[0]
+      if (inkBar) {
+        this.$nextTick(() => {
+          const actTab = this.$refs.plusTabsRef.getElementsByClassName(
+            'ivu-tabs-tab-active'
+          )[0]
+          inkBar.style.left = `${
+            actTab.offsetLeft + (actTab.clientWidth - 48) / 2
+          }px`
+        })
+      }
+    },
+    onTabClick(e) {
+      this.$emit('on-click', e)
+      this.calcInkBar()
+    }
+  },
+  mounted() {
+    this.calcInkBar()
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-tabs {
+  height: 100%;
+  /deep/.ivu-tabs {
+    height: 100%;
+    --bar-m-b: 17px;
+    --bar-h: 16px;
+    --bar-p-b: 16px;
+    .ivu-tabs-bar {
+      margin-bottom: var(--bar-m-b);
+    }
+    .ivu-tabs-tab {
+      padding: 0 12px;
+      min-width: 48px;
+      text-align: center;
+      line-height: var(--bar-h);
+      padding-bottom: var(--bar-p-b);
+      color: var(--text-color);
+    }
+    .ivu-tabs-tab-active {
+      color: #17233d;
+      font-weight: 600;
+    }
+    .ivu-tabs-ink-bar {
+      width: 48px !important;
+      height: 3px !important;
+      transform: translate3d(0px, 0px, 0px) !important;
+      transition: left 0.3s ease-in-out;
+    }
+    .ivu-tabs-content {
+      height: ~'calc(100% - var(--bar-p-b) - var(--bar-h) - var(--bar-m-b))';
+      .tab-pane-content {
+        overflow-y: auto;
+      }
+      .tab-pane-content,
+      & > div {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

package/src/directive/index.js

@@ -13,6 +13,8 @@ const importDirective = Vue => {
   Vue.directive('draggable', directive.draggable)
   Vue.directive('access', directive.authAccess)
   Vue.directive('loading', directive.loading)
+  Vue.directive('loading-text', directive.loadingText)
+  Vue.directive('loading-icon', directive.loadingIcon)
 }
 
 export default importDirective

package/src/directive/module/authAccess.js

@@ -1,7 +1,7 @@
 export default {
   inserted(el, binding, vnode, oldVnode) {
-    console.log('plugin-access', vnode.context.$store)
-    if (document.location.hostname == 'localhost') {
+    // console.log('plugin-access', vnode.context.$store)
+    if (document.location.hostname == 'localhost' || document.location.hostname.indexOf('192.168') != -1) {
       return
     }
     if (vnode.context.$store.state.user.access === undefined || vnode.context.$store.state.user.access.length === 0) {

package/src/extentionPlugin/string.js

@@ -2,10 +2,34 @@ const install = (vue, opts = {}) => {
   vue.prototype.$trim = trim
   vue.prototype.$trimStart = trimStart
   vue.prototype.$trimEnd = trimEnd
+  vue.prototype.$formatterBankCard = formatterBankCard
+  vue.prototype.$formatterPhoneNo = formatterPhoneNo
   vue.prototype.$formtterCityName = formtterCityName
   vue.prototype.$parseUrl = parseUrl
   vue.prototype.$beautyNum = beautyNum
-  vue.prototype.$formatterPhoneNo = formatterPhoneNo
+  vue.prototype.$numberToChinese = function (num) {
+    const chineseNumArr = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+    const chineseUnitArr = ['', '十', '百', '千', '万', '亿']
+    let numArr = String(num).split('')
+    let numIndex = numArr.length - 1
+    let unitIndex = 0
+    let result = []
+    while (numIndex >= 0) {
+      const num = parseInt(numArr[numIndex])
+      let unitStr = num ? chineseUnitArr[unitIndex] : ''
+      let numStr = unitIndex == 0 && num == 0 ? '' : chineseNumArr[num]
+      let chinese = ''
+      if (unitIndex == 1 && numIndex == 0) {
+        chinese += (num > 1 ? numStr : '') + unitStr
+      } else {
+        chinese += numStr + unitStr
+      }
+      result[numIndex] = chinese
+      numIndex--
+      unitIndex++
+    }
+    return result.join('')
+  }
 }
 
 function formtterCityName(proName, cityName) {
@@ -16,6 +40,11 @@ function formtterCityName(proName, cityName) {
   return `${proName}/${cityName}`
 }
 
+// 格式化银行卡号
+function formatterBankCard(oriStr) {
+  var reg = /^(\d{4})\d+(\d{4})$/
+  return oriStr.replace(reg, '$1 **** **** $2')
+}
 // 格式化手机号
 function formatterPhoneNo(oriStr) {
   var reg = /^(\d{3})\d+(\d{4})$/