xg_total_process_master_cloud_h5/pages/generateForm/InvoiceModule.vue

<template>
    <view>
        <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules"
            ref="inputForm">
            <!-- 动态生成发票基本信息 -->
            <el-row :gutter="15" v-for="(item, index_experience) in inputForm.workInvoiceProjectRelationList"
                :key="index_experience">
                <el-col :span="24">
                    <u-form-item label="">
                        <u-divider :text="'基本信息 ' + (index_experience + 1)"></u-divider>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="项目名称"
                        :prop="'workInvoiceProjectRelationList[' + index_experience + '].projectName'">
                        <u--input v-model="item.projectName" :disabled="true" clearable></u--input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="合同名称"
                        :prop="'workInvoiceProjectRelationList[' + index_experience + '].workContractName'">
                        <u--input v-model="item.workContractName" :disabled="true" clearable></u--input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="项目编号"
                        :prop="'workInvoiceProjectRelationList[' + index_experience + '].projectNum'">
                        <u--input v-model="item.projectNum" :disabled="true" clearable></u--input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="委托方"
                        :prop="'workInvoiceProjectRelationList[' + index_experience + '].clientName'">
                        <u--input v-model="item.clientName" :disabled="true" clearable></u--input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="报告号"
                        :prop="'workInvoiceProjectRelationList[' + index_experience + '].reportDataNum'">
                        <u--input v-model="item.reportDataNum" :disabled="true" clearable></u--input>
                    </u-form-item>
                </el-col>
            </el-row>
            <u-form-item label="">
                <u-divider :text="`发票详情`"></u-divider>
            </u-form-item>
            <u-form-item label="发票类型" prop="invoiceTypeName">
                <u--input v-model="inputForm.invoiceTypeName" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="开票类型" prop="newDrawerName">
                <u--input v-model="inputForm.newDrawerName" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="实际开票单位" prop="clientName">
                <u--input v-model="inputForm.clientName" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="纳税人识别号" prop="taxpayerIdentificationNo">
                <u--input v-model="inputForm.taxpayerIdentificationNo" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="地址" prop="address">
                <u--input v-model="inputForm.address" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="电话" prop="telephone">
                <u--input v-model="inputForm.telephone" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="开户银行" prop="bank">
                <u--input v-model="inputForm.bank" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="银行账号" prop="bankNumber">
                <u--input v-model="inputForm.bankNumber" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="收款类型" prop="chargeType">
                <u--input v-model="inputForm.chargeType" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="开票内容" prop="billingContent">
                <u--input v-model="inputForm.billingContent" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="发票金额(元)" prop="money">
                <u--input v-model="inputForm.money" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="开票内容要求" prop="content">
                <u--input v-model="inputForm.content" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="开票人" prop="drawerName">
                <u--input v-model="inputForm.drawerName" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="开票时间" prop="invoiceDate" :required="true">
                <el-date-picker v-model="inputForm.invoiceDate" type="date" placeholder="选择开票时间" style="width:100%"
                    size="default" placement="bottom-start" clearable>
                </el-date-picker>
            </u-form-item>
            <u-form-item label="领票时间" prop="takeDate">
                <el-date-picker v-model="inputForm.takeDate" type="date" placeholder="选择领票时间" style="width:100%"
                    size="default" placement="bottom-start" clearable>
                </el-date-picker>
            </u-form-item>
            <u-form-item label="实际开票人" prop="actualDrawerName">
                <u--input v-model="inputForm.actualDrawerName" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="接收邮箱" prop="actualDrawerEmailAddress">
                <u--input v-model="inputForm.actualDrawerEmailAddress" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="对账人" prop="accountCheckingUserName">
                <u--input v-model="inputForm.accountCheckingUserName" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="对账地区" prop="area">
                <u--input v-model="inputForm.area" :disabled="true" clearable></u--input>
            </u-form-item>
            <u-form-item label="备注" prop="remarks">
                <u--input v-model="inputForm.remarks" :disabled="true" clearable></u--input>
            </u-form-item>

            <el-row :gutter="15" :key="item.id" v-for="(item, index_experience) in this.inputForm.workAccountList">
                <el-col :span="24">
                    <u-form-item label="">
                        <el-divider content-position="left"> 发票明细详情 {{ index_experience + 1 }}</el-divider>
                    </u-form-item>
                </el-col>

                <el-col :span="24">
                    <u-form-item label="发票代码" :prop="'workAccountList[' + index_experience + '].code'" :rules="[
                    ]">
                        <u--input v-model="item.code" placeholder="请填写发票代码" clearable></u--input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="发票号" :prop="'workAccountList[' + index_experience + '].number'" :required="true"
                        :rules="[
                        ]">
                        <u--input v-model="item.number" placeholder="请填写发票号" @blur="validateNumber(index_experience)"
                            clearable></u--input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="开票金额(元)" :prop="'workAccountList[' + index_experience + '].account'"
                        :required="true" :rules="[
                            { validator: validateAmount, trigger: 'blur' }
                        ]">
                        <u-input v-model="item.account" placeholder="请填写开票金额(元)" clearable
                            @input="handleInput($event, index_experience)"
                            @blur="handleBlur($event, index_experience)"></u-input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="税率(%)" :prop="'workAccountList[' + index_experience + '].rate'" :rules="[
                    ]">
                        <u-input v-model="item.rate" placeholder="请填写税率(%)"
                            @input="handleRateInput($event, index_experience)"
                            @blur="checkRate($event, index_experience)" clearable></u-input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="金额" :prop="'workAccountList[' + index_experience + '].amount'" :rules="[
                    ]">
                        <u-input v-model="item.amount" placeholder="请填写金额" readonly clearable></u-input>
                    </u-form-item>
                </el-col>
                <el-col :span="24">
                    <u-form-item label="税额" :prop="'workAccountList[' + index_experience + '].tax'" :rules="[
                    ]">
                        <u-input v-model="item.tax" placeholder="请填写税额" readonly clearable></u-input>
                    </u-form-item>
                </el-col>

                <el-col :span="24" style="text-align: center">
                    <u-form-item label="">
                        <el-button style="width: 100%" type="danger" @click="removeRow(index_experience)" plain>删除发票明细
                            {{ index_experience + 1 }}</el-button>
                    </u-form-item>
                </el-col>
            </el-row>
            <u-form-item label="">
                <el-button style="width: 100%" type="primary" @click="addRow()" plain>新增发票明细</el-button>
            </u-form-item>

            <u-form-item label="附件">
                <!-- <el-upload class="upload-demo"
                    :action="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
                    :on-remove="(file, fileList) => handleRemove(file, fileList, '')" :file-list="inputForm.files"
                    :on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, '')"
                    :limit="3">
                    <el-button size="small" type="primary" v-if="false">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传不超过 3 个文件</div>
                    <template slot="file" slot-scope="{ file }" v-if="shouldShowFile(file)">
                        <span @click="handleFileClick(file)">{{ file.name }}</span>
                    </template>
