feat: 优化租户列表的显示及详情查看

src/views/modules/tenant/index.vue

@@ -33,29 +33,30 @@
 				<el-table-column prop="code" label="租户编码" min-width="120" align="center" />
 				<el-table-column prop="systemName" label="系统名称" min-width="120" align="center" />
 				<el-table-column prop="systemCopyright" label="系统版权" min-width="120" align="center" />
-				<el-table-column prop="logoMini" label="系统LOGO（小图标）" width="120" align="center">
+				<!-- <el-table-column prop="logoMini" label="系统LOGO（小图标）" width="120" align="center">
 					<template #default="{ row }">
 						<el-image v-if="row.logoMini" :src="row.logoMini" style="width: 90px; height: 90px" preview-teleported :preview-src-list="[row.logoMini]" />
 					</template>
-				</el-table-column>
-				<el-table-column prop="logoPic" label="登录展示图" width="120" align="center">
-					<template #default="{ row }">
+</el-table-column>
+<el-table-column prop="logoPic" label="登录展示图" width="120" align="center">
+	<template #default="{ row }">
 						<el-image v-if="row.logoPic" :src="row.logoPic" style="width: 90px; height: 90px" preview-teleported :preview-src-list="[row.logoPic]" />
 					</template>
-				</el-table-column>
-				<el-table-column prop="logo" label="系统LOGO" width="120" align="center">
-					<template #default="{ row }">
+</el-table-column>
+<el-table-column prop="logo" label="系统LOGO" width="120" align="center">
+	<template #default="{ row }">
 						<el-image v-if="row.logo" :src="row.logo" style="width: 90px; height: 90px" preview-teleported :preview-src-list="[row.logo]" />
 					</template>
-				</el-table-column>
+</el-table-column> -->
 				<el-table-column prop="status" label="租户状态" width="100" align="center">
 					<template #default="scope">
 						<el-switch v-model="scope.row.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
 						</el-switch>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="100" align="center" v-col="'handle'">
+				<el-table-column label="操作" width="120" align="center">
 					<template #default="scope">
+						<el-button size="small" text type="primary" @click="view(scope.row)">查看</el-button>
 						<el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">修改</el-button>
 						<el-button size="small" text type="info" @click="onDel(scope.row)" v-auth="'del'">删除</el-button>
 					</template>
@@ -64,17 +65,20 @@
 			<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
 		</el-card>
 		<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
+		<viewVue ref="viewRef"></viewVue>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 import EditForm from './edit.vue'
+import viewVue from './view.vue'
 import api from '/@/api/modules/tenant'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { useSearch } from '/@/hooks/useCommon'
 
 const editFormRef = ref()
+const viewRef = ref()
 const queryRef = ref()
 const ids = ref<number[]>([])
 
@@ -91,6 +95,10 @@ const addOrEdit = async (row?: any) => {
 	}
 }
 
+const view = async (row?: any) => {
+	viewRef.value.open(row)
+}
+
 const handleSelectionChange = (selection: any[]) => {
 	ids.value = selection.filter(item => item.types === 2).map((item) => item.id);
 };

src/views/modules/tenant/view.vue

@@ -0,0 +1,41 @@
+<template>
+	<el-dialog class="api-edit" v-model="showDialog" title="租户详情" width="1100px">
+
+		<el-descriptions class="margin-top" :column="3" border>
+			<el-descriptions-item label="租户名称">{{ formData.name }}</el-descriptions-item>
+			<el-descriptions-item label="租户编码">{{ formData.code }}</el-descriptions-item>
+			<el-descriptions-item label="系统名称">{{ formData.systemName }}</el-descriptions-item>
+			<el-descriptions-item label="系统版权">{{ formData.systemCopyright }}</el-descriptions-item>
+			<el-descriptions-item label="简介" span="2">{{ formData.description }}</el-descriptions-item>
+			<el-descriptions-item label="系统LOGO（小图标）"><el-image fit="contain" v-if="formData.logoMini" :src="formData.logoMini" style="width: 200px; height: 200px" preview-teleported :preview-src-list="[formData.logoMini]" /></el-descriptions-item>
+			<el-descriptions-item label="登录展示图"><el-image fit="contain" v-if="formData.logoPic" :src="formData.logoPic" style="width: 200px; height: 200px" preview-teleported :preview-src-list="[formData.logoPic]" /></el-descriptions-item>
+			<el-descriptions-item label="系统LOGO"><el-image fit="contain" v-if="formData.logo" :src="formData.logo" style="width: 200px; height: 200px" preview-teleported :preview-src-list="[formData.logo]" /></el-descriptions-item>
+		</el-descriptions>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+
+const baseForm: any = {
+	id: undefined,
+	name: '',
+	code: '',
+	systemName: '',
+	systemCopyright: '',
+	description: '',
+};
+
+const formData = reactive<any>(JSON.parse(JSON.stringify(baseForm)));
+
+const open = async (row: any) => {
+	Object.assign(formData, row)
+	showDialog.value = true;
+};
+
+defineExpose({ open });
+</script>