shijiplus-web-plugin 0.1.10 → 0.1.12

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="plus-select-wrap">
+    <Select
+      ref="select"
+      v-model="mValue"
+      label-in-value
+      :disabled="disabled"
+      :placeholder="placeholder"
+      @on-change="valueChange"
+    >
+      <Option v-if="allOption" :value="-1">全部</Option>
+      <slot>
+        <Option
+          v-for="(option, index) in mOptions"
+          :key="index"
+          :value="option.value"
+          :label="option.label"
+        />
+      </slot>
+    </Select>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PlusSelect',
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    modelValue: {
+      type: [Number, String, Array]
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    allOption: {
+      default: true
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKeys: {
+      type: [String, Array],
+      default: 'label'
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    options: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  watch: {
+    modelValue: {
+      handler(val) {
+        if (!val) {
+          this.mValue = -1
+        } else {
+          this.mValue = val
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  data() {
+    return {
+      mValue: null
+    }
+  },
+  computed: {
+    mOptions() {
+      return this.options.map((item) => {
+        let label = ''
+        let value = item[this.valueKey]
+        if (this.labelKeys) {
+          let tempKeys = this.labelKeys
+          if (typeof tempKeys == 'string') {
+            tempKeys = this.labelKeys.split(',')
+          }
+          tempKeys.forEach((lKey) => {
+            label += item[lKey]
+          })
+        }
+        return { label, value }
+      })
+    }
+  },
+  methods: {
+    valueChange(e) {
+      if (e) {
+        if (e.value == -1) {
+          this.$emit('change', null)
+          this.$emit('change-option', {})
+        } else {
+          this.$emit('change', e.value)
+          this.$emit('change-option', { ...e })
+        }
+      } else {
+        this.$emit('change', null)
+        this.$emit('change-option', {})
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-select-wrap {
+  position: relative;
+}
+</style>

package/src/components/plus-comp/plus-table/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/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>