2024.08.17

- 增加图片处理页面，对接图片处理模块相关接口；

src/api/setup.js

@@ -207,3 +207,85 @@ export function dictDelete(data) {
     data
   })
 }
+
+// *************图片处理*************
+// 图片尺寸不变，压缩图片文件大小
+export function updateCompressImage(params) {
+  return request({
+    url: '/compress/compressImage',
+    method: 'get',
+    params
+  })
+}
+
+// 指定宽高压缩图片
+export function updateCompressImageWithWH(params) {
+  return request({
+    url: '/compress/compressImageWithWH',
+    method: 'get',
+    params
+  })
+}
+
+// 根据比列压缩图片
+export function updateCompressImageWithScale(params) {
+  return request({
+    url: '/compress/compressImageWithScale',
+    method: 'get',
+    params
+  })
+}
+
+// 添加文字水印
+export function updateCompressAddTextWater(params) {
+  return request({
+    url: '/compress/addTextWater',
+    method: 'get',
+    params
+  })
+}
+
+// 转换图片格式
+export function updateCompressFormatImage(params) {
+  return request({
+    url: '/compress/formatImage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加图片水印
+export function updateCompressAddImageWater(params) {
+  return request({
+    url: '/compress/addImageWater',
+    method: 'get',
+    params
+  })
+}
+
+// 根据坐标裁剪图片
+export function updateCompressCutImage(params) {
+  return request({
+    url: '/compress/cutImage',
+    method: 'get',
+    params
+  })
+}
+
+// 整屏添加文字水印
+export function updateCompressAddTextWaterFullScreen(params) {
+  return request({
+    url: '/compress/addTextWaterFullScreen',
+    method: 'get',
+    params
+  })
+}
+
+// 旋转 ,正数：顺时针 负数：逆时针
+export function updateCompressRotateImage(params) {
+  return request({
+    url: '/compress/rotateImage',
+    method: 'get',
+    params
+  })
+}

src/components/ImageSelect/index.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="component-upload-image">
+    <div v-if="false" class="imgBox">
+      <div
+        v-for="item in fileList"
+        :key="item.url"
+        class="imgItem"
+      >
+        <div class="dot">X</div>
+        <img
+          :src="item.url"
+        >
+      </div>
+    </div>
+    <el-upload
+      ref="upload"
+      multiple
+      :action="uploadFileUrl"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-change="handleChange"
+      name="file"
+      :on-remove="handleRemove"
+      :show-file-list="true"
+      :headers="headers"
+      :file-list="fileList"
+      :data="data"
+      :auto-upload="false"
+      :on-preview="handlePictureCardPreview"
+      :class="{ hide: fileList.length >= limit }"
+    >
+      <i slot="trigger" class="el-icon-plus" />
+    </el-upload>
+
+    <!-- 上传提示 -->
+    <div
+      v-if="showTip"
+      slot="tip"
+      class="el-upload__tip"
+    >
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template>
+      的文件
+    </div>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="预览"
+      width="800"
+      append-to-body
+    >
+      <img
+        :src="dialogImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      >
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const baseURL = process.env.VUE_APP_DOMAIN_PREFIX
+// import { getAccessToken } from '@/utils/auth'
+import { uploadUrl } from '@/utils/request'
+import { getToken } from '@/utils/auth'
+export default {
+  name: 'ImageSelect',
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    uploadType: {
+      type: Number,
+      default: 0
+    },
+    // 上传时附带的额外参数
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 5
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 50
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ['png', 'jpg', 'jpeg']
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      hideUpload: false,
+      uploadFileUrl: uploadUrl, // 请求地址
+      headers: { 'Authorization-business': getToken() }, // 设置上传的请求头部
+      fileList: []
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize)
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',')
+          // 然后将数组转为对象数组
+          this.fileList = list.map((item) => {
+            if (typeof item === 'string') {
+              item = { name: item, url: item }
+            }
+            return item
+          })
+        } else {
+          this.fileList = []
+          return []
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (this.uploadType === 1) {
+      this.uploadFileUrl = `${baseURL}/compress/compressImage`
+    } else if (this.uploadType === 2) {
+      this.uploadFileUrl = `${baseURL}/compress/compressImageWithWH`
+    } else if (this.uploadType === 3) {
+      this.uploadFileUrl = `${baseURL}/compress/compressImageWithScale`
+    } else if (this.uploadType === 4) {
+      this.uploadFileUrl = `${baseURL}/compress/addTextWater`
+    } else if (this.uploadType === 5) {
+      this.uploadFileUrl = `${baseURL}/compress/formatImage`
+    } else if (this.uploadType === 6) {
+      this.uploadFileUrl = `${baseURL}/compress/addImageWater`
+    } else if (this.uploadType === 7) {
+      this.uploadFileUrl = `${baseURL}/compress/cutImage`
+    } else if (this.uploadType === 8) {
+      this.uploadFileUrl = `${baseURL}/compress/addTextWaterFullScreen`
+    } else if (this.uploadType === 9) {
+      this.uploadFileUrl = `${baseURL}/compress/rotateImage`
+    }
+  },
+  methods: {
+    handleChange(file, fileList) {
+      console.log('handleChange', file, fileList)
+      this.fileList = fileList
+    },
+    // 删除图片
+    handleRemove(file, fileList) {
+      const findex = this.fileList.map((f) => f.name).indexOf(file.name)
+      if (findex > -1) {
+        this.fileList.splice(findex, 1)
+        this.$emit('input', this.listToString(this.fileList))
+      }
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      this.uploadList.push({ name: res.data.url, url: res.data.url })
+      console.log('handleUploadSuccess', res, this.uploadList)
+      if (this.uploadList.length === this.number) {
+        this.fileList = this.uploadList
+        this.uploadList = []
+        this.number = 0
+        this.$emit('input', this.listToString(this.fileList))
+        // this.$modal.closeLoading()
+      }
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      console.log('handleBeforeUpload', file)
+      let isImg = false
+      if (this.fileType.length) {
+        let fileExtension = ''
+        if (file.name.lastIndexOf('.') > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
+        }
+        isImg = this.fileType.some(type => {
+          if (file.type.indexOf(type) > -1) return true
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true
+          return false
+        })
+      } else {
+        isImg = file.type.indexOf('image') > -1
+      }
+
+      if (!isImg) {
+        this.$message.error(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`)
+        return false
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize
+        if (!isLt) {
+          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`)
+          return false
+        }
+      }
+      this.$message.warning('正在上传图片，请稍候...')
+      this.number++
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`)
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$message.error('上传图片失败，请重试')
+      // this.$modal.closeLoading()
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = ''
+      separator = separator || ','
+      for (const i in list) {
+        strs += list[i].url.replace(this.baseUrl, '') + separator
+      }
+      return strs !== '' ? strs.substr(0, strs.length - 1) : ''
+    }
+  }
+}
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+// .el-upload--picture-card 控制加号部分
+/* .hide {
+  display: none;
+} */
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter, .el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
+
+.imgBox {
+  display: flex;
+  flex-wrap: wrap;
+
+  .imgItem {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    .dot {
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      width: 20px;
+      height: 20px;
+      color: #fff;
+      background-color: red;
+      text-align: center;
+      line-height: 20px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      margin-right: 5px;
+      margin-bottom: 5px;
+      display: inline-block;
+    }
+  }
+}
+</style>
+

src/components/ImageUpload/index.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="component-upload-image">
+    <div v-if="false" class="imgBox">
+      <div
+        v-for="item in fileList"
+        :key="item.url"
+        class="imgItem"
+      >
+        <div class="dot">X</div>
+        <img
+          :src="item.url"
+        >
+      </div>
+    </div>
+    <el-upload
+      multiple
+      :action="uploadFileUrl"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      name="file"
+      :on-remove="handleRemove"
+      :show-file-list="true"
+      :headers="headers"
+      :file-list="fileList"
+      :on-preview="handlePictureCardPreview"
+      :class="{ hide: fileList.length >= limit }"
+    >
+      <i class="el-icon-plus" />
+    </el-upload>
+
+    <!-- 上传提示 -->
+    <div
+      v-if="showTip"
+      slot="tip"
+      class="el-upload__tip"
+    >
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template>
+      的文件
+    </div>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="预览"
+      width="800"
+      append-to-body
+    >
+      <img
+        :src="dialogImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      >
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { getAccessToken } from '@/utils/auth'
+import { uploadUrl } from '@/utils/request'
+import { getToken } from '@/utils/auth'
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 5
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 50
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ['png', 'jpg', 'jpeg']
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      hideUpload: false,
+      uploadFileUrl: uploadUrl, // 请求地址
+      headers: { 'Authorization-business': getToken() }, // 设置上传的请求头部
+      fileList: []
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize)
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',')
+          // 然后将数组转为对象数组
+          this.fileList = list.map((item) => {
+            if (typeof item === 'string') {
+              item = { name: item, url: item }
+            }
+            return item
+          })
+        } else {
+          this.fileList = []
+          return []
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    // 删除图片
+    handleRemove(file, fileList) {
+      const findex = this.fileList.map((f) => f.name).indexOf(file.name)
+      if (findex > -1) {
+        this.fileList.splice(findex, 1)
+        this.$emit('input', this.listToString(this.fileList))
+      }
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      this.uploadList.push({ name: res.data.url, url: res.data.url })
+      console.log(this.uploadList)
+      if (this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList)
+        this.uploadList = []
+        this.number = 0
+        this.$emit('input', this.listToString(this.fileList))
+        // this.$modal.closeLoading()
+      }
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      let isImg = false
+      if (this.fileType.length) {
+        let fileExtension = ''
+        if (file.name.lastIndexOf('.') > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
+        }
+        isImg = this.fileType.some(type => {
+          if (file.type.indexOf(type) > -1) return true
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true
+          return false
+        })
+      } else {
+        isImg = file.type.indexOf('image') > -1
+      }
+
+      if (!isImg) {
+        this.$message.error(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`)
+        return false
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize
+        if (!isLt) {
+          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`)
+          return false
+        }
+      }
+      this.$message.warning('正在上传图片，请稍候...')
+      this.number++
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`)
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$message.error('上传图片失败，请重试')
+      // this.$modal.closeLoading()
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = ''
+      separator = separator || ','
+      for (const i in list) {
+        strs += list[i].url.replace(this.baseUrl, '') + separator
+      }
+      return strs !== '' ? strs.substr(0, strs.length - 1) : ''
+    }
+  }
+}
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+// .el-upload--picture-card 控制加号部分
+/* .hide {
+  display: none;
+} */
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter, .el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
+
+.imgBox {
+  display: flex;
+  flex-wrap: wrap;
+
+  .imgItem {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    .dot {
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      width: 20px;
+      height: 20px;
+      color: #fff;
+      background-color: red;
+      text-align: center;
+      line-height: 20px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      margin-right: 5px;
+      margin-bottom: 5px;
+      display: inline-block;
+    }
+  }
+}
+</style>
+

