admin-ui/src/views/system/tenant/component/editTenant.vue

<template>
	<div class="system-edit-tenant-container">
		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '租户'" v-model="isShowDialog" width="769px">
			<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="租户名称" prop="tenantName">
							<el-input v-model="ruleForm.tenantName" placeholder="请输入租户名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="租户类型" prop="tenantType">
							<el-select v-model="ruleForm.tenantType" placeholder="请选择租户类型" clearable class="w100">
								<el-option label="普通类型" :value="1"></el-option>
								<el-option label="代理类型" :value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="联系人" prop="contactPerson">
							<el-input v-model="ruleForm.contactPerson" placeholder="请输入联系人" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="电话" prop="phone">
							<el-input v-model="ruleForm.phone" placeholder="请输入电话" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="所属城市" prop="city">
							<el-cascader
								v-model="ruleForm.city"
								:options="cityOptions"
								placeholder="请选择省市"
								clearable
								class="w100"
							></el-cascader>
						</el-form-item>
					</el-col>
					
					<!-- 新增时显示账号和密码 -->
					<template v-if="ruleForm.id === 0">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="租户账号" prop="tenantAccount">
								<el-input v-model="ruleForm.tenantAccount" placeholder="字母或数字，6位以上" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="密码" prop="password">
								<el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" show-password clearable @input="checkPasswordStrength"></el-input>
								<div class="password-strength" v-if="ruleForm.password">
									强度: <span :class="passwordStrengthClass">{{ passwordStrengthText }}</span>
								</div>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="确认密码" prop="confirmPassword">
								<el-input v-model="ruleForm.confirmPassword" placeholder="请再次输入密码" type="password" show-password clearable></el-input>
							</el-form-item>
						</el-col>
					</template>

					<!-- 修改时只显示账号（不可改） -->
					<template v-else>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="租户账号">
								<el-input v-model="ruleForm.tenantAccount" disabled></el-input>
							</el-form-item>
						</el-col>
					</template>

					<el-col :span="24" class="mb20">
						<el-form-item label="营业执照" prop="businessLicense">
							<div class="upload-container">
								<el-upload
									class="avatar-uploader"
									action="#"
									:auto-upload="false"
									:show-file-list="false"
									:on-change="handleAvatarSuccess"
									:before-upload="beforeAvatarUpload"
								>
									<img v-if="ruleForm.businessLicense" :src="ruleForm.businessLicense" class="avatar" />
									<div v-else class="upload-placeholder">
										<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
										<span class="upload-text">点击上传营业执照</span>
									</div>
								</el-upload>
								<div class="upload-tip">支持 jpg、png 格式，文件大小不超过 2MB</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, unref, computed, toRefs } from 'vue';
import { ElMessage, UploadProps } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { addTenant, editTenant } from '/@/api/system/tenant';
import { pcTextArr,provinceAndCityData } from 'element-china-area-data';

// 定义父组件传递的事件
const emit = defineEmits(['getTenantList']);

const formRef = ref<HTMLElement | null>(null);

// 省市数据（使用 element-china-area-data）
const cityOptions = ref<any[]>([]);

const initCityData = () => {
	const data = JSON.parse(JSON.stringify(provinceAndCityData));
	cityOptions.value = data.map((item: any) => {
		// 处理直辖市：北京(110000), 天津(120000), 上海(310000), 重庆(500000)
		if (['110000', '120000', '310000', '500000'].includes(item.value) || ['北京市', '天津市', '上海市', '重庆市'].includes(item.label)) {
			delete item.children;
		}
		return item;
	});
};
initCityData();

