<template>
|
<!-- 企业发票抬头信息弹窗 -->
|
<el-dialog v-model="dialogVisible" title="企业发票抬头信息" width="60%" destroy-on-close @close="handleClose"
|
:close-on-click-modal="false">
|
<!-- 表单主体 -->
|
<el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" size="default"
|
class="form-container">
|
<!-- 关联客户（带搜索图标） -->
|
<el-form-item label="关联客户" prop="customerName">
|
<el-input v-model="form.customerName" placeholder="请选择关联客户" readonly suffix-icon="Search"
|
@click="openCustomerSelectDialog" class="search-input" />
|
</el-form-item>
|
|
<!-- 抬头公司 -->
|
<el-form-item label="抬头公司" prop="invoiceCompanyName">
|
<el-input v-model="form.invoiceCompanyName" placeholder="请输入抬头公司" />
|
</el-form-item>
|
|
<!-- 统一社会信用代码 -->
|
<el-form-item label="统一社会信用代码" prop="invoiceCreditCode">
|
<el-input v-model="form.invoiceCreditCode" placeholder="请输入统一社会信用代码" maxlength="18" />
|
</el-form-item>
|
|
<!-- 发票类型 -->
|
<el-form-item label="发票类型" prop="invoiceType">
|
<el-select v-model="form.invoiceType" placeholder="请选发票类型" clearable>
|
<el-option v-for="dict in sys_invoice_type" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
|
<!-- 开户银行名称 -->
|
<el-form-item label="开户银行名称" prop="invoiceBankName">
|
<el-input v-model="form.invoiceBankName" placeholder="请输入开户银行名称" />
|
</el-form-item>
|
|
<!-- 基本开户账号 -->
|
<el-form-item label="基本开户账号" prop="invoiceBankNo">
|
<el-input v-model="form.invoiceBankNo" placeholder="请输入基本开户账号" />
|
</el-form-item>
|
|
<!-- 注册场所地址 -->
|
<el-form-item label="注册场所地址" prop="invoiceOperatingLicenseAddress">
|
<el-input v-model="form.invoiceOperatingLicenseAddress" placeholder="请输入注册场所地址" />
|
</el-form-item>
|
|
<!-- 注册固定电话 -->
|
<el-form-item label="注册固定电话" prop="invoiceOperatingLicensePhone">
|
<el-input v-model="form.invoiceOperatingLicensePhone" placeholder="请输入注册固定电话" maxlength="11" />
|
</el-form-item>
|
|
<!-- 邮箱 -->
|
<el-form-item label="邮箱" prop="invoiceOperatingLicenseEmail">
|
<el-input v-model="form.invoiceOperatingLicenseEmail" placeholder="请输入邮箱" type="email" />
|
</el-form-item>
|
</el-form>
|
|
<!-- 底部按钮 -->
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 关联客户选择弹窗 -->
|
<CustomerSelectDialog
|
:visible="isCustomerSelectVisibleIshow"
|
:default-selected-id="form.customerId"
|
@confirm="handleCustomerSelect"
|
@close="isCustomerSelectVisibleIshow = false"
|
/>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, nextTick } from 'vue';
|
import type { FormInstance, FormRules } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
// 引入客户选择弹窗组件
|
import CustomerSelectDialog from '../CustomerSelectDialog/index';
|
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
const { proxy } = useCurrentInstance();
|
const { sys_invoice_type } = proxy.useDict('sys_invoice_type');
|
|
// 定义表单数据类型（新增customerId字段，避免赋值时报错）
|
interface InvoiceForm {
|
customerId?: string | number; // 新增：客户ID（用于回显选中）
|
customerName: string; // 关联客户
|
invoiceCompanyName: string; // 抬头公司
|
invoiceCreditCode: string; // 统一社会信用代码
|
invoiceType: string; // 发票类型
|
invoiceBankName: string; // 开户银行名称
|
invoiceBankNo: string; // 基本开户账号
|
invoiceOperatingLicenseAddress: string; // 注册场所地址
|
invoiceOperatingLicensePhone: string; // 注册固定电话
|
invoiceOperatingLicenseEmail: string; // 邮箱
|
}
|
|
// 弹窗控制
|
const dialogVisible = ref(false);
|
const isCustomerSelectVisibleIshow = ref(false);
|
|
// Emits
|
const emit = defineEmits(['close', 'submit']);
|
|
// 表单数据（reactive声明，只能修改属性，不能整体赋值）
|
const form = reactive<InvoiceForm>({
|
customerId: '', // 初始化customerId
|
customerName: '',
|
invoiceCompanyName: '',
|
invoiceCreditCode: '',
|
invoiceType: '',
|
invoiceBankName: '',
|
invoiceBankNo: '',
|
id:'',
|
invoiceOperatingLicenseAddress: '',
|
invoiceOperatingLicensePhone: '',
|
invoiceOperatingLicenseEmail: ''
|
});
|
|
// 表单校验规则
|
const formRules = reactive<FormRules>({
|
customerName: [
|
{ required: true, message: '请选择关联客户', trigger: 'blur' }
|
],
|
invoiceCompanyName: [
|
{ required: true, message: '请输入抬头公司', trigger: 'blur' }
|
],
|
invoiceCreditCode: [
|
{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
|
],
|
invoiceType: [
|
{ required: true, message: '请选择发票类型', trigger: 'change' }
|
],
|
invoiceOperatingLicensePhone: [
|
{ required: true, message: '请输入注册固定电话', trigger: 'blur' },
|
{ pattern: /^1[3-9]\d{9}$|^0\d{2,3}-\d{7,8}$/, message: '请输入正确的手机号或固定电话', trigger: 'blur' }
|
],
|
invoiceOperatingLicenseEmail: [
|
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
]
|
});
|
|
// 表单实例
|
const formRef = ref<FormInstance>();
|
|
// 打开弹窗（供父组件调用，修复回显逻辑）
|
const openDialog = (data?: Partial<InvoiceForm>) => {
|
dialogVisible.value = true;
|
|
// 先重置表单，避免旧数据残留
|
nextTick(() => {
|
formRef.value?.resetFields();
|
|
// 有回显数据时，逐个赋值（核心修复：避免整体赋值form = data）
|
if (data && Object.keys(data).length > 0) {
|
// 遍历data的所有字段，赋值到form（仅覆盖对应字段）
|
Object.assign(form, data);
|
// 清空表单校验状态
|
formRef.value?.clearValidate();
|
} else {
|
// 无回显数据时，清空表单
|
Object.assign(form, {
|
customerId: '',
|
customerName: '',
|
invoiceCompanyName: '',
|
invoiceCreditCode: '',
|
invoiceType: '',
|
invoiceBankName: '',
|
invoiceBankNo: '',
|
id:'',
|
invoiceOperatingLicenseAddress: '',
|
invoiceOperatingLicensePhone: '',
|
invoiceOperatingLicenseEmail: ''
|
});
|
}
|
});
|
};
|
|
// 打开关联客户选择弹窗
|
const openCustomerSelectDialog = () => {
|
isCustomerSelectVisibleIshow.value = true;
|
};
|
|
// 选择客户回调
|
const handleCustomerSelect = (selectedCustomer) => {
|
form.customerName = selectedCustomer.customerFullName;
|
form.customerId = selectedCustomer.id; // 现在字段已声明，赋值有效
|
isCustomerSelectVisibleIshow.value = false;
|
};
|
|
// 提交表单（修复校验逻辑 + 关闭弹窗）
|
const handleSubmit = async () => {
|
if (!formRef.value) return;
|
|
try {
|
// 表单校验
|
const valid = await formRef.value.validate();
|
if (!valid) return;
|
// 校验通过，提交数据给父组件
|
emit('submit', { ...form });
|
// ElMessage.success('提交成功！');
|
} catch (error) {
|
console.error('表单校验失败：', error);
|
// 定位具体失败字段
|
const invalidFields = (error as any).invalidFields;
|
if (invalidFields) {
|
const firstKey = Object.keys(invalidFields)[0];
|
const firstMsg = invalidFields[firstKey][0].message;
|
ElMessage.warning(`校验失败：${firstMsg}`);
|
} else {
|
// ElMessage.warning('请完善必填项后提交');
|
}
|
}
|
};
|
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogVisible.value = false;
|
formRef.value?.resetFields();
|
emit('close');
|
};
|
|
// 暴露方法给父组件
|
defineExpose({ openDialog, handleClose });
|
</script>
|
|
<style scoped lang="scss">
|
.form-container {
|
padding: 10px 0;
|
:deep(.el-form-item) { margin-bottom: 18px; }
|
}
|
|
.search-input {
|
:deep(.el-input__inner) { cursor: pointer; background-color: #f8f9fa; }
|
:deep(.el-icon-search) { color: #409eff; }
|
}
|
|
.dialog-footer { text-align: right; }
|
</style>
|
