1. 调整退款页面

src/views/order/viewers/index.vue

@@ -165,37 +165,24 @@
     :modal-append-to-body="false"
     :show-close="!tkDialogVisibleLoading"
     >
-      <div style="display: flex;width: 100%;height: calc( 100vh - 30vh );overflow: hidden;overflow-y: auto;">
-        <div style="display: 200px;box-sizing: border-box;">
-          <el-form :disabled="tkDialogVisibleLoading" :model="tkRuleForm" :rules="tkRules" ref="tkRuleForm" label-width="100px" class="demo-ruleForm">
-            <el-form-item label="退款总金额">
-              <span>{{ tkRuleForm.refundAmountAll }}</span>
-            </el-form-item>
-            <el-form-item label="退款原因" prop="refundReason">
-              <el-input 
-              type="textarea"
-              :rows="3" 
-              v-model="tkRuleForm.refundReason"></el-input>
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-              <el-input 
-              type="textarea"
-              :rows="3" 
-              v-model="tkRuleForm.remark"></el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-        <div style=" width: calc( 100% - 200px );box-sizing: border-box;padding-left: 40px;">
+      <div style="width: 100%;height: calc( 100vh - 30vh );overflow: hidden;overflow-y: auto;">
+        
+        <div style=" width: 100%;box-sizing: border-box;padding-left: 40px;">
           <el-table
           :data="tkSelectList"
           style="width: 100%">
+          <el-table-column
+            type="index"
+            label="序号"
+            >
+          </el-table-column>
           <el-table-column
             prop="orderId"
             label="订单号"
             >
           </el-table-column>
           <el-table-column
-            label="观影人数"
+            label="退款人数"
             >
             <template slot-scope="scope">
               <span>{{ scope.row.viewerList.length }}</span>
@@ -226,8 +213,43 @@
               </span>
             </template>
           </el-table-column>
+          <el-table-column
+            prop="errorRemark"
+            label="退款失败原因"
+            >
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button
+                v-if="!tkDialogVisibleLoading"
+                type="danger"
+                size="mini"
+                @click="deleteSelect(scope.$index, scope.row)">移除</el-button>
+            </template>
+          </el-table-column>
         </el-table>
         </div>
+        <div style="width: 100%;box-sizing: border-box;">
+          <el-form :disabled="tkDialogVisibleLoading" :model="tkRuleForm" :rules="tkRules" ref="tkRuleForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="" label-width="0">
+              <span style="font-weight: 600;margin-left: 40px;">订单合计{{ tkSelectList.length }}笔，</span>
+              <span style="font-weight: 600;">退款人数合计{{ tkRuleForm.refundPeople }}人，</span>
+              <span style="font-weight: 600;">退款金额合计￥{{ tkRuleForm.refundAmountAll }}</span>
+            </el-form-item>
+            <el-form-item label="退款原因" prop="refundReason">
+              <el-input 
+              type="textarea"
+              :rows="3" 
+              v-model="tkRuleForm.refundReason"></el-input>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input 
+              type="textarea"
+              :rows="3" 
+              v-model="tkRuleForm.remark"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
       </div>
       
       
