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

<template>
  <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>
    </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-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>
    <div style="margin-top: 100px; margin-left:45%">
      <el-button type="primary" plain @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
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");
    },
    //还款状态字典反显
    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){
            const pfiUrl = url;
            if(pfiUrl != null && pfiUrl != ''){
            window.open(pfiUrl +"/"+ getToken());
            }else{
                this.$message({
                message: '该附件不存在！',
                type: 'warning'
                });
                return;
            }
        },
  }
};
</script>
<style>
.single-select-table thead .el-table-column--selection .cell {
  display: none;
}
</style>