update：Deal页面代码优化

src/modules/payment/views/Deal.vue

 <template>
   <div>
-    <app-card title="支付明细信息">
-      <table border="1" width="100%" cellspacing="0" class="tableDetail">
-        <tr>
-          <th>支付人姓名</th>
-          <td>{{ row.payer_name }}</td>
-          <th>费用类型</th>
-          <td>{{ dealList.type_name }}</td>
-          <th>支付金额</th>
-          <td>{{ row.amount }}</td>
-          <th>支付状态</th>
-          <td>{{ row.payment_status }}</td>
-        </tr>
-        <tr>
-          <th>支付方式</th>
-          <td>{{ row.payment_method }}</td>
-          <th>其他支付方式</th>
-          <td>{{ row.payment_method_others }}</td>
-          <th>支付时间</th>
-          <td colspan="3">{{ row.payment_time }}</td>
-        </tr>
-        <tr>
-          <td></td>
-          <td colspan="7">
-            <img :src="row.payment_voucher_filename" alt="" />
-          </td>
-        </tr>
-        <tr>
-          <th>项目</th>
-          <td>{{ dealList.project_id_name }}</td>
-          <th>销售</th>
-          <td>{{ dealList.sales_rep_user_id_name }}</td>
-          <th>渠道</th>
-          <td colspan="3">{{ dealList.channel_id_name }}</td>
-        </tr>
-        <tr>
-          <th>备注</th>
-          <td colspan="7">{{ row.comment }}</td>
-        </tr>
-        <tr>
-          <th>创建时间</th>
-          <td colspan="3">{{ row.created_time }}</td>
-          <th>更新时间</th>
-          <td colspan="3">{{ row.updated_time }}</td>
-        </tr>
-      </table>
+    <!-- 财务 -->
+    <el-button type="danger" v-if="isFINANCE" @click="fetchToTicketDetail('FINANCE')">{{ btnText1 }}</el-button>
+    <!-- 业务 -->
+    <el-button type="danger" v-if="isBUSINESS" @click="fetchToTicketDetail('BUSINESS')">{{ btnText2 }}</el-button>
+    <app-card title="订单信息" style="margin-top: 20px">
+      <Order :dealList="dealList" />
     </app-card>
-    <app-card>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="支付状态" prop="payment_status">
-          <el-select v-model="form.payment_status" placeholder="请选择支付状态">
-            <el-option label="支付已到账" value="21"></el-option>
-            <el-option label="支付未到账" value="22"></el-option>
-            <el-option label="支付申请作废" value="23"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="手续费" label-width="80px" prop="service_charge">
-          <el-input v-model="form.service_charge"></el-input>
-        </el-form-item>
-        <el-form-item label="到账时间" prop="receiving_time">
-          <el-date-picker
-            v-model="form.receiving_time"
-            type="datetime"
-            range-separator="至"
-            start-placeholder="开始日期时间"
-            end-placeholder="结束日期时间"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            size="small"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item label="备注" prop="comment">
-          <el-input type="textarea" v-model="form.comment"> </el-input>
-        </el-form-item>
-        <el-form-item label="到账凭证" prop="receiving_voucher_filename">
-          <el-upload
-            list-type="picture-card"
-            action=""
-            multiple
-            :auto-upload="false"
-            :on-change="handleChange"
-            :on-remove="handleChange"
-            accept="image/*"
-          >
-            <i class="el-icon-plus"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="dealPay">提交</el-button>
-        </el-form-item>
-      </el-form>
+    <app-card title="学员信息">
+      <Student :dealList="dealList" />
+    </app-card>
+    <app-card title="收款信息">
+      <Collection :dealList="dealList" />
+    </app-card>
+    <app-card title="发票信息">
+      <Ticket :dealList="dealList" />
+    </app-card>
+    <app-card title="渠道信息">
+      <Channel :dealList="dealList" />
+    </app-card>
+    <app-card title="支付待确认记录">
+      <Toconfirm :dealList="dealList" />
+    </app-card>
+    <app-card title="支付确认记录">
+      <Confirmed :dealList="dealList" />
     </app-card>
   </div>
 </template>
 
 <script>
