lshcom 1.0.0

package/src/components/el/DatePicker.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-date-picker
+    ref="datePicker"
+    :readonly="readonly"
+    :disabled="disabled"
+    :editable="editable"
+    :clearable="clearable"
+    :size="size"
+    v-model="date"
+    :type="type"
+    :placeholder="placeholder"
+    :format="format"
+    :align="align"
+    :picker-options="pickerOptions"
+    :range-separator="rangeSeparator"
+    :default-value="defaultValue"
+    @change="change">
+  </el-date-picker>
+</template>
+
+<script>
+  export default {
+    props:{
+      readonly: { type: Boolean, default: false }, // 完全只读
+      value: [String, Number, Array, Date], // 双向绑定，父组件选中的值
+      placeholder: { type: String, default: '请选择日期' }, // 占位符
+      type: { type: String, default: 'date' }, // 显示类型  year/month/date/week/datetime/datetimerange/daterange
+      disabled: { type: Boolean, default: false },  // 是否禁用
+      editable: { type: Boolean, default: false }, // 文本框可输入
+      clearable: { type: Boolean, default: true }, // 是否可以清空选项
+      size: {type: String, default: ''}, // 输入框尺寸 large/small/mini
+      format: {type: String, default: 'yyyy-MM-dd'}, // 时间日期格式化	  年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss
+      align: {type: String, default: 'left'}, // 对齐方式 left/center/right
+      rangeSeparator: {type: String, default: ' - '}, // 选择范围时的分隔符
+      defaultValue: [String, Number, Array, Date], // 可选，DatePicker打开时默认显示的时间，可被new Date()解析
+      maxDate: {type: Number, default: 0}, // 可选，设置最大可选时间（天数）
+      valueFormat: {type: String, default: ''}, // 可选，绑定值的格式。不指定则绑定值为 Date 对象
+    },
+    data() {
+      return {
+        date: '',
+        pickerMinDate: '',
+        pickerOptions: {
+          disabledDate: (time) => {
+            if (this.maxDate){
+              if (this.pickerMinDate !== '') {
+                let maxTime = this.pickerMinDate + this.maxDate * 3600000 * 24
+                if (maxTime > new Date()) {
+                  maxTime = new Date()
+                }
+                return time.getTime() > maxTime
+              }
+              return time.getTime() > Date.now()
+            }
+          },
+          onPick: ({ maxDate, minDate }) => {
+            if (this.maxDate){
+              this.pickerMinDate = minDate.getTime()
+              if (maxDate) {
+                this.pickerMinDate = ''
+              }
+            }
+          },
+        },
+      };
+    },
+    watch: {
+      value: function (val, oldVal) {
+        if(['daterange'].includes(this.type)){
+          if (!val || !val.length) {
+            this.change()
+          } else if(val[0] !== this.date[0] || val[1] !== this.date[1]){
+            this.change(val[0] + this.rangeSeparator + val[1])
+          }
+        } else {
+          this.date = val
+        }
+      },
+    },
+    mounted() {
+      this.date = this.value
+    },
+    methods: {
+      change(value){
+        if(['daterange'].includes(this.type)){
+          if (!value) {
+            value = [undefined, undefined]
+          } else {
+            let valueArr = value.split(this.rangeSeparator)
+            if(this.valueFormat){
+              value = [
+                valueArr[0] ? new Date(valueArr[0]).Format(this.valueFormat) : undefined,
+                valueArr[1] ? new Date(valueArr[1]).Format(this.valueFormat) : undefined,
+              ]
+            }else{
+              value = [
+                valueArr[0] ? new Date(valueArr[0]).Format('yyyy-MM-dd') + ' 00:00:00' : undefined,
+                valueArr[1] ? new Date(valueArr[1]).Format('yyyy-MM-dd') + ' 23:59:59' : undefined,
+              ]
+            }
+          }
+        } else if(['date'].includes(this.type)){
+          if(this.valueFormat && value){
+            value = new Date(value).Format(this.valueFormat)
+          }
+        }
+        this.date = value
+        this.$emit('input', value)
+        this.$emit('change', value)
+      },
+    }
+  };
+</script>

