shijiplus-web-plugin 0.1.33 → 0.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shijiplus-web-plugin",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "files": [
     "src"
   ],

package/src/components/plus-comp/index.js

@@ -1,4 +1,4 @@
-const compFiles = ['plus-tag', 'plus-icon', 'plus-city-cascader', 'plus-count-down', 'plus-city-cascader', 'plus-common-header', 'plus-poptip', 'plus-qr-code', 'plus-drawer', 'plus-tabs', 'plus-remote-selector', 'plus-select', 'plus-form', 'plus-scrollview', 'plus-table', 'plus-modal', 'plus-card', 'permission-component']
+const compFiles = ['plus-tag', 'plus-table-v2', 'plus-icon', 'plus-city-cascader', 'plus-count-down', 'plus-city-cascader', 'plus-common-header', 'plus-poptip', 'plus-qr-code', 'plus-drawer', 'plus-tabs', 'plus-remote-selector', 'plus-select', 'plus-form', 'plus-scrollview', 'plus-table', 'plus-modal', 'plus-card', 'permission-component']
 
 const install = (vue, opts = {}) => {
   console.log('--------install---plus-comp----------')

package/src/components/plus-comp/plus-table/export-mixin.js

@@ -167,6 +167,9 @@ export default {
           // Update progress based on total count
           this.orderExportModalPercent = (exportedCount / this.totalCount * 100).toFixed(2)
           instance.updatePercent(this.orderExportModalPercent)
+          if (this.orderExportModalPercent >= 100) {
+            break
+          }
         }
 
         // 5. Export the data (logic omitted here, add your export implementation)

package/src/components/plus-comp/plus-table-v2/export-mixin.js

@@ -0,0 +1,78 @@
+import PlusCircleProgressModal from './plus-circle-progress-modal.vue'
+export default {
+  data() {
+    return {
+      totalCount: 0,
+      orderExportModalPercent: 0,
+      orderExportPageSize: 100
+    }
+  },
+  methods: {
+    invokeExportExcel(searchForm, apiFunction) {
+      const checkExportDataTotal = (searchForm) => {
+        return apiFunction({
+          ...searchForm,
+          pageNo: 1,
+          currentPage: 1,
+          pageSize: 1
+        })
+          .then((res) => {
+            if (res && res.meta) {
+              this.totalCount = res.meta.totalCount
+            } else {
+              this.totalCount = (res.data || []).length
+            }
+          })
+      }
+      let exportData = []
+      const excelExportFun = (pageNo, pageSize, processUpdate) => {
+        return apiFunction({
+          ...searchForm,
+          currentPage: pageNo,
+          pageNo: pageNo,
+          pageSize: pageSize
+        }).then((res) => {
+          if (res && res.data) {
+            exportData.push(...res.data)
+          }
+          this.orderExportModalPercent = (exportData.length / (this.totalCount || 1) * 100).toFixed(2)
+          if (processUpdate) {
+            processUpdate(this.orderExportModalPercent)
+          }
+          if (exportData.length < this.totalCount) {
+            return excelExportFun(pageNo + 1, pageSize, processUpdate)
+          }
+          return exportData
+        }).catch((error) => {
+          console.log('--------error---------', error)
+          throw Error('导出失败')
+        })
+      }
+      return checkExportDataTotal(searchForm).then((res) => {
+        if (this.totalCount === 0) {
+          // 宏任务最后执行
+          setTimeout(() => {
+            this.$Message.error('暂无数据,请搜索后重试', 3)
+          }, 0)
+          return
+        }
+        const instance = this.$getComponentInstance(PlusCircleProgressModal)
+        instance.$on('on-close', (e) => {
+          setTimeout(() => {
+            this.$removeVComp(instance)
+          }, 500)
+        })
+        instance.show()
+        return excelExportFun(1, this.orderExportPageSize, (process) => {
+          instance.updatePercent(process)
+        }).catch(() => {
+          // 宏任务最后执行
+          setTimeout(() => {
+            this.$Message.error('导出失败', 3)
+            this.$removeVComp(instance)
+          }, 0)
+        })
+      })
+    }
+  }
+}

package/src/components/plus-comp/plus-table-v2/plus-circle-progress-modal.vue

@@ -0,0 +1,54 @@
+<template>
+  <PlusModal
+    :props="modalProps"
+    :closable="false"
+    @on-close="handlerClose"
+    width="500px"
+  >
+    <div class="i-flex-wrap justify-center align-center" style="height: 200px">
+      <i-circle :strokeColor="'var(--primary-color)'" :percent="percent">
+        <p class="sub-text">正在导出...</p>
+        <p
+          class="primary-title"
+          style="margin-top: 6px; color: var(--primary-color)"
+        >
+          {{ percent }}%
+        </p>
+      </i-circle>
+    </div>
+    <div slot="footer"></div>
+  </PlusModal>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      modalProps: {
+        show: false
+      },
+      percent: 0
+    }
+  },
+  methods: {
+    updatePercent(value) {
+      this.percent = Number(value)
+      if (this.percent >= 100) {
+        setTimeout(() => {
+          this.handlerClose()
+        }, 800)
+      }
+    },
+    handlerClose() {
+      this.modalProps.show = false
+      this.$emit('on-close')
+    },
+    show() {
+      this.percent = 0
+      this.modalProps.show = true
+    },
+    hide() {}
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

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

@@ -0,0 +1,584 @@
+/* eslint-disable */
+<template>
+  <div
+    ref="plusTableInnerRef"
+    :class="['plus-table-wrap', fixedHeader ? 'fixed-header' : '']"
+  >
+    <div
+      ref="searchAreaRef"
+      :class="[inlineForm && 'i-flex-wrap nowrap inline-wrap', 'p-search-area']"
+      v-if="showSearchArea"
+    >
+      <div :class="[inlineForm && 'f-grow']">
+        <PlusForm>
+          <Form :inline="inlineForm" :label-width="parseFloat(formLabelWidth)">
+            <slot name="searchArea"></slot>
+            <div
+              v-if="showButtonArea"
+              class="btn-area f-no-shrink i-flex-wrap f-grow"
+            >
+              <Button v-if="showSeachButton" type="primary" @click="onSearch">
+                搜索
+              </Button>
+              <Button v-if="showResetButton" type="default" @click="onReset">
+                重置
+              </Button>
+              <div class="operation-area f-grow f-row justify-end">
+                <slot name="operation"> </slot>
+              </div>
+            </div>
+          </Form>
+        </PlusForm>
+      </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
+    },
+    formLabelWidth: {
+      type: [Number, String],
+      default: 100
+    },
+    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;
+    &.inline-wrap {
+      padding-bottom: 0px;
+    }
+    /deep/.plus-form-wrap {
+      .ivu-form-item {
+        margin-bottom: 16px;
+        margin-right: 44px;
+      }
+    }
+  }
+  .btn-area {
+    // margin-top: auto;
+    button {
+      margin-left: 8px;
+      height: 32px;
+      &: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/extentionPlugin/date.js

@@ -17,6 +17,7 @@ const install = (vue, opts = {}) => {
   vue.prototype.$addYears = addYears
   vue.prototype.$getDateFromString = getDateFromString
   vue.prototype.$formatterDateString = formatterDateString
+  vue.prototype.$dealDate = dealDate
   vue.prototype.$dateDiff = dateDiff
   vue.prototype.$beautyWeekDay = beautyWeekDay
   Date.prototype.addDays = function (days) {
@@ -34,6 +35,18 @@ const install = (vue, opts = {}) => {
   }
 }
 
+function dealDate(fromtime) {
+  const myDate = new Date(fromtime)
+  const year = myDate.getFullYear() // 获取完整的年份(4位,1970-????)
+  let month = myDate.getMonth() // 获取当前月份(0-11,0代表1月)         // 所以获取当前月份是myDate.getMonth()+1;
+  let date = myDate.getDate() // 获取当前日(1-31)
+  month = prefixZero(month + 1)
+  date = prefixZero(date)
+  return `${year}-${month}-${(date)}`
+}
+const prefixZero = (num) => {
+  return (Array(2).join(0) + num).slice(-2)
+}
 function formatterDateString(dateStr, fmt = 'yyyy-MM-dd') {
   if (!dateStr) {
     return '--'

package/src/extentionPlugin/object.js

@@ -43,6 +43,7 @@ const install = (vue, opts = {}) => {
     })
     return result
   }
+  vue.prototype.$isEqual = isEqual
 }
 
 function convertNumberToString(obj) {
@@ -57,6 +58,30 @@ function convertNumberToString(obj) {
   })
   return obj
 }
+function isEqual(obj1, obj2) {
+  // 判断类型是否相等
+  if (typeof obj1 !== typeof obj2) {
+    return false
+  }
+  // 如果是基本类型直接比较值
+  if (typeof obj1 !== 'object' || obj1 === null || obj2 === null) {
+    return obj1 === obj2
+  }
+  // 获取两个对象的属性名数组
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+  // 属性数量不相等，返回false
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+  // 比较每个属性的值
+  for (let key of keys1) {
+    if (!isEqual(obj1[key], obj2[key])) {
+      return false
+    }
+  }
+  return true
+}
 function objValueFromArr(arr, key) {
   let tempValues = []
   arr.forEach(item => {

package/src/extentionPlugin/view.js

@@ -23,9 +23,19 @@ const install = (vue, opts = {}) => {
       vComp.$el.parentNode.removeChild(vComp.$el)
     }
   }
-  vue.prototype.$getComponentInstance = (component) => {
+  vue.prototype.$getComponentInstance = (component, options) => {
+    const defaultConfig = {
+      props: {}
+    }
+    const { props } = Object.assign(Object.assign({}, defaultConfig), options)
     const ComponentClass = Vue.extend(component)
-    const instance = new ComponentClass({ store: opts.store })
+    const instance = new ComponentClass({
+      store: opts.store,
+      props,
+      propsData: {
+        props: props
+      }
+    })
     instance.$mount()
     document.body.appendChild(instance.$el)
     return instance