lshcomment 1.0.0

package/src/components/el/Select.vue

@@ -0,0 +1,217 @@
+<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="optionLabel ? item[optionLabel] : item"
+      :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, // 是否可全选
+      selectAllLable: { type: String, default: '全部' }, // 全选的label
+      selectAllValue: { type: String, default: '' }, // 全选的value
+      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
+        if(this.selectValue.length && !this.selectOptions.length){
+          this.resetData()
+          this.getData()
+        }
+      },
+      options: function (val, oldVal) {
+        this.selectOptions = []
+        this.$nextTick(() => {
+          this.selectOptions = JSON.parse(JSON.stringify(val))
+          this.unshiftAll()
+        });
+      },
+    },
+    computed: {
+      placeholderComputed() {
+        if(this.placeholder != '请选择') return this.placeholder
+        let str = this.placeholder
+        if(this.remote) str = '请输入关键词'
+        if(this.multiple) str += '（可多选）'
+        return str
+      },
+    },
+    mounted() {
+      this.resetData()
+    },
+    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.length === 1 && value[0] === this.selectAllValue) {
+            this.$emit('input', value)
+            this.$emit('change', value)
+            return
+          } else if(value.length === 2 && value[0] === this.selectAllValue) {
+            value.splice(0, 1)
+          } else if(value.includes(this.selectAllValue) || value.length == this.selectOptions.length - 1) {
+            value = [this.selectAllValue]
+          } else {
+            this.$emit('change', value)
+          }
+        } else {
+          this.$emit('change', value)
+        }
+        this.$emit('input', 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)
+            // 全选交互
+            if(this.multiple && this.selectAllable){
+              if(this.selectValue.includes(this.selectAllValue) || this.selectValue.length == this.selectOptions.length - 1) {
+                this.selectValue = [this.selectAllValue]
+              }
+            }
+            this.$emit('getData', this.selectOptions)
+          })
+        }
+      },
+      // 重置数据
+      resetData(){
+        this.firstGetData = true
+        this.selectValue = this.value
+        this.selectOptions = JSON.parse(JSON.stringify(this.options))
+        this.unshiftAll()
+        this.queryParams[this.pageKey[0]] = this.pageStart
+        this.queryParams[this.pageKey[1]] = this.pageNums
+      },
+      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) {
+        this.$emit('visible-change', 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]
+            })
+          }
+        }
+      },
+      // 添加全部选项
+      unshiftAll() {
+        if(this.multiple && this.selectAllable && (!this.selectOptions[0] || this.selectOptions[0][this.optionValue] != this.selectAllValue)) {
+          this.selectOptions.unshift({[this.optionLabel]: this.selectAllLable, [this.optionValue]: this.selectAllValue})
+        }
+      },
+      // 获取选中项
+      getSelect(){
+        if(this.multiple){
+          return this.selectOptions.filter(item => this.selectValue.includes(item[this.optionValue]))
+        } else {
+          let obj = {}
+          if(this.selectValue && this.selectOptions.length){
+            obj = this.selectOptions.filter(item => item[this.optionValue] == this.selectValue)[0] || {}
+          }
+          return obj
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .el-select{display:block;width:auto;}
+</style>

package/src/components/el/Table.vue

@@ -0,0 +1,127 @@
+<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" @row-click="handleRowClick">
+      <el-table-column v-if="radio" label="单选" fixed width="65" align="center">
+        <template slot-scope="{ row }">
+          <el-radio style="margin:0" v-model="radioValue" :label="row" @click.native.prevent.stop="radioClick(row)">&nbsp;</el-radio>
+        </template>
+      </el-table-column>
+      <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']) }, // 分页参数
+      radio: { type: Boolean, default: false },  // 是否显示单选
+      selectable: { type: [Boolean,Function], default: false }, // 控制是否可选
+    },
+    data() {
+      return {
+        list: [],
+        pageTotal: 0,
+        currentRow: null,
+        multipleSelection: [],
+        radioValue: null,
+      };
+    },
+    watch: {
+      data: {
+        handler(val) {
+          this.list = val
+          this.radioValue = null
+        },
+        deep: true
+      },
+      total: {
+        handler(val) {
+          this.pageTotal = val
+        },
+        deep: true
+      },
+    },
+    mounted() {
+      if(this.data && this.data.length){
+        this.list = this.data
+      }
+      if(!this.ifPage && this.isStartGetData && this.api){
+        this.getData({})
+      }
+    },
+    methods: {
+      // 获取数据
+      getData(page){
+        this.$nextTick(() => {
+          if(!this.api) return
+          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
+            }
+            this.radioValue = null
+          })
+        });
+      },
+      // 从默认第一页开始获取数据
+      resetData(pageStart = 1, pageNums){
+        if(this.ifPage) {
+          this.$refs.ElePage.change(pageStart, pageNums)
+        } 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)
+      },
+      // 当某一行被点击时会触发该事件
+      handleRowClick(row, event, column){
+        if(this.selectable && !this.selectable(row)) return
+        this.$refs.table.toggleRowSelection(row)
+        if(this.radio){
+          this.radioClick(row)
+        }
+      },
+      // 单选点击
+      radioClick(row){
+        this.radioValue = this.radioValue === row ? null : row
+      },
+    }
+  };
+</script>

package/src/components/el/Upload.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="f-ib f-maw1">
+    <span v-if="uploadDialogFlag">
+      <el-button :size="size" :type="type" :class="btnClass" :style="btnStyle" @click="$refs.EleDialog.visible = true">{{ text }}</el-button>
+    </span>
+    <el-upload
+      v-else
+      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>
+
+    <EleDialog title="导入" ref="EleDialog" showFooter customFooter>
+      请按照导入模板的规范，使用excel表格导入。
+      <div slot="footer">
+        <el-button v-if="uploadDialogImportRelationCode" :size="size" :class="btnClass" :style="btnStyle" @click.stop="global.getFileList(uploadDialogImportRelationCode,'download')">导入模板下载</el-button>
+        <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">立即导入</el-button>
+        </el-upload>
+      </div>
+    </EleDialog>
+  </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
+      uploadDialogFlag: { type: Boolean, default: false }, // 上传按钮点击弹框显示
+      uploadDialogImportRelationCode: { type: String, default: '' }, // 导入模板的relationCode
+    },
+    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);
+							}
+              if([res.data.errorcode,res.data.errorCode].includes("importBasisDistribuRelations")){
+                this.$emit('importsClosure', obj[0]);
+                if(this.uploadDialogFlag) this.$refs.EleDialog.visible = false
+                if(status == '3'){
+                  this.downloadErrorInfo = {
+										downloadErrorUrl: obj[0].errorFilePath,
+										downloadErrorFileName: obj[0].errorFileName
+									};
+                }
+                return
+              }
+
+							switch (status) {
+								case "2":
+                  this.$emit('importsClosure', obj[0]);
+									this.$message({
+										message: "导入完成",
+										type: "success"
+									});
+                  if(this.uploadDialogFlag) this.$refs.EleDialog.visible = false
+									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>

package/src/components/footer/Footer.vue

@@ -0,0 +1,18 @@
+<template>
+  <footer class="app-footer" v-html="footTitle"></footer>
+</template>
+<script>
+export default {
+  // name: 'footer'
+  mounted() {
+    let _this = this
+    _this.$data.footTitle = window.footTitle;
+  },
+  data: function() {
+    return {
+      footTitle: ''
+    }
+  },
+
+}
+</script>