package/src/components/el/Dialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-dialog
+    :title="title"
+    ref="dialog"
+    :visible.sync="visible"
+    :size="size"
+    :top="top"
+    :modal="modal"
+    :modal-append-to-body="modalAppendToBody"
+    :before-close="handleClose">
+    <template v-if="customTitle" slot="title">
+      <slot name="title"></slot>
+    </template>
+    <slot v-if="visible"></slot>
+    <span v-if="showFooter" slot="footer" class="dialog-footer">
+      <slot v-if="customFooter" name="footer"></slot>
+      <div v-else>
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" @click="$emit('confirm')">确 定</el-button>
+      </div>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    props:{
+      title: {type: String, default: '提示'}, // Dialog 的标题
+      customTitle: Boolean, // 是否使用自定义标题
+      beforeClose: Boolean, // 关闭前的回调，会暂停 Dialog 的关闭
+      show: Boolean, // 是否默认显示
+      showFooter: Boolean, // 是否显示底部按钮
+      customFooter: Boolean, // 是否使用自定义底部按钮
+      size: {type: String, default: 'small'}, // tiny/small/large/full
+      top: {type: String,default: '15%'}, // Dialog CSS 中的 top 值（仅在 size 不为 full 时有效）
+      modal: {type: Boolean, default: true}, // 是否需要遮罩层
+      modalAppendToBody: {type: Boolean, default: true}, // 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
+    },
+    data() {
+      return {
+        visible: false
+      };
+    },
+    mounted(){
+      this.visible = this.show;
+    },
+    methods: {
+      close(){
+        this.$refs.dialog.handleClose()
+      },
+      handleClose(done) {
+        if(this.beforeClose){
+          this.$confirm('确认关闭？')
+          .then(_ => {
+            this.$emit('close')
+            done();
+          })
+          .catch(_ => {});
+        } else {
+          this.$emit('close')
+          done()
+        }
+      }
+    }
+  };
+</script>

