qj-common 4.3.0 → 4.3.2

package/src/views/uploadDialog/indexOlay.vue

@@ -1,582 +1,582 @@
-<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="`/paas/shop/${item.fileUrl}`" class="image" />
-            </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,
-    },
-    noLimit: {
-      type: Boolean,
-      default: false,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    fileUploadUrl: {
-      type: String,
-      default: process.env.API_ROOT + "/web/rs/goodsFile/uploadGoodsFile.json",
-    },
-    fileImgUrl: {
-      type: String,
-      default:
-        process.env.API_ROOT +
-        "/web/fm/file/queryFilelistView.json?fileSort=FILE_GD",
-    },
-  },
-  data() {
-    return {
-      checked: true,
-      activeName: "first",
-      title: "选择图片",
-      diaVisible: false,
-      fileUrl: "",
-      imgType: "jpg/png",
-      nums: 5,
-      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: [], //正在上传的文件集合
-    };
-  },
-
-  mounted() {},
-  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 =
-        process.env.API_ROOT +
-        "/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 = /\.(jpg|jpeg|png|JPG|PNG)$/.test(
-        file.name.toLowerCase()
-      );
-      if (!fileType) {
-        this.$message.error("图片格式为常见的jpg、png格式！");
-      }
-      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 =
-            process.env.API_ROOT + nJson.loginurl + "?url=" + nUrl;
-        } else {
-          window.location.href = 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) {
-          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;
-      }
-    },
-  },
-  mounted() {
-    console.log(this.multiple, "multiple");
-  },
-  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>
-
+<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="`/paas/shop/${item.fileUrl}`" class="image" />
+            </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,
+    },
+    noLimit: {
+      type: Boolean,
+      default: false,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    fileUploadUrl: {
+      type: String,
+      default: process.env.API_ROOT + "/web/rs/goodsFile/uploadGoodsFile.json",
+    },
+    fileImgUrl: {
+      type: String,
+      default:
+        process.env.API_ROOT +
+        "/web/fm/file/queryFilelistView.json?fileSort=FILE_GD",
+    },
+  },
+  data() {
+    return {
+      checked: true,
+      activeName: "first",
+      title: "选择图片",
+      diaVisible: false,
+      fileUrl: "",
+      imgType: "jpg/png",
+      nums: 5,
+      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: [], //正在上传的文件集合
+    };
+  },
+
+  mounted() {},
+  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 =
+        process.env.API_ROOT +
+        "/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 = /\.(jpg|jpeg|png|JPG|PNG)$/.test(
+        file.name.toLowerCase()
+      );
+      if (!fileType) {
+        this.$message.error("图片格式为常见的jpg、png格式！");
+      }
+      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 =
+            process.env.API_ROOT + nJson.loginurl + "?url=" + nUrl;
+        } else {
+          window.location.href = 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) {
+          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;
+      }
+    },
+  },
+  mounted() {
+    console.log(this.multiple, "multiple");
+  },
+  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>
+