n20-common-lib 1.1.10

package/src/components/Sifting/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <cl-dialog
+    class="p-t-0 p-b-0"
+    :title="title"
+    :width="50"
+    :dialog-visible="dialogVisible"
+    :before-close="beforeClose"
+  >
+    <div class="cl-sifting-box">
+      <div class="cl-sifting-left">
+        <!--top-->
+        <div class="cl-sifting-left-top">
+          <div class="cl-sifting-left-top-left">
+            <span class="cl-sifting-left-top-title">{{ title }}</span>
+            <span class="cl-sifting-opt-text">已选 </span>
+            <span class="cl-sifting-opt">4</span>
+          </div>
+          <span class="cl-sifting-opt cl-sifting-cursor" @click="handleCheckAll"
+            >全部选中</span
+          >
+        </div>
+        <!--end-->
+        <!--content-->
+        <div v-for="item in list" :key="item.title">
+          <span class="cl-sifting-group-title">{{ item.title }}</span>
+          <el-checkbox-group
+            v-model="checkedCities"
+            @change="handleCheckedCitiesChange"
+          >
+            <el-checkbox
+              v-for="(city, index) in item.children"
+              :key="index"
+              class="el-checkbox-class"
+              :label="city.name"
+              >{{ city.name }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </div>
+        <!--end-->
+      </div>
+      <div class="cl-sifting-right">
+        <cl-drag-list :list="checkedCities" />
+      </div>
+    </div>
+    <div slot="footerBtn" class="cl-sifting-footer">
+      <el-button @click="beforeClose">取消</el-button>
+      <el-button type="primary" @click="handlAffirm">确认</el-button>
+    </div>
+  </cl-dialog>
+</template>
+
+<script>
+export default {
+  name: 'Sifting',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    beforeClose: {
+      type: Function,
+      default: () => {}
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      checkedCities: []
+    }
+  },
+  methods: {
+    handleCheckAll() {
+      this.checkedCities = this.list
+        .map((c) => c.children)
+        .flat()
+        .map((r) => r.name)
+      console.log(this.checkedCities)
+    },
+    handlAffirm() {
+      this.$emit('Affirm', this.checkedCities)
+    },
+    handleCheckedCitiesChange(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/Statis/index.vue

@@ -0,0 +1,55 @@
+/**
+* author: zhengwei
+* time: 2021-9-1
+*/
+<template>
+  <div class="cl-statis">
+    <div class="cl-statis-left">
+      当页合计 <span class="cl-statis-division">|</span> 笔数：<span
+        class="primary"
+        >{{ pageSum }}</span
+      >
+      金额：<span class="primary">{{ pageAmount | numerify('0,0.00') }}元</span>
+    </div>
+    <div class="footer-item">
+      全部合计 <span class="cl-statis-division">|</span> 笔数：<span
+        class="primary"
+        >{{ totalSun }}</span
+      >
+      金额：<span class="primary"
+        >{{ totalAmount | numerify('0,0.00') }}元</span
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import numerify from 'numerify'
+export default {
+  name: 'Statis',
+
+  filters: {
+    numerify(v, f) {
+      return numerify(v, f)
+    }
+  },
+  props: {
+    pageSum: {
+      type: Number,
+      default: 0
+    },
+    pageAmount: {
+      type: Number,
+      default: 0
+    },
+    totalSun: {
+      type: Number,
+      default: 0
+    },
+    totalAmount: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>

package/src/components/Step/index.vue

@@ -0,0 +1,65 @@
+/**
+* author: zhengwei
+* time: 2021-8-30
+*/
+<template>
+  <div class="cl-step">
+    <div :class="direction === 'horizontal' ? 'step-box' : 'cl-step-vertical'">
+      <div v-for="(item, index) of dataSource" :key="index" class="item">
+        <div
+          :class="action === index + 1 ? 'step-item-checked' : 'step-item-top'"
+        >
+          <span class="step-num" @click="handler(index, item)">{{
+            index + 1
+          }}</span>
+          <div
+            v-if="index !== dataSource.length - 1"
+            class="line"
+            :class="action === index + 1 ? 'cur' : ''"
+          ></div>
+        </div>
+        <div class="name" :class="action === index + 1 ? 'cur1' : ''">
+          {{ item.name }}
+        </div>
+        <div v-if="item.time" class="time">{{ item.time }}</div>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Step',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    active: {
+      type: Number,
+      default: 1
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      action: 1
+    }
+  },
+  computed: {},
+  watch: {},
+  mounted() {
+    this.action = this.active
+  },
+  methods: {
+    handler(i, val) {
+      this.action = i + 1
+      this.$emit('click', i, val)
+    }
+  }
+}
+</script>

package/src/components/Suspend/index.vue

@@ -0,0 +1,63 @@
+/**
+ * author: zhengwei
+ * time: 2021-8-30
+ */
+<template>
+  <div
+    v-title="text"
+    v-move="moveFn"
+    class="cl-suspend"
+    :style="{ top: topAs }"
+    @click="(ev) => $emit('click', ev)"
+  >
+    <img src="./suspensionBtn.png" />
+    <span class="cl-suspend-text">
+      <slot></slot>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Suspend',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    top: {
+      type: Number,
+      default: 15
+    },
+    icon: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      winH: 1080,
+      moveY: 0
+    }
+  },
+  computed: {
+    topAs() {
+      return this.top * this.winH * 0.01 + this.moveY + 'px'
+    }
+  },
+  mounted() {
+    this.resizeFn()
+    window.addEventListener('resize', this.resizeFn)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeFn)
+  },
+  methods: {
+    resizeFn() {
+      this.winH = document.documentElement.clientHeight
+    },
+    moveFn(ev) {
+      this.moveY = this.moveY + ev.pageYc
+    }
+  }
+}
+</script>

