还款管理页面样式调整

front-vue/src/views/service/repayment/detailRepayment.vue

@@ -1,116 +1,65 @@
 <template>
-  <div class="app-container">
+  <div class="app-container zap-main">
     <el-form
+      class="zap-form"
       :inline="true"
       ref="form"
       :model="form"
       :rules="rules"
       label-width="auto"
-      style="margin-top: 20px"
+      style="padding-top: 20px"
       disabled
     >
-      <el-row>
-        <el-col :span="8">
-          <el-form-item
-            label="还款明细编号:"
-            prop="zfcName"
-          >
-            <el-input
-              v-model="form.zfrPayNumber"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="8"
-          > <el-form-item
-            label="最终付款方:"
-            prop="core"
-          >
-            <el-input
-              v-model="form.core"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="8">
-           <el-form-item
-            label="还款承诺函编号:"
-            prop="zfiPaymentNumber"
-          >
-            <el-input
-              v-model="form.zfiPaymentNumber"
-            /> </el-form-item
-        ></el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-           <el-form-item
-            label="付款承诺日期:"
-            prop="zfrRepaymentDate"
-          >
-            <el-input
-              v-model="form.zfrRepaymentDate"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="8">
-           <el-form-item
-            label="承诺付款金额:"
-            prop="zfrLoanAmount"
-          >
-            <el-input
-              v-model="form.zfrLoanAmount"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="8">
-           <el-form-item
-            label="融信产品:"
-            prop="zfpName"
-          >
-            <el-input
-              v-model="form.zfpName"
-            /> </el-form-item
-        ></el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-           <el-form-item
-            label="承诺付款账户:"
-            prop="zfpcrAccount"
-          >
-            <el-input
-              v-model="form.zfpcrAccount"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="8">
-           <el-form-item
-            label="付款账户开户行:"
-            prop="zfpcrAccountBank"
-          >
-            <el-input
-              v-model="form.zfpcrAccountBank"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="8">
-           <el-form-item
-            label="还款状态:"
-            prop="zfrApplyStatus"
-          >
-            <el-input
-              v-model="form.zfrApplyStatus"
-            /> </el-form-item
-        ></el-col>
-      </el-row>
-      <el-table v-loading="loading" :data="list" border>
-      <!-- <el-table-column label="序号" type="index" width="50" align="center">
-        <template slot-scope="scope">
-          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
-        </template>
-      </el-table-column>      -->
-      <el-table-column label="收款账户" align="center" prop="zfrCollectionAccount" :show-overflow-tooltip="true"/> 
-      <el-table-column label="收款账户户名" align="center" prop="supplier" :show-overflow-tooltip="true"/>
-      <el-table-column label="收款金额" align="center" prop="zfrLoanAmount" :show-overflow-tooltip="true" />
+      <el-form-item label="还款明细编号:" prop="zfcName" size="large">
+        <el-input v-model="form.zfrPayNumber" />
+      </el-form-item>
+      <el-form-item label="最终付款方:" prop="core" size="large">
+        <el-input v-model="form.core" />
+      </el-form-item>
+      <el-form-item label="还款承诺函编号:" prop="zfiPaymentNumber" size="large">
+        <el-input v-model="form.zfiPaymentNumber" />
+      </el-form-item>
+      <el-form-item label="付款承诺日期:" prop="zfrRepaymentDate" size="large">
+        <el-input v-model="form.zfrRepaymentDate" />
+      </el-form-item>
+      <el-form-item label="承诺付款金额:" prop="zfrLoanAmount" size="large">
+        <el-input v-model="form.zfrLoanAmount" />
+      </el-form-item>
+      <el-form-item label="融信产品:" prop="zfpName" size="large">
+        <el-input v-model="form.zfpName" />
+      </el-form-item>
+      <el-form-item label="承诺付款账户:" prop="zfpcrAccount" size="large">
+        <el-input v-model="form.zfpcrAccount" />
+      </el-form-item>
+      <el-form-item label="付款账户开户行:" prop="zfpcrAccountBank" size="large">
+        <el-input v-model="form.zfpcrAccountBank" />
+      </el-form-item>
+      <el-form-item label="还款状态:" prop="zfrApplyStatus" size="large">
+        <el-input v-model="form.zfrApplyStatus" />
+      </el-form-item>
+      <el-table v-loading="loading" :data="list" stripe>
+        <el-table-column
+          label="收款账户"
+          align="center"
+          prop="zfrCollectionAccount"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="收款账户户名"
+          align="center"
+          prop="supplier"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="收款金额"
+          align="center"
+          prop="zfrLoanAmount"
+          :show-overflow-tooltip="true"
+        />
       </el-table>
     </el-form>
-     <div style="margin-top: 100px; margin-left:45%">
-      <el-button type="info" @click="cancel">取消</el-button>
-      <!-- <el-button type="success" @click="submitForm"
-          >提交</el-button> -->
+    <div style="margin-top: 100px; margin-left:45%">
+      <el-button type="primary" plain @click="cancel">取消</el-button>
     </div>
   </div>
 </template>
@@ -133,49 +82,47 @@ export default {
       total: 0,
       // 是否显示弹出层
       open: false,
-      list:[],
+      list: [],
       // 表单参数
       form: {},
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 10
       },
       options: [],
       value: [],
       loading: false,
       // 表单校验
-      rules: {
-      },
+      rules: {}
     };
   },
   created() {
     const zfrId = this.$route.params && this.$route.params.zfrId;
     this.reset();
-    getRepayment(zfrId).then((response)=>{
-        this.form = response.data[0];
-        this.form.zfrApplyStatus = this.selectDictLabel(this.applyStatusOptions,this.form.zfrApplyStatus)
-        this.list = response.data;
-    })
-    this.getDicts("zc_zfr_apply_status").then((response) => {
-            this.applyStatusOptions = response.data;
-        });
+    getRepayment(zfrId).then(response => {
+      this.form = response.data[0];
+      this.form.zfrApplyStatus = this.selectDictLabel(
+        this.applyStatusOptions,
+        this.form.zfrApplyStatus
+      );
+      this.list = response.data;
+    });
+    this.getDicts("zc_zfr_apply_status").then(response => {
+      this.applyStatusOptions = response.data;
+    });
   },
   activated() {
     this.reset();
     //this.getList();
   },
   methods: {
-    reset(){
-      this.form = {
-      };
-       this.resetForm("form");
+    reset() {
+      this.form = {};
+      this.resetForm("form");
     },
     //还款状态字典反显
     applyStatusFormat(row, column) {
-        return this.selectDictLabel(
-            this.applyStatusOptions,
-            row.zfrApplyStatus
-        );
+      return this.selectDictLabel(this.applyStatusOptions, row.zfrApplyStatus);
     },
     // 取消按钮
     cancel() {
@@ -183,13 +130,12 @@ export default {
       this.$store.dispatch("tagsView/delView", this.$route);
       this.$router.go(-1);
       this.open = false;
-    },
-  },
+    }
+  }
 };
 </script>
 <style>
 .single-select-table thead .el-table-column--selection .cell {
   display: none;
 }
-
 </style>