src/utils/file.js

@@ -0,0 +1,125 @@
+/**
+ *
+ * @param {*} src 文件url链接
+ * @param {*} fileName 文件名+后缀
+ * @param {*} fileType 文件类型（后缀）
+ * @param {*} isNotImage 是否是图片
+ */
+export function download(src, fileName, fileType, isNotImage) {
+  if (isNotImage) {
+    //判断是否为chrome里的图片
+    fileLinkToStreamDownload(src, fileName, fileType);
+  } else {
+    ImgtodataURL(src, fileName, fileType);
+  }
+}
+
+function fileLinkToStreamDownload(url, fileName, type) {
+  let xhr = new XMLHttpRequest();
+  xhr.open("get", url, true);
+  xhr.setRequestHeader("Content-type", `application/${type}`);
+  xhr.responseType = "blob";
+  xhr.onload = function() {
+    if (this.status == 200) {
+      var blob = this.response;
+      downloadNormalFile(blob, fileName);
+    }
+  };
+  xhr.send();
+}
+
+function downloadNormalFile(blob, filename) {
+  var eleLink = document.createElement("a");
+  let href = blob;
+  if (typeof blob == "string") {
+    eleLink.target = "_blank";
+  } else {
+    href = window.URL.createObjectURL(blob); //创建下载的链接
+  }
+  eleLink.href = href;
+  eleLink.download = filename; //下载后文件名
+  eleLink.style.display = "none";
+  // 触发点击
+  document.body.appendChild(eleLink);
+  eleLink.click(); //点击下载
+  //下载完成移除元素
+  document.body.removeChild(eleLink);
+  if (typeof blob == "string") {
+    window.URL.revokeObjectURL(href); //释放掉blob对象
+  }
+}
+
+function ImgtodataURL(url, filename, fileType) {
+  getBase64(url, fileType, _baseUrl => {
+    // 创建隐藏的可下载链接
+    var eleLink = document.createElement("a");
+    eleLink.download = filename;
+    eleLink.style.display = "none";
+    // 图片转base64地址
+    eleLink.href = _baseUrl;
+    // 触发点击
+    document.body.appendChild(eleLink);
+    eleLink.click();
+    // 然后移除
+    document.body.removeChild(eleLink);
+  });
+}
+
+/**
+ * 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片
+ * @param {*} url
+ * @param {*} fileType
+ * @param {*} callback
+ */
+function getBase64(url, fileType, callback) {
+  var Img = new Image(),
+    dataURL = "";
+  Img.src = url;
+  Img.setAttribute("crossOrigin", "anonymous");
+  Img.onload = function() {
+    //要先确保图片完整获取到，这是个异步事件
+    var canvas = document.createElement("canvas"), //创建canvas元素
+      width = Img.width, //确保canvas的尺寸和图片一样
+      height = Img.height;
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
+    dataURL = canvas.toDataURL("image/" + fileType); //转换图片为dataURL
+    callback ? callback(dataURL) : null;
+  };
+}
+
+/**
+ * 使用方法
+ * fileByBase64(file, (base64) => {
+      console.log(base64) 
+   })
+ * 上传附件转base64
+ * @param {File} file 文件流
+ */
+export const fileByBase64 = (file, callback) => {
+  var reader = new FileReader();
+  // 传入一个参数对象即可得到基于该参数对象的文本内容
+  reader.readAsDataURL(file);
+  reader.onload = function(e) {
+    // target.result 该属性表示目标对象的DataURL
+    callback(e.target.result);
+  };
+};
+
+/**
+ * 将字节转换成合适单位
+ * @param {*} size
+ */
+export function getfilesize(size) {
+  //把字节转换成正常文件大小
+  if (!size) return "";
+  var num = 1024.0; //byte
+  if (size < num) return size + "B";
+  if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "KB"; //kb
+  if (size < Math.pow(num, 3))
+    return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
+  if (size < Math.pow(num, 4))
+    return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
+  return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
+}