+// 组件
 import AppCard from '@/components/base/AppCard.vue'
-import { payConfirm } from '../api'
-
+import Order from '../components/Order.vue'
+import Student from '../components/Student.vue'
+import Collection from '../components/Collection.vue'
+import Ticket from '../components/Ticket.vue'
+import Channel from '../components/Channel.vue'
+import Toconfirm from '../components/Toconfirm.vue'
+import Confirmed from '../components/Confirmed.vue'
+import { payDetail, confirmPayDetail, cancelPayDetail } from '../api'
 export default {
-  components: { AppCard },
+  components: { AppCard, Order, Student, Collection, Ticket, Channel, Toconfirm, Confirmed },
   data() {
     return {
-      row: {},
-      dealList: {},
-      form: {
-        service_charge: '',
-        payment_status: '',
-        receiving_time: '',
-        comment: '',
-        receiving_voucher_filename: []
-      },
-      rules: {
-        payment_status: [{ required: true, message: '请选择支付状态', trigger: 'change' }],
-        service_charge: [{ required: true, message: '请输入手续费', trigger: 'blur' }],
-        receiving_time: [{ required: true, message: '请选择到账时间', trigger: 'blur' }],
-        comment: [{ required: true, message: '请输入备注', trigger: 'blur' }],
-        receiving_voucher_filename: [{ required: true, message: '请上传到账凭证', trigger: 'change' }]
-      }
+      id: '',
+      dealList: {}
     }
   },
-  mounted() {
-    this.row = JSON.parse(this.$route.query.row)
-    this.dealList = JSON.parse(this.$route.query.dealList)
+  computed: {
+    roles() {
+      return this.$store.state.roles
+    },
+    isFINANCE() {
+      return (
+        this.roles.includes('finance_manager') ||
+        this.roles.includes('finance_director') ||
+        this.roles.includes('developer')
+      )
+    },
+    isBUSINESS() {
+      return (
+        this.roles.includes('admissions_director') ||
+        this.roles.includes('dean_of_admissions') ||
+        this.roles.includes('developer')
+      )
+    },
+    btnText1() {
+      return this.dealList.finance_confirm_status === 0 ? '财务确认足额支付' : '财务取消足额支付'
+    },
+    btnText2() {
+      return this.dealList.business_confirm_status === 0 ? '业务确认足额支付' : '业务取消足额支付'
+    }
+  },
+  beforeMount() {
+    this.id = this.$route.params.id // 详情列表
+    // 获取发票详情信息
+    this.fetchTicketDetail()
+    this.$store.dispatch('getRoles')
   },
   methods: {
-    handleChange(file, fileList) {
-      this.form.receiving_voucher_filename = fileList
+    fetchTicketDetail() {
+      const params = { id: this.id }
+      payDetail(params)
+        .then(res => {
+          this.dealList = res.data.list[0]
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
     },
-    // 确认支付
-    dealPay() {
-      const id = this.row.id
-      this.$refs.formRef.validate().then(() => {
-        const params = Object.assign({ id: id }, this.form)
-        // 图片上传
-        this.form.receiving_voucher_filename.forEach((file, index) => {
-          params[`receiving_voucher_filename[${index}]`] = file.raw
+    // 财务(业务)确认(取消)支付
+    fetchToTicketDetail(val) {
+      const params = {
+        confirm_type: val,
+        id: this.id
+      }
+      if (this.dealList.payment_status === '70') {
+        // 确认
+        confirmPayDetail(params).then(res => {
+          this.fetchTicketDetail()
         })
-        delete params.receiving_voucher_filename
-        payConfirm(params).then(res => {
-          history.go(-1)
+      } else {
+        // 取消
+        cancelPayDetail(params).then(res => {
+          this.fetchTicketDetail()
         })
-      })
+      }
     }
   }
 }