const state = reactive({
	isShowDialog: false,
	passwordStrength: 0,
	ruleForm: {
		id: 0,
		tenantName: '',
		tenantType: '' as number | '',
		contactPerson: '',
		phone: '',
		city: [] as string[],
		tenantAccount: '',
		password: '',
		confirmPassword: '',
		businessLicense: '',
	},
	rules: {
		tenantName: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
		tenantType: [{ required: true, message: '请选择租户类型', trigger: 'change' }],
		contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
		phone: [
			{ required: true, message: '请输入电话', trigger: 'blur' },
			{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
		],
		city: [{ required: true, message: '请选择所属城市', trigger: 'change' }],
		tenantAccount: [
			{ required: true, message: '请输入租户账号', trigger: 'blur' },
			{ pattern: /^[a-zA-Z0-9]{6,}$/, message: '账号必须为字母或数字，且长度至少6位', trigger: 'blur' }
		],
		password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
		confirmPassword: [
			{ required: true, message: '请再次输入密码', trigger: 'blur' },
			{
				validator: (rule: any, value: any, callback: any) => {
					if (value !== state.ruleForm.password) {
						callback(new Error('两次输入密码不一致'));
					} else {
						callback();
					}
				},
				trigger: 'blur'
			}
		],
		businessLicense: [{ required: true, message: '请上传营业执照', trigger: 'change' }]
	},
});

// 解构 state 以便在模板中使用
const { isShowDialog, ruleForm, rules, passwordStrength } = toRefs(state);

// 密码强度检测
const checkPasswordStrength = () => {
	const pwd = state.ruleForm.password;
	let strength = 0;
	if (pwd.length >= 6) strength++;
	if (/[A-Z]/.test(pwd)) strength++;
	if (/[a-z]/.test(pwd)) strength++;
	if (/[0-9]/.test(pwd)) strength++;
	if (/[^A-Za-z0-9]/.test(pwd)) strength++;
	state.passwordStrength = strength;
};

const passwordStrengthText = computed(() => {
	const s = state.passwordStrength;
	if (s < 2) return '弱';
	if (s < 4) return '中';
	return '强';
});

const passwordStrengthClass = computed(() => {
	const s = state.passwordStrength;
	if (s < 2) return 'strength-weak';
	if (s < 4) return 'strength-medium';
	return 'strength-strong';
});

// 打开弹窗
const openDialog = (row?: any) => {
	resetForm();
	if (row) {
		// 处理城市回显：如果是字符串且以00结尾，去掉00并转为数组（这里简化处理，实际可能需要根据code反查路径）
		// 假设 row.city 是 "110100"，element-china-area-data 的 provinceAndCityData 对应的是 "110000", "110100"
		// 注意：provinceAndCityData 的二级（市）code 通常不带后缀 00，或者需要具体看数据源
		// 这里假设后端存的是 "110100"，前端组件需要 ["110000", "110100"] 形式的路径数组
		// 由于没有反查函数，这里如果 row.city 是字符串，我们暂时将其直接放入数组，或者需要调用专门的工具函数
		// 简单处理：如果 row.city 是字符串，尝试回显
		let cityArray: string[] = [];
		if (row.city && typeof row.city === 'string') {
			const storedCode = row.city;
			// 判断是否为直辖市代码 (11xxxx, 12xxxx, 31xxxx, 50xxxx)
			if (/^(11|12|31|50)/.test(storedCode)) {
				// 直辖市，回显为 [2位代码] (如 '11')
				cityArray = [storedCode.substring(0, 2)];
			} else {
				// 普通省市，回显为 [2位省代码, 4位市代码] (如 '13', '1301')
				// 假设 storedCode 是 6 位，如 130100
				if (storedCode.length >= 4) {
					const provinceCode = storedCode.substring(0, 2);
					const cityCode = storedCode.substring(0, 4);
					cityArray = [provinceCode, cityCode];
				}
			}
		} else if (Array.isArray(row.city)) {
			cityArray = row.city;
		}

		state.ruleForm = {
			id: row.id,
			tenantName: row.tenantName,
			tenantType: row.tenantType,
			contactPerson: row.contactPerson,
			phone: row.phone,
			city: cityArray,
			tenantAccount: row.tenantAccount,
			password: '', // 修改时不显示密码
			confirmPassword: '',
			businessLicense: row.businessLicense,
		};
	}
	state.isShowDialog = true;
};

const closeDialog = () => {
	state.isShowDialog = false;
};

const onCancel = () => {
	closeDialog();
};

const onSubmit = () => {
	const formWrap = unref(formRef) as any;
	if (!formWrap) return;
	formWrap.validate((valid: boolean) => {
		if (valid) {
			// 处理城市数据提交：取数组最后一位
			const submitForm: any = { ...state.ruleForm };
			if (Array.isArray(submitForm.city) && submitForm.city.length > 0) {
				let lastCode = String(submitForm.city[submitForm.city.length - 1]);
				// 特殊处理直辖市：如果选中的是省级代码，转换为市级代码 (市辖区)
				const municipalityMap: Record<string, string> = {
					'11': '110100', '110000': '110100', // 北京
					'12': '120100', '120000': '120100', // 天津
					'31': '310100', '310000': '310100', // 上海
					'50': '500100', '500000': '500100', // 重庆
				};
				if (municipalityMap[lastCode]) {
					lastCode = municipalityMap[lastCode];
				} else if (lastCode.length === 4) {
					// 普通省市，如果是4位代码，补齐为6位
					lastCode = lastCode + '00';
				}
				submitForm.city = lastCode;
			} else {
				submitForm.city = '';
			}

			if (state.ruleForm.id === 0) {
				addTenant(submitForm).then(() => {
					ElMessage.success('添加成功');
					closeDialog();
					emit('getTenantList');
				});
			} else {
				// 过滤掉密码字段，或者后端接口决定是否更新密码
				// 根据需求，修改时不能修改密码
				const { password, confirmPassword, tenantAccount, ...rest } = submitForm;
				editTenant({ ...rest, id: state.ruleForm.id }).then(() => {
					ElMessage.success('修改成功');
					closeDialog();
					emit('getTenantList');
				});
			}
		}
	});
};

const resetForm = () => {
	state.ruleForm = {
		id: 0,
		tenantName: '',
		tenantType: '',
		contactPerson: '',
		phone: '',
		city: [],
		tenantAccount: '',
		password: '',
		confirmPassword: '',
		businessLicense: '',
	};
	state.passwordStrength = 0;
};

// 模拟上传图片
const handleAvatarSuccess: UploadProps['onChange'] = (uploadFile) => {
	state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
		ElMessage.error('Avatar picture must be JPG/PNG format!');
		return false;
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('Avatar picture size can not exceed 2MB!');
		return false;
	}
	return true;
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.system-edit-tenant-container {
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: cover;
		border-radius: 6px;
	}
	.upload-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 178px;
		height: 178px;
		color: #8c939d;
		background-color: #f5f7fa;
		
		.el-icon {
			font-size: 28px;
			margin-bottom: 8px;
		}
		
		.upload-text {
			font-size: 12px;
			color: #8c939d;
		}
	}
	.upload-tip {
		margin-top: 8px;
		font-size: 12px;
		color: #909399;
		line-height: 1.5;
	}
}
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
	.upload-placeholder {
		color: var(--el-color-primary);
		.upload-text {
			color: var(--el-color-primary);
		}
	}
}
.password-strength {
	font-size: 12px;
	margin-top: 5px;
	.strength-weak { color: #f56c6c; }
	.strength-medium { color: #e6a23c; }
	.strength-strong { color: #67c23a; }
}
</style>