Merge pull request #8 from jumpserver/jym_dev

[Update] 更新一些列表组件

src/components/DataTable/compenents/el-data-table/el-data-table.vue

@@ -91,7 +91,7 @@
 
         <!--非树-->
         <template v-else>
-          <el-data-table-column v-if="hasSelection" type="selection" :align="columnsAlign"></el-data-table-column>
+          <el-data-table-column v-if="hasSelection" type="selection" :align="selectionAlign"></el-data-table-column>
           <el-data-table-column
             v-for="col in columns"
             :key="col.prop"
@@ -692,6 +692,10 @@ export default {
       type: String,
       default: 'center'
     },
+    selectionAlign: {
+      type: String,
+      default: 'center'
+    },
     paginationBackground: {
       type: Boolean,
       default: true

src/i18n/langs/cn.js

@@ -18,6 +18,7 @@ const cn = {
     'name': '名称',
     'Name': '名称',
     'action': '动作',
+    'Action': '动作',
     'role': '角色',
     'username': '用户名',
     'Language': '语言',
@@ -232,6 +233,8 @@ const cn = {
     'asset': '资产',
     'gateway': '网关',
     'date_created': '创建日期',
+    'port': '端口',
+    'TestConnection': '测试连接',
     // 管理用户
     'AdminUserList': '管理用户列表',
     'AdminUserDetail': '管理用户详情',
@@ -261,7 +264,7 @@ const cn = {
     'update_command_filter': '更新命令过滤器',
     'command_filter_detail': '命令过滤器详情',
     'rules': '规则',
-    'system_user': '系统用户',
+    'systemUser': '系统用户',
     'date_updated': '更新日期',
     'binding_to_system_user': '绑定到系统用户',
     // 系统平台
@@ -269,7 +272,7 @@ const cn = {
     'create_platform': '创建系统平台',
     'update_platform': '更新系统平台',
     'platform_detail': '平台详情',
-    'base_platform': '基础平台',
+    'BasePlatform': '基础平台',
     'charset': '编码',
     'meta': '元数据'
   },
@@ -280,7 +283,7 @@ const cn = {
     'remote_app_detail': '远程应用详情',
     'update_remote_app': '更新远程应用',
     'name': '名称',
-    'app_type': '应用类型',
+    'appType': '应用类型',
     'asset': '资产',
     'action': '操作',
     'update': '更新',
@@ -308,10 +311,10 @@ const cn = {
     'Asset permissions': '资产授权',
     'name': '名称',
     'user': '用户',
-    'user_group': '用户组',
+    'userGroup': '用户组',
     'asset': '资产',
     'node': '节点',
-    'system_user': '系统用户',
+    'systemUser': '系统用户',
     'validity': '有效',
     'action': '动作',
     'update': '更新',
@@ -332,14 +335,14 @@ const cn = {
     'users_and_user_groups': '用户或用户组',
     'assets_and_node': '资产或节点',
     //
-    'remote_app': '远程应用',
+    'RemoteApp': '远程应用',
     'remote_app_permission_list': '远程应用授权列表',
     'remote_app_permission_detail': '远程应用授权详情',
     'create_remote_app_permission': '创建远程应用授权规则',
     'update_remote_app_permission': '更新远程应用授权规则',
     'remote_app_count': '远程应用数量',
     //
-    'database_app': '数据库应用',
+    'DatabaseApp': '数据库应用',
     'database_app_permission_list': '数据库应用授权列表',
     'database_app_permission_detail': '数据库应用授权详情',
     'create_database_app_permission': '创建数据库应用授权规则',
@@ -347,31 +350,45 @@ const cn = {
     'database_app_count': '数据库应用数量'
   },
   sessions: {
-    'session_online': '在线会话',
-    'session_online_list': '在线会话',
-    'session_detail': '会话详情',
     'id': 'ID',
     'user': '用户',
     'asset': '资产',
-    'system_user': '系统用户',
-    'remote_addr': '远端地址',
+    'systemUser': '系统用户',
+    'remoteAddr': '远端地址',
     'protocol': '协议',
-    'login_form': '登录来源',
+    'loginForm': '登录来源',
     'command': '命令',
-    'date_start': '开始日期',
+    'dateStart': '开始日期',
     'duration': '时长',
-    'action': '动作',
-    'search': '搜索',
-    'terminate_selected': '终断所选',
-    'confirm_finished': '确认已完成',
-    'submit': '提交',
     'terminate': '终断',
-    'command_list': '命令记录列表',
     'date_end': '结束日期',
-    'quick_modify': '快速修改',
-    'terminate_session': '终止会话',
-    'confirm': '确认',
-    'commands': '命令记录'
+    'commands': '命令记录',
+    'replay': '回放',
+    'download': '下载',
+    'RiskLevel': '风险等级',
+    'session': '会话',
+    'date': '日期',
+    'addr': '地址',
+    'active': '激活中',
+    'alive': '在线',
+    'StorageConfiguration': '存储配置'
+  },
+  jobcenter: {
+    'RunTimes': '执行次数',
+    'hosts': '主机',
+    'success': '成功',
+    'date': '日期',
+    'time': '时间',
+    'run': '执行'
+  },
+  tickets: {
+    'title': '标题',
+    'user': '用户',
+    'type': '类型',
+    'status': '状态',
+    'date': '日期',
+    'MyTickets': '我的工单',
+    'AssignedMe': '待处理'
   },
   setting: {
     'setting': '系统设置',

src/router/index.js

@@ -134,6 +134,13 @@ export const constantRoutes = [
         component: () => import('@/views/assets/DomainList.vue'),
         meta: { title: 'DomainList' }
       },
+      {
+        path: 'domains/:id/gateway',
+        name: 'GatewayList',
+        hidden: true,
+        component: () => import('@/views/assets/GatewayList'),
+        meta: { title: 'GatewayList' }
+      },
       {
         path: 'admin-users',
         name: 'AdminUserList',
@@ -168,7 +175,7 @@ export const constantRoutes = [
       {
         path: 'platforms',
         name: 'PlatformList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/assets/PlatformList'),
         meta: { title: 'PlatformList' }
       }
     ]
@@ -182,14 +189,14 @@ export const constantRoutes = [
     children: [
       {
         path: 'remote-apps',
-        name: 'remoteAppList',
-        component: () => import('@/views/tree/index'),
+        name: 'RemoteAppList',
+        component: () => import('@/views/applications/RemoteAppList'),
         meta: { title: 'RemoteApp' }
       },
       {
         path: 'database-apps',
         name: 'DatabaseAppList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/applications/DatabaseAppList'),
         meta: { title: 'DatabaseApp' }
       }
     ]
@@ -197,26 +204,26 @@ export const constantRoutes = [
   {
     path: '/perms/',
     component: Layout,
-    redirect: '/perms/asset-permission/',
+    redirect: '/perms/asset-permissions/',
     name: 'Perms',
     meta: { title: 'Perms', icon: 'edit' },
     children: [
       {
         path: 'asset-permissions',
         name: 'AssetPermissionList',
-        component: import('@/views/tree/index'),
+        component: () => import('@/views/perms/AssetPermissionList'),
         meta: { title: 'AssetPermission' }
       },
       {
         path: 'remote-app-permissions',
         name: 'RemoteAppPermissionList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/perms/RemoteAppPermissionList'),
         meta: { title: 'RemoteAppPermission' }
       },
       {
         path: 'database-app-permissions',
         name: 'DatabaseAppPermissionList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/perms/DatabaseAppPermissionList'),
         meta: { title: 'DatabaseAppPermission' }
       }
     ]
@@ -231,19 +238,19 @@ export const constantRoutes = [
       {
         path: 'session-online',
         name: 'SessionOnlineList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/sessions/SessionOnlineList'),
         meta: { title: 'SessionOnline' }
       },
       {
         path: 'session-offline',
         name: 'SessionOfflineList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/sessions/SessionOfflineList'),
         meta: { title: 'SessionOffline' }
       },
       {
         path: 'command',
-        name: 'CommandsList',
-        component: () => import('@/views/tree/index'),
+        name: 'CommandList',
+        component: () => import('@/views/sessions/CommandList'),
         meta: { title: 'Commands' }
       },
       {
@@ -261,7 +268,7 @@ export const constantRoutes = [
       {
         path: 'terminal',
         name: 'TerminalList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/sessions/TerminalList'),
         meta: { title: 'Terminal' }
       }
     ]
@@ -276,7 +283,7 @@ export const constantRoutes = [
       {
         path: 'task',
         name: 'TaskList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/jobcenter/TaskList'),
         meta: { title: 'TaskList' }
       },
       {
@@ -299,8 +306,8 @@ export const constantRoutes = [
     redirect: '/tickets/tickets/',
     children: [{
       path: 'tickets',
-      name: 'Tickets',
-      component: () => import('@/views/tree/index'),
+      name: 'TicketsList',
+      component: () => import('@/views/tickets/TicketsList'),
       meta: { title: 'Tickets', icon: 'check-square-o' }
     }]
   },

src/views/applications/DatabaseAppList.vue

@@ -0,0 +1,81 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/applications/database-apps/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('applications.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'DatabaseAppDetail'
+          },
+          {
+            prop: 'get_type_display',
+            label: this.$t('applications.appType'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'host',
+            label: this.$t('applications.host'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'port',
+            label: this.$t('applications.port'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'database',
+            label: this.$t('applications.database'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('applications.comment'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/applications/database-apps/${id}/`
+                return this.$axios.delete(url)
+              }
+            }
+          }
+        ],
+        tableActions: {
+          hasEdit: true,
+          editRoute: '404'
+        }
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'DatabaseAppCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/applications/RemoteAppList.vue

@@ -0,0 +1,65 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/applications/remote-apps/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('applications.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'RemoteAppDetail'
+          },
+          {
+            prop: 'get_type_display',
+            label: this.$t('applications.appType')
+          },
+          {
+            prop: 'asset_info.hostname',
+            label: this.$t('applications.asset')
+          },
+          {
+            prop: 'comment',
+            label: this.$t('applications.comment'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/applications/remote-apps/${id}/`
+                return this.$axios.delete(url)
+              }
+            }
+          }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'RemoteAppCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/assets/AdminUserList.vue

@@ -1,58 +1,61 @@
 <template>
-  <Page>
-    <template slot="content">
-      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card>
-        <tables v-bind="tableConfig" />
-      </el-card>
-    </template>
-  </Page>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
-import { Page } from '@/layout/components'
-import Tables from '@/components/ListTable/index'
-import { getAdminUserList } from '@/api/asset'
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
-    Page,
-    Tables
+    GenericListPage
   },
   data() {
     return {
       tableConfig: {
-        getData: getAdminUserList,
-        hasSelect: true,
+        url: '/api/v1/assets/admin-users/',
         columns: [
           {
             prop: 'name',
             label: this.$t('common.name'),
-            key: 'name',
-            link: 'AdminUserDetail',
-            sortable: true
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'AdminUserDetail'
           },
           {
             prop: 'username',
             label: this.$t('common.username'),
-            key: 'username'
+            sortable: 'custom'
           },
           {
-            prop: 'assets',
-            label: this.$t('assets.asset'),
-            key: 'assets_amount'
+            prop: 'assets_amount',
+            label: this.$t('assets.asset')
           },
           {
             prop: 'comment',
             label: this.$t('assets.comment'),
-            key: 'comment'
+            sortable: 'custom'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/assets/admin-users/${id}/`
+                return this.$axios.delete(url)
               }
-        ],
-        action: {
-          hasEdit: 'AdminUserEdit',
-          newClick: 'AdminUserEdit'
             }
           }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'AdminUserCreate'
+      }
     }
   }
 }

src/views/assets/AssetList.vue

@@ -1,13 +1,65 @@
 <template>
-  <h1>这是组件AssetList</h1>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter, ChoicesFormatter } from '@/components/ListTable/formatters/index'
+
 export default {
-  name: 'AssetList'
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/assets/assets/',
+        columns: [
+          {
+            prop: 'hostname',
+            label: this.$t('assets.hostname'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'AssetDetail'
+          },
+          {
+            prop: 'ip',
+            label: this.$t('assets.ip'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'hardware_info',
+            label: this.$t('assets.hardware')
+          },
+          {
+            prop: 'reachable',
+            label: this.$t('assets.reachable'),
+            formatter: ChoicesFormatter
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/assets/assets/${id}/`
+                return this.$axios.delete(url)
+              }
+            }
+          }
+        ]
+      },
+      headerActions: {
+        createRoute: 'AssetCreate'
+      }
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style>
 
 </style>

src/views/assets/CommandFilterList.vue

@@ -1,63 +1,65 @@
 <template>
-  <Page>
-    <template slot="content">
-      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card>
-        <tables v-bind="tableConfig" />
-      </el-card>
-    </template>
-  </Page>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
-import { Page } from '@/layout/components'
-import Tables from '@/components/ListTable/index'
-import { getCommandFilterList } from '@/api/asset'
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
-    Page,
-    Tables
+    GenericListPage
   },
   data() {
     return {
       tableConfig: {
-        getData: getCommandFilterList,
-        hasSelect: true,
+        url: '/api/v1/assets/cmd-filters/',
         columns: [
           {
             prop: 'name',
-            label: this.$t('common.name'),
-            key: 'name',
-            link: 'CommandFilterDetail',
-            sortable: true
+            label: this.$t('assets.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'CommandFilterDetail'
           },
           {
-            prop: 'rules',
-            label: this.$t('assets.rules'),
-            key: 'rules'
+            prop: 'rules.length',
+            label: this.$t('assets.rules')
           },
           {
-            prop: 'system_users',
-            label: this.$t('assets.system_user'),
-            key: 'system_users'
+            prop: 'system_users.length',
+            label: this.$t('assets.systemUser')
           },
           {
             prop: 'comment',
             label: this.$t('assets.comment'),
-            key: 'comment'
+            sortable: 'custom'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/assets/cmd-filters/${id}/`
+                return this.$axios.delete(url)
               }
-        ],
-        action: {
-          hasEdit: 'CommandFilterEdit',
-          newClick: 'CommandFilterEdit'
             }
           }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'CommandFilterCreate'
+      }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style>
 
 </style>

src/views/assets/DomainList.vue

@@ -1,58 +1,62 @@
 <template>
-  <Page>
-    <template slot="content">
-      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card>
-        <tables v-bind="tableConfig" />
-      </el-card>
-    </template>
-  </Page>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
-import { Page } from '@/layout/components'
-import Tables from '@/components/ListTable/index'
-import { getDomainList } from '@/api/asset'
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
-    Page,
-    Tables
+    GenericListPage
   },
   data() {
     return {
       tableConfig: {
-        getData: getDomainList,
-        hasSelect: true,
+        url: '/api/v1/assets/domains/',
         columns: [
           {
             prop: 'name',
-            label: this.$t('common.name'),
-            key: 'name',
-            link: 'DomainDetail',
-            sortable: true
+            label: this.$t('assets.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'DomainDetail'
           },
           {
-            prop: 'asset',
-            label: this.$t('assets.asset'),
-            key: 'asset_count'
+            prop: 'asset_count',
+            label: this.$t('assets.asset')
           },
           {
-            prop: 'gateway',
+            prop: 'gateway_count',
             label: this.$t('assets.gateway'),
-            key: 'gateway_count'
+            formatter: DetailFormatter,
+            route: 'GatewayList'
           },
           {
             prop: 'comment',
             label: this.$t('assets.comment'),
-            key: 'comment'
+            sortable: 'custom'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/assets/domains/${id}/`
+                return this.$axios.delete(url)
               }
-        ],
-        action: {
-          hasEdit: 'DomainEdit',
-          newClick: 'DomainEdit'
             }
           }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'DomainCreate'
+      }
     }
   }
 }

src/views/assets/GatewayList.vue

@@ -0,0 +1,82 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { ActionsFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/assets/gateways/?domain=' + this.$route.params.id,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('assets.name'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'ip',
+            label: this.$t('assets.ip'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'port',
+            label: this.$t('assets.port'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'protocol',
+            label: this.$t('assets.protocol'),
+            sortable: true
+          },
+          {
+            prop: 'username',
+            label: this.$t('assets.username'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('assets.comment'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              updateRoute: 'UserUpdate',
+              extraActions: [
+                {
+                  performDelete: ({row, col})=> {
+                    const id = row.id
+                    const url = `/api/v1/assets/gateways/${id}/`
+                    return this.$axios.delete(url)
+                  },
+                  name: 'TestConnection',
+                  title: this.$t('assets.TestConnection')
+                }
+              ]
+            }
+          }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'GatewayCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/assets/LabelList.vue

@@ -1,62 +1,61 @@
 <template>
-  <Page>
-    <template slot="content">
-      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card>
-        <tables v-bind="tableConfig" />
-      </el-card>
-    </template>
-  </Page>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
-import { Page } from '@/layout/components'
-import Tables from '@/components/ListTable/index'
-import { getLabelList } from '@/api/asset'
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
+
 export default {
   components: {
-    Page,
-    Tables
+    GenericListPage
   },
   data() {
     return {
       tableConfig: {
-        getData: getLabelList,
-        hasSelect: true,
+        url: '/api/v1/assets/labels/',
         columns: [
           {
             prop: 'name',
-            label: this.$t('common.name'),
-            key: 'name',
-            link: 'LabelDetail',
-            sortable: true
+            label: this.$t('assets.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'LabelDetail'
           },
           {
             prop: 'value',
             label: this.$t('assets.value'),
-            key: 'value'
+            sortable: 'custom'
           },
           {
-            prop: 'asset',
-            label: this.$t('assets.asset'),
-            key: 'asset_count'
+            prop: 'asset_count',
+            label: this.$t('assets.asset')
           },
           {
-            prop: 'comment',
-            label: this.$t('assets.comment'),
-            key: 'comment'
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/assets/labels/${id}/`
+                return this.$axios.delete(url)
               }
-        ],
-        action: {
-          hasEdit: 'LabelEdit',
-          newClick: 'LabelEdit'
             }
           }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'LabelCreate'
+      }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style>
 
 </style>

src/views/assets/PlatformList.vue

@@ -0,0 +1,62 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/assets/platforms/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('assets.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'PlatformDetail'
+          },
+          {
+            prop: 'base',
+            label: this.$t('assets.BasePlatform'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('assets.comment'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/assets/platforms/${id}/`
+                return this.$axios.delete(url)
+              }
+            }
+          }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'PlatformCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/assets/SystemUserList.vue

@@ -1,72 +1,77 @@
 <template>
-  <Page>
-    <template slot="content">
-      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card>
-        <tables v-bind="tableConfig" />
-      </el-card>
-    </template>
-  </Page>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
 </template>
+
 <script>
-import { Page } from '@/layout/components'
-import Tables from '@/components/ListTable/index'
-import { getSystemUserList } from '@/api/asset'
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
-    Page,
-    Tables
+    GenericListPage
   },
   data() {
     return {
       tableConfig: {
-        getData: getSystemUserList,
-        hasSelect: true,
+        url: '/api/v1/assets/system-users/',
         columns: [
           {
             prop: 'name',
             label: this.$t('common.name'),
-            key: 'name',
-            link: 'DomainDetail',
-            sortable: true
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'SystemUserDetail'
           },
           {
             prop: 'username',
             label: this.$t('common.username'),
-            key: 'assets_amount'
+            sortable: 'custom'
           },
           {
             prop: 'protocol',
             label: this.$t('assets.protocol'),
-            key: 'protocol'
+            sortable: 'custom'
           },
           {
-            prop: 'loginMode',
+            prop: 'login_mode_display',
             label: this.$t('assets.loginMode'),
-            key: 'login_mode_display'
+            sortable: 'custom'
           },
           {
-            prop: 'asset',
+            prop: 'assets_amount',
             label: this.$t('assets.asset'),
-            key: 'assets_amount'
+            sortable: 'custom'
           },
           {
             prop: 'comment',
             label: this.$t('assets.comment'),
-            key: 'comment'
+            sortable: 'custom'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/assets/system-users/${id}/`
+                return this.$axios.delete(url)
               }
-        ],
-        action: {
-          hasEdit: 'SystemUserEdit',
-          newClick: 'SystemUserEdit'
             }
           }
+        ]
+      },
+      headerActions: {
+        // hasBulkDelete: false,
+        createRoute: 'SystemUserCreate'
+      }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style>
 
 </style>

src/views/jobcenter/TaskList.vue

@@ -0,0 +1,70 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage,
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/ops/tasks/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$tc('Name'),
+            formatter: DetailFormatter,
+            sortable: 'custom',
+            route: 'UserDetail'
+          },
+          {
+            prop: 'latest_execution',
+            label: this.$t('jobcenter.RunTimes')
+          },
+          {
+            prop: 'latest_execution.hosts_amount',
+            label: this.$t('jobcenter.hosts')
+          },
+          {
+            prop: 'latest_execution.is_success',
+            label: this.$t('jobcenter.success')
+          },
+          {
+            prop: 'latest_execution.date_start',
+            label: this.$t('jobcenter.date'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'latest_execution.timedelta',
+            label: this.$t('jobcenter.time')
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: [
+            ]
+          }
+        ],
+        hasEdit: false,
+        hasDelete: false
+      },
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false,
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/perms/AssetPermissionList.vue

@@ -0,0 +1,84 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter, ChoicesFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/perms/asset-permissions/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('common.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'AssetPermissionDetail'
+          },
+          {
+            prop: 'users.length',
+            label: this.$t('perms.user')
+          },
+          {
+            prop: 'user_groups.length',
+            label: this.$t('perms.userGroup')
+          },
+          {
+            prop: 'assets.length',
+            label: this.$t('perms.asset')
+          },
+          {
+            prop: 'nodes.length',
+            label: this.$t('perms.node')
+          },
+          {
+            prop: 'system_users.length',
+            label: this.$t('perms.systemUser')
+          },
+          {
+            prop: 'is_active',
+            label: this.$t('perms.validity'),
+            formatter: ChoicesFormatter,
+            align: 'center',
+            width: '80px'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/perms/asset-permissions/${id}/`
+                return this.$axios.delete(url)
+              }
+            }
+          }
+        ],
+        tableActions: {
+          hasEdit: true,
+          editRoute: '404'
+        }
+      },
+      headerActions: {
+        hasDelete: false,
+        hasUpdate: false,
+        createRoute: 'AssetPermissionCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/perms/DatabaseAppPermissionList.vue

@@ -0,0 +1,75 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter, ChoicesFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/perms/database-app-permissions/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('perms.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'DatabaseAppPermissionDetail'
+          },
+          {
+            prop: 'users.length',
+            label: this.$t('perms.user')
+          },
+          {
+            prop: 'user_groups.length',
+            label: this.$t('perms.userGroup')
+          },
+          {
+            prop: 'database_apps.length',
+            label: this.$t('perms.DatabaseApp')
+          },
+          {
+            prop: 'system_users.length',
+            label: this.$t('perms.systemUser')
+          },
+          {
+            prop: 'is_valid',
+            label: this.$t('perms.validity'),
+            formatter: ChoicesFormatter,
+            align: 'center',
+            width: '80px'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/perms/database-app-permissions/${id}/`
+                return this.$axios.delete(url)
+              }
+            }
+          }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'DatabaseAppPermissionCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/perms/RemoteAppPermissionList.vue

@@ -0,0 +1,75 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter, ActionsFormatter, ChoicesFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/perms/remote-app-permissions/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('perms.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'RemoteAppPermissionDetail'
+          },
+          {
+            prop: 'users.length',
+            label: this.$t('perms.user')
+          },
+          {
+            prop: 'user_groups.length',
+            label: this.$t('perms.userGroup')
+          },
+          {
+            prop: 'remote_apps.length',
+            label: this.$t('perms.RemoteApp')
+          },
+          {
+            prop: 'system_users.length',
+            label: this.$t('perms.systemUser')
+          },
+          {
+            prop: 'is_valid',
+            label: this.$t('perms.validity'),
+            formatter: ChoicesFormatter,
+            align: 'center',
+            width: '80px'
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              performDelete: ({row, col})=> {
+                const id = row.id
+                const url = `/api/v1/perms/database-app-permissions/${id}/`
+                return this.$axios.delete(url)
+              }
+            }
+          }
+        ]
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        createRoute: 'RemoteAppPermissionCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/sessions/CommandList.vue

@@ -0,0 +1,80 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        axiosConfig: {
+          raw: 1,
+          params: {
+            display: 1,
+            is_finished: 0
+          }
+        },
+        hasSelection: false,
+        hasOperation: false,
+        url: '/api/v1/terminal/commands/',
+        columns: [
+          {
+            type: 'expand'
+          },
+          {
+            prop: 'input',
+            label: this.$t('sessions.command')
+          },
+          {
+            prop: 'output',
+            label: '命令输出结果 (怎么放到隐藏内容 ？？)',
+            expand: true
+          },
+          {
+            prop: 'risk_level',
+            label: this.$t('sessions.RiskLevel')
+          },
+          {
+            prop: 'user',
+            label: this.$t('sessions.user'),
+            sortable: true
+          },
+          {
+            prop: 'asset',
+            label: this.$t('sessions.asset')
+          },
+          {
+            prop: 'system_user',
+            label: this.$t('sessions.systemUser')
+          },
+          {
+            prop: 'session',
+            label: this.$t('sessions.session')
+          },
+          {
+            prop: 'timestamp',
+            label: this.$t('sessions.date')
+          }
+        ],
+        tableActions: {
+          hasEdit: false,
+          hasDelete: false
+        }
+      },
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/sessions/SessionOfflineList.vue

@@ -0,0 +1,102 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { ActionsFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        axiosConfig: {
+          raw: 1,
+          params: {
+            display: 1,
+            is_finished: 1
+          }
+        },
+        url: '/api/v1/terminal/sessions/',
+        columns: [
+          {
+            label: this.$t('sessions.id'),
+            type: 'index'
+          },
+          {
+            prop: 'user',
+            label: this.$t('sessions.user'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'asset',
+            label: this.$t('sessions.asset'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'system_user',
+            label: this.$t('sessions.systemUser'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'remote_addr',
+            label: this.$t('sessions.remoteAddr'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'protocol',
+            label: this.$t('sessions.protocol'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'login_from_display',
+            label: this.$t('sessions.loginForm')
+          },
+          {
+            prop: 'command',
+            label: this.$t('sessions.command')
+          },
+          {
+            prop: 'date_start',
+            label: this.$t('sessions.dateStart'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'duration',
+            label: this.$t('sessions.duration')
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              hasEdit: false,
+              hasDelete: false,
+              extraActions: [
+                {
+                  name: 'terminate',
+                  title: this.$t('sessions.terminate'),
+                  type: 'primary'
+                }
+              ]
+            }
+          }
+        ]
+      },
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/sessions/SessionOnlineList.vue

@@ -0,0 +1,107 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { ActionsFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        axiosConfig: {
+          raw: 1,
+          params: {
+            display: 1,
+            is_finished: 0
+          }
+        },
+        url: '/api/v1/terminal/sessions/',
+        columns: [
+          {
+            label: this.$t('sessions.id'),
+            type: 'index'
+          },
+          {
+            prop: 'user',
+            label: this.$t('sessions.user'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'asset',
+            label: this.$t('sessions.asset'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'system_user',
+            label: this.$t('sessions.systemUser'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'remote_addr',
+            label: this.$t('sessions.remoteAddr'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'protocol',
+            label: this.$t('sessions.protocol'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'login_from_display',
+            label: this.$t('sessions.loginForm')
+          },
+          {
+            prop: 'command',
+            label: this.$t('sessions.command')
+          },
+          {
+            prop: 'date_start',
+            label: this.$t('sessions.dateStart'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'duration',
+            label: this.$t('sessions.duration')
+          },
+          {
+            prop: 'id',
+            label: this.$tc('Action'),
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            actions: {
+              hasEdit: false,
+              hasDelete: false,
+              extraActions: [
+                {
+                  name: 'replay',
+                  title: this.$t('sessions.replay'),
+                  type: 'primary'
+                },
+                {
+                  name: 'replay',
+                  title: this.$t('sessions.download'),
+                  type: 'warning'
+                }
+              ]
+            }
+          }
+        ]
+      },
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/sessions/TerminalList.vue

@@ -0,0 +1,80 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        axiosConfig: {
+          raw: 1,
+          params: {
+            display: 1,
+            is_finished: 0
+          }
+        },
+        url: '/api/v1/terminal/terminals/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$tc('Name'),
+            key: 'name',
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'TerminalDetail'
+          },
+          {
+            prop: 'remote_addr',
+            label: this.$t('sessions.addr'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'session_online',
+            label: this.$t('sessions.session'),
+            sortable: true
+          },
+          {
+            prop: 'is_active',
+            label: this.$t('sessions.active')
+          },
+          {
+            prop: 'is_alive',
+            label: this.$t('sessions.alive'),
+            sortable: 'custom'
+          }
+        ]
+      },
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false,
+        extraActions: [
+          {
+            name: 'StorageConfiguration',
+            title: this.$t('sessions.StorageConfiguration'),
+            type: 'primary',
+            has: true,
+            can: true,
+            callback: this.handleStorageConfiguration
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleStorageConfiguration() {
+      console.log('handleStorageConfiguration')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/tickets/TicketsList.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-tabs>
+    <el-tab-pane :label="this.$t('tickets.MyTickets')">
+      <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+    </el-tab-pane>
+    <el-tab-pane :label="this.$t('tickets.AssignedMe')">
+    </el-tab-pane>
+
+  </el-tabs>
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import { DetailFormatter } from '@/components/ListTable/formatters/index'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/tickets/tickets/',
+        axiosConfig: {
+          raw: 1,
+          params: {
+            assign: 0,
+            display: 1,
+            draw: 1,
+          }
+        },
+        columns: [
+          {
+            prop: 'title',
+            label: this.$t('tickets.title'),
+            formatter: DetailFormatter,
+            sortable: 'custom',
+            route: 'UserDetail'
+          },
+          {
+            prop: 'user_display',
+            label: this.$t('tickets.user'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'type_display',
+            label: this.$t('tickets.type'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'status',
+            label: this.$t('tickets.status'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'date_created',
+            label: this.$t('tickets.date'),
+            sortable: 'custom'
+          }
+        ]
+      },
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>