|
|
@@ -1,223 +1,233 @@
|
|
|
<template>
|
|
|
- <div class="app-container zap-main">
|
|
|
+<div class="app-container zap-main">
|
|
|
<div style="background-color: #ffffff;padding: 15px 25px;height:60px;vertical-align:middle;" v-if="form.fileId">
|
|
|
- <span style="margin-left:3%;">还款登记附件:</span>
|
|
|
- <span>{{form.fileName}}</span>
|
|
|
- <el-button style="float:right;margin-right:3%" size="mini" type="text" icon="el-icon-view" @click="handleDownload(form.fileUrl)">下载</el-button>
|
|
|
- <el-button style="float:right;margin-right:3%" size="mini" type="text" icon="el-icon-view" @click="handlePreview(form.fileName,form.fileUrl)">预览</el-button>
|
|
|
+ <span style="margin-left:3%;">还款登记附件:</span>
|
|
|
+ <span>{{form.fileName}}</span>
|
|
|
+ <el-button style="float:right;margin-right:3%" size="mini" type="text" icon="el-icon-view" @click="handleDownload(form.fileUrl)">下载</el-button>
|
|
|
+ <el-button style="float:right;margin-right:3%" size="mini" type="text" icon="el-icon-view" @click="handlePreview(form.fileName,form.fileUrl)">预览</el-button>
|
|
|
</div>
|
|
|
- <el-form
|
|
|
- class="zap-form"
|
|
|
- :inline="true"
|
|
|
- ref="form"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- label-width="auto"
|
|
|
- style="padding-top: 20px;margin-top:20px"
|
|
|
- disabled
|
|
|
- >
|
|
|
- <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-row class="pb20 zap-bg">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">还款明细编号</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfrPayNumber}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">最终付款方</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfrPayNumber}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">还款承诺编号</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfiPaymentNumber}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">承诺付款日期</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfrRepaymentDate}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">承诺付款金额</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfrLoanAmount}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">融信产品</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfpName}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">承诺付款账户</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfpcrAccount}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">付款账户开户行</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfpcrAccountBank}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="zap-form-text">
|
|
|
+ <span class="zap-form-text__label">还款状态</span>
|
|
|
+ <div class="zap-form-text__file">{{form.zfrApplyStatus}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="zap-content pt20 pb20 mt20">
|
|
|
<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-dialog :visible.sync="openFile" width="1000px" append-to-body>
|
|
|
- <img :src="wordUrl" v-if="show" width='450px' height='500px'/>
|
|
|
- <iframe :src="wordUrl" width='800px' height='600px' frameborder='1' v-if="heid"/>
|
|
|
- </el-dialog>
|
|
|
- </el-form>
|
|
|
+ <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-dialog :visible.sync="openFile" width="1000px" append-to-body>
|
|
|
+ <img :src="wordUrl" v-if="show" width='450px' height='500px' />
|
|
|
+ <iframe :src="wordUrl" width='800px' height='600px' frameborder='1' v-if="heid" />
|
|
|
+ </el-dialog>
|
|
|
+ </el-row>
|
|
|
<div style="margin-top: 100px; margin-left:45%">
|
|
|
- <el-button type="primary" plain @click="cancel">取消</el-button>
|
|
|
+ <el-button type="primary" plain @click="cancel">取消</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getRepayment } from "@/api/service/repayment/repayment";
|
|
|
-import {getToken} from "@/utils/auth";
|
|
|
+import {
|
|
|
+ getRepayment
|
|
|
+} from "@/api/service/repayment/repayment";
|
|
|
+import {
|
|
|
+ getToken
|
|
|
+} from "@/utils/auth";
|
|
|
export default {
|
|
|
- name: "detailRepayment",
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- disabled: false,
|
|
|
- // 日期范围
|
|
|
- dateRange: [],
|
|
|
- // 选中数组
|
|
|
- ids: [],
|
|
|
- // 弹出层标题
|
|
|
- title: "",
|
|
|
- // 总条数
|
|
|
- total: 0,
|
|
|
- // 是否显示弹出层
|
|
|
- open: false,
|
|
|
- openFile:false,
|
|
|
- show:false,
|
|
|
- heid:false,
|
|
|
- list: [],
|
|
|
- // 表单参数
|
|
|
- form: {},
|
|
|
- queryParams: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10
|
|
|
- },
|
|
|
- options: [],
|
|
|
- value: [],
|
|
|
- loading: false,
|
|
|
- // 表单校验
|
|
|
- rules: {}
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- const zfrId = this.$route.params && this.$route.params.zfrId;
|
|
|
- // this.reset();
|
|
|
- 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
|
|
|
- );
|
|
|
- if(!response.data[0].zfrCollectionAccount){
|
|
|
- response.data[0].zfrCollectionAccount = "线下面签"
|
|
|
- }
|
|
|
- this.list = response.data;
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
- activated() {
|
|
|
- this.reset();
|
|
|
- //this.getList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- reset() {
|
|
|
- this.form = {};
|
|
|
- this.resetForm("form");
|
|
|
+ name: "detailRepayment",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ disabled: false,
|
|
|
+ // 日期范围
|
|
|
+ dateRange: [],
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ openFile: false,
|
|
|
+ show: false,
|
|
|
+ heid: false,
|
|
|
+ list: [],
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ options: [],
|
|
|
+ value: [],
|
|
|
+ loading: false,
|
|
|
+ // 表单校验
|
|
|
+ rules: {}
|
|
|
+ };
|
|
|
},
|
|
|
- //还款状态字典反显
|
|
|
- applyStatusFormat(row, column) {
|
|
|
- return this.selectDictLabel(this.applyStatusOptions, row.zfrApplyStatus);
|
|
|
+ created() {
|
|
|
+ const zfrId = this.$route.params && this.$route.params.zfrId;
|
|
|
+ // this.reset();
|
|
|
+ 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
|
|
|
+ );
|
|
|
+ if (!response.data[0].zfrCollectionAccount) {
|
|
|
+ response.data[0].zfrCollectionAccount = "线下面签"
|
|
|
+ }
|
|
|
+ this.list = response.data;
|
|
|
+ });
|
|
|
+
|
|
|
},
|
|
|
- // 取消按钮
|
|
|
- cancel() {
|
|
|
- this.reset();
|
|
|
- this.$store.dispatch("tagsView/delView", this.$route);
|
|
|
- this.$router.go(-1);
|
|
|
- this.open = false;
|
|
|
+ activated() {
|
|
|
+ this.reset();
|
|
|
+ //this.getList();
|
|
|
},
|
|
|
- //附件预览
|
|
|
- handlePreview(fileName,fileUrl) {
|
|
|
- const pfiUrl = fileUrl;
|
|
|
- const pfiFileName = fileName;
|
|
|
- if (this.form.fileId) {
|
|
|
- console.log(pfiFileName.substr(-3));
|
|
|
- if (pfiFileName.substr(-3) == "pdf") {
|
|
|
- this.wordUrl = pfiUrl + "/" + getToken();
|
|
|
- this.show=false;
|
|
|
- this.heid=true;
|
|
|
- } else if (
|
|
|
- pfiFileName.substr(-3) == "jpg" ||
|
|
|
- pfiFileName.substr(-3) == "png" ||
|
|
|
- pfiFileName.substr(-3) == "JPG" ||
|
|
|
- pfiFileName.substr(-3) == "PNG" ||
|
|
|
- pfiFileName.substr(-4) == "jpeg" ||
|
|
|
- pfiFileName.substr(-3) == "JPEG"
|
|
|
- ) {
|
|
|
- this.wordUrl =
|
|
|
- pfiUrl +
|
|
|
- "/" +
|
|
|
- getToken();
|
|
|
- this.show=true;
|
|
|
- this.heid=false;
|
|
|
- console.log("====>",this.wordUrl);
|
|
|
- } else if (
|
|
|
- pfiFileName.substr(-3) == "doc" ||
|
|
|
- pfiFileName.substr(-3) == "DOC"||
|
|
|
- pfiFileName.substr(-4) == "docx" ||
|
|
|
- pfiFileName.substr(-3) == "DOCX"
|
|
|
- ) {
|
|
|
- this.wordUrl =
|
|
|
- "https://view.officeapps.live.com/op/view.aspx?src=" +
|
|
|
- pfiUrl +
|
|
|
- "/" +
|
|
|
- getToken() +
|
|
|
- "/" +
|
|
|
- pfiFileName;
|
|
|
- this.show=false;
|
|
|
- this.heid=true;
|
|
|
- console.log("====>",this.wordUrl);
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: "暂不支持该类型文件预览",
|
|
|
- type: "warning",
|
|
|
- });
|
|
|
- return;
|
|
|
+ methods: {
|
|
|
+ reset() {
|
|
|
+ this.form = {};
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ //还款状态字典反显
|
|
|
+ applyStatusFormat(row, column) {
|
|
|
+ return this.selectDictLabel(this.applyStatusOptions, row.zfrApplyStatus);
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.reset();
|
|
|
+ this.$store.dispatch("tagsView/delView", this.$route);
|
|
|
+ this.$router.go(-1);
|
|
|
+ this.open = false;
|
|
|
+ },
|
|
|
+ //附件预览
|
|
|
+ handlePreview(fileName, fileUrl) {
|
|
|
+ const pfiUrl = fileUrl;
|
|
|
+ const pfiFileName = fileName;
|
|
|
+ if (this.form.fileId) {
|
|
|
+ console.log(pfiFileName.substr(-3));
|
|
|
+ if (pfiFileName.substr(-3) == "pdf") {
|
|
|
+ this.wordUrl = pfiUrl + "/" + getToken();
|
|
|
+ this.show = false;
|
|
|
+ this.heid = true;
|
|
|
+ } else if (
|
|
|
+ pfiFileName.substr(-3) == "jpg" ||
|
|
|
+ pfiFileName.substr(-3) == "png" ||
|
|
|
+ pfiFileName.substr(-3) == "JPG" ||
|
|
|
+ pfiFileName.substr(-3) == "PNG" ||
|
|
|
+ pfiFileName.substr(-4) == "jpeg" ||
|
|
|
+ pfiFileName.substr(-3) == "JPEG"
|
|
|
+ ) {
|
|
|
+ this.wordUrl =
|
|
|
+ pfiUrl +
|
|
|
+ "/" +
|
|
|
+ getToken();
|
|
|
+ this.show = true;
|
|
|
+ this.heid = false;
|
|
|
+ console.log("====>", this.wordUrl);
|
|
|
+ } else if (
|
|
|
+ pfiFileName.substr(-3) == "doc" ||
|
|
|
+ pfiFileName.substr(-3) == "DOC" ||
|
|
|
+ pfiFileName.substr(-4) == "docx" ||
|
|
|
+ pfiFileName.substr(-3) == "DOCX"
|
|
|
+ ) {
|
|
|
+ this.wordUrl =
|
|
|
+ "https://view.officeapps.live.com/op/view.aspx?src=" +
|
|
|
+ pfiUrl +
|
|
|
+ "/" +
|
|
|
+ getToken() +
|
|
|
+ "/" +
|
|
|
+ pfiFileName;
|
|
|
+ this.show = false;
|
|
|
+ this.heid = true;
|
|
|
+ console.log("====>", this.wordUrl);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "暂不支持该类型文件预览",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- this.openFile = true;
|
|
|
- },
|
|
|
- //附件下载
|
|
|
- handleDownload(url){
|
|
|
+ this.openFile = true;
|
|
|
+ },
|
|
|
+ //附件下载
|
|
|
+ handleDownload(url) {
|
|
|
const pfiUrl = url;
|
|
|
- if(pfiUrl != null && pfiUrl != ''){
|
|
|
- window.open(pfiUrl +"/"+ getToken());
|
|
|
- }else{
|
|
|
+ if (pfiUrl != null && pfiUrl != '') {
|
|
|
+ window.open(pfiUrl + "/" + getToken());
|
|
|
+ } else {
|
|
|
this.$message({
|
|
|
- message: '该附件不存在！',
|
|
|
- type: 'warning'
|
|
|
+ message: '该附件不存在！',
|
|
|
+ type: 'warning'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
},
|
|
|
- }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style>
|
|
|
.single-select-table thead .el-table-column--selection .cell {
|
|
|
- display: none;
|
|
|
+ display: none;
|
|
|
}
|
|
|
</style>
|
zhanglb