feat: 修改网关创建和列表

src/components/ListTable/formatters/ActionsFormatter.vue

@@ -92,7 +92,7 @@ export default {
       colActions: colActions,
       defaultActions: defaultActions,
       extraActions: colActions.extraActions,
-      moreActionsTitle: colActions.moreActionsTitle
+      moreActionsTitle: colActions.moreActionsTitle || this.$t('common.More')
     }
   },
   computed: {

src/i18n/langs/cn.json

@@ -29,6 +29,8 @@
     "": ""
   },
   "assets": {
+    "PasswordWithoutSpecialCharHelpText": "不能包含特殊字符",
+    "GatewayProtocolHelpText": "SSH网关，支持代理SSH,RDP和VNC",
     "FullName": "全称",
     "Key": "键",
     "NodeInformation": "节点信息",
@@ -416,10 +418,10 @@
     "DatabaseAppPermissionDetail": "数据库授权详情",
     "DatabaseAppPermissionUpdate": "更新数据库授权规则",
     "DatabaseAppUpdate": "",
-    "DomainCreate": "创建网关",
-    "DomainDetail": "域名详情",
-    "DomainList": "网关列表",
-    "DomainUpdate": "更新网关",
+    "DomainCreate": "创建网域",
+    "DomainDetail": "网域详情",
+    "DomainList": "网域列表",
+    "DomainUpdate": "更新网域",
     "FileManager": "文件管理",
     "FtpLog": "FTP日志",
     "GatewayCreate": "创建网关",

src/i18n/langs/en.json

@@ -29,6 +29,8 @@
     "": ""
   },
   "assets": {
+    "PasswordWithoutSpecialCharHelpText": "Password can't has special chars ",
+    "GatewayProtocolHelpText": "SSH protocol gateway, support proxy SSH, RDP, VNC",
     "FullName": "Full name",
     "Key": "Key",
     "NodeInformation": "Node information",

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -87,6 +87,12 @@ export default {
         }
       }
     },
