front/front-vue/src/views/service/financeRecord/detailFinanceRecord.vue

<template>
<div class="app-container zap-main">
    <!-- 添加或修改融资记录对话框 -->
    <header-bar :list="headerList"></header-bar>
    <div class="zap-reason mt20">
        <div class="zap-reason__title">资方拒绝放款:</div>
        <div class="zap-reasaon__item">原因:{{reason ? reason : "暂无"}}；</div>
        <div class="zap-reason__item">
            <span class="zap-reason__notes">注:</span>
            本次融资申请已作废,请完善或达成相应融资条件后,再使用本融信发起融资;
        </div>
    </div>
    <div class="zap-title mt20">融资详情</div>
    <el-row class="zap-form">
        <el-col :span="12">
            <text-item label="选择融信" :value="financeInfList | pickerFilter(form.zfrFinanceId, 'zfiId', 'zfiNumber')"></text-item>
        </el-col>
        <el-col :span="12">
            <text-item label="融资收款账户" :value="form.zfrCollectionAccount"></text-item>
        </el-col>
        <el-col :span="12">
            <text-item label="融信金额" :value="form.zfiAmount" suffix="元"></text-item>
        </el-col>
        <el-col :span="12">
            <text-item label="申请融资方" :value="form.companyName"></text-item>
        </el-col>
        <el-col :span="12">
            <text-item label="融资金额" :value="form.zfrAmount" suffix="元"></text-item>
        </el-col>
        <el-col :span="12">
            <text-item label="融资利率" :value="form.zfrRate" suffix="%"></text-item>
        </el-col>
        <el-col :span="12">
            <text-item label="承诺还款日期" :value="form.zfrRepaymentDate"></text-item>
        </el-col>
        <el-col :span="12">
            <text-item label="服务费率" :value="form.zfpcrChargeRate" suffix="%"></text-item>
        </el-col>
        <template v-if="status == '01'">
            <el-col :span="12">
                <text-item label="融资成本" :value="form.costIng" suffix="元"></text-item>
            </el-col>
            <el-col :span="12">
                <text-item label="融资期限" :value="form.termIng" suffix="天"></text-item>
            </el-col>
            <el-col :span="12">
                <text-item label="净融资额" :value="form.amountIng" suffix="元"></text-item>
            </el-col>
            <el-col :span="12">
                <text-item label="融资状态" :value="statusOptions | pickerFilter(form.zfrStatus, 'dictValue', 'dictLabel')"></text-item>
            </el-col>
        </template>
        <template v-else>
            <el-col :span="12">
                <text-item label="预计融资成本" :value="form.cost" suffix="元"></text-item>
            </el-col>
            <el-col :span="12">
                <text-item label="预计融资期限" :value="form.term" suffix="天"></text-item>
            </el-col>
            <el-col :span="12">
                <text-item label="预计净融资额" :value="form.amount" suffix="元"></text-item>
            </el-col>
            <el-col :span="12">
                <text-item label="融资状态" :value="statusOptions | pickerFilter(form.zfrStatus, 'dictValue', 'dictLabel')"></text-item>
            </el-col>
        </template>
    </el-row>
    <div class="zap-title">融信凭证</div>
    <el-row class="zap-form pb20">
        <zap-bill 
        :open="openName"
        :openNum="openCode"
        :recipient="receiveName"
        :recipientNum="receiverCode"
        :amountWord="issuedAmount"
        :amount="form.zfiAmount"
        :letter="zfiPaymentNumber"
        :date="openDate"
        :approver="coreHandleName"
        :handler="coreFirstUser"
        ></zap-bill>
    </el-row>
    <div class="zap-title zap-margin-top">资产信息</div>
    <el-row class="zap-form zap-padding-bottom">
        <el-row class="zap-accounts-receivable">
            <el-col>
                <el-row type="flex" align="middle" style="height: 36px;">
                    <span class="label">金额大写：</span>
                    <span class="value" style="margin-right: 40px;">{{ smallToBig(allAmount()) }}</span>
                    <span class="label">消费金额：</span>
                    <span class="value">{{ allAmount() }} 元</span>
                </el-row>
            </el-col>
        </el-row>

        <el-table :data="billInfList" stripe>
            <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="zbiNumber" />
            <el-table-column label="账款名称" align="center" prop="zbiName" />
            <el-table-column label="应收企业" align="center" prop="payee" />
            <el-table-column label="应付企业" align="center" prop="payer" />
            <el-table-column label="还款时间" align="center" prop="zbiPayDate" />
            <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 class="zap-button-plain" size="mini" @click="handleDetail(scope.$index, billInfList)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row class="zap-margin-top zap-form">
        <div class="zap-title">业务合同</div>
        <el-row>
            <img style="width:50px;height:50px;" :key="dict.pfiFileId" src="../../../assets/images/pdf.png" v-for="dict in recordSealList" @click="handlePreview(dict)" :title="dict.pfiFileName" />
        </el-row>
        <!-- <el-row> -->
        <img style="width:50px;height:50px;" :key="dict.pfiFileId" src="../../../assets/images/pdf.png" v-for="dict in creditSealList" @click="handlePreview(dict)" :title="dict.pfiFileName">
        <!-- </el-row> -->
    </el-row>
    <el-row type="flex" align="middle" justify="center" style="height: 77px;">
        <el-button plain @click="cancel">取消</el-button>
        <!-- <el-button type="success" @click="submitForm"
      >提交</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="900px" append-to-body>
        <img :src="wordUrl" v-if="show" width="800px" height="500px" />
        <iframe :src="wordUrl" width="800px" height="500px" frameborder="1" v-if="heid" />
    </el-dialog>
