feature(*):项目初始化

1.md文件编写
2.文件整理
3.系统设置页面调整
4.全局样式调整

README.md

@@ -0,0 +1,62 @@
+### 技术栈
+
+1. vue v2.6.14
+2. node v16.5.0
+
+### 目录说明
+
+```lua
+根目录
+├── mock -- Mock服务
+├── public -- 前端控制
+├── src --
+      ├── api --
+      ├── assets --
+      ├── config --
+      ├── i18n --
+      ├── icon --
+      ├── router --
+      ├── store --
+      ├── utils --
+      ├── vab --
+      └── views --
+            ├── index --
+            ├── login --
+            └── system --
+
+├── package.json --
+└── vue.config --
+```
+
+### 命名规范
+
+1. 文件名、文件夹：小驼峰，优先选择单个单词命名(user, userInfo)
+
+2. 组件：大驼峰，优先选择单个单词命名(UserEdit.vue)
+
+3. 图片、HTML：全部采用小写方式，优先选择单个单词命名,下划线分隔(banner_sina.gif)
+
+4. CSS、JS：全部采用小写方式，优先选择单个单词命名,以短横线分隔(date-picker.scss, date-info.js)
+
+5. Router：小驼峰('/userInfo')
+
+### 初始化项目
+
+```
+npm i yarn -g
+yarn/yarn install
+```
+
+### 运行项目
+
+```
+yarn serve
+```
+
+### 打包项目
+
+更改静态文件`public/config.js`中的参数(或者在打包后更改)，然后运行
+
+```
+yarn build
+```

mock/controller/router.js

@@ -24,6 +24,27 @@ const List = [
       },
     ],
   },