package/src/components/TertiaryTab/index.vue

@@ -0,0 +1,49 @@
+/**
+* author: zhengwei
+* time: 2021-9-1
+*/
+<template>
+  <ul class="cl-tertiary-tab">
+    <li
+      v-for="item in data"
+      :key="item.id"
+      class="cl-tertiary-tab-item"
+      :class="{ action: current === item.name }"
+      @click="handleClick(item)"
+    >
+      <div>{{ item.name }}</div>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'TertiaryTab',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    init: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      current: ''
+    }
+  },
+  mounted() {
+    if (this.init) {
+      this.current = this.init
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.current = item.name
+      this.$emit('click', item)
+    }
+  }
+}
+</script>

package/src/components/TimePicker/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-time-picker
+    ref="time-picker"
+    :class="{ 'has-value': value }"
+    v-bind="$attrs"
+    :value="value"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+/* 与原生elmUI区别就是加了一个has-value */
+export default {
+  name: 'TimePicker',
+  props: {
+    // eslint-disable-next-line vue/require-prop-types
+    value: {
+      default: undefined
+    }
+  }
+}
+</script>

package/src/components/Upload/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <el-upload
+    ref="upload"
+    :action="action"
+    :headers="headers"
+    :accept="accept"
+    :multiple="false"
+    :file-list="fileList"
+    :show-file-list="false"
+    v-bind="$attrs"
+    :on-success="successFn"
+    :on-error="errorFn"
+    :on-progress="progressFn"
+    :before-upload="beforeUploadFn"
+    v-on="$listeners"
+  >
+    <template slot="trigger">
+      <slot name="trigger">
+        <el-input :value="fileNameC" :placeholder="placeholder" readonly>
+          <template slot="suffix">
+            <i
+              v-if="fileNameC && showClear"
+              class="el-input__icon upload-clear el-icon-close"
+              style="pointer-events: all"
+              @click.stop="clearFile"
+            ></i>
+            <i v-else class="el-input__icon cl-icon-shangchuan"></i>
+          </template>
+        </el-input>
+      </slot>
+    </template>
+    <template slot="tip">
+      <slot name="tip"></slot>
+    </template>
+    <el-dialog :visible.sync="progressV" title="提示">
+      <p v-if="!percentType">系统处理中，请稍等......</p>
+      <p v-else>{{ percentMsg }}</p>
+      <el-progress class="m-b" :percentage="percent" :status="percentType" />
+    </el-dialog>
+  </el-upload>
+</template>
+
+<script>
+export default {
+  name: 'Upload',
+  props: {
+    fileName: {
+      type: String,
+      default: ''
+    },
+    fileUrl: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择文件'
+    },
+    msgType: {
+      type: String,
+      default: 'dialog'
+    },
+    action: {
+      type: String,
+      default: '/bems/1.0/attach'
+    },
+    headers: {
+      type: Object,
+      default: () => ({
+        token: window.sessionStorage.getItem('token') || 'main-token'
+      })
+    },
+    size: {
+      type: [String, Number],
+      default: undefined
+    },
+    accept: {
+      type: String,
+      default: undefined
+    },
+    onRemove: {
+      type: Function,
+      default: undefined
+    },
+    onProgress: {
+      type: Function,
+      default: undefined
+    },
+    onSuccess: {
+      type: Function,
+      default: undefined
+    },
+    onError: {
+      type: Function,
+      default: undefined
+    },
+    beforeUpload: {
+      type: Function,
+      default: undefined
+    },
+    showClear: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      fileList: [],
+      percent: 0,
+      percentMsg: '',
+      progressV: false,
+      percentType: undefined
+    }
+  },
+  computed: {
+    fileNameC: {
+      get() {
+        return this.fileName
+      },
+      set(v) {
+        this.$emit('update:fileName', v)
+      }
+    },
+    fileUrlC: {
+      get() {
+        return this.fileUrl
+      },
+      set(v) {
+        this.$emit('update:fileUrl', v)
+      }
+    }
+  },
+  methods: {
+    clearFile() {
+      if (this.onRemove) {
+        this.onRemove(this.fileList[0], this.fileList)
+      } else {
+        this.fileNameC = ''
+        this.fileUrlC = ''
+        this.fileList.pop()
+        console.log('删除上传')
+      }
+    },
+    beforeUploadFn(file) {
+      let size = this.size
+      let sizeNum
+
+      if (size) {
+        if (/kb/i.test(size)) {
+          sizeNum = parseFloat(size) * 1024
+        } else if (/mb/i.test(size)) {
+          sizeNum = parseFloat(size) * 1024 * 1024
+        } else {
+          sizeNum = parseFloat(size)
+        }
+        if (file.size > sizeNum) {
+          this.$message.error('文件大小不能超过 ' + size + ' ！')
+          return false
+        }
+      }
+
+      let accept = this.accept
+      if (accept) {
+        let [ftB = '', ftA = ''] = file.type.split('/')
+        ftB = ftB + '/*'
+        ftA = file.name.match(/\.[^.]+$/)?.[0] || '.' + ftA
+        if (!(accept.includes(ftB) || accept.includes(ftA))) {
+          this.$message.error('文件格式错误 ！')
+          return false
+        }
+      }
+
+      if (this.msgType === 'dialog') {
+        this.percent = 0
+        this.percentType = undefined
+        this.progressV = true
+      }
+
+      if (this.beforeUpload) {
+        return this.beforeUpload(file)
+      } else {
+        return
+      }
+    },
+    progressFn(event, file, fileList) {
+      if (this.onProgress) {
+        this.onProgress(event, file, fileList)
+      }
+
+      if (this.msgType === 'dialog') {
+        this.percent = event.percent <= 99 ? Math.round(event.percent) : 99
+      }
+    },
+    successFn(response, file, fileList) {
+      if (this.onSuccess) {
+        this.onSuccess(response, file, fileList)
+      } else {
+        this.fileNameC = file.name
+        this.fileUrlC = response.data
+        this.fileList = [file]
+      }
+
+      if (this.msgType === 'dialog') {
+        this.percent = 100
+        this.percentType = 'success'
+        this.percentMsg = response.msg || '上传成功！'
+      } else if (this.msgType === 'message') {
+        if (!this.onSuccess) {
+          this.$message({
+            type: 'success',
+            message: response.msg,
+            showClose: true
+          })
+        }
+      }
+    },
+    errorFn(err, file, fileList) {
+      if (this.onError) {
+        this.onError(err, file, fileList)
+      }
+
+      if (this.msgType === 'dialog') {
+        this.percentType = 'exception'
+        this.percentMsg = err?.msg || '上传失败！'
+      } else if (this.msgType === 'message') {
+        if (!this.onError) {
+          this.$message({
+            type: 'error',
+            message: err?.msg || '上传失败',
+            showClose: true
+          })
+        }
+      }
+    }
+  }
+}
+</script>