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

<template>
<div class="app-container zap-main">
    <header-bar :list="headerList"></header-bar>
    <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 :span="12">
                        <el-form-item label="账款类型" prop="wplIsInput">
                            <el-radio-group class="zap-form-input--large" v-model="type" prop="type" :disabled="true">
                                <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>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="账款名称" prop="zbiName">
                            <el-input class="zap-form-input--large" v-model="form.zbiName" clearable placeholder="请输入账款名称" maxlength="20" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-col :span="12">
                    <el-form-item label="应付方" prop="zbiPayerId">
                        <el-input class="zap-form-input--large" v-model="form.payerName" maxlength="20" :disabled="true" v-if="
                company.scyId != form.zbiPayerId &&
                company.scyId != form.zbiPayeeId
              " />
                        <el-select v-model="form.zbiPayerId" :disabled="true" filterable remote v-if="
                (type == '00' && company.scyId == form.zbiPayerId) ||
                (type == '00' && company.scyId == form.zbiPayeeId)
              ">
                            <el-option :label="company.scyName" :value="company.scyId">
                            </el-option>
                        </el-select>
                        <el-select
                            class="zap-form-input--large"
                            v-model="form.zbiPayerId"
                            filterable
                            clearable
                            remote
                            v-if="
                (type == '01' && company.scyId == form.zbiPayerId) ||
                (type == '01' && company.scyId == form.zbiPayeeId)
              ">
                            <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 :span="12">
                    <el-form-item label="应收方" prop="zbiPayeeId">
                        <el-input class="zap-form-input--large" v-model="form.payeeName" maxlength="20" :disabled="true" v-if="
                company.scyId != form.zbiPayerId &&
                company.scyId != form.zbiPayeeId
              " />
                        <el-select v-model="form.zbiPayeeId" :disabled="true" filterable remote v-if="
                (type == '01' && company.scyId == form.zbiPayerId) ||
                (type == '01' && company.scyId == form.zbiPayeeId)
              ">
                            <el-option :label="company.scyName" :value="company.scyId">
                            </el-option>
                        </el-select>
                        <el-select
                            class="zap-form-input--large"
                            v-model="form.zbiPayeeId"
                            filterable
                            clearable
                            remote
                            v-if="
                (type == '00' && company.scyId == form.zbiPayerId) ||
                (type == '00' && company.scyId == form.zbiPayeeId)
              ">
                            <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 :span="12">
                    <el-form-item label="贸易日期" prop="zbiDate" size="large">
                        <el-date-picker
                            class="zap-form-input--large"
                            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 :span="12">
                    <el-form-item :label="
              type == '00'
                ? '预计付款日期'
                : type == '01'
                ? '预计收款日期'
                : '预计收/付款日期'
            " prop="zbiPayDate" size="large">
                        <el-date-picker
                            class="zap-form-input--large"
                            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 :span="12">
                    <el-form-item label="账款金额" size="large">
                        <el-input class="zap-form-input--large" :disabled="true" :value="allAmount()" maxlength="20">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="账款金额大写" size="large">
                        <el-input class="zap-form-input--large" :disabled="true" :value="smallToBig(allAmount())">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="贸易合同编号" prop="zbiContractNo" size="large">
                        <el-input class="zap-form-input--large" v-model="form.zbiContractNo" clearable placeholder="请输入贸易合同编号" maxlength="20" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="贸易商品/服务" size="large">
                        <el-input class="zap-form-input--large" v-model="form.zbiService" clearable placeholder="请输入贸易商品/服务" maxlength="20" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="配送企业" size="large">
                        <el-input class="zap-form-input--large" v-model="form.zbiDistributor" clearable placeholder="请输入配送企业" maxlength="20" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="配送订单号" size="large">
                        <el-input class="zap-form-input--large" v-model="form.zbiOrderNo" clearable placeholder="请输入配送订单号" maxlength="20" />
                    </el-form-item>
                </el-col>
                <el-row>
                    <el-form-item label="备注">
                        <el-input
                            class="zap-form__textarea"
                            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" style="padding-bottom: 20px;">
            <el-form ref="invoice" label-width="auto" :inline="true">
                <el-row type="flex" align="middle" justify="center">
                    <el-col>
                        <el-form-item label="合计：">{{
            handleInput(allAmount())
          }}</el-form-item>
                        <el-form-item label="大写：">{{
            smallToBig(allAmount())
          }}</el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item style="float: right">
                            <el-button type="danger" @click="delInvoice">删除</el-button>
                        </el-form-item>
                        <el-form-item style="float: right">
                            <el-button type="success" @click="openUpload()">上传/修改</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-table
                :data="fileList"
                @selection-change="handleInvoiceSelectionChange"
                row-key="ziiId"
                default-expand-all
                :row-class-name="tableRowClassName"
                border
                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 title="上传发票" :visible.sync="uploadOpen" width="500px" append-to-body>
                <el-upload
                    class="upload-demo"
                    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>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将文件拖到此处，或<em>点击选择文件</em>
                    </div>
                    <div class="el-upload__tip">
                        按住Ctrl可同时多选，单个文件不能超过2mb
                    </div>
                    <div class="el-upload__tip">
                        严禁上传包含色情、暴力、反动等相关违法信息的文件。
                    </div>
                </el-upload>
                <!-- <el-button type="primary" @click="submitUpload()"
                >点击上传</el-button
              > -->
                <el-button type="primary" @click="toCheck()">完成去验真</el-button>
            </el-dialog>

            <!-- 发票验真 -->
            <invoice-verification
              :open="open"
              :fileList="fileList"
              :invoice="invoice"
              :checkSttOptions="checkSttOptions"
              @openUploadInvoice="openUploadInvoice"
              @handleCheckAllChange="handleCheckAllChange"
              @changeInvoice="changeInvoice"
              @delInvoice="delInvoice"
              @toCheckAgian="toCheckAgian"
              @submitCheck="submitCheck"
              @invoicePictureCardPreview="invoicePictureCardPreview"
              @queryDouble="queryDouble"
              @close="open = false"
            ></invoice-verification>
        </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-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 type="primary" @click="submit()">提交</el-button>
    </el-row>