</el-upload> -->

                <!-- <UploadComponent
                    :uploadUrl="`http://127.0.0.1:8000/api/public-modules-server/oss/file/webUpload/upload`"
                    @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, '', '', fileIndex)"
                    @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, '', '')"
                    :fileList="inputForm.files" :limit="3" :isDelete="!testFlag" :isUpload="!testFlag">
                </UploadComponent> -->
            </u-form-item>
        </u--form>
    </view>
</template>


<script>
import ccpmService from '@/api/centerservice/ccpm/CcpmService'
import OSSService from "@/api/sys/OSSService";
import moment from "moment";
// import UploadComponent from '@/pages/common/UploadComponent.vue';

export default {
    name: 'DynamicForm',
    props: {
        invoice: {
            type: Array,
            required: true
        },
    },
    conponents: {
        // UploadComponent
    },
    data() {
        return {
            inputForm: {
                workInvoiceProjectRelationList: [],
                workAccountList: [],
                invoiceTypeName: "",
                newDrawerName: "",
                clientName: "",
                taxpayerIdentificationNo: "",
                address: "",
                telephone: "",
                bank: "",
                bankNumber: "",
                chargeType: "",
                billingContent: "",
                money: "",
                content: "",
                drawerName: "",
                invoiceDate: "",
                takeDate: "",
                actualDrawerName: "",
                actualDrawerEmailAddress: "",
                accountCheckingUserName: "",
                area: "",
                remarks: "",
                files: []
            },
            rules: {
                invoiceDate: [
                    {
                        required: true,
                        message: '开票时间不能为空',
                        trigger: ['blur', 'change']
                    }
                ],
            },
            isDeletingRow: false,  // 标志变量
        };
    },
    ossService: null,
    created() {
        this.ossService = new OSSService();
    },
    watch: {
        invoice: {
            handler(newVal) {
                this.assignment();
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        getInputForm() {
            return this.inputForm;
        },
        assignment() {
            if (this.isDeletingRow) {
                return;  // 如果正在删除行，则不执行此方法
            } else {
                if (Array.isArray(this.invoice) && this.invoice.length > 0) {
                    this.inputForm = this.recover(this.inputForm, this.invoice[0])
                    // this.inputForm = this.invoice[0];
                    if (this.isEmpty(this.inputForm.invoiceDate)) {
                        this.inputForm.invoiceDate = moment(new Date()).format('YYYY-MM-DD');
                    }
                    if (this.isEmpty(this.inputForm.workAccountList) || this.inputForm.workAccountList.length === 0) {
                        this.inputForm.workAccountList.push({
                            code: '',
                            number: '',
                            account: this.inputForm.money,
                            rate: '',
                            amount: '',
                            tax: '',
                            allAmount: ''
                        })
                    }
                }
            }

        },
        isEmpty(value) {
            return value == null || value === undefined || (typeof value === 'string' && value.trim() === '') || (Array.isArray(value) && value.length === 0);
        },
        isNotEmpty(value) {
            return !this.isEmpty(value);
        },
        shouldShowFile(file) {
            if (this.inputForm.files && this.inputForm.files.length > 0) {
                return this.inputForm.files.indexOf(file) !== -1;
            }
            return false;
        },
        async handleFileClick(file) {
            await this.ossService.getTemporaryUrl(file.url).then((data) => {
                file.lsUrl = data;
            });
            if (this.isImage(file.name)) {
                this.handleImageClick(file.lsUrl);
            } else {
                window.location.href = file.lsUrl;
            }
        },
        isImage(fileName) {
            const ext = fileName.toLowerCase().split('.').pop();
            return ['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(ext);
        },
        handleImageClick(url) {
            uni.previewImage({
                current: url,
                urls: [url],
            });
        },
        handleDelete(file) {
            const index = this.inputForm.files.indexOf(file);
            if (index !== -1) {
                this.inputForm.files.splice(index, 1);
            }
        },
        async validateNumber(index) {
            const numberString = this.inputForm.workAccountList[index].number.trim(); // 去除空格
            let errorDetected = false; // 布尔变量用于检测是否有错误发生

            if (this.isNotEmpty(numberString)) {
                if (!/^\d+$/.test(numberString)) { // 使用正则表达式检查是否只包含数字字符
                    uni.showToast({
                        title: '发票号只能输入整数',
                        icon: 'none',
                        duration: 2000
                    });
                    errorDetected = true; // 如果有错误，设置为 true
                }

                // 验证发票号是否大于 8 位
                if (parseInt(numberString) > 99999999) {
                    uni.showToast({
                        title: '“发票号” 不可以大于 8 位，请重新输入',
                        icon: 'none',
                        duration: 2000
                    });
                    errorDetected = true; // 如果有错误，设置为 true
                }

                // 验证是否重复
                for (let i = 0; i < this.inputForm.workAccountList.length; i++) {
                    if (index !== i && numberString === this.inputForm.workAccountList[i].number) {
                        uni.showToast({
                            title: '“发票号” 已存在，请重新输入',
                            icon: 'none',
                            duration: 2000
                        });
                        errorDetected = true; // 如果有错误，设置为 true
                        break; // 找到重复即可跳出循环
                    }
                }

                // 查询是否已存在
                await ccpmService.queryByNumber(numberString).then((data) => {
                    if (data === true) {
                        uni.showToast({
                            title: '“发票号” 已存在，请重新输入',
                            icon: 'none',
                            duration: 2000
                        });
                        errorDetected = true; // 如果有错误，设置为 true
                    }
                });

                // 只在发生错误时清空输入字段
                if (errorDetected) {
                    this.$set(this.inputForm.workAccountList[index], 'number', '');
                }
            }

        },
        // 根据开票金额和税率计算出金额: 开票金额-税率*开票金额
        getAmount(rate, rowIndex) {
            let amount = this.inputForm.workAccountList[rowIndex].amount
            let account = this.inputForm.workAccountList[rowIndex].account
            if (!this.isEmpty(account) && !this.isEmpty(rate)) {
                amount = parseFloat((parseFloat(account) - parseFloat((parseFloat(account) * parseFloat((parseFloat(rate) / 100).toFixed(4))).toFixed(4))).toFixed(2))
            } else {
                amount = ''
            }
            this.$set(this.inputForm.workAccountList[rowIndex], 'amount', amount)
        },
        // 根据开票金额和税率计算出税额: 税率*开票金额
        getTax(rate, rowIndex) {
            let tax = this.inputForm.workAccountList[rowIndex].tax
            let account = this.inputForm.workAccountList[rowIndex].account
            if (!this.isEmpty(account) && !this.isEmpty(rate)) {
                tax = parseFloat((parseFloat(account) * parseFloat((parseFloat(rate) / 100).toFixed(4))).toFixed(2))
            } else {
                tax = ''
            }
            this.$set(this.inputForm.workAccountList[rowIndex], 'tax', tax)
        },
        validateAmount(rule, value, callback) {
            const reg = /^\d+(\.\d{1,2})?$/;
            if (!value) {
                callback(new Error('请输入开票金额'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入有效的开票金额，最多两位小数'));
            } else {
                callback();
            }
        },
        handleInput(event, index) {
            const value = event;
            const reg = /^\d*\.?\d{0,2}$/;
            if (!reg.test(value)) {
                // 保留符合规则的部分
                const validValue = value.slice(0, -1);

                this.$nextTick(() => {
                    this.$set(this.inputForm.workAccountList[index], 'account', validValue);
                });
            } else {
                this.$set(this.inputForm.workAccountList[index], 'account', value);
            }
        },
        handleBlur(event, index) {
            const value = event;
            if (!value || isNaN(value)) {
                this.$set(this.inputForm.workAccountList[index], 'account', '');
            } else {
                const formattedValue = parseFloat(value).toFixed(2);

                this.$nextTick(() => {
                    this.$set(this.inputForm.workAccountList[index], 'account', formattedValue);
                });
            }
        },
        handleRateInput(event, rowIndex) {
            const value = event;
            const reg = /^\d*\.?\d{0,2}$/;
            if (!reg.test(value)) {
                // 保留符合规则的部分
                const validValue = value.slice(0, -1);

                this.$nextTick(() => {
                    this.$set(this.inputForm.workAccountList[rowIndex], 'rate', validValue);
                });
            } else {
                this.$set(this.inputForm.workAccountList[rowIndex], 'rate', value);
            }
        },
        checkRate(event, rowIndex) {
            const value = event;
            if (!value || isNaN(value)) {
                this.$set(this.inputForm.workAccountList[rowIndex], 'rate', '');
            } else {
                let validValue = parseFloat(value);
                if (!this.isEmpty(value)) {
                    if (validValue < 1 || validValue > 100) {
                        uni.showToast({
                            title: '“税率” 请填写 1 到 100 之间的数字，请重新输入',
                            icon: 'none',
                            duration: 2000
                        });
                        validValue = '';
                    } else {
                        validValue = validValue.toFixed(2);
                    }
                }

                this.$nextTick(() => {
                    this.$set(this.inputForm.workAccountList[rowIndex], 'rate', validValue);
                });
                this.getAmount(validValue, rowIndex);
                this.getTax(validValue, rowIndex);
            }

        },
        addRow() {
            this.inputForm.workAccountList.push({
                code: '',
                number: '',
                account: '',
                rate: '',
                amount: '',
                tax: '',
                allAmount: ''
            })
        },
        removeRow(index) {
            this.isDeletingRow = true;  // 设置标志变量
            this.inputForm.workAccountList.splice(index, 1);
        },
    }
};
</script>


<style scoped>
.upload-demo {
    margin-top: 10px;
}
</style>