feat(sj_1.0.0): 用户CRUD完成

src/locales/langs/en-us.ts

@@ -935,6 +935,8 @@ const local: App.I18n.Schema = {
       permissions: 'Permission',
       checkPassword: 'Confirm Password',
       password: 'Password',
+      updatePassword: 'Update Password',
+      permissionList: 'Permission List',
       form: {
         role: 'Please enter Role',
         password: 'Please enter Password',

src/locales/langs/zh-cn.ts

@@ -931,6 +931,8 @@ const local: App.I18n.Schema = {
       permissions: '权限',
       checkPassword: '确认密码',
       password: '密码',
+      updatePassword: '更新密码',
+      permissionList: '权限列表',
       form: {
         role: '请输入角色',
         password: '请输入密码',

src/router/elegant/routes.ts

@@ -436,7 +436,9 @@ export const generatedRoutes: GeneratedRoute[] = [
         component: 'view.retry_dead-letter',
         meta: {
           title: 'retry_dead-letter',
-          i18nKey: 'route.retry_dead-letter'
+          i18nKey: 'route.retry_dead-letter',
+          icon: 'streamline:interface-arrows-synchronize-warning-arrow-fail-notification-sync-warning-failure-synchronize-error',
+          order: 30
         }
       },
       {
@@ -446,7 +448,8 @@ export const generatedRoutes: GeneratedRoute[] = [
         meta: {
           title: 'retry_log',
           i18nKey: 'route.retry_log',
-          icon: 'tabler:logs'
+          icon: 'tabler:logs',
+          order: 20
         }
       },
       {
@@ -456,7 +459,8 @@ export const generatedRoutes: GeneratedRoute[] = [
         meta: {
           title: 'retry_scene',
           i18nKey: 'route.retry_scene',
-          icon: 'cbi:scene-dynamic'
+          icon: 'cbi:scene-dynamic',
+          order: 40
         }
       },
       {
@@ -466,7 +470,8 @@ export const generatedRoutes: GeneratedRoute[] = [
         meta: {
           title: 'retry_task',
           i18nKey: 'route.retry_task',
-          icon: 'octicon:tasklist'
+          icon: 'octicon:tasklist',
+          order: 10
         }
       }
     ]
@@ -477,7 +482,9 @@ export const generatedRoutes: GeneratedRoute[] = [
     component: 'layout.base',
     meta: {
       title: 'user',
-      i18nKey: 'route.user'
+      i18nKey: 'route.user',
+      order: 900,
+      icon: 'material-symbols:manage-accounts'
     },
     children: [
       {

src/typings/api.d.ts

@@ -1103,7 +1103,7 @@ declare namespace Api {
     type Permission = Common.CommonRecord<{
       groupName: string;
       namespaceId: string;
-      namespaceName: string;
+      namespaceName?: string;
     }>;
 
     /** userManager search params */

src/typings/app.d.ts

@@ -1092,6 +1092,8 @@ declare namespace App {
           checkPassword: string;
           password: string;
           permissions: string;
+          updatePassword: string;
+          permissionList: string;
           form: {
             role: string;
             password: string;

src/views/user/manager/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="tsx">
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
-import { fetchGetUserPageList } from '@/service/api';
+import { fetchDelUser, 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';
+import UserManagerOperateDrawer from './modules/user-manager-operate-drawer.vue';
+import UserManagerSearch from './modules/user-manager-search.vue';
 
 const appStore = useAppStore();
 
@@ -21,6 +21,35 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     role: null
   },
   columns: () => [
+    {
+      key: 'permissions',
+      // title: $t('page.userManager.permissions'),
+      align: 'left',
+      type: 'expand',
+      minWidth: 10,
+      renderExpand: row => {
+        if (!row.permissions) {
+          return <NTag type="info">ALL</NTag>;
+        }
+        return (
+          <div>
+            {
+              <n-h5 prefix="bar" type="warning">
+                <n-text type="warning">{$t('page.userManager.permissionList')}:</n-text>
+              </n-h5>
+            }
+            {row.permissions?.map(option => (
+              <span>
+                <NTag type="info">
+                  <span style="font-weight: bolder;">{option.groupName}</span>({option.namespaceName})
+                </NTag>
+                {<n-divider vertical />}
+              </span>
+            ))}
+          </div>
+        );
+      }
+    },
     {
       key: 'username',
       title: $t('page.userManager.username'),
@@ -45,21 +74,6 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
         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'),
@@ -76,7 +90,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
           <NButton type="primary" ghost size="small" onClick={() => edit(row.id!)}>
             {$t('common.edit')}
           </NButton>
-          <NPopconfirm onPositiveClick={() => handleDelete()}>
+          <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
             {{
               default: () => $t('common.confirmDelete'),
               trigger: () => (
@@ -92,26 +106,16 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
   ]
 });
 
-const {
-  drawerVisible,
-  operateType,
-  editingData,
-  handleAdd,
-  handleEdit,
-  checkedRowKeys,
-  onBatchDeleted,
-  onDeleted
-  // closeDrawer
-} = useTableOperate(data, getData);
+const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys } = useTableOperate(
+  data,
+  getData
+);
 
-async function handleBatchDelete() {
-  // request
-  onBatchDeleted();
-}
-
-function handleDelete() {
-  // request
-  onDeleted();
+async function handleDelete(id: string) {
+  const { error } = await fetchDelUser(id as any);
+  if (error) return;
+  getData();
+  window.$message?.success($t('common.deleteSuccess'));
 }
 
 function edit(id: string) {
@@ -121,7 +125,7 @@ function edit(id: string) {
 
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <UserCenterSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <UserManagerSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
     <NCard
       :title="$t('page.userManager.title')"
       :bordered="false"
@@ -134,8 +138,8 @@ function edit(id: string) {
           v-model:columns="columnChecks"
           :disabled-delete="checkedRowKeys.length === 0"
           :loading="loading"
+          :show-delete="false"
           @add="handleAdd"
-          @delete="handleBatchDelete"
           @refresh="getData"
         />
       </template>
@@ -151,7 +155,7 @@ function edit(id: string) {
         :pagination="mobilePagination"
         class="sm:h-full"
       />
-      <UserCenterOperateDrawer
+      <UserManagerOperateDrawer
         v-model:visible="drawerVisible"
         :operate-type="operateType"
         :row-data="editingData"

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

@@ -1,13 +1,14 @@
-<script setup lang="tsx">
-import { computed, reactive, ref, watch } from 'vue';
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import type { OptionValue } from 'naive-ui/es/transfer/src/interface';
 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';
+import { groupConfigYesOrNoOptions, roleRecordOptions } from '@/constants/business';
 
 defineOptions({
-  name: 'UserCenterOperateDrawer'
+  name: 'UserManagerOperateDrawer'
 });
 
 interface Props {
@@ -17,7 +18,9 @@ interface Props {
   rowData?: Api.UserManager.UserManager | null;
 }
 
+const valueRef = ref();
 const groupConfigs = ref();
+const updatePass = ref<number>(0);
 
 const props = defineProps<Props>();
 
@@ -55,27 +58,35 @@ function createDefaultModel(): Model {
     password: '',
     checkPassword: '',
     role: 1,
-    permissions: [{ groupName: '', namespaceName: '', namespaceId: '' }]
+    permissions: []
   };
 }
 
-type RuleKey = Extract<keyof Model, 'username' | 'password' | 'checkPassword' | 'role' | 'permissions'>;
+type RuleRecord = Partial<Record<keyof Model, App.Global.FormRule[]>>;
 
-const rules: Record<RuleKey, App.Global.FormRule> = {
-  username: defaultRequiredRule,
-  password: defaultRequiredRule,
-  checkPassword: defaultRequiredRule,
-  role: defaultRequiredRule,
-  permissions: defaultRequiredRule
-};
+const rules = computed<RuleRecord>(() => {
+  const { formRules, createConfirmPwdRule } = useFormRules();
+
+  return {
+    username: [defaultRequiredRule],
+    password: formRules.pwd,
+    checkPassword: createConfirmPwdRule(model.password),
+    role: [defaultRequiredRule],
+    permissions: [defaultRequiredRule]
+  };
+});
 
 function handleUpdateModelWhenEdit() {
   if (props.operateType === 'add') {
+    valueRef.value = [];
+    updatePass.value = 1;
     Object.assign(model, createDefaultModel());
     return;
   }
 
   if (props.operateType === 'edit' && props.rowData) {
+    updatePass.value = 0;
+    valueRef.value = props.rowData.permissions?.map(v => `${v.groupName}@${v.namespaceId}`);
     Object.assign(model, props.rowData);
   }
 }
@@ -91,33 +102,31 @@ async function handleSubmit() {
     const { username, password, checkPassword, role, permissions } = model;
     const { error } = await fetchAddUser({ username, password, checkPassword, role, permissions });
     if (error) return;
+    window.$message?.success($t('common.addSuccess'));
   }
 
   if (props.operateType === 'edit') {
     const { id, username, password, checkPassword, role, permissions } = model;
     const { error } = await fetchEditUser({ id, username, password, checkPassword, role, permissions });
     if (error) return;
+    window.$message?.success($t('common.updateSuccess'));
   }
-  window.$message?.success($t('common.updateSuccess'));
   closeDrawer();
   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.namespaceId
-    },
+    value: `${option.groupName}@${option.namespaceId}`,
     label: `${option.groupName}(${option.namespaceName})`
   }));
 };
 
-// 加载组列表数据
-getAllGroupConfigList();
+onMounted(() => {
+  // 加载组列表数据
+  getAllGroupConfigList();
+});
 
 watch(visible, () => {
   if (visible.value) {
@@ -126,13 +135,16 @@ watch(visible, () => {
   }
 });
 
-watch(
-  () => valueRef.value,
-  () => {
-    console.log('valueRef', valueRef.value);
-    model.permissions = valueRef.value as any;
-  }
-);
+function updatePermissions(p: OptionValue[]) {
+  // ['snail_job_demo_group@764d604ec6fc45f68cd92514c40e9e1a']
+  model.permissions = p?.map(value => {
+    const [groupName, namespaceId] = (value as string).split('@'); // 将字符串分割成数组
+    return {
+      groupName,
+      namespaceId
+    };
+  });
+}
 </script>
 
 <template>
@@ -141,11 +153,33 @@ watch(
       <NFormItem :label="$t('page.userManager.username')" path="username">
         <NInput v-model:value="model.username" :placeholder="$t('page.userManager.form.username')" />
       </NFormItem>
-      <NFormItem :label="$t('page.userManager.password')" path="password">
-        <NInput v-model:value="model.password" :placeholder="$t('page.userManager.form.password')" />
+      <NFormItem v-if="props.operateType === 'edit'" :label="$t('page.userManager.updatePassword')">
+        <NRadioGroup v-model:value="updatePass">
+          <NSpace>
+            <NRadio
+              v-for="item in groupConfigYesOrNoOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="$t(item.label)"
+            />
+          </NSpace>
+        </NRadioGroup>
       </NFormItem>
-      <NFormItem :label="$t('page.userManager.checkPassword')" path="checkPassword">
-        <NInput v-model:value="model.checkPassword" :placeholder="$t('page.userManager.form.checkPassword')" />
+      <NFormItem v-if="updatePass === 1" :label="$t('page.userManager.password')" path="password">
+        <NInput
+          v-model:value="model.password"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.userManager.form.password')"
+        />
+      </NFormItem>
+      <NFormItem v-if="updatePass === 1" :label="$t('page.userManager.checkPassword')" path="checkPassword">
+        <NInput
+          v-model:value="model.checkPassword"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.userManager.form.checkPassword')"
+        />
       </NFormItem>
       <NFormItem :label="$t('page.userManager.role')" path="role">
         <NRadioGroup v-model:value="model.role" name="role">
@@ -154,13 +188,15 @@ watch(
           </NSpace>
         </NRadioGroup>
       </NFormItem>
-      <NFormItem :label="$t('page.userManager.permissions')" path="permissions">
+      <NFormItem v-if="model.role === 1" :label="$t('page.userManager.permissions')" path="permissions">
         <NTransfer
+          ref="transfer"
           v-model:value="valueRef"
           virtual-scroll
           :options="groupConfigs"
           target-filterable
           source-filterable
+          @update-value="updatePermissions"
         />
       </NFormItem>
     </NForm>