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

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>