新增前后端

wujianwei

2026-01-19 15178bafd7aa1827e6c48fda8e2cc3b8df0bbf5e

 ui/admin-ui3/src/components/makeInvoiceCate/index.vue

@@ -5,6 +5,16 @@
        <!-- 表单主体 -->
        <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" size="default"
            class="form-container">

            <el-form-item label="关联企业类型" prop="enterpriseType">
                <el-radio-group v-model="form.enterpriseType" @change="handleTypeChange">
                    <el-radio :value="1">内部结算单位</el-radio>
                    <el-radio :value="0">客户</el-radio>
                    <el-radio :value="2">供应商</el-radio>
                </el-radio-group>
            </el-form-item>


            <!-- 关联客户（带搜索图标） -->
            <el-form-item label="关联客户" prop="customerName">
                <el-input v-model="form.customerName" placeholder="请选择关联客户" readonly suffix-icon="Search"
@@ -65,12 +75,14 @@
    </el-dialog>

    <!-- 关联客户选择弹窗 -->
    <CustomerSelectDialog
        :visible="isCustomerSelectVisibleIshow"
        :default-selected-id="form.customerId"
        @confirm="handleCustomerSelect"
        @close="isCustomerSelectVisibleIshow = false"
    />
    <CustomerSelectDialog :visible="isCustomerSelectVisibleIshow" :default-selected-id="form.customerId"
        @confirm="handleCustomerSelect" @close="isCustomerSelectVisibleIshow = false" />
    <!-- 运营主体 -->
    <subjectPeration :visible="subjectPerationShow" :default-selected-id="form.customerId"
        @confirm="subjectPerationSelect" @close="subjectPerationShow = false" />
    <!-- 供应商 -->
    <transportServiceDialog :visible="transportSelectVisibleIshow" :default-selected-id="form.customerId"
        @confirm="transportCustomerSelect" @close="transportSelectVisibleIshow = false" />
</template>

<script setup lang="ts">
@@ -79,10 +91,11 @@
import { ElMessage } from 'element-plus';
// 引入客户选择弹窗组件
import CustomerSelectDialog from '../CustomerSelectDialog/index';

import subjectPeration from '../subjectPeration/index';
import transportServiceDialog from '../transportServiceDialog/index';
import useCurrentInstance from "@/utils/useCurrentInstance";
const { proxy } = useCurrentInstance();
const { sys_invoice_type } = proxy.useDict('sys_invoice_type');
const { sys_invoice_type, sys_affiliated_enterprises } = proxy.useDict('sys_invoice_type', 'sys_affiliated_enterprises');

// 定义表单数据类型（新增customerId字段，避免赋值时报错）
interface InvoiceForm {
@@ -101,6 +114,8 @@
// 弹窗控制
const dialogVisible = ref(false);
const isCustomerSelectVisibleIshow = ref(false);
const transportSelectVisibleIshow = ref(false);


// Emits
const emit = defineEmits(['close', 'submit']);
@@ -109,12 +124,13 @@
const form = reactive<InvoiceForm>({
    customerId: '', // 初始化customerId
    customerName: '',
    enterpriseType: '',
    invoiceCompanyName: '',
    invoiceCreditCode: '',
    invoiceType: '',
    invoiceBankName: '',
    invoiceBankNo: '',
     id:'',
    id: '',
    invoiceOperatingLicenseAddress: '',
    invoiceOperatingLicensePhone: '',
    invoiceOperatingLicenseEmail: ''
@@ -141,6 +157,9 @@
    invoiceOperatingLicenseEmail: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    enterpriseType: [
        { required: true, message: '请选择客户类型', trigger: 'change' }
    ]
});

@@ -150,14 +169,14 @@
// 打开弹窗（供父组件调用，修复回显逻辑）
const openDialog = (data?: Partial<InvoiceForm>) => {
    dialogVisible.value = true;
    

    // 先重置表单，避免旧数据残留
    nextTick(() => {
        formRef.value?.resetFields();
        

        // 有回显数据时，逐个赋值（核心修复：避免整体赋值form = data）
        if (data && Object.keys(data).length > 0) {
           // 遍历data的所有字段，赋值到form（仅覆盖对应字段）
            // 遍历data的所有字段，赋值到form（仅覆盖对应字段）
            Object.assign(form, data);
            // 清空表单校验状态
            formRef.value?.clearValidate();
@@ -166,12 +185,13 @@
            Object.assign(form, {
                customerId: '',
                customerName: '',
                enterpriseType: '',
                invoiceCompanyName: '',
                invoiceCreditCode: '',
                invoiceType: '',
                invoiceBankName: '',
                invoiceBankNo: '',
                id:'',
                id: '',
                invoiceOperatingLicenseAddress: '',
                invoiceOperatingLicensePhone: '',
                invoiceOperatingLicenseEmail: ''
@@ -182,7 +202,19 @@

// 打开关联客户选择弹窗
const openCustomerSelectDialog = () => {
    isCustomerSelectVisibleIshow.value = true;
    console.log(form.enterpriseType);
    if (form.enterpriseType == '') {
        ElMessage.warning(`请先选择关联企业类型`);
        return
    }
    if (form.enterpriseType == '1') {
        subjectPerationShow.value = true;
    } else if (form.enterpriseType == '0') {
        isCustomerSelectVisibleIshow.value = true;
    } else if (form.enterpriseType == '2') {
        transportSelectVisibleIshow.value = true;
    }
    // isCustomerSelectVisibleIshow.value = true;
};

// 选择客户回调
@@ -223,6 +255,24 @@
    formRef.value?.resetFields();
    emit('close');
};
const handleTypeChange = (val) => {
  form.customerName = ''
    form.customerId = ''
}
/* 运营主体 */
const subjectPerationShow = ref(false);
const subjectPerationSelect = (selectedCustomer) => {
    form.customerName = selectedCustomer.customerFullName;
    form.customerId = selectedCustomer.id; // 现在字段已声明，赋值有效
    isCustomerSelectVisibleIshow.value = false;
};
/* 供应商 */

const transportCustomerSelect = (selectedCustomer) => {
    form.customerName = selectedCustomer.serviceName;
    form.customerId = selectedCustomer.id;
    isCustomerSelectVisibleIshow.value = false;
};

// 暴露方法给父组件
defineExpose({ openDialog, handleClose });
@@ -231,13 +281,24 @@
<style scoped lang="scss">
.form-container {
    padding: 10px 0;
    :deep(.el-form-item) { margin-bottom: 18px; }

    :deep(.el-form-item) {
        margin-bottom: 18px;
    }
}

.search-input {
    :deep(.el-input__inner) { cursor: pointer; background-color: #f8f9fa; }
    :deep(.el-icon-search) { color: #409eff; }
    :deep(.el-input__inner) {
        cursor: pointer;
        background-color: #f8f9fa;
    }

    :deep(.el-icon-search) {
        color: #409eff;
    }
}

.dialog-footer { text-align: right; }
.dialog-footer {
    text-align: right;
}
</style>