@@ -317,7 +339,9 @@ export default {
         "orderId": null,
         "refundReason": null,
         "remark": null,
-        "refundAmount": 0.01,
+        "refundAmount": 0,
+        "refundPeople": 0,
+        "errorRemark": '',
         "viewerList": [
           {
             "viewerId": "1111",
@@ -327,7 +351,7 @@ export default {
       },
       tkRules: {
         refundReason: [{ required: true, message: '请输入退款原因', trigger: ['blur', 'change'] }],
-        remark: [{ required: true, message: '请输入备注', trigger: ['blur', 'change'] }],
+        remark: [{ required: false, message: '请输入备注', trigger: ['blur', 'change'] }],
       },
       refundSubmitAction: null,
       refundSubmitSuccess:[], // 成功条数
@@ -580,6 +604,8 @@ export default {
             "refundReason": null,
             "remark": null,
             "refundAmount": 0,
+            "refundPeople": 0,
+            "errorRemark": '',
             "viewerList": [
               {
                 "viewerId": item.id,
@@ -595,9 +621,11 @@ export default {
         }
       })
       let refundAmountAll = 0
+      let refundPeople = 0
       list.forEach((item,index)=>{
         if(item.viewerList && item.viewerList.length > 0){
           let refundAmount = 0
+          refundPeople = refundPeople + item.viewerList.length
           item.viewerList.forEach((item1,index1)=>{
             refundAmount = mathM.format(Number(refundAmount) + Number(item1.salePrice),10) 
             refundAmountAll = mathM.format(Number(refundAmountAll) + Number(item1.salePrice),10)
@@ -606,10 +634,32 @@ export default {
         }
       })
       this.tkRuleForm['refundAmountAll'] = refundAmountAll
+      this.tkRuleForm['refundPeople'] = refundPeople
       this.tkSelectList = JSON.parse(JSON.stringify(list))
       console.log("dfsfdsfsdfds====",this.tkSelectList)
       this.tkDialogVisible = true
     },
+    deleteSelect(index,row){
+      let refundAmountAll = 0
+      let refundPeople = 0
+      let list = JSON.parse(JSON.stringify(this.tkSelectList))
+      list.splice(index,1)
+      list.forEach((item,index)=>{
+        if(item.viewerList && item.viewerList.length > 0){
+          let refundAmount = 0
+          refundPeople = refundPeople + item.viewerList.length
+          item.viewerList.forEach((item1,index1)=>{
+            refundAmount = mathM.format(Number(refundAmount) + Number(item1.salePrice),10) 
+            refundAmountAll = mathM.format(Number(refundAmountAll) + Number(item1.salePrice),10)
+          })
+          list[index].refundAmount = refundAmount
+        }
+      })
+      this.tkRuleForm['refundAmountAll'] = refundAmountAll
+      this.tkRuleForm['refundPeople'] = refundPeople
+      this.tkSelectList = JSON.parse(JSON.stringify(list))
+    },
+    /**  提交退款   */
     tkSubmitForm(formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
@@ -654,10 +704,12 @@ export default {
         })
         this.refundSubmitAction = null
         if(res.code == 200) {
+          this.$set(this.tkSelectList[index],'errorRemark','')
           this.refundSubmitSuccess.push(this.tkSelectList[index].orderId)
         }else {
           this.refundSubmitError.push(this.tkSelectList[index].orderId)
           this.$message.error(`订单号:${this.tkSelectList[index].orderId}，退款提交失败`);
+          this.$set(this.tkSelectList[index],'errorRemark',res.msg)
         }
         if((index+1) < this.tkSelectList.length) {
           this.refundSubmitAction = this.tkSelectList[index+1].orderId
@@ -679,6 +731,7 @@ export default {
         this.refundSubmitAction = null
         this.refundSubmitError.push(this.tkSelectList[index].orderId)
         this.$message.error(`订单号:${this.tkSelectList[index].orderId}，退款提交失败`);
+        this.$set(this.tkSelectList[index],'errorRemark',"系统问题")
         if((index+1) < this.tkSelectList.length) {
           this.refundSubmitAction = this.tkSelectList[index+1].orderId
           setTimeout(() => {
@@ -700,10 +753,20 @@ export default {
         })
         this.refundSubmitAction = null
         if(res.code == 200) {
+          this.tkSelectList.forEach((item1,index1)=>{
+            if(this.refundSubmitErrorList[index].orderId == item1.orderId){
+              this.$set(this.tkSelectList[index1],'errorRemark','')
+            }
+          })
           this.refundSubmitSuccess.push(this.refundSubmitErrorList[index].orderId)
         }else {
           this.refundSubmitError.push(this.refundSubmitErrorList[index].orderId)
           this.$message.error(`订单号:${this.refundSubmitErrorList[index].orderId}，退款提交失败`);
+          this.tkSelectList.forEach((item1,index1)=>{
+            if(this.refundSubmitErrorList[index].orderId == item1.orderId){
+              this.$set(this.tkSelectList[index1],'errorRemark',res.msg)
+            }
+          })
         }
         if((index+1) < this.refundSubmitErrorList.length) {
           this.refundSubmitAction = this.refundSubmitErrorList[index+1].orderId
@@ -725,6 +788,11 @@ export default {
         this.refundSubmitAction = null
         this.refundSubmitError.push(this.refundSubmitErrorList[index].orderId)
         this.$message.error(`订单号:${this.refundSubmitErrorList[index].orderId}，退款提交失败`);
+        this.tkSelectList.forEach((item1,index1)=>{
+          if(this.refundSubmitErrorList[index].orderId == item1.orderId){
+            this.$set(this.tkSelectList[index1],'errorRemark', '系统问题')
+          }
+        })
         if((index+1) < this.refundSubmitErrorList.length) {
           this.refundSubmitAction = this.refundSubmitErrorList[index+1].orderId
           setTimeout(() => {