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

<template>
<div class="app-container zap-main zap-credit-detail">
    <div v-if="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'" class="zap-No">
        <el-row type="flex" align="middle" :gutter="10">
            <el-col :span="6">
                <el-row type="flex" align="middle">
                    <img class="icon" src="../../../assets/images/icon_contract_no.png" alt="">
                    <span class="label">融信编号</span>
                    <span class="value">{{form.zfiNumber}}</span>
                </el-row>
            </el-col>
            <el-col :span="6">
                <el-row type="flex" align="middle">
                    <img class="icon" src="../../../assets/images/icon_calendar.png" alt="">
                    <span class="label">创建时间</span>
                    <el-date-picker disabled v-model="form.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-row>
            </el-col>
            <el-col :span="6">
                <el-row type="flex" align="middle">
                    <img class="icon" src="../../../assets/images/icon_person.png" alt="">
                    <span class="label">创建人</span>
                    <span class="value">{{form.createName}}</span>
                </el-row>
            </el-col>
            <el-col :span="6">
                <el-row type="flex" align="middle" justify="end">
                    <el-button type="success">成功按钮</el-button>
                </el-row>
            </el-col>
        </el-row>
    </div>
    <el-row class="zap-credit-detial__form zap-margin-top">
        <el-col :span="24">
            <el-form label-width="95px">
                <template v-if="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item size="large" label="开立方" prop="openName">
                                <el-input v-model="form.openName" readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item size="large" label="接收方" prop="receiveName">
                                <el-input v-model="form.receiveName" readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item size="large" label="授信额度" prop="zfpName">
                                <el-input v-model="form.zfpName" readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item size="large" label="签发有效期" prop="zfiEffectiveDate">
                                <el-date-picker disabled v-model="form.zfiEffectiveDate" type="date" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item size="large" label="承诺还款日" prop="zfiExpireDate">
                                <el-date-picker disabled v-model="form.zfiExpireDate" type="date" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <el-row>
                    <el-col :span="10">
                        <el-form-item size="large" label="签发金额">
                            <el-input v-model="form.zfiAmount" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <span class="issued-words__label">金额大写</span>
                        <span class="issued-words__value">{{issuedAmount}}</span>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
        <el-col :span="24">
            <div class="zap-margin-top" style="margin-bottom: 28px;">
                <table class="gridtable" style="width:100%;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>
            </div>
            <!-- 应收账款 -->
            <div class="zap-credit-detail__receivable">
                <el-row type="flex" justify="space-between" align="middle">
                    <el-col>
                        <el-row type="flex" align="middle">
                            <div class="title"><span class="snow-tag">*</span>应收账款</div>
                            <el-button type="primary">选择</el-button>
                        </el-row>
                    </el-col>
                    <el-col>
                        <el-row class="zap-credit-detail__receivable-total" type="flex" justify="end" align="middle">
                            <span class="label">合计金额：</span>
                            <span class="value">{{checkTotalAmt}}</span>
                            <span class="label" style="margin-left: 48px;">金额大写：</span>
                            <span class="value">{{checkTotalBigAmt}}</span>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
            <el-table class="zap-margin-top" :data="payList" style="width: 100%;">
                <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-col>
    </el-row>
    <!-- 签署合同 -->
    <el-row class="zap-margin-top">
        <div class="zap-title">附件信息</div>
        <div class="zap-enclosure">
            <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>
        </div>
    </el-row>
    <template v-if="this.companyType == '01'">
        <!-- 最终还款明细 -->
        <el-row class="zap-margin-top">
            <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="收款账户" 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-row>
    </template>
    <el-row type="flex" justify="center" align="middle" style="height: 67px">
        <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>
</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: null,
            //融资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) => {
                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 pfiUrl = row.pfiUrl;
            if (pfiUrl != null && pfiUrl != '') {
                window.open(pfiUrl + "/" + getToken());
            } else {
                this.$message({
                    message: '该附件不存在！',
                    type: 'warning'
                });
                return;
            }
        },
        //详情按钮
        handleDetail(index, rows) {
            debugger
            this.zbiId = rows[0].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>
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>
.zap-credit-detail {}

.zap-credit-detial__form {
    padding: 24px 12px 20px;
    background-color: #ffffff;
}

.zap-credet-detail__electronic--title {
    font-size: 14px;
    color: #333333;
}

.zap-credit-detial__title {
    padding: 20px 12px 28px;
    font-size: 16px;
    color: #333333;
}

.zap-credit-detail__receivable {
    .title {
        margin-right: 20px;
        font-size: 14px;
        color: #333333;
    }
}

.zap-credit-detail__receivable-total {
    .label {
        font-size: 12px;
        color: #999999;
    }

    .vlaue {
        font-size: 14px;
        color: #333333;
    }
}

.snow-tag {
    margin-right: 14px;
    font-size: 14px;
    color: #f41d27;
}

.issued-words__label,
.issued-words__value {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #333333;
}

.issued-words__label {
    margin-left: 20px;
}

.zap-enclosure {
    padding: 0 12px 18px;
    background-color: #ffffff;
}

.zap-title {
    height: 60px;
    line-height: 60px;
    padding: 0 25px;
    font-size: 16px;
    color: #333333;
    background-color: #ffffff;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 100%;
}

.zap-No {
    padding: 14px 25px;
    background-color: #ffffff;

    .icon {
        width: 18px;
        margin-right: 10px;
    }

    .label {
        white-space: nowrap;
        margin-right: 8px;
        font-size: 14px;
        color: #999999;
    }

    .value {
        font-size: 14px;
        color: #333333;
    }
}
</style>