diff --git a/src/components/ListTables/headeraction.vue b/src/components/ListTables/headeraction.vue
index d01725773..9a74c45c0 100644
--- a/src/components/ListTables/headeraction.vue
+++ b/src/components/ListTables/headeraction.vue
@@ -1,10 +1,12 @@
 <template>
   <div>
     <el-button type="primary" size="small" @click="handleClick">{{ this.$t('users.createUser') }}</el-button>
-    <el-select v-model="value" size="small" placeholder="请选择" style="width:150px; margin-left:10px;">
+    <el-select v-if="hasSelection" v-model="value" :disabled="selectDisable" size="small" placeholder="更多操作" style="width:150px; margin-left:10px;">
       <el-option label="批量删除" value="delete" />
+      <el-option label="批量更新" value="delete" />
+      <el-option label="禁用所选" value="delete" />
+      <el-option label="激活所选" value="delete" />
     </el-select>
-    <el-button style="margin-left:10px;" type="primary" size="small" @click="handleAction">执行</el-button>
   </div>
 </template>
 
@@ -12,6 +14,16 @@
 export default {
   prop: {
 
+  },
+  props: {
+    hasSelection: {
+      type: Boolean,
+      default: () => true
+    },
+    selectDisable: {
+      type: Boolean,
+      default: () => true
+    }
   },
   data() {
     return {
diff --git a/src/components/ListTables/table.vue b/src/components/ListTables/table.vue
index bacb15657..99fb5bcf0 100644
--- a/src/components/ListTables/table.vue
+++ b/src/components/ListTables/table.vue
@@ -2,7 +2,7 @@
   <div>
     <div style="display:flex;flex-direction:row;justify-content:space-between;">
       <!--TODO: 事件交互 -->
-      <headeraction v-if="hasHeader" class="actionHeader" style="display:flex;flex-direction:row;" @newClick="handleNewClick" @actionClick="handleActionClick" />
+      <headeraction v-if="hasHeader" class="actionHeader" :has-selection="hasSelect" :select-disable="selectDisable" style="display:flex;flex-direction:row;" @newClick="handleNewClick" @actionClick="handleActionClick" />
       <!-- TODO: 事件交互 -->
       <search v-if="hasSearch" class="search" @serachAction="handleSearch" />
       <slot name="header" />
@@ -12,6 +12,7 @@
         v-loading="loading"
         :data="tabledata"
         stripe
+        @selection-change="handleSelectionChange"
       >
         <el-table-column
           v-if="hasSelect"
@@ -19,7 +20,7 @@
           :align="align"
           width="42px"
           :header-align="align"
-        />
+        ></el-table-column>
         <el-table-column
           v-for="col of columns"
           :key="col.props"
@@ -37,36 +38,37 @@
         <el-table-column
           v-if="action !== []"
           :label="this.$t('usergroup.action')"
-          :align="align"
-          width="140px"
-          :header-align="align"
+          align="center"
+          width="240px"
+          header-align="center"
         >
           <template slot-scope="scope">
             <el-button
               size="mini"
-              type="text"
+              type="primary"
               @click="handleEdit(scope.$index, scope.row)"
-            >{{ $t('usergroup.update') }}</el-button>
+            >{{ $tc('update') }}</el-button>
             <el-button
               size="mini"
-              type="text"
+              type="danger"
               @click="handleDelete(scope.$index, scope.row)"
-            >{{ $t('usergroup.delete') }}</el-button>
+            >{{ $tc('delete') }}</el-button>
           </template>
         </el-table-column>
         <slot name="extraAction" />
       </el-table>
       <el-pagination
-        style="text-align:center;margin-top:20px;"
+        style="text-align:right;margin-top:20px;"
         :current-page="current_page"
+        background
         :page-sizes="[10, 20, 50, 100]"
         :page-size="page_size"
         :total="total"
-        :pager-count="5"
         layout="total, sizes, prev, pager, next"
+        :pager-count="5"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-      />
+      ></el-pagination>
     </div>
   </div>
 </template>
@@ -89,7 +91,7 @@ export default {
     },
     align: {
       type: String,
-      default: 'left',
+      default: 'left'
     },
     hasSelect: {
       type: Boolean,
@@ -120,7 +122,9 @@ export default {
       current_page: 1,
       total: 0,
       offset: 0,
-      headeractiontext: 'title'
+      headeractiontext: 'title',
+      multipleSelection: [],
+      selectDisable: true
     }
   },
   created() {
@@ -146,6 +150,10 @@ export default {
         this.loading = false
       })
     },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+      (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
+    },
     handleEdit: function(index, row) {
       try {
         this.$router.push({ name: this.action.hasEdit, params: { id: row.id }})
@@ -199,4 +207,17 @@ export default {
 .table{
   margin-top: 15px;
 }
+
+//分页
+.el-pagination /deep/ .el-pagination__total{
+  float: left;
+}
+
+.el-pagination /deep/ .el-pagination__sizes{
+  float: left;
+}
+//修改颜色
+// .el-button--text{
+//   color: #409EFF;
+// }
 </style>
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index a152c7300..eb1a5a8bd 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -47,11 +47,32 @@ const cn = {
     'SystemUserList': '系统用户',
     'LabelList': '标签管理',
     'CommandFilterList': '命令过滤',
-    'platformList': '平台列表',
-    'applications': '应用管理',
-    'perms': '权限管理',
-    'sessions': '会话管理',
-    'jobcenter': '作业中心'
+    'PlatformList': '平台列表',
+    'Applications': '应用管理',
+    'RemoteApp': '远程应用',
+    'DatabaseApp': '数据库应用',
+    'Perms': '权限管理',
+    'AssetPermission': '资产授权',
+    'RemoteAppPermission': '远程应用授权',
+    'DatabaseAppPermission': '数据库应用授权',
+    'Sessions': '会话管理',
+    'SessionOnline': '在线会话',
+    'SessionOffline': '历史会话',
+    'Commands': '命令记录',
+    'WebTerminal': 'Web终端',
+    'FileManager': '文件管理',
+    'Terminal': '终端管理',
+    'JobCenter': '作业中心',
+    'TaskList': '任务列表',
+    'BatchCommand': '批量命令',
+    'TaskMonitor': '任务监控',
+    'Tickets': '工单管理',
+    'Audits': '日志审计',
+    'LoginLog': '登录日志',
+    'FtpLog': 'FTP日志',
+    'OperateLog': '操作日志',
+    'PasswordChangeLog': '改密日志',
+    'Settings': '系统设置'
   },
   // 用户模块翻译
   users: {
@@ -202,7 +223,7 @@ const cn = {
     'SystemUserCreate': '创建系统用户',
     'SystemUserUpdate': '更新系统用户',
     'protocol': '协议',
-    'login_mode': '登录模式',
+    'loginMode': '登录模式',
     'quick_update': '快速更新',
     'auto_push': '自动更新',
     // 标签
diff --git a/src/router/index.js b/src/router/index.js
index fdf4304ea..418a4c5d1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -153,57 +153,192 @@ export const constantRoutes = [
       },
       {
         path: 'platforms',
-        name: 'platformList',
+        name: 'PlatformList',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'platformList' }
+        meta: { title: 'PlatformList' }
       }
     ]
   },
   {
     path: '/applications/',
     component: Layout,
+    redirect: '/applications/remote-apps/',
     name: 'applications',
-    meta: { title: 'applications', icon: 'th' },
+    meta: { title: 'Applications', icon: 'th' },
     children: [
       {
         path: 'remote-apps',
         name: 'remoteAppList',
-        component: () => import('@/views/table/index'),
-        meta: { title: 'remoteAppList' }
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'RemoteApp' }
       },
       {
-        path: 'databases',
-        name: 'databaseList',
+        path: 'database-apps',
+        name: 'DatabaseAppList',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'databaseList' }
+        meta: { title: 'DatabaseApp' }
       }
     ]
   },
   {
     path: '/perms/',
     component: Layout,
-    name: 'perms',
-    meta: { title: 'perms', icon: 'edit' },
+    redirect: '/perms/asset-permission/',
+    name: 'Perms',
+    meta: { title: 'Perms', icon: 'edit' },
     children: [
       {
         path: 'asset-permissions',
-        name: 'assetPermissionList',
-        component: () => import('@/views/table/index'),
-        meta: { title: 'assetPermissionList' }
+        name: 'AssetPermissionList',
+        component: import('@/views/tree/index'),
+        meta: { title: 'AssetPermission' }
       },
       {
-        path: 'remote-apps-permissions',
-        name: 'remoteAppPermissionList',
+        path: 'remote-app-permissions',
+        name: 'RemoteAppPermissionList',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'remoteAppPermissionList' }
+        meta: { title: 'RemoteAppPermission' }
       },
       {
-        path: 'database-permissions',
-        name: 'databasePermissionList',
+        path: 'database-app-permissions',
+        name: 'DatabaseAppPermissionList',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'databasePermissionList' }
+        meta: { title: 'DatabaseAppPermission' }
       }
     ]
+  },
+  {
+    path: '/terminal/',
+    component: Layout,
+    redirect: '/terminal/session-online/',
+    name: 'Sessions',
+    meta: { title: 'Sessions', icon: 'rocket' },
+    children: [
+      {
+        path: 'session-online',
+        name: 'SessionOnlineList',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'SessionOnline' }
+      },
+      {
+        path: 'session-offline',
+        name: 'SessionOfflineList',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'SessionOffline' }
+      },
+      {
+        path: 'command',
+        name: 'CommandsList',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'Commands' }
+      },
+      {
+        path: 'luna',
+        name: 'WebTerminal',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'WebTerminal' }
+      },
+      {
+        path: 'sftp',
+        name: 'FileManager',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'FileManager' }
+      },
+      {
+        path: 'terminal',
+        name: 'TerminalList',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'Terminal' }
+      }
+    ]
+  },
+  {
+    path: '/ops/',
+    component: Layout,
+    redirect: '/ops/task/',
+    name: 'JobCenter',
+    meta: { title: 'JobCenter', icon: 'coffee' },
+    children: [
+      {
+        path: 'task',
+        name: 'TaskList',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'TaskList' }
+      },
+      {
+        path: 'command-executions/create',
+        name: 'BatchCommand',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'BatchCommand' }
+      },
+      {
+        path: 'flower',
+        name: 'TaskMonitor',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'TaskMonitor' }
+      }
+    ]
+  },
+  {
+    path: '/tickets/',
+    component: Layout,
+    redirect: '/tickets/tickets/',
+    children: [{
+      path: 'tickets',
+      name: 'Tickets',
+      component: () => import('@/views/tree/index'),
+      meta: { title: 'Tickets', icon: 'check-square-o' }
+    }]
+  },
+  {
+    path: '/audits/',
+    component: Layout,
+    redirect: '/audits/login-log/',
+    name: 'Audits',
+    meta: { title: 'Audits', icon: 'history' },
+    children: [
+      {
+        path: 'login-log',
+        name: 'LoginLog',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'LoginLog' }
+      },
+      {
+        path: 'ftp-log',
+        name: 'FtpLog',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'FtpLog' }
+      },
+      {
+        path: 'operate-log',
+        name: 'OperateLog',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'OperateLog' }
+      },
+      {
+        path: 'password-change-log',
+        name: 'PasswordChangeLog',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'PasswordChangeLog' }
+      },
+      {
+        path: 'command-execution-log',
+        name: 'BatchCommand',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'BatchCommand' }
+      }
+    ]
+  },
+  {
+    path: '/settings',
+    component: Layout,
+    redirect: '/settings/',
+    children: [{
+      path: 'settings',
+      name: 'Settings',
+      component: () => import('@/views/tree/index'),
+      meta: { title: 'Settings', icon: 'gears' }
+    }]
   }
 ]
 
