qj-happy-common-zhongjian 1.0.27

package/src/views/uploadDialog/indexUpload.vue

@@ -0,0 +1,543 @@
+<template>
+  <el-dialog :title="title" width="1000px" :append-to-body="true" :visible.sync="diaVisible" @close="handelClose">
+    <!-- 点击上传弹出的第一个框 -->
+    <el-form class="dialog-form" v-if="!type || type == '0'">
+      <el-form-item label="上传本地图片" class="dialog-form-item">
+        <el-button type="primary" class="file-btn" @click="changeFile">添加图片</el-button>
+        <span class="el-upload__tip cor-red">只能上传{{ picType }}{{ !type || type == '0' ? '图片' : '文件' }}，且不超过{{ num || 1 }}M，最多上传{{ picLimit }}张</span>
+      </el-form-item>
+    </el-form>
+    <el-form :inline="true" class="demo-form-inline" :model="ruleForm" label-width="80px" label-position="left">
+      <el-form-item label="图片类型">
+        <el-select v-model="ruleForm.fileSort" clearable placeholder="请选择图片类型">
+          <!-- <el-option label="全部" value=""></el-option> -->
+          <el-option label="商品图片" value="FILE_GD"></el-option>
+          <el-option label="店铺图片" value="FILE_02"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="名称">
+        <el-input v-model="ruleForm.fileRemark" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getImgListData">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row>
+      <el-col :span="2" class="folder">
+        <div @click="clickFolder('', -1)" :class="indexIn == 0 ? 'c-theme' : 'color-gary'">
+          <i class="icon iconfont icon-wenjianjia"></i>
+          <p class="overtext">全部</p>
+        </div>
+      </el-col>
+      <el-col :span="2" v-for="(item, i) in folderList" :key="i" class="folder">
+        <div @click="clickFolder(item.fileCode, i)" :class="indexIn === i + 1 ? 'c-theme' : 'color-gary'">
+          <i class="icon iconfont icon-wenjianjia"></i>
+          <p class="overtext">{{ item.fileName }}</p>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 20px" class="images">
+      <div class="imgsList images">
+        <!-- <el-row> -->
+        <el-table
+          v-if="imgList.length > 0"
+          ref="multipleTable"
+          :data="imgList"
+          tooltip-effect="dark"
+          style="width: 100%"
+          :empty-text="'暂无图片'"
+          :row-key="
+            (row) => {
+              return row.fileCode;
+            }
+          "
+          @row-click="clickRow"
+          @selection-change="handleSelectionChange"
+        >
+          <!-- <el-col :span='4'> -->
+          <el-table-column :reserve-selection="true" type="selection" width="55"> </el-table-column>
+          <el-table-column width="120">
+            <template slot-scope="scope">
+              <img v-lazy="scope.row.fileUrl" />
+              <p class="otheritem" style="text-align: center">{{ scope.row.fileRemark }}</p>
+            </template>
+          </el-table-column>
+          <!-- </el-col> -->
+        </el-table>
+        <!-- </el-row> -->
+      </div>
+    </el-row>
+    <div class="block">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        style="margin-top: 20px"
+        :current-page="pageNo"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+      ></el-pagination>
+    </div>
+    <div class="file-list">
+      <el-upload
+        ref="picUpload"
+        class="pic-div"
+        :action="fileUploadUrl"
+        :data="otherData"
+        :before-upload="beforeAvatarUpload"
+        :on-success="handelSuccess"
+        :with-credentials="true"
+        :show-file-list="false"
+        :multiple="multiple"
+      ></el-upload>
+      <!--  :on-remove="handleRemove"
+          list-type="picture-card" 
+          :show-file-list="false" -->
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="closed">取消</el-button>
+      <el-button type="primary" @click="setFileList" :disabled="disables">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import API from '#/api/common';
+import { Loading } from 'element-ui';
+import { validateURL } from '#/utils/validate';
+const querystring = require('querystring');
+export default {
+  props: {
+    fileList: Array,
+    type: String,
+    fileSort: {
+      type: String,
+      default: 'FILE_GD',
+    },
+    limit: Number,
+    visible: Boolean,
+    imgType: String,
+    num: Number,
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    fileUploadUrl: {
+      type: String,
+      default: process.env.API_ROOT + '/web/rs/resourceBase/uploadGoodsFiles.json',
+    },
+  },
+  data() {
+    return {
+      count: '0',
+      disables: false,
+      ruleForm: { fileRemark: '', fileSort: this.fileSort },
+      title: '选择图片',
+      pageSize: '10',
+      pageNo: '1',
+      total: '',
+      indexIn: '',
+      rowKeys: 'fileCode',
+      row_Key: 'row[this.rowKeys]',
+      folderCode: '',
+      diaVisible: false,
+      picType: this.imgType || 'jpg/png',
+      size: this.num || 1,
+      picLimit: this.limit || 1,
+      multipleSelection: [],
+      checkList: this.fileList || [],
+      folderList: [],
+      newfolderList: [],
+      imgList: [],
+      otherData: {
+        tenantCode: '00000001',
+        filePcode: '',
+        fileSort: this.fileSort,
+      },
+      tenantCode: '',
+      fileCode: '',
+      proappEnvLayout: '',
+      uploading: [], //正在上传的文件集合
+    };
+  },
+  create() {},
+  mounted() {},
+  activated() {
+    // console.log('组件被激活了');
+    this.proappEnvLayout = JSON.parse(sessionStorage.getItem('proappEnvLayout'));
+    if (this.proappEnvLayout.tenantCode) {
+      this.tenantCode = JSON.parse(this.proappEnvLayout.tenantCode);
+    }
+    this.getImgListData();
+  },
+  methods: {
+    handleSelectionChange(data) {
+      console.log(data, '选中的值');
+      this.multipleSelection = data;
+    },
+    clickRow(row) {
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    handleSizeChange(val) {
+      //分页
+      this.pageSize = val;
+      this.getImgListData();
+    },
+    handleCurrentChange(val) {
+      this.pageNo = val;
+      this.getImgListData();
+    },
+    clickFolder(code, i) {
+      this.folderCode = code;
+      this.indexIn = i + 1;
+      this.pageNo = 1;
+      // console.log(code, 'code');
+      this.getImgListData();
+    },
+    getImgListData() {
+      let data = {
+        rows: this.pageSize,
+        page: this.pageNo,
+        fileCtype: 'png,jpg',
+        ownFlag: 1,
+      };
+      if (!this.ruleForm.fileRemark) {
+        delete data.fileRemark;
+      } else {
+        data.fileRemark = this.ruleForm.fileRemark;
+      }
+      if (!this.ruleForm.fileSort) {
+        delete data.fileSort;
+      } else {
+        data.fileSort = this.ruleForm.fileSort;
+      }
+      if (!this.folderCode) {
+        delete data.filePcode;
+      } else {
+        data.filePcode = this.folderCode;
+      }
+      API.queryFilePage(querystring.stringify(data)).then((res) => {
+        // console.log(res.rows);
+        res.list.map((vl) => {
+          if (!vl.fileUrl) {
+            vl.fileUrl = '';
+          } else if (vl.fileUrl && vl.fileUrl.indexOf('http') > -1) {
+            vl.fileUrl = vl.fileUrl;
+          } else {
+            vl.fileUrl = process.env.API_ROOT + '/paas/shop/' + vl.fileUrl;
+          }
+        });
+        this.imgList = res.list;
+        this.total = res.total;
+
+        this.getFolderListData();
+        ++this.count;
+      });
+    },
+    getFolderListData() {
+      let data = {
+        fileCtype: 'folder',
+        ownFlag: 1,
+      };
+      if (!this.ruleForm.fileSort) {
+        delete data.fileSort;
+      } else {
+        data.fileSort = this.ruleForm.fileSort;
+      }
+      API.queryFilePage(querystring.stringify(data)).then((res) => {
+        // console.log(res.rows);
+        this.folderList = [];
+
+        this.folderList = res.list;
+      });
+    },
+    closed() {
+      this.diaVisible = false;
+      this.multipleSelection = this.fileList;
+    },
+    handelClose() {
+      this.multipleSelection = this.fileList;
+      if (this.imgList.length > 0) {
+        this.$refs.multipleTable.clearSelection();
+      }
+
+      this.fileUrl = '';
+      this.$refs.picUpload.abort();
+      this.uploading = [];
+      this.$emit('toggle', false);
+    },
+
+    beforeAvatarUpload(file) {
+      // console.log(this.size, 'file', this.beforeAvatarUpload);
+      //上传之前的回调
+      const fileType = /\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name.toLowerCase());
+      if (!fileType) {
+        this.$message.error('图片格式为常见的jpg、png格式！');
+      }
+      const isLt2M = file.size / 1024 / 1024 < this.size;
+      if (!isLt2M) {
+        this.$message.error('上传的图片大小不能超过' + this.size + 'MB!');
+      }
+      if (isLt2M && fileType) {
+        this.uploading.push(file.uid);
+      }
+      return isLt2M && fileType;
+    },
+
+    handelSuccess(res, file, files) {
+      //文件上传 需要从this.uploading中移除
+      let index = this.uploading.indexOf(file.uid);
+      this.uploading.splice(index, 1);
+      // console.log(res, file, files, 'efrej');
+
+      this.multipleSelection.push({
+        name: res.fileName,
+        url: res.fileUrl,
+        goodsFileUrl: res.fileUrl,
+        goodsFileType: '0',
+        goodsFileSort: 'image',
+        goodsFileName: res.fileCode,
+        fileCode: res.fileCode,
+        status: 'success',
+      });
+
+      this.getImgListData();
+    },
+
+    changeFile() {
+      this.$refs.picUpload.$refs['upload-inner'].$el.dispatchEvent(new MouseEvent('click'));
+    },
+
+    setFileList() {
+      let nList = [];
+      this.multipleSelection.map((res) => {
+        nList.push({
+          name: res.fileName,
+          url: res.fileUrl,
+          goodsFileUrl: res.fileUrl,
+          goodsFileType: '0',
+          goodsFileSort: 'image',
+          goodsFileName: res.fileCode,
+          fileCode: res.fileCode,
+          status: 'success',
+        });
+      });
+      console.log(this.uploading, 'uploading');
+      if (this.uploading.length > 0) {
+        this.$confirm('请确认所有文件都上传完成，继续操作会移除正在上传的文件！', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          // type: "warning"
+        })
+          .then(() => {
+            this.$refs.picUpload.abort();
+            if (this.picLimit < this.multipleSelection.length) {
+              //判断条件
+              this.$message.error('超出最大限制张数');
+              this.$emit('setFileList', nList.slice(0, this.picLimit));
+              return false;
+            } else {
+              this.$emit('setFileList', nList);
+              this.disables = true;
+              this.diaVisible = false;
+            }
+          })
+          .catch(() => {});
+      } else {
+        if (this.picLimit < this.multipleSelection.length) {
+          //判断条件
+
+          this.$emit('setFileList', nList.slice(0, this.picLimit));
+          this.$message.error('超出最大限制张数');
+          return false;
+        } else {
+          this.$emit('setFileList', nList);
+          this.disables = true;
+
+          this.diaVisible = false;
+        }
+      }
+    },
+    // 去重
+    unique(arr) {
+      var result = [],
+        hash = {};
+      for (var i = 0, elem; (elem = arr[i]) != null; i++) {
+        if (!hash[elem]) {
+          result.push(elem);
+          hash[elem] = true;
+          // console.log(hash);
+        }
+      }
+      return result;
+    },
+    toggleRowSelection() {
+      console.log(this.checkList, '选中显示');
+      if (this.checkList.length > 0) {
+        var showIdList = this.checkList.map((item) => {
+          if (!item.goodsFileUrl) {
+            item.goodsFileUrl = item.fileUrl;
+          }
+          if (item.goodsFileUrl.lastIndexOf('/') > -1) {
+            let start = item.goodsFileUrl.lastIndexOf('/');
+            item.fileUrlsplit = item.goodsFileUrl.substring(start + 1, item.goodsFileUrl.length);
+            return item.fileUrlsplit;
+          }
+        });
+
+        if (this.imgList.length > 0) {
+          this.imgList.forEach((item) => {
+            if (item.fileUrl.lastIndexOf('/') > -1) {
+              let start = item.fileUrl.lastIndexOf('/');
+              item.fileUrlsplit = item.fileUrl.substring(start + 1, item.fileUrl.length);
+
+              if (showIdList.indexOf(item.fileUrlsplit) > -1) {
+                this.$refs.multipleTable.toggleRowSelection(item, true);
+              } else {
+                this.$refs.multipleTable.toggleRowSelection(item, false);
+              }
+            }
+          });
+        }
+      } else {
+      }
+    },
+  },
+
+  watch: {
+    visible() {
+      this.diaVisible = this.visible;
+      this.pageNo = 1;
+      if (this.visible) {
+        this.disables = false;
+
+        this.otherData = {
+          tenantCode: this.tenantCode || '00000001',
+          filePcode: this.folderCode,
+          fileSort: this.fileSort,
+        };
+        this.checkList = [];
+        if (Array.isArray(this.fileList) && this.fileList.length > 0) {
+          this.fileList.map((el) => {
+            el.fileCode = el.goodsFileName ? el.goodsFileName : '';
+
+            el.fileUrl = el.goodsFileUrl;
+          });
+          this.checkList = this.fileList;
+        }
+        this.getImgListData();
+
+        this.$nextTick(() => {
+          this.$refs.picUpload.$refs['upload-inner'].$el.style.display = 'none';
+        });
+      }
+      if (this.type && this.type == '1') {
+        this.title = '选择文件';
+      } else {
+        this.title = '选择图片';
+      }
+    },
+    limit() {
+      this.picLimit = this.limit || 1;
+    },
+    count(val, oldVal) {
+      this.otherData = {
+        tenantCode: this.tenantCode || '00000001',
+        filePcode: this.folderCode,
+        fileSort: this.ruleForm.fileSort,
+      };
+
+      this.$nextTick(() => {
+        this.toggleRowSelection();
+      });
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.pic-div :deep .el-upload-list {
+  display: none !important;
+}
+p.overtext {
+  overflow: hidden;
+  white-space: nowrap;
+
+  text-overflow: ellipsis;
+}
+.folder {
+  text-align: center;
+  cursor: default;
+  i {
+    font-size: 65px;
+  }
+}
+.color-gary {
+  color: #575555;
+}
+.images {
+  img {
+    width: 120px;
+    height: 120px;
+    margin-top: 20px;
+  }
+  .imgsList {
+    .el-table :deep tr {
+      margin: 10px;
+      float: left;
+      width: 160px;
+      padding: 0 10px;
+      border: 1px solid #ddd !important;
+      position: relative;
+    }
+    .el-table :deep tr .el-table-column--selection {
+      position: absolute;
+      top: 0;
+      left: 10px;
+      border: none;
+    }
+    .el-table :deep .has-gutter {
+      display: none;
+    }
+    .el-table :deep .el-table__body tbody {
+      display: flex;
+      flex-wrap: wrap;
+      width: 930px;
+    }
+  }
+}
+
+.folderLists {
+}
+.dialog-form {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  .dialog-form-item {
+    width: 100% !important;
+    margin-left: 0 !important;
+  }
+}
+.el-dialog {
+  border-radius: 6px;
+}
+.file-btn {
+  position: relative;
+  overflow: hidden;
+}
+.file-input {
+  display: none;
+}
+.cor-red {
+  color: #ff0000;
+}
+.otheritem {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>

package/src/views/uploadDialog/readme.md

@@ -0,0 +1,45 @@
+####模板 uploadDialog
+>uploadDialog基于element-ui的upload组件行封装的
+
+例子
+
+    <upload-dialog @toggle="toggleDia"
+                   @setFileList="getFileList"
+                   :type="uploadFileType"
+                   :fileList="diaFileList"
+                   :limit="limit"
+                   :visible="uploadDiaVisible">
+    </upload-dialog>
+    ···
+    ···
+     uploadFileType: '0',  // 默认的图片分类类型（图片0或视频1）
+     uploadDiaVisible: false,
+     diaFileList: [],     // 默认的文件列表
+     limit: 5
+    ···
+    ···
+    getFileList (arg) {
+        console.log(arg)              
+    },
+    toggleDia (arg) {
+        this.uploadDiaVisible = arg
+    }
+
+
+##### 上传的url
+
+    目前上传文件的url都是:'/web/rs/goodsFile/uploadGoodsFile.json'
+
+#####参数
+| 参数 | 说明 | 类型 | 状态 |
+| :--------: | :-----:| :--: | :--: |
+| visible | 上传弹框的展示 | boolean | 必填 |
+| fileList | 文件列表 | Array | 可选，默认为[] | 
+| type | 0 为图片 1 为视频 | string | 可选，默认为0 | 
+| limit | 上传的最大文件数量 | number | 可选，默认为1 |
+
+#####API
+| 事件名称 | 说明 | 例子 |
+| :--------: | :-----:| :--: |
+|toggle| 弹框关闭的回调，回调参数为false | visible||
+| setFileList| 弹框点击确定的回调，回调参数为已上传的文件列表 | getFileList(data) |