From 49c9a2b381aa1062014018831bffb7a58a213cef Mon Sep 17 00:00:00 2001
From: WUSIJIAN <13825895+wsj0228@user.noreply.gitee.com>
Date: Tue, 9 Dec 2025 10:37:54 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E7=A7=9F=E6=88=B7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=BB=84=E4=BB=B6,=E9=87=87=E7=94=A8=20setup=20?=
 =?UTF-8?q?=E8=AF=AD=E6=B3=95=E7=B3=96=E5=B9=B6=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/customerService/product/index.vue   |   1 -
 .../system/tenant/component/editTenant.vue    | 352 +++++++++---------
 src/views/system/tenant/index.vue             | 191 +++++-----
 3 files changed, 260 insertions(+), 284 deletions(-)

diff --git a/src/views/customerService/product/index.vue b/src/views/customerService/product/index.vue
index ab1e9b7..5aea33e 100644
--- a/src/views/customerService/product/index.vue
+++ b/src/views/customerService/product/index.vue
@@ -58,7 +58,6 @@
 				<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip>
 					<template #default="{ row }">
 						{{ formatTime(row.updatedAt) }}
-						<!-- 修正：应该是updatedAt -->
 					</template>
 				</el-table-column>
 				<el-table-column label="操作" width="220">
diff --git a/src/views/system/tenant/component/editTenant.vue b/src/views/system/tenant/component/editTenant.vue
index feb24c9..6b88bc8 100644
--- a/src/views/system/tenant/component/editTenant.vue
+++ b/src/views/system/tenant/component/editTenant.vue
@@ -102,196 +102,184 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, defineComponent, ref, unref, computed } from 'vue';
+<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, getTenant } from '/@/api/system/tenant';
+import { addTenant, editTenant } from '/@/api/system/tenant';
 import { pcTextArr } from 'element-china-area-data';
 
-export default defineComponent({
-	name: 'systemEditTenant',
-	components: { Plus },
-	setup(prop, { emit }) {
-		const formRef = ref<HTMLElement | null>(null);
-		
-		// 省市数据（使用 element-china-area-data）
-		const cityOptions = pcTextArr;
+// 定义父组件传递的事件
+const emit = defineEmits(['getTenantList']);
 
-		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' }]
-			},
-		});
+const formRef = ref<HTMLElement | null>(null);
 
-		// 密码强度检测
-		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;
-		};
+// 省市数据（使用 element-china-area-data）
+const cityOptions = pcTextArr;
 
