优化支付到账页面

src/modules/payment/views/Deal.vue

 <template>
   <div>
-    <app-card title="支付明细信息" v-if="false">
+    <app-card title="支付明细信息" v-if="id">
       <table border="1" width="1200px" cellspacing="0">
         <tr>
           <th>支付人姓名</th>
@@ -36,7 +36,7 @@
         </tr>
         <tr>
           <th>备注</th>
-          <td colspan="7">{{ confirmDetail.taxpayer_remark }}</td>
+          <td colspan="7">{{ confirmDetail.comment }}</td>
         </tr>
         <tr>
           <th>创建时间</th>
@@ -47,47 +47,45 @@
       </table>
     </app-card>
     <app-card>
-      <el-form ref="formRef" :model="form" :rules="formRules">
-        <el-form-item label="支付状态" label-width="80px" prop="payment_status">
+      <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">
             <el-option label="已支付" :value="1"></el-option>
             <el-option label="未支付" :value="2"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="手续费" label-width="80px" prop="service_charge">
-          <el-input size="mini" v-model="form.service_charge"></el-input>
+          <el-input v-model="form.service_charge"></el-input>
         </el-form-item>
-        <el-form-item label="到账时间" label-width="80px" prop="receiving_time">
+        <el-form-item label="到账时间" prop="receiving_time">
           <el-date-picker
             v-model="form.receiving_time"
-            type="datetimerange"
+            type="datetime"
             range-separator="至"
             start-placeholder="开始日期时间"
             end-placeholder="结束日期时间"
             value-format="yyyy-MM-dd HH:mm:ss"
             size="small"
-            style="width: 360px"
           ></el-date-picker>
         </el-form-item>
-        <el-form-item label="备注" label-width="80px" prop="taxpayer_remark">
-          <el-input size="mini" v-model="form.remark"> </el-input>
+        <el-form-item label="备注" prop="comment">
+          <el-input type="textarea" v-model="form.comment"> </el-input>
         </el-form-item>
-        <el-form-item label="到账凭证" label-width="80px" prop="receiving_voucher_filename">
+        <el-form-item label="到账凭证" prop="receiving_voucher_filename">
           <el-upload
-            class="upload-demo"
-            drag
+            list-type="picture-card"
             action=""
             multiple
             show-file-list
-            :before-upload="beforeUpload"
+            :auto-upload="false"
+            :on-change="handleChange"
+            :on-remove="handleChange"
             accept="image/*"
           >
-            <img :src="form.receiving_voucher_filename" alt="" />
-            <!-- <div class="el-upload__text">拖到此处，或<em>点击上传</em></div> -->
           </el-upload>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" style="margin-left: 200px" @click="dealPay">提交</el-button>
+          <el-button type="primary" @click="dealPay">提交</el-button>
         </el-form-item>
       </el-form>
     </app-card>
@@ -97,82 +95,39 @@
 <script>
 import AppCard from '@/components/base/AppCard.vue'
 import { payConfirm, payDetail } from '../api'
-// import { splitStrLast } from '@/utils/util'
+
 export default {
+  props: { id: { type: String } },
   components: { AppCard },
   data() {
     return {
       confirmDetail: {},
-      uploadData: {},
-      id: '',
       form: {
         service_charge: '',
         payment_status: '',
         receiving_time: '',
-        taxpayer_remark: '',
+        comment: '',
         receiving_voucher_filename: []
       },
       rules: {
         payment_status: [{ required: true, message: '请选择支付状态', trigger: 'change' }],
-        service_charge: [
-          { required: true, message: '请输入手续费', trigger: 'blur' },
-          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
-        ],
-        taxpayer_remark: [
-          { required: true, message: '请输入备注', trigger: 'blur' },
-          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
-        ],
+        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' }]
-      },
-      importDisabled: false
-    }
-  },
-  computed: {
-    // 列表配置
-    tableOptions() {
-      return {
-        filters: [
-          {
-            type: 'select',
-            prop: 'project',
-            options: this.payState,
-            labelKey: 'project_name',
-            valueKey: 'project_id',
-            placeholder: '支付状态'
-          },
-          {
-            type: 'input',
-            prop: 'spu_name',
-            placeholder: '手续费'
-          },
-          { prop: 'date', slots: 'filter-date' },
-          {
-            type: 'input',
-            prop: 'spu_name',
-            placeholder: '备注'
-          }
-        ]
       }
     }
   },
   mounted() {
-    this.id = this.$route.params.id
-    // this.getPayDetail()
+    this.id && this.getPayDetail()
   },
   methods: {
-    beforeUpload(file, target) {
-      console.log(file)
-      this.form.receiving_voucher_filename.pust(file)
-    },
-    handleSuccess(res, file, target) {
-      this.fileLoading = ''
-      const _file = file.raw
-      this.form.receiving_voucher_filename = _file.src
+    handleChange(file, fileList) {
+      this.form.receiving_voucher_filename = fileList
     },
     // 获取支付信息
     getPayDetail() {
-      const params = { id: this.id }
-      payDetail(params).then(res => {
+      payDetail({ id: this.id }).then(res => {
         if (res.code === 0) {
           this.project = res.data.list[0]
           this.confirmDetail = res.data.list[0].confirmed_details[0]
@@ -181,19 +136,21 @@ export default {
     },
     // 确认支付
     dealPay() {
-      this.$refs.formRef.validate(valid => {
-        if (valid) {
-          const params = Object.assign({ id: this.id }, this.form)
-          console.log(params)
-          payConfirm(this.form).then(res => {
-            if (res.code === 0) {
-              this.$message.success('支付已经到账')
-              history.go(-1)
-            } else {
-              this.$message.error('提交失败')
-            }
-          })
-        }
+      this.$refs.formRef.validate().then(() => {
+        const params = Object.assign({ id: this.id }, this.form)
+        // 图片上传
+        this.form.receiving_voucher_filename.forEach((file, index) => {
+          params[`receiving_voucher_filename[${index}]`] = file.raw
+        })
+        delete params.receiving_voucher_filename
+        payConfirm(params).then(res => {
+          if (res.code === 0) {
+            this.$message.success('支付已经到账')
+            history.go(-1)
+          } else {
+            this.$message.error('提交失败')
+          }
+        })
       })
     }
   }