feat(sj_1.0.0): 用户列表页完成

src/constants/business.ts

@@ -212,3 +212,9 @@ export const operationReasonRecord: Record<Api.Common.OperationReason, App.I18n.
   14: 'common.jobOperationReason.items.workflowDecisionFailed'
 };
 export const operationReasonOptions = transformRecordToNumberOption(operationReasonRecord);
+
+export const roleRecord: Record<Api.UserManager.Role, App.I18n.I18nKey> = {
+  1: 'page.userManager.roleItem.user',
+  2: 'page.userManager.roleItem.admin'
+};
+export const roleRecordOptions = transformRecordToNumberOption(roleRecord);

src/locales/langs/en-us.ts

@@ -143,7 +143,9 @@ const local: App.I18n.Schema = {
         workflowNodeClosedSkipExecution: 'Node closed, skip execution',
         workflowDecisionFailed: 'Workflow decision failed'
       }
-    }
+    },
+    updateDt: 'updated time',
+    createDt: 'created time'
   },
   request: {
     logout: 'Logout user after request failed',
@@ -930,7 +932,7 @@ const local: App.I18n.Schema = {
       title: 'UserCenter List',
       username: 'Username',
       role: 'Role',
-      permissions: 'group',
+      permissions: 'Permission',
       checkPassword: 'Confirm Password',
       password: 'Password',
       form: {
@@ -941,8 +943,12 @@ const local: App.I18n.Schema = {
         permissions: 'Please select Group',
         namespaceIds: 'Please select Namespaces'
       },
-      addUser: 'Add User Center',
+      addUser: 'Add User',
-      editUser: 'Add User Center'
+      editUser: 'Add User',
+      roleItem: {
+        user: 'User',
+        admin: 'Admin'
+      }
     }
   },
   form: {

src/locales/langs/zh-cn.ts

@@ -143,7 +143,9 @@ const local: App.I18n.Schema = {
         workflowNodeClosedSkipExecution: '节点关闭跳过执行',
         workflowDecisionFailed: '判定未通过'
       }
-    }
+    },
+    updateDt: '更新时间',
+    createDt: '创建时间'
   },
   request: {
     logout: '请求失败后登出用户',
@@ -926,7 +928,7 @@ const local: App.I18n.Schema = {
       title: '用户列表',
       username: '用户名',
       role: '角色',
-      permissions: '组',
+      permissions: '权限',
       checkPassword: '确认密码',
       password: '密码',
       form: {
@@ -937,8 +939,12 @@ const local: App.I18n.Schema = {
         permissions: '请选择组',
         namespaceIds: '请选择命名空间'
       },
-      addUser: '新增用户中心',
+      addUser: '新增用户',
-      editUser: '编辑用户中心'
+      editUser: '编辑用户',
+      roleItem: {
+        user: '普通用户',
+        admin: '管理员'
+      }
     }
   },
   form: {

src/typings/api.d.ts

@@ -349,6 +349,8 @@ declare namespace Api {
     type GroupConfig = Common.CommonRecord<{
       /** 命名空间id */
       namespaceId?: string;
+      /** 命名空间名称 */
+      namespaceName?: string;
       /** 组名 */
       groupName: string;
       /** 组描述 */
@@ -1093,23 +1095,27 @@ declare namespace Api {
       /** 确认密码 */
       checkPassword: string;
       /** 角色 */
-      role: string;
+      role: Role;
-      /** 命名空间 */
-      namespaceIds?: string;
       /** 组 */
-      permissions: string[];
+      permissions: Permission[];
+    }>;
+
+    type Permission = Common.CommonRecord<{
+      groupName: string;
+      namespaceId: string;
+      namespaceName: string;
     }>;
 
     /** userManager search params */
     type UserManagerSearchParams = CommonType.RecordNullable<
-      Pick<
+      Pick<Api.UserManager.UserManager, 'username' | 'password' | 'checkPassword' | 'role' | 'permissions'> &
-        Api.UserManager.UserManager,
-        'username' | 'password' | 'checkPassword' | 'role' | 'namespaceIds' | 'permissions'
-      > &
         CommonSearchParams
     >;
 
     /** userCenter list */
     type UserManagerList = Common.PaginatingQueryRecord<UserManager>;
+
+    /** 1、user 2、admin */
+    type Role = 1 | 2;
   }
 }

src/typings/app.d.ts

@@ -390,6 +390,8 @@ declare namespace App {
             workflowDecisionFailed: string;
           };
         };
+        updateDt: string;
+        createDt: string;
       };
       request: {
         logout: string;
@@ -1100,6 +1102,10 @@ declare namespace App {
           };
           addUser: string;
           editUser: string;
+          roleItem: {
+            user: string;
+            admin: string;
+          };
         };
       };
       form: {

src/views/user/manager/index.vue

@@ -1,9 +1,10 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
 import { fetchGetUserPageList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
+import { roleRecord } from '@/constants/business';
 import UserCenterOperateDrawer from './modules/user-manager-operate-drawer.vue';
 import UserCenterSearch from './modules/user-manager-search.vue';
 
@@ -20,17 +21,6 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     role: null
   },
   columns: () => [
-    {
-      type: 'selection',
-      align: 'center',
-      width: 48
-    },
-    {
-      key: 'index',
-      title: $t('common.index'),
-      align: 'center',
-      width: 64
-    },
     {
       key: 'username',
       title: $t('page.userManager.username'),
@@ -41,7 +31,40 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'role',
       title: $t('page.userManager.role'),
       align: 'left',
-      minWidth: 120
+      minWidth: 50,
+      render: row => {
+        if (row.role === null) {
+          return null;
+        }
+        const tagMap: Record<Api.UserManager.Role, NaiveUI.ThemeColor> = {
+          1: 'info',
+          2: 'warning'
+        };
+        const label = $t(roleRecord[row.role]);
+
+        return <NTag type={tagMap[row.role!]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'permissions',
+      title: $t('page.userManager.permissions'),
+      align: 'left',
+      type: 'expand',
+      minWidth: 200,
+      renderExpand: row => {
+        if (!row.permissions) {
+          return <NTag type="info">ALL</NTag>;
+        }
+        return (
+          <NTag type="warning">{row.permissions?.map(option => `${option.groupName}(${option.namespaceName})`)}</NTag>
+        );
+      }
+    },
+    {
+      key: 'updateDt',
+      title: $t('common.updateDt'),
+      align: 'left',
+      minWidth: 50
     },
     {
       key: 'operate',

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

@@ -4,6 +4,7 @@ import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
 import { fetchAddUser, fetchEditUser, fetchGetAllGroupConfigList } from '@/service/api';
+import { roleRecordOptions } from '@/constants/business';
 
 defineOptions({
   name: 'UserCenterOperateDrawer'
@@ -53,8 +54,8 @@ function createDefaultModel(): Model {
     username: '',
     password: '',
     checkPassword: '',
-    role: '',
+    role: 1,
-    permissions: []
+    permissions: [{ groupName: '', namespaceName: '', namespaceId: '' }]
   };
 }
 
@@ -102,49 +103,22 @@ async function handleSubmit() {
   emit('submitted');
 }
 
+const valueRef = ref<Array<string | number>>();
+
 const getAllGroupConfigList = async () => {
   const res = await fetchGetAllGroupConfigList([]);
   groupConfigs.value = res.data?.map(option => ({
     value: {
       groupName: option.groupName,
-      namespaceId: option.groupName
+      namespaceId: option.namespaceId
     },
-    label: () => {
+    label: `${option.groupName}(${option.namespaceName})`
-      return (
-        <div>
-          <span>{option.groupName}</span>
-          <br />
-          <span>{option.namespaceId}</span>
-        </div>
-      );
-    }
   }));
 };
 
 // 加载组列表数据
 getAllGroupConfigList();
 
-const valueRef = ref<Array<string | number>>([]);
-
-// const renderSourceList: TransferRenderSourceList = function ({ onCheck, pattern }) {
-//   return h(NCheckbox, {
-//     style: 'margin: 0 4px;',
-//     keyField: 'value',
-//     checkable: true,
-//     selectable: false,
-//     blockLine: true,
-//     checkOnClick: true,
-//     data: groupConfigs.value,
-//     pattern,
-//     checkedKeys: valueRef.value,
-//     onUpdateCheckedKeys: (checkedKeys: Array<string | number>) => {
-//       // console.log(checkedKeys)
-//       model.permissions = checkedKeys as string[];
-//       onCheck(checkedKeys);
-//     }
-//   });
-// };
-
 watch(visible, () => {
   if (visible.value) {
     handleUpdateModelWhenEdit();
@@ -152,10 +126,13 @@ watch(visible, () => {
   }
 });
 
-watch(valueRef.value, () => {
+watch(
-  // console.log(valueRef.value)
+  () => valueRef.value,
-  model.permissions = valueRef.value as string[];
+  () => {
-});
+    console.log('valueRef', valueRef.value);
+    model.permissions = valueRef.value as any;
+  }
+);
 </script>
 
 <template>
@@ -171,17 +148,20 @@ watch(valueRef.value, () => {
         <NInput v-model:value="model.checkPassword" :placeholder="$t('page.userManager.form.checkPassword')" />
       </NFormItem>
       <NFormItem :label="$t('page.userManager.role')" path="role">
-        <NInput v-model:value="model.role" :placeholder="$t('page.userManager.form.role')" />
+        <NRadioGroup v-model:value="model.role" name="role">
+          <NSpace>
+            <NRadio v-for="item in roleRecordOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NSpace>
+        </NRadioGroup>
       </NFormItem>
       <NFormItem :label="$t('page.userManager.permissions')" path="permissions">
-        <!--        <NTransfer-->
+        <NTransfer
-        <!--          v-model:value="model.permissions"-->
+          v-model:value="valueRef"
-        <!--          :render-source-list="renderSourceList"-->
+          virtual-scroll
-        <!--          virtual-scroll-->
+          :options="groupConfigs"
-        <!--          :options="groupConfigs"-->
+          target-filterable
-        <!--          target-filterable-->
+          source-filterable
-        <!--          source-filterable-->
+        />
-        <!--        />-->
       </NFormItem>
     </NForm>
     <template #footer>

src/views/user/manager/modules/user-manager-search.vue

@@ -28,9 +28,6 @@ function search() {
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.userManager.username')" path="username" class="pr-24px">
       <NInput v-model:value="model.username" :placeholder="$t('page.userManager.form.username')" />
     </NFormItemGi>
-    <NFormItemGi span="24 s:12 m:6" :label="$t('page.userManager.role')" path="role" class="pr-24px">
-      <NInput v-model:value="model.role" :placeholder="$t('page.userManager.form.role')" />
-    </NFormItemGi>
   </SearchForm>
 </template>