diff --git a/.env b/.env
index 46c4d4e7c112058e66ad84003db5691ba2b72e50..ad25699586d68c0a4ffb4253cf843d52e6bc8cce 100644
--- a/.env
+++ b/.env
@@ -4,10 +4,7 @@
 VUE_APP_TITLE=ZeroVue
 
 # 网络请求公用地址
-VUE_APP_API=/zero
-
-# 仓库地址
-VUE_APP_REPO=https://baidu.com
+VUE_APP_API=http://127.0.0.1
 
 # 国际化配置
 VUE_APP_I18N_LOCALE=zh-chs
diff --git a/package.json b/package.json
index 318919a38549799b0091f242e78ff524583eb2e2..0921a5d37505ca9b6c445e7ded385ba5c6d31b72 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
     "better-scroll": "^1.15.2",
     "core-js": "^3.4.3",
     "dayjs": "^1.8.17",
-    "e-icon-picker": "^1.0.4",
-    "element-ui": "^2.13.1",
+    "e-icon-picker": "^1.0.13",
+    "element-ui": "2.13.2",
     "faker": "^4.1.0",
     "flex.css": "^1.1.7",
     "fuse.js": "^5.2.3",
diff --git a/src/api/axios.js b/src/api/axios.js
index d6eb5763b25abbfcf2f4e030f971b1378c65dc2d..0703dcb0f47f8710f7739633e5f674f072883af0 100644
--- a/src/api/axios.js
+++ b/src/api/axios.js
@@ -75,10 +75,27 @@ function createService () {
           default: break
         }
         if (!error.response.data.code) {
-          error.message = '服务器宕机'
+          /**
+           * 第一种情况，服务器宕机
+           * 第二种情况，返回的是流json
+           */
+          if (error.response.data.type === 'application/json') {
+            // 将blob文件流转换成json
+            const reader = new FileReader()
+            reader.onload = function (event) {
+              const message = JSON.parse(reader.result).msg
+              error.message = message
+              errorLog(error)
+            }
+            reader.readAsText(error.response.data)
+          } else {
+            error.message = '服务器宕机'
+            errorLog(error)
+          }
+        } else {
+          errorLog(error)
         }
       }
-      errorLog(error)
       return Promise.reject(error)
     }
   )
diff --git a/src/assets/images/login/login-code.png b/src/assets/images/login/login-code.png
deleted file mode 100644
index 14bf592497077b670ce8f166477e0b32a4e47d81..0000000000000000000000000000000000000000
Binary files a/src/assets/images/login/login-code.png and /dev/null differ
diff --git a/src/assets/style/theme/theme-base.scss b/src/assets/style/theme/theme-base.scss
index 9cb2f6905558ee56a35856fec4225ce31c8e0b78..5a3c4d68e6b60977a9eb519a0bd92324715f35eb 100644
--- a/src/assets/style/theme/theme-base.scss
+++ b/src/assets/style/theme/theme-base.scss
@@ -1,3 +1,6 @@
+//--------------------------------------全局样式定义文件--------------------------------------------------
+
+
 // 减小弹出菜单的项目高度
 .el-menu--popup {
   .el-menu-item {
@@ -296,14 +299,15 @@
                 height: auto !important;
               }
               .zero-container-full__aside {
-                padding-left: 10px;
-                // padding: 10px;
+                // padding-left: 100px;
+                padding: 10px;
                 border-right:1px solid #cfd7e5;
                 // overflow:hidden;
               }
               .zero-container-full__main {
-                padding: 0px !important;
-                height: 100%;
+                // padding: 0px !important;
+                // height: auto;
+                overflow:hidden !important
               }
               .zero-container-full__body {
                 flex-grow: 1;
@@ -313,7 +317,7 @@
               }
               .zero-container-full__footer {
                 padding: 10px;
-                border-top: 0px !important
+                // border-top: 0px !important
               }
             }
             // 填充式布局组件 - 滚动优化
@@ -463,3 +467,37 @@
     }
   }
 }
+// -----------------------------------自定义全局样式--------------------------------------
+// 对树形el-tree的处理
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* font-size: 24px; */
+  /* padding-right: 100px; */
+  height: 100%;
+}
+.zero-tree .el-tree-node__content {
+  height: 40px;
+}
+
+.el-tree>.el-tree-node{
+  display:inline-block;
+  min-width: 100%;
+}
+
+
+.tree {
+  overflow-y: auto;
+  min-height: 180px;
+  max-height: 300px;
+  border: 1px solid #e4e7ed;
+  border-top: 0px;
+}
+
+// 查询样式
+.zero-search-from {
+  margin-bottom: -10px;
+  padding-top: 15px;
+}
\ No newline at end of file
diff --git a/src/components/page-footer/PageFooter.vue b/src/components/page-footer/PageFooter.vue
deleted file mode 100644
index f5d8f0bd1c15e38b5d33912825009a7635032113..0000000000000000000000000000000000000000
--- a/src/components/page-footer/PageFooter.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <el-pagination
-      :current-page="page"
-      :page-sizes="limits"
-      :page-size="limit"
-      :total="total"
-      layout="total, sizes, jumper,slot, prev,pager, next"
-      @size-change="pageSizeChangeHandle"
-      @current-change="pageCurrentChangeHandle"
-      class="zero-pagination"
-    >
-      <el-link :underline="false"  @click="firstPageHandle" :disabled="page === 1">首页</el-link>
-    </el-pagination>
-    <el-pagination
-      :current-page="page"
-      :page-sizes="limits"
-      :page-size="limit"
-      :total="total"
-      layout="slot"
-      @size-change="pageSizeChangeHandle"
-      @current-change="pageCurrentChangeHandle"
-      class="zero-pagination"
-    >
-      <el-link :underline="false" @click="lastPageHandle" :disabled="Math.ceil(total / limit) === 1 || Math.ceil(total / limit) === page">尾页</el-link>
-      <el-tooltip :hide-after="1000" content="点击刷新" placement="right" class="page-refresh">
-        <el-link :underline="false" icon="el-icon-refresh" @click="refreshPage(refreshRef)" />
-      </el-tooltip>
-    </el-pagination>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PageFooter',
-  props: {
-    page: Number, // 当前页
-    limits: Array, // 一页显示多少条选择
-    limit: Number, // 一页显示多少条
-    total: Number, // 总条数
-    refreshRef: String, // 刷新的表格ref值
-    pageSizeChangeHandle: { // 分页, 每页条数
-      type: Function,
-      default: null
-    },
-    pageCurrentChangeHandle: { // 分页, 当前页
-      type: Function,
-      default: null
-    },
-    firstPageHandle: { // 分页,首页
-      type: Function,
-      default: null
-    },
-    lastPageHandle: { // 分页,首页
-      type: Function,
-      default: null
-    },
-    refreshPage: { // 刷新表格数据
-      type: Function,
-      default: null
-    }
-  },
-  data () {
-    return {}
-  },
-  methods: {
-  }
-}
-</script>
-
-<style>
-.zero-pagination {
-  float: left
-}
-.zero-pagination>.el-pagination__jump {
-  margin-left:0px;
-  margin-right:20px
-}
-.page-refresh{
-  margin-left: 5px;
-  font-size: unset;
-  margin-top: -2px;
-}
-</style>
diff --git a/src/components/zero-container/components/zero-container-full.vue b/src/components/zero-container/components/zero-container-full.vue
index 8670f6116a91ea34fcabf0a66d04416b4ea0c1f4..5be766dc7c6efdee5b5e4eee6a60ad48df48e59d 100644
--- a/src/components/zero-container/components/zero-container-full.vue
+++ b/src/components/zero-container/components/zero-container-full.vue
@@ -24,14 +24,3 @@ export default {
   name: 'zero-container-full'
 }
 </script>
