perf: update draw create update

src/components/Table/TableFormatters/DetailFormatter.vue

@@ -124,20 +124,9 @@ export default {
       if (this.formatterArgs.openInNewPage) {
         const { href } = this.$router.resolve(detailRoute)
         this.linkClicked = this.formatterArgs.removeColorOnClick
-
         return window.open(href, '_blank')
       }
 
-      if (detailRoute.query.type === 'pam') {
-        this.showTableDetailDrawer = true
-
-        this.currentTemplate = detailRoute.name
-        this.drawerTitle = this.$t(detailRoute.name)
-        this.$route.params.id = detailRoute.params.id
-
-        return
-      }
-
       this.$router.push(detailRoute)
     }
   }

src/guards.js

@@ -13,8 +13,8 @@ import { toSentenceCase } from '@/utils/common'
 router.beforeEach(async(to, from, next) => {
   // start progress bar
   // NProgress.start()
-  await store.dispatch('common/setDrawerActionMeta', {})
   try {
+    await store.dispatch('common/cleanDrawerActionMeta')
     await startup({ to, from, next })
     next()
   } catch (e) {

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -209,7 +209,6 @@ export default {
       type: Function,
       default(res, method, vm, addContinue) {
         const route = this.getNextRoute(res, method)
-
         if (!(route.params && route.params.id)) {
           route['params'] = deepmerge(route['params'] || {}, { 'id': res.id })
         }
@@ -218,10 +217,18 @@ export default {
         this.$emit('submitSuccess', res)
 
         this.emitPerformSuccessMsg(method, res, addContinue)
-        if (!addContinue) {
+        if (addContinue) {
+          return
+        }
+
+        if (!vm.drawer) {
           if (this.$router.currentRoute.name !== route?.name) {
             setTimeout(() => this.$router.push(route), 100)
           }
+        } else {
+          console.log('Reload table clsonse dr')
+          this.$emit('close-drawer')
+          this.$emit('reload-table')
         }
       }
     },
@@ -390,7 +397,6 @@ export default {
         })
     },
     async getUpdateForm() {
-
     },
     async getCloneForm(cloneFrom) {
       const [curUrl, query] = this.url.split('?')
@@ -438,7 +444,7 @@ export default {
 </script>
 
 <style scoped>
-  .ibox ::v-deep .el-card__body {
-    padding-top: 30px;
-  }
+.ibox ::v-deep .el-card__body {
+  padding-top: 30px;
+}
 </style>

src/layout/components/GenericCreateUpdatePage/index.vue

@@ -22,7 +22,6 @@ export default {
   },
   mounted() {
     this.$store.dispatch('common/getDrawerActionMeta').then((res) => {
-      console.log('res: ', res)
       if (res.action) {
         this.drawer = true
       }

src/layout/components/GenericDetailPage/index.vue

@@ -35,7 +35,6 @@ export default {
   props: {
     url: {
       type: String,
-      required: false,
       default: ''
     },
     object: {
@@ -98,31 +97,34 @@ export default {
   },
   data() {
     const vm = this
-    const detailApiUrl = this.getDetailUrl()
     const defaultActions = {
       // Delete button
       canDelete: vm.$hasCurrentResAction('delete'),
+      hasDelete: true,
       deleteCallback: function(item) {
         vm.defaultDelete(item)
       },
-      deleteApiUrl: detailApiUrl,
       deleteSuccessRoute: this.$route.name.replace('Detail', 'List'),
       // Update button
       canUpdate: () => {
         return !vm.currentOrgIsRoot && vm.$hasCurrentResAction('change')
       },
+      hasUpdate: true,
       updateCallback: function(item) {
         this.defaultUpdate(item)
       },
       updateRoute: this.$route.name.replace('Detail', 'Update')
     }
     return {
-      detailApiUrl,
       defaultActions,
       loading: true,
+      drawer: '',
+      action: '',
+      actionId: '',
       validActions: Object.assign(defaultActions, this.actions)
     }
   },
+
   computed: {
     ...mapGetters(['currentOrgIsRoot']),
     pageActions() {
@@ -133,7 +135,7 @@ export default {
           icon: 'el-icon-edit-outline',
           size: 'small',
           can: this.validActions.canUpdate,
-          has: this.validActions.hasUpdate,
+          has: this.validActions.hasUpdate && !this.drawer,
           callback: this.validActions.updateCallback.bind(this)
         },
         {
@@ -172,28 +174,53 @@ export default {
       return [...this.submenu, activity]
     }
   },
-  async mounted() {
+  async created() {
     try {
       this.loading = true
+      await this.checkDrawer()
       await this.getObject()
     } finally {
       this.loading = false
     }
   },
   methods: {
+    async checkDrawer() {
+      const drawActionMeta = await this.$store.dispatch('common/getDrawerActionMeta')
+      if (drawActionMeta) {
+        this.drawer = true
+        this.row = drawActionMeta.row
+        this.actionId = this.row?.id
+      }
+    },
     getDetailUrl() {
       const vm = this
-      if (vm.url) {
-        return `${vm.url}/${vm.$route.params.id}/`
+      let objectId = ''
+      if (this.actionId) {
+        objectId = this.actionId
       } else {
-        return getApiPath(vm)
+        objectId = vm.$route.params.id
+      }
+      if (vm.url) {
+        return `${vm.url}/${objectId}/`
+      } else {
+        return getApiPath(vm, objectId)
+      }
+    },
+    afterDelete() {
+      if (this.drawer) {
+        this.$emit('close-drawer')
+        this.$emit('detail-delete-success')
+        this.$emit('reload-table')
+      } else {
+        this.$message.success(this.$tc('DeleteSuccessMsg'))
+        this.$router.push({ name: this.validActions.deleteSuccessRoute })
       }
     },
     defaultDelete() {
       const msg = this.$t('DeleteWarningMsg') + ' ' + this.iTitle + ' ?'
       const title = this.$t('Info')
       const performDelete = () => {
-        const url = this.validActions.deleteApiUrl
+        const url = this.getDetailUrl()
         this.$log.debug('Start perform delete: ', url)
         return this.$axios.delete(url)
       }
@@ -208,8 +235,7 @@ export default {
           try {
             await performDelete.bind(this)()
             done()
-            this.$message.success(this.$tc('DeleteSuccessMsg'))
-            this.$router.push({ name: this.validActions.deleteSuccessRoute })
+            this.afterDelete()
           } catch (error) {
             const errorDetail = error?.response?.data?.detail || ''
             if (errorDetail) {
@@ -240,13 +266,13 @@ export default {
     },
     getObject() {
       // 兼容之前的 detailApiUrl
-      const url = this.validActions.detailApiUrl || this.detailApiUrl
+      const url = this.getDetailUrl()
       return this.$axios.get(url, { disableFlashErrorMsg: true }).then(data => {
         this.$emit('update:object', data)
         this.$emit('getObjectDone', data)
       }).catch(error => {
         if (error.response && error.response.status === 404) {
-          const msg = this.$t('ObjectNotFoundOrDeletedMsg')
+          const msg = this.$tc('ObjectNotFoundOrDeletedMsg')
           this.$message.error(msg)
         } else {
           flashErrorMsg({ error, response: error.response })
@@ -263,7 +289,7 @@ export default {
 </script>
 
 <style scoped>
-  .header-buttons {
-    z-index: 999;
-  }
+.header-buttons {
+  z-index: 999;
+}
 </style>

src/layout/components/GenericListDrawerPage/Drawer.vue

@@ -1,11 +1,19 @@
 <template>
   <el-drawer
+    :size="drawerSize"
     :title="title"
     :visible.sync="iVisible"
+    append-to-body
     class="form-drawer"
-    size="800px"
+    destroy-on-close
   >
-    <component :is="component" v-bind="props" @close="closeDrawer" />
+    <component
+      :is="component"
+      v-bind="props"
+      @close="closeDrawer"
+      v-on="$listeners"
+      @close-drawer="iVisible=false"
+    />
   </el-drawer>
 </template>
 
@@ -27,6 +35,10 @@ export default {
     props: {
       type: Object,
       default: () => ({})
+    },
+    action: {
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -37,11 +49,13 @@ export default {
       set(val) {
         this.$emit('update:visible', val)
       }
+    },
+    drawerSize() {
+      const width = window.innerWidth
+      if (width >= 768) return '800px'
+      return '90%'
     }
   },
-  mounted() {
-    console.log('Mounted: ',)
-  },
   methods: {
     closeDrawer() {
       this.iVisible = false
@@ -55,7 +69,12 @@ export default {
   /* 可自定义样式 */
 
   ::v-deep {
+    .el-card.ibox {
+      //border: none;
+    }
+
     .el-drawer__header {
+      //border-bottom: 1px solid #EBEEF5;
       margin-bottom: 10px;
       padding-top: 10px;
       font-size: 16px;

src/layout/components/GenericListDrawerPage/index.vue

@@ -10,10 +10,12 @@
     </Page>
     <Drawer
       v-if="drawerVisible"
+      :action="action"
       :component="drawerComponent"
       :props="drawerProps"
       :title="drawerTitle"
       :visible.sync="drawerVisible"
+      @reload-table="reloadTable"
     />
   </div>
 </template>
@@ -78,7 +80,7 @@ export default {
     }
   },
   watch: {
-    visible(val) {
+    drawerVisible(val) {
       if (!val) {
         this.$store.dispatch('common/cleanDrawerActionMeta')
       }

src/layout/components/Page/PageHeading.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="globalNotification">
-      <SqlQueryTip v-if="debug" />
+      <SqlQueryTip v-if="debug && !inDrawer" />
       <LicenseRelatedTip v-else />
       <PasswordExpireTip />
     </slot>
@@ -22,6 +22,7 @@
 import LicenseRelatedTip from './LicenseRelatedTip'
 import PasswordExpireTip from './PasswordExpireTip'
 import SqlQueryTip from './SqlQueryTip'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'PageHeading',
@@ -40,6 +41,9 @@ export default {
     return {
       debug: process.env.NODE_ENV === 'development'
     }
+  },
+  computed: {
+    ...mapGetters(['inDrawer'])
   }
 }
 </script>

src/layout/components/Page/index.vue

@@ -3,6 +3,7 @@
     <TagsView />
     <PageHeading v-if="iTitle || helpMessage" :help-msg="helpMessage" class="disabled-when-print">
       <el-button
+        v-if="!inDrawer"
         :disabled="gobackDisabled"
         class="go-back"
         icon="el-icon-back"
@@ -46,6 +47,7 @@ import PageContent from './PageContent'
 import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
 import TagsView from '../TagsView/index.vue'
 import { toSentenceCase } from '@/utils/common'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'Page',
@@ -81,6 +83,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['inDrawer']),
     iTitle() {
       let title = this.title || this.$route.meta.title
       if (!title) {

src/store/getters.js

@@ -31,6 +31,7 @@ const getters = {
   hasValidLicense: state => state.settings.hasValidLicense,
   isSystemAdmin: state => state.users.profile.system_roles.some(i => (i?.id === '00000000-0000-0000-0000-000000000001')),
   sqlQueryCounter: state => state.common.sqlQueryCounter,
-  showSqlQueryCounter: state => state.common.showSqlQueryCounter
+  showSqlQueryCounter: state => state.common.showSqlQueryCounter,
+  inDrawer: state => state.common.inDrawer
 }
 export default getters

src/store/modules/common.js

@@ -8,7 +8,8 @@ const getDefaultState = () => {
     sqlQueryCounter: [],
     showSqlQueryCounter: true,
     confirmDialogVisible: false,
-    drawerActionMeta: {}
+    drawerActionMeta: {},
+    inDrawer: false
   }
 }
 
@@ -89,12 +90,14 @@ const actions = {
   },
   setDrawerActionMeta({ commit, state }, meta) {
     state.drawerActionMeta = meta
+    state.inDrawer = true
   },
   getDrawerActionMeta({ commit, state }) {
     return state.drawerActionMeta
   },
   cleanDrawerActionMeta({ commit, state }) {
     state.drawerActionMeta = {}
+    state.inDrawer = false
   }
 }
 

src/utils/common.js

@@ -3,7 +3,7 @@ import { message } from '@/utils/message'
 
 const _ = require('lodash')
 
-export function getApiPath(that) {
+export function getApiPath(that, objectId) {
   let pagePath = that.$route.path
   const pagePathArray = pagePath.split('/')
   if (pagePathArray.indexOf('orgs') !== -1) {
@@ -11,6 +11,9 @@ export function getApiPath(that) {
   } else if (pagePathArray.indexOf('gathered-user') !== -1 || pagePathArray.indexOf('change-auth-plan') !== -1) {
     pagePathArray[pagePathArray.indexOf('accounts')] = 'xpack'
   }
+  if (pagePathArray.indexOf(objectId) === -1) {
+    pagePathArray.push(objectId)
+  }
   if (pagePathArray.indexOf('tickets') !== -1) {
     // ticket ...
     pagePath = pagePathArray.slice(1, pagePathArray.length).join('/')
@@ -310,4 +313,5 @@ export function toSentenceCase(string) {
   }).join(' ')
   return s[0].toUpperCase() + s.slice(1)
 }
+
 export { BASE_URL }

src/views/users/Group/UserGroupDetail/index.vue

@@ -21,7 +21,6 @@ export default {
     return {
       group: { name: '', comment: '', users: [] },
       config: {
-        url: '/api/v1/users/groups',
         activeMenu: 'GroupInfo',
         submenu: [
           {

src/views/users/User/UserCreateUpdate.vue

@@ -1,5 +1,11 @@
 <template>
-  <GenericCreateUpdatePage v-if="!loading" class="user-create-update" v-bind="$data" @getObjectDone="afterGetUser" />
+  <GenericCreateUpdatePage
+    v-if="!loading"
+    class="user-create-update"
+    v-bind="$data"
+    @getObjectDone="afterGetUser"
+    v-on="$listeners"
+  />
 </template>
 
 <script>

src/views/users/User/UserDetail/UserInfo.vue

@@ -263,9 +263,9 @@ export default {
 </script>
 
 <style scoped>
-  .mfa-setting ::v-deep .el-slider__runway {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
+.mfa-setting ::v-deep .el-slider__runway {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 
 </style>