</div>
</template>

<script>
import {
    getBill,
    getInvoice,
    addBill,
    getInvoiceText,
    invoiceVerification,
    delInvoice,
    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";
import InvoiceVerification from "@/components/InvoiceVerification"
export default {
    name: "billEdit",
    components: {
        InvoiceVerification
    },
    data() {
        return {
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 是否显示弹出层
            open: false,
            uploadOpen: false,
            // 查询参数
            queryParams: {},
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                zbiName: [{
                        required: true,
                        message: "账款名称不能为空",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,
                        message: "账款名称只能包含中文、英文、数字",
                        trigger: ["blur", "change"],
                    },
                ],
                zbiPayerId: [{
                    required: true,
                    message: "应付方不能为空",
                    trigger: ["blur", "change"],
                }, ],
                zbiDate: [{
                    required: true,
                    message: "贸易日期不能为空",
                    trigger: ["blur", "change"],
                }, ],
                zbiPayDate: [{
                    required: true,
                    message: "预计收/付款日期不能为空",
                    trigger: ["blur", "change"],
                }, ],
                zbiPayeeId: [{
                    required: true,
                    message: "应收方不能为空",
                    trigger: ["blur", "change"],
                }, ],
                zbiAmount: [{
                        required: true,
                        message: "贸易金额不能为空",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern: /^(?:0|[1-9]\d{0,13})(?:\.\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: {},
            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
                        );
                    }
                },
            },
        };
    },
    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() {
        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();
                });
        },
        //切换账款类型
        changePayer(val) {
            if (val == "00") {
                this.form.zbiPayerId = this.company.scyId;
                this.form.zbiPayeeId = null;
            } else if (val == "01") {
                this.form.zbiPayerId = null;
                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) {
            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();
                });
        },
        //表格置灰
        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 (self.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();
                        //     this.msgSuccess("删除成功");
                        //   })
                        //   .catch(() => {
                        //     loading.close();
                        //   });
                    }
                });
            }
        },
        //删除发票
        delInvoice(row) {
            var self = this;
            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" && !!(this.fileList[i]["ziiAmount"])) {
                    strarr.push(this.fileList[i]["ziiAmount"]);
                }
            }
            return (Math.round(eval(strarr.join("+")) * 100) / 100).toFixed(2); //结果
            // return this.handleInput(eval(strarr.join("+"))); //结果
        },
        // 结束
        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)",
                    });
                    commitBill(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;
        },
    },
};
</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>