diff --git a/src/views/assets/AdminUserList.vue b/src/views/assets/AdminUserList.vue
index 6cdd0fdc3..967733b78 100644
--- a/src/views/assets/AdminUserList.vue
+++ b/src/views/assets/AdminUserList.vue
@@ -1,132 +1,63 @@
 <template>
-  <IBox :title="$t('route.AdminUserList')">
-    <ListTables
-      :tablebutton="$t('assets.AdminUserCreate')"
-      tableroute="UserEdit"
-      @SizeChange="handleSizeChange"
-      @CurrentChange="handleCurrentChange"
-    >
-      <el-table
-        v-loading="listLoading"
-        :data="tableData"
-        stripe
-        border
-        class="userTable"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-          header-align="center"
-        />
-        <el-table-column
-          :label="this.$t('assets.name')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.username')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.username }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.asset')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.assets_amount }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.comment')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.comment }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.action')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              @click="handleEdit(scope.$index, scope.row)"
-            >{{ $t('assets.update') }}</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-            >{{ $t('assets.delete') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </ListTables>
-  </IBox>
+  <Page>
+    <template slot="content">
+      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
+      <el-card>
+        <tables v-bind="tableConfig" />
+      </el-card>
+    </template>
+  </Page>
 </template>
 
 <script>
-import { ListTables, IBox } from '@/layout/components'
+import { Page } from '@/layout/components'
+import Tables from '@/components/ListTables/table'
 import { getAdminUserList } from '@/api/asset'
-import Tables from '@/layout/mixin/ListTables'
+
 export default {
   components: {
-    IBox,
-    ListTables
+    Page,
+    Tables
   },
-  mixins: [Tables],
   data() {
     return {
-      tableData: [],
-      listLoading: true
-    }
-  },
-  created() {
-    this.getAdminUser(this.current_page, this.page_size, this.offset)
-  },
-  methods: {
-    handleDetail: function(index, row) {
-      this.$router.push({ name: 'AdminUserDetail', params: { id: row.id }})
-    },
-    handleSizeChange(val) {
-      // 当每页数量改变触发
-      this.offset = (this.current_page - 1) * val
-      this.page_size = val
-      this.getAdminUser(this.current_page, val, this.offset)
-    },
-    handleCurrentChange(val) {
-      // 当页码改变触发
-      this.offset = (val - 1) * this.page_size
-      this.current_page = val
-      this.getAdminUser(val, this.page_size, this.offset)
-    },
-    getAdminUser(draw, limit, offset) {
-      this.listLoading = true
-      getAdminUserList({ draw, limit, offset }).then(response => {
-        this.tableData = response.results
-        this.total = response.count
-        this.listLoading = false
-      })
+      tableConfig: {
+        getData: getAdminUserList,
+        hasSelect: true,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('common.name'),
+            key: 'name',
+            link: 'AdminUserDetail',
+            sortable: true
+          },
+          {
+            prop: 'username',
+            label: this.$t('common.username'),
+            key: 'username'
+          },
+          {
+            prop: 'assets',
+            label: this.$t('assets.asset'),
+            key: 'assets_amount'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('assets.comment'),
+            key: 'comment'
+          }
+        ],
+        action: {
+          hasEdit: 'AdminUserEdit',
+          newClick: 'AdminUserEdit'
+        }
+      }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style>
 
 </style>
diff --git a/src/views/assets/CommandFilterList.vue b/src/views/assets/CommandFilterList.vue
index aab21396a..0acb60125 100644
--- a/src/views/assets/CommandFilterList.vue
+++ b/src/views/assets/CommandFilterList.vue
@@ -1,127 +1,58 @@
 <template>
-  <IBox :title="$t('route.AdminUserList')">
-    <ListTables
-      :tablebutton="$t('assets.AdminUserCreate')"
-      tableroute="UserEdit"
-      @SizeChange="handleSizeChange"
-      @CurrentChange="handleCurrentChange"
-    >
-      <el-table
-        v-loading="listLoading"
-        :data="tableData"
-        stripe
-        border
-        class="userTable"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-          header-align="center"
-        />
-        <el-table-column
-          :label="this.$t('assets.name')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.rules')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.rules.length }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.system_user')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.system_users.length }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.comment')"
-          align="center"
-          header-align="center"
-          sortable
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.comment }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.action')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              @click="handleEdit(scope.$index, scope.row)"
-            >{{ $t('assets.update') }}</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-            >{{ $t('assets.delete') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </ListTables>
-  </IBox>
+  <Page>
+    <template slot="content">
+      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
+      <el-card>
+        <tables v-bind="tableConfig" />
+      </el-card>
+    </template>
+  </Page>
 </template>
 
 <script>
-import { ListTables, IBox } from '@/layout/components'
+import { Page } from '@/layout/components'
+import Tables from '@/components/ListTables/table'
 import { getCommandFilterList } from '@/api/asset'
-import Tables from '@/layout/mixin/ListTables'
+
 export default {
   components: {
-    IBox,
-    ListTables
+    Page,
+    Tables
   },
-  mixins: [Tables],
   data() {
     return {
-      tableData: [],
-      listLoading: true
-    }
-  },
-  created() {
-    this.getCommandFilter(this.current_page, this.page_size, this.offset)
-  },
-  methods: {
-    handleDetail: function(index, row) {
-      this.$router.push({ name: 'LabelDetail', params: { id: row.id }})
-    },
-    handleSizeChange(val) {
-      // 当每页数量改变触发
-      this.offset = (this.current_page - 1) * val
-      this.page_size = val
-      this.getCommandFilter(this.current_page, val, this.offset)
-    },
-    handleCurrentChange(val) {
-      // 当页码改变触发
-      this.offset = (val - 1) * this.page_size
-      this.current_page = val
-      this.getCommandFilter(val, this.page_size, this.offset)
-    },
-    getCommandFilter(draw, limit, offset) {
-      this.listLoading = true
-      getCommandFilterList({ draw, limit, offset }).then(response => {
-        this.tableData = response.results
-        this.total = response.count
-        this.listLoading = false
-      })
+      tableConfig: {
+        getData: getCommandFilterList,
+        hasSelect: true,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('common.name'),
+            key: 'name',
+            link: 'CommandFilterDetail',
+            sortable: true
+          },
+          {
+            prop: 'rules',
+            label: this.$t('assets.rules'),
+            key: 'rules'
+          },
+          {
+            prop: 'system_users',
+            label: this.$t('assets.system_user'),
+            key: 'system_users'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('assets.comment'),
+            key: 'comment'
+          }
+        ],
+        action: {
+          hasEdit: 'CommandFilterEdit',
+          newClick: 'CommandFilterEdit'
+        }
+      }
     }
   }
 }
diff --git a/src/views/assets/DomainList.vue b/src/views/assets/DomainList.vue
index b1f027799..8e0b89422 100644
--- a/src/views/assets/DomainList.vue
+++ b/src/views/assets/DomainList.vue
@@ -1,131 +1,63 @@
 <template>
-  <IBox :title="$t('route.AdminUserList')">
-    <ListTables
-      :tablebutton="$t('assets.AdminUserCreate')"
-      tableroute="UserEdit"
-      @SizeChange="handleSizeChange"
-      @CurrentChange="handleCurrentChange"
-    >
-      <el-table
-        v-loading="listLoading"
-        :data="tableData"
-        stripe
-        border
-        class="userTable"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-          header-align="center"
-        />
-        <el-table-column
-          :label="this.$t('assets.name')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.asset')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.asset_count }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.gateway')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.gateway_count }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.comment')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.comment }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.action')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              @click="handleEdit(scope.$index, scope.row)"
-            >{{ $t('assets.update') }}</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-            >{{ $t('assets.delete') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </ListTables>
-  </IBox>
+  <Page>
+    <template slot="content">
+      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
+      <el-card>
+        <tables v-bind="tableConfig" />
+      </el-card>
+    </template>
+  </Page>
 </template>
 
 <script>
-import { ListTables, IBox } from '@/layout/components'
+import { Page } from '@/layout/components'
+import Tables from '@/components/ListTables/table'
 import { getDomainList } from '@/api/asset'
-import Tables from '@/layout/mixin/ListTables'
+
 export default {
   components: {
-    IBox,
-    ListTables
+    Page,
+    Tables
   },
-  mixins: [Tables],
   data() {
     return {
-      tableData: [],
-      listLoading: true
-    }
-  },
-  created() {
-    this.getDomain(this.current_page, this.page_size, this.offset)
-  },
-  methods: {
-    handleDetail: function(index, row) {
-      this.$router.push({ name: 'DomainDetail', params: { id: row.id }})
-    },
-    handleSizeChange(val) {
-      // 当每页数量改变触发
-      this.offset = (this.current_page - 1) * val
-      this.page_size = val
-      this.getDomain(this.current_page, val, this.offset)
-    },
-    handleCurrentChange(val) {
-      // 当页码改变触发
-      this.offset = (val - 1) * this.page_size
-      this.current_page = val
-      this.getDomain(val, this.page_size, this.offset)
-    },
-    getDomain(draw, limit, offset) {
-      this.listLoading = true
-      getDomainList({ draw, limit, offset }).then(response => {
-        this.tableData = response.results
-        this.total = response.count
-        this.listLoading = false
-      })
+      tableConfig: {
+        getData: getDomainList,
+        hasSelect: true,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('common.name'),
+            key: 'name',
+            link: 'DomainDetail',
+            sortable: true
+          },
+          {
+            prop: 'asset',
+            label: this.$t('assets.asset'),
+            key: 'asset_count'
+          },
+          {
+            prop: 'gateway',
+            label: this.$t('assets.gateway'),
+            key: 'gateway_count'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('assets.comment'),
+            key: 'comment'
+          }
+        ],
+        action: {
+          hasEdit: 'DomainEdit',
+          newClick: 'DomainEdit'
+        }
+      }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style>
 
 </style>
diff --git a/src/views/assets/LabelList.vue b/src/views/assets/LabelList.vue
index f0e11b38a..d609a96b9 100644
--- a/src/views/assets/LabelList.vue
+++ b/src/views/assets/LabelList.vue
@@ -1,118 +1,57 @@
 <template>
-  <IBox :title="$t('route.AdminUserList')">
-    <ListTables
-      :tablebutton="$t('assets.AdminUserCreate')"
-      tableroute="UserEdit"
-      @SizeChange="handleSizeChange"
-      @CurrentChange="handleCurrentChange"
-    >
-      <el-table
-        v-loading="listLoading"
-        :data="tableData"
-        stripe
-        border
-        class="userTable"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-          header-align="center"
-        />
-        <el-table-column
-          :label="this.$t('assets.name')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.value')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.value }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.asset')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.asset_count }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.action')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              @click="handleEdit(scope.$index, scope.row)"
-            >{{ $t('assets.update') }}</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-            >{{ $t('assets.delete') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </ListTables>
-  </IBox>
+  <Page>
+    <template slot="content">
+      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
+      <el-card>
+        <tables v-bind="tableConfig" />
+      </el-card>
+    </template>
+  </Page>
 </template>
 
 <script>
-import { ListTables, IBox } from '@/layout/components'
+import { Page } from '@/layout/components'
+import Tables from '@/components/ListTables/table'
 import { getLabelList } from '@/api/asset'
-import Tables from '@/layout/mixin/ListTables'
 export default {
   components: {
-    IBox,
-    ListTables
+    Page,
+    Tables
   },
-  mixins: [Tables],
   data() {
     return {
-      tableData: [],
-      listLoading: true
-    }
-  },
-  created() {
-    this.getLabel(this.current_page, this.page_size, this.offset)
-  },
-  methods: {
-    handleDetail: function(index, row) {
-      this.$router.push({ name: 'LabelDetail', params: { id: row.id }})
-    },
-    handleSizeChange(val) {
-      // 当每页数量改变触发
-      this.offset = (this.current_page - 1) * val
-      this.page_size = val
-      this.getLabel(this.current_page, val, this.offset)
-    },
-    handleCurrentChange(val) {
-      // 当页码改变触发
-      this.offset = (val - 1) * this.page_size
-      this.current_page = val
-      this.getLabel(val, this.page_size, this.offset)
-    },
-    getLabel(draw, limit, offset) {
-      this.listLoading = true
-      getLabelList({ draw, limit, offset }).then(response => {
-        this.tableData = response.results
-        this.total = response.count
-        this.listLoading = false
-      })
+      tableConfig: {
+        getData: getLabelList,
+        hasSelect: true,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('common.name'),
+            key: 'name',
+            link: 'LabelDetail',
+            sortable: true
+          },
+          {
+            prop: 'value',
+            label: this.$t('assets.value'),
+            key: 'value'
+          },
+          {
+            prop: 'asset',
+            label: this.$t('assets.asset'),
+            key: 'asset_count'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('assets.comment'),
+            key: 'comment'
+          }
+        ],
+        action: {
+          hasEdit: 'LabelEdit',
+          newClick: 'LabelEdit'
+        }
+      }
     }
   }
 }
diff --git a/src/views/assets/SystemUserList.vue b/src/views/assets/SystemUserList.vue
index 577e5015a..6dac35e4a 100644
--- a/src/views/assets/SystemUserList.vue
+++ b/src/views/assets/SystemUserList.vue
@@ -1,149 +1,67 @@
 <template>
-  <IBox :title="$t('route.AdminUserList')">
-    <ListTables
-      :tablebutton="$t('assets.AdminUserCreate')"
-      tableroute="UserEdit"
-      @SizeChange="handleSizeChange"
-      @CurrentChange="handleCurrentChange"
-    >
-      <el-table
-        v-loading="listLoading"
-        :data="tableData"
-        stripe
-        border
-        class="userTable"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-          header-align="center"
-        />
-        <el-table-column
-          :label="this.$t('assets.name')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.username')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.username }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.protocol')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.protocol }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.login_mode')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.login_mode_display }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.asset')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.assets_amount }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.comment')"
-          sortable
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.comment }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="this.$t('assets.action')"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              @click="handleEdit(scope.$index, scope.row)"
-            >{{ $t('assets.update') }}</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-            >{{ $t('assets.delete') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </ListTables>
-  </IBox>
+  <Page>
+    <template slot="content">
+      <el-alert type="success"> 这里是一个成功的文案 </el-alert>
+      <el-card>
+        <tables v-bind="tableConfig" />
+      </el-card>
+    </template>
+  </Page>
 </template>
-
 <script>
-import { ListTables, IBox } from '@/layout/components'
+import { Page } from '@/layout/components'
+import Tables from '@/components/ListTables/table'
 import { getSystemUserList } from '@/api/asset'
-import Tables from '@/layout/mixin/ListTables'
+
 export default {
   components: {
-    IBox,
-    ListTables
+    Page,
+    Tables
   },
-  mixins: [Tables],
   data() {
     return {
-      tableData: [],
-      listLoading: true
-    }
-  },
-  created() {
-    this.getSystemUser(this.current_page, this.page_size, this.offset)
-  },
-  methods: {
-    handleDetail: function(index, row) {
-      this.$router.push({ name: 'SystemUserDetail', params: { id: row.id }})
-    },
-    handleSizeChange(val) {
-      // 当每页数量改变触发
-      this.offset = (this.current_page - 1) * val
-      this.page_size = val
-      this.getSystemUser(this.current_page, val, this.offset)
-    },
-    handleCurrentChange(val) {
-      // 当页码改变触发
-      this.offset = (val - 1) * this.page_size
-      this.current_page = val
-      this.getSystemUser(val, this.page_size, this.offset)
-    },
-    getSystemUser(draw, limit, offset) {
-      this.listLoading = true
-      getSystemUserList({ draw, limit, offset }).then(response => {
-        this.tableData = response.results
-        this.total = response.count
-        this.listLoading = false
-      })
+      tableConfig: {
+        getData: getSystemUserList,
+        hasSelect: true,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('common.name'),
+            key: 'name',
+            link: 'DomainDetail',
+            sortable: true
+          },
+          {
+            prop: 'username',
+            label: this.$t('common.username'),
+            key: 'assets_amount'
+          },
+          {
+            prop: 'protocol',
+            label: this.$t('assets.protocol'),
+            key: 'protocol'
+          },
+          {
+            prop: 'loginMode',
+            label: this.$t('assets.loginMode'),
+            key: 'login_mode_display'
+          },
+          {
+            prop: 'asset',
+            label: this.$t('assets.asset'),
+            key: 'assets_amount'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('assets.comment'),
+            key: 'comment'
+          }
+        ],
+        action: {
+          hasEdit: 'SystemUserEdit',
+          newClick: 'SystemUserEdit'
+        }
+      }
     }
   }
 }