package/src/components/el/Page.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-pagination
+    class="f-tar f-mt10"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+    :current-page="currentPage"
+    :page-sizes="pageSizes"
+    :page-size="pageSize"
+    :layout="layout"
+    :total="total">
+  </el-pagination>
+</template>
+
+<script>
+  export default {
+    props:{
+      pageStart: { type: Number, default: 1 }, // 当前页数
+      pageNums: { type: Number, default: 10 }, // 每页显示条目个数
+      total: { type: Number, default: 0 }, // 总条目数
+      layout: {type: String, default: 'total, sizes, prev, pager, next, jumper'}, // 组件布局，子组件名用逗号分隔
+      pageSizes: {type: Array, default: () => [10, 20, 50, 100]}, // 每页显示个数选择器的选项设置
+      isStartGetData: { type: Boolean, default: true }, // 是否开始加载数据
+    },
+    data() {
+      return {
+        currentPage: 1,
+        pageSize: 10,
+      };
+    },
+    mounted() {
+      this.currentPage = this.pageStart
+      this.pageSize = this.pageNums
+      if (this.isStartGetData){
+        this.change()
+      }
+    },
+    methods: {
+      handleSizeChange(val) {
+        this.pageSize = val
+        this.change()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        this.change()
+      },
+      change(){
+        this.$emit('change', {
+          pageStart: this.currentPage,
+          pageNums: this.pageSize
+        })
+      },
+      reset(){
+        this.currentPage = this.pageStart
+        this.pageSize = this.pageNums
+      },
+      resetCurrent(currentPage){
+        if (this.currentPage != currentPage) {
+          this.currentPage = currentPage
+        } else {
+          this.change()
+        }
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-pagination__sizes{width: 100px !important}
+</style>

package/src/components/el/Select.vue

@@ -0,0 +1,173 @@
+<template>
+  <el-select 
+    ref="select"
+    v-model="selectValue" 
+    :placeholder="placeholderComputed" 
+    :multiple="multiple" 
+    :collapse-tags="collapseTags"
+    :disabled="disabled" 
+    :clearable="clearable" 
+    :filterable="filterable" 
+    :value-key="valueKey" 
+    @change="change"
+    @remove-tag="removeTag"
+    @clear="clear"
+    @visible-change="visibleChange"
+    v-select-loadmore="loadmore"
+    :remote="remote"
+    :remote-method="remote ? remoteMethod : null"
+  >
+    <el-option
+      v-for="(item,index) in selectOptions"
+      :key="item.id || index"
+      :label="item[optionLabel]"
+      :value="optionValue ? item[optionValue] : item"
+      :disabled="item.disabled">
+      <slot :item="item"></slot>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    props:{
+      options: {type: Array, default: ()=>{return []}}, // 选项
+      value: [String, Number, Array], // 双向绑定，父组件选中的值
+      placeholder: { type: String, default: '请选择' }, // 占位符
+      multiple: { type: Boolean, default: false },  // 是否多选
+      selectAllable: Boolean, // 是否可全选
+      collapseTags: { type: Boolean, default: false }, // 多选时是否将选中值按文字的形式展示
+      disabled: { type: Boolean, default: false },  // 是否禁用
+      clearable: { type: Boolean, default: true }, // 是否可以清空选项
+      filterable: { type: Boolean, default: true },  // 是否可搜索
+      size: {type: String, default: 'small'}, // 输入框尺寸 large/small/mini
+      optionLabel: {type: String, default: 'label',}, // 选项的label
+      optionValue: {type: String, default: 'value',}, // 选项的value
+      valueKey: {type: String, default: 'value',},  // 作为 value 唯一标识的键名，绑定值为对象类型时必填
+      remote: Boolean, // 是否远程搜索
+      api: { type: String, default: '' }, // 接口地址
+      query: { type: Object, default: () => ({}) }, // 接口参数
+      pageKey: { type: Array, default: () => (['pageStart', 'pageNums']) }, // 分页key
+      pageStart: { type: Number, default: 1 }, // 当前页数
+      pageNums: { type: Number, default: 10 }, // 每页显示条目个数
+      queryKey: { type: String, default: 'name' }, // 搜索关键字key
+    },
+    data() {
+      return {
+        selectValue: this.multiple ? [] : '',
+        selectOptions: [],
+        firstGetData: true,
+        queryParams: {},
+        nomore: false,
+        multipleChangeFlag: false,
+      };
+    },
+    watch: {
+      value: function (val, oldVal) {
+        this.selectValue = val
+      },
+      options: function (val, oldVal) {
+        this.selectOptions = val
+      },
+    },
+    computed: {
+      placeholderComputed() {
+        if(this.placeholder != '请选择') return this.placeholder
+        let str = this.placeholder
+        if(this.remote) str = '请输入关键词'
+        if(this.multiple) str += '（可多选）'
+        return str
+      },
+    },
+    mounted() {
+      this.selectValue = this.value
+      this.selectOptions = this.options
+      this.queryParams[this.pageKey[0]] = this.pageStart
+      this.queryParams[this.pageKey[1]] = this.pageNums
+    },
+    methods: {
+      change(value){
+        if(this.remote && this.multiple) {
+          this.multipleChangeFlag = true
+          this.$nextTick(() => {
+            this.$refs.select.query = this.queryParams[this.queryKey]
+            this.$refs.select.previousQuery = this.queryParams[this.queryKey]
+          });
+        }
+        if(this.multiple && this.selectAllable){
+          if(value.includes(this.selectOptions[0][this.optionValue])) {
+            if(value.length > 1){
+              value = [this.selectOptions[0][this.optionValue]]
+            }
+            this.selectOptions.map(item => item.disabled = true)
+            this.selectOptions[0].disabled = false
+          } else {
+            this.selectOptions.map(item => item.disabled = false)
+          }
+          this.selectOptions = JSON.parse(JSON.stringify(this.selectOptions))
+        }
+        this.$emit('input', value)
+        this.$emit('change', value)
+      },
+      removeTag(value){
+        this.$emit('remove-tag', value)
+      },
+      clear(){
+        this.$emit('change', this.multiple ? [] : '')
+        this.$emit('clear')
+      },
+      getData(){
+        if(this.api) {
+          this.nomore = false
+          this.global.post(this.api, {
+            ...this.query,
+            ...this.queryParams,
+          }, obj => {
+            this.firstGetData = false
+            if (obj.list.length < this.pageNums) this.nomore = true
+            this.selectOptions = this.selectOptions.concat(obj.list)
+            this.$emit('getData', this.selectOptions)
+          })
+        }
+      },
+      loadmore(){
+        if (!this.remote) return;
+        if (this.nomore) return;
+        this.queryParams[this.pageKey[0]]++;
+        this.getData();
+      },
+      // 远程搜索
+      remoteMethod(query) {
+        if(this.multiple && this.multipleChangeFlag) {
+          this.multipleChangeFlag = false
+          return
+        }
+        this.selectOptions = [];
+        this.queryParams[this.pageKey[0]] = this.pageStart;
+        this.queryParams[this.queryKey] = query;
+        this.getData();
+      },
+      // 下拉框出现时，第一次获取数据
+      visibleChange(val) {
+        if (val && this.api) {
+          if (this.firstGetData) this.getData();
+          // 远程搜索把搜索值附上
+          if(this.remote){
+            this.$nextTick(() => {
+              if(this.multiple) {
+                this.$refs.select.query = this.queryParams[this.queryKey]
+              } else {
+                this.$refs.select.selectedLabel = this.queryParams[this.queryKey]
+              }
+              this.$refs.select.previousQuery = this.queryParams[this.queryKey]
+            })
+          }
+        }
+      }
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .el-select{display:block;width:auto;}
+</style>

package/src/components/el/Table.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <el-table ref="table" :data="list" :stripe="stripe" :border="border" :max-height="maxHeight" :highlight-current-row="highlightCurrentRow" @current-change="handleCurrentChange" :row-class-name="rowClassName" @selection-change="handleSelectionChange">
+      <slot></slot>
+    </el-table>
+    <ElePage v-if="ifPage" ref="ElePage" :isStartGetData="isStartGetData" :total="pageTotal" @change="getData"></ElePage>
+  </div>
+</template>
+
+<script>
+  export default {
+    props:{
+      border: { type: Boolean, default: true },  // 是否带有纵向边框
+      data: { type: Array, default: () => ([]) }, // 表格数据
+      total: { type: Number, default: 0 }, // 数据总数
+      api: { type: String, default: '' }, // 接口地址
+      query: { type: Object, default: () => ({}) }, // 接口参数
+      ifPage: { type: Boolean, default: true }, // 是否分页
+      maxHeight: [String, Number], // Table 的最大高度
+      stripe: { type: Boolean, default: true }, // 是否为斑马纹 table
+      highlightCurrentRow: { type: Boolean, default: false }, // 是否要高亮当前行，可实现单选
+      rowClassName: { type: Function, default: () => '' }, // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className
+      isStartGetData: { type: Boolean, default: true }, // 是否开始就获取数据
+      pageKey: { type: Array, default: () => (['pageStart', 'pageNums']) }, // 分页参数
+    },
+    data() {
+      return {
+        list: [],
+        pageTotal: 0,
+        currentRow: null,
+        multipleSelection: [],
+      };
+    },
+    watch: {
+      data: {
+        handler(val) {
+          this.list = val
+        },
+        deep: true
+      }
+    },
+    mounted() {
+      this.pageTotal = this.total
+      if(this.data && this.data.length){
+        this.list = this.data
+      }
+      if(!this.ifPage && this.isStartGetData && this.api){
+        this.getData({})
+      }
+    },
+    methods: {
+      // 获取数据
+      getData(page){
+        this.$nextTick(() => {
+          this.global.post(this.api, {
+            ...this.query,
+            [this.pageKey[0]]: page.pageStart,
+            [this.pageKey[1]]: page.pageNums,
+          }, obj => {
+            if(!this.ifPage){
+              this.list = obj
+            } else {
+              this.list = obj.list || [obj]
+              this.pageTotal = obj.total
+            }
+          })
+        });
+      },
+      // 从默认第一页开始获取数据
+      resetData(currentPage = 1){
+        if(this.ifPage) {
+          this.$refs.ElePage.resetCurrent(currentPage)
+        } else {
+          this.getData({})
+        }
+      },
+      setCurrent(row) {
+        this.$refs.table.setCurrentRow(row);
+      },
+      handleCurrentChange(val) {
+        this.currentRow = val;
+      },
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.table.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.table.clearSelection();
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+        this.$emit('selection-change', val)
+      }
+    }
+  };
+</script>

package/src/components/el/Upload.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="f-ib f-maw1">
+    <el-upload
+      class="f-ib f-maw1"
+      ref="upload"
+      :action="global.uploadUrl"
+      :data="params"
+      :accept="accept"
+      :show-file-list="showFileList"
+      :auto-upload="autoUpload"
+      :before-upload="beforeUpload"
+      :on-success ='onSuccess'
+      :on-preview="onPreview"
+      :on-remove="onRemove"
+      :file-list="fileList">
+      <el-button :size="size" :type="type" :class="btnClass" :style="btnStyle">{{ text }}</el-button>
+    </el-upload>
+    <el-button v-if="importRelationCode && importFlag" :type="importType" :size="size" :class="btnClass" :style="btnStyle" @click.stop="global.getFileList(importRelationCode,'download')">{{ importText }}</el-button>
+    <el-button v-if="abnormal" type="danger" :disabled="!downloadErrorInfo.downloadErrorUrl" :size="size" :class="btnClass" @click.stop="global.open(downloadErrorInfo.downloadErrorUrl)">异常数据下载</el-button>
+    <el-button v-if="importRelationCode && !importFlag" :type="importType" :size="size" :class="btnClass" :style="btnStyle" @click.stop="global.getFileList(importRelationCode,'download')">{{ importText }}</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    props:{
+      text: { type: String, default: '点击上传' }, // 按钮文字
+      size: { type: String, default: 'small' }, // 按钮大小 large,small,mini
+      type: { type: String, default: 'primary' }, // 按钮类型 primary,success,warning,danger,info
+      data: { type: Object, required: true, default: () => ({}) }, // 可选参数, 上传时附带的额外参数  relationCode必传
+      paramMap: { type: Object, default: () => ({}) }, // 可选参数, 上传时附带的额外参数
+      accept: { type: String, default: '' }, // 可选参数, 接受上传的文件类型（thumbnail-mode 模式下此参数无效）
+      showFileList: { type: Boolean, default: true }, // 可选参数, 是否显示已上传文件列表
+      autoUpload: { type: Boolean, default: true }, // 可选参数, 是否在选取文件后立即进行上传
+      importRelationCode: { type: String, default: '' }, // 导入模板的relationCode
+      importText: { type: String, default: '导入模板' }, // 导入模板按钮文字
+      importType: { type: String, default: 'primary' }, // 导入模板类型
+      importFlag: { type: Boolean, default: true }, // 导入模板标识显示顺序
+      abnormal: { type: Boolean, default: false }, // 是否显示异常数据下载
+      btnClass: { type: String, default: '' }, // 按钮class
+      btnStyle: { type: Object, default: () => ({}) }, // 按钮style
+    },
+    data() {
+      return {
+        params:{
+          relationCode: '',
+					singleFlag: '0',
+					businessType: '',
+					createBy: this.global.userInfo.empVo.empCode,
+					updateBy: this.global.userInfo.empVo.empCode,
+					createOrgCode: this.global.userInfo.inCharegOrgVo.orgCode,
+          ...this.data
+        },
+        fileList: [],
+        downloadErrorInfo: {
+					downloadErrorUrl: '',
+				},
+      };
+    },
+    mounted() {
+      if(this.showFileList){
+        this.getFileList()
+      }
+    },
+    methods: {
+      // 获取上传的文件列表
+      async getFileList() {
+        this.fileList = await this.global.getFileList(this.data.relationCode)
+      },
+      // 上传文件之前的钩子
+      beforeUpload(file) {
+        if(!this.checkFileFormat(file)) return false
+			},
+      // 检查文件格式
+      checkFileFormat(file){
+        if(this.accept){
+          if(this.accept.indexOf(file.name.slice(file.name.lastIndexOf('.'))) > -1){
+            return true
+          } else {
+            this.$message.warning('请上传'+this.accept+'格式的文件')
+            return false
+          }
+        }
+        return true
+      },
+      // 文件上传成功时的钩子
+			onSuccess(response, file, fileList) {
+				if (response.code === "success") {
+          this.$emit('onSuccess', file, fileList);
+          if(this.abnormal){
+            this.global.post(this.global.isdev + this.global.api.collectionApi.useSelf.importFile, response.obj.map(item => {
+              return {
+                ...item,
+                refCode: this.data.relationCode,
+                paramMap: {
+                  storeCode: this.global.userInfo.userAvailableInfo.storeInfoVo.storeCode,
+                  ...this.paramMap,
+                }
+              }
+            }), obj => {
+              this.timer = setInterval(() => {
+                this.getByUserCodeAndRefCode();
+              }, 1000);
+            })
+          } else {
+            this.$message.success('上传成功')
+          }
+				}
+			},
+			// 查询导入异常
+			getByUserCodeAndRefCode() {
+				this.global.api.useSelf.getByUserCodeAndRefCode(
+					{
+						refCodes: [this.data.relationCode]
+					},
+					res => {
+						const { code, obj } = res.data;
+						if (code === "success") {
+							const { status } = obj[0];
+
+							if (status > 1) {
+								clearInterval(this.timer);
+							}
+
+							switch (status) {
+								case "2":
+                  this.$emit('importsClosure', obj[0]);
+									this.$message({
+										message: "导入完成",
+										type: "success"
+									});
+									break;
+								case "3":
+									this.downloadErrorInfo = {
+										downloadErrorUrl: obj[0].errorFilePath,
+										downloadErrorFileName: obj[0].errorFileName
+									};
+									this.$message({
+										message: "导入失败，请点击异常数据按钮下载查看失败信息",
+										type: "warning"
+									});
+									break;
+								case "4":
+									this.$message({
+										message: "处理异常，请检查上传文件，或稍后再试",
+										type: "warning"
+									});
+									break;
+							}
+						}
+					}
+				);
+			},
+      // 点击已上传的文件链接时的钩子
+      onPreview(file) {
+        if(file.filePath){
+          this.global.open(file.filePath)
+        } else {
+          this.global.open(file.response.obj[0].filePath)
+        }
+      },
+      // 文件列表移除文件时的钩子
+      onRemove(file, fileList) {
+        if(file.id){
+          this.global.api.accessory.del([file], result => {
+            if(result.data.code === 'success') {
+              this.$message.success('删除成功')
+              this.$emit('onRemove', file, fileList);
+            }
+          })
+        }
+      },
+    }
+  };
+</script>