front/front-vue/src/views/service/bill/billDetail.vue

<template>
<div class="app-container zap-main">
    <header-bar :list="headerList"></header-bar>
    <el-row class="zap-margin-top">
        <el-row class="zap-form">
            <el-form ref="form" :model="form" label-width="auto" :disabled="true">
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="账款类型" prop="wplIsInput" size="large">
                            <el-radio-group v-model="type" prop="type">
                                <el-radio-button label="00" v-if="type == '00'">应付账款</el-radio-button>
                                <el-radio-button label="01" v-if="type == '01'">应收账款</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="账款名称" prop="zbiName" size="large">
                            <el-input v-model="form.zbiName" maxlength="20" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="应付方" prop="zbiPayerId" size="large">
                            <el-input v-model="form.payerName" maxlength="20" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="应收方" prop="zbiPayeeId" size="large">
                            <el-input v-model="form.payeeName" maxlength="20" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="贸易日期" prop="zbiDate" size="large">
                            <el-date-picker v-model="form.zbiDate" value-format="yyyy-MM-dd" type="date">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item :label="
              type == '00'
                ? '预计付款日期'
                : type == '01'
                ? '预计收款日期'
                : '预计收/付款日期'
            " prop="zbiPayDate" size="large">
                            <el-date-picker v-model="form.zbiPayDate" value-format="yyyy-MM-dd" type="date">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="账款金额" prop="zbiAmount" size="large">
                            <el-input v-model="form.zbiAmount" maxlength="20">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="账款金额大写" size="large">
                            <el-input :disabled="true" :value="smallToBig(form.zbiAmount)">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="贸易合同编号" prop="zbiContractNo" size="large">
                            <el-input v-model="form.zbiContractNo" maxlength="20" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="贸易商品/服务" size="large">
                            <el-input v-model="form.zbiService" maxlength="20" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="配送企业" size="large">
                            <el-input v-model="form.zbiDistributor" maxlength="20" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 420px;">
                        <el-form-item label="配送订单号" size="large">
                            <el-input v-model="form.zbiOrderNo" maxlength="20" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" size="large">
                        <el-input v-model="form.zbiRemark" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="100" type="textarea" />
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
    </el-row>
    <el-row class="zap-margin-top">
        <div class="zap-form" style="padding-bottom: 67px;">
            <content-title title="发票列表" desc="请填写贸易相关的发票列表"></content-title>
            <content-total :amount="handleInput(allAmount())" :words="smallToBig(allAmount())"></content-total>

            <el-table :data="fileList" row-key="ziiId" default-expand-all :row-class-name="tableRowClassName" stripe="">
                <el-table-column type="index" width="50" align="center" />
                <el-table-column label="发票代码" align="center" prop="ziiNo" maxlength="10" />
                <el-table-column label="发票号码" align="center" prop="ziiNumber" maxlength="10" />
                <el-table-column label="开票日期" align="center" prop="ziiDate" />
                <el-table-column label="购方识别号" align="center" prop="ziiPurchaserNo" />
                <el-table-column label="销方识别号" align="center" prop="ziiSellerNo" />
                <el-table-column label="合计金额" align="center" prop="ziiTotalAmount" />
                <el-table-column label="价税合计" align="center" prop="ziiAmount" />
                <el-table-column label="校验结果" align="center" prop="ziiCheckStt" :formatter="checkSttFormat" />
                <el-table-column label="附件" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button class="zap-button-plain" size="mini" @click="invoicePictureCardPreview(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-row>
    <el-row class="zap-margin-top">
        <div class="zap-form pt20">
            <content-title title="贸易合同">
                <el-button class="WIDTH64" type="success">上传</el-button>
            </content-title>
            <el-upload class="mt20" :disabled="true" :file-list="contractList" :auto-upload="false" action="" ref="contractUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
            </el-upload>
        </div>
    </el-row>
    <el-row class="zap-margin-top">
        <div class="zap-form pt20">
            <content-title title="物流附件">
                <el-button class="WIDTH64" type="success">上传</el-button>
            </content-title>
            <el-upload class="mt20" :disabled="true" :file-list="logisticsList" :auto-upload="false" action="" ref="logisticsUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
            </el-upload>
        </div>
    </el-row>
    <el-row class="zap-margin-top">
        <div class="zap-form" style="pt20">
            <content-title title="其他附件">
                <el-button class="WIDTH64" type="success">上传</el-button>
            </content-title>
            <el-upload class="mt20" :disabled="true" :file-list="otherList" :auto-upload="false" action="" ref="otherUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
            </el-upload>
        </div>
    </el-row>

    <!-- 查看图片 -->
    <el-dialog :visible.sync="invoiceVisible">
        <img width="100%" :src="invoiceImageUrl" alt="" />
    </el-dialog>

    <el-row type="flex" justify="center" align="middle" style="height: 82px;">
        <el-button plain @click="submit()">取消</el-button>
    </el-row>
