front/front-vue/src/components/InvoiceVerification/index.vue

<template>
<el-dialog title="发票验真" :visible.sync="open" width="1050px" append-to-body>
    <el-row class="zap-bill-dialog" type="flex">
        <div width="224px" style="background-color: white;flex: 0 0 224px;">
            <el-button style="width: 224px;" type="primary" @click="openUploadInvoice">上传发票</el-button>
            <div class="zap-bill-dialog__main">
                <div class="zap-bill-dialog__title">
                    <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                    <label>已上传发票列表</label>
                </div>
                <div class="zap-bill-dialog__item" :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>
            </div>
            <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>
        </div>
        <div style="margin-left: 32px;">
            <el-row height="232px">
                <el-image style="width: 700px; height: 232px" :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-row>
            <el-row class="mt20">
                <el-form ref="invoice" label-width="auto" :disabled="invoice.ziiCheckStt == '1'">
                    <el-col :span="12">
                        <el-form-item label="发票代码：">
                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiNo" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发票号码：">
                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiNumber" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开票日期：">
                            <el-date-picker class="zap-bill-dialog__input" v-model="invoice.ziiDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="购货纳税人编号：">
                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiPurchaserNo" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="销货纳税人编号：">
                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiSellerNo" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发票金额：">
                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiTotalAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiTotalAmount,'0')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="税价金额：">
                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiAmount,'1')" />
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <el-footer>
                <el-button type="primary" @click="queryDouble()" style="float: right">确定</el-button>
            </el-footer>
        </div>
    </el-row>
</el-dialog>
</template>

<script>
export default {
    name: "InvoiceVerification",
    props: ['open', 'isIndeterminate', 'fileList', 'invoice'],
    methods: {
        openUploadInvoice() {
            this.$emit('openUploadInvoice')
        },
        handleCheckAllChange(val) {
            this.$emit('handleCheckAllChange', val)
        },
        changeInvoice(item) {
            this.$emit('changeInvoice', item)
        },
        delInvoice(item) {
            this.$emit('delInvoice', item)
        },
        toCheckAgian() {
            this.$emit('toCheckAgian')
        },
        submitCheck() {
            this.$emit('submitCheck')
        },
        invoicePictureCardPreview(invoice) {
            this.$emit('invoicePictureCardPreview', invoice)
        },
        queryDouble () {
          this.$emit('queryDouble')
        },
        //金额校验格式
        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;
            }
        },
        //校验结果字典
        checkSttFormat(row, column) {
            return this.selectDictLabel(this.checkSttOptions, row.ziiCheckStt);
        },
    }
}
</script>

<style lang="scss">
.zap-bill-dialog {
    padding: 25px 40px 35px;
}

.zap-bill-dialog__main {
    height: 408px;
    margin-top: 16px;
    border-radius: 4px;
    border: 1px dashed #4280F2;
}

.zap-bill-dialog__title {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    color: #4280F2;
    background-color: #EBF3FF;
}

.zap-bill-dialog__input {
    width: 200px !important;
}

.zap-bill-dialog__item {
    padding: 18px 16px;
    font-size: 14px;
}
</style>