+  {
+    path: '/test',
+    name: 'Test',
+    component: 'Layout',
+    meta: {
+      title: '测试',
+      icon: 'user-settings-line',
+    },
+    children: [
+      {
+        path: 'testIndex',
+        name: 'TestIndex',
+        // component: '@/views/setting/personalCenter',
+        component: '@/views/test/index',
+        meta: {
+          title: '测试',
+          icon: 'map-pin-user-line',
+        },
+      },
+    ],
+  },
   {
     path: '/setting',
     name: 'PersonnelManagement',
@@ -36,7 +57,8 @@ const List = [
       {
         path: 'personalCenter',
         name: 'PersonalCenter',
-        component: '@/views/setting/personalCenter',
+        // component: '@/views/setting/personalCenter',
+        component: '@/views/system/personal',
         meta: {
           title: '个人中心',
           icon: 'map-pin-user-line',
@@ -45,7 +67,8 @@ const List = [
       {
         path: 'userManagement',
         name: 'UserManagement',
-        component: '@/views/setting/userManagement',
+        // component: '@/views/setting/userManagement',
+        component: '@/views/system/user',
         meta: {
           title: '用户管理',
           icon: 'user-3-line',
@@ -54,7 +77,8 @@ const List = [
       {
         path: 'roleManagement',
         name: 'RoleManagement',
-        component: '@/views/setting/roleManagement',
+        // component: '@/views/setting/roleManagement',
+        component: '@/views/system/role',
         meta: {
           title: '角色管理',
           icon: 'admin-line',
@@ -63,7 +87,8 @@ const List = [
       {
         path: 'departmentManagement',
         name: 'DepartmentManagement',
-        component: '@/views/setting/departmentManagement',
+        // component: '@/views/setting/departmentManagement',
+        component: '@/views/system/dept',
         meta: {
           title: '部门管理',
           icon: 'group-line',
@@ -72,7 +97,8 @@ const List = [
       {
         path: 'menuManagement',
         name: 'MenuManagement',
-        component: '@/views/setting/menuManagement',
+        // component: '@/views/setting/menuManagement',
+        component: '@/views/system/menu',
         meta: {
           title: '菜单管理',
           icon: 'menu-2-fill',
@@ -81,7 +107,8 @@ const List = [
       {
         path: 'systemLog',
         name: 'SystemLog',
-        component: '@/views/setting/systemLog',
+        // component: '@/views/setting/systemLog',
+        component: '@/views/system/log',
         meta: {
           title: '系统日志',
           icon: 'file-shield-2-line',
@@ -103,4 +130,34 @@ module.exports = [
       }
     },
   },
+  {
+    url: '/menuManagement/getList',
+    type: 'get',
+    response() {
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          list: [
+            {
+              id: 'root',
+              label: '全部角色',
+              children: [
+                {
+                  id: '610000201008234560',
+                  permission: 'admin',
+                  label: 'admin角色',
+                },
+                {
+                  id: '450000200912071734',
+                  permission: 'editor',
+                  label: 'editor角色',
+                },
+              ],
+            },
+          ],
+        },
+      }
+    },
+  },
 ]

mock/controller/system.js

@@ -0,0 +1,40 @@
+const roleList = [
+  {
+    id: 1,
+    role: 'admin',
+    btnRolesCheckedList: ['read:system', 'write:system', 'delete:system'],
+  },
+]
+const deptList = [
+  {
+    id: 1,
+    name: '研发部',
+    parentId: 0,
+    order: '1',
+    createTime: new Date().toLocaleString(),
+  },
+]
+module.exports = [
+  {
+    url: '/roleManagement/getList',
+    type: 'get',
+    response() {
+      return {
+        code: 200,
+        msg: 'success',
+        data: { list: roleList, total: 1 },
+      }
+    },
+  },
+  {
+    url: '/departmentManagement/getList',
+    type: 'get',
+    response() {
+      return {
+        code: 200,
+        msg: 'success',
+        data: { list: deptList, total: 1 },
+      }
+    },
+  },
+]

mock/controller/test.js

@@ -0,0 +1,18 @@
+const List = [
+  {
+    id: 1,
+  },
+]
+module.exports = [
+  {
+    url: '/test/getList',
+    type: 'get',
+    response() {
+      return {
+        code: 200,
+        msg: 'success',
+        data: { list: List, total: 123 },
+      }
+    },
+  },
+]

mock/controller/user.js

@@ -74,4 +74,26 @@ module.exports = [
       }
     },
   },
+  {
+    url: '/userManagement/getList',
+    type: 'get',
+    response() {
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          list: [
+            {
+              id: 1,
+              username: '管理员',
+              email: '123@123.com',
+              roles: ['admin'],
+              datatime: new Date().toLocaleString(),
+            },
+          ],
+          total: 1,
+        },
+      }
+    },
+  },
 ]

mock/index.js

@@ -6,6 +6,7 @@ const { mock } = require('mockjs')
 const { baseURL } = require('../src/config')
 const mockDir = path.join(process.cwd(), 'mock')
 const { handleMockArray } = require('./utils')
+const { log } = require('console')
 
 /**
  *

prettier.config.js

@@ -8,7 +8,7 @@ module.exports = {
   jsxSingleQuote: false,
   trailingComma: 'es5',
   bracketSpacing: true,
-  bracketSameLine: false,
+  bracketSameLine: true,
   arrowParens: 'always',
   htmlWhitespaceSensitivity: 'ignore',
   vueIndentScriptAndStyle: true,

public/config.js

@@ -0,0 +1,3 @@
+const $GlobalConfig = {
+  baseUrl: '/vab-mock-server',
+}

public/index.html

@@ -6,16 +6,15 @@
     <meta content="webkit" name="renderer" />
     <meta
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
-      name="viewport"
-    />
+      name="viewport" />
     <link href="<%= BASE_URL %>favicon.ico" rel="icon" />
     <title><%= VUE_APP_TITLE %></title>
     <meta content="" name="keywords" />
     <meta content="<%= VUE_APP_AUTHOR %>" name="author" />
     <link
       href="<%= BASE_URL %>static/css/loading.css?random=<%= VUE_APP_RANDOM %>"
-      rel="stylesheet"
-    />
+      rel="stylesheet" />
+    <script src="./config.js"></script>
   </head>
   <body>
     <noscript></noscript>

src/api/test.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export async function getList(data) {
+  return request({
+    url: '/test/getList',
+    method: 'get',
+    data,
+  })
+}

src/utils/request.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import axios from 'axios'
 import {
-  baseURL,
+  // baseURL,
   contentType,
   debounce,
   messageName,
@@ -94,7 +94,8 @@ const handleData = async ({ data, status = 0, statusText }) => {
  * @description axios初始化
  */
 const instance = axios.create({
-  baseURL,
+  // baseURL,
+  baseURL: $GlobalConfig.baseUrl,
   timeout: requestTimeout,
   headers: {
     'Content-Type': contentType,

src/vab/plugins/vab.js

@@ -162,8 +162,21 @@ Vue.prototype.$baseNotify = (
  */
 Vue.prototype.$baseTableHeight = (formType) => {
   let height = window.innerHeight
-  const paddingHeight = 291
-  const formHeight = 60
+  const paddingHeight = 270
+  const formHeight = 50
+
+  if ('number' === typeof formType) {
+    height = height - paddingHeight - formHeight * formType
+  } else {
+    height = height - paddingHeight
+  }
+  return height
+}
+
+Vue.prototype.$noPagingTableHeight = (formType) => {
+  let height = window.innerHeight
+  const paddingHeight = 240
+  const formHeight = 50
 
   if ('number' === typeof formType) {
     height = height - paddingHeight - formHeight * formType

src/views/setting/departmentManagement/components/DepartmentManagementEdit.vue → src/views/system/components/DeptEdit.vue

@@ -45,7 +45,7 @@
   import { doEdit, getList } from '@/api/departmentManagement'
 
   export default {
-    name: 'DepartmentManagementEdit',
+    name: 'DeptEdit',
     data() {
       return {
         treeData: [],

src/views/setting/menuManagement/components/MenuManagementEdit.vue → src/views/system/components/MenuEdit.vue

@@ -79,7 +79,7 @@
   import { doEdit } from '@/api/menuManagement'
 
   export default {
-    name: 'MenuManagementEdit',
+    name: 'MenuEdit',
     components: { VabIconSelector },
     data() {
       return {

src/views/setting/roleManagement/components/RoleManagementEdit.vue → src/views/system/components/RoleEdit.vue

@@ -56,7 +56,7 @@
   import { getList } from '@/api/router'
 
   export default {
-    name: 'RoleManagementEdit',
+    name: 'RoleEdit',
     data() {
       return {
         form: {

src/views/setting/userManagement/components/UserManagementEdit.vue → src/views/system/components/UserEdit.vue

@@ -33,7 +33,7 @@
   import { doEdit } from '@/api/userManagement'
 
   export default {
-    name: 'UserManagementEdit',
+    name: 'UserEdit',
     data() {
       return {
         form: {

src/views/system/dept.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="department-management-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button
+          icon="el-icon-plus"
+          type="primary"
+          @click="handleEdit($event)">
+          添加
+        </el-button>
+        <el-button
+          icon="el-icon-delete"
+          type="danger"
+          @click="handleDelete($event)">
+          批量删除
+        </el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input
+              v-model.trim="queryForm.name"
+              clearable
+              placeholder="请输入名称" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      v-loading="listLoading"
+      border
+      :height="$baseTableHeight(1)"
+      :data="list"
+      default-expand-all
+      row-key="id"
+      :tree-props="{ children: 'children' }"
+      @selection-change="setSelectRows">
+      <el-table-column show-overflow-tooltip type="selection" />
+      <el-table-column label="名称" prop="name" show-overflow-tooltip />
+      <el-table-column label="父节点Id" prop="parentId" show-overflow-tooltip />
+      <el-table-column label="排序" prop="order" show-overflow-tooltip />
+      <el-table-column
+        label="创建时间"
+        prop="createTime"
+        show-overflow-tooltip />
+      <el-table-column label="操作" width="85">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button
+            :disabled="!row.parentId"
+            type="text"
+            @click="handleDelete({ row })">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <el-image
+          class="vab-data-empty"
+          :src="require('@/assets/empty_images/data_empty.png')" />
+      </template>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange" />
+    <edit ref="edit" @fetch-data="fetchData" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, getList } from '@/api/departmentManagement'
+  import Edit from './components/DeptEdit'
+
+  export default {
+    name: 'Department',
+    components: { Edit },
+    data() {
+      return {
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          title: '',
+        },
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            await this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids })
+              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+              await this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const {
+          data: { list, total },
+        } = await getList(this.queryForm)
+        this.list = list
+        this.total = total
+        this.listLoading = false
+      },
+    },
+  }
+</script>

src/views/setting/departmentManagement/index.vue → src/views/system/index.vue

@@ -87,10 +87,10 @@
 
 <script>
   import { doDelete, getList } from '@/api/departmentManagement'
-  import Edit from './components/DepartmentManagementEdit'
+  import Edit from './components/DeptEdit'
 
   export default {
-    name: 'DepartmentManagement',
+    name: 'Department',
     components: { Edit },
     data() {
       return {

src/views/setting/systemLog/index.vue → src/views/system/log.vue

@@ -6,14 +6,12 @@
           :inline="true"
           label-width="60px"
           :model="queryForm"
-          @submit.native.prevent
-        >
+          @submit.native.prevent>
           <el-form-item label="账号">
             <el-input
               v-model.trim="queryForm.account"
               clearable
-              placeholder="请输入账号"
-            />
+              placeholder="请输入账号" />
           </el-form-item>
           <el-form-item label="周期">
             <el-date-picker
@@ -22,8 +20,7 @@
               format="yyyy-MM-dd"
               start-placeholder="开始日期"
               type="daterange"
-              value-format="yyyy-MM-dd"
-            />
+              value-format="yyyy-MM-dd" />
           </el-form-item>
           <el-form-item>
             <el-button icon="el-icon-search" type="primary" @click="queryData">
@@ -34,26 +31,26 @@
       </vab-query-form-top-panel>
     </vab-query-form>
 
-    <el-table v-loading="listLoading" :data="list">
+    <el-table
+      :height="$baseTableHeight(1)"
+      v-loading="listLoading"
+      :data="list">
       <el-table-column
         align="center"
         label="日志类型"
         prop="type"
         show-overflow-tooltip
-        width="230px"
-      />
+        width="230px" />
       <el-table-column
         align="center"
         label="账号"
         prop="account"
-        show-overflow-tooltip
-      />
+        show-overflow-tooltip />
       <el-table-column
         align="center"
         label="执行结果"
         prop="executeResult"
-        show-overflow-tooltip
-      >
+        show-overflow-tooltip>
         <template #default="{ row }">
           <span v-if="row.executeResult === '登录成功'">
             <span class="vab-dot vab-dot-success"><span></span></span>
@@ -70,13 +67,11 @@
         align="center"
         label="访问时间"
         prop="datetime"
-        show-overflow-tooltip
-      />
+        show-overflow-tooltip />
       <template #empty>
         <el-image
           class="vab-data-empty"
-          :src="require('@/assets/empty_images/data_empty.png')"
-        />
+          :src="require('@/assets/empty_images/data_empty.png')" />
       </template>
     </el-table>
     <el-pagination
@@ -86,8 +81,7 @@
       :page-size="queryForm.pageSize"
       :total="total"
       @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
+      @size-change="handleSizeChange" />
   </div>
 </template>
 

src/views/setting/menuManagement/index.vue → src/views/system/menu.vue

@@ -2,14 +2,13 @@
   <div class="menu-management-container">
     <el-row :gutter="20">
       <el-col :lg="4" :md="8" :sm="24" :xl="4" :xs="24">
-        <el-card shadow="hover">
+        <el-card shadow="hover" class="menu-left">
           <el-tree
             :data="data"
             :default-expanded-keys="['root']"
             node-key="id"
             :props="defaultProps"
-            @node-click="handleNodeClick"
-          />
+            @node-click="handleNodeClick" />
         </el-card>
       </el-col>
       <el-col :lg="20" :md="16" :sm="24" :xl="20" :xs="24">
@@ -19,8 +18,7 @@
               <el-button
                 icon="el-icon-plus"
                 type="primary"
-                @click="handleEdit('')"
-              >
+                @click="handleEdit('')">
                 添加
               </el-button>
             </vab-query-form-top-panel>
@@ -28,16 +26,15 @@
           <el-table
             v-loading="listLoading"
             border
+            :height="$noPagingTableHeight(1)"
             :data="list"
             default-expand-all
             row-key="path"
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-          >
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
             <el-table-column
               label="标题"
               prop="meta.title"
-              show-overflow-tooltip
-            />
+              show-overflow-tooltip />
             <el-table-column label="name" prop="name" show-overflow-tooltip />
             <el-table-column label="路径" prop="path" show-overflow-tooltip />
             <el-table-column label="是否隐藏" show-overflow-tooltip>
@@ -48,8 +45,7 @@
             <el-table-column
               label="是否隐藏当前节点"
               show-overflow-tooltip
-              width="100"
-            >
+              width="100">
               <template #default="{ row }">
                 {{ row.meta.levelHidden ? '是' : '否' }}
               </template>
@@ -57,8 +53,7 @@
             <el-table-column
               label="vue文件路径"
               prop="component"
-              show-overflow-tooltip
-            />
+              show-overflow-tooltip />
             <el-table-column label="重定向" show-overflow-tooltip>
               <template #default="{ row }">
                 {{ row.redirect ? row.redirect : '无' }}
@@ -68,8 +63,7 @@
               <template #default="{ row }">
                 <vab-icon
                   v-if="row.meta && row.meta.icon"
-                  :icon="row.meta.icon"
-                />
+                  :icon="row.meta.icon" />
               </template>
             </el-table-column>
             <el-table-column label="是否固定" show-overflow-tooltip>
@@ -80,8 +74,7 @@
             <el-table-column
               label="是否无缓存"
               show-overflow-tooltip
-              width="120"
-            >
+              width="120">
               <template #default="{ row }">
                 {{ row.meta && row.meta.noKeepAlive ? '是' : '否' }}
               </template>
@@ -91,8 +84,7 @@
                 <el-tag
                   v-if="row.meta && row.meta.badge"
                   effect="dark"
-                  type="danger"
-                >
+                  type="danger">
                   {{ row.meta.badge }}
                 </el-tag>
               </template>
@@ -102,7 +94,11 @@
                 {{ row.meta && row.meta.dot ? '是' : '否' }}
               </template>
             </el-table-column>
-            <el-table-column label="操作" show-overflow-tooltip width="185">
+            <el-table-column
+              label="操作"
+              show-overflow-tooltip
+              width="185"
+              fixed="right">
               <template #default="{ row }">
                 <el-button type="primary" @click="handleEdit(row)">
                   <vab-icon icon="edit-2-line" />
@@ -117,8 +113,7 @@
             <template #empty>
               <el-image
                 class="vab-data-empty"
-                :src="require('@/assets/empty_images/data_empty.png')"
-              />
+                :src="require('@/assets/empty_images/data_empty.png')" />
             </template>
           </el-table>
         </el-card>
@@ -131,10 +126,10 @@
 <script>
   import { getList } from '@/api/router'
   import { doDelete, getTree } from '@/api/menuManagement'
-  import Edit from './components/MenuManagementEdit'
+  import Edit from './components/MenuEdit'
 
   export default {
-    name: 'MenuManagement',
+    name: 'Menu',
     components: { Edit },
     data() {
       return {
@@ -192,4 +187,7 @@
     padding: 0 !important;
     background: $base-color-background !important;
   }
+  .menu-left {
+    height: calc(100vh - 213px);
+  }
 </style>

src/views/setting/personalCenter/index.vue → src/views/system/personal.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="personal-center-container">
-    <el-row :gutter="20">
+    <el-row :gutter="20" type="flex">
       <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
-        <el-card shadow="hover">
+        <el-card shadow="hover" style="height: 100%">
           <div class="personal-center-user-info">
             <el-avatar :size="100" :src="avatar" @click.native="openDialog" />
             <div class="personal-center-user-info-full-name">
@@ -58,7 +58,7 @@
         </el-card>
       </el-col>
       <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
-        <el-card shadow="hover">
+        <el-card shadow="hover" style="height: 100%">
           <el-tabs v-model="activeName">
             <el-tab-pane label="基本信息" name="first">
               <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
@@ -96,7 +96,7 @@
   import { mapGetters } from 'vuex'
 
   export default {
-    name: 'PersonalCenter',
+    name: 'Personal',
     data() {
       return {
         activeName: 'first',

src/views/setting/roleManagement/index.vue → src/views/system/role.vue

@@ -5,15 +5,13 @@
         <el-button
           icon="el-icon-plus"
           type="primary"
-          @click="handleEdit($event)"
-        >
+          @click="handleEdit($event)">
           添加
         </el-button>
         <el-button
           icon="el-icon-delete"
           type="danger"
-          @click="handleDelete($event)"
-        >
+          @click="handleDelete($event)">
           批量删除
         </el-button>
       </vab-query-form-left-panel>
@@ -23,8 +21,7 @@
             <el-input
               v-model.trim="queryForm.role"
               clearable
-              placeholder="请输入角色"
-            />
+              placeholder="请输入角色" />
           </el-form-item>
           <el-form-item>
             <el-button icon="el-icon-search" type="primary" @click="queryData">
@@ -38,9 +35,9 @@
     <el-table
       v-loading="listLoading"
       border
+      :height="$baseTableHeight(1)"
       :data="list"
-      @selection-change="setSelectRows"
-    >
+      @selection-change="setSelectRows">
       <el-table-column align="center" show-overflow-tooltip type="selection" />
       <el-table-column align="center" label="序号" width="55">
         <template #default="{ $index }">
@@ -51,14 +48,12 @@
         align="center"
         label="id"
         prop="id"
-        show-overflow-tooltip
-      />
+        show-overflow-tooltip />
       <el-table-column
         align="center"
         label="角色码"
         prop="role"
-        show-overflow-tooltip
-      />
+        show-overflow-tooltip />
       <el-table-column align="center" label="按钮权限" show-overflow-tooltip>
         <template #default="{ row }">
           <el-tag v-for="(item, index) in row.btnRolesCheckedList" :key="index">
@@ -76,8 +71,7 @@
         align="center"
         label="操作"
         show-overflow-tooltip
-        width="85"
-      >
+        width="85">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
@@ -86,8 +80,7 @@
       <template #empty>
         <el-image
           class="vab-data-empty"
-          :src="require('@/assets/empty_images/data_empty.png')"
-        />
+          :src="require('@/assets/empty_images/data_empty.png')" />
       </template>
     </el-table>
     <el-pagination
@@ -97,18 +90,17 @@
       :page-size="queryForm.pageSize"
       :total="total"
       @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
+      @size-change="handleSizeChange" />
     <edit ref="edit" @fetch-data="fetchData" />
   </div>
 </template>
 
 <script>
   import { doDelete, getList } from '@/api/roleManagement'
-  import Edit from './components/RoleManagementEdit'
+  import Edit from './components/RoleEdit'
 
   export default {
-    name: 'RoleManagement',
+    name: 'Role',
     components: { Edit },
     data() {
       return {

src/views/setting/userManagement/index.vue → src/views/system/user.vue

@@ -5,15 +5,13 @@
         <el-button
           icon="el-icon-plus"
           type="primary"
-          @click="handleEdit($event)"
-        >
+          @click="handleEdit($event)">
           添加
         </el-button>
         <el-button
           icon="el-icon-delete"
           type="danger"
-          @click="handleDelete($event)"
-        >
+          @click="handleDelete($event)">
           批量删除
         </el-button>
       </vab-query-form-left-panel>
@@ -23,8 +21,7 @@
             <el-input
               v-model.trim="queryForm.username"
               clearable
-              placeholder="请输入用户名"
-            />
+              placeholder="请输入用户名" />
           </el-form-item>
           <el-form-item>
             <el-button icon="el-icon-search" type="primary" @click="queryData">
@@ -38,9 +35,9 @@
     <el-table
       v-loading="listLoading"
       border
+      :height="height"
       :data="list"
-      @selection-change="setSelectRows"
-    >
+      @selection-change="setSelectRows">
       <el-table-column align="center" show-overflow-tooltip type="selection" />
       <el-table-column align="center" label="序号" width="55">
         <template #default="{ $index }">
@@ -51,20 +48,17 @@
         align="center"
         label="id"
         prop="id"
-        show-overflow-tooltip
-      />
+        show-overflow-tooltip />
       <el-table-column
         align="center"
         label="用户名"
         prop="username"
-        show-overflow-tooltip
-      />
+        show-overflow-tooltip />
       <el-table-column
         align="center"
         label="邮箱"
         prop="email"
-        show-overflow-tooltip
-      />
+        show-overflow-tooltip />
 
       <el-table-column align="center" label="角色" show-overflow-tooltip>
         <template #default="{ row }">
@@ -78,14 +72,12 @@
         align="center"
         label="修改时间"
         prop="datatime"
-        show-overflow-tooltip
-      />
+        show-overflow-tooltip />
       <el-table-column
         align="center"
         label="操作"
         show-overflow-tooltip
-        width="85"
-      >
+        width="85">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
@@ -94,8 +86,7 @@
       <template #empty>
         <el-image
           class="vab-data-empty"
-          :src="require('@/assets/empty_images/data_empty.png')"
-        />
+          :src="require('@/assets/empty_images/data_empty.png')" />
       </template>
     </el-table>
     <el-pagination
@@ -105,18 +96,17 @@
       :page-size="queryForm.pageSize"
       :total="total"
       @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
+      @size-change="handleSizeChange" />
     <edit ref="edit" @fetch-data="fetchData" />
   </div>
 </template>
 
 <script>
   import { doDelete, getList } from '@/api/userManagement'
-  import Edit from './components/UserManagementEdit'
+  import Edit from './components/UserEdit'
 
   export default {
-    name: 'UserManagement',
+    name: 'User',
     components: { Edit },
     data() {
       return {
@@ -135,6 +125,11 @@
     created() {
       this.fetchData()
     },
+    computed: {
+      height() {
+        return this.$baseTableHeight(1)
+      },
+    },
     methods: {
       setSelectRows(val) {
         this.selectRows = val

src/views/test/components/Edit.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    width="500px"
+    @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model.trim="form.username" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input v-model.trim="form.password" type="password" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model.trim="form.email" />
+      </el-form-item>
+      <el-form-item label="角色" prop="roles">
+        <el-checkbox-group v-model="form.roles">
+          <el-checkbox label="admin" />
+          <el-checkbox label="editor" />
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/userManagement'
+
+  export default {
+    name: 'UserEdit',
+    data() {
+      return {
+        form: {
+          roles: [],
+        },
+        rules: {
+          username: [
+            { required: true, trigger: 'blur', message: '请输入用户名' },
+          ],
+          password: [
+            { required: true, trigger: 'blur', message: '请输入密码' },
+          ],
+          email: [{ required: true, trigger: 'blur', message: '请输入邮箱' }],
+          roles: [{ required: true, trigger: 'blur', message: '请选择角色' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            this.$emit('fetch-data')
+            this.close()
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/test/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="text-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button
+          icon="el-icon-plus"
+          type="primary"
+          @click="handleEdit($event)">
+          添加
+        </el-button>
+        <el-button
+          icon="el-icon-delete"
+          type="danger"
+          @click="handleDelete($event)">
+          批量删除
+        </el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input
+              v-model.trim="queryForm.name"
+              clearable
+              placeholder="请输入名称" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      v-loading="listLoading"
+      border
+      default-expand-all
+      :data="list"
+      :height="height"
+      row-key="id"
+      :tree-props="{ children: 'children' }"
+      @selection-change="setSelectRows">
+      <el-table-column show-overflow-tooltip type="selection" />
+      <el-table-column label="名称" prop="name" show-overflow-tooltip />
+      <el-table-column label="父节点Id" prop="parentId" show-overflow-tooltip />
+      <el-table-column label="排序" prop="order" show-overflow-tooltip />
+      <el-table-column
+        label="创建时间"
+        prop="createTime"
+        show-overflow-tooltip />
+      <el-table-column label="操作" width="85">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button
+            :disabled="!row.parentId"
+            type="text"
+            @click="handleDelete({ row })">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <el-image
+          class="vab-data-empty"
+          :src="require('@/assets/empty_images/data_empty.png')" />
+      </template>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange" />
+    <edit ref="edit" @fetch-data="fetchData" />
+  </div>
+</template>
+
+<script>
+  import { getList } from '@/api/test'
+  import Edit from './components/Edit'
+  export default {
+    data() {
+      return {
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          title: '',
+        },
+      }
+    },
+    components: {
+      Edit,
+    },
+    mounted() {
+      this.fetchData()
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight(1)
+      },
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const {
+          data: { list, total },
+        } = await getList(this.queryForm)
+        this.list = list
+        this.total = total
+        this.listLoading = false
+      },
+    },
+  }
+</script>
+
+<style></style>