</div>
</template>

<script>
import {
    getBill,
    getInvoice,
    getFile,
    commitBill,
} from "@/api/service/bill/bill";
import {
    getOwnCompany,
    companyRelList
} from "@/api/common/company";
import {
    amtformat
} from "@/utils/amtCommon";
import {
    getToken
} from "@/utils/auth";
import HeaderBar from "@/components/HeaderBar/index.vue"
import ContentTitle from "@/components/ContentTitle/index.vue"
import ContentTotal from "@/components/ContentTotal/index.vue"

export default {
    name: "billDetail",
    components: {
        HeaderBar,
        ContentTitle,
        ContentTotal
    },
    data() {
        return {
            // 查询参数
            queryParams: {},
            // 表单参数
            form: {},
            //进度
            active: 0,
            //类型
            type: "00",
            //贸易合同
            contractList: [],
            //物流附件
            logisticsList: [],
            //其他附件
            otherList: [],
            //发票列表
            fileList: [],
            //合计金额
            totalPrice: 0,
            //验证结果
            checkSttOptions: [],
            //图片路径
            invoiceImageUrl: null,
            //图片显示
            invoiceVisible: false,
            //等待框
            fullscreenLoading: false,
            //链属企业
            companyRelList: [],
            //链属企业
            company: {},
        };
    },
    computed: {
        headerList() {
            return [{
                    icon: require('../../../assets/images/components/headerBar/icon_creater.png'),
                    label: '创建人：',
                    value: this.form.createUser
                },
                {
                    icon: require('../../../assets/images/components/headerBar/icon_calendar.png'),
                    label: '创建日期：',
                    value: this.parseTime(new Date(this.form.createTime))
                },
                {
                    icon: require('../../../assets/images/components/headerBar/icon_list.png'),
                    label: '编号：',
                    value: this.form.zbiNumber
                },
            ]
        }
    },
    created() {
        //进度
        this.active = 0;
        const zbiId = this.$route.params && this.$route.params.zbiId;
        this.fullscreenLoading = true;
        getOwnCompany().then((response) => {
            this.company = response.data;
        });
        this.getCompanyRel();
        this.getDetail(zbiId);
        getInvoice(zbiId).then((response) => {
            response.data.forEach((element) => {
                element.url = element.url + "/" + getToken();
            });
            this.fileList = response.data;
            this.invoice = this.fileList[0] ? this.fileList[0] : {};
            this.ids = [];
        });
        getFile("0", zbiId).then((response) => {
            response.data.forEach((element) => {
                element.url = element.url + "/" + getToken();
            });
            this.contractList = response.data;
        });
        //查询物流
        getFile("1", zbiId).then((response) => {
            response.data.forEach((element) => {
                element.url = element.url + "/" + getToken();
            });
            this.logisticsList = response.data;
        });
        //查询其他附件
        getFile("2", zbiId).then((response) => {
            response.data.forEach((element) => {
                element.url = element.url + "/" + getToken();
            });
            this.otherList = response.data;
        });
        this.getDicts("zc_invoice_checkStt").then((response) => {
            this.checkSttOptions = response.data;
        });
    },
    activated() {},
    methods: {
        //查询往来账款详情
        getDetail(zbiId) {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            getBill(zbiId).then((response) => {
                    this.form = response.data;
                    if (this.form.zbiPayerId == this.company.scyId) {
                        this.type = "00";
                    } else {
                        this.type = "01";
                    }
                    loading.close();
                })
                .catch(() => {
                    loading.close();
                });
        },
        //查询链属企业
        getCompanyRel(val) {
            this.queryParams.companyName = val;
            companyRelList(this.queryParams).then((response) => {
                this.companyRelList = response.data;
            });
        },
        //表格置灰
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (row.ziiCheckStt != "1") {
                return "warning-row";
            }
            return "";
        },
        //查看图片
        invoicePictureCardPreview(file) {
            this.invoiceImageUrl = file.url;
            this.invoiceVisible = true;
        },
        //发票合计
        allAmount() {
            var strarr = [0.00];
            for (let i in this.fileList) {
                if (this.fileList[i]["ziiCheckStt"] == "1") {
                    strarr.push(this.fileList[i]["ziiAmount"]);
                }
            }
            return (Math.round(eval(strarr.join("+")) * 100) / 100); //结果
            // return this.handleInput(eval(strarr.join("+"))); //结果
        },
        // 结束
        submit() {
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1);
        },
        //校验结果字典
        checkSttFormat(row, column) {
            return this.selectDictLabel(this.checkSttOptions, row.ziiCheckStt);
        },
        /* 金额展示 */
        handleInput(str) {
            return amtformat(str, 2, ".", ",");
        },
        /* //  将数字金额转换为大写金额 */
        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;
        },
    },
};
</script>

