perf: usign draw to create

src/components/Drawers/DrawerComponent.vue

@@ -0,0 +1,31 @@
+<!-- DrawerComponent.vue -->
+<template>
+  <el-drawer
+    :modal="false"
+    :visible.sync="drawerVisible"
+    append-to-body
+    size="600px"
+    title="Create Resource"
+    @close="closeDrawer"
+  >
+    <router-view /> <!-- 这里展示创建页面的路由组件 -->
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      drawerVisible: true
+    }
+  },
+  methods: {
+    openDrawer() {
+      this.drawerVisible = true
+    },
+    closeDrawer() {
+      this.drawerVisible = false
+    }
+  }
+}
+</script>

src/components/Table/ListTable/TableAction/LeftSide.vue

@@ -27,6 +27,7 @@ export default {
     createRoute: {
       type: [String, Object, Function],
       default() {
+        console.log('This: ', this.$route)
         return this.$route.name?.replace('List', 'Create')
       }
     },
@@ -114,12 +115,8 @@ export default {
           },
           callback: this.handleBulkUpdate
         }
-      ]
+      ],
-    }
+      defaultActions: [
-  },
-  computed: {
-    defaultActions() {
-      const defaultActions = [
         {
           name: 'actionCreate',
           title: this.createTitle,
@@ -130,22 +127,10 @@ export default {
           callback: this.onCreate || this.handleCreate
         }
       ]
-      if (this.moreCreates) {
+    }
-        const defaultMoreCreate = {
+  },
-          name: 'actionMoreCreate',
+  computed: {
-          title: this.createTitle,
+
-          type: 'primary',
-          has: true,
-          icon: 'plus',
-          can: this.canCreate,
-          dropdown: [],
-          callback: this.onCreate || this.handleCreate
-        }
-        const createCreateAction = Object.assign(defaultMoreCreate, this.moreCreates)
-        defaultActions.push(createCreateAction)
-      }
-      return defaultActions
-    },
     iActions() {
       return [...this.actions, this.moreAction]
     },
@@ -189,6 +174,11 @@ export default {
   },
   methods: {
     handleCreate() {
+      // this.$router.push({
+      //   name: 'UserCreate'
+      // })
+      // return
+      console.log('This: ', this.$router)
       let route
       if (typeof this.createRoute === 'string') {
         route = { name: this.createRoute }
@@ -198,7 +188,7 @@ export default {
       } else if (typeof this.createRoute === 'object') {
         route = this.createRoute
       }
-      this.$log.debug('handle create')
+      this.$log.debug('handle create: ', route, this.createRoute)
       if (this.createInNewPage) {
         const { href } = this.$router.resolve(route)
         window.open(href, '_blank')

src/components/Table/TableFormatters/ActionsFormatter.vue

@@ -96,8 +96,8 @@ export default {
           canDelete: true,
           hasClone: true,
           canClone: true,
-          updateRoute: this.$route.name.replace('List', 'Update'),
+          updateRoute: 'UserUpdate',
-          cloneRoute: this.$route.name.replace('List', 'Create'),
+          cloneRoute: 'UserCreate',
           performDelete: defaultPerformDelete,
           onUpdate: defaultUpdateCallback,
           onDelete: defaultDeleteCallback,

src/components/Table/TableFormatters/DetailFormatter.vue

@@ -25,7 +25,7 @@ export default {
       type: Object,
       default() {
         return {
-          route: this.$route.name.replace('List', 'Detail'),
+          route: 'abc',
           getRoute: null,
           routeQuery: null,
           can: true,

src/layout/components/GenericDetailPage/index.vue

@@ -120,7 +120,7 @@ export default {
       updateCallback: function(item) {
         this.defaultUpdate(item)
       },
-      updateRoute: this.$route.name.replace('Detail', 'Update')
+      updateRoute: 'abc'
     }
     return {
       detailApiUrl,

src/router/console/users.js

@@ -6,21 +6,21 @@ const globalSubmenu = () => import('@/layout/globalOrg.vue')
 export default [
   {
     path: 'users',
-    component: empty, // Parent router-view
+    component: () => import('@/views/users/User/UserList.vue'), // Parent router-view
-    redirect: '',
+    name: 'UserList',
     meta: {
       permissions: ['users.view_user'],
-      expanded: true
+      title: i18n.t('UserList')
     },
     children: [
-      {
+      // {
-        path: '',
+      //   path: 'users',
-        component: () => import('@/views/users/User/UserList.vue'), // Parent router-view
+      //   component: () => import('@/views/users/User/UserList.vue'), // Parent router-view
-        name: 'UserList',
+      //   name: 'UserList',
-        meta: {
+      //   meta: {
-          title: i18n.t('UserList')
+      //     title: i18n.t('UserList')
-        }
+      //   }
-      },
+      // },
       {
         path: 'create',
         component: () => import('@/views/users/User/UserCreateUpdate.vue'), // Parent router-view

src/views/users/User/UserCreateUpdate.vue

@@ -1,9 +1,17 @@
 <template>
-  <GenericCreateUpdatePage v-if="!loading" class="user-create-update" v-bind="$data" @getObjectDone="afterGetUser" />
+  <el-drawer
+    :modal="false"
+    :visible="drawerVisible"
+    size="600px"
+    title="Create User"
+    @close="closeDrawer"
+  >
+    <GenericCreateUpdateForm v-if="!loading" class="user-create-update" v-bind="$data" @getObjectDone="afterGetUser" />
+  </el-drawer>
 </template>
 
 <script>
-import { GenericCreateUpdatePage } from '@/layout/components'
+import { GenericCreateUpdateForm } from '@/layout/components'
 import { PhoneInput, UserPassword } from '@/components/Form/FormFields'
 import rules from '@/components/Form/DataForm/rules'
 import { mapGetters } from 'vuex'
@@ -11,11 +19,12 @@ import { Select2 } from '@/components'
 
 export default {
   components: {
-    GenericCreateUpdatePage
+    GenericCreateUpdateForm
   },
   data() {
     return {
       loading: true,
+      drawerVisible: true, // 默认抽屉可见
       initial: {
         need_update_password: true,
         system_roles: [],
@@ -195,6 +204,15 @@ export default {
     this.loading = false
   },
   methods: {
+    closeDrawer() {
+      this.drawerVisible = false
+      // 可选：在抽屉关闭时重置路由到用户列表页
+      this.$router.back()
+    },
+    handleUserCreated() {
+      // 可选：在用户创建成功后执行的操作
+      this.closeDrawer() // 创建成功后关闭抽屉
+    },
     afterGetUser(user) {
       this.user = user
       if (this.user.id === this.currentUser.id) {

src/views/users/User/UserList.vue

@@ -1,18 +1,23 @@
 <template>
   <div>
-    <GenericListPage
+    <keep-alive include="UserList">
-      ref="GenericListPage"
+      <div>
-      :header-actions="headerActions"
+        <GenericListPage
-      :table-config="tableConfig"
+          ref="GenericListPage"
-    />
+          :header-actions="headerActions"
-    <GenericUpdateFormDialog
+          :table-config="tableConfig"
-      v-if="updateSelectedDialogSetting.visible"
+        />
-      :form-setting="updateSelectedDialogSetting.formSetting"
+        <GenericUpdateFormDialog
-      :selected-rows="updateSelectedDialogSetting.selectedRows"
+          v-if="updateSelectedDialogSetting.visible"
-      :visible.sync="updateSelectedDialogSetting.visible"
+          :form-setting="updateSelectedDialogSetting.formSetting"
-      @update="handleDialogUpdate"
+          :selected-rows="updateSelectedDialogSetting.selectedRows"
-    />
+          :visible.sync="updateSelectedDialogSetting.visible"
-    <InviteUsersDialog :setting="InviteDialogSetting" @close="handleInviteDialogClose" />
+          @update="handleDialogUpdate"
+        />
+        <InviteUsersDialog :setting="InviteDialogSetting" @close="handleInviteDialogClose" />
+      </div>
+    </keep-alive>
+    <router-view /> <!-- 这里展示创建页面的路由组件 -->
   </div>
 </template>
 
@@ -42,6 +47,7 @@ export default {
       return !vm.currentOrgIsRoot
     }
     return {
+      drawerVisible: false,
       tableConfig: {
         url: '/api/v1/users/users/',
         permissions: {
@@ -253,10 +259,19 @@ export default {
       'device', 'currentOrgIsDefault', 'currentUserIsSuperAdmin'
     ])
   },
+  watch: {
+    '$route'(route) {
+      this.drawerVisible = !this.drawerVisible
+      console.log('Route changed: ', route)
+    }
+  },
   mounted() {
     this.setRolesFilter()
   },
   methods: {
+    closeDrawer() {
+      this.drawerVisible = false
+    },
     setRolesFilter() {
       const roleTypes = [{ name: 'system-roles', perm: 'systemrole' }, { name: 'org-roles', perm: 'orgrole' }]
       for (const roleType of roleTypes) {