</div>
</template>

<script>
import {
    getRecord,
    listBillInf,
    getRecordSealFile
} from "@/api/service/financeRecord/record";
import {
    listFinanceInf
} from "@/api/common/financeInf";
import {
    getFile,
    getCreditDetail
} from "@/api/service/credit/credit";
import {
    getToken
} from "@/utils/auth";
import {
    getUserProfile
} from "@/api/system/user";
import {
    getCreditSealFile
} from "@/api/service/credit/creditHandle";
import DetailBill from "@/views/service/credit/billDetail";
import HeaderBar from "@/components/HeaderBar/index.vue"
import TextItem from "@/components/TextItem/index.vue"
import ZapBill from "@/components/ZapBill/index.vue"
export default {
    name: "detailFinanceRecord",
    components: {
        DetailBill,
        HeaderBar,
        TextItem,
        ZapBill
    },
    data() {
        return {
            //往来账款id
            zbiId: '',
            //融资状态
            status: "",
            //融资编号
            number: "",
            //创建时间
            time: "",
            //创建人
            user: "",
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 全部融资记录表格数据
            recordList: [],
            //融信编号数据
            financeInfList: [],
            //应收账款
            billInfList: [],
            //合同附件
            contractFileList: [],
            //发票附件
            invoiceFileList: [],
            //其他文件
            otherFileList: [],
            //融资盖章文件
            recordSealList: [],
            //融信盖章文件
            creditSealList: [],
            //开立方
            openName: "",
            //开立社会码
            openCode: "",
            //开立银行
            openBank: "",
            //开立账户
            openAccount: "",
            //接收方
            receiveName: "",
            //接收方社会统一码
            receiverCode: "",
            //接收方银行
            receiverBank: "",
            //接收方账户
            receiverAccount: "",
            //起止日期
            stopDate: "",
            //承诺函编号
            zfiPaymentNumber:"",
            //电子签章日期
            openDate:"",
            //开立方审批人
            coreHandleName:"",
            //开立方经办人
            coreFirstUser:"",
            //税率
            zfiRate:"",
            //签发金额大写
            issuedAmount: "零元整",
            //拒绝放款原因
            reason: "暂无",
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            openDetailBill: false,
            //融资状态数据字典
            statusOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                zfrFinanceId: null,
                zfrNumber: null,
                zfrAmount: null,
                zfrRate: null,
                zfrHandler: null,
                zfrRepaymentDate: null,
                zfrApplyDate: null,
                zfrLoanDate: null,
                zfrApplyAmount: null,
                zfrApplyType: null,
                zfrStatus: null,
                zfrApproveStt: null,
                zfpcrLoantype: null,
                zfiProductId: null
            },
            // 表单参数
            form: {},
            //融资盖章
            formIng: {},
            //融信盖章
            formIngs: {},
            // 表单校验
            rules: {
                zfrFinanceId: [{
                    required: true,
                    message: "融信编号不能为空",
                    trigger: "blur"
                }],
                zfrAmount: [{
                    required: true,
                    message: "融资金额不能为空",
                    trigger: "blur"
                }]
            },
            openFile: false,
            wordUrl: "",
            show: false,
            heid: false
        };
    },
    computed: {
        headerList() {
            return [{
                    icon: require('../../../assets/images/components/headerBar/icon_creater.png'),
                    label: '创建人：',
                    value: this.user
                },
                {
                    icon: require('../../../assets/images/components/headerBar/icon_calendar.png'),
                    label: '创建日期：',
                    value: this.time
                },
                {
                    icon: require('../../../assets/images/components/headerBar/icon_list.png'),
                    label: '编号：',
                    value: this.number
                },
            ]
        }
    },
    created() {
        this.getDicts("ser_zfr_status").then(response => {
            this.statusOptions = response.data;
        });
        const zfrId = this.$route.params && this.$route.params.zfrId;
        getRecord(zfrId).then(response => {
            var self = this;
            self.number = response.data.zfrNumber;
            self.status = response.data.zfrStatus;
            self.reason = response.data.zfrReason;
            self.time = self.parseTime(
                new Date(response.data.createTime),
                "{y}-{m}-{d} {h}:{m}:{s}"
            );
            self.user = response.data.createUser;
            const zfrFinanceId = response.data.zfrFinanceId;
            self.form.zfrFinanceId = response.data.zfrFinanceId;
            self.form.zfrStatus = response.data.zfrStatus;
            self.form.zfrCollectionAccount = response.data.zfrCollectionAccount;
            listFinanceInf(zfrFinanceId).then(response => {
                debugger
                if (response.data) {
                    self.financeInfList = response.data;
                    for (let item of self.financeInfList) {
                        if (item.zfiId == zfrFinanceId) {
                            self.amount(item);
                        }
                    }
                }
            });
            listBillInf(zfrFinanceId)
                .then(response => {
                    self.billInfList = response.data;
                    self.loading = false;
                })
                .then(() => {
                    var queryParamsFile = {};
                    queryParamsFile.ticketList = self.billInfList;
                    getFile(queryParamsFile).then(response => {
                        if (response.data) {
                            //获取发票文件
                            self.invoiceFileList = response.data.invoiceFileList;
                            //获取合同文件
                            self.contractFileList = response.data.contractFileList;
                            //获取其他文件
                            self.otherFileList = response.data.otherFileList;
                        }
                    });
                })
                .then(() => {
                    self.formIng = response.data;
                    self.formIngs = response.data.zcFinanceInf;
                    setTimeout(() => {
                        self.getRecordSealFile();
                        self.getCreditSealFile();
                    }, 500);
                    //this.form = response.data;
                    // this.$set(
                    //   this.form,
                    //   "zfrRepaymentDate",
                    //   this.parseTime(
                    //     new Date(response.data.zfrRepaymentDate),
                    //     "{y}-{m}-{d}"
                    //   )
                    // );

                });
        });
        getUserProfile().then(response => {
            if (response.company) {
                this.$set(this.form, "companyName", response.company.scyName);
            }
        });
        // this.getFinanceInf();
    },
    filters: {
        pickerFilter(arr, id, filterKey, name) {
            let list = arr.filter((item) => {
                return item[filterKey] == id
            })
            return list[0] ? list[0][name] : ''
        }
    },
    methods: {
        /** 查询融信编号 */
        getFinanceInf() {
            this.loading = true;
            listFinanceInf().then(response => {
                this.financeInfList = response.data;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.reset();
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1);
            this.open = false;
        },
        // 表单重置
        reset() {
            this.form = {
                zfrId: null,
                zfrFinanceId: null,
                zfrNumber: null,
                zfrAmount: null,
                zfrRate: null,
                zfrHandler: null,
                zfrRepaymentDate: null,
                zfrApplyDate: null,
                zfrLoanDate: null,
                zfrApplyAmount: null,
                zfrApplyType: null,
                zfrStatus: "00",
                zfrApproveStt: null,
                zfrProfitSpare1: null,
                zfrProfitSpare2: null,
                zfrProfitSpare3: null,
                zfrProfitSpare4: null,
                zfrProfitSpare5: null,
                zfrProfitSpare6: null,
                zfrProfitSpare7: null,
                zfrProfitSpare8: null,
                zfrProfitSpare9: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            };
            this.resetForm("form");
        },
        /** 全部搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 全部重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        //全部 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.zfrId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /* 融信编号赋值融资金额 */
        amount(item) {
            debugger
            this.$set(this.form, "zfrAmount", item.zfiAmount);
            this.$set(this.form, "zfiAmount", item.zfiAmount);
            this.$set(this.form, "zfrRepaymentDate", item.zfiExpireDate);
            this.$set(this.form, "zfrRate", item.zfpcrRate);
            this.$set(this.form, "zfpcrLoanType", item.zfpcrLoanType);
            this.$set(this.form, "zfiProductId", item.zfiProductId);
            this.$set(this.form, "zfpcrChargeRate", item.zfpcrChargeRate);
            this.$set(this.form, "cost", item.cost);
            this.$set(this.form, "term", item.term);
            this.$set(this.form, "amount", item.amount);
            this.$set(this.form, "costIng", item.costIng);
            this.$set(this.form, "termIng", item.termIng);
            this.$set(this.form, "amountIng", item.amountIng);
            if (item.zfiId) {
                this.loading = true;
                listBillInf(item.zfiId)
                    .then(response => {
                        this.billInfList = response.data;
                        this.loading = false;
                    })
                    .then(() => {
                        var queryParamsFile = {};
                        queryParamsFile.ticketList = this.billInfList;
                        getFile(queryParamsFile).then(response => {
                            if (response.data) {
                                //获取发票文件
                                this.invoiceFileList = response.data.invoiceFileList;
                                //获取合同文件
                                this.contractFileList = response.data.contractFileList;
                                //获取其他文件
                                this.otherFileList = response.data.otherFileList;
                            }
                        });
                        /*   if (item.zfpcrLoanType == "0") {
                            listAccInf(item.zfiProductId).then(response => {
                              this.$set(this.form, "zfrCollectionAccount", response.msg);
                            });
                          } */
                    });
                getCreditDetail(item.zfiId).then((response) => {
                    if (response.data) {
                        //签发金额大写
                        this.issuedAmount = this.smallToBig(response.data.financeInf.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;
                        this.zfiRate = response.data.financeInf.zfiRate;
                        //付款承诺函编号
                        this.zfiPaymentNumber = response.data.financeInf.zfiPaymentNumber;
                        //电子签章日期
                        this.openDate = response.data.openDate;
                        //开立方审批人
                        this.coreHandleName = response.data.coreHandleName;
                        //开立方经办人
                        this.coreFirstUser = response.data.coreFirstUser;

                    }
                })
            }
        },
        //详情按钮
        handleDetail(index, rows) {
            this.zbiId = rows[index].zbiId
            this.openDetailBill = true
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: "Loading",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)"
                    });
                    addRecord(this.form)
                        .then(response => {
                            this.msgSuccess("新增成功");
                            loading.close();
                            this.$store.dispatch("tagsView/delView", this.$route);
                            this.$router.go(-1);
                        })
                        .catch(response => {
                            loading.close();
                        });
                }
            });
        },
        /* 清空 */
        clearBoth() {
            this.form.zfrAmount = "";
            this.form, (zfrRepaymentDate = "");
            this.form.zfrRate = "";
            this.form.zfpcrLoantype = "";
            this.billInfList = [];
            this.contractFileList = [];
            this.invoiceFileList = [];
            this.otherFileList = [];
        },
        //预览
        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;
        },
        //获取融资盖章文件
        getRecordSealFile() {
            var self = this
            getRecordSealFile(self.formIng).then(response => {
                debugger;
                if (response.data.list) {
                    self.recordSealList = response.data.list;
                }
            });
        },
        //获取融信盖章文件
        getCreditSealFile() {
            getCreditSealFile(this.formIngs).then((response) => {
                if (response.data.list) {
                    debugger
                    this.creditSealList = response.data.list;
                }
            });
        },
        //应收账款合计
        allAmount() {
            var strarr = [0.0];
            for (let i in this.billInfList) {
                strarr.push(this.billInfList[i]["zbiAmount"]);
            }
            return Math.fround(eval(strarr.join("+")) * 100) / 100; //结果
        },
        /* //  将数字金额转换为大写金额 */
        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;
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "sc-service/record/export", {
                    ...this.queryParams
                },
                `sc-service_record.xlsx`
            );
        }
    }
};
</script>

<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;
}

.zap-reason {
    padding: 20px;
    line-height: 24px;
    font-size: 14px;
    background-color: #ffffff;
}

.zap-reason__title {
    color: #FF2F2F;
}

.zap-reason__item {
    display: flex;
    align-items: center;
    color: #333333;
}

.zap-reason__notes {
    color: #FF2F2F;
}
</style>