1. 优化

src/views/order/groupBuyingMr/index.vue

@@ -2,15 +2,7 @@
   <div class="app-container" :style="{'--q-height':qHeight}">
     <div class="app-container-query" ref="queryFormBox">
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="支付单号">
-          <el-input
-            v-model="queryParams.paymentId"
-            placeholder="请输入支付单号"
-            clearable
-            style="width: 240px;"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
+        
         <el-form-item label="订单号">
           <el-input
             v-model="queryParams.id"
@@ -89,6 +81,15 @@
             end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
+        <el-form-item label="支付单号">
+          <el-input
+            v-model="queryParams.paymentId"
+            placeholder="请输入支付单号"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
         <!-- <el-form-item label="场次时间">
           <el-date-picker
             style="width: 230px;"
@@ -207,7 +208,7 @@
               <span>{{ parseTime(scope.row.payTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="支付单号" align="center" :fixed="fixed" prop="paymentId" />
+          <el-table-column label="支付单号" align="center" prop="paymentId" />
           <el-table-column label="订单状态" align="center" prop="type">
             <template slot-scope="scope">
               <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>
@@ -317,7 +318,7 @@
         @close="handleCorporatePayClose"
         :before-close="handleCorporatePayClose">
         <el-form v-loading="corporatePayLoading" :model="ruleForm" :rules="corporatePayRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-          <el-form-item label="凭证上传" prop="photoList" required>
+          <!-- <el-form-item label="凭证上传" prop="photoList" required>
             <el-upload
                 ref="upload"
                 :class="form.photoList && form.photoList.length>=15 ? 'upload-box':''"
@@ -333,6 +334,46 @@
               >
                 <i class="el-icon-plus"></i>
               </el-upload>
+          </el-form-item> -->
+          <el-form-item label="凭证上传" prop="photoList">
+            <div style="display: flex;flex-wrap: wrap;">
+              <div 
+              v-for="(item,index) in form.photoList" 
+              :key="index"
+              style="width: 100px; height: 100px;margin-top: 5px; position: relative;border: 1px solid #999;border-radius: 5px;margin-right: 20px;">
+                <el-image 
+                  style="width: 100%; height: 100%"
+                  :src="item" 
+                  :preview-src-list="form.photoList">
+                </el-image>
+                <span @click="handleRemove(index)" style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
+                  <i class="el-icon-error"></i>
+                </span>
+              </div>
+              <div 
+              style="width: 100px; height: 100px;margin-top: 5px;" 
+              v-if="!form.photoList||form.photoList.length<15"
+              v-loading="actionUrlLoading"
+              element-loading-text="上传中..."
+              element-loading-spinner="el-icon-loading"
+              element-loading-background="rgba(0, 0, 0, 0.8)"
+              >
+                <el-upload
+                  class="avatar-uploader"
+                  :action="uploadObj.url"
+                  :headers="uploadObj.headers"
+                  :show-file-list="false"
+                  :before-upload="beforeAvatarUpload"
+                  :on-success="handleAvatarSuccess"
+                  :on-progress="handleAvatarProgress"
+                  :disabled="actionUrlLoading"
+                  :on-error="handleAvatarError"
+                  >
+                  <i class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </div>
+              
+            </div>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="请备注" type="textarea" maxlength="300" show-word-limit v-model="form.corporate.remark"></el-input>
@@ -482,6 +523,7 @@ export default {
       pagePerformTimeList: [], // 场次列表
       multiPerformDate:false,
       fixed: 'left',
+      actionUrlLoading: false,
     };
   },
   created() {
@@ -670,21 +712,23 @@ export default {
           })
         },
         async handleCorporatePay(row){
+          this.actionUrlLoading = false
           console.log('corporatePay',row);
           this.showCorporatePay = true;
           this.corporatePayLoading = true;
           let res = await getSelectById(row.id)
           this.form.orderId = row.id;
+          this.$set(this.form,'photoList',[])
           if(res.data.corporate){
             let urlList = res.data.corporate.voucherUrl.split(',')||[]
-            let urlListObj = []
-            urlList.forEach((item,index)=>{
-              urlListObj.push({
-                name: 'url_'+index,
-                url: item
-              })
-            })
-            this.$set(this.form,'photoList',urlListObj)
+            // let urlListObj = []
+            // urlList.forEach((item,index)=>{
+            //   urlListObj.push({
+            //     name: 'url_'+index,
+            //     url: item
+            //   })
+            // })
+            this.$set(this.form,'photoList',urlList)
             this.$set(this.form.corporate,'remark',res.data.corporate.remark)
           }else {
             this.$set(this.form,'photoList',[])
@@ -706,7 +750,7 @@ export default {
             return
           }
           this.corporatePayLoading = true;
-          const voucherUrl = this.form.photoList.map(item => item.url).join(",");
+          const voucherUrl = this.form.photoList.map(item => item).join(",");
           this.form.corporate.voucherUrl = voucherUrl;
           gotoCorporatePay(this.form).then((res)=>{
             this.$message.success(res.msg);
@@ -738,26 +782,26 @@ export default {
         this.$set(this.form.photoList, this.form.photoList.length, photo);
       }
     },
-    handleRemove(file, fileList) {
-      this.form.photoList.forEach((item, index) => {
-        if(item.uid == file.uid){
-          this.form.photoList.splice(index, 1)
-        }
-      })
-    },
+    // handleRemove(file, fileList) {
+    //   this.form.photoList.forEach((item, index) => {
+    //     if(item.uid == file.uid){
+    //       this.form.photoList.splice(index, 1)
+    //     }
+    //   })
+    // },
     /**
      * 上传文件之前之前
      * @date 2023-11-22
      * @param {any} file
      * @returns {any}
      */
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === "image/jpeg" || "image/png";
-      if (!isJPG) {
-        this.$message.error("上传头像图片只能是jpg或png格式!");
-      }
-      return isJPG;
-    },
+    // beforeAvatarUpload(file) {
+    //   const isJPG = file.type === "image/jpeg" || "image/png";
+    //   if (!isJPG) {
+    //     this.$message.error("上传头像图片只能是jpg或png格式!");
+    //   }
+    //   return isJPG;
+    // },
     /**
      * 导出报表
      * @date 2022-10-24
@@ -855,6 +899,37 @@ export default {
         });
       }).catch(() => {});
     },
+
+    /**  上传图片 单张  */
+  handleAvatarSuccess(response, file, fileList) {
+      console.log("res, file",response, file, fileList)
+      this.actionUrlLoading = false
+      if(response.code == 200) {
+        this.form.photoList.push(response.data.url)
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 <= 100;
+      let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
+      let typeList = ['png','jepg','jpg','gif']
+      const isJPG = typeList.includes(testmsg);
+      if (!isJPG) {
+        this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片图片大小不能超过 100MB!');
+      }
+      return isJPG && isLt2M;
+    },
+    handleAvatarProgress(){
+      this.actionUrlLoading = true
+    },
+    handleAvatarError() {
+      this.actionUrlLoading = false
+    },
+    handleRemove(index) {
+      this.form.photoList.splice(index,1)
+    },
   },
   beforeDestroy() {
     this.resizeObserver.unobserve(this.$refs.queryFormBox);
@@ -900,4 +975,28 @@ export default {
     display: none;
   }
 } 
+
+::v-deep .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  ::v-deep .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  ::v-deep .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+  }
+  ::v-deep .avatar {
+    width: 100px;
+    height: 100px;
+    display: block;
+  }
 </style>

src/views/order/orderMr/index.vue

@@ -2,15 +2,6 @@
   <div class="app-container" :style="{'--q-height':qHeight}">
     <div class="app-container-query" ref="queryFormBox">
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="支付单号">
-          <el-input
-            v-model="queryParams.paymentId"
-            placeholder="请输入支付单号"
-            clearable
-            style="width: 240px;"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
         <el-form-item label="订单号">
           <el-input
             v-model="queryParams.orderId"
@@ -120,6 +111,15 @@
             end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
+        <el-form-item label="支付单号">
+          <el-input
+            v-model="queryParams.paymentId"
+            placeholder="请输入支付单号"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
         <el-form-item label="下单时间">
           <el-date-picker
             style="width: 230px;"
@@ -243,7 +243,7 @@
               <span>{{ parseTime(scope.row.payTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="支付单号" align="center" :fixed="fixed" prop="paymentId" />
+          <el-table-column label="支付单号" align="center" prop="paymentId" />
           <el-table-column label="订单状态" align="center" prop="status">
             <template slot-scope="scope">
               <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>