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

<template>
<div class="app-container zap-main">
    <el-row class="zap-margin-top">
        <div class="zap-title">基本信息</div>
        <el-row class="zap-form">
            <el-form ref="form" :model="form" :rules="rules" label-width="auto">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="账款类型" prop="wplIsInput" size="large">
                            <el-radio-group v-model="type" prop="type" @change="changePayer" :disabled="disabled">
                                <el-radio-button label="00" v-if="company.scyType != '02'">应付账款</el-radio-button>
                                <el-radio-button label="01" v-if="company.scyType != '01'">应收账款</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="账款名称" prop="zbiName" size="large">
                            <el-input v-model="form.zbiName" clearable placeholder="请输入账款名称" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="应付方" prop="zbiPayerId" size="large">
                            <el-select v-model="form.zbiPayerId" :disabled="true" filterable remote v-if="type == '00'">
                                <el-option :label="company.scyName" :value="company.scyId">
                                </el-option>
                            </el-select>
                            <el-select v-model="form.zbiPayerId" filterable clearable remote v-if="type == '01'">
                                <el-option v-for="(item, index) in companyRelList" :key="index" :label="
                  item.launchScyId == company.scyId
                    ? item.receiveScyName
                    : item.launchScyName
                " :value="
                  item.launchScyId == company.scyId
                    ? item.receiveScyId
                    : item.launchScyId
                ">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="应收方" prop="zbiPayeeId" size="large">
                            <el-select v-model="form.zbiPayeeId" :disabled="true" filterable remote v-if="type == '01'">
                                <el-option :label="company.scyName" :value="company.scyId">
                                </el-option>
                            </el-select>
                            <el-select v-model="form.zbiPayeeId" filterable clearable remote v-if="type == '00'">
                                <el-option v-for="(item, index) in companyRelList" :key="index" :label="
                  item.launchScyId == company.scyId
                    ? item.receiveScyName
                    : item.launchScyName
                " :value="
                  item.launchScyId == company.scyId
                    ? item.receiveScyId
                    : item.launchScyId
                ">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="贸易日期" prop="zbiDate" size="large">
                            <el-date-picker v-model="form.zbiDate" clearable value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item :label="
              type == '00'
                ? '预计付款日期'
                : type == '01'
                ? '预计收款日期'
                : '预计收/付款日期'
            " prop="zbiPayDate" size="large">
                            <el-date-picker v-model="form.zbiPayDate" clearable value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="账款金额" size="large">
                            <el-input :disabled="true" :value="allAmount()" maxlength="20">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="账款金额大写" size="large">
                            <el-input :disabled="true" :value="smallToBig(allAmount())">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="贸易合同编号" prop="zbiContractNo" size="large">
                            <el-input v-model="form.zbiContractNo" clearable placeholder="请输入贸易合同编号" maxlength="20" />
                        </el-form-item>
                        <el-form-item label="贸易商品/服务" size="large">
                            <el-input v-model="form.zbiService" clearable placeholder="请输入贸易商品/服务" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="配送企业" size="large">
                            <el-input v-model="form.zbiDistributor" clearable placeholder="请输入配送企业" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                        <el-form-item label="配送订单号" size="large">
                            <el-input v-model="form.zbiOrderNo" clearable placeholder="请输入配送订单号" maxlength="20" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="备注">
                        <el-input v-model="form.zbiRemark" placeholder="请输入备注" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="100" type="textarea" />
                    </el-form-item>
                </el-row>
            </el-form>
        </el-row>
    </el-row>
    <el-row class="zap-margin-top">
        <div class="zap-title">发票信息</div>
        <div class="zap-form">
            <el-form ref="invoice" label-width="auto" :inline="true">
                <el-row type="flex" align="middle" justify="center">
                    <el-col>
                        <el-form-item label="合计：" style="margin-right: 40px;">{{ allAmount() }}</el-form-item>
                        <el-form-item label="大写：">{{
            smallToBig(allAmount())
          }}</el-form-item>
                    </el-col>
                    <el-col>
                        <el-row type="flex" justify="end" align="middle">
                            <el-form-item>
                                <el-button type="danger" @click="delInvoice">删除</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="openUpload()">上传/修改</el-button>
                            </el-form-item>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>

            <el-table style="padding-bottom: 20px;" :data="fileList" @selection-change="handleInvoiceSelectionChange" row-key="categoryId" default-expand-all :row-class-name="tableRowClassName" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" stripe>
                <el-table-column type="selection" 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 size="mini" type="text" @click="invoicePictureCardPreview(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 上传附件 -->
            <el-dialog ref="uploadInvoice" class="zap-upload-invoice" :visible.sync="uploadOpen" width="600px" :show-close="false" append-to-body>
                <el-row slot="title" class="zap-upload-invoice__title" type="flex" align="middle" justify="space-between">
                    <span class="title">上传发票</span>
                    <i class="el-icon-close" @click="bindClickCloseUploadInvoice"></i>
                </el-row>
                <el-row class="zap-upload-invoice__top">
                    <span class="zap-upload-invoice__top-text">支持格式：.jpg，.jpeg，.png，单个文件不能超过3MB</span>
                </el-row>
                <el-row type="flex" align="middle" justify="center">
                    <el-upload class="zap-upload-invoice__form" drag ref="upload" :file-list="fileList" :auto-upload="true" :http-request="httpRequest" :before-remove="beforeRemove" :on-remove="invoiceRemove" :before-upload="beforeAvatarUpload" accept=".jpg,.jpeg,.png" action="" multiple>
                        <div class="zap-upload-invoce__inner">
                            <i class="el-icon-upload" style="font-size: 64px;"></i>
                            <div class="zap-upload-invoice__text">
                                将文件拖到此处，或<span>点击上传</span>
                            </div>
                            <div class="zap-upload-invoice__tip">
                                按住Ctrl可同时多选，单个文件不能超过2mb
                            </div>
                            <div class="zap-upload-invoice__tip">
                                严禁上传包含色情、暴力、反动等相关违法信息的文件。
                            </div>
                        </div>
                    </el-upload>
                </el-row>
                <el-row style="height: 109px;" type="flex" align="middle" justify="center">
                    <el-button type="primary" plain="" @click="bindClickCloseUploadInvoice">取消</el-button>
                    <el-button type="primary" @click="toCheck()">完成去验真</el-button>
                </el-row>
            </el-dialog>

            <!-- 发票验真 -->
            <el-dialog title="发票验真" :visible.sync="open" width="1050px" append-to-body>
                <el-container>
                    <el-aside width="300px" style="background-color: white">
                        <el-button type="primary" @click="openUploadInvoice">上传发票</el-button>
                        <el-header style="background-color: #dfe2e8; text-align: center">
                            <label>已上传发票列表</label>
                        </el-header>
                        <el-main style="height: 550px; border: groove">
                            <div :style="
                    item.ziiCheckStt == '1'
                      ? { 'background-color': '#a8f87f' }
                      : {}
                  " v-for="(item, index) in fileList" :label="item" :key="index">
                                <i class="el-icon-question" style="color: blue" v-if="item.ziiCheckStt == '0'"><label @click="changeInvoice(item)">
                                        <el-link :underline="false">{{
                        item.name
                      }}</el-link>
                                    </label></i>
                                <i class="el-icon-success" style="color: green" v-if="item.ziiCheckStt == '1'"><label @click="changeInvoice(item)">
                                        <el-link :underline="false">{{
                        item.name
                      }}</el-link>
                                    </label></i>
                                <i class="el-icon-error" style="color: red" v-if="item.ziiCheckStt == '2' || item.ziiCheckStt == '3'"><label @click="changeInvoice(item)">
                                        <el-link :underline="false">{{
                        item.name
                      }}</el-link>
                                    </label><label>{{ checkSttFormat(item) }}</label></i>
                                <el-link style="float: right" type="primary" :underline="false" @click="delInvoice(item)">删除</el-link>
                            </div>
                        </el-main>
                        <div style="text-align: center; margin-top: 20px">
                            <el-button type="primary" @click="toCheckAgian()">再次验证</el-button>
                            <el-button type="primary" @click="submitCheck()">保存并上传</el-button>
                        </div>
                    </el-aside>
                    <el-container>
                        <el-header height="300px">
                            <el-image style="width: 650px; height: 267px" :src="invoice.url" fit="scale-down" @click="invoicePictureCardPreview(invoice)"></el-image>
                            <p v-if="invoice.zbiName && invoice.ziiCheckStt == '3'" style="text-align: center; color: red">
                                发票重复，已存在名称为“{{ invoice.zbiName }}”的往来账款中!
                            </p>
                        </el-header>
                        <el-main>
                            <el-form ref="invoice" label-width="auto" :inline="true" label-position="top" :disabled="invoice.ziiCheckStt == '1'">
                                <el-form-item label="发票代码：">
                                    <el-input v-model="invoice.ziiNo" maxlength="20" />
                                </el-form-item>
                                <el-form-item label="发票号码：">
                                    <el-input v-model="invoice.ziiNumber" maxlength="20" />
                                </el-form-item>
                                <el-form-item label="开票日期：">
                                    <el-date-picker v-model="invoice.ziiDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="购货纳税人编号：">
                                    <el-input v-model="invoice.ziiPurchaserNo" maxlength="20" />
                                </el-form-item>
                                <el-form-item label="销货纳税人编号：">
                                    <el-input v-model="invoice.ziiSellerNo" maxlength="20" />
                                </el-form-item>
                                <el-form-item label="发票金额：">
                                    <el-input v-model="invoice.ziiTotalAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiTotalAmount,'0')" />
                                </el-form-item>
                                <el-form-item label="税价金额：">
                                    <el-input v-model="invoice.ziiAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiAmount,'1')" />
                                </el-form-item>
                            </el-form>
                        </el-main>
                        <el-footer>
                            <el-button type="primary" @click="queryDouble()" style="float: right">确定</el-button>
                        </el-footer>
                    </el-container>
                </el-container>
            </el-dialog>
        </div>
    </el-row>
    <el-row class="zap-margin-top">
        <div class="zap-title">合同附件</div>
        <div class="zap-form" style="padding-bottom: 20px;">
            <el-form ref="contract" label-width="auto" :inline="true">
            </el-form>
            <el-upload :file-list="contractList" :auto-upload="true" :http-request="httpRequestContract" action="" ref="contractUpload" list-type="picture-card" accept=".jpg,.jpeg,.png" :before-upload="beforeUpload" :on-preview="invoicePictureCardPreview" :before-remove="beforeRemove" :on-remove="handleRemoveContract">
                <!-- 触发文件选择框的内容 -->
                <div slot="trigger" class="zap-contract-add__upload">
                    <i class="el-icon-upload"></i>
                    <div class="zap-upload__text">上传文件</div>
                </div>
                <div slot="tip" class="zap-contract-add__tip">
                    支持格式：JPG/PNG </br>
                    单个文件不能超过2MB
                </div>
            </el-upload>
        </div>
    </el-row>
    <el-row class="zap-margin-top">
        <div class="zap-title">物流附件</div>
        <div class="zap-form" style="padding-bottom: 20px">
            <el-form ref="logistics" label-width="auto" :inline="true">
            </el-form>
            <el-upload :file-list="logisticsList" :auto-upload="true" :http-request="httpRequestLogistics" action="" ref="logisticsUpload" list-type="picture-card" accept=".jpg,.jpeg,.png" :before-upload="beforeUpload" :on-preview="invoicePictureCardPreview" :before-remove="beforeRemove" :on-remove="handleRemoveLogistics">
                <!-- 触发文件选择框的内容 -->
                <div slot="trigger" class="zap-contract-add__upload">
                    <i class="el-icon-upload"></i>
                    <div class="zap-upload__text">上传文件</div>
                </div>
                <div slot="tip" class="zap-contract-add__tip">
                    支持格式：JPG/PNG </br>
                    单个文件不能超过2MB
                </div>
            </el-upload>
        </div>
    </el-row>
    <el-row class="zap-margin-top">
        <div class="zap-title">其他附件</div>
        <div class="zap-form" style="padding-bottom: 20px">
            <el-form ref="other" label-width="auto" :inline="true">
            </el-form>
            <el-upload :file-list="otherList" :auto-upload="true" :http-request="httpRequestOther" action="" ref="otherUpload" list-type="picture-card" accept=".jpg,.jpeg,.png" :before-upload="beforeUpload" :on-preview="invoicePictureCardPreview" :before-remove="beforeRemove" :on-remove="handleRemoveOther">
                <!-- 触发文件选择框的内容 -->
                <div slot="trigger" class="zap-contract-add__upload">
                    <i class="el-icon-upload"></i>
                    <div class="zap-upload__text">上传文件</div>
                </div>
                <div slot="tip" class="zap-contract-add__tip">
                    支持格式：JPG/PNG </br>
                    单个文件不能超过2MB
                </div>
            </el-upload>
        </div>
    </el-row>

    <el-row type="flex" justify="center" align="middle" style="height: 82px;">
        <el-button type="primary" @click="submit()">提交</el-button>
    </el-row>

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

