重构租户管理组件,采用 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,17 +102,16 @@
 	</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）
@@ -164,6 +163,9 @@ export default defineComponent({
 	},
 });
 
+// 解构 state 以便在模板中使用
+const { isShowDialog, ruleForm, rules, passwordStrength } = toRefs(state);
+
 // 密码强度检测
 const checkPasswordStrength = () => {
 	const pwd = state.ruleForm.password;
@@ -206,8 +208,6 @@ export default defineComponent({
 			confirmPassword: '',
 			businessLicense: row.businessLicense,
 		};
-				// 获取详情接口（可选）
-				// getTenant(row.id).then(...)
 	}
 	state.isShowDialog = true;
 };
@@ -277,21 +277,9 @@ export default defineComponent({
 	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,16 +96,18 @@
 </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({
@@ -123,6 +125,8 @@ export default defineComponent({
 	},
 });
 
+const { tableData } = toRefs(state);
+
 // 省市数据
 const cityOptions = pcTextArr;
 
@@ -187,19 +191,4 @@ export default defineComponent({
 onMounted(() => {
 	tenantList();
 });
-
-		return {
-			queryRef,
-			editTenantRef,
-			onOpenAddTenant,
-			onOpenEditTenant,
-			onRowDel,
-			tenantList,
-			resetQuery,
-			cityOptions,
-			getCityName,
-			...toRefs(state),
-		};
-	},
-});
 </script>