修改右侧附件;订单退款判断;商品删除判断

src/components/ImageUpload/rightIndex.vue

+<template>
+  <div class="component-upload-image">
+    <div style="display: flex;">
+      <div >
+        <el-upload multiple :action="uploadImgUrl" 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: this.fileList.length >= this.limit }" :disabled="disabled">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <div class="el-upload__tip" slot="tip" v-if="showTip">          
+          <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>
+      </div>   
+      <div style="margin-left: 20px;" v-show="videoTag">
+        <video :src="videoSrc" class="avatar video-avatar" controls="controls" width="200"/>
+      </div>
+    </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 { getToken } from "@/utils/auth";
+import store from '@/store'
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 5,
+    },
+
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["png", "jpg", "jpeg","mp4"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示提示
+    arrType: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
+      // baseUrl: process.env.VUE_APP_BASE_API,
+      baseUrl: "",
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadOss", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+      disabled: true,
+      videoSrc:"",
+      videoTag:false
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(",");
+          // 然后将数组转为对象数组
+          this.fileList = list.map((item) => {
+            if (typeof item === "string") {
+              let suff=item.slice(item.lastIndexOf(".") + 1);
+              if(suff=="mp4"){
+                this.videoSrc=item;
+                this.videoTag=true;
+              } 
+              if (item.indexOf(this.baseUrl) === -1) {              
+               item = { name: this.baseUrl + item, url: this.baseUrl + item };
+              } else {
+                item = { name: item, url: item };
+              }
+            }
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    }
+  },
+  created() {
+    this.getDisable();
+  },
+  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));
+        this.videoSrc="";
+        this.videoTag=false;
+      }
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      let suffix=res.slice(res.lastIndexOf(".") + 1)
+      if(suffix=="mp4"){
+        this.videoSrc=res;
+        this.videoTag=true;
+      }  
+      this.$modal.closeLoading();
+      this.uploadList.push({ name: res, url: res });
+      if (this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.$emit("callback", this.listToString(this.fileList));
+        this.$emit("input", this.listToString(this.fileList));
+        this.$modal.closeLoading();
+      }
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      let isImg = false;
+      let fileExtension = "";
+      if (this.fileType.length) {        
+        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.$modal.msgError(
+          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件或者mp4视频!`
+        );
+        return false;
+      }
+      if (this.fileSize) {
+        if(fileExtension!="mp4"){
+          const isLt = file.size / 1024 / 1024 < this.fileSize;
+          if (!isLt) {
+            this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+            return false;
+          }
+        }        
+      }
+      this.$modal.loading("正在上传图片或mp4视频,请稍候...");
+      this.number++;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$modal.msgError("上传图片或mp4视频失败,请重试");
+      this.$modal.closeLoading();
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      let suffix=file.url.slice(file.url.lastIndexOf(".") + 1)
+      if(suffix=="mp4"){
+        this.dialogVisible = false;
+        return;
+      }
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = [];
+      separator = separator || "";
+      for (let i in list) {
+        strs.push(list[i].url.replace(this.baseUrl, "") + separator);
+      }
+
+      const size = strs.length;
+      if (size == 0) {
+        return "";
+      }
+      if (this.arrType) {
+        return strs;
+      }
+      if (size == 1) {
+        return strs[0];
+      }
+
+
+
+      return strs;
+    },
+    getDisable(){
+      const permissions = store.getters && store.getters.permissions;
+      if(permissions.length>0){
+        if(permissions[0]=="*:*:*"){
+          this.disabled=false
+          return;
+        }
+        for(let i=0;i<permissions.length;i++){          
+          if(permissions[i]=="system:config:edit"){            
+            this.disabled=false
+            return;
+          }         
+        }
+      }
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+
+::v-deep .el-upload-list--picture-card .el-upload-list__item {
+  width: 100px;
+  height: 130px;
+}
+
+// 去掉动画效果
+::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);
+}
+
+::v-deep .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: 110px;
+}
+.el-upload-list__item-delete{
+      display: none !important;
+
+}
+</style>

src/components/order/orderDetial.vue

@@ -134,7 +134,9 @@ export default {
       }else if(!regular.test(value)){    
         callback(new Error('请输入大于0的正数,最多保留2位小数'));     
       }else if(this.amount){
-        if(value>this.amount){
+        let refundAmountValue=parseFloat(value);
+        let amountValue=parseFloat(this.amount);
+        if(refundAmountValue>amountValue){
           callback(new Error('退款金额不能大于实付金额'));
         }else {
           callback();

src/main.js

@@ -35,7 +35,8 @@ import Editor from "@/components/Editor";
 // 文件上传组件
 import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload";
+import ImageUpload from "@/components/ImageUpload/index";
+import ImageRightUpload from "@/components/ImageUpload/rightIndex";
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview";
 // 字典标签组件
@@ -66,6 +67,7 @@ Vue.component("RightToolbar", RightToolbar);
 Vue.component("Editor", Editor);
 Vue.component("FileUpload", FileUpload);
 Vue.component("ImageUpload", ImageUpload);
+Vue.component("ImageRightUpload", ImageRightUpload);
 Vue.component("ImagePreview", ImagePreview);
 
 Vue.use(directive);

src/views/goods/goods/index.vue

@@ -196,7 +196,7 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      if(row.state!="4"){
+      if(row.state=="3"){
          this.$message.error("下架商品之后才可以删除!");
         return;
       }

src/views/system/base/components/right.vue

@@ -2,16 +2,16 @@
 	<div>
 		<el-form ref="form" label-width="80px">
 			<el-form-item label="停业">
-				<ImageUpload @callback="submit" v-model="list['closeDown']" :limit="1" />       
+				<ImageRightUpload @callback="submit" v-model="list['closeDown']" :limit="1" />       
 			</el-form-item>
 			<el-form-item label="制作中">
-				<ImageUpload @callback="submit" v-model="list['inProduction']" :limit="1"/>       
+				<ImageRightUpload @callback="submit" v-model="list['inProduction']" :limit="1"/>       
 			</el-form-item>
 			<el-form-item label="有待取单">
-				<ImageUpload @callback="submit" v-model="list['thereAOrder']" :limit="1" />       
+				<ImageRightUpload @callback="submit" v-model="list['thereAOrder']" :limit="1" />       
 			</el-form-item>
 			<el-form-item label="无待取单">
-				<ImageUpload @callback="submit" v-model="list['noOrder']" :limit="1"/>     
+				<ImageRightUpload @callback="submit" v-model="list['noOrder']" :limit="1"/>     
 			</el-form-item>
 		</el-form>
 	</div>