qj-common 4.3.0 → 4.3.2

package/src/views/uploadDialog/indexUpload.vue

@@ -1,543 +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>
+<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>