<script>
import {
    addBill,
    getInvoiceText,
    invoiceVerification,
    getInvoice,
    uploadBillFile,
    getFile,
    delFile,
    commitBill,
    getAmount,
    queryDouble,
} from "@/api/service/bill/bill";
import {
    getOwnCompany,
    companyRelList
} from "@/api/common/company";
import {
    amtformat
} from "@/utils/amtCommon";
import {
    getToken
} from "@/utils/auth";

export default {
    name: "billAdd",
    components: {},
    data() {
        return {
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 是否显示弹出层
            open: false,
            uploadOpen: false,
            // 查询参数
            queryParams: {},
            // 表单参数
            form: {
                zbiAmount: 0.0,
            },
            // 表单校验
            rules: {
                zbiName: [{
                        required: true,
                        message: "账款名称不能为空",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,
                        message: "账款名称只能包含中文、英文、数字",
                        trigger: ["blur", "change"],
                    },
                ],
                zbiPayerId: [{
                    required: true,
                    message: "应付方不能为空",
                    trigger: ["blur"],
                }, ],
                zbiDate: [{
                    required: true,
                    message: "贸易日期不能为空",
                    trigger: ["blur", "change"],
                }, ],
                zbiPayDate: [{
                    required: true,
                    message: "预计收/付款日期不能为空",
                    trigger: ["blur", "change"],
                }, ],
                zbiPayeeId: [{
                    required: true,
                    message: "应收方不能为空",
                    trigger: ["blur"],
                }, ],
                zbiAmount: [{
                        required: true,
                        message: "贸易金额不能为空",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern: /^(?:0|[1-9]\d{0,8})(?:\.\d{1,2})?$/,
                        message: "请输入正确的金额",
                        trigger: ["blur", "change"],
                    },
                ],
                zbiContractNo: [{
                        required: true,
                        message: "合同编号不能为空",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern: /^[a-zA-Z0-9]+$/,
                        message: "请输入数字或英文",
                        trigger: ["blur", "change"],
                    },
                ],
            },
            //类型
            type: "00",
            //合同附件
            contractList: [],
            //物流附件
            logisticsList: [],
            //其他附件
            otherList: [],
            //发票列表
            fileList: [],
            //全选状态
            checkAll: false,
            //全选状态
            isIndeterminate: false,
            //选中值
            checkedInvoice: [],
            //发票对象
            invoice: {},
            //合计金额
            totalPrice: 0,
            //验证结果
            checkSttOptions: [],
            //图片路径
            invoiceImageUrl: null,
            //图片显示
            invoiceVisible: false,
            //等待框
            fullscreenLoading: false,
            //链属企业
            companyRelList: [],
            //链属企业
            company: {},
            disabled: true,
            pickerOptionsStart: {
                disabledDate: (time) => {
                    if (this.form.zbiPayDate) {
                        return (
                            time.getTime() >
                            new Date(this.form.zbiPayDate).getTime() -
                            14 * 24 * 60 * 60 * 1000
                        );
                    }
                },
            },
            pickerOptionsEnd: {
                disabledDate: (time) => {
                    if (this.form.zbiDate) {
                        return (
                            time.getTime() <
                            new Date(this.form.zbiDate).getTime() + 13 * 24 * 60 * 60 * 1000
                        );
                    }
                },
            },
        };
    },
    created() {
        getOwnCompany()
            .then((response) => {
                this.company = response.data;
            })
            .then((response) => {
                if (this.company.scyType == "02") {
                    this.changePayer("01");
                    this.disabled = true;
                    this.type = "01";
                } else if (this.company.scyType == "01") {
                    this.changePayer("00");
                    this.disabled = true;
                    this.type = "00";
                } else {
                    this.changePayer("00");
                    this.type = "00";
                    this.disabled = false;
                }
            });
        this.getCompanyRel();
        this.getDicts("zc_invoice_checkStt").then((response) => {
            this.checkSttOptions = response.data;
        });
    },
    activated() {},
    methods: {
        //切换账款类型
        changePayer(val) {
            if (val == "00") {
                this.$set(this.form, "zbiPayerId", this.company.scyId);
                this.$set(this.form, "zbiPayeeId", null);
            } else if (val == "01") {
                this.$set(this.form, "zbiPayerId", null);
                this.$set(this.form, "zbiPayeeId", this.company.scyId);
            }
        },
        //查询链属企业
        getCompanyRel(val) {
            this.queryParams.companyName = val;
            companyRelList(this.queryParams).then((response) => {
                this.companyRelList = response.data;
            });
        },
        //全选
        handleCheckAllChange(val) {
            this.checkedInvoice = val ? this.fileList : [];
            this.ids = val ? this.fileList.map((item) => item.id) : [];
            this.isIndeterminate = false;
        },
        // 多选框选中数据
        handleInvoiceSelectionChange(selection) {
            console.log(selection)
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        //发票上传窗口
        openUpload() {
            this.open = true;
        },
        //上传
        submitUpload() {
            this.$refs.upload.submit();
        },
        //上传发票窗口
        openUploadInvoice() {
            this.uploadOpen = true;
        },
        //判重验证
        queryDouble() {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            if (
                this.invoice &&
                this.invoice.ziiCheckStt != "1"
            ) {
                queryDouble(this.invoice).then((response) => {
                    this.fileList.forEach((file) => {
                        if (response.id == file.id) {
                            file.ziiCheckStt = response.ziiCheckStt;
                            file.zbiName = response.zbiName;
                        }
                    });
                    // this.invoice = this.fileList[0] ? this.fileList[0] : {};
                    loading.close();
                }).catch((response) => {
                    loading.close();
                });
            } else {
                loading.close();
            }
        },
        //去验真
        toCheck() {
            this.uploadOpen = false;
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            let fd = new FormData(); // FormData 对象
            fd.append("fileList", JSON.stringify(this.fileList)); // 文件对象
            invoiceVerification(fd)
                .then((response) => {
                    response.forEach((element) => {
                        this.fileList.forEach((file) => {
                            if (element.id == file.id) {
                                file.ziiCheckStt = element.ziiCheckStt;
                                file.zbiName = element.zbiName;
                            }
                        });
                    });
                    this.invoice = this.fileList[0] ? this.fileList[0] : {};
                    loading.close();
                })
                .catch(() => {
                    loading.close();
                });
        },
        //重新验真
        toCheckAgian() {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            let checkList = this.checkedInvoice.filter((element) => {
                return element.ziiCheckStt == "0";
            });
            let fd = new FormData(); // FormData 对象
            fd.append("fileList", JSON.stringify(checkList)); // 文件对象
            invoiceVerification(fd)
                .then((response) => {
                    response.forEach((element) => {
                        this.fileList.forEach((file) => {
                            if (element.id == file.id) {
                                file.ziiCheckStt = element.ziiCheckStt;
                                file.zbiName = element.zbiName;
                            }
                        });
                    });
                    loading.close();
                })
                .catch(() => {
                    loading.close();
                });
        },
        //金额校验格式
        changeRate(e, input, type) {
            e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
            this.input = e.target.value;
            if ("0" == type) {
                this.invoice.ziiTotalAmount = e.target.value;
            } else if ("1" == type) {
                this.invoice.ziiAmount = e.target.value;
            }
        },
        //表格置灰
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (row.ziiCheckStt != "1") {
                return "warning-row";
            }
            return "";
        },
        //切换发票
        changeInvoice(item) {
            this.invoice = item;
        },
        //手动上传文件触发
        httpRequest(param) {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            let fileObj = param.file; // 相当于input里取得的files
            let fd = new FormData(); // FormData 对象
            fd.append("file", fileObj); // 文件对象
            fd.append("zbiId", this.form.zbiId); //文件类型
            getInvoiceText(fd)
                .then((response) => {
                    response.data.url = response.data.url + "/" + getToken();
                    var flag = true;
                    this.fileList.forEach((element) => {
                        if (element.ziiNo == response.data.ziiNo) {
                            flag = false;
                        }
                    });
                    if (flag) {
                        this.fileList.push(response.data);
                    } else {
                        let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
                        let idx = this.$refs.upload.uploadFiles.findIndex(
                            (item) => item.uid === uid
                        ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                        this.$refs.upload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
                        this.$message.error("检测发票重复上传，请检查后重试");
                    }
                    loading.close();
                })
                .catch(() => {
                    let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
                    let idx = this.$refs.upload.uploadFiles.findIndex(
                        (item) => item.uid === uid
                    ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.upload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
                    loading.close();
                });
        },
        beforeUpload(files) {
            var testmsg = files.name.substring(files.name.lastIndexOf(".") + 1);
            const extension = testmsg === "jpg";
            const extension2 = testmsg === "jpeg";
            const extension3 = testmsg === "png";
            if (!extension && !extension2 && !extension3) {
                this.$message.warning(`请选择图片格式文件`);
            }
            return extension || extension2 || extension3;
        },
        //上传前校验
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传图片只能是 JPG/PNG 格式");
            }
            if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 2MB");
            }
            return isJPG && isLt2M;
        },
        //上传合同
        submitUploadContract() {
            this.$refs.contractUpload.submit();
        },
        //上传物流
        submitUploadLogistics() {
            this.$refs.logisticsUpload.submit();
        },
        //上传其他
        submitUploadOther() {
            this.$refs.otherUpload.submit();
        },
        //手动上传合同触发
        httpRequestContract(param) {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            let fileObj = param.file; // 相当于input里取得的files
            let fd = new FormData(); // FormData 对象
            fd.append("file", fileObj); // 文件对象
            fd.append("zbiId", this.form.zbiId); //文件类型
            fd.append("type", "0"); //文件类型
            uploadBillFile(fd)
                .then((response) => {
                    response.data.url = response.data.url + "/" + getToken();
                    this.contractList.push(response.data);
                    loading.close();
                })
                .catch(() => {
                    let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
                    let idx = this.$refs.contractUpload.uploadFiles.findIndex(
                        (item) => item.uid === uid
                    ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.contractUpload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
                    loading.close();
                });
        },
        //手动上传物流触发
        httpRequestLogistics(param) {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            let fileObj = param.file; // 相当于input里取得的files
            let fd = new FormData(); // FormData 对象
            fd.append("file", fileObj); // 文件对象
            fd.append("zbiId", this.form.zbiId); //文件类型
            fd.append("type", "1"); //文件类型
            uploadBillFile(fd)
                .then((response) => {
                    response.data.url = response.data.url + "/" + getToken();
                    this.logisticsList.push(response.data);
                    loading.close();
                })
                .catch(() => {
                    let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
                    let idx = this.$refs.logisticsUpload.uploadFiles.findIndex(
                        (item) => item.uid === uid
                    ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.logisticsUpload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文
                    loading.close();
                });
        },
        //手动上传其他触发
        httpRequestOther(param) {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            let fileObj = param.file; // 相当于input里取得的files
            let fd = new FormData(); // FormData 对象
            fd.append("file", fileObj); // 文件对象
            fd.append("zbiId", this.form.zbiId); //文件类型
            fd.append("type", "2"); //文件类型
            uploadBillFile(fd)
                .then((response) => {
                    response.data.url = response.data.url + "/" + getToken();
                    this.otherList.push(response.data);
                    loading.close();
                })
                .catch(() => {
                    let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
                    let idx = this.$refs.otherUpload.uploadFiles.findIndex(
                        (item) => item.uid === uid
                    ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.otherUpload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
                    loading.close();
                });
        },
        //删除图片
        beforeRemove(file, fileList) {
            let a = true;
            if (file && file.status === "success") {
                a = this.$confirm(`确定移除 ${file.name}？`);
            }
            return a;
        },
        //删除合同附件
        handleRemoveContract(file, fileList) {
            var self = this;
            if (this.contractList) {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                delFile(file.id)
                    .then(function () {
                        self.contractList = self.contractList.reduce((total, current) => {
                            current.id !== file.id && total.push(current);
                            return total;
                        }, []);
                        loading.close();
                    })
                    .catch(() => {
                        loading.close();
                    });
            }
        },
        //删除物流附件
        handleRemoveLogistics(file, fileList) {
            var self = this;
            if (this.logisticsList) {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                delFile(file.id)
                    .then(function () {
                        self.logisticsList = self.logisticsList.reduce((total, current) => {
                            current.id !== file.id && total.push(current);
                            return total;
                        }, []);
                        loading.close();
                    })
                    .catch(() => {
                        loading.close();
                    });
            }
        },
        //删除其他附件
        handleRemoveOther(file, fileList) {
            var self = this;
            if (this.otherList) {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                delFile(file.id)
                    .then(function () {
                        self.otherList = self.otherList.reduce((total, current) => {
                            current.id !== file.id && total.push(current);
                            return total;
                        }, []);
                        loading.close();
                    })
                    .catch(() => {
                        loading.close();
                    });
            }
        },
        //删除附件
        delFile(row) {
            var self = this;
            const ids = row.id || this.ids;
            self.fullscreenLoading = true;
            delFile(ids).then(function () {
                self.fullscreenLoading = false;
            });
        },
        //查看图片
        invoicePictureCardPreview(file) {
            this.invoiceImageUrl = file.url;
            this.invoiceVisible = true;
        },
        //删除发票
        invoiceRemove(file, fileList) {
            var self = this;
            if (file && file.status === "success") {
                this.fileList = this.fileList.filter((item) => {
                    if (item.uid !== file.uid) {
                        return item;
                    } else {
                        const loading = this.$loading({
                            lock: true,
                            text: "Loading",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        delFile(item.id)
                            .then(function () {
                                loading.close();
                                self.msgSuccess("删除成功");
                            })
                            .catch(() => {
                                loading.close();
                            });
                    }
                });
            }
        },
        //删除发票
        delInvoice(row) {
            var self = this;
            console.log(this.ids);
            const ids = row.id ? [row.id] : this.ids;
            if (ids && ids.length != 0) {
                this.$confirm("是否确认删除此数据项?", "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(function () {
                        self.fullscreenLoading = true;
                        return delFile(ids);
                    })
                    .then(() => {
                        self.fullscreenLoading = false;
                        ids.forEach((element) => {
                            self.fileList = self.fileList.reduce((total, current) => {
                                current.id !== element && total.push(current);
                                return total;
                            }, []);
                        });
                        this.msgSuccess("删除成功");
                    });
            }
        },
        //确认发票
        submitCheck() {
            this.open = false;
        },
        //发票合计
        allAmount() {
            var strarr = [0.0];
            for (let i in this.fileList) {
                // if (this.fileList[i]["ziiCheckStt"] == "1") {
                // strarr.push(this.fileList[i]["ziiAmount"]);
                // }
            }
            return (Math.floor(eval(strarr.join("+")) * 100) / 100).toFixed(2); //结果
        },
        // 提交
        submit() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    this.form.zbiAmount = this.allAmount();
                    this.form.fileList = this.fileList;
                    this.form.contractList = this.contractList;
                    this.form.logisticsList = this.logisticsList;
                    this.form.otherList = this.otherList;
                    const loading = this.$loading({
                        lock: true,
                        text: "Loading",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)",
                    });
                    addBill(this.form)
                        .then((response) => {
                            loading.close();
                            this.msgSuccess("新增账款成功");
                            this.$store.dispatch("tagsView/delView", this.$route);
                            this.$router.go(-1);
                        })
                        .catch(() => {
                            loading.close();
                        });
                } else {
                    this.$message({
                        message: "账款基本信息未完善，请检查确认",
                        type: "warning",
                    });
                }
            });
        },
        //校验结果字典
        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;
        },
        /**
         * 点击关闭上传发票弹窗
         */
        bindClickCloseUploadInvoice() {
            this.uploadOpen = false
        }
    },
};
</script>

<style>
.el-table .warning-row {
    background: rgb(223, 223, 223);
}
</style><style lang="scss" scoped>
.zap-title {
    padding: 25px;
    font-size: 16px;
    color: #333333;
    background-color: #ffffff;
}

::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: 0 25px;
    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: 20px;
    color: #f41d27;
}

.zap-contract-add__buttons {
    padding: 30px;
    text-align: center;
}
</style>