qj-happy-common-zhongjian 1.0.27

package/src/views/uploadDialog/index.vue

@@ -0,0 +1,558 @@
+<template>
+  <el-dialog :title="title" width="766px" :append-to-body="true" :visible.sync="diaVisible" @close="handelClose"
+    class="file-box">
+    <!-- 点击上传弹出的第一个框 -->
+
+    <el-form class="dialog-form" v-if="!type || type == '0'">
+      <span class="el-upload__tip cor-red">最多上传{{ picLimit }}张</span>
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="上传本地图片" name="first"></el-tab-pane>
+        <el-tab-pane label="添加网络图片" name="second"></el-tab-pane>
+        <el-tab-pane label="图片库" name="third"></el-tab-pane>
+      </el-tabs>
+      <el-form-item label="上传本地图片" class="dialog-form-item" v-if="activeName == 'first'">
+        <el-button type="primary" class="file-btn" @click="changeFile">添加图片</el-button>
+        <span class="el-upload__tip cor-red">只能上传{{ imgType }}文件，且不超过{{ num || 5 }}M</span>
+      </el-form-item>
+      <el-form-item label="添加网络图片" class="dialog-form-item" v-if="activeName == 'second'">
+        <el-col :span="14">
+          <el-input v-model="fileUrl"></el-input>
+        </el-col>
+        <el-col :span="5" :offset="1">
+          <el-button type="primary" @click="getNetFile">提取</el-button>
+        </el-col>
+      </el-form-item>
+      <el-form-item class="dialog-form-item" v-if="activeName == 'third'">
+        <el-row>
+          <el-col :span="2">货号：</el-col>
+          <el-col :span="14">
+            <el-input v-model="skuNo"></el-input>
+          </el-col>
+          <el-col :span="5" :offset="1">
+            <el-button type="primary" @click="getSkuImg">查询</el-button>
+          </el-col>
+        </el-row>
+        <el-row style="margin-top: 20px">
+          <el-checkbox-group :max="picLimit || 5" v-model="checkList" @change="hanlderFileImg">
+            <el-checkbox v-for="(item, index) in arrList" :label="item" :key="index">
+              <img v-lazy="item.fileUrl" class="image"
+                v-if="item.fileUrl.indexOf('http') > -1 || item.fileUrl.indexOf('https')>-1 || item.fileUrl.indexOf('paas/shop') > -1" />
+              <img v-lazy="imgUrl + item.fileUrl" class="image" v-else />
+            </el-checkbox>
+          </el-checkbox-group>
+          <div v-if="btnShow" style="text-align: center">
+            <el-button type="text" @click="morePage">更多</el-button>
+          </div>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <el-form class="dialog-form" v-else>
+      <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" v-if="noLimit">只能上传常见的mp4,ogg,flv,mkv格式文件</span>
+        <span class="el-upload__tip cor-red"
+          v-else>只能上传常见的mp4,ogg,flv,mkv格式文件，且不超过{{ nums || 5 }}M，最多上传{{ picLimit }}个</span>
+      </el-form-item>
+      <el-form-item label="添加网络文件" class="dialog-form-item">
+        <el-col :span="14">
+          <el-input v-model="fileUrl"></el-input>
+        </el-col>
+        <el-col :span="5" :offset="1">
+          <el-button type="primary" @click="getNetFile">提取</el-button>
+        </el-col>
+      </el-form-item>
+    </el-form>
+    <div class="file-list">
+      <el-upload v-if="!type || type == '0'" ref="picUpload" class="pic-div" :action="fileUploadUrl" :data="otherData"
+        :before-upload="beforeAvatarUpload" :on-success="handelSuccess" :with-credentials="true"
+        :on-remove="handleRemove" list-type="picture-card" :file-list="nFileList" :multiple="multiple"></el-upload>
+      <el-upload v-else ref="picUpload" :action="fileUploadUrl" :data="otherData" :with-credentials="true"
+        :on-success="handelSuccess" :on-error="handelError" :on-remove="handleRemove" :before-upload="beforeUpload"
+        :file-list="nFileList" :multiple="multiple"></el-upload>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="diaVisible = false">取消</el-button>
+      <el-button type="primary"
+        v-show="(uploading.length == 0 && activeName == 'first') || activeName == 'second' || activeName == 'third'"
+        @click="setFileList">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+  import API from '#/api/common';
+  import request from '#/utils/request';
+  const querystring = require('querystring');
+  import {
+    Loading
+  } from 'element-ui';
+  import {
+    validateURL
+  } from '#/utils/validate';
+  export default {
+    // props: ["fileList", "type", "limit", "visible", fileUploadUrl:{}],
+    props: {
+      fileList: Array,
+      type: String,
+      limit: Number,
+      visible: Boolean,
+      imgType: String,
+      num: {
+        type: Number,
+        default: 5,
+      },
+      nums: {
+        type: Number,
+        default: 5,
+      },
+      noLimit: {
+        type: Boolean,
+        default: false,
+      },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      fileUploadUrl: {
+        type: String,
+        default: '/web/rs/goodsFile/uploadGoodsFile.json',
+      },
+      fileImgUrl: {
+        type: String,
+        default: '/web/fm/file/queryFilelistView.json?fileSort=FILE_GD',
+      },
+    },
+    data() {
+      return {
+        imgUrl: process.env.API_ROOT + '/paas/shop/',
+        checked: true,
+        activeName: 'first',
+        title: '选择图片',
+        diaVisible: false,
+        fileUrl: '',
+        imgType: 'jpg/png/gif',
+        noLimit: false,
+        total: '',
+        pageNo: 1,
+        pageSize: 10,
+        picLimit: this.limit || 1,
+        nFileList: this.fileList || [],
+        otherData: {
+          tenantCode: '00000001',
+        },
+        checkList: [],
+        tabName: '',
+        imgList: [],
+        arrList: [],
+        skuNo: '',
+        btnShow: true,
+        imgState: true,
+        fileListArray: [], //初始化组件时候
+        imgUrlArrayList: [], //判断哪些添加了
+        uploading: [], //正在上传的文件集合
+        secDomainName: null,
+        fileUploadUrls: null,
+        fileImgUrls: null
+      };
+    },
+
+    mounted() {
+      let hrefs = window.location.href,
+        hosts = window.location.host;
+      if (hrefs && hosts) {
+        let name = hrefs.split(hosts)[1] ? hrefs.split(hosts)[1].split('/')[1] : null;
+        this.secDomainName = name && name !== 'paas' && process.env.NODE_ENV != 'development' ? process.env.API_ROOT +
+          '/' + name : process.env.API_ROOT
+      } else {
+        this.secDomainName = process.env.API_ROOT
+      }
+      this.imgUrl = this.secDomainName + '/paas/shop/';
+      this.fileUploadUrls = this.secDomainName + this.fileUploadUrl;
+      this.fileImgUrls = this.secDomainName + this.fileImgUrls;
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.tabName = tab.name;
+        if (tab.name == 'third') {
+          if (this.imgState) {
+            this.getImgData();
+            this.checkList = [];
+          }
+        }
+      },
+      hanlderFileImg(data) {
+        console.log(data, this.nFileList);
+      },
+      getImgData() {
+        console.log(this.fileImgUrl);
+
+        request({
+          url: this.fileImgUrl,
+          method: 'post',
+          data: querystring.stringify({
+            rows: this.pageSize,
+            page: this.pageNo
+          }),
+        }).then((res) => {
+          console.log(res.rows);
+
+          this.imgList = res.rows;
+          this.arrList = this.arrList.concat(this.imgList);
+          this.total = res.total;
+          this.imgState = false;
+          if (res && res.total > this.pageSize) {
+            this.btnShow = true;
+          } else {
+            this.btnShow = false;
+          }
+        });
+      },
+      getSkuImg() {
+        this.fileImgUrl = this.secDomainName + '/web/fm/file/queryFilelistView.json?fileSort=FILE_GD&fileRemark=' + this
+          .skuNo;
+        this.arrList = [];
+        this.pageNo = 1;
+        this.getImgData();
+      },
+      morePage() {
+        this.pageNo++;
+        var pagelist = Math.ceil(this.total / this.pageSize);
+        // console.log(this.pageNo, pagelist);
+        if (this.pageNo <= pagelist) {
+          this.getImgData();
+          // this.arrList.concat(this.imgList)
+        } else {
+          this.btnShow = false;
+        }
+      },
+      handleSizeChange(val) {
+        //分页
+        this.pageSize = val;
+        this.getImgData();
+      },
+      handleCurrentChange(val) {
+        this.pageNo = val;
+        this.getImgData();
+      },
+
+      uploadPic(index, rows) {
+        //规格上传图片
+        this.rowSer = rows;
+        this.defaultPicList = rows.rsGoodsFileDomainList;
+        this.diaVisible = true;
+      },
+      handelClose() {
+        this.nFileList = [];
+        this.fileUrl = '';
+        if (this.$refs.picUpload) {
+          this.$refs.picUpload.abort();
+        }
+        this.uploading = [];
+        this.$emit('toggle', false);
+      },
+      handleRemove(file, fileList) {
+        console.log(file, '0000');
+        this.checkList.forEach((el, index) => {
+          if (`/paas/shop/${el.fileUrl}` == file.url) {
+            this.checkList.splice(index, 1);
+          }
+        });
+        //移除正在上传的文件 需要从this.uploading中移除
+        let index = this.uploading.indexOf(file.uid);
+        if (index > -1) {
+          this.uploading.splice(index, 1);
+        }
+        this.nFileList = fileList;
+        this.fileListArray = [];
+        this.nFileList.forEach((el) => {
+          this.fileListArray.push(el.url);
+        });
+      },
+      beforeAvatarUpload(file) {
+        console.log(file, 'file', this.beforeAvatarUpload);
+        //上传之前的回调
+        const fileType = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name.toLowerCase());
+        if (!fileType) {
+          this.$message.error('图片格式为常见的jpg、png、gif格式！');
+        }
+        const isLt2M = file.size / 1024 / 1024 < (this.num ? this.num : this.nums);
+        if (!isLt2M) {
+          this.$message.error('上传的图片大小不能超过 ' + (this.num ? this.num : this.nums) + 'MB!');
+        }
+        if (isLt2M && fileType) {
+          this.uploading.push(file.uid);
+        }
+        return isLt2M && fileType;
+      },
+      beforeUpload(file) {
+        //上传之前的回调
+        const fileType = /\.(mp4|ogg|flv|mkv|MP4|FLV|MKV|OGG)$/.test(file.name.toLowerCase());
+        if (!fileType) {
+          this.$message.error('文件格式为常见的mp4,ogg,flv,mkv格式！');
+        }
+        if (this.noLimit) {
+          return fileType;
+        } else {
+          const isLt2M = file.size / 1024 / 1024 < (this.num ? this.num : this.nums);
+          if (!isLt2M) {
+            this.$message.error('上传的文件大小不能超过 ' + (this.num ? this.num : this.nums) + 'MB!');
+          }
+          if (isLt2M && fileType) {
+            this.uploading.push(file.uid);
+          }
+          return isLt2M && fileType;
+        }
+      },
+      handelSuccess(response, file, fileList) {
+        console.log(response);
+        console.log(file);
+        console.log(fileList, '999');
+        if (response && typeof response == 'object' && 'success' in response && !response.success) {
+          let nJson = JSON.parse(response.data.dataObj);
+          let nUrl = window.location.href;
+          if (process.env.NODE_ENV === 'development') {
+            window.location.href = this.secDomainName + nJson.loginurl + '?url=' + nUrl;
+          } else {
+            window.location.href = this.secDomainName + nJson.loginurl + '?url=' + nUrl;
+          }
+          return;
+        }
+        let njson = {
+          name: file.name,
+          url: response.fileUrl,
+          goodsFileUrl: response.fileUrl,
+          uid: file.uid,
+          goodsFileType: this.type,
+          goodsFileName: response.fileCode,
+          status: 'success',
+        };
+        //文件上传 需要从this.uploading中移除
+        let index = this.uploading.indexOf(file.uid);
+        this.uploading.splice(index, 1);
+
+        fileList.splice(fileList.indexOf(file), 1, njson);
+        console.log(fileList);
+        this.nFileList = fileList;
+      },
+      handelError(error, file, fileList) {
+        console.log(response, this.fileUploadUrl,
+          'handelErrorhandelErrorhandelErrorhandelErrorhandelErrorhandelErrorhandelErrorhandelError');
+        console.log(file);
+        console.log(fileList);
+      },
+      changeFile() {
+        if (this.nFileList.length >= this.picLimit) {
+          this.$message.error(`最多上传${this.picLimit}${this.type == '0' ? '张图片' : '个文件'}`);
+          return;
+        }
+        this.$refs.picUpload.$refs['upload-inner'].$el.dispatchEvent(new MouseEvent('click'));
+      },
+      getNetFile() {
+        if (this.nFileList.length >= this.picLimit) {
+          this.$message.error(`最多上传${this.picLimit}${this.type == '0' ? '张图片' : '个文件'}`);
+          this.fileUrl = '';
+          return;
+        }
+        if (validateURL(this.fileUrl)) {
+          let fileInfo = {
+            url: this.fileUrl,
+            goodsFileUrl: this.fileUrl,
+            name: this.fileUrl,
+            goodsFileType: this.type,
+          };
+          this.nFileList.push(fileInfo);
+          this.fileUrl = '';
+        } else {
+          this.$message.error('请输入正确的图片地址');
+        }
+      },
+      setPicList(response, file, fileList) {},
+      beyond() {
+        //图片个数超出的验证
+        this.$message.error('最多5张!');
+      },
+      setFileList() {
+        let nList = [];
+        console.log(this.imgUrlArrayList, 'xx imgUrlArrayList');
+        if (this.nFileList.length > 0) {
+          nList = JSON.parse(JSON.stringify(this.nFileList));
+        }
+        this.checkList.forEach((res) => {
+          if (this.imgUrlArrayList.indexOf(`/paas/shop/${res.fileUrl}`) < 0) {
+            // if (res.fileUrl.indexOf('http') > -1) {
+            nList.push({
+              url: `${res.fileUrl}`,
+              goodsFileUrl: `${res.fileUrl}`,
+              name: res.fileName,
+            });
+            // } else {
+            //   nList.push({
+            //     url: `/paas/shop/${res.fileUrl}`,
+            //     goodsFileUrl: `/paas/shop/${res.fileUrl}`,
+            //     name: res.fileName,
+            //   });
+            // }
+          }
+        });
+        this.imgUrlArrayList = this.fileListArray;
+        if (this.uploading.length > 0) {
+          this.$confirm('请确认所有文件都上传完成，继续操作会移除正在上传的文件！', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }).then(() => {
+            this.$refs.picUpload.abort();
+            this.$emit('setFileList', nList);
+            this.diaVisible = false;
+          });
+        } else {
+          this.$emit('setFileList', nList);
+          this.diaVisible = false;
+        }
+      },
+    },
+    watch: {
+      visible() {
+        this.diaVisible = this.visible;
+        if (this.visible) {
+          if (this.fileImgUrl && this.fileImgUrl.lastIndexOf('&fileRemark') > -1) {
+            let index = this.fileImgUrl.lastIndexOf('=');
+            console.log(index, index, '0000');
+            if (index > -1) {
+              console.log(index);
+              this.skuNo = this.fileImgUrl.slice(index + 1);
+            }
+          } else {
+            this.skuNo = '';
+          }
+          console.log(this.skuNo, '00000');
+          let nList = [],
+            delList = [];
+          if (this.fileList.length > 0) {
+            nList = JSON.parse(JSON.stringify(this.fileList));
+            //查找删除后的存在的对象
+            nList.forEach((el, index) => {
+              if (this.fileListArray.indexOf(el.goodsFileUrl || el.url) >= 0) {
+                delList.push(el.goodsFileUrl || el.url);
+              }
+            });
+            // console.log(delList, this.checkList, "this.checkList");
+            this.checkList.forEach((el, index) => {
+              if (delList.indexOf(`/paas/shop/${el.fileUrl}`) < 0) {
+                this.checkList.splice(index, 1);
+              }
+            });
+            this.fileListArray = [];
+            nList.forEach((item) => {
+              item.url = item.goodsFileUrl || item.url;
+              this.fileListArray.push(item.url);
+            });
+          } else {
+            this.checkList = [];
+            this.fileListArray = [];
+          }
+          this.$nextTick(() => {
+            console.log(this.$refs);
+            if (this.$refs) {
+              this.$refs.picUpload.$refs['upload-inner'].$el.style.display = 'none';
+            }
+          });
+          this.nFileList = nList;
+        }
+        if (this.type && this.type == '1') {
+          this.title = '选择文件';
+        } else {
+          this.title = '选择图片';
+        }
+      },
+      limit() {
+        this.picLimit = this.limit || 1;
+      },
+      fileList() {
+        let nList = [];
+        if (this.fileList.length > 0) {
+          nList = JSON.parse(JSON.stringify(this.fileList));
+        }
+        this.nFileList = nList;
+        console.log(this.nFileList);
+      },
+    },
+  };
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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;
+  }
+
+  .image {
+    width: 100px;
+    height: 100px;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: '';
+  }
+
+  .clearfix:after {
+    clear: both;
+  }
+
+  .elcard {
+    margin-top: 20px;
+  }
+</style>
+<style lang="scss">
+  .file-box {
+    .el-checkbox {
+      margin-left: 30px;
+      position: relative;
+
+      .el-checkbox__input {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .el-checkbox__label {
+        padding: 0;
+      }
+    }
+
+    .el-checkbox-group {
+      height: 230px;
+      overflow-y: scroll;
+    }
+
+    .el-upload-list--picture-card .el-upload-list__item {
+      width: 100px;
+      height: 100px;
+    }
+  }
+</style>