重构租户管理组件,采用 setup 语法糖并优化代码结构

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">

src/views/system/tenant/component/editTenant.vue

@@ -102,23 +102,22 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { reactive, toRefs, defineComponent, ref, unref, computed } from 'vue';
+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',
+const emit = defineEmits(['getTenantList']);
-	components: { Plus },
-	setup(prop, { emit }) {
-		const formRef = ref<HTMLElement | null>(null);
 
-		// 省市数据（使用 element-china-area-data）
+const formRef = ref<HTMLElement | null>(null);
-		const cityOptions = pcTextArr;
 
-		const state = reactive({
+// 省市数据（使用 element-china-area-data）
+const cityOptions = pcTextArr;
+
+const state = reactive({
 	isShowDialog: false,
 	passwordStrength: 0,
 	ruleForm: {
@@ -162,10 +161,13 @@ export default defineComponent({
 		],
 		businessLicense: [{ required: true, message: '请上传营业执照', trigger: 'change' }]
 	},
-		});
+});
 
-		// 密码强度检测
+// 解构 state 以便在模板中使用
-		const checkPasswordStrength = () => {
+const { isShowDialog, ruleForm, rules, passwordStrength } = toRefs(state);
+
+// 密码强度检测
+const checkPasswordStrength = () => {
 	const pwd = state.ruleForm.password;
 	let strength = 0;
 	if (pwd.length >= 6) strength++;
@@ -174,24 +176,24 @@ export default defineComponent({
 	if (/[0-9]/.test(pwd)) strength++;
 	if (/[^A-Za-z0-9]/.test(pwd)) strength++;
 	state.passwordStrength = strength;
-		};
+};
 
-		const passwordStrengthText = computed(() => {
+const passwordStrengthText = computed(() => {
 	const s = state.passwordStrength;
 	if (s < 2) return '弱';
 	if (s < 4) return '中';
 	return '强';
-		});
+});
 
-		const passwordStrengthClass = computed(() => {
+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) => {
+const openDialog = (row?: any) => {
 	resetForm();
 	if (row) {
 		state.ruleForm = {
@@ -206,21 +208,19 @@ export default defineComponent({
 			confirmPassword: '',
 			businessLicense: row.businessLicense,
 		};
-				// 获取详情接口（可选）
-				// getTenant(row.id).then(...)
 	}
 	state.isShowDialog = true;
-		};
+};
 
-		const closeDialog = () => {
+const closeDialog = () => {
 	state.isShowDialog = false;
-		};
+};
 
-		const onCancel = () => {
+const onCancel = () => {
 	closeDialog();
-		};
+};
 
-		const onSubmit = () => {
+const onSubmit = () => {
 	const formWrap = unref(formRef) as any;
 	if (!formWrap) return;
 	formWrap.validate((valid: boolean) => {
@@ -243,9 +243,9 @@ export default defineComponent({
 			}
 		}
 	});
-		};
+};
 
-		const resetForm = () => {
+const resetForm = () => {
 	state.ruleForm = {
 		id: 0,
 		tenantName: '',
@@ -259,14 +259,14 @@ export default defineComponent({
 		businessLicense: '',
 	};
 	state.passwordStrength = 0;
-		};
+};
 
-		// 模拟上传图片
+// 模拟上传图片
-		const handleAvatarSuccess: UploadProps['onChange'] = (uploadFile) => {
+const handleAvatarSuccess: UploadProps['onChange'] = (uploadFile) => {
 	state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
-		};
+};
 
-		const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+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;
@@ -275,23 +275,11 @@ export default defineComponent({
 		return false;
 	}
 	return true;
-		};
+};
 
-		return {
+// 暴露变量
+defineExpose({
 	openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			formRef,
-			cityOptions,
-			checkPasswordStrength,
-			passwordStrengthText,
-			passwordStrengthClass,
-			handleAvatarSuccess,
-			beforeAvatarUpload,
-			...toRefs(state),
-		};
-	},
 });
 </script>
 

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-if="scope.row.tenantType === 1">普通</el-tag>
-						<el-tag v-else-if="scope.row.tenantType === 2" type="warning">代理类型</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,19 +96,21 @@
 </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({
+const editTenantRef = ref();
-	name: 'systemTenant',
+const queryRef = ref();
-	components: { EditTenant },
+const state = reactive({
-	setup() {
-		const editTenantRef = ref();
-		const queryRef = ref();
-		const state = reactive({
 	tableData: {
 		data: [],
 		total: 0,
@@ -121,13 +123,15 @@ export default defineComponent({
 			city: [],
 		},
 	},
-		});
+});
 
-		// 省市数据
+const { tableData } = toRefs(state);
-		const cityOptions = pcTextArr;
 
-		// 初始化表格数据
+// 省市数据
-		const tenantList = () => {
+const cityOptions = pcTextArr;
+
+// 初始化表格数据
+const tenantList = () => {
 	state.tableData.loading = true;
 	getTenantList(state.tableData.param)
 		.then((res: any) => {
@@ -142,20 +146,20 @@ export default defineComponent({
 		.finally(() => {
 			state.tableData.loading = false;
 		});
-		};
+};
 
-		// 打开新增弹窗
+// 打开新增弹窗
-		const onOpenAddTenant = () => {
+const onOpenAddTenant = () => {
 	editTenantRef.value.openDialog();
-		};
+};
 
-		// 打开修改弹窗
+// 打开修改弹窗
-		const onOpenEditTenant = (row: any) => {
+const onOpenEditTenant = (row: any) => {
 	editTenantRef.value.openDialog(row);
-		};
+};
 
-		// 删除
+// 删除
-		const onRowDel = (row: any) => {
+const onRowDel = (row: any) => {
 	ElMessageBox.confirm(`此操作将永久删除租户：“${row.tenantName}”，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
@@ -168,38 +172,23 @@ export default defineComponent({
 			});
 		})
 		.catch(() => {});
-		};
+};
 
-		// 重置
+// 重置
-		const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
 	tenantList();
-		};
+};
 
-		// 解析城市名称
+// 解析城市名称
-		const getCityName = (cityArr: string[]) => {
+const getCityName = (cityArr: string[]) => {
 	if (!cityArr || cityArr.length === 0) return '';
 	// 这里简单模拟，实际可以用 cityOptions 递归查找
 	return cityArr.join(' / ');
-		};
+};
 
-		onMounted(() => {
+onMounted(() => {
 	tenantList();
-		});
-
-		return {
-			queryRef,
-			editTenantRef,
-			onOpenAddTenant,
-			onOpenEditTenant,
-			onRowDel,
-			tenantList,
-			resetQuery,
-			cityOptions,
-			getCityName,
-			...toRefs(state),
-		};
-	},
 });
 </script>