yunzerwebsiteallinone/platform/src/views/basicSettings/tenants/components/edit.vue

<template>
    <el-dialog v-model="visible" :title="formData.id ? '编辑租户' : '添加租户'" width="600px" @closed="handleClosed"
        destroy-on-close>
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" v-loading="loading"
            style="padding: 20px">
            <el-form-item label="租户编码" prop="tenant_code">
                <el-input v-model="formData.tenant_code" placeholder="系统自动生成" disabled />
                <div class="form-tip" v-if="!formData.id" style="font-size: 12px; color: #999;">
                    * 编码由系统随机分配，提交时将自动校验唯一性
                </div>
            </el-form-item>
            <el-form-item label="租户名称" prop="tenant_name">
                <el-input v-model="formData.tenant_name" placeholder="请输入租户名称" />
            </el-form-item>
            <el-form-item label="联系人" prop="contact_person">
                <el-input v-model="formData.contact_person" placeholder="请输入联系人" />
            </el-form-item>
            <el-form-item label="联系电话" prop="contact_phone">
                <el-input v-model="formData.contact_phone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="电子邮箱" prop="contact_email">
                <el-input v-model="formData.contact_email" placeholder="请输入电子邮箱" />
            </el-form-item>
            <el-form-item label="租户地址" prop="address">
                <el-input v-model="formData.address" type="textarea" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="formData.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" :loading="submitting" @click="submitForm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { createTenant, editTenant, getTenantDetail, checkTenantCode } from '@/api/tenant';

const emit = defineEmits(['success']);
const visible = ref(false);
const loading = ref(false);
const submitting = ref(false);
const formRef = ref();

const initialData = {
    id: null,
    tenant_name: '',
    tenant_code: '',
    contact_person: '',
    contact_phone: '',
    contact_email: '',
    address: '',
    status: 1
};

const formData = reactive({ ...initialData });

const rules = {
    tenant_name: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
    tenant_code: [{ required: true, message: '请输入租户编码', trigger: 'blur' }],
    contact_phone: [
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ]
};

// 暴露给父组件的方法
const open = (id?: number) => {
    visible.value = true;
    Object.assign(formData, initialData);

    if (id) {
        formData.id = id;
        fetchDetail(id);
    } else {
        formData.tenant_code = Math.floor(100000 + Math.random() * 900000).toString();
    }
};

const fetchDetail = async (id: number) => {
    loading.value = true;
    try {
        const res = await getTenantDetail(id);
        if (res.code === 200) {
            Object.assign(formData, res.data);
        }
    } finally {
        loading.value = false;
    }
};

const submitForm = async () => {
    if (!formRef.value) return;

    // 1. 基础表单验证（必填项等）
    await formRef.value.validate();

    submitting.value = true;

    try {
        // 2. 如果是新增模式，进入“编码唯一性”校验环
        if (!formData.id) {
            let isCodeValid = false;

            while (!isCodeValid) {
                const res = await checkTenantCode(formData.tenant_code);

                if (res.code === 200) {
                    // 编码可用，跳出循环
                    isCodeValid = true;
                } else {
                    // 编码重复，重新生成
                    const newCode = Math.floor(100000 + Math.random() * 900000).toString();

                    // 弹出提示框告知用户
                    await ElMessageBox.alert(
                        `租户编码 [${formData.tenant_code}] 已重复，系统已自动为您重新生成为 [${newCode}]，请重新点击提交。`,
                        '编码重复提示',
                        { confirmButtonText: '我知道了', type: 'warning' }
                    );

                    formData.tenant_code = newCode;
                    submitting.value = false;
                    return; // 中断本次提交，让用户看一眼新编码后再次点击
                }
            }
        }

        // 3. 发起真正的保存请求
        const saveApi = formData.id ? editTenant(formData.id, formData) : createTenant(formData);
        const saveRes = await saveApi;

        if (saveRes.code === 200) {
            ElMessage.success('保存成功');
            visible.value = false;
            emit('success');
        }
    } catch (error) {
        console.error('提交失败', error);
    } finally {
        submitting.value = false;
    }
};

/**
* 生成 6 位随机数字并校验唯一性
*/
const generateUniqueCode = async () => {
    loading.value = true;
    let isUnique = false;
    let newCode = '';
    let retryCount = 0;
    const maxRetries = 10; // 保护措施：最多重试10次

    while (!isUnique && retryCount < maxRetries) {
        // 1. 生成 6 位随机数字字符串
        newCode = Math.floor(100000 + Math.random() * 900000).toString();

        try {
            // 2. 调用接口校验
            const res = await checkTenantCode(newCode);
            if (res.code === 200) {
                isUnique = true; // 接口返回 200 表示不存在，可用
            } else {
                console.warn(`编码 ${newCode} 重复，正在重试...`);
                retryCount++;
            }
        } catch (error) {
            console.error("校验编码失败", error);
            break;
        }
    }

    if (isUnique) {
        formData.tenant_code = newCode;
    } else {
        ElMessage.error('无法生成唯一的租户编码，请重试');
    }
    loading.value = false;
};

const handleClosed = () => {
    formRef.value?.resetFields();
};

defineExpose({ open });
</script>