front/front-vue/src/views/service/credit/creditDetail.vue

<template>
  <div class="app-container zap-main">
    <el-tabs>
      <!-- 资产信息-->
      <el-tab-pane label="资产信息">
        <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="auto">
          <div class="zap-title">融信详情</div>
          <el-row class="zap-form zap-padding-bottom">
            <table
              class="gridtable"
              style="width:80%;text-align:center"
              align="center"
              v-show="financeStatus != null && financeStatus != '00' && financeStatus != '03'"
            >
              <tr>
                <td rowspan="4">开立方</td>
                <td>全称</td>
                <td>{{openName}}</td>
                <td rowspan="4">接收方</td>
                <td>全称</td>
                <td>{{receiveName}}</td>
              </tr>
              <tr>
                <td>社会统一码</td>
                <td>{{openCode}}</td>
                <td>社会统一码</td>
                <td>{{receiverCode}}</td>
              </tr>
              <tr>
                <td>开户银行</td>
                <td>{{openBank}}</td>
                <td>开户银行</td>
                <td>{{receiverBank}}</td>
              </tr>
              <tr>
                <td>账号</td>
                <td>{{openAccount}}</td>
                <td>账号</td>
                <td>{{receiverAccount}}</td>
              </tr>
              <tr>
                <td colspan="2">粮信金额</td>
                <td colspan="4">
                  人民币(大写):{{issuedAmount}}
                  <br />
                  人民币(小写)￥{{form.zfiAmount}}
                </td>
              </tr>
              <tr>
                <td colspan="2">起止日期</td>
                <td colspan="4">{{stopDate}}</td>
              </tr>
            </table>
            <el-row
              v-show="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'"
            >
              <el-col :span="8">
                <el-form-item label="融信编号" prop="zfiNumber">
                  <el-input v-model="form.zfiNumber" style="width: 200px" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间" prop="createTime">
                  <el-date-picker
                    disabled
                    size="small"
                    style="width: 200px"
                    v-model="form.createTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建人" prop="createName">
                  <el-input v-model="form.createName" style="width: 200px" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              v-show="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'"
            >
              <el-col :span="8">
                <el-form-item label="开立方" prop="openName">
                  <el-input v-model="form.openName" style="width: 200px" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="接收方" prop="receiveName">
                  <el-input v-model="form.receiveName" style="width: 200px" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="授信额度" prop="zfpName">
                  <el-input v-model="form.zfpName" style="width: 200px" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              v-show="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'"
            >
              <el-col :span="8">
                <el-form-item label="签发有效期" prop="zfiEffectiveDate">
                  <el-date-picker
                    disabled
                    size="small"
                    style="width: 200px"
                    v-model="form.zfiEffectiveDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                <el-tooltip class="item" effect="light" content="签发有效期：即指定签发截止日期，对方企业在签发截止日内未处理该笔融信，本次融信操作将自动失效" placement="top">
                    <i class="el-icon-question" style="padding: 6px;font-size: 23px;"/>
                </el-tooltip>
              </el-col>
              <el-col :span="8">
                <el-form-item label="承诺还款日" prop="zfiExpireDate">
                  <el-date-picker
                    disabled
                    size="small"
                    style="width: 200px"
                    v-model="form.zfiExpireDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
          <div class="zap-title zap-margin-top">{{tableTitle}}</div>
          <el-row class="zap-form">
            <el-form-item label="合计金额:">
              <span>{{checkTotalAmt}}</span>
            </el-form-item>
            <el-form-item label="金额大写:">
              <span>{{checkTotalBigAmt}}</span>
            </el-form-item>

            <el-table :data="payList" style="width: 100%" stripe>
              <el-table-column label="账款名称" align="center" prop="zbiName" show-overflow-tooltip />
              <el-table-column label="应收企业" align="center" prop="receiveName" />
              <el-table-column label="应付企业" align="center" prop="payName" />
              <el-table-column
                label="预计还款期"
                align="center"
                prop="zbiPayDate"
                show-overflow-tooltip
              />
              <el-table-column label="金额" align="center" prop="zbiAmount" />
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                width="250"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleDetail(scope.$index, payList)"
                  >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row>
              <el-col :span="8">
                <el-form-item label="签发金额" prop="zfiAmount">
                  <el-input v-model="form.zfiAmount" style="width: 200px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="金额大写" prop="issuedAmount">{{issuedAmount}}</el-form-item>
              </el-col>
            </el-row>
            <p>请知悉，资产信息仅能接受指定的销售方与购买方的往来账款(含账款基本信息、贸易合同与贸易发票等)；如须使用系统尚未维护的往来账款，请点击新增应付账款
            </p>
          </el-row>
        </el-form>
        <el-row style="height: 109px;" type="flex" align="middle" justify="center">
          <el-button type="primary" plain @click="cancel">取消</el-button>
        </el-row>
        <!-- 附件详情 -->
        <el-dialog title="详情" :visible.sync="openDetailBill" width="1120px" append-to-body>
          <detail-bill :zbiId="this.zbiId" v-if="openDetailBill"></detail-bill>
        </el-dialog>
        <!--预览-->
        <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-tab-pane>
      <el-tab-pane label="签署合同">
        <el-table :data="creditSealList" style="width: 100%">
          <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip>
            <template slot-scope="scope">
              <img style="width:30px;height:30px;" src="../../../assets/images/pdf.png" />
              <span>{{scope.row.pfiFileName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="300"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleDownload(scope.row)"
              >下载</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handlePreview(scope.row)"
              >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="最终还款明细" v-if="this.companyType == '01'">
        <el-form
          :inline="true"
          ref="forms"
          :model="forms"
          label-width="auto"
          style="margin-top: 20px"
          disabled
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="还款明细编号:" prop="zfcName">
                <el-input v-model="forms.zfrPayNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最终付款方:" prop="core">
                <el-input v-model="forms.core" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="还款承诺函编号:" prop="zfiPaymentNumber">
                <el-input v-model="forms.zfiPaymentNumber" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="付款承诺日期:" prop="zfrRepaymentDate">
                <el-input v-model="forms.zfrRepaymentDate" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="承诺付款金额:" prop="zfrLoanAmount">
                <el-input v-model="forms.zfrLoanAmount" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="融信产品:" prop="zfpName">
                <el-input v-model="forms.zfpName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="承诺付款账户:" prop="zfpcrAccount">
                <el-input v-model="forms.zfpcrAccount" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付款账户开户行:" prop="zfpcrAccountBank">
                <el-input v-model="forms.zfpcrAccountBank" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="还款状态:" prop="zfrApplyStatus">
                <el-input v-model="forms.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-table>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getCreditDetail, getFile } from "@/api/service/credit/credit";
import { accAdd } from "@/utils/calculation";
import { getToken } from "@/utils/auth";
import { getCreditSealFile } from "@/api/service/credit/creditHandle";
import DetailBill from "@/views/service/credit/billDetail";
import { getRepayment } from "@/api/service/repayment/repayment";
export default {
  name: "addCredit",
  components: { DetailBill },
  data() {
    return {
      //企业类型
      companyType: null,
      //授信状态
      financeStatus: "",
      //融资id
      zfrId: null,
      //往来账款id
      zbiId: "",
      // 总条数
      total: 0,
      // 表单参数
      form: {},
      forms: {},
      // 表单校验
      rules: {},
      // 是否显示弹出层
      open: false,
      openDetailBill: false,
      //应付账款
      payList: [],
      //签发金额大写
      issuedAmount: "零元整",
      //合计选中的应付账款的金额
      checkTotalAmt: "0.00",
      //合计选中的应付账款的大写金额
      checkTotalBigAmt: "零元整",
      //标题
      tableTitle: "",
      //控制收款账号是否显示
      isShow: false,
      //获取类型
      createType: "",
      //合同附件
      contractFileList: [],
      //发票附件
      invoiceFileList: [],
      //其他文件
      otherFileList: [],
      openFile: false,
      wordUrl: "",
      show: false,
      heid: false,
      //盖章文件
      creditSealList: [],
      //开立方
      openName: null,
      //开立社会码
      openCode: null,
      //开立银行
      openBank: null,
      //开立账户
      openAccount: null,
      //接收方
      receiveName: null,
      //接收方社会统一码
      receiverCode: null,
      //接收方银行
      receiverBank: null,
      //接收方账户
      receiverAccount: null,
      //起止日期
      stopDate: null
    };
  },
  created() {
    const zfiId = this.$route.params && this.$route.params.zfiId;
    getCreditDetail(zfiId)
      .then(response => {
        debugger;
        if (response.data) {
          //融信信息
          this.form = response.data.financeInf;
          this.financeStatus = response.data.financeInf.zfiStatus;
          this.zfrId = response.data.zfrId;
          this.companyType = response.data.companyType;
          this.createType = response.data.financeInf.zfiCreateType;
          //核心开立
          if (response.data.financeInf.zfiCreateType == "1") {
            this.tableTitle = "资产信息";
          } else {
            this.tableTitle = "资产信息";
            //融资开立
            if (response.data.financeInf.zfiCreateType == "2") {
              //收款账号
              //非电子
              if (response.data.proComRel.zfpcrLoanType != "0") {
                this.isShow = true;
              }
            }
          }

          //接收方
          this.form.receiveName = response.data.receiveName;
          //授信额度
          this.form.zfpName = response.data.zfpName;
          //开立方
          this.form.openName = response.data.openName;
          //创建人
          this.form.createName = response.data.createName;
          //签发金额大写
          this.issuedAmount = this.smallToBig(this.form.zfiAmount);

          //给表格赋值
          this.openName = response.data.openName;
          this.openCode = response.data.openCode;
          this.openBank = response.data.openBank;
          this.openAccount = response.data.openAccount;
          this.receiveName = response.data.receiveName;
          this.receiverCode = response.data.receiverCode;
          this.receiverBank = response.data.receiverBank;
          this.receiverAccount = response.data.receiverAccount;
          this.stopDate = response.data.stopDate;
        }
        if (response.data.payList) {
          this.payList = response.data.payList.records;
          this.getReTotal(this.payList);
          //附件
          this.getFile(this.payList);
        }
        this.getCreditSealFile();
      })
      .then(() => {
        getRepayment(this.zfrId).then(response => {
          if (response.data && response.data.length > 0) {
            this.forms = response.data[0];
            this.forms.zfrApplyStatus = this.selectDictLabel(
              this.applyStatusOptions,
              this.forms.zfrApplyStatus
            );
            this.list = response.data;
          }
        });
        this.getDicts("zc_zfr_apply_status").then(response => {
          this.applyStatusOptions = response.data;
        });
      });
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
    /* 多选框跨页 */
    rowkeyCustomer(row) {
      return row.cciId;
    },
    //重新合计
    getReTotal(chooseTicket) {
      //合计
      this.checkTotalAmt = "0.00";
      for (var i = 0; i < chooseTicket.length; i++) {
        this.checkTotalAmt = accAdd(
          this.checkTotalAmt,
          chooseTicket[i].zbiAmount,
          2
        );
      }
      this.checkTotalBigAmt = this.smallToBig(this.checkTotalAmt);
      this.checkTotalAmt = this.amtFormat(this.checkTotalAmt);
    },
    //获取附件信息
    getFile(datas) {
      var queryParamsFile = {};
      queryParamsFile.ticketList = datas;
      getFile(queryParamsFile).then(response => {
        if (response.data) {
          //获取发票文件
          this.invoiceFileList = response.data.invoiceFileList;
          //获取合同文件
          this.contractFileList = response.data.contractFileList;
          //获取其他文件
          this.otherFileList = response.data.otherFileList;
        }
      });
    },
    //文件下载
    handleDownload(row) {
      const pfiFileUrl = row.pfiFileUrl;
      if (pfiFileUrl != null && pfiFileUrl != "") {
            const pfiFileName = row.pfiFileName;
            this.queryParamsDown.pfiFileUrl = pfiFileUrl;
            this.download(
                "sc-service/creditLine/jpgAuthorization",
                {
                    ...this.queryParamsDown
                },
                pfiFileName
            );
        // window.open(pfiUrl + "/" + getToken());
      } else {
        this.$message({
          message: "该附件不存在！",
          type: "warning"
        });
        return;
      }
    },
    //详情按钮
    handleDetail(index, rows) {
      debugger;
      this.zbiId = rows[index].zbiId;
      this.openDetailBill = true;
    },
    //格式化金额
    amtFormat(cellValue) {
      if (cellValue == null || cellValue == undefined || cellValue == "") {
        cellValue = "0.00";
      }
      cellValue += "";
      if (!cellValue.includes(".")) {
        cellValue += ".00";
      }
      return cellValue
        .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
          return $1 + ",";
        })
        .replace(/\.$/, "");
    },
    /* //  将数字金额转换为大写金额 */
    smallToBig(money) {
      //  将数字金额转换为大写金额
      var cnNums = new Array(
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      ); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整数完以后的单位
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      var integerNum; //金额整数部分
      var decimalNum; //金额小数部分
      //输出的中文金额字符串
      var chineseStr = "";
      var parts; //分离金额后用的数组，预定义
      if (money == "" || money == null || money == undefined) {
        return "零元零角零分";
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        return "超出最大处理数字";
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
      }
      //四舍五入保留两位小数,转换为字符串
      money = Math.round(money * 100).toString();
      integerNum = money.substr(0, money.length - 2);
      decimalNum = money.substr(money.length - 2);
      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != "0") {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == "") {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
        chineseStr += cnInteger;
      }
      return chineseStr;
    },
    //预览
    handlePreview(row) {
      const pfiUrl = row.pfiUrl;
      const pfiFileName = row.pfiFileName;
      if (row.pfiUrl) {
        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;
    },

    //获取盖章文件
    getCreditSealFile() {
      getCreditSealFile(this.form).then(response => {
        if (response.data.list) {
          this.creditSealList = response.data.list;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.uoloadfj .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.fjUoloadSty .el-upload--picture-card {
  display: none;
}

table th.star div::before {
  content: "*";
  color: red;
}
</style>
<style type="text/css">
table.gridtable {
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-collapse: collapse;
}
table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  background-color: #dedede;
}
table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
}
</style>
 <style lang="scss" scoped>
::v-deep .el-tabs__item {
  width: 105px;
  height: 55px;
  padding: 0;
  line-height: 55px;
  text-align: center;
  font-size: 16px;
}
::v-deep .el-tabs__header{
    margin-bottom: 0;
    background-color: #ffffff;
}
</style>