-		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) {
-				state.ruleForm = {
-					id: row.id,
-					tenantName: row.tenantName,
-					tenantType: row.tenantType,
-					contactPerson: row.contactPerson,
-					phone: row.phone,
-					city: row.city || [],
-					tenantAccount: row.tenantAccount,
-					password: '', // 修改时不显示密码
-					confirmPassword: '',
-					businessLicense: row.businessLicense,
-				};
-				// 获取详情接口（可选）
-				// getTenant(row.id).then(...)
-			}
-			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) {
-					if (state.ruleForm.id === 0) {
-						addTenant(state.ruleForm).then(() => {
-							ElMessage.success('添加成功');
-							closeDialog();
-							emit('getTenantList');
-						});
-					} else {
-						// 过滤掉密码字段，或者后端接口决定是否更新密码
-						// 根据需求，修改时不能修改密码
-						const { password, confirmPassword, tenantAccount, ...rest } = state.ruleForm;
-						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;
-		};
-
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			formRef,
-			cityOptions,
-			checkPasswordStrength,
-			passwordStrengthText,
-			passwordStrengthClass,
-			handleAvatarSuccess,
-			beforeAvatarUpload,
-			...toRefs(state),
-		};
+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) {
+		state.ruleForm = {
+			id: row.id,
+			tenantName: row.tenantName,
+			tenantType: row.tenantType,
+			contactPerson: row.contactPerson,
+			phone: row.phone,
+			city: row.city || [],
+			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) {
+			if (state.ruleForm.id === 0) {
+				addTenant(state.ruleForm).then(() => {
+					ElMessage.success('添加成功');
+					closeDialog();
+					emit('getTenantList');
+				});
+			} else {
+				// 过滤掉密码字段，或者后端接口决定是否更新密码
+				// 根据需求，修改时不能修改密码
+				const { password, confirmPassword, tenantAccount, ...rest } = state.ruleForm;
+				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>
 
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index fff8e56..9a67283 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -50,8 +50,8 @@
 				<el-table-column prop="tenantName" label="租户名称" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="tenantType" label="租户类型" show-overflow-tooltip>
 					<template #default="scope">
-						<el-tag v-if="scope.row.tenantType === 1">普通类型</el-tag>
-						<el-tag v-else-if="scope.row.tenantType === 2" type="warning">代理类型</el-tag>
+						<el-tag v-if="scope.row.tenantType === 1">普通</el-tag>
+						<el-tag v-else-if="scope.row.tenantType === 2" type="warning">代理</el-tag>
 						<el-tag v-else type="info">未知</el-tag>
 					</template>
 				</el-table-column>
@@ -96,110 +96,99 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+export default {
+	name: 'systemTenant',
+};
+</script>
+
+<script setup lang="ts">
+import { toRefs, reactive, onMounted, ref } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditTenant from './component/editTenant.vue';
 import { getTenantList, deleteTenant } from '/@/api/system/tenant';
 import { pcTextArr } from 'element-china-area-data';
 
-export default defineComponent({
-	name: 'systemTenant',
-	components: { EditTenant },
-	setup() {
-		const editTenantRef = ref();
-		const queryRef = ref();
-		const state = reactive({
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 10,
-					tenantName: '',
-					tenantType: '',
-					city: [],
-				},
-			},
-		});
-
-		// 省市数据
-		const cityOptions = pcTextArr;
-
-		// 初始化表格数据
-		const tenantList = () => {
-			state.tableData.loading = true;
-			getTenantList(state.tableData.param)
-				.then((res: any) => {
-					state.tableData.data = res.data.list ?? [];
-					state.tableData.total = res.data.total;
-				})
-				.catch(() => {
-					// 模拟数据，防止报错影响演示
-					state.tableData.data = [];
-					state.tableData.total = 0;
-				})
-				.finally(() => {
-					state.tableData.loading = false;
-				});
-		};
-
-		// 打开新增弹窗
-		const onOpenAddTenant = () => {
-			editTenantRef.value.openDialog();
-		};
-
-		// 打开修改弹窗
-		const onOpenEditTenant = (row: any) => {
-			editTenantRef.value.openDialog(row);
-		};
-
-		// 删除
-		const onRowDel = (row: any) => {
-			ElMessageBox.confirm(`此操作将永久删除租户：“${row.tenantName}”，是否继续?`, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
-				type: 'warning',
-			})
-				.then(() => {
-					deleteTenant([row.id]).then(() => {
-						ElMessage.success('删除成功');
-						tenantList();
-					});
-				})
-				.catch(() => {});
-		};
-
-		// 重置
-		const resetQuery = (formEl: FormInstance | undefined) => {
-			if (!formEl) return;
-			formEl.resetFields();
-			tenantList();
-		};
-
-		// 解析城市名称
-		const getCityName = (cityArr: string[]) => {
-			if (!cityArr || cityArr.length === 0) return '';
-			// 这里简单模拟，实际可以用 cityOptions 递归查找
-			return cityArr.join(' / ');
-		};
-
-		onMounted(() => {
-			tenantList();
-		});
-
-		return {
-			queryRef,
-			editTenantRef,
-			onOpenAddTenant,
-			onOpenEditTenant,
-			onRowDel,
-			tenantList,
-			resetQuery,
-			cityOptions,
-			getCityName,
-			...toRefs(state),
-		};
+const editTenantRef = ref();
+const queryRef = ref();
+const state = reactive({
+	tableData: {
+		data: [],
+		total: 0,
+		loading: false,
+		param: {
+			pageNum: 1,
+			pageSize: 10,
+			tenantName: '',
+			tenantType: '',
+			city: [],
+		},
 	},
 });
+
+const { tableData } = toRefs(state);
+
+// 省市数据
+const cityOptions = pcTextArr;
+
+// 初始化表格数据
+const tenantList = () => {
+	state.tableData.loading = true;
+	getTenantList(state.tableData.param)
+		.then((res: any) => {
+			state.tableData.data = res.data.list ?? [];
+			state.tableData.total = res.data.total;
+		})
+		.catch(() => {
+			// 模拟数据，防止报错影响演示
+			state.tableData.data = [];
+			state.tableData.total = 0;
+		})
+		.finally(() => {
+			state.tableData.loading = false;
+		});
+};
+
+// 打开新增弹窗
+const onOpenAddTenant = () => {
+	editTenantRef.value.openDialog();
+};
+
+// 打开修改弹窗
+const onOpenEditTenant = (row: any) => {
+	editTenantRef.value.openDialog(row);
+};
+
+// 删除
+const onRowDel = (row: any) => {
+	ElMessageBox.confirm(`此操作将永久删除租户：“${row.tenantName}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			deleteTenant([row.id]).then(() => {
+				ElMessage.success('删除成功');
+				tenantList();
+			});
+		})
+		.catch(() => {});
+};
+
+// 重置
+const resetQuery = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	tenantList();
+};
+
+// 解析城市名称
+const getCityName = (cityArr: string[]) => {
+	if (!cityArr || cityArr.length === 0) return '';
+	// 这里简单模拟，实际可以用 cityOptions 递归查找
+	return cityArr.join(' / ');
+};
+
+onMounted(() => {
+	tenantList();
+});
 </script>