feat(sj_1.0.0): 完成用户的详情

src/views/retry/dead-letter/modules/retry-letter-detail-drawer.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { watch } from 'vue';
 import { $t } from '@/locales';
 import { tagColor } from '@/utils/common';
 import { retryTaskTypeRecord } from '@/constants/business';
@@ -16,15 +15,7 @@ interface Props {
 const visible = defineModel<boolean>('visible', {
   default: false
 });
-const props = defineProps<Props>();
-
-watch(
-  () => props.rowData,
-  () => {
-    console.log(props.rowData);
-  },
-  { immediate: true }
-);
+defineProps<Props>();
 </script>
 
 <template>

src/views/user/manager/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="tsx">
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { ref } from 'vue';
 import { fetchDelUser, fetchGetUserPageList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
@@ -7,8 +8,13 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { roleRecord } from '@/constants/business';
 import UserManagerOperateDrawer from './modules/user-manager-operate-drawer.vue';
 import UserManagerSearch from './modules/user-manager-search.vue';
+import UserManagerDetailDrawer from './modules/user-manager-detail-drawer.vue';
 
 const appStore = useAppStore();
+const detailData = ref();
+const detailVisible = defineModel<boolean>('detailVisible', {
+  default: false
+});
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetUserPageList,
@@ -23,7 +29,6 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
   columns: () => [
     {
       key: 'permissions',
-      // title: $t('page.userManager.permissions'),
       align: 'left',
       type: 'expand',
       minWidth: 10,
@@ -54,7 +59,19 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'username',
       title: $t('page.userManager.username'),
       align: 'left',
-      minWidth: 120
+      minWidth: 120,
+      render: row => {
+        function showDetailDrawer() {
+          detailData.value = row || null;
+          detailVisible.value = true;
+        }
+
+        return (
+          <n-button text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.username}
+          </n-button>
+        );
+      }
     },
     {
       key: 'role',
@@ -161,6 +178,7 @@ function edit(id: string) {
         :row-data="editingData"
         @submitted="getData"
       />
+      <UserManagerDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
     </NCard>
   </div>
 </template>

src/views/user/manager/modules/user-manager-detail-drawer.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { NTag } from 'naive-ui';
+import { roleRecord } from '@/constants/business';
+import { $t } from '@/locales';
+import { tagColor } from '@/utils/common';
+
+defineOptions({
+  name: 'UserManagerDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.UserManager.UserManager | null;
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+watch(
+  () => props.rowData,
+  () => {
+    console.log(props.rowData);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="$t('page.groupConfig.detail')">
+    <NDescriptions label-placement="top" bordered :column="2">
+      <NDescriptionsItem :label="$t('page.userManager.username')" :span="2">
+        {{ rowData?.username }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.userManager.role')" :span="2">
+        <NTag :type="tagColor(rowData?.role!)">{{ $t(roleRecord[rowData?.role!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem
+        v-if="rowData?.permissions !== undefined"
+        :label="$t('page.userManager.permissionList')"
+        :span="2"
+      >
+        <NTag v-for="(item, index) in rowData?.permissions" :key="index" type="info">
+          <span style="font-weight: bolder">{{ item.groupName }}</span>
+          ({{ item.namespaceName }})
+        </NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem v-else :label="$t('page.userManager.permissionList')" :span="2">
+        <NTag type="info">ALL</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('common.updateDt')" :span="2">
+        {{ rowData?.updateDt }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>