-<style>
-/* .zero-container-full__aside>.el-scrollbar .el-scrollbar__wrap {
-  overflow-x: hidden !important;
-  overflow-y: auto !important;
-  height: 100%;
-  } */
-  .el-tree>.el-tree-node{
-    display:inline-block;
-    min-width: 100%;
-  }
-</style>
diff --git a/src/layout/header-aside/components/header-user/index.vue b/src/layout/header-aside/components/header-user/index.vue
index 531a13d547657fbdefeb93adc66e04cfc59cb6d8..04c86c89fd030936aeb930c4f4603a609625233c 100644
--- a/src/layout/header-aside/components/header-user/index.vue
+++ b/src/layout/header-aside/components/header-user/index.vue
@@ -31,7 +31,7 @@ export default {
      */
     logOff () {
       const config = {
-        url: '/sysLogout',
+        url: '/sysUser/sysLogout',
         method: 'post',
         headers: {
           Authorization: util.storage.get('token')
diff --git a/src/layout/header-aside/components/tabs/index.vue b/src/layout/header-aside/components/tabs/index.vue
index e2f9f8ef1b9c89244d02dbeebb08865726f76bcf..6e6171cdf09d559daafda44d79d145538e8845d7 100644
--- a/src/layout/header-aside/components/tabs/index.vue
+++ b/src/layout/header-aside/components/tabs/index.vue
@@ -27,6 +27,9 @@
       </div>
     </div>
     <div class="zero-multiple-page-control-btn" flex-box="0">
+      <el-button  @click="handleRefresh">
+        <zero-icon name="refresh"/>
+      </el-button>
       <el-dropdown
         size="default"
         split-button
@@ -75,6 +78,7 @@ export default {
         { icon: 'times-circle', title: '关闭全部', value: 'all' }
       ],
       contextmenuList: [
+        { icon: 'refresh', title: '刷新', value: 'refresh' },
         { icon: 'arrow-left', title: '关闭左侧', value: 'left' },
         { icon: 'arrow-right', title: '关闭右侧', value: 'right' },
         { icon: 'times', title: '关闭其它', value: 'other' },
@@ -99,6 +103,14 @@ export default {
       'closeAll',
       'openedSort'
     ]),
+    /**
+     * @description 仅刷新当前router组件 不影响其他已缓存的组件
+     */
+    handleRefresh () {
+      this.$router.push({
+        name: 'refresh'
+      })
+    },
     /**
      * @description 计算某个标签页是否可关闭
      * @param {Object} page 其中一个标签页
@@ -143,6 +155,7 @@ export default {
       if (tagName) this.contextmenuFlag = false
       const params = { pageSelect: tagName }
       switch (command) {
+        case 'refresh': this.$router.push({ name: 'refresh' }); break
         case 'left': this.closeLeft(params); break
         case 'right': this.closeRight(params); break
         case 'other': this.closeOther(params); break
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 44e0d49864b9e245d1c2acced40057b4630faa62..6b6c22bb5eda1fe534184888ec173fb943526fa4 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -18,7 +18,7 @@
           <zero-icon name="bars"/>
         </div>
         <div flex-box="1">
-          <zeroHeaderClock />
+          <!-- <zeroHeaderClock /> -->
         </div>
         <!-- 顶栏右侧 -->
         <div class="zero-header-right" flex-box="0">
@@ -64,7 +64,8 @@
               <div class="zero-theme-container-main-body" flex-box="1">
                 <transition :name="transitionActive ? 'fade-transverse' : ''">
                   <keep-alive :include="keepAlive">
-                    <router-view/>
+                    <router-view :key="$route.path + $route.meta[$route.path]" />
+                    <router-view :key="routerViewKey" />
                   </keep-alive>
                 </transition>
               </div>
@@ -86,7 +87,7 @@ import zeroHeaderSize from './components/header-size'
 import zeroHeaderTheme from './components/header-theme'
 import zeroHeaderUser from './components/header-user'
 import zeroHeaderColor from './components/header-color'
-import zeroHeaderClock from './components/header-clock'
+// import zeroHeaderClock from './components/header-clock'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import mixinSearch from './mixins/search'
 import util from '@/libs/util.js'
@@ -104,8 +105,9 @@ export default {
     zeroHeaderSize,
     zeroHeaderTheme,
     zeroHeaderUser,
-    zeroHeaderColor,
-    zeroHeaderClock
+    zeroHeaderColor
+    // ,
+    // zeroHeaderClock
   },
   data () {
     return {
@@ -127,6 +129,15 @@ export default {
     ...mapGetters('zerovue', {
       themeActiveSetting: 'theme/activeSetting'
     }),
+    /**
+     * @description 用来实现带参路由的缓存
+     */
+    routerViewKey () {
+      // 默认情况下 key 类似 __transition-n-/foo
+      // 这里的字符串操作是为了最终 key 的格式和原来相同 类似 __transition-n-__stamp-time-/foo
+      const stamp = this.$route.meta[`__stamp-${this.$route.path}`] || ''
+      return `${stamp ? `__stamp-${stamp}-` : ''}${this.$route.path}`
+    },
     /**
      * @description 最外层容器的背景图片样式
      */
diff --git a/src/main.js b/src/main.js
index 9ae2256b83d3b61a641df4c0a2fbe8c5bc5f2637..a63a53512d100ba32d68ce9921508827f33407a4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,9 @@
+
+import iconPicker from 'e-icon-picker'
+import 'e-icon-picker/dist/symbol.js' // 基本彩色图标库
+import 'e-icon-picker/dist/index.css' // 基本样式，包含基本图标
+import 'font-awesome/css/font-awesome.min.css' // font-awesome 图标库
+import 'element-ui/lib/theme-chalk/icon.css' // element-ui 图标库
 // Vue
 import Vue from 'vue'
 import i18n from './i18n'
@@ -11,9 +17,6 @@ import store from '@/store/index'
 import router, { constantRoutes, createRoutesInLayout, routesOutLayout, resetRouter } from './router'
 import { request } from './api/axios'
 import { hasPermission, handleMenu, handleRouter } from './api/common'
-import iconPicker from 'e-icon-picker'
-import 'e-icon-picker/dist/index.css'// 基础样式
-import 'e-icon-picker/dist/main.css' // fontAwesome 图标库样式
 import util from '@/libs/util.js'
 import JSEncrypt from 'jsencrypt'
 import JsonViewer from 'vue-json-viewer'
@@ -23,7 +26,7 @@ import 'vxe-table/lib/index.css'
 
 Vue.use(VXETable)
 
-Vue.use(iconPicker)
+Vue.use(iconPicker, { eIcon: false })
 Vue.use(JsonViewer)
 
 // 核心插件
@@ -47,6 +50,7 @@ request({ url: '/sysUser/initFrontEndInfo', method: 'get' }).then(res => {
    * 判断是否有res，当
    */
   if (res && res.data) {
+    console.log(222)
     // [菜单] 处理菜单
     const menu = handleMenu(res.data.menuInfo)
     // [菜单] 设置侧边栏菜单
@@ -64,6 +68,8 @@ request({ url: '/sysUser/initFrontEndInfo', method: 'get' }).then(res => {
     // [ 路由 ] 重新设置多标签页池
     store.commit('zerovue/page/init', routes)
   } else {
+    // 删除
+    util.storage.removeAll()
     // [ 路由 ] 重新设置多标签页池
     store.commit('zerovue/page/init', constantRoutes)
   }
diff --git a/src/mixins/view-module.js b/src/mixins/view-module.js
index 29e71d9a90776507264f2775a22d8f3c10c731af..f62d3351dd2b1d0e3675f000ff43a00152cc612e 100644
--- a/src/mixins/view-module.js
+++ b/src/mixins/view-module.js
@@ -5,7 +5,7 @@ import qs from 'qs'
 export default {
   data () {
     return {
-    // 设置属性
+      // 设置属性
       mixinViewModuleOptions: {
         activatedIsNeed: true, // 此页面是否在激活（进入）时，调用查询数据列表接口？
         getDataListUrl: '', // 数据列表接口，API地址
@@ -13,7 +13,8 @@ export default {
         deleteUrl: '', // 删除接口，API地址
         batchDelKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
         exportUrl: '', // 导出接口，API地址
-        dictCodes: '' // 页面初始化需要加载的字典，多个字典用逗号隔开
+        dictCodes: '', // 页面初始化需要加载的字典，多个字典用逗号隔开
+        executeGetData: true // 执行获取数据接口，调用分页接口或者不分页接口
       },
       // 默认属性
       searchForm: {
@@ -23,6 +24,7 @@ export default {
       page: 1, // 当前页码
       limit: 10, // 每页数
       total: 0, // 总条数
+      layouts: ['Total', 'Sizes', 'FullJump', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump'], // 页脚分页布局
       dataListLoading: false, // 数据列表，loading状态
       dataListSelections: [], // 数据列表，多选项
       batchBtnDisabled: true, // 批量按钮禁用
@@ -40,20 +42,24 @@ export default {
     // 获取数据列表
     getDataList () {
       this.dataListLoading = true
-      this.searchForm.page = this.mixinViewModuleOptions.isPage ? this.page : null
-      this.searchForm.pageSize = this.mixinViewModuleOptions.isPage ? this.limit : null
-      const config = {
-        url: this.mixinViewModuleOptions.getDataListUrl,
-        method: 'post',
-        data: this.searchForm
-      }
-      this.$axios(config).then(res => {
-        this.dataListLoading = false
-        this.dataList = this.mixinViewModuleOptions.isPage ? res.data.data : res.data
-        this.total = this.mixinViewModuleOptions.isPage ? res.data.total : 0
-      }).catch(() => {
+      if (this.mixinViewModuleOptions.executeGetData) {
+        this.searchForm.page = this.mixinViewModuleOptions.isPage ? this.page : null
+        this.searchForm.pageSize = this.mixinViewModuleOptions.isPage ? this.limit : null
+        const config = {
+          url: this.mixinViewModuleOptions.getDataListUrl,
+          method: 'post',
+          data: this.searchForm
+        }
+        this.$axios(config).then(res => {
+          this.dataListLoading = false
+          this.dataList = this.mixinViewModuleOptions.isPage ? res.data.data : res.data
+          this.total = this.mixinViewModuleOptions.isPage ? res.data.total : 0
+        }).catch(() => {
+          this.handleDataCatch()
+        })
+      } else {
         this.handleDataCatch()
-      })
+      }
     },
     // 处理获取数据接口异常
     handleDataCatch () {
@@ -62,8 +68,8 @@ export default {
       this.dataListLoading = false
     },
     // 多选
-    dataListSelectionChangeHandle (val) {
-      this.dataListSelections = val
+    dataListCheckboxChangeHandle ({ selection }) {
+      this.dataListSelections = selection
       this.batchBtnDisabled = this.dataListSelections.length <= 0
     },
     // 排序
@@ -78,30 +84,34 @@ export default {
       }
       this.getDataList()
     },
-    // 分页, 每页条数
-    pageSizeChangeHandle (val) {
-      this.page = 1
-      this.limit = val
+    // [分页] 切换事件
+    handlePageChange ({ currentPage, pageSize }) {
+      this.page = currentPage
+      this.limit = pageSize
       this.getDataList()
     },
-    // 分页, 当前页
-    pageCurrentChangeHandle (val) {
-      this.page = val
-      this.getDataList()
-    },
-    // 分页, 首页
-    firstPageHandle (val) {
-      this.page = 1
-      this.getDataList()
-    },
-    // 分页, 尾页
-    lastPageHandle (val) {
-      this.page = Math.ceil(this.total / this.limit) // 总页数
-      this.getDataList()
-    },
-    // 批量删除和单个删除
-    deleteHandle (row, name) {
-      let data = []
+    /**
+     *
+     * 考虑的情况和逻辑实现
+     * 1.可编辑表格
+     *  1.1单个删除
+     *    1.1.1当row中主键存在时执行数据库删除
+     *    1.1.2当row中主键不存在时执行dom删除
+     *  1.2批量删除
+     *    1.2.1遍历dataListSelections对象,筛选出有主键或没主键的两个集合
+     *    1.2.2
+     *
+     *
+     * 2.不可编辑表格
+     *  2.1批量删除和单个删除
+     * @param {*} row
+     * @param {*} name
+     * @param {*} ref
+     */
+    deleteHandle (row, name, ref) {
+      // 是否存在删除dom
+      var isExistDom = false
+      const data = []
       // 判断是否有删除数据
       if (this.dataListSelections.length <= 0 && !row) {
         return this.$message({
@@ -111,12 +121,58 @@ export default {
           duration: 500
         })
       }
-      // 不是单个删除
-      if (!row) {
-        data = this.dataListSelections
+      if (row) { // 单个删除
+        if (row[this.mixinViewModuleOptions.batchDelKey]) {
+          data.push({ id: row[this.mixinViewModuleOptions.batchDelKey] })
+        } else {
+          this.$confirm('您确定要删除该数据?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            closeOnClickModal: false
+          }).then(() => {
+            this.$refs[ref].remove(row)
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            })
+          })
+          return
+        }
+      } else { // 批量删除
+        this.dataListSelections.map(e => {
+          if (e[this.mixinViewModuleOptions.batchDelKey]) {
+            data.push({ id: e[this.mixinViewModuleOptions.batchDelKey] })
+          } else {
+            isExistDom = true
+          }
+        })
+      }
+      if (isExistDom) {
+        if (data.length > 0) {
+          this.delete(data, name, ref)
+        } else {
+          this.$confirm('正在批量删除, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            closeOnClickModal: false
+          }).then(() => {
+            this.$refs[ref].removeCheckboxRow()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            })
+          })
+        }
       } else {
-        data.push({ id: row.id })
+        this.delete(data, name)
       }
+    },
+    // 调用接口删除
+    delete (data, name, ref) {
       const delMsg = name ? '正在删除 [' + name + ']  是否继续?' : '正在批量删除, 是否继续?'
       this.$confirm(delMsg, '提示', {
         confirmButtonText: '确定',
@@ -131,6 +187,9 @@ export default {
           data: data
         }
         this.$axios(config).then(res => {
+          if (ref) {
+            this.$refs[ref].removeCheckboxRow()
+          }
           this.dataListLoading = false
           this.calculationPage(this.dataListSelections.length > 0 ? this.dataListSelections.length : 1)
           this.getDataList()
@@ -164,8 +223,10 @@ export default {
       })
       window.location.href = `${window.SITE_CONFIG.apiURL}${this.mixinViewModuleOptions.exportUrl}?${params}`
     },
-    dateFormat (row, column, cellValue) {
-      return dayjs.unix(cellValue).format('YYYY-MM-DD HH:mm:ss')
+    dateFormat (row) {
+      if (row.cellValue) {
+        return dayjs.unix(row.cellValue).format('YYYY-MM-DD HH:mm:ss')
+      }
     },
     searchResetForm (tableRef) { // 重置输入框
       this.searchForm = {
@@ -174,10 +235,6 @@ export default {
       // 清空页面选择的排序按钮
       this.$refs[tableRef].clearSort()
     },
-    refreshPage (tableRef) { // 刷新表格数据
-      this.searchResetForm(tableRef)
-      this.getDataList()
-    },
     async initDict () { // 页面加载时需要初始化的字典
       if (this.mixinViewModuleOptions.dictCodes) {
         const config = {
@@ -222,8 +279,8 @@ export default {
     searchOpen (data) {
       this.searchFormShow = data
     },
-    initAddOrUpdate (ref, row, val) { // 初始化新增修改
-      this.$refs[ref].initAddOrUpdate(row, val)
+    initDialog (ref, row, val) { // 初始化弹框，第三个参数配合业务使用
+      this.$refs[ref].initDialog(row, val)
     }
   }
 }
diff --git a/src/store/modules/zerovue/modules/size.js b/src/store/modules/zerovue/modules/size.js
index 177981d125d4ad6278bc2a4b875de26a03675ae1..48bc2cc146548297f5971dafb94dae922c2e0c10 100644
--- a/src/store/modules/zerovue/modules/size.js
+++ b/src/store/modules/zerovue/modules/size.js
@@ -1,5 +1,8 @@
 import Vue from 'vue'
 import router from '@/router'
+import 'xe-utils'
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/index.css'
 
 export default {
   namespaced: true,
@@ -15,6 +18,7 @@ export default {
      */
     apply ({ state, commit }, refresh) {
       Vue.prototype.$ELEMENT.size = state.value
+      VXETable.setup({ size: state.value })
       if (refresh) {
         commit('zerovue/page/keepAliveClean', null, { root: true })
         router.replace('/refresh')
diff --git a/src/views/database/info/components/AddUpdateForm.vue b/src/views/database/info/components/AddUpdateForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5144fffbc9bf82c22f9aa98c3750fbff1ec52cf3
--- /dev/null
+++ b/src/views/database/info/components/AddUpdateForm.vue
@@ -0,0 +1,131 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="addUpdateFormVisible"
+    width="500px"
+    v-loading.fullscreen.lock="loading"
+  >
+    <el-form :model="addUpdateForm" :rules="rules" label-width="120px" ref="addUpdateFormRef">
+      <el-form-item prop="name" label="名称">
+        <el-input v-model.trim="addUpdateForm.name" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item prop="database" label="类型">
+        <el-select v-model="addUpdateForm.database" placeholder="请选择类型" style="width:100%">
+          <el-option
+            v-for="type in dictDetails.database_type"
+            :key="type.value"
+            :label="type.name"
+            :value="type.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="username" label="用户名">
+        <el-input v-model.trim="addUpdateForm.username" placeholder="请输入用户名" />
+      </el-form-item>
+      <el-form-item prop="password" label="密码">
+        <el-input v-model.trim="addUpdateForm.password" placeholder="请输入密码" show-password />
+      </el-form-item>
+      <el-form-item prop="ipPort" label="IP和端口">
+        <el-input v-model.trim="addUpdateForm.ipPort" placeholder="请输入IP和端口" />
+      </el-form-item>
+      <el-form-item label="其他参数">
+        <el-input type="textarea" :rows="2" v-model.trim="addUpdateForm.otherParams" placeholder="请输入其他参数" />
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input type="textarea" v-model="addUpdateForm.remarks" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-if="btnExist" @click="addUpdateFormVisible = false">取 消</el-button>
+      <el-button v-if="btnExist" type="primary" @click="addOrupdate()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'AddUpdateForm',
+  props: {
+    dictDetails: Object,
+    addUrl: String,
+    updateUrl: String,
+    getDataList: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      btnExist: true, // 按钮是否存在
+      updateExist: true, // 修改时，是否存在的输入框
+      addUpdateFormVisible: false, // 是否显示弹框
+      title: '', // 弹框标题
+      addUpdateForm: {},
+      initFrom: {
+        state: 1,
+        type: '0'
+      },
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        database: [{ required: true, message: '请选类型', trigger: 'blur' }],
+        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        ipPort: [{ required: true, message: '请输入IP和端口', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    initDialog (row) {
+      // 新增或修改
+      this.addUpdateFormVisible = true
+      this.addUpdateFormReset()
+      if (row) {
+        this.updateExist = false
+        row.database += '' // 转成字符串,不然select控件不支持回显
+        this.title = '修改数据库配置'
+        this.addUpdateForm = JSON.parse(JSON.stringify(row))
+      } else {
+        this.updateExist = true
+        this.title = '新增数据库配置'
+      }
+    },
+    addOrupdate () {
+      // 添加或修改
+      this.$refs.addUpdateFormRef.validate(valid => {
+        if (valid) {
+          var oldAddUpdateForm = JSON.parse(JSON.stringify(this.addUpdateForm))
+          oldAddUpdateForm.password = this.$getRsaCode(oldAddUpdateForm.password)
+          this.loading = true
+          this.btnExist = false
+          const config = {
+            url: oldAddUpdateForm.id ? this.updateUrl : this.addUrl,
+            method: 'post',
+            data: oldAddUpdateForm
+          }
+          this.$axios(config)
+            .then(res => {
+              this.loading = false
+              this.addUpdateFormVisible = false
+              this.btnExist = true
+              this.getDataList()
+              this.$message.success(res.msg)
+            })
+            .catch(() => {
+              this.loading = false
+              this.btnExist = true
+            })
+        }
+      })
+    },
+    addUpdateFormReset () {
+      // 重置表单 需要转成字符串赋值，不然这两个对象的值会一直相等
+      this.addUpdateForm = JSON.parse(JSON.stringify(this.initFrom))
+      // 重置表单
+      this.$nextTick(() => {
+        this.$refs.addUpdateFormRef.clearValidate()
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/database/info/components/GeneratorCodeFrom.vue b/src/views/database/info/components/GeneratorCodeFrom.vue
new file mode 100644
index 0000000000000000000000000000000000000000..553629c404c910beeee7f7f3c1b3332ce7e05929
--- /dev/null
+++ b/src/views/database/info/components/GeneratorCodeFrom.vue
@@ -0,0 +1,285 @@
+<!-- 代码生成弹框 -->
+<template>
+  <el-dialog
+    title="代码生成"
+    :visible.sync="fromVisible"
+    width="1000px"
+    v-loading.fullscreen.lock="loading"
+  >
+    <el-form :model="from" :rules="rules" label-width="120px" ref="fromRef">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item prop="databaseInfoId" label="数据源">
+            <el-select
+              v-model="from.databaseInfoId"
+              filterable
+              clearable
+              placeholder="请选择数据源"
+              style="width: 100%"
+              @change="databaseChange"
+            >
+              <el-option
+                v-for="item in dataBases"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="catalog" label="数据库名">
+            <el-select
+              v-model="from.catalog"
+              filterable
+              clearable
+              placeholder="请选择数据库名"
+              style="width: 100%"
+              @change="catalogChange"
+            >
+              <el-option
+                v-for="item in catalogs"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="tableNames" label="表名称">
+            <el-select
+              v-model="from.tableNames"
+              filterable
+              clearable
+              multiple
+              placeholder="请选择表名称"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in tableNames"
+                :key="item.tableName"
+                :label="item.tableName"
+                :value="item.tableName"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item prop="baseEntity" label="实体基类">
+            <el-select
+              v-model="from.baseEntity"
+              placeholder="请选择实体基类"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="type in dictDetails.entity_base"
+                :key="type.value"
+                :label="type.name"
+                :value="type.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="author" label="作者">
+            <el-input v-model.trim="from.author" placeholder="请输入作者" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="packagePath" label="包路径">
+            <el-input
+              v-model.trim="from.packagePath"
+              placeholder="请输入包路径"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="忽略的表前缀">
+            <el-input
+              v-model.trim="from.tablePrefix"
+              placeholder="请输入忽略的表前缀"
+            />
+          </el-form-item>
+        </el-col>
+        <span v-if="development">
+          <el-col :span="8">
+            <el-form-item label="是否下载">
+              <el-radio-group
+                v-model="from.isDownload"
+                @change="isDownloadChange"
+              >
+                <el-radio-button
+                  v-for="state in dictDetails.whether"
+                  :label="state.value"
+                  :key="state.value"
+                  >{{ state.name }}</el-radio-button
+                >
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="existBasicPath" :span="8">
+            <el-form-item prop="basicPath" label="文件路径">
+              <el-input
+                v-model.trim="from.basicPath"
+                placeholder="请输入文件路径"
+              />
+            </el-form-item>
+          </el-col>
+        </span>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-if="btnExist" @click="fromVisible = false">
+        取 消
+      </el-button>
+      <el-button v-if="btnExist" type="primary" @click="generatorCode()">
+        确 定
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'GeneratorCodeFrom',
+  props: {
+    dictDetails: Object,
+    generatorCodeUrl: String
+  },
+  data () {
+    return {
+      loading: false,
+      btnExist: true, // 按钮是否存在
+      fromVisible: false, // 是否显示弹框
+      from: { isDownload: '1' },
+      dataBases: [], // 数据源
+      catalogs: [], // 数据库
+      tableNames: [], // 表
+      databaseInfoId: '', // 选中后的数据源值
+      existBasicPath: false, // 是否存在文件路径  -- 当下载的时候不需要文件路径，非下载的时候必填
+      development: false, // 是否开发环境
+      rules: {
+        databaseInfoId: [{ required: true, message: '请选择数据源', trigger: 'change' }],
+        catalog: [{ required: true, message: '请选择数据库', trigger: 'change' }],
+        tableNames: [{ required: true, message: '请选择表名', trigger: 'change' }],
+        baseEntity: [{ required: true, message: '请选实体基类', trigger: 'change' }],
+        author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
+        packagePath: [{ required: true, message: '请输入包路径', trigger: 'blur' }],
+        basicPath: [{ required: true, message: '请输入文件路径', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    initDialog () {
+      this.development = process.env.NODE_ENV === 'development'
+      this.initDatabase()
+      this.fromVisible = true
+      this.fromReset()
+    },
+    initDatabase () {
+      // 数据源初始化
+      this.$axios({ url: '/databaseInfo/select', method: 'get' }).then(res => {
+        this.dataBases = res.data
+      })
+    },
+    databaseChange (data) {
+      if (data) {
+        this.loading = true
+        const config = {
+          url: '/databaseInfo/getCatalogs',
+          method: 'get',
+          params: { databaseInfoId: data }
+        }
+        this.$axios(config).then(res => {
+          this.catalogs = res.data
+          this.loading = false
+        }).catch(() => {
+          this.from.databaseInfoId = ''
+          this.loading = false
+        })
+        this.databaseInfoId = data
+      }
+    },
+    catalogChange (data) {
+      if (data) {
+        this.loading = true
+        const config = {
+          url: '/databaseInfo/getTableInfoByCatalog',
+          method: 'get',
+          params: { databaseInfoId: this.databaseInfoId, catalog: data }
+        }
+        this.$axios(config).then(res => {
+          this.tableNames = res.data
+          this.loading = false
+        }).catch(() => {
+          this.from.catalog = ''
+          this.loading = false
+        })
+      }
+    },
+    isDownloadChange (data) {
+      this.existBasicPath = !(this.from.isDownload === '1')
+    },
+    generatorCode () {
+      // 添加或修改
+      this.$refs.fromRef.validate(valid => {
+        if (valid) {
+          var oldFrom = JSON.parse(JSON.stringify(this.from))
+          // 处理特殊的
+          oldFrom.tableNames = this.from.tableNames.join(',')
+          oldFrom.isDownload = this.from.isDownload === '1'
+          this.loading = true
+          this.btnExist = false
+          const config = {
+            url: this.generatorCodeUrl,
+            method: 'post',
+            data: oldFrom
+          }
+          if (oldFrom.isDownload) {
+            config.responseType = 'blob'
+          }
+          this.$axios(config)
+            .then(res => {
+              if (oldFrom.isDownload) {
+                // 这里res.data是返回的blob对象
+                const blob = new Blob([res], {
+                  type: 'application/zip;charset=UTF-8'
+                })
+                const downloadElement = document.createElement('a')
+                const href = window.URL.createObjectURL(blob) // 创建下载的链接
+                downloadElement.href = href
+                downloadElement.download = 'generator.zip' // 下载后文件名
+                document.body.appendChild(downloadElement)
+                downloadElement.click() // 点击下载
+                document.body.removeChild(downloadElement) // 下载完成移除元素
+                window.URL.revokeObjectURL(href) // 释放掉blob对象
+              }
+
+              this.loading = false
+              this.btnExist = true
+              this.fromVisible = false
+              this.$message.success('操作成功')
+            })
+            .catch(() => {
+              this.loading = false
+              this.btnExist = true
+            })
+        }
+      })
+    },
+    fromReset () {
+      this.from = { isDownload: '1' }
+      // 重置表单
+      this.$nextTick(() => {
+        this.$refs.fromRef.clearValidate()
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/database/info/index.vue b/src/views/database/info/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f6c02c3e11d339c12cd39ec5385b35022b06679
--- /dev/null
+++ b/src/views/database/info/index.vue
@@ -0,0 +1,119 @@
+/* 数据库管理页面 */
+<template>
+  <zero-container>
+    <!-- 右边信息-start -->
+    <div slot="main" style="height: 100%">
+      <vxe-grid
+        border
+        resizable
+        ref="xGrid"
+        id="xGrid"
+        height="auto"
+        :loading="dataListLoading"
+        :columns="tableColumn"
+        :toolbar="{
+          zoom: true,
+          custom: true,
+          slots: { buttons: 'toolbar_buttons' },
+        }"
+        :data="dataList"
+        :custom-config="{ storage: true }"
+        @current-change="dataListCheckboxChangeHandle"
+        @checkbox-all="dataListCheckboxChangeHandle"
+      >
+        <template v-slot:toolbar_buttons>
+          <el-button type="primary" @click="initDialog('addUpdateDialogRef')">
+            新增
+          </el-button>
+          <el-button type="primary" @click="initDialog('generatorCodeFromRef')">
+            代码生成
+          </el-button>
+          <el-button
+            type="danger"
+            @click="deleteHandle()"
+            :disabled="batchBtnDisabled"
+          >
+            批量删除
+          </el-button>
+        </template>
+        <!--自定义插槽 state-->
+        <template v-slot:state_default="{ row }">
+          <el-switch
+            v-model="row.state"
+            :active-value="1"
+            :inactive-value="0"
+            @change="changeState(row)"
+          />
+        </template>
+        <template v-slot:operate="{ row }">
+          <el-button
+            icon="fa fa-edit"
+            title="修改"
+            circle
+            @click="initDialog('addUpdateDialogRef', row)"
+          />
+          <el-button
+            icon="fa fa-trash"
+            title="删除"
+            circle
+            @click="deleteHandle(row, row.name)"
+          />
+        </template>
+      </vxe-grid>
+      <!-- 新增修改弹框 -->
+      <AddUpdateForm
+        ref="addUpdateDialogRef"
+        :dict-details="dictDetails"
+        :addUrl="addUrl"
+        :updateUrl="updateUrl"
+        :getDataList="getDataList"
+      />
+      <!-- 代码生成弹框 -->
+      <GeneratorCodeFrom
+        ref="generatorCodeFromRef"
+        :dict-details="dictDetails"
+        :generatorCodeUrl="generatorCodeUrl"
+      />
+    </div>
+    <!-- 右边信息-end -->
+  </zero-container>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module' // 分页相关js
+import AddUpdateForm from './components/AddUpdateForm' // 添加修改模块
+import GeneratorCodeFrom from './components/GeneratorCodeFrom' // 添加修改模块
+export default {
+  name: 'DatabaseInfo',
+  mixins: [mixinViewModule],
+  components: {
+    AddUpdateForm,
+    GeneratorCodeFrom
+  },
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        isPage: false, // 不分页
+        getDataListUrl: 'databaseInfo/list',
+        deleteUrl: 'databaseInfo/del',
+        exportUrl: 'databaseInfo/export',
+        dictCodes: 'database_type,entity_base,whether'
+      },
+      addUrl: 'databaseInfo/add',
+      updateUrl: 'databaseInfo/update',
+      generatorCodeUrl: 'databaseInfo/generatorCode',
+      // 列信息
+      tableColumn: [
+        { type: 'checkbox', width: 50 },
+        { field: 'name', title: '名称' },
+        { field: 'database', title: '类型', width: 110 },
+        { field: 'username', title: '用户名', width: 70 },
+        { field: 'ipPort', title: 'IP和端口' },
+        { field: 'otherParams', title: '其他参数' },
+        { field: 'createTime', title: '创建时间', formatter: this.dateFormat },
+        { title: '操作', width: 200, slots: { default: 'operate' } }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/views/druid/index.vue b/src/views/druid/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af333b62ed33344ad0d421a9dc5c35f3d727eab2
--- /dev/null
+++ b/src/views/druid/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <zero-container>
+    <template slot="main">
+      <iframe :src="src" width="100%" height="100%" frameborder="0"></iframe>
+    </template>
+  </zero-container>
+</template>
+
+<script>
+export default {
+  name: 'Druid',
+  data () {
+    return {
+      src: process.env.VUE_APP_API + '/druid/sql.html'
+    }
+  }
+}
+</script>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 930efed411833e8dabbe014fc654a815a817e10d..82ec7e68533f68447a547c0bba065e44a2cb589f 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,22 +1,21 @@
 <template>
   <zero-container>
-    <template slot="header">Page 1 header</template>
-    <template slot="aside">
-      树形菜单位置
-    </template>
     <template slot="main">
-      表格
+      <e-icon-picker
+        v-model="icon"
+        :options="{ FontAwesome: true, ElementUI: true }"
+      />
     </template>
-    <template slot="footer">分页位置</template>
   </zero-container>
 </template>
 
 <script>
 export default {
   name: 'Index',
-  components: {
-  },
-  created () {
+  data () {
+    return {
+      icon: ''
+    }
   }
 }
 </script>
diff --git a/src/views/swagger/index.vue b/src/views/swagger/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d4e35b487026a4668e4b2da34ee23fb16ab658b3
--- /dev/null
+++ b/src/views/swagger/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <zero-container>
+    <template slot="main">
+      <iframe :src="src" width="100%" height="100%" frameborder="0"></iframe>
+    </template>
+  </zero-container>
+</template>
+
+<script>
+export default {
+  name: 'Swagger',
+  data () {
+    return {
+      src: process.env.VUE_APP_API + '/doc.html'
+    }
+  }
+}
+</script>
diff --git a/src/views/sys/dict/components/TreeSide.vue b/src/views/sys/dict/components/TreeSide.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b7377c709c1d0fd12190f5d70216ecf7449ae53
--- /dev/null
+++ b/src/views/sys/dict/components/TreeSide.vue
@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable>
+    </el-input>
+    <el-tree
+      v-loading="loading"
+      ref="tree"
+      class="zero-tree"
+      :data="data"
+      node-key="label"
+      :highlight-current="true"
+      :props="{ label: 'name' }"
+      :filter-node-method="filterNode"
+      @node-click="nodeClick"
+    >
+      <span
+        class="custom-tree-node"
+        slot-scope="{ node, data }"
+        @mouseover="mouseover(data)"
+        @mouseleave="mouseout(data)"
+      >
+        <span>{{ node.label }}</span>
+        <div v-show="data.dropdownShow" @click.stop="() => {}">
+          <el-dropdown placement="right-start" trigger="click">
+            <i class="el-icon-s-operation"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                icon="el-icon-circle-plus"
+                @click.native="initVxeModel('vxeModelRef')"
+              >
+                新增字典
+              </el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-edit-outline"
+                @click.native="initVxeModel('vxeModelRef', data)"
+              >
+                修改字典
+              </el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-delete-solid"
+                @click.native="delTree(data)"
+              >
+                删除字典
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </span>
+    </el-tree>
+    <TreeSideForm
+      ref="vxeModelRef"
+      @nodeClick="nodeClick"
+      :initTreeData="initTreeData"
+    />
+  </div>
+</template>
+
+<script>
+import TreeSideForm from './TreeSideForm' // 添加修改模块
+export default {
+  name: 'TreeSide',
+  props: {
+    dataListLoadingFun: {
+      type: Function,
+      default: null
+    }
+  },
+  components: {
+    TreeSideForm
+  },
+  data () {
+    return {
+      data: [],
+      filterText: '',
+      loading: false
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created () {
+    this.initTreeData()
+  },
+  methods: {
+    initTreeData () {
+      this.$axios({
+        method: 'post',
+        url: '/sysDict/list'
+      }).then(res => {
+        this.data = res.data
+      })
+    },
+    mouseover (data) { // 鼠标移入
+      this.$set(data, 'dropdownShow', true)
+    },
+    mouseout (data) { // 鼠标移除
+      this.$set(data, 'dropdownShow', false)
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    initVxeModel (ref, data) {
+      this.$refs[ref].initVxeModel(data)
+    },
+    delTree (data) {
+      this.loading = true
+      this.$emit('dataListLoadingFun', true)
+      this.$axios({
+        method: 'post',
+        url: '/sysDict/del',
+        data: [{ id: data.id }]
+      }).then(res => {
+        this.loading = false
+        this.$emit('dataListLoadingFun', false)
+        this.nodeClick()
+        this.initTreeData()
+        this.$message.success(res.msg)
+      })
+    },
+    nodeClick (data) {
+      if (data) {
+        this.$emit('sysDictFun', data.code)
+      } else {
+        this.$emit('sysDictFun')
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/sys/dict/components/TreeSideForm.vue b/src/views/sys/dict/components/TreeSideForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b9fc701f33daa7758df5304f5f1cabbb517f1a61
--- /dev/null
+++ b/src/views/sys/dict/components/TreeSideForm.vue
@@ -0,0 +1,122 @@
+<template>
+  <vxe-modal
+    v-model="addUpdateFormVisible"
+    resize
+    :title="title"
+    :escClosable="true"
+  >
+    <template v-slot>
+      <vxe-form
+        ref="addUpdateFormRef"
+        title-align="right"
+        title-width="80"
+        :data="addUpdateForm"
+        :rules="rules"
+        :loading="loading"
+        @submit="submitEvent"
+      >
+        <vxe-form-item title="名称" field="name" span="24">
+          <vxe-input
+            v-model="addUpdateForm.name"
+            placeholder="请输入名称"
+            clearable
+          ></vxe-input>
+        </vxe-form-item>
+        <vxe-form-item title="编码" field="code" span="24">
+          <vxe-input
+            v-model="addUpdateForm.code"
+            placeholder="请输入编码"
+            clearable
+          ></vxe-input>
+        </vxe-form-item>
+        <vxe-form-item title="备注" span="24">
+          <vxe-textarea
+            v-model="addUpdateForm.remarks"
+            clearable
+          ></vxe-textarea>
+        </vxe-form-item>
+        <vxe-form-item align="center" span="24">
+          <template v-slot>
+            <vxe-button v-if="btnExist" @click="addUpdateFormVisible = false">
+              取消
+            </vxe-button>
+            <vxe-button v-if="btnExist" type="submit" status="primary">
+              确定
+            </vxe-button>
+          </template>
+        </vxe-form-item>
+      </vxe-form>
+    </template>
+  </vxe-modal>
+</template>
+
+<script>
+
+export default {
+  name: 'TreeSideForm',
+  props: {
+    initTreeData: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      btnExist: true,
+      addUpdateFormVisible: false, // 是否显示弹框
+      title: '', // 弹框标题
+      addUpdateForm: {},
+      initFrom: {},
+      rules: {
+        name: [
+          { required: true, message: '请输入名称' }
+        ],
+        code: [
+          { required: true, message: '请输入编码' }
+        ]
+      }
+    }
+  },
+  methods: {
+    initVxeModel (row) {
+      this.addUpdateFormVisible = true
+      this.resetVxeModel()
+      if (row) {
+        this.title = '修改角色'
+        this.addUpdateForm = JSON.parse(JSON.stringify(row))
+      } else {
+        this.title = '新增角色'
+      }
+    },
+    submitEvent () {
+      this.loading = true
+      this.btnExist = false
+      const config = {
+        url: this.addUpdateForm.id ? '/sysDict/update' : '/sysDict/add',
+        method: 'post',
+        data: this.addUpdateForm
+      }
+      this.$axios(config).then(res => {
+        this.$emit('nodeClick')
+        this.loading = false
+        this.addUpdateFormVisible = false
+        this.btnExist = true
+        this.initTreeData()
+        this.$message.success(res.msg)
+      })
+        .catch(() => {
+          this.loading = false
+          this.btnExist = true
+        })
+    },
+    // 重置
+    resetVxeModel () {
+      this.addUpdateForm = {}
+      this.$nextTick(() => {
+        this.$refs.addUpdateFormRef.clearValidate()
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/sys/dict/index.vue b/src/views/sys/dict/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..952e7b233c0323f9688097f426eb990644f1043e
--- /dev/null
+++ b/src/views/sys/dict/index.vue
@@ -0,0 +1,174 @@
+/* 系统字典页面 */
+<template>
+  <zero-container>
+    <!-- 左边信息-start -->
+    <div slot="aside">
+      <TreeSide @sysDictFun="sysDictFun" @dataListLoadingFun="dataListLoadingFun" />
+    </div>
+    <!-- 左边信息-end -->
+    <!-- 右边信息-start -->
+    <div slot="main" style="height: 100%">
+      <vxe-grid
+        border
+        resizable
+        keep-source
+        ref="xGrid"
+        id="xGrid"
+        height="auto"
+        :loading="dataListLoading"
+        :columns="tableColumn"
+        :toolbar="{
+          zoom: true,
+          custom: true,
+          slots: { buttons: 'toolbar_buttons' },
+        }"
+        :edit-config="{
+          trigger: 'manual',
+          mode: 'row',
+          showStatus: true,
+          icon: 'fa fa-file-text-o',
+        }"
+        :edit-rules="validRules"
+        :data="dataList"
+        :custom-config="{ storage: true }"
+        @checkbox-change="dataListCheckboxChangeHandle"
+        @checkbox-all="dataListCheckboxChangeHandle"
+      >
+        <template v-slot:toolbar_buttons>
+          <el-button
+            :disabled="addBtnDisabled"
+            type="primary"
+            @click="insertEvent()"
+          >
+            新增
+          </el-button>
+          <el-button
+            type="danger"
+            @click="deleteHandle(null, null, 'xGrid')"
+            :disabled="batchBtnDisabled"
+          >
+            批量删除
+          </el-button>
+        </template>
+        <template v-slot:operate="{ row }">
+          <template v-if="$refs.xGrid.isActiveByRow(row)">
+            <vxe-button
+              icon="fa fa-save"
+              status="primary"
+              title="保存"
+              circle
+              @click="saveRowEvent(row)"
+            ></vxe-button>
+          </template>
+          <template v-else>
+            <vxe-button
+              icon="fa fa-edit"
+              title="编辑"
+              circle
+              @click="editRowEvent(row)"
+            ></vxe-button>
+          </template>
+          <vxe-button
+            icon="fa fa-trash"
+            title="删除"
+            circle
+            @click="deleteHandle(row, row.name, 'xGrid')"
+          ></vxe-button>
+        </template>
+      </vxe-grid>
+    </div>
+    <!-- 右边信息-end -->
+  </zero-container>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module' // 分页相关js
+import TreeSide from './components/TreeSide' // 左边树
+export default {
+  name: 'DatabaseInfo',
+  mixins: [mixinViewModule],
+  components: {
+    TreeSide
+  },
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        isPage: false, // 不分页
+        getDataListUrl: '/sysDictDetails/list',
+        deleteUrl: '/sysDictDetails/del',
+        exportUrl: '/sysDictDetails/export',
+        executeGetData: false
+      },
+      addUrl: '/sysDictDetails/add',
+      updateUrl: '/sysDictDetails/update',
+      addBtnDisabled: true,
+      // 列信息
+      tableColumn: [
+        { type: 'checkbox', width: 50 },
+        { field: 'dictCode', title: '字典编码', width: 120 },
+        { field: 'name', title: '名称', width: 100, editRender: { name: 'input' } },
+        { field: 'sort', title: '排序', width: 80, editRender: { name: 'input' } },
+        { field: 'value', title: '值', width: 100, editRender: { name: 'input' } },
+        { field: 'createTime', title: '创建时间', width: 150, formatter: this.dateFormat },
+        { field: 'remarks', title: '备注', editRender: { name: 'input' } },
+        { title: '操作', width: 110, slots: { default: 'operate' } }
+      ],
+      validRules: {
+        name: [
+          { required: true, message: '请输入名称' }
+        ],
+        sort: [
+          { required: true, message: '请输入排序' }
+        ],
+        value: [
+          { required: true, message: '请输入值' }
+        ]
+      }
+    }
+  },
+  methods: {
+    dataListLoadingFun (val) {
+      this.dataListLoading = val
+    },
+    sysDictFun (code) {
+      if (code) {
+        this.addBtnDisabled = false
+        this.mixinViewModuleOptions.executeGetData = true
+        this.searchForm.dictCode = code
+        this.getDataList()
+      } else {
+        this.dataList = []
+      }
+    },
+    editRowEvent (row) {
+      this.$refs.xGrid.setActiveRow(row)
+    },
+    async insertEvent () {
+      const { row: newRow } = await this.$refs.xGrid.insertAt({ dictCode: this.searchForm.dictCode }, null)
+      await this.$refs.xGrid.setActiveCell(newRow, 'name')
+    },
+    async saveRowEvent (row) {
+      const errMap = await this.$refs.xGrid.validate().catch(errMap => errMap)
+      if (!errMap) {
+        this.$refs.xGrid.clearActived().then(() => {
+          this.dataListLoading = true
+          const config = {
+            url: row.id ? this.updateUrl : this.addUrl,
+            method: 'post',
+            data: row
+          }
+          this.$axios(config)
+            .then(res => {
+              this.dataListLoading = false
+              this.getDataList()
+              this.$message.success(res.msg)
+            })
+            .catch(() => {
+              this.dataListLoading = false
+            })
+        })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/sys/function/refresh/index.js b/src/views/sys/function/refresh/index.js
index e8b35034fd3460b61b8d90e1c79828c054e89bda..4f0a0bd61448149b515087229c52081b882dad45 100644
--- a/src/views/sys/function/refresh/index.js
+++ b/src/views/sys/function/refresh/index.js
@@ -1,6 +1,8 @@
 export default {
   beforeRouteEnter (to, from, next) {
-    next(instance => instance.$router.replace(from.fullPath))
+    from.meta[from.path] = Date.now()
+    from.meta[`__stamp-${from.path}`] = Date.now()
+    next(instance => instance.$router.replace({ path: from.fullPath, meta: from.meta }))
   },
   render: h => h()
 }
diff --git a/src/views/sys/log/index.vue b/src/views/sys/log/index.vue
index 42d602314c2d2e0eb5311eee21b7bf43bc7d16f5..5aa7a136bbd33b280ef750130971646cccb92fb6 100644
--- a/src/views/sys/log/index.vue
+++ b/src/views/sys/log/index.vue
@@ -1,130 +1,46 @@
 <template>
   <zero-container>
-    <!-- 头部信息-start -->
-    <div slot="header">
-      <SearchHearder @searchOpen="searchOpen" />
-      <el-collapse-transition>
-        <el-form
-          v-show="searchFormShow"
-          :inline="true"
-          :model="searchForm"
-          class="zero-search-from"
-        >
-          <el-form-item label="标题">
-            <el-input v-model="searchForm.title" placeholder="请输入标题" clearable />
-          </el-form-item>
-          <el-form-item label="操作">
-            <el-input v-model="searchForm.operation" placeholder="请输入操作" clearable />
-          </el-form-item>
-          <el-form-item label="用户名">
-            <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
-          </el-form-item>
-          <el-form-item label="内容信息">
-            <el-input v-model="searchForm.data" placeholder="请输入内容信息" clearable />
-          </el-form-item>
-          <el-form-item label="ip地址">
-            <el-input v-model="searchForm.ip" placeholder="请输入ip地址" clearable />
-          </el-form-item>
-          <el-form-item label="等级">
-            <el-input v-model="searchForm.level" placeholder="请选择等级" clearable />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" @click="getDataList()">搜索</el-button>
-            <el-button icon="el-icon-refresh" @click="searchResetForm('tableRef')">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-collapse-transition>
-    </div>
-    <!-- 头部信息-end -->
     <!-- 右边信息-start -->
-    <div slot="main" style="height:100%">
-      <el-table
-        ref="tableRef"
-        height="100%"
-        v-loading="dataListLoading"
-        :data="dataList"
+    <div slot="main" style="height: 100%">
+      <vxe-grid
         border
-        @selection-change="dataListSelectionChangeHandle"
-        @sort-change="dataListSortChangeHandle"
-        class="zero-table"
-        style="width: 100%"
+        resizable
+        ref="xGrid"
+        id="xGrid"
+        height="auto"
+        :loading="dataListLoading"
+        :columns="tableColumn"
+        :toolbar="{
+          zoom: true,
+          custom: true,
+        }"
+        :data="dataList"
+        :custom-config="{ storage: true }"
+        :row-class-name="tableRowClassName"
       >
-        <el-table-column type="selection" header-align="center" align="center" width="50" />
-        <el-table-column
-          prop="title"
-          label="标题"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="operation"
-          label="操作"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="username"
-          label="用户名称"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="level"
-          label="等级"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="mode"
-          label="请求方式"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="ip"
-          label="IP地址"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="path"
-          label="接口路径"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="createTime"
-          label="创建时间"
-          header-align="center"
-          align="center"
-          width="180"
-          :formatter="dateFormat"
-        />
-        <el-table-column label="操作" header-align="center" align="center" fixed="right" width="150">
-          <template slot-scope="scope">
-            <el-button
-              type="text"
-              @click="viewDetails(scope.row)"
-            >查看详情</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Drawer ref="drawerRef"/>
+        <template v-slot:operate="{ row }">
+          <el-button
+            icon="el-icon-search"
+            title="查看详情"
+            circle
+            @click="viewDetails(row)"
+          />
+        </template>
+      </vxe-grid>
+      <!-- 详情框 -->
+      <Drawer ref="drawerRef" />
     </div>
     <!-- 右边信息-end -->
     <!-- 页脚-start -->
     <div slot="footer">
-      <PageFooter
-      :limits="[10, 20, 50, 100]"
-      :page="page"
-      :limit="limit"
-      :total="total"
-      :pageSizeChangeHandle="pageSizeChangeHandle"
-      :pageCurrentChangeHandle="pageCurrentChangeHandle"
-      :firstPageHandle="firstPageHandle"
-      :lastPageHandle="lastPageHandle"
-      :refreshPage="refreshPage"
-      refreshRef ="tableRef"
+      <vxe-pager
+        border
+        align="left"
+        :current-page="page"
+        :page-size="limit"
+        :total="total"
+        :layouts="layouts"
+        @page-change="handlePageChange"
       />
     </div>
     <!-- 页脚-end -->
@@ -133,28 +49,53 @@
 
 <script>
 import mixinViewModule from '@/mixins/view-module' // 分页相关js
-import SearchHearder from '@/components/search-hearder/SearchHearder' // 头部查询模块
-import PageFooter from '@/components/page-footer/PageFooter' // 分页模块
 import Drawer from './components/Drawer' // 分页模块
 export default {
   name: 'SysLog',
   mixins: [mixinViewModule],
   components: {
-    SearchHearder,
-    PageFooter,
     Drawer
   },
   data () {
     return {
       mixinViewModuleOptions: {
         getDataListUrl: '/sysLog/pageList'
-      }
+      },
+      // 列信息
+      tableColumn: [
+        { field: 'title', title: '标题', width: 120 },
+        { field: 'operation', title: '操作', width: 70 },
+        { field: 'username', title: '用户名称', width: 80 },
+        { field: 'level', title: '等级', width: 70 },
+        { field: 'mode', title: '请求方式', width: 80 },
+        { field: 'ip', title: 'IP地址', width: 120 },
+        { field: 'path', title: '接口路径' },
+        { field: 'createTime', title: '创建时间', formatter: this.dateFormat },
+        { title: '操作', width: 65, slots: { default: 'operate' } }
+      ]
     }
   },
   methods: {
+    tableRowClassName ({ row, rowIndex }) {
+      if (row.level === 'WARNING') {
+        return 'warning-row'
+      } else if (row.level === 'ERROR') {
+        return 'error-row'
+      }
+      return ''
+    },
     viewDetails (row) {
       this.$refs.drawerRef.initDrawer(row)
     }
   }
 }
 </script>
+<style >
+.vxe-body--row.error-row {
+  background: oldlace;
+}
+
+.vxe-body--row.warning-row {
+  background: #f0f9eb;
+}
+</style>
diff --git a/src/views/sys/login/index.vue b/src/views/sys/login/index.vue
index 038bdf58fbdb794ba3fd20d51053e426a6bf9f8c..32c30c0a8f5584975376eb85d32599fc4fa4cee2 100644
--- a/src/views/sys/login/index.vue
+++ b/src/views/sys/login/index.vue
@@ -1,3 +1,4 @@
+/* 系统登录页面 */
 <template>
   <div class="page-login">
     <div class="page-login--layer page-login--layer-area">
@@ -8,7 +9,8 @@
     <div class="page-login--layer">
       <div
         class="page-login--content"
-        flex="dir:top main:justify cross:stretch box:justify">
+        flex="dir:top main:justify cross:stretch box:justify"
+      >
         <div class="page-login--content-header">
           <p class="page-login--content-header-motto">
             时间是一切财富中最宝贵的财富
@@ -16,9 +18,13 @@
         </div>
         <div
           class="page-login--content-main"
-          flex="dir:top main:center cross:center">
+          flex="dir:top main:center cross:center"
+        >
           <!-- logo -->
-          <img class="page-login--logo" src="@/assets/images/login/logo@2x.png">
+          <img
+            class="page-login--logo"
+            src="@/assets/images/login/logo@2x.png"
+          />
           <!-- form -->
           <div class="page-login--form">
             <el-card shadow="never">
@@ -27,12 +33,14 @@
                 label-position="top"
                 :rules="rules"
                 :model="formLogin"
-                size="default">
+                size="default"
+              >
                 <el-form-item prop="username">
                   <el-input
                     type="text"
                     v-model="formLogin.username"
-                    placeholder="用户名">
+                    placeholder="用户名"
+                  >
                     <i slot="prepend" class="fa fa-user-circle-o"></i>
                   </el-input>
                 </el-form-item>
@@ -40,7 +48,8 @@
                   <el-input
                     type="password"
                     v-model="formLogin.password"
-                    placeholder="密码">
+                    placeholder="密码"
+                  >
                     <i slot="prepend" class="fa fa-keyboard-o"></i>
                   </el-input>
                 </el-form-item>
@@ -48,9 +57,14 @@
                   <el-input
                     type="text"
                     v-model="formLogin.code"
-                    placeholder="验证码">
+                    placeholder="验证码"
+                  >
                     <template slot="append">
-                      <img class="login-code" src="@/assets/images/login/login-code.png">
+                      <img
+                        :src="imgCode"
+                        class="login-code"
+                        @click="refreshCode"
+                      />
                     </template>
                   </el-input>
                 </el-form-item>
@@ -59,15 +73,14 @@
                   size="default"
                   @click="submit"
                   type="primary"
-                  class="button-login">
+                  class="button-login"
+                >
                   登录
                 </el-button>
               </el-form>
             </el-card>
-            <p
-              class="page-login--options"
-              flex="main:justify cross:center">
-              <span><zero-icon name="question-circle"/> 忘记密码</span>
+            <p class="page-login--options" flex="main:justify cross:center">
+              <span><zero-icon name="question-circle" /> 忘记密码</span>
               <span>注册用户</span>
             </p>
           </div>
@@ -77,17 +90,16 @@
             <a
               v-for="language in $languages"
               :key="language.value"
-              @click="onChangeLocale(language.value)">
+              @click="onChangeLocale(language.value)"
+            >
               {{ language.label }}
             </a>
           </p>
           <p class="page-login--content-footer-copyright">
             Copyright
-            <zero-icon name="copyright"/>
+            <zero-icon name="copyright" />
             2020 zero 出品
-            <a href="https://gitee.com/zero-wsh">
-              @zero-wsh
-            </a>
+            <a href="https://gitee.com/zero-wsh"> @zero-wsh </a>
           </p>
           <p class="page-login--content-footer-options">
             <a href="#">帮助</a>
@@ -113,11 +125,13 @@ export default {
   data () {
     return {
       loading: false,
+      imgCode: '',
+      redisKey: '',
       // 表单
       formLogin: {
         username: 'zero',
         password: 'zero',
-        code: 'v9am'
+        code: ''
       },
       // 表单校验
       rules: {
@@ -138,18 +152,26 @@ export default {
         code: [
           {
             required: true,
-            message: '请输入验证码',
-            trigger: 'blur'
+            message: '请输入验证码'
           }
         ]
       }
     }
   },
-  mounted () {
-  },
-  beforeDestroy () {
+  created () {
+    this.refreshCode()
   },
   methods: {
+    refreshCode () {
+      const config = {
+        url: '/sysUser/captcha',
+        method: 'get'
+      }
+      this.$axios(config).then((res) => {
+        this.imgCode = res.data.image
+        this.redisKey = res.data.redisKey
+      })
+    },
     /**
      * @description 接收选择一个用户快速登录的事件
      * @param {Object} user 用户信息
@@ -168,14 +190,14 @@ export default {
         if (valid) {
           this.loading = true
           // 登录
-          // 注意 这里的演示没有传验证码
-          // 具体需要传递的数据请自行修改代码
           const config = {
-            url: '/sysLogin',
+            url: '/sysUser/sysLogin',
             method: 'post',
             data: {
-              username: this.$getRsaCode(this.formLogin.username),
-              password: this.$getRsaCode(this.formLogin.password)
+              name: this.$getRsaCode(this.formLogin.username),
+              password: this.$getRsaCode(this.formLogin.password),
+              verCode: this.formLogin.code,
+              redisKey: this.redisKey
             }
           }
           this.$axios(config).then((res) => {
@@ -198,11 +220,9 @@ export default {
             this.$router.replace(this.$route.query.redirect || '/')
             this.loading = false
           }).catch(() => {
+            this.refreshCode()
             this.loading = false
           })
-        } else {
-          // 登录表单校验失败
-          this.$message.error('表单校验失败，请检查')
         }
       })
     },
@@ -225,7 +245,7 @@ export default {
 <style lang="scss">
 .page-login {
   @extend %unable-select;
-  $backgroundColor: #F0F2F5;
+  $backgroundColor: #f0f2f5;
   // ---
   background-color: $backgroundColor;
   height: 100%;
@@ -332,7 +352,7 @@ export default {
       color: $color-text-normal;
       a {
         color: $color-text-normal;
-        margin: 0 .5em;
+        margin: 0 0.5em;
         &:hover {
           color: $color-text-main;
         }
@@ -378,16 +398,16 @@ export default {
       list-style: none;
       width: 20px;
       height: 20px;
-      background: #FFF;
+      background: #fff;
       animation: animate 25s linear infinite;
       bottom: -200px;
       @keyframes animate {
-        0%{
+        0% {
           transform: translateY(0) rotate(0deg);
           opacity: 1;
           border-radius: 0;
         }
-        100%{
+        100% {
           transform: translateY(-1000px) rotate(720deg);
           opacity: 0;
           border-radius: 50%;
diff --git a/src/views/sys/power/components/AddUpdateForm.vue b/src/views/sys/power/components/AddUpdateForm.vue
index 4881e01822c96c0284f982b26298f80167ac21ec..53885b2ab0739f2e7da02a5df9dea33e529c53c3 100644
--- a/src/views/sys/power/components/AddUpdateForm.vue
+++ b/src/views/sys/power/components/AddUpdateForm.vue
@@ -21,7 +21,7 @@
           v-model="addUpdateForm.type"
           placeholder="请选择类型"
           @change="getParentSelect"
-          style="width:100%"
+          style="width: 100%"
         >
           <el-option
             v-for="type in dictDetails.sys_power_type"
@@ -37,49 +37,60 @@
           ref="parentRef"
           v-model="addUpdateForm.parentId"
           :options="parentOptions"
-          :props="{ value: 'id',label: 'name',checkStrictly: true }"
+          :props="{ value: 'id', label: 'name', checkStrictly: true }"
           :show-all-levels="false"
           clearable
           filterable
-          style="width:100%"
+          style="width: 100%"
         />
       </el-form-item>
       <el-form-item v-if="iconExist" label="图标">
-        <e-icon-picker v-model="addUpdateForm.icon" placeholder="请选择图标" />
+        <e-icon-picker
+          v-model="addUpdateForm.icon"
+          :options="{ FontAwesome: true, ElementUI: true }"
+        />
       </el-form-item>
       <el-form-item label="排序">
         <el-input-number
           v-model="addUpdateForm.sort"
           controls-position="right"
           :min="0"
-          style="width:100%"
+          style="width: 100%"
         />
       </el-form-item>
       <el-form-item v-if="urlExist" prop="url" label="接口地址">
-        <el-input v-model.trim="addUpdateForm.url" placeholder="请输入接口地址" />
+        <el-input
+          v-model.trim="addUpdateForm.url"
+          placeholder="请输入接口地址"
+        />
       </el-form-item>
       <el-form-item v-if="pathExist" prop="path" label="资源路径">
-        <el-input v-model.trim="addUpdateForm.path" placeholder="请输入资源路径" />
+        <el-input
+          v-model.trim="addUpdateForm.path"
+          placeholder="请输入资源路径"
+        />
       </el-form-item>
       <el-form-item v-if="pathExist" prop="cache" label="是否缓存">
         <el-radio-group v-model="addUpdateForm.cache">
-          <el-radio-button
-            label="true"
-            key="true"
-          >是</el-radio-button>
-          <el-radio-button
-            label="false"
-            key="false"
-          >否</el-radio-button>
+          <el-radio-button label="true" key="true">是</el-radio-button>
+          <el-radio-button label="false" key="false">否</el-radio-button>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="备注">
-        <el-input type="textarea" v-model="addUpdateForm.remarks" placeholder="请输入备注" />
+        <el-input
+          type="textarea"
+          v-model="addUpdateForm.remarks"
+          placeholder="请输入备注"
+        />
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button v-if="btnExist" @click="addUpdateFormVisible = false">取 消</el-button>
-      <el-button v-if="btnExist" type="primary" @click="addOrupdate()">确 定</el-button>
+      <el-button v-if="btnExist" @click="addUpdateFormVisible = false"
+        >取 消</el-button
+      >
+      <el-button v-if="btnExist" type="primary" @click="addOrupdate()"
+        >确 定</el-button
+      >
     </div>
   </el-dialog>
 </template>
@@ -121,7 +132,6 @@ export default {
       }
     }
   },
-  created () {},
   methods: {
     getParentSelect (type) {
       switch (type) {
@@ -159,11 +169,11 @@ export default {
       }
       delete this.addUpdateForm.parentId
       delete this.addUpdateForm.parentIds
-      this.$axios(config).then(res => {
+      this.$axios(config).then((res) => {
         this.parentOptions = res.data
       })
     },
-    initAddOrUpdate (row, copy) {
+    initDialog (row, copy) {
       // 新增或修改
       this.addUpdateFormVisible = true
       this.addUpdateFormReset()
@@ -187,15 +197,19 @@ export default {
     },
     addOrupdate () {
       // 添加或修改
-      this.$refs.addUpdateFormRef.validate(valid => {
+      this.$refs.addUpdateFormRef.validate((valid) => {
         if (valid) {
-          if (this.addUpdateForm.parentId) { // 判断是否存在
+          if (this.addUpdateForm.parentId) {
+            // 判断是否存在
             if (Array.isArray(this.addUpdateForm.parentId)) {
-              if (this.addUpdateForm.parentId.length === 0) { // 当为空数组时的处理
+              if (this.addUpdateForm.parentId.length === 0) {
+                // 当为空数组时的处理
                 delete this.addUpdateForm.parentId
                 delete this.addUpdateForm.parentIds
               } else {
-                this.addUpdateForm.parentIds = this.addUpdateForm.parentId.join(',')
+                this.addUpdateForm.parentIds = this.addUpdateForm.parentId.join(
+                  ','
+                )
                 if (this.$refs.parentRef.getCheckedNodes()[0]) {
                   this.addUpdateForm.parentId = this.$refs.parentRef.getCheckedNodes()[0].value
                 } else {
@@ -212,7 +226,7 @@ export default {
             data: this.addUpdateForm
           }
           this.$axios(config)
-            .then(res => {
+            .then((res) => {
               this.loading = false
               this.addUpdateFormVisible = false
               this.btnExist = true
diff --git a/src/views/sys/power/index.vue b/src/views/sys/power/index.vue
index 796d886d8441b5d32ea6c5f69b1facd5e4608f46..be13dd470ce4e705a846ea43d51514e1128be5d4 100644
--- a/src/views/sys/power/index.vue
+++ b/src/views/sys/power/index.vue
@@ -1,112 +1,79 @@
+/* 系统权限页面 */
 <template>
   <zero-container>
-    <!-- 头部信息-start -->
-    <div slot="header">
-      <el-button icon="el-icon-refresh" @click="refreshPage('tableRef')">刷新</el-button>
-      <el-button type="primary" @click="initAddOrUpdate('addUpdateDialogRef')">新增</el-button>
-    </div>
-    <!-- 头部信息-end -->
     <!-- 右边信息-start -->
-    <div slot="main" style="height:100%">
-      <el-table
-        ref="tableRef"
-        height="100%"
-        row-key="id"
-        v-loading="dataListLoading"
-        :data="dataList"
+    <div slot="main" style="height: 100%">
+      <vxe-grid
         border
-        class="zero-table"
-        style="width: 100%"
-        :tree-props="{children: 'children'}"
-        @row-dblclick="rowDblclick"
+        resizable
+        ref="xGrid"
+        id="xGrid"
+        height="auto"
+        :tree-config="{ children: 'children' }"
+        :loading="dataListLoading"
+        :columns="tableColumn"
+        :toolbar="{
+          zoom: true,
+          custom: true,
+          slots: { buttons: 'toolbar_buttons' },
+        }"
+        :data="dataList"
+        :custom-config="{ storage: true }"
+        @checkbox-change="dataListCheckboxChangeHandle"
+        @checkbox-all="dataListCheckboxChangeHandle"
       >
-        <el-table-column
-          prop="name"
-          label="名称"
-          header-align="center"
-          align="center"
-          width="200"
-        />
-        <el-table-column
-          prop="path"
-          label="资源路径"
-          header-align="center"
-          align="center">
-          <template slot-scope="scope">
-            <span v-if="!scope.row.cache">{{ scope.row.path }}</span>
-            <el-tooltip
-              v-else
-              :hide-after="1000"
-              content="缓存页面"
-              placement="top"
-              class="page-refresh"
-            >
-              <span style="color: red">{{ scope.row.path }}</span>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="url"
-          label="接口地址"
-          header-align="center"
-          align="center"
-          width="200"
-        />
-        <el-table-column
-          prop="sort"
-          label="排序"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="icon"
-          label="图标"
-          header-align="center"
-          align="center"
-        >
-         <template slot-scope="scope">
-           <i :class="scope.row.icon"></i>
-          </template>
-        </el-table-column>
-        <!-- 字典特殊处理 -->
-        <el-table-column
-          prop="type"
-          label="类型"
-          header-align="center"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <el-tag
-              :type="scope.row.type == 0  ? 'success' : scope.row.type == 1 ? 'info' : 'danger'"
-              disable-transitions>{{dictDetailsHandle(scope.row.type, 'sys_power_type')}}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="createTime"
-          label="创建时间"
-          header-align="center"
-          align="center"
-          width="180"
-          :formatter="dateFormat"
-        />
-        <el-table-column prop="remarks" label="备注" header-align="center" align="center" />
-        <el-table-column label="操作" header-align="center" align="center" fixed="right" width="150">
-          <template slot-scope="scope">
-            <el-button
-              type="text"
-              @click="initAddOrUpdate('addUpdateDialogRef',scope.row,true)"
-            >复制</el-button>
-            <el-button
-              type="text"
-              @click="initAddOrUpdate('addUpdateDialogRef',scope.row)"
-            >修改</el-button>
-            <el-button
-              type="text"
-              @click="deleteHandle(scope.row,scope.row.name)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+        <template v-slot:toolbar_buttons>
+          <el-button type="primary" @click="initDialog('addUpdateDialogRef')">
+            新增
+          </el-button>
+        </template>
+        <!--自定义插槽-->
+        <template v-slot:path_default="{ row }">
+          <span v-if="!row.cache">{{ row.path }}</span>
+          <el-tooltip
+            v-else
+            :hide-after="1000"
+            content="缓存页面"
+            placement="top"
+            class="page-refresh"
+          >
+            <span style="color: red">{{ row.path }}</span>
+          </el-tooltip>
+        </template>
+        <template v-slot:icon_default="{ row }">
+          <i :class="row.icon"></i>
+        </template>
+        <template v-slot:type_default="{ row }">
+          <el-tag
+            :type="
+              row.type == 0 ? 'success' : row.type == 1 ? 'info' : 'danger'
+            "
+            disable-transitions
+          >
+            {{ dictDetailsHandle(row.type, 'sys_power_type') }}
+          </el-tag>
+        </template>
+        <template v-slot:operate="{ row }">
+          <el-button
+            icon="el-icon-document-copy"
+            title="复制"
+            circle
+            @click="initDialog('addUpdateDialogRef', row, true)"
+          />
+          <el-button
+            icon="fa fa-edit"
+            title="修改"
+            circle
+            @click="initDialog('addUpdateDialogRef', row)"
+          />
+          <el-button
+            icon="fa fa-trash"
+            title="删除"
+            circle
+            @click="deleteHandle(row, row.name)"
+          />
+        </template>
+      </vxe-grid>
       <!-- 新增修改弹框 -->
       <AddUpdateForm
         ref="addUpdateDialogRef"
@@ -135,7 +102,19 @@ export default {
         deleteUrl: '/sysPower/del',
         exportUrl: '/sysPower/export',
         dictCodes: 'sys_power_type,state'
-      }
+      },
+      // 列信息
+      tableColumn: [
+        { field: 'name', title: '名称', width: 150, treeNode: true },
+        { field: 'path', title: '资源路径', slots: { default: 'path_default' } },
+        { field: 'url', title: '接口地址' },
+        { field: 'sort', title: '排序', width: 30 },
+        { field: 'icon', title: '图标', width: 35, slots: { default: 'icon_default' } },
+        { field: 'type', title: '类型', width: 70, slots: { default: 'type_default' } },
+        { field: 'createTime', title: '创建时间', width: 150, formatter: this.dateFormat },
+        { field: 'remarks', title: '备注' },
+        { title: '操作', width: 200, slots: { default: 'operate' } }
+      ]
     }
   },
   methods: {
diff --git a/src/views/sys/role/components/AddUpdateForm.vue b/src/views/sys/role/components/AddUpdateForm.vue
index f94e0f17a0508d984852935c1f7d205c306cfa42..0eb4208aa50dd0e80dcc09f4f9f9548d91b5d5e8 100644
--- a/src/views/sys/role/components/AddUpdateForm.vue
+++ b/src/views/sys/role/components/AddUpdateForm.vue
@@ -13,7 +13,10 @@
       ref="addUpdateFormRef"
     >
       <el-form-item prop="name" label="角色名称">
-        <el-input v-model.trim="addUpdateForm.name" placeholder="请输入角色名称" />
+        <el-input
+          v-model.trim="addUpdateForm.name"
+          placeholder="请输入角色名称"
+        />
       </el-form-item>
       <el-form-item prop="state" label="角色状态">
         <el-radio-group v-model="addUpdateForm.state">
@@ -21,20 +24,31 @@
             v-for="state in dictDetails.state"
             :label="state.value"
             :key="state.value"
-          >{{state.name}}</el-radio-button>
+            >{{ state.name }}</el-radio-button
+          >
         </el-radio-group>
       </el-form-item>
       <el-form-item label="备注">
-        <el-input type="textarea" v-model="addUpdateForm.remarks" placeholder="请输入备注" />
+        <el-input
+          type="textarea"
+          v-model="addUpdateForm.remarks"
+          placeholder="请输入备注"
+        />
       </el-form-item>
       <el-row :gutter="20">
-        <el-col :span="6" style="text-align:right">权限</el-col>
-        <el-col :span="18"><PowerTree ref= "treeRef" :powerArray="powerArray"/></el-col>
+        <el-col :span="6" style="text-align: right">权限</el-col>
+        <el-col :span="18">
+          <PowerTree ref="treeRef" :powerArray="powerArray" />
+        </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button v-if="btnExist" @click="addUpdateFormVisible = false">取 消</el-button>
-      <el-button v-if="btnExist" type="primary" @click="addOrupdate()">确 定</el-button>
+      <el-button v-if="btnExist" @click="addUpdateFormVisible = false"
+        >取 消</el-button
+      >
+      <el-button v-if="btnExist" type="primary" @click="addOrupdate()"
+        >确 定</el-button
+      >
     </div>
   </el-dialog>
 </template>
@@ -73,18 +87,30 @@ export default {
       }
     }
   },
-  created () {},
+  created () { },
   methods: {
-    initAddOrUpdate (row) {
-      // 新增或修改
-      this.addUpdateFormVisible = true
-      this.addUpdateFormReset()
+    initDialog (row) {
       if (row) {
-        this.updateExist = false
-        this.title = '修改角色'
-        this.addUpdateForm = JSON.parse(JSON.stringify(row))
-        this.powerArray = row.powers.map(power => power.id)
+        const config = {
+          url: '/sysPower/getPowerIdsByRoleId',
+          method: 'get',
+          params: {
+            roleId: row.id
+          }
+        }
+        this.$axios(config)
+          .then(res => {
+            this.addUpdateFormVisible = true
+            this.addUpdateFormReset()
+            this.updateExist = false
+            this.title = '修改角色'
+            this.addUpdateForm = JSON.parse(JSON.stringify(row))
+            this.powerArray = res.data
+          })
       } else {
+        this.addUpdateFormVisible = true
+        this.addUpdateFormReset()
+        this.powerArray = []
         this.updateExist = true
         this.title = '新增角色'
       }
@@ -95,6 +121,7 @@ export default {
         if (valid) {
           this.loading = true
           this.btnExist = false
+          console.log(this.$refs.treeRef.getCheckedKeys())
           // 处理权限
           this.addUpdateForm.powers = this.$refs.treeRef.getCheckedKeys().map(it => {
             return { id: it }
diff --git a/src/views/sys/role/components/PowerTree.vue b/src/views/sys/role/components/PowerTree.vue
index bd31e8f8f1a4bb1cebf21da7030af59809851dc8..ccf22b7e12e68d29510da75c57c9d337a31933e5 100644
--- a/src/views/sys/role/components/PowerTree.vue
+++ b/src/views/sys/role/components/PowerTree.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div v-loading="treeLoading">
     <el-input placeholder="输入关键字进行过滤" v-model="filterText" />
-    <el-tree ref="treeRef"
-      v-loading="treeLoading"
+    <el-tree
+      ref="treeRef"
       class="tree"
       show-checkbox
       default-expand-all
@@ -11,11 +11,11 @@
       :data="data"
       :props="{
         children: 'children',
-        label: 'name'
+        label: 'name',
       }"
       :check-strictly="checkStrictly"
       :filter-node-method="filterNode"
-     />
+    />
   </div>
 </template>
 
@@ -78,12 +78,3 @@ export default {
   }
 }
 </script>
-<style>
-.tree {
-  overflow-y: auto;
-  min-height: 180px;
-  max-height: 300px;
-  border: 1px solid #e4e7ed;
-  border-top: 0px;
-}
-</style>
diff --git a/src/views/sys/role/index.vue b/src/views/sys/role/index.vue
index b7390cc76335e943525eb9855a7aea1fc9f707d5..da9bcd05438e155d280c5102be32c6819d7b6b72 100644
--- a/src/views/sys/role/index.vue
+++ b/src/views/sys/role/index.vue
@@ -1,100 +1,65 @@
+/* 系统角色页面 */
 <template>
   <zero-container>
     <!-- 头部信息-start -->
-    <div slot="header">
-      <SearchHearder @searchOpen="searchOpen" />
-      <!-- <div style="float:right"> -->
-      <el-button type="primary" @click="initAddOrUpdate('addUpdateDialogRef')">新增</el-button>
-      <el-button  type="danger" @click="deleteHandle()" :disabled="batchBtnDisabled">批量删除</el-button>
-      <!-- </div> -->
-      <el-collapse-transition>
-        <el-form
-          v-show="searchFormShow"
-          :inline="true"
-          :model="searchForm"
-          class="zero-search-from"
-        >
-          <el-form-item label="角色名称">
-            <el-input v-model="searchForm.name" placeholder="请输入角色名称" clearable />
-          </el-form-item>
-          <el-form-item>
-            <el-button  type="primary" icon="el-icon-search" @click="getDataList()">搜索</el-button>
-            <el-button  icon="el-icon-refresh" @click="searchResetForm('tableRef')">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-collapse-transition>
-    </div>
-    <!-- 头部信息-end -->
     <!-- 右边信息-start -->
-    <div slot="main" style="height:100%">
-      <el-table
-        ref="tableRef"
-        height="100%"
-        v-loading="dataListLoading"
-        :data="dataList"
+    <div slot="main" style="height: 100%">
+      <vxe-grid
         border
-        @selection-change="dataListSelectionChangeHandle"
-        @sort-change="dataListSortChangeHandle"
-        class="zero-table"
-        style="width: 100%"
+        resizable
+        ref="xGrid"
+        id="xGrid"
+        height="auto"
+        :loading="dataListLoading"
+        :columns="tableColumn"
+        :toolbar="{
+          zoom: true,
+          custom: true,
+          slots: { buttons: 'toolbar_buttons' },
+        }"
+        :data="dataList"
+        :custom-config="{ storage: true }"
+        @checkbox-change="dataListCheckboxChangeHandle"
+        @checkbox-all="dataListCheckboxChangeHandle"
       >
-        <el-table-column type="selection" header-align="center" align="center" width="50" />
-        <el-table-column
-          prop="name"
-          label="角色名称"
-          sortable="custom"
-          header-align="center"
-          align="center"
-        />
-        <!-- 状态特殊处理 -->
-        <el-table-column
-          prop="state"
-          label="角色状态"
-          sortable="custom"
-          header-align="center"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <el-switch
-              v-model="scope.row.state"
-              :active-value="1"
-              :inactive-value="0"
-              @change="changeState(scope.row)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="createTime"
-          label="创建时间"
-          sortable="custom"
-          header-align="center"
-          align="center"
-          width="180"
-          :formatter="dateFormat"
-        />
-        <el-table-column
-          prop="updateTime"
-          label="修改时间"
-          sortable="custom"
-          header-align="center"
-          align="center"
-          width="180"
-          :formatter="dateFormat"
-        />
-        <el-table-column prop="remarks" label="备注" header-align="center" align="center" />
-        <el-table-column label="操作" header-align="center" align="center" fixed="right" width="150">
-          <template slot-scope="scope">
-            <el-button
-              type="text"
-              @click="initAddOrUpdate('addUpdateDialogRef',scope.row)"
-            >修改</el-button>
-            <el-button
-              type="text"
-              @click="deleteHandle(scope.row,scope.row.username)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+        <template v-slot:toolbar_buttons>
+          <el-button type="primary" @click="initDialog('addUpdateDialogRef')">
+            新增
+          </el-button>
+          <el-button
+            type="danger"
+            @click="deleteHandle()"
+            :disabled="batchBtnDisabled"
+          >
+            批量删除
+          </el-button>
+        </template>
+        <!--自定义插槽 state-->
+        <template v-slot:state_default="{ row }">
+          <vxe-switch
+            v-model="row.state"
+            on-label="启用"
+            :on-value="1"
+            off-label="禁用"
+            :off-value="0"
+            @change="changeState(row)"
+          />
+        </template>
+        <template v-slot:operate="{ row }">
+          <el-button
+            icon="fa fa-edit"
+            title="修改"
+            circle
+            @click="initDialog('addUpdateDialogRef', row)"
+          />
+          <el-button
+            icon="fa fa-trash"
+            title="删除"
+            circle
+            @click="deleteHandle(row, row.name)"
+          />
+        </template>
+      </vxe-grid>
       <!-- 新增修改弹框 -->
       <AddUpdateForm
         ref="addUpdateDialogRef"
@@ -105,17 +70,14 @@
     <!-- 右边信息-end -->
     <!-- 页脚-start -->
     <div slot="footer">
-      <PageFooter
-      :limits="[10, 20, 50, 100]"
-      :page="page"
-      :limit="limit"
-      :total="total"
-      :pageSizeChangeHandle="pageSizeChangeHandle"
-      :pageCurrentChangeHandle="pageCurrentChangeHandle"
-      :firstPageHandle="firstPageHandle"
-      :lastPageHandle="lastPageHandle"
-      :refreshPage="refreshPage"
-      refreshRef ="tableRef"
+      <vxe-pager
+        border
+        align="left"
+        :current-page="page"
+        :page-size="limit"
+        :total="total"
+        :layouts="layouts"
+        @page-change="handlePageChange"
       />
     </div>
     <!-- 页脚-end -->
@@ -124,15 +86,11 @@
 
 <script>
 import mixinViewModule from '@/mixins/view-module' // 分页相关js
-import SearchHearder from '@/components/search-hearder/SearchHearder' // 头部查询模块
-import PageFooter from '@/components/page-footer/PageFooter' // 分页模块
 import AddUpdateForm from './components/AddUpdateForm' // 添加修改模块
 export default {
   name: 'SysRole',
   mixins: [mixinViewModule],
   components: {
-    SearchHearder,
-    PageFooter,
     AddUpdateForm
   },
   data () {
@@ -142,7 +100,17 @@ export default {
         deleteUrl: '/sysRole/del',
         exportUrl: '/sysRole/export',
         dictCodes: 'state'
-      }
+      },
+      // 列信息
+      tableColumn: [
+        { type: 'checkbox', width: 50 },
+        { field: 'name', title: '角色名称' },
+        { field: 'state', title: '角色状态', slots: { default: 'state_default' } },
+        { field: 'remarks', title: '备注' },
+        { field: 'createTime', title: '创建时间', formatter: this.dateFormat },
+        { field: 'updateTime', title: '修改时间', formatter: this.dateFormat },
+        { title: '操作', width: 200, slots: { default: 'operate' } }
+      ]
     }
   },
   methods: {
diff --git a/src/views/sys/user/components/AddUpdateForm.vue b/src/views/sys/user/components/AddUpdateForm.vue
index f680a8187c5ecb1851f595523df16e074d024213..46b8dd8a684d863098fb8ea39fe8903f362a93cd 100644
--- a/src/views/sys/user/components/AddUpdateForm.vue
+++ b/src/views/sys/user/components/AddUpdateForm.vue
@@ -12,8 +12,8 @@
       size="medium"
       ref="addUpdateFormRef"
     >
-      <el-form-item prop="username" label="用户账号">
-        <el-input v-model.trim="addUpdateForm.username" placeholder="请输入用户账号" />
+      <el-form-item prop="name" label="用户账号">
+        <el-input v-model.trim="addUpdateForm.name" placeholder="请输入用户账号" />
       </el-form-item>
       <el-form-item v-if="updateExist" prop="password" label="用户密码">
         <el-input v-model.trim="addUpdateForm.password" placeholder="请输入用户密码" show-password />
@@ -22,10 +22,17 @@
         <el-input v-model.trim="addUpdateForm.mobile" placeholder="请输入手机号" />
       </el-form-item>
       <el-form-item label="昵称">
-        <el-input v-model.trim="addUpdateForm.name" placeholder="请输入昵称" />
+        <el-input v-model.trim="addUpdateForm.nickName" placeholder="请输入昵称" />
       </el-form-item>
       <el-form-item label="用户角色">
-        <el-select v-model="modelRoles" filterable clearable multiple placeholder="请选择角色" style="width:100%">
+        <el-select
+          v-model="modelRoles"
+          filterable
+          clearable
+          multiple
+          placeholder="请选择角色"
+          style="width:100%"
+        >
           <el-option
             v-for="item in roles"
             :key="item.id"
@@ -88,7 +95,7 @@ export default {
       modelRoles: [],
       roles: [],
       rules: {
-        username: [
+        name: [
           { required: true, message: '请输入用户账号', trigger: 'blur' }
         ],
         password: [
@@ -101,7 +108,6 @@ export default {
     }
   },
   created () {
-    this.initRoles()
   },
   methods: {
     initRoles () {
@@ -110,7 +116,8 @@ export default {
         this.roles = res.data
       })
     },
-    initAddOrUpdate (row) {
+    initDialog (row) {
+      this.initRoles()
       // 新增或修改
       this.addUpdateFormVisible = true
       this.addUpdateFormReset()
@@ -131,15 +138,19 @@ export default {
       // 添加或修改
       this.$refs.addUpdateFormRef.validate(valid => {
         if (valid) {
+          var oldAddUpdateForm = JSON.parse(JSON.stringify(this.addUpdateForm))
+          if (!oldAddUpdateForm.id) {
+            oldAddUpdateForm.password = this.$getRsaCode(oldAddUpdateForm.password)
+          }
           this.loading = true
           this.btnExist = false
-          this.addUpdateForm.roles = this.modelRoles.map(it => {
+          oldAddUpdateForm.roles = this.modelRoles.map(it => {
             return { id: it }
           })
           const config = {
-            url: this.addUpdateForm.id ? this.updateUrl : this.addUrl,
+            url: oldAddUpdateForm.id ? this.updateUrl : this.addUrl,
             method: 'post',
-            data: this.addUpdateForm
+            data: oldAddUpdateForm
           }
           this.$axios(config)
             .then(res => {
diff --git a/src/views/sys/user/components/DemoTreeSide.vue b/src/views/sys/user/components/DemoTreeSide.vue
index 4385b194b4319c27d8c68560740ec764c06a7040..99f968a84c8503e813c63d1fe8d796d13e9e3fec 100644
--- a/src/views/sys/user/components/DemoTreeSide.vue
+++ b/src/views/sys/user/components/DemoTreeSide.vue
@@ -64,14 +64,3 @@ export default {
   }
 }
 </script>
-<style>
-  .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 10px;
-    height:100%;
-  }
-</style>
diff --git a/src/views/sys/user/components/ResetPasswordForm.vue b/src/views/sys/user/components/ResetPasswordForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d84f709fb9db88d68abbaf8d65faa0417d458d20
--- /dev/null
+++ b/src/views/sys/user/components/ResetPasswordForm.vue
@@ -0,0 +1,76 @@
+<template>
+  <el-dialog
+    title="重置密码"
+    :visible.sync="resetPasswordFormVisible"
+    width="500px"
+    v-loading.fullscreen.lock="loading"
+  >
+    <el-form
+      :model="resetPasswordForm"
+      :rules="rules"
+      label-width="120px"
+      size="medium"
+      ref="resetPasswordFormRef"
+    >
+      <el-form-item prop="newPassword" label="密码">
+        <el-input v-model.trim="resetPasswordForm.newPassword" placeholder="请输入密码" show-password/>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="resetPasswordFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="resetPassword()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ResetPasswordForm',
+  props: {
+    id: String
+  },
+  data () {
+    return {
+      loading: false,
+      resetPasswordFormVisible: false, // 是否显示弹框
+      resetPasswordForm: {},
+      rules: {
+        newPassword: [
+          { required: true, message: '请输入密码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    initDialog (row) {
+      this.resetPasswordForm = {}
+      this.resetPasswordFormVisible = true
+      this.resetPasswordForm.userId = row.id
+    },
+    resetPassword () {
+      this.$refs.resetPasswordFormRef.validate(valid => {
+        if (valid) {
+          this.loading = true
+          const config = {
+            url: '/sysUser/resetPassword',
+            method: 'get',
+            params: {
+              userId: this.resetPasswordForm.userId,
+              newPassword: this.$getRsaCode(this.resetPasswordForm.newPassword)
+            }
+          }
+          this.$axios(config)
+            .then(res => {
+              this.loading = false
+              this.resetPasswordFormVisible = false
+              this.$message.success(res.msg)
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/sys/user/index.vue b/src/views/sys/user/index.vue
index 105f433e6217ff66d30f9174470f0242c4f65273..a1c54cb608501d75f47eba4030f171d02545ff3e 100644
--- a/src/views/sys/user/index.vue
+++ b/src/views/sys/user/index.vue
@@ -1,142 +1,83 @@
+/* 系统用户页面 */
 <template>
   <zero-container>
-    <!-- 头部信息-start -->
-    <div slot="header">
-      <SearchHearder @searchOpen="searchOpen" />
-      <!-- <div style="float:right"> -->
-      <el-button v-if="$hasPermission(addUrl)" type="primary" @click="initAddOrUpdate('addUpdateDialogRef')">新增</el-button>
-      <el-button v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)" type="danger" @click="deleteHandle()" :disabled="batchBtnDisabled">批量删除</el-button>
-      <!-- </div> -->
-      <el-collapse-transition>
-        <el-form
-          v-show="searchFormShow"
-          :inline="true"
-          :model="searchForm"
-          class="zero-search-from"
-        >
-          <el-form-item label="用户账号">
-            <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" @click="getDataList()">搜索</el-button>
-            <el-button icon="el-icon-refresh" @click="searchResetForm('tableRef')">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-collapse-transition>
-    </div>
-    <!-- 头部信息-end -->
-    <!-- 左边信息-start -->
-    <div slot="aside">
-      树
-      <DemoTreeSide />
-    </div>
-    <!-- 左边信息-end -->
     <!-- 右边信息-start -->
-    <div slot="main" style="height:100%">
-      <el-table
-        ref="tableRef"
-        height="100%"
-        v-loading="dataListLoading"
-        :data="dataList"
+    <div slot="main" style="height: 100%">
+      <vxe-grid
         border
-        @selection-change="dataListSelectionChangeHandle"
-        @sort-change="dataListSortChangeHandle"
-        class="zero-table"
-        style="width: 100%"
+        resizable
+        ref="xGrid"
+        id="xGrid"
+        height="auto"
+        :loading="dataListLoading"
+        :columns="tableColumn"
+        :toolbar="{
+          zoom: true,
+          custom: true,
+          slots: { buttons: 'toolbar_buttons' },
+        }"
+        :data="dataList"
+        :custom-config="{ storage: true }"
+        @checkbox-change="dataListCheckboxChangeHandle"
+        @checkbox-all="dataListCheckboxChangeHandle"
       >
-        <el-table-column type="selection" header-align="center" align="center" width="50" />
-        <el-table-column
-          prop="name"
-          label="昵称"
-          sortable="custom"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="username"
-          label="用户账号"
-          sortable="custom"
-          header-align="center"
-          align="center"
-        />
-        <el-table-column
-          prop="mobile"
-          label="手机号码"
-          sortable="custom"
-          header-align="center"
-          align="center"
-        />
-        <!-- 字典特殊处理 -->
-        <el-table-column
-          prop="type"
-          label="用户类型"
-          sortable="custom"
-          header-align="center"
-          align="center"
-          :formatter="(row, column, cellValue) => dictDetailsHandle(cellValue, 'sys_user_type')"
-        />
-        <el-table-column prop="roleList" label="角色列表">
-          <template slot-scope="scope">
-            <span v-for="item in scope.row.roles" :key="item.id">
-              <span v-if="item.state === 1">[{{ item.name }}]&nbsp;</span>
-              <el-tooltip
-                v-else
-                :hide-after="1000"
-                content="该角色已经被禁用"
-                placement="top"
-                class="page-refresh"
+        <template v-slot:toolbar_buttons>
+          <el-button type="primary" @click="initDialog('addUpdateDialogRef')">
+            新增
+          </el-button>
+          <el-button
+            type="danger"
+            @click="deleteHandle()"
+            :disabled="batchBtnDisabled"
+          >
+            批量删除
+          </el-button>
+        </template>
+        <!--自定义插槽 state-->
+        <template v-slot:state_default="{ row }">
+          <vxe-switch
+            v-model="row.state"
+            on-label="启用"
+            :on-value="1"
+            off-label="禁用"
+            :off-value="0"
+            @change="changeState(row)"
+          />
+        </template>
+        <!--自定义插槽 state-->
+        <template v-slot:role_default="{ row }">
+          <span v-for="item in row.roles" :key="item.id">
+            <span v-if="item.state === 1">[{{ item.name }}]&nbsp;</span>
+            <el-tooltip
+              v-else
+              :hide-after="1000"
+              content="该角色已经被禁用"
+              placement="top"
+              class="page-refresh"
+            >
+              <span
+                style="color: rgb(204, 204, 204); text-decoration: line-through"
               >
-                <span
-                  style="color: rgb(204, 204, 204);text-decoration:line-through"
-                >[{{ item.name }}]&nbsp;</span>
-              </el-tooltip>
-            </span>
-          </template>
-        </el-table-column>
-        <!-- 状态特殊处理 -->
-        <el-table-column
-          prop="state"
-          label="用户状态"
-          sortable="custom"
-          header-align="center"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <el-switch
-              v-model="scope.row.state"
-              :active-value="1"
-              :inactive-value="0"
-              @change="changeState(scope.row)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="createTime"
-          label="创建时间"
-          sortable="custom"
-          header-align="center"
-          align="center"
-          width="180"
-          :formatter="dateFormat"
-        />
-        <el-table-column prop="remarks" label="备注" header-align="center" align="center" />
-        <el-table-column
-          v-if="$hasPermission(updateUrl) || $hasPermission(mixinViewModuleOptions.deleteUrl)"
-          label="操作" header-align="center" align="center" fixed="right" width="150">
-          <template slot-scope="scope">
-            <el-button
-              v-if="$hasPermission(updateUrl)"
-              type="text"
-              @click="initAddOrUpdate('addUpdateDialogRef',scope.row)"
-            >修改</el-button>
-            <el-button
-              v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)"
-              type="text"
-              @click="deleteHandle(scope.row,scope.row.username)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+                [{{ item.name }}]&nbsp;
+              </span>
+            </el-tooltip>
+          </span>
+        </template>
+        <template v-slot:operate="{ row }">
+          <el-button
+            icon="fa fa-edit"
+            title="修改"
+            circle
+            @click="initDialog('addUpdateDialogRef', row)"
+          />
+          <el-button
+            icon="fa fa-trash"
+            title="删除"
+            circle
+            @click="deleteHandle(row, row.name)"
+          />
+        </template>
+      </vxe-grid>
       <!-- 新增修改弹框 -->
       <AddUpdateForm
         ref="addUpdateDialogRef"
@@ -145,21 +86,19 @@
         :updateUrl="updateUrl"
         :getDataList="getDataList"
       />
+      <ResetPasswordForm ref="resetPasswordDialogRef" />
     </div>
     <!-- 右边信息-end -->
     <!-- 页脚-start -->
     <div slot="footer">
-      <PageFooter
-        :limits="[10, 20, 50, 100]"
-        :page="page"
-        :limit="limit"
+      <vxe-pager
+        border
+        align="left"
+        :current-page="page"
+        :page-size="limit"
         :total="total"
-        :pageSizeChangeHandle="pageSizeChangeHandle"
-        :pageCurrentChangeHandle="pageCurrentChangeHandle"
-        :firstPageHandle="firstPageHandle"
-        :lastPageHandle="lastPageHandle"
-        :refreshPage="refreshPage"
-        refreshRef="tableRef"
+        :layouts="layouts"
+        @page-change="handlePageChange"
       />
     </div>
     <!-- 页脚-end -->
@@ -168,18 +107,14 @@
 
 <script>
 import mixinViewModule from '@/mixins/view-module' // 分页相关js
-import SearchHearder from '@/components/search-hearder/SearchHearder' // 头部查询模块
-import DemoTreeSide from './components/DemoTreeSide' // 左边树形模块
-import PageFooter from '@/components/page-footer/PageFooter' // 分页模块
 import AddUpdateForm from './components/AddUpdateForm' // 添加修改模块
+import ResetPasswordForm from './components/ResetPasswordForm' // 重置密码模块
 export default {
   name: 'SysUser',
   mixins: [mixinViewModule],
   components: {
-    DemoTreeSide,
-    SearchHearder,
-    PageFooter,
-    AddUpdateForm
+    AddUpdateForm,
+    ResetPasswordForm
   },
   data () {
     return {
@@ -190,7 +125,20 @@ export default {
         dictCodes: 'sys_user_type,state'
       },
       addUrl: 'sysUser/add',
-      updateUrl: 'sysUser/update'
+      updateUrl: 'sysUser/update',
+      // 列信息
+      tableColumn: [
+        { type: 'checkbox', width: 50 },
+        { field: 'name', title: '用户账号' },
+        { field: 'nickName', title: '昵称' },
+        { field: 'mobile', title: '手机号码', width: 110 },
+        { field: 'type', title: '用户类型', formatter: ({ cellValue }) => this.dictDetailsHandle(cellValue, 'sys_user_type') },
+        { field: 'roleList', title: '角色列表', slots: { default: 'role_default' } },
+        { field: 'state', title: '用户状态', slots: { default: 'state_default' } },
+        { field: 'createTime', title: '创建时间', width: 150, formatter: this.dateFormat },
+        { field: 'remarks', title: '备注' },
+        { title: '操作', width: 200, slots: { default: 'operate' } }
+      ]
     }
   },
   methods: {
@@ -221,12 +169,3 @@ export default {
   }
 }
 </script>
-<style>
-.zero-search-from {
-  margin-bottom: -10px;
-  padding-top: 15px;
-}
-.zero-table.el-table--fit.el-table--border {
-  border: 0px !important;
-}
-</style>
diff --git a/src/views/sys/user/online/index.vue b/src/views/sys/user/online/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..418234b40db6958dde258baed6c21ba3784b2132
--- /dev/null
+++ b/src/views/sys/user/online/index.vue
@@ -0,0 +1,92 @@
+/* 在线用户页面 */
+<template>
+  <zero-container>
+    <!-- 右边信息-start -->
+    <div slot="main" style="height: 100%">
+      <vxe-grid
+        border
+        resizable
+        ref="xGrid"
+        id="xGrid"
+        height="auto"
+        :loading="dataListLoading"
+        :columns="tableColumn"
+        :toolbar="{
+          zoom: true,
+          custom: true,
+        }"
+        :data="dataList"
+        :custom-config="{ storage: true }"
+      >
+        <template v-slot:operate="{ row }">
+          <el-button type="text" @click="forcedOffline(row.name)">
+            强制下线
+          </el-button>
+        </template>
+      </vxe-grid>
+    </div>
+    <!-- 右边信息-end -->
+    <!-- 页脚-start -->
+    <div slot="footer">
+      <vxe-pager
+        border
+        align="left"
+        :current-page="page"
+        :page-size="limit"
+        :total="total"
+        :layouts="layouts"
+        @page-change="handlePageChange"
+      />
+    </div>
+    <!-- 页脚-end -->
+  </zero-container>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module' // 分页相关js
+import dayjs from 'dayjs'
+export default {
+  name: 'SysUserOnline',
+  mixins: [mixinViewModule],
+  components: {
+  },
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListUrl: '/sysUser/onlineUserPage',
+        exportUrl: '/sysUser/export',
+        dictCodes: 'sys_user_type'
+      },
+      // 列信息
+      tableColumn: [
+        { field: 'name', title: '用户账号' },
+        { field: 'nickName', title: '昵称' },
+        { field: 'mobile', title: '手机号码' },
+        { field: 'type', title: '用户类型', formatter: ({ cellValue }) => this.dictDetailsHandle(cellValue, 'sys_user_type') },
+        { field: 'loginTime', title: '在线时长(分)', formatter: this.useTimeFormat },
+        { field: 'loginTime', title: '登录时间', formatter: this.dateFormat },
+        { title: '操作', width: 200, slots: { default: 'operate' } }
+      ]
+    }
+  },
+  methods: {
+    forcedOffline (name) {
+      this.dataListLoading = true
+      const config = {
+        url: '/sysUser/forcedOffline',
+        method: 'get',
+        params: { name: name }
+      }
+      this.$axios(config).then(res => {
+        this.dataListLoading = false
+        this.$message.success(res.msg)
+      }).catch(() => {
+        this.dataListLoading = false
+      })
+    },
+    useTimeFormat ({ cellValue }) {
+      return parseInt((dayjs().unix() - cellValue) / 60)
+    }
+  }
+}
+</script>
diff --git a/vue.config.js b/vue.config.js
index c28d88b2497429033b16c300dcf3d0b2efc7fa33..0b5eb349d8be4a30c8344c9604ef5ff2466f7dd4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -37,16 +37,16 @@ module.exports = {
   lintOnSave: true,
   devServer: {
     publicPath, // 和 publicPath 保持一致
-    disableHostCheck: process.env.NODE_ENV === 'development', // 关闭 host check，方便使用 ngrok 之类的内网转发工具
-    proxy: {
-      '/zero': {
-        target: 'http://localhost',
-        changeOrigin: true,
-        pathRewrite: {
-          '/zero': ''
-        }
-      }
-    }
+    disableHostCheck: process.env.NODE_ENV === 'development' // 关闭 host check，方便使用 ngrok 之类的内网转发工具
+    // proxy: {
+    //   '/zero': {
+    //     target: 'http://localhost',
+    //     changeOrigin: true,
+    //     pathRewrite: {
+    //       '/zero': ''
+    //     }
+    //   }
+    // }
   },
   css: {
     loaderOptions: {