<style>
.el-table .warning-row {
    background: rgb(223, 223, 223);
}
</style><style lang="scss" scoped>
::v-deep .el-radio-button__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 35px;
    padding: 0;
    border: 1px solid #e0e0e0;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
    margin-right: 20px;
    border-radius: 17px;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 17px;
}

::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #4280f2;
    background: #ecf2fe;
    border-color: #b3ccfa;
    box-shadow: none;
}

.zap-form {
    padding: 20px;
    background-color: #ffffff;
}

.zap-table ::v-deep .el-form-item__content {
    width: 100%;
}

.zap-contract-add__upload {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 148px;
    height: 148px;
    border: dashed 1px #e0e0e0;
    background-color: #f4f5f6;
}

::v-deep .el-upload--picture-card {
    border: none;
}

::v-deep .el-icon-upload {
    font-size: 32px;
    color: #02c464;
}

.zap-upload__text {
    line-height: 1;
    margin-top: 12px;
    font-size: 12px;
    color: #333333;
}

.zap-contract-add__tip {
    width: 140px;
    margin-top: 15px;
    line-height: 19px;
    font-size: 12px;
    color: #999999;
}

// 设置缩略图模版。
.zap-contract-add__thumbnail {
    position: relative;
    width: 140px;
    height: 140px;
    cursor: pointer;
}

.zap-contract-add__thumbnail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zap-contract-add__fileimg {
    width: 56px;
}

.zap-contractadd__filename {
    margin-top: 12px;
    line-height: 19px;
    font-size: 14px;
    color: #333333;
    overflow: hidden; // 超出的文本隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
    display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
    -webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
    -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
}

.zap-contract-add__delete {
    position: absolute;
    top: 0;
    right: 10px;
}

::v-deep .el-icon-error {
    font-size: 26px;
    color: #f41d27;
}

.zap-contract-add__buttons {
    padding: 30px;
    text-align: center;
}

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

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    height: 80px !important;
    border-color: transparent;
    background-color: #F4F5F6;
}
</style>