CN-818 fea: Administration开发

2022-12-02 16:02:18 +08:00
parent 7ec4ab62ff
commit ba22886a09
13 changed files with 743 additions and 27 deletions
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -73,3 +73,6 @@
@import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
@import './components/common/chart-error';
+
+@import 'views/administration/AdministrationTabs';
+
--- a/src/assets/css/components/views/administration/AdministrationTabs.scss
+++ b/src/assets/css/components/views/administration/AdministrationTabs.scss
@@ -0,0 +1,17 @@
+.administration {
+  .npm-tabs {
+    height: 18px;
+  }
+  .administration-container {
+    height: calc(100% - 26px);
+    flex-direction: column;
+    .list-page {
+      .main-container {
+        padding: 0px;
+        .cn-pagination {
+          height: 34px;
+        }
+      }
+    }
+  }
+}
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -42,7 +42,7 @@
    </div>
    <div class="cn-header__nav">
      <i class="cn-icon cn-icon-a-NetworkAnalytics"></i>
-      <el-breadcrumb class="header__left-breadcrumb" :separator="route.indexOf('detection') === -1 ? '>' : ''">
+      <el-breadcrumb class="header__left-breadcrumb" :separator="route.indexOf('detection') === -1 && route.indexOf('administration') === -1 ? '>' : ''">
        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item}`" :title="item"
                            v-for="(item,index) in breadcrumb" :key="item">
          <template v-if="index===3">
@@ -104,7 +104,7 @@
          </template>
          <template v-else-if="index===1">
            <span class="route-menu" @click="jump(route,'','',2)"
-                  v-if="route.indexOf('detection') === -1">{{ item }}</span>
+                  v-if="route.indexOf('detection') === -1 && route.indexOf('administration') === -1">{{ item }}</span>
            <!--            <div class="header__left-breadcrumb-item-select" v-if="route.indexOf('detection') > -1">-->
            <!--              <el-popover placement="bottom-start"-->
            <!--                          v-if="route.indexOf('detection') > -1"-->
@@ -421,6 +421,7 @@ export default {
    logout () {
      sessionStorage.removeItem(storageKey.tokenExpireCurrentPath)
      localStorage.removeItem(storageKey.token)
+      localStorage.removeItem(storageKey.currentTab)
      get(api.logout)
    },
    refreshLang () {
@@ -648,6 +649,10 @@ export default {
          })
        }
      })
+      // 清除administration的tab列表保存状态currentTab
+      if (route !== '/administration') {
+        localStorage.removeItem(storageKey.currentTab)
+      }
      this.changeUrlTabState()
      if (opeType === 2 || opeType === 0) { // 二级菜单 或主菜单
        // 如果有四级菜单，则将四级菜单对应tab的checked设置为true:根据columnName和columnValue 或 url判断不准确
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,26 +19,10 @@ const routes = [
        path: '/panel/:typeName',
        component: () => import('@/views/charts2/Panel')
      },
-      {
-        path: '/user',
-        component: () => import('@/views/settings/User')
-      },
-      {
-        path: '/role',
-        component: () => import('@/views/settings/Roles')
-      },
-      {
-        path: '/i18n',
-        component: () => import('@/views/settings/I18n')
-      },
      {
        path: '/report/builtIn',
        component: () => import('@/views/report/reportTest')
      },
-      {
-        path: '/operationLog',
-        component: () => import('@/views/settings/OperationLog')
-      },
      {
        path: '/entityExplorer',
        component: () => import('@/views/entityExplorer/EntityExplorer')
@@ -47,14 +31,6 @@ const routes = [
        path: '/detection/:typeName',
        component: () => import('@/views/detections/Index')
      },
-      {
-        path: '/galaxyProxy',
-        component: () => import('@/views/settings/GalaxyProxy')
-      },
-      {
-        path: '/chart',
-        component: () => import('@/views/settings/Chart')
-      },
      {
        path: '/temp',
        component: () => import('@/views/Temp')
@@ -62,6 +38,44 @@ const routes = [
      {
        path: '/businessLog/viewer',
        component: () => import('@/views/businessLog/Viewer')
+      },
+      {
+        name: 'Administration',
+        path: '/administration',
+        redirect: '/administration/user',
+        component: () => import('@/views/administration/Index'),
+        children: [
+          {
+            name: 'User',
+            path: '/administration/user',
+            component: () => import('@/views/administration/User')
+          },
+          {
+            name: 'Role',
+            path: '/administration/role',
+            component: () => import('@/views/administration/Roles')
+          },
+          {
+            name: 'I18n',
+            path: '/administration/i18n',
+            component: () => import('@/views/administration/I18n')
+          },
+          {
+            name: 'OperationLog',
+            path: '/administration/operationLog',
+            component: () => import('@/views/administration/OperationLog')
+          },
+          {
+            name: 'GalaxyProxy',
+            path: '/administration/galaxyProxy',
+            component: () => import('@/views/administration/GalaxyProxy')
+          },
+          {
+            name: 'Chart',
+            path: '/administration/chart',
+            component: () => import('@/views/administration/Chart')
+          }
+        ]
      }
    ]
  }
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -34,7 +34,8 @@ export const storageKey = {
  drillDownTableConfig: 'drilldownTableConfig',
  userCustomizationConfig: 'userCustomizationConfig',
  linkInfo: 'cn-link-info',
-  history: 'cn-history'
+  history: 'cn-history',
+  currentTab: 'cn-current-tab'
 }
 export const largeCountryList = ['CN', 'US', 'RU', 'AU', 'CA', 'KZ', 'IN', 'BR']

--- a/src/views/administration/AdministrationTabs.vue
+++ b/src/views/administration/AdministrationTabs.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="npm-tabs">
+    <div class="npm-tabs__active-bar"></div>
+    <el-tabs v-model="currentTab" ref="elTabs" type="border-card" @tab-click="jumpPage">
+      <el-tab-pane
+          v-for="(tab, index) in tabsData"
+          :key="tab.i18n"
+          :name="index">
+        <template #label>
+          <div class="npm-tab__label">
+            <i :class="tab.icon"></i>
+            <span>{{ $t(tab.i18n) }}</span>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { storageKey } from '@/utils/constants'
+import { ref } from 'vue'
+
+export default {
+  name: 'DetectionTabs',
+  props: {
+    tabsData: Array
+  },
+  data () {
+    return {
+      leftOffset: 27,
+      currentTab: ref(0)
+    }
+  },
+  methods: {
+    handleActiveBar (index) {
+      const tabDom = document.getElementById('tab-' + index)
+      if (tabDom) {
+        const offsetLeft = tabDom.offsetLeft
+        const clientWidth = tabDom.clientWidth
+        const clientLeft = tabDom.clientLeft
+        const activeBar = document.querySelector('.npm-tabs .npm-tabs__active-bar')
+        activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+      }
+    },
+    jumpPage (tab) {
+      localStorage.setItem(storageKey.currentTab, tab.index)
+      this.$router.push({
+        path: this.tabsData[tab.index].path,
+        query: {
+          t: +new Date()
+        }
+      })
+    }
+  },
+  mounted () {
+    const index = localStorage.getItem(storageKey.currentTab)
+    if (index) {
+      this.currentTab = parseFloat(index)
+    }
+    this.$nextTick(() => {
+      this.handleActiveBar(this.currentTab)
+    })
+  }
+}
+</script>
--- a/src/views/administration/Chart.vue
+++ b/src/views/administration/Chart.vue
@@ -0,0 +1,82 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+      ref="dataList"
+      :tableId="tableId"
+      v-model:custom-table-title="tools.customTableTitle"
+      :api="url"
+      :from="fromRoute.chart"
+      :layout="['columnCustomize','elementSet','search']"
+      @search="search"
+    >
+      <template #top-tool-right>
+        <button
+          id="account-add"
+          class="top-tool-btn margin-r-10"
+          type="button"
+          @click="add"
+        >
+          <i class="cn-icon-add cn-icon"/>
+        </button>
+      </template>
+      <template #default>
+        <chart-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @delete="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
+      <chart-box
+              :object="object"
+              @close="closeRightBox"
+      />
+    </el-drawer>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import chartTable from '@/components/table/settings/ChartTable'
+import chartBox from '@/components/rightBox/settings/ChartBox'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'Chart',
+  mixins: [dataListMixin],
+  components: {
+    cnDataList,
+    chartTable,
+    chartBox
+  },
+  data () {
+    return {
+      url: api.chart,
+      listUrl: api.chartList,
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        params: '',
+        i18n: ''
+      },
+      tableId: 'chartTable'
+    }
+  }
+}
+</script>
--- a/src/views/administration/GalaxyProxy.vue
+++ b/src/views/administration/GalaxyProxy.vue
@@ -0,0 +1,144 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.galaxyProxy"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
+    >
+      <template v-slot:top-tool-right>
+        <button id="galaxy-proxy-clear-cache" class="top-tool-btn margin-r-10" :title="$t('overall.clearCache')"
+                type="button" @click="clearCache">
+          <i class="cn-icon cn-icon-clear-cache"></i>
+        </button>
+        <button id="galaxy-proxy-add" class="top-tool-btn margin-r-10"
+                type="button" @click="add">
+          <i class="cn-icon-add cn-icon"></i>
+        </button>
+        <button id="galaxy-proxy-debug" class="top-tool-btn margin-r-10"  :title="$t('overall.debug')"
+                type="button" @click="debug(true,{})">
+          <i class="cn-icon-category cn-icon"></i>
+        </button>
+        <top-tool-more-options
+                ref="export"
+                id="model"
+                :params="searchLabel"
+                class="top-tool-export margin-l-10 margin-r-10"
+                export-file-name="galaxyProxy"
+                export-url="/galaxy/setting/export"
+                import-url="/galaxy/setting/import"
+                @afterImport="getTableData"
+        >
+          <template v-slot:before>
+          </template>
+        </top-tool-more-options>
+      </template>
+      <template v-slot:default>
+        <galaxy-proxy-table
+            ref="dataTable"
+            v-loading="tools.loading"
+            :api="url"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
+            @copy="copy"
+            @debug="debugRow"
+        ></galaxy-proxy-table>
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+        v-model="rightBox.show"
+        direction="rtl"
+        :with-header="false"
+        destroy-on-close>
+      <galaxy-proxy-box :object="object" @close="closeRightBox"></galaxy-proxy-box>
+    </el-drawer>
+  </div>
+  <galaxy-proxy-debug
+          v-model:show-debug="showDebug"
+          top="5vh"
+          :show-close="false"
+          :curGalaxyProxy="curGalaxyProxy"></galaxy-proxy-debug>
+</template>
+
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import galaxyProxyBox from '@/components/rightBox/settings/GalaxyProxyBox'
+import galaxyProxyTable from '@/components/table/settings/GalaxyProxyTable'
+import dataListMixin from '@/mixins/data-list'
+import { api } from '@/utils/api'
+import { get, put } from '@/utils/http'
+import TopToolMoreOptions from '@/components/common/popBox/TopToolMoreOptions'
+import galaxyProxyDebug from '@/components/setting/GalaxyProxyDebug'
+
+export default {
+  name: 'GalaxyProxy',
+  components: {
+    cnDataList,
+    galaxyProxyBox,
+    galaxyProxyTable,
+    TopToolMoreOptions,
+    galaxyProxyDebug
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: api.galaxyProxy,
+      tableId: 'galaxySettingTable', // 需要分页的table的id，用于记录每页数量
+      blankObject: { // 空白对象
+        name: ''
+      },
+      showDebug: false,
+      curGalaxyProxy: {}
+    }
+  },
+  methods: {
+    edit (u) {
+      get(`${this.url}/${u.id}`).then(response => {
+        if (response.code === 200) {
+          const editObject = response.data
+          editObject.targetHeader || (editObject.targetHeader = '')
+          editObject.preHandle || (editObject.preHandle = '')
+          editObject.postHandle || (editObject.postHandle = '')
+          editObject.targetParam || (editObject.targetParam = '')
+          this.object = editObject
+          this.rightBox.show = true
+        }
+      })
+    },
+    debug (isTopDebug, u) {
+      if (!isTopDebug && u) {
+        this.curGalaxyProxy = JSON.parse(JSON.stringify(u))
+      }
+      this.showDebug = true
+    },
+    debugRow (u) {
+      this.debug(false, u)
+    },
+    clearCache () {
+      put(`${this.url}/clearCache`).then(response => {
+        if (response.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.success') })
+        } else {
+          this.$message.error(response.msg || response.message)
+        }
+      }).catch(() => {
+        this.$message.error(this.$t('tip.unknownError'))
+      })
+    }
+
+  }
+}
+</script>
--- a/src/views/administration/I18n.vue
+++ b/src/views/administration/I18n.vue
@@ -0,0 +1,86 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.user"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
+    >
+      <template #top-tool-right>
+        <button
+            id="account-add"
+            v-has="'user_add'"
+            class="top-tool-btn margin-r-10"
+            type="button"
+            @click="add"
+        >
+          <i class="cn-icon-add cn-icon"/>
+        </button>
+      </template>
+      <template #default>
+        <i18n-table
+            ref="dataTable"
+            v-loading="tools.loading"
+            :api="url"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
+            @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+        v-model="rightBox.show"
+        direction="rtl"
+        :with-header="false"
+        destroy-on-close>
+      <i18n-box
+          :object="object"
+          @close="closeRightBox"
+      />
+    </el-drawer>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import i18nTable from '@/components/table/settings/I18nTable'
+import i18nBox from '@/components/rightBox/settings/I18nBox'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'I18n',
+  mixins: [dataListMixin],
+  components: {
+    cnDataList,
+    i18nTable,
+    i18nBox
+  },
+  data () {
+    return {
+      url: api.i18nSys,
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        code: '',
+        lang: '',
+        value: ''
+      },
+      tableId: 'i18nTable'
+    }
+  },
+  methods: {
+  }
+}
+</script>
--- a/src/views/administration/Index.vue
+++ b/src/views/administration/Index.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="administration entity-explorer entity-explorer--show-list">
+    <!-- 顶部工具栏，在列表页显示 -->
+    <div class="explorer-top-tools explorer-detection-top-tools">
+      <div class="explorer-top-tools-title">{{$t('overall.administration')}}</div>
+    </div>
+    <div style="width: 100%;padding-bottom: 26px;">
+      <administration-tabs :tabs-data="tabsData" />
+    </div>
+    <!-- 内容区 -->
+    <div class="explorer-container administration-container">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import AdministrationTabs from '@/views/administration/AdministrationTabs'
+export default {
+  name: 'index',
+  components: {
+    AdministrationTabs
+  },
+  data () {
+    return {
+      tabsData: [
+        {
+          name: 'User',
+          i18n: 'overall.user',
+          path: '/administration/user',
+          icon: 'cn-icon cn-icon-user2'
+        },
+        {
+          name: 'Role',
+          i18n: 'overall.role',
+          path: '/administration/role',
+          icon: 'cn-icon cn-icon-role2'
+        },
+        {
+          name: 'OperationLog',
+          i18n: 'overall.operationLog',
+          path: '/administration/operationLog',
+          icon: 'cn-icon cn-icon-operation-log'
+        },
+        {
+          name: 'I18n',
+          i18n: 'I18n',
+          path: '/administration/i18n',
+          icon: 'cn-icon cn-icon-i18n'
+        },
+        {
+          name: 'GalaxyProxy',
+          i18n: 'galaxyProxy.galaxyProxy',
+          path: '/administration/galaxyProxy',
+          icon: 'cn-icon cn-icon-proxy'
+        },
+        {
+          name: 'Chart',
+          i18n: 'overall.chart',
+          path: '/administration/chart',
+          icon: 'cn-icon cn-icon-chart'
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/src/views/administration/OperationLog.vue
+++ b/src/views/administration/OperationLog.vue
@@ -0,0 +1,54 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+      ref="dataList"
+      :api="url"
+      :tableId="tableId"
+      :layout="['search', 'elementSet','search']"
+      v-model:custom-table-title="tools.customTableTitle"
+      :from="fromRoute.operationLog"
+      @search="search">
+      <template v-slot:default>
+        <operation-log-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
+          @search="search"
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import operationLogTable from '@/components/table/settings/OperationLogTable'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'operationLog',
+  components: {
+    cnDataList,
+    operationLogTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: api.operationLog,
+      tableId: 'operationLogTable' // 需要分页的table的id，用于记录每页数量
+    }
+  }
+}
+</script>
--- a/src/views/administration/Roles.vue
+++ b/src/views/administration/Roles.vue
@@ -0,0 +1,91 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+            ref="dataList"
+            :tableId="tableId"
+            v-model:custom-table-title="tools.customTableTitle"
+            :api="url"
+            :from="fromRoute.roles"
+            :layout="['columnCustomize','elementSet','search']"
+            @search="search"
+    >
+      <template v-slot:top-tool-right>
+        <button id="roles-add" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
+                type="button" @click="add">
+          <i class="cn-icon-add cn-icon"></i>
+        </button>
+        <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot:default>
+        <roles-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @delete="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        ></roles-table>
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
+      <role-box :object="object" @close="closeRightBox"></role-box>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import rolesTable from '@/components/table/settings/RoleTable'
+import roleBox from '@/components/rightBox/settings/RoleBox'
+import { api } from '@/utils/api'
+import { get } from '@/utils/http'
+
+export default {
+  name: 'roles',
+  components: {
+    cnDataList,
+    roleBox,
+    rolesTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: api.role,
+      tableId: 'rolesTable', // 需要分页的table的id，用于记录每页数量
+      blankObject: { // 空白对象
+        name: '',
+        buildIn: '',
+        i18n: '',
+        id: '',
+        menuIds: [],
+        remark: '',
+        uby: 0,
+        utime: ''
+      }
+    }
+  },
+  methods: {
+    edit (u) {
+      get(`${this.url}`, { ids: u.id }).then(response => {
+        if (response.code === 200) {
+          this.object = response.data.list[0]
+          this.rightBox.show = true
+        }
+      })
+    }
+  }
+}
+</script>
--- a/src/views/administration/User.vue
+++ b/src/views/administration/User.vue
@@ -0,0 +1,86 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+      ref="dataList"
+      :tableId="tableId"
+      v-model:custom-table-title="tools.customTableTitle"
+      :api="url"
+      :from="fromRoute.user"
+      :layout="['columnCustomize','elementSet','search']"
+      @search="search"
+    >
+      <template #top-tool-right>
+        <button
+          id="account-add"
+          class="top-tool-btn margin-r-10"
+          type="button"
+          @click="add"
+        >
+          <i class="cn-icon-add cn-icon"/>
+        </button>
+      </template>
+      <template #default>
+        <user-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @delete="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
+      <user-box
+              :object="object"
+              @close="closeRightBox"
+      />
+    </el-drawer>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import userTable from '@/components/table/settings/UserTable'
+import userBox from '@/components/rightBox/settings/UserBox'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'User',
+  mixins: [dataListMixin],
+  components: {
+    cnDataList,
+    userTable,
+    userBox
+  },
+  data () {
+    return {
+      url: api.user,
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        username: '',
+        email: '',
+        pin: '',
+        mobile: '',
+        status: 1,
+        roleIds: '',
+        pinChange: ''
+      },
+      tableId: 'userTable'
+    }
+  }
+}
+</script>