+    getNextRoute: {
+      type: Function,
+      default(res, method) {
+        return method === 'post' ? this.createSuccessNextRoute : this.updateSuccessNextRoute
+      }
+    },
     getUrl: {
       type: Function,
       default: function() {
@@ -136,12 +142,16 @@ export default {
     defaultOnSubmit(validValues) {
       const performSubmit = this.performSubmit || this.defaultPerformSubmit
       const msg = this.method === 'post' ? this.createSuccessMsg : this.updateSuccessMsg
-      const route = this.method === 'post' ? this.createSuccessNextRoute : this.updateSuccessNextRoute
+      const event = this.method === 'post' ? 'createSuccess' : 'updateSuccess'
       this.isSubmitting = true
-      performSubmit(validValues).then(() => {
+      performSubmit(validValues).then((res) => {
+        const route = this.getNextRoute(res, this.method)
+        this.$emit(event, res)
+        this.$emit('submitSuccess', res)
         this.$message.success(msg)
-        this.$router.push(route)
+        setTimeout(() => this.$router.push(route), 100)
       }).catch(error => {
+        this.$emit('submitError', error)
         const response = error.response
         const data = response.data
         if (response.status === 400) {

src/router/assets.js

@@ -55,14 +55,14 @@ export default [
     hidden: true
   },
   {
-    path: 'domains/:domainid/gateway/create',
+    path: 'gateways/create',
     name: 'GatewayCreate',
     component: () => import('@/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue'),
     meta: { title: i18n.t('route.GatewayCreate'), activeMenu: '/assets/domains' },
     hidden: true
   },
   {
-    path: 'domains/gateway/:id/create',
+    path: 'gateways/:id/update',
     name: 'GatewayUpdate',
     component: () => import('@/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue'),
     meta: { title: i18n.t('route.GatewayUpdate'), activeMenu: '/assets/domains' },

src/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue

@@ -4,14 +4,14 @@
     :initial="initial"
     :fields-meta="fieldsMeta"
     :url="url"
-    :create-success-next-route="createSuccessNextRoute"
-    :update-success-next-route="updateSuccessNextRoute"
+    :get-next-route="getNextRoute"
   />
 </template>
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
 import Uploadkey from '@/components/UploadKey/'
+import { Select2 } from '@/components'
 export default {
   name: 'GatewayCreateUpdate',
   components: { GenericCreateUpdatePage },
@@ -19,7 +19,8 @@ export default {
     return {
       initial: {
         protocol: 'ssh',
-        domain: this.$route.params.domainid,
+        port: 22,
+        domain: this.$route.query.domain,
         is_active: true
       },
       fields: [
@@ -35,20 +36,20 @@ export default {
           }
         },
         domain: {
-          type: 'input',
+          component: Select2,
           el: {
+            ajax: {
+              url: '/api/v1/assets/domains/'
+            },
             disabled: true,
-            multiple: false,
-            value: this.$route.params.ruleid
+            multiple: false
           }
         },
-        username: {
-          el: {
-            placeholder: '用户名'
-          }
+        protocol: {
+          helpText: this.$t('assets.GatewayProtocolHelpText')
         },
         password: {
-          helpText: '不能包含特殊字符'
+          helpText: this.$t('assets.PasswordWithoutSpecialCharHelpText')
         },
         is_active: {
           type: 'switch'
@@ -58,16 +59,33 @@ export default {
         }
       },
       updateSuccessNextRoute: {
-        name: 'DomainList'
+        name: 'DomainDetail',
+        params: {
+          id: ''
+        }
       },
       createSuccessNextRoute: {
-        name: 'DomainList'
+        name: 'DomainDetail',
+        params: {
+        }
       },
       url: `/api/v1/assets/gateways/`
     }
   },
-  computed: {
-
+  methods: {
+    getNextRoute(res, method) {
+      const domain = res.domain
+      const route = {
+        name: 'DomainDetail',
+        params: {
+          id: domain
+        },
+        query: {
+          activeTab: 'GatewayList'
+        }
+      }
+      return route
+    }
   }
 }
 </script>

src/views/assets/Domain/DomainDetail/GatewayList.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import { ActionsFormatter } from '@/components/ListTable/formatters/index'
 import ListTable from '@/components/ListTable/index'
 
 export default {
@@ -20,40 +19,15 @@ export default {
     return {
       tableConfig: {
         url: `/api/v1/assets/gateways/?domain=${this.$route.params.id}`,
-        columns: [
-          {
-            prop: 'name',
-            label: this.$t('assets.Name'),
+        columns: ['name', 'ip', 'port', 'protocol', 'username', 'comment', 'actions'],
+        columnsMeta: {
+          name: {
             sortable: 'custom'
           },
-          {
-
-            prop: 'ip',
-            label: this.$t('assets.ip')
+          protocol: {
+            sortable: 'custom'
           },
-          {
-            prop: 'port',
-            label: this.$t('assets.Port')
-          },
-          {
-            prop: 'protocol',
-            label: this.$t('assets.Protocol'),
-            sortable: true
-          },
-          {
-            prop: 'username',
-            label: this.$t('assets.Username')
-          },
-          {
-            prop: 'comment',
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            width: '200px',
+          actions: {
             formatterArgs: {
               updateRoute: 'GatewayUpdate',
               performDelete: ({ row, col }) => {
@@ -79,37 +53,19 @@ export default {
               ]
             }
           }
-        ]
+
+        }
       },
       headerActions: {
-        hasRightActions: false,
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: false,
         hasBulkDelete: false,
         hasSearch: true,
-        extraActions: [
-          {
-            name: 'actionCreate',
-            title: this.$t('common.Create'),
-            type: 'primary',
-            has: true,
-            can: true,
-            callback: this.createRoute.bind(this)
+        createRoute: {
+          name: 'GatewayCreate',
+          query: {
+            domain: this.object.id
           }
-        ],
-        hasCreate: false
-      }
-    }
-  },
-  methods: {
-    createRoute(val) {
-      this.$router.push({
-        name: 'GatewayCreate',
-        params: {
-          domainid: this.object.id
         }
-      })
+      }
     }
   }
 }

src/views/assets/Domain/DomainList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
+import { DetailFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
@@ -15,51 +15,25 @@ export default {
       tableConfig: {
         url: '/api/v1/assets/domains/',
         columns: [
-          {
-            prop: 'name',
-            label: this.$t('assets.Name'),
-            formatter: DetailFormatter,
-            sortable: true,
-            formatterArgs: {
-              route: 'DomainDetail'
-            }
-          },
-          {
-            prop: 'asset_count',
+          'name', 'asset_count', 'gateway_count', 'comment', 'actions'
+        ],
+        columnsMeta: {
+          asset_count: {
             label: this.$t('assets.Assets')
           },
-          {
-            prop: 'gateway_count',
-            label: this.$t('assets.Gateway')
-          },
-          {
-            prop: 'comment',
-            label: this.$t('assets.Comment'),
-            sortable: 'custom'
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            width: '200px',
+          gateway_count: {
+            label: this.$t('assets.Gateway'),
+            formatter: DetailFormatter,
             formatterArgs: {
-              performDelete: ({ row, col }) => {
-                const id = row.id
-                const url = `/api/v1/assets/domains/${id}/`
-                return this.$axios.delete(url)
+              routeQuery: {
+                activeTab: 'GatewayList'
               }
             }
           }
-        ]
+        }
       },
       headerActions: {
-        hasRightActions: false,
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: false,
         hasBulkDelete: false,
-        hasSearch: false,
         hasMoreActions: false,
         createRoute: 'DomainCreate'
       },