src/views/setup/privacy/index.vue

@@ -30,12 +30,16 @@
 </template>
 
 <script>
+import GraphicVerificationCode from '@/components/GraphicVerificationCode/index.vue'
 import {
   getAdminPhone,
   verifyPrivacyCode
 } from '@/api/privacy'
 const JM = require('@/utils/rsaEncrypt.js')
 export default {
+  components: {
+    GraphicVerificationCode
+  },
   data() {
     // 管理员手机号码
     const newPhone = (rule, value, callback) => {

src/views/system/imageProcessing/components/DetailModal.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 商品信息 -->
+      <el-form-item label="商品ID" prop="id">
+        {{ formData.id || '--' }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+// import {  } from '@/api/threeSelection'
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '查看商品详情'
+      },
+      visible: false,
+      formData: {
+        id: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.id) {
+        this.getInfo(params.id)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await priceControlGetById({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          id: res.data.id || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+

src/views/system/imageProcessing/index.vue

@@ -0,0 +1,828 @@
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-radio-group
+        v-model="type" class="filter-item" style="margin-left:10px;" size="mini"
+      >
+        <el-radio-button :label="1">尺寸不变-压缩</el-radio-button>
+        <el-radio-button :label="2">指定宽高压缩</el-radio-button>
+        <el-radio-button :label="3">比列压缩</el-radio-button>
+        <el-radio-button :label="4">添加文字水印</el-radio-button>
+        <el-radio-button :label="5">转换格式</el-radio-button>
+        <el-radio-button :label="6">添加图片水印</el-radio-button>
+        <el-radio-button :label="7">根据坐标裁剪</el-radio-button>
+        <el-radio-button :label="8">整屏添加文字水印</el-radio-button>
+        <el-radio-button :label="9">旋转</el-radio-button>
+      </el-radio-group>
+      <el-button
+        size="mini" type="info" class="filter-item"
+        style="margin-left:10px;" @click="handleReset"
+      >
+        重置
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <div style="display: flex;align-items: stretch;height: 100%;">
+        <div style="flex: 1;overflow-y: auto;">
+          <div v-show="type === 1">
+            <el-form
+              ref="formData1"
+              :model="listQuery1"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect1" v-model="listResult1.urls" :upload-type="1"
+                  :data="listQuery1" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-show="type === 2">
+            <el-form
+              ref="formData2"
+              :model="listQuery2"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="宽" prop="width">
+                <el-input
+                  v-model="listQuery2.width" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入宽"
+                />
+              </el-form-item>
+              <el-form-item label="高" prop="height">
+                <el-input
+                  v-model="listQuery2.height" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入高"
+                />
+              </el-form-item>
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect2" v-model="listResult2.urls" :upload-type="2"
+                  :data="listQuery2" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-show="type === 3">
+            <el-form
+              ref="formData3"
+              :model="listQuery3"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="压缩比例" prop="scale">
+                <el-input
+                  v-model="listQuery3.scale" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入压缩比例"
+                />
+              </el-form-item>
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect3" v-model="listResult3.urls" :upload-type="3"
+                  :data="listQuery3" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-show="type === 4">
+            <el-form
+              ref="formData4"
+              :model="listQuery4"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="位置" prop="position">
+                <el-input
+                  v-model="listQuery4.position" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入位置"
+                />
+              </el-form-item>
+              <el-form-item label="文本" prop="waterText">
+                <el-input
+                  v-model="listQuery4.waterText" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入文本"
+                />
+              </el-form-item>
+              <el-form-item label="旋转" prop="rotate">
+                <el-input
+                  v-model="listQuery4.rotate" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入旋转"
+                />
+              </el-form-item>
+              <el-form-item label="透明度" prop="opacity">
+                <el-input
+                  v-model="listQuery4.opacity" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入透明度"
+                />
+              </el-form-item>
+              <el-form-item label="图片质量" prop="quality">
+                <el-input
+                  v-model="listQuery4.quality" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入图片质量"
+                />
+              </el-form-item>
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect4" v-model="listResult4.urls" :upload-type="4"
+                  :data="listQuery4" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-show="type === 5">
+            <el-form
+              ref="formData5"
+              :model="listQuery5"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="转换后图片格式" prop="toformatImageType">
+                <el-input
+                  v-model="listQuery5.toformatImageType" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入转换后图片格式"
+                />
+              </el-form-item>
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect5" v-model="listResult5.urls" :upload-type="5"
+                  :data="listQuery5" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-show="type === 6">
+            <el-form
+              ref="formData6"
+              :model="listQuery6"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="宽度" prop="width">
+                <el-input
+                  v-model="listQuery6.width" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入宽度"
+                />
+              </el-form-item>
+              <el-form-item label="高度" prop="height">
+                <el-input
+                  v-model="listQuery6.height" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入高度"
+                />
+              </el-form-item>
+              <el-form-item label="位置" prop="position">
+                <el-input
+                  v-model="listQuery6.position" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入位置"
+                />
+              </el-form-item>
+              <el-form-item label="水印图片地址" prop="watermark">
+                <el-input
+                  v-model="listQuery6.watermark" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入水印图片地址"
+                />
+              </el-form-item>
+              <el-form-item label="透明度" prop="opacity">
+                <el-input
+                  v-model="listQuery6.opacity" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入透明度"
+                />
+              </el-form-item>
+              <el-form-item label="图片质量" prop="quality">
+                <el-input
+                  v-model="listQuery6.quality" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入图片质量"
+                />
+              </el-form-item>
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect6" v-model="listResult6.urls" :upload-type="6"
+                  :data="listQuery6" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-show="type === 7">
+            <el-form
+              ref="formData7"
+              :model="listQuery7"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="起始x坐标" prop="x">
+                <el-input
+                  v-model="listQuery7.x" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入起始x坐标"
+                />
+              </el-form-item>
+              <el-form-item label="起始y坐标" prop="y">
+                <el-input
+                  v-model="listQuery7.y" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入起始y坐标"
+                />
+              </el-form-item>
+              <el-form-item label="结束x坐标" prop="x1">
+                <el-input
+                  v-model="listQuery7.x1" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入结束x坐标"
+                />
+              </el-form-item>
+              <el-form-item label="结束y坐标" prop="y1">
+                <el-input
+                  v-model="listQuery7.y1" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入结束y坐标"
+                />
+              </el-form-item>
+              <el-form-item label="是否按照比例缩放" prop="keepAspectRatio">
+                <el-radio-group v-model="listQuery7.keepAspectRatio">
+                  <el-radio :label="true">是</el-radio>
+                  <el-radio :label="false">否</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect7" v-model="listResult7.urls" :upload-type="7"
+                  :data="listQuery7" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-show="type === 8">
+            <el-form
+              ref="formData8"
+              :model="listQuery8"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="图片宽度" prop="width">
+                <el-input
+                  v-model="listQuery8.width" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入图片宽度"
+                />
+              </el-form-item>
+              <el-form-item label="图片高度" prop="height">
+                <el-input
+                  v-model="listQuery8.height" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入图片高度"
+                />
+              </el-form-item>
+              <el-form-item label="间隔宽度" prop="intervalWidth">
+                <el-input
+                  v-model="listQuery8.intervalWidth" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入间隔宽度"
+                />
+              </el-form-item>
+              <el-form-item label="间隔高度" prop="intervalHeight">
+                <el-input
+                  v-model="listQuery8.intervalHeight" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入间隔高度"
+                />
+              </el-form-item>
+              <el-form-item label="水印内容列表" prop="waterTextList">
+                <el-input
+                  v-model="listQuery8.waterTextList" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入水印内容列表"
+                />
+              </el-form-item>
+              <el-form-item label="文字大小" prop="fontSize">
+                <el-input
+                  v-model="listQuery8.fontSize" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入文字大小"
+                />
+              </el-form-item>
+              <el-form-item label="透明度" prop="opacity">
+                <el-input
+                  v-model="listQuery8.opacity" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入透明度"
+                />
+              </el-form-item>
+              <el-form-item label="质量" prop="quality">
+                <el-input
+                  v-model="listQuery8.quality" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入质量"
+                />
+              </el-form-item>
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect8" v-model="listResult8.urls" :upload-type="8"
+                  :data="listQuery8" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-show="type === 9">
+            <el-form
+              ref="formData9"
+              :model="listQuery9"
+              :rules="{}"
+              size="mini"
+              label-suffix=":"
+              label-width="96px"
+            >
+              <el-form-item label="图片宽度" prop="width">
+                <el-input
+                  v-model="listQuery9.width" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入图片宽度"
+                />
+              </el-form-item>
+              <el-form-item label="图片高度" prop="height">
+                <el-input
+                  v-model="listQuery9.height" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入图片高度"
+                />
+              </el-form-item>
+              <el-form-item label="角度" prop="rotate">
+                <el-input
+                  v-model="listQuery9.rotate" clearable size="mini"
+                  style="width: 200px;" placeholder="请输入角度"
+                />
+              </el-form-item>
+              <el-form-item label="原图" prop="file">
+                <ImageSelect
+                  ref="ImageSelect9" v-model="listResult9.urls" :upload-type="9"
+                  :data="listQuery9" :limit="1"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div style="text-align: center;">
+            <el-button
+              type="primary" size="mini"
+              @click="handleSubmit"
+            >
+              提交
+            </el-button>
+          </div>
+        </div>
+        <div style="flex: 1;padding: 0 0 0 10px;border-left: 1px dashed #000;">
+          <div v-if="type === 1">
+            <div v-if="listResult1.urls && listResult1.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult1.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult1.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+          <div v-else-if="type === 2">
+            <div v-if="listResult2.urls && listResult2.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult2.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult2.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item && item.url }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item.url)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+          <div v-else-if="type === 3">
+            <div v-if="listResult3.urls && listResult3.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult3.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult3.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item && item.url }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item.url)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+          <div v-else-if="type === 4">
+            <div v-if="listResult4.urls && listResult4.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult4.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult4.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item && item.url }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item.url)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+          <div v-else-if="type === 5">
+            <div v-if="listResult5.urls && listResult5.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult5.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult5.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item && item.url }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item.url)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+          <div v-else-if="type === 6">
+            <div v-if="listResult6.urls && listResult6.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult6.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult6.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item && item.url }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item.url)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+          <div v-else-if="type === 7">
+            <div v-if="listResult7.urls && listResult7.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult7.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult7.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item && item.url }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item.url)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+          <div v-else-if="type === 8">
+            <div v-if="listResult8.urls && listResult8.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult8.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult8.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item && item.url }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item.url)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+          <div v-else-if="type === 9">
+            <div v-if="listResult9.urls && listResult9.urls.length" style="text-align: center;">
+              <div v-for="(item, index) in listResult9.urls.map(i => i.url)" :key="index" style="margin-bottom: 10px;">
+                <el-image
+                  :src="common.seamingImgUrl(item)" style="width:180px;height:180px;margin-right: 10px;" fit="cover"
+                  :preview-src-list="listResult9.urls.map(i => common.seamingImgUrl(i.url))"
+                />
+                <div style="margin-top: 10px;">
+                  <div>图片地址：</div>
+                  <div>{{ item && item.url }}</div>
+                </div>
+                <div style="margin-top: 10px;">
+                  <el-button
+                    type="primary" size="mini"
+                    @click="handleDownload(item.url)"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <span v-else>--</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import ImageSelect from '@/components/ImageSelect'
+// import {
+//   updateCompressImage,
+//   updateCompressImageWithWH,
+//   updateCompressImageWithScale,
+//   updateCompressAddTextWater,
+//   updateCompressFormatImage,
+//   updateCompressAddImageWater,
+//   updateCompressCutImage,
+//   updateCompressAddTextWaterFullScreen,
+//   updateCompressRotateImage
+// } from '@/api/setup'
+import { download } from '@/utils/file'
+
+export default {
+  name: 'ImageProcessing',
+  components: {
+    ImageSelect
+  },
+  data() {
+    return {
+      type: 1,
+
+      listQuery1: { }, // file: ''
+      listResult1: { urls: [] },
+
+      listQuery2: { width: '', height: '' }, // file: ''
+      listResult2: { urls: [] },
+
+      listQuery3: { scale: '' }, // file: ''
+      listResult3: { urls: [] },
+
+      listQuery4: { position: '', waterText: '', rotate: '', opacity: '', quality: '' }, // file: ''
+      listResult4: { urls: [] },
+
+      listQuery5: { toformatImageType: '' }, // file: ''
+      listResult5: { urls: [] },
+
+      listQuery6: { width: '', height: '', position: '', watermark: '', opacity: '', quality: '' }, // file: ''
+      listResult6: { urls: [] },
+
+      listQuery7: { x: '', y: '', x1: '', y1: '', keepAspectRatio: true }, // file: ''
+      listResult7: { urls: [] },
+
+      listQuery8: { width: '', height: '', intervalWidth: '', intervalHeight: '', waterTextList: '', fontSize: '', opacity: '', quality: '' }, // file: ''
+      listResult8: { urls: [] },
+
+      listQuery9: { width: '', height: '', rotate: '' }, // file: ''
+      listResult9: { urls: [] }
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    handleSubmit() {
+      if (this.type === 1) {
+        this.$refs.ImageSelect1.$refs.upload.submit()
+      } else if (this.type === 2) {
+        this.$refs.ImageSelect2.$refs.upload.submit()
+      } else if (this.type === 3) {
+        this.$refs.ImageSelect3.$refs.upload.submit()
+      } else if (this.type === 4) {
+        this.$refs.ImageSelect4.$refs.upload.submit()
+      } else if (this.type === 5) {
+        this.$refs.ImageSelect5.$refs.upload.submit()
+      } else if (this.type === 6) {
+        this.$refs.ImageSelect6.$refs.upload.submit()
+      } else if (this.type === 7) {
+        this.$refs.ImageSelect7.$refs.upload.submit()
+      } else if (this.type === 8) {
+        this.$refs.ImageSelect8.$refs.upload.submit()
+      } else if (this.type === 9) {
+        this.$refs.ImageSelect9.$refs.upload.submit()
+      }
+      // let _api
+      // let params
+      // if (this.type === 1) {
+      //   _api = updateCompressImage
+      //   params = this.listQuery1
+      // } else if (this.type === 2) {
+      //   _api = updateCompressImageWithWH
+      //   params = this.listQuery2
+      // } else if (this.type === 3) {
+      //   _api = updateCompressImageWithScale
+      //   params = this.listQuery3
+      // } else if (this.type === 4) {
+      //   _api = updateCompressAddTextWater
+      //   params = this.listQuery4
+      // } else if (this.type === 5) {
+      //   _api = updateCompressFormatImage
+      //   params = this.listQuery5
+      // } else if (this.type === 6) {
+      //   _api = updateCompressAddImageWater
+      //   params = this.listQuery6
+      // } else if (this.type === 7) {
+      //   _api = updateCompressCutImage
+      //   params = this.listQuery7
+      // } else if (this.type === 8) {
+      //   _api = updateCompressAddTextWaterFullScreen
+      //   params = this.listQuery8
+      // } else if (this.type === 9) {
+      //   _api = updateCompressRotateImage
+      //   params = this.listQuery9
+      // }
+      // if (this.type && params.file) {
+      //   const loading = this.$loading({ text: '提交中，请稍候……' })
+      //   try {
+      //     _api(params)
+      //     loading.close()
+      //     this.$message({ message: `${this.formData.id ? '编辑' : '添加'}成功!`, type: 'success' })
+      //     this.$emit('success')
+      //     this.visible = false
+      //   } catch (e) {
+      //     loading.close()
+      //   } finally {
+      //     loading.close()
+      //   }
+      // } else {
+      //   this.$message({ message: '缺少原图', type: 'warning' })
+      //   return false
+      // }
+    },
+    handleReset() {
+      if (this.type === 1) {
+        this.listQuery1 = { }
+        this.listResult1 = { urls: [] }
+      } else if (this.type === 2) {
+        this.listQuery2 = { width: '', height: '' }
+        this.listResult2 = { urls: [] }
+      } else if (this.type === 3) {
+        this.listQuery3 = { scale: '' }
+        this.listResult3 = { urls: [] }
+      } else if (this.type === 4) {
+        this.listQuery4 = { position: '', waterText: '', rotate: '', opacity: '', quality: '' }
+        this.listResult4 = { urls: [] }
+      } else if (this.type === 5) {
+        this.listQuery5 = { toformatImageType: '' }
+        this.listResult5 = { urls: [] }
+      } else if (this.type === 6) {
+        this.listQuery6 = { width: '', height: '', position: '', watermark: '', opacity: '', quality: '' }
+        this.listResult6 = { urls: [] }
+      } else if (this.type === 7) {
+        this.listQuery7 = { x: '', y: '', x1: '', y1: '', keepAspectRatio: true }
+        this.listResult7 = { urls: [] }
+      } else if (this.type === 8) {
+        this.listQuery8 = { width: '', height: '', intervalWidth: '', intervalHeight: '', waterTextList: '', fontSize: '', opacity: '', quality: '' }
+        this.listResult8 = { urls: [] }
+      } else if (this.type === 9) {
+        this.listQuery9 = { width: '', height: '', rotate: '' }
+        this.listResult9 = { urls: [] }
+      }
+    },
+    handleDownload(url) {
+      if (url) {
+        download(url, '处理图片', url.substring(url.lastIndexOf('.') + 1), false)
+      } else {
+        this.$message({ message: '缺少图片', type: 'warning' })
+      }
+      // if (this.type === 1) {
+      //   if (this.listResult1.url) {
+      //     download(this.listResult1.url, '处理图片', this.listResult1.url.substring(this.listResult1.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // } else if (this.type === 2) {
+      //   if (this.listResult2.url) {
+      //     download(this.listResult2.url, '处理图片', this.listResult2.url.substring(this.listResult2.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // } else if (this.type === 3) {
+      //   if (this.listResult3.url) {
+      //     download(this.listResult3.url, '处理图片', this.listResult3.url.substring(this.listResult3.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // } else if (this.type === 4) {
+      //   if (this.listResult4.url) {
+      //     download(this.listResult4.url, '处理图片', this.listResult4.url.substring(this.listResult4.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // } else if (this.type === 5) {
+      //   if (this.listResult5.url) {
+      //     download(this.listResult5.url, '处理图片', this.listResult5.url.substring(this.listResult5.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // } else if (this.type === 6) {
+      //   if (this.listResult6.url) {
+      //     download(this.listResult6.url, '处理图片', this.listResult6.url.substring(this.listResult6.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // } else if (this.type === 7) {
+      //   if (this.listResult7.url) {
+      //     download(this.listResult7.url, '处理图片', this.listResult7.url.substring(this.listResult7.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // } else if (this.type === 8) {
+      //   if (this.listResult8.url) {
+      //     download(this.listResult8.url, '处理图片', this.listResult8.url.substring(this.listResult8.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // } else if (this.type === 9) {
+      //   if (this.listResult9.url) {
+      //     download(this.listResult9.url, '处理图片', this.listResult9.url.substring(this.listResult9.url.lastIndexOf('.') + 1), false)
+      //   } else {
+      //     this.$message({ message: '缺少图片', type: 'warning' })
+      //   }
+      // }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+}
+</style>

src/views/threeSelection/counterList/components/DetailModal.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 商品信息 -->
+      <el-form-item label="商品ID" prop="id">
+        {{ formData.id || '--' }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+// import {  } from '@/api/threeSelection'
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '查看商品详情'
+      },
+      visible: false,
+      formData: {
+        id: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.id) {
+        this.getInfo(params.id)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await priceControlGetById({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          id: res.data.id || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+

src/views/threeSelection/counterList/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.name" clearable size="mini" class="filter-item"
+        style="width: 200px;" placeholder="请输入商品名称"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="ID" prop="id" fixed="left" />
+        <el-table-column align="center" width="150" label="商品名称" prop="name" fixed="left" show-overflow-tooltip />
+        <el-table-column label="商品主图" width="220" align="center" prop="xxx">
+          <template slot-scope="{ row }">
+            <el-xxx
+              v-if="row.xxx" lazy :src="common.seamingImgUrl(row.xxx)" style="width:80px;height:80px;"
+              fit="cover" :preview-src-list="[ common.seamingImgUrl(row.xxx) ]"
+            />
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="120" label="代金券" prop="xxx" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="上架时间" prop="createTime" />
+        <el-table-column align="center" width="150" label="入库时间" prop="createTime" />
+        <el-table-column align="center" width="150" label="购买库存" prop="createTime" />
+        <el-table-column align="center" width="150" label="赊销库存" prop="createTime" />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="300" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button
+              type="warning" size="mini"
+              @click="handleRemove(row)"
+            >
+              下架
+            </el-button>
+            <el-button
+              type="primary" size="mini"
+              @click="handleReturnGoods(row)"
+            >
+              退货
+            </el-button>
+            <el-button type="danger" size="mini" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+import DetailModal from './components/DetailModal'
+// import { xxx } from '@/api/threeSelection'
+
+export default {
+  name: 'CounterList',
+  components: {
+    DetailModal
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20,
+        name: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await xxx(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    },
+    handleRemove(row) {
+      this.$confirm('确定下架此项？')
+        .then(async () => {
+          await xxx({ id: row.id })
+          this.$message({ message: '下架成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    },
+    handleReturnGoods(row) {
+      this.$confirm('确定退货此项？')
+        .then(async () => {
+          await xxx({ id: row.id })
+          this.$message({ message: '退货成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    },
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await xxx({ id: row.id })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>