Merge branch 'develop' of https://gitee.com/siwa-team/dawa-vue into develop

README.en.md

@@ -0,0 +1,36 @@
+# 大娃-VUE
+
+#### Description
+大娃前端
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

src/api/security/menu.js

@@ -2,11 +2,11 @@ import request from '@/utils/request'
 
 const menuApi = {
   add: 'sys/menu/add',
-  get: 'sys/menu/get',
+  edit: 'sys/menu/edit',
-  update: 'sys/menu/update',
+  del: 'sys/menu/del',
-  del: 'sys/menu/delete',
+  list: 'sys/menu/list',
-  updateStatus: 'sys/menu/updateStatus',
+  tree: 'sys/menu/tree',
-  list: 'sys/menu/listByParentId'
+  treeForGrant: 'sys/menu/treeForGrant'
 }
 
 export function menuAdd (params) {
@@ -16,38 +16,38 @@ export function menuAdd (params) {
     data: params
   })
 }
-export function menuGet (params) {
+export function menuEdit (params) {
   return request({
-    url: menuApi.get,
+    url: menuApi.edit,
     method: 'post',
     data: params
   })
 }
-export function menuUpdate (params) {
+export function menuDel (params) {
-  return request({
-    url: menuApi.update,
-    method: 'post',
-    data: params
-  })
-}
-export function menuDelete (params) {
   return request({
     url: menuApi.del,
     method: 'post',
-    data: params
+    params: params
   })
 }
 export function menuList (params) {
   return request({
     url: menuApi.list,
-    method: 'post',
+    method: 'get',
-    data: params
+    params: params
   })
 }
-export function menuUpdateStatus (params) {
+export function menuTree (params) {
   return request({
-    url: menuApi.updateStatus,
+    url: menuApi.tree,
-    method: 'post',
+    method: 'get',
-    data: params
+    params: params
+  })
+}
+export function menuTreeForGrant (params) {
+  return request({
+    url: menuApi.treeForGrant,
+    method: 'get',
+    params: params
   })
 }

src/api/security/role.js

@@ -2,11 +2,12 @@ import request from '@/utils/request'
 
 const roleApi = {
   add: '/sys/role/add',
-  get: '/sys/role/getById',
+  edit: '/sys/role/edit',
-  update: '/sys/role/update',
+  del: '/sys/role/del',
-  del: '/sys/role/delete',
+  page: '/sys/role/pageList',
-  page: '/sys/role/page',
+  list: '/sys/role/list',
-  updateStatus: '/sys/role/updateStatus'
+  ownMenu: '/sys/role/ownMenu',
+  grantMenu: '/sys/role/grantMenu'
 }
 
 export function roleAdd (params) {
@@ -16,37 +17,44 @@ export function roleAdd (params) {
     data: params
   })
 }
-export function roleGet (params) {
+export function roleEdit (params) {
   return request({
-    url: roleApi.get,
+    url: roleApi.edit,
     method: 'post',
     data: params
   })
 }
-export function roleUpdate (params) {
+export function roleDel (params) {
-  return request({
-    url: roleApi.update,
-    method: 'post',
-    data: params
-  })
-}
-export function roleDelete (params) {
   return request({
     url: roleApi.del,
     method: 'post',
-    data: params
+    params: params
   })
 }
 export function rolePage (params) {
   return request({
     url: roleApi.page,
-    method: 'post',
+    method: 'get',
-    data: params
+    params: params
   })
 }
-export function roleUpdateStatus (params) {
+export function roleList (params) {
   return request({
-    url: roleApi.updateStatus,
+    url: roleApi.list,
+    method: 'get',
+    params: params
+  })
+}
+export function roleOwnMenu (params) {
+  return request({
+    url: roleApi.ownMenu,
+    method: 'post',
+    params: params
+  })
+}
+export function roleGrantMenu (params) {
+  return request({
+    url: roleApi.grantMenu,
     method: 'post',
     data: params
   })

src/api/security/user.js

@@ -4,16 +4,17 @@ const userApi = {
   login: '/login',
   logout: '/logout',
   add: '/sys/user/add',
-  get: '/sys/user/get',
+  edit: '/sys/user/edit',
-  update: '/sys/user/update',
+  del: '/sys/user/del',
-  del: '/sys/user/delete',
+  page: '/sys/user/pageList',
-  page: '/sys/user/page',
+  getInfo: '/sys/user/getInfo',
-  updateEnabled: '/sys/user/updateEnabled',
+  ownRole: '/sys/user/ownRole',
-  getInfo: '/sys/user/getInfo'
+  grantRole: '/sys/user/grantRole'
 }
 
 const userPasswordApi = {
   update: '/sys/user/passwordUpdate',
+  reset: '/sys/user/passwordReset'
 }
 
 export function userLogin (params) {
@@ -24,48 +25,35 @@ export function userLogin (params) {
   })
 }
 
-export function userAdd (params) {
+export function userAdd (params,password) {
   return request({
     url: userApi.add,
     method: 'post',
-    data: params
+    data: params,
+    params: password
   })
 }
-export function userGet (params) {
+export function userEdit (params) {
   return request({
-    url: userApi.get,
+    url: userApi.edit,
     method: 'post',
     data: params
   })
 }
-export function userUpdate (params) {
+export function userDel (params) {
-  return request({
-    url: userApi.update,
-    method: 'post',
-    data: params
-  })
-}
-export function userDelete (params) {
   return request({
     url: userApi.del,
     method: 'post',
-    data: params
+    params: params
   })
 }
 export function userPage (params) {
   return request({
     url: userApi.page,
-    method: 'post',
+    method: 'get',
-    data: params
+    params: params
   })
 }
-export function userLogout (params) {
-  // return request({
-  //   url: userApi.logout,
-  //   method: 'post',
-  //   data: params
-  // })
-}
 export function getInfo (params) {
   return request({
     url: userApi.getInfo,
@@ -73,9 +61,16 @@ export function getInfo (params) {
     data: params
   })
 }
-export function userUpdateEnabled (params) {
+export function userOwnRole (params) {
   return request({
-    url: userApi.updateEnabled,
+    url: userApi.ownRole,
+    method: 'post',
+    params: params
+  })
+}
+export function userGrantRole (params) {
+  return request({
+    url: userApi.grantRole,
     method: 'post',
     data: params
   })
@@ -87,3 +82,10 @@ export function passwordUpdate (params) {
     data: params
   })
 }
+export function passwordReset (params) {
+  return request({
+    url: userPasswordApi.reset,
+    method: 'post',
+    data: params
+  })
+}

src/components/Table/index.js

@@ -162,6 +162,10 @@ export default {
             pageSize: (pagination && pagination.pageSize) ||
               this.localPagination.pageSize
           }) || false
+          // 后端数据rows为null保存修复
+          if (r.rows == null) {
+            r.rows = []
+          }
           // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
           if (r.rows.length === 0 && this.showPagination && this.localPagination.current > 1) {
             this.localPagination.current--
@@ -178,7 +182,13 @@ export default {
           // } catch (e) {
           //   this.localPagination = false
           // }
-          this.localDataSource = r.rows // 返回结果中的数组数据
+          // 返回结果中的数组数据
+          if (this.showPagination === false) {
+            // 不分页的直接是在data中，我们在界面中直接就是返回了data
+            this.localDataSource = r
+          } else {
+            this.localDataSource = r.rows
+          }
           this.localLoading = false
         })
       }

src/config/router.config.js

@@ -52,9 +52,9 @@ export const asyncRouterMap = [
             meta: { title: '角色管理', keepAlive: true }
           },
           {
-            path: '/security/resource',
+            path: '/security/menu',
-            name: 'SecurityResource',
+            name: 'SecurityMenu',
-            component: () => import('@/views/security/resource/ResourceTree'),
+            component: () => import('@/views/security/menu/MenuList'),
             meta: { title: '菜单管理', keepAlive: true }
           },
           {
@@ -84,24 +84,24 @@ export const asyncRouterMap = [
             component: () => import('@/views/project/ProjectList'),
             meta: { title: '自主项目', keepAlive: true, permission: ['form'] },
           },
+          // {
+          //   path: '/project/add',
+          //   name: 'ProjectForm',
+          //   component: () => import('@/views/project/ProjectForm'),
+          //   meta: { title: '新增项目', keepAlive: true, permission: ['form'], show: false }
+          // },
           {
-            path: '/project/add',
+            path: '/project/projectStepForm',
-            name: 'ProjectForm',
+            name: 'projectStepForm',
-            component: () => import('@/views/project/ProjectForm'),
+            component: () => import('@/views/project/form/ProjectStepForm'),
-            meta: { title: '新增项目', keepAlive: true, permission: ['form'], show: false }
+            meta: { title: '新增项目-分布', keepAlive: true, permission: ['form'] }
-          },
-          {
-            path: '/project/addClass',
-            name: 'addClass',
-            component: () => import('@/views/project/AddClass'),
-            meta: { title: '新增种类', keepAlive: true, permission: ['form'] }
-          },
-          {
-            path: '/project/unitSelect',
-            name: 'unitSelect',
-            component: () => import('@/views/project/ProjectUnitSelect'),
-            meta: { title: '选择单位', keepAlive: true, permission: ['form'] }
           },
+          // {
+          //   path: '/project/unitSelect',
+          //   name: 'unitSelect',
+          //   component: () => import('@/views/project/ProjectUnitSelect'),
+          //   meta: { title: '选择单位', keepAlive: true, permission: ['form'] }
+          // },
           {
             path: '/form/step-form',
             name: 'StepForm',

src/core/lazy_use.js

@@ -48,7 +48,8 @@ import {
   space,
   Transfer,
   Tree,
-  Empty
+  Empty,
+  TreeSelect
 } from 'ant-design-vue'
 import Viser from 'viser-vue'
 
@@ -105,6 +106,7 @@ Vue.use(space)
 Vue.use(Tree)
 Vue.use(Transfer)
 Vue.use(Empty)
+Vue.use(TreeSelect)
 
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message

src/utils/request.js

@@ -49,7 +49,7 @@ const errorHandler = (error) => {
 request.interceptors.request.use(config => {
   // const token = storage.get(ACCESS_TOKEN)
 	// 由于登录接口待联调，token使用默认值
-	const token = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImU1MmNhNTQ4LThmYmMtNGUyNC1iZjZjLWEzZjgwNDAwMDNiMCJ9._j_AHCd4I_PTWk4mt9euUzlABBoiqsNAIjVGrFJPWv8ZyoqgH9JPs2QFHtoj1Vly8cgtOri8X0ylbttglCcUQQ'
+	const token = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjIwMzU2Nzg5LWYyOGEtNDYxYi1iNTRhLTM2MWYzZjdhZjg2NSJ9.4vGoaj9KK8aYp9gEz2cnRM8MBWPrqIo8O5wNgbYK4-JUE3naeEuejjr3JfZ57TLbMYWqG1MkJ0kAT-2GMgreGQ'
   // 如果 token 存在,让每个请求携带自定义 token 请根据实际情况自行修改
   if (token) {
     config.headers[ACCESS_TOKEN] = token

src/utils/util.js

@@ -65,3 +65,23 @@ export function removeLoadingAnimate (id = '', timeout = 1500) {
     document.body.removeChild(document.getElementById(id))
   }, timeout)
 }
+
+export function listToTree (list, tree, parentId) {
+  list.forEach(item => {
+    if (item.pid === parentId) {
+      const child = {
+        ...item,
+        scopedSlots: {
+          icon: 'icon'
+        },
+        children: []
+      }
+      listToTree(list, child.children, item.id)
+      if (child.children.length <= 0) {
+        delete child.children
+      }
+      tree.push(child)
+    }
+  })
+  return tree
+}

src/views/filterMap/menuTypeMap.js

@@ -0,0 +1,5 @@
+export const menuTypeMap = {
+	0: '目录',
+	1: '菜单',
+	2: '按钮'
+}

src/views/filterMap/sexMap.js

@@ -0,0 +1,5 @@
+export const sexMap = {
+	0: '未知',
+	1: '男',
+	2: '女'
+}

src/views/list/TableList.vue

@@ -303,6 +303,7 @@ export default {
     },
     onSelectChange (selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
+      console.log(this.selectedRowKeys.length)
       this.selectedRows = selectedRows
     },
     toggleAdvanced () {

src/views/project/ProjectForm.vue

@@ -1,131 +0,0 @@
-<template>
-  <page-header-wrapper :title="新增项目">
-    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :layout="vertical">
-      <a-form-model-item label="项目名称">
-        <a-input v-model="form.projectName" v-decorator="[
-            'projectName',
-            {
-              rules: [{ required: true, message: '项目名称为必填' }],
-            },
-          ]"/>
-      </a-form-model-item>
-      <a-form-model-item label="培训种类">
-        <a-select v-model="form.trainClass" placeholder="--请选择--">
-          <a-select-option value="shanghai"> Zone one </a-select-option>
-          <a-select-option value="beijing"> Zone two </a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <a-form-model-item label="培训类型">
-        <a-select v-model="form.trainType" placeholder="--请选择--">
-          <a-select-option value="1"> 必修课 </a-select-option>
-          <a-select-option value="2"> 选修课 </a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <a-form-model-item label="培训方式">
-        <a-select v-model="form.trainWay" placeholder="--请选择--">
-          <a-select-option value="1"> 培训 </a-select-option>
-          <a-select-option value="2"> 考试 </a-select-option>
-          <a-select-option value="3"> 培训-练习 </a-select-option>
-          <a-select-option value="4"> 培训-练习-考试 </a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <a-form-model-item label="人员类型">
-        <a-select v-model="form.personType" placeholder="--请选择--">
-          <a-select-option v-for="item in personType" :key="item.id"> {{ item.name }} </a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <!-- 时间选择器呢 -->
-      <a-form-item label="培训时间" style="margin-bottom: 0">
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
-          <a-date-picker v-model="form.trainSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
-        </a-form-item>
-        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
-          <a-date-picker v-model="form.trainEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
-        </a-form-item>
-      </a-form-item>
-      <!-- 时间选择器 -->
-      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="练习时间" style="margin-bottom: 0">
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
-          <a-date-picker v-model="form.practiceSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
-        </a-form-item>
-        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
-          <a-date-picker v-model="form.practiceEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
-        </a-form-item>
-      </a-form-item>
-      <!-- 时间选择器 -->
-      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试时间" style="margin-bottom: 0">
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
-          <a-date-picker v-model="form.examSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
-        </a-form-item>
-        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
-          <a-date-picker v-model="form.examEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
-        </a-form-item>
-      </a-form-item>
-
-      <!-- 考试次数 -->
-      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试次数" style="margin-bottom: 0">
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
-          <a-input-number v-model="form.examNumber" :min="0" style="width: 100%" />
-        </a-form-item>
-        <span> 补考次数: </span>
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
-          <a-input-number v-model="form.resitNumber" :min="0" style="width: 100%" />
-        </a-form-item>
-        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
-          <a-button type="primary" @click="javascript;"> 随机补考 </a-button>
-        </a-form-item>
-      </a-form-item>
-
-      <a-form-model-item label="模拟考试" v-if="['2', '3', '4'].includes(form.trainWay)">
-        <a-radio-group v-model="form.mockExam">
-          <a-radio value="1"> 允许 </a-radio>
-          <a-radio value="0"> 不允许 </a-radio>
-        </a-radio-group>
-      </a-form-model-item>
-      <a-form-model-item label="备注">
-        <a-input v-model="form.remark" type="textarea" />
-      </a-form-model-item>
-      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
-        <a-button type="primary" @click="toNext"> 下一步 </a-button>
-        <a-button style="margin-left: 10px"> 取消 </a-button>
-      </a-form-model-item>
-    </a-form-model>
-  </page-header-wrapper>
-</template>
-<script>
-import {getPersonType} from '@/api/project/project'
-
-export default {
-  data() {
-    return {
-      labelCol: { span: 4 },
-      wrapperCol: { span: 14 },
-      form: {
-        projectName: '',
-      },
-    }
-  },
-  components: {
-      getPersonType,
-  },
-  created: {
-    
-  },
-  methods: {
-    //获取字典值
-    getPersonType() {
-      return getPersonType(Object.assign(parameter)).then((res) => {
-        return res
-      })
-    },
-
-    //下一步，跳转页面带上from对象
-    toNext() {
-      console.log('toNext', this.form)
-    },
-  },
-}
-</script>

src/views/project/ProjectList.vue

@@ -75,7 +75,7 @@
 import moment from 'moment'
 import { STable } from '@/components'
 import { getProjectList } from '@/api/project/project'
-import ProjectForm from '@/views/project/ProjectForm'
+import ProjectForm from '@/views/project/form/ProjectForm'
 import router from '@/router/index.js'
 
 export default {
@@ -107,7 +107,6 @@ export default {
         {
           title: '项目状态',
           dataIndex: 'status',
-          key: 'status',
           customRender: (text, record, index) => {
             //项目状态 1-未发布 2-未开始 3-进行中  4-已完成  5-已中止
             if (text == 1) {
@@ -132,7 +131,6 @@ export default {
         {
           title: '操作',
           width: 200,
-          key: 'status',
           align: 'center',
           scopedSlots: { customRender: 'action' },
         },

src/views/project/form/ProjectCourseSelect.vue

@@ -0,0 +1,38 @@
+<template>
+<div>
+    <h1>课程选择</h1>
+</div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》'
+
+export default {
+//import引入的组件需要注入到对象中才能使用
+components: {},
+props: {},
+data() {
+//这里存放数据
+return {};
+},
+//计算属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {},
+//方法集合
+methods: {},
+created() {},  //生命周期 - 创建完成（可以访问当前this实例）
+mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+
+</script>
+<style scoped>
+</style>

src/views/project/form/ProjectForm.vue

@@ -0,0 +1,188 @@
+<template>
+  <!-- <page-header-wrapper :title="新增项目"> -->
+  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :layout="vertical">
+    <a-row :gutter="24">
+      <a-col :md="24" :sm="24">
+        <a-form-model-item label="项目名称">
+          <a-input
+            v-model="form.projectName"
+            v-decorator="[
+              'projectName',
+              {
+                rules: [{ required: true, message: '项目名称为必填' }],
+              },
+            ]"
+          />
+        </a-form-model-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">
+        <a-form-model-item label="培训种类">
+          <a-select v-model="form.trainClass" placeholder="--请选择--">
+            <a-select-option value="shanghai"> Zone one </a-select-option>
+          </a-select>
+          <a-button type="primary" @click="createClass"> 新增种类 </a-button>
+        </a-form-model-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-model-item label="培训类型">
+          <a-select v-model="form.trainType" placeholder="--请选择--">
+            <a-select-option value="1"> 必修课 </a-select-option>
+            <a-select-option value="2"> 选修课 </a-select-option>
+          </a-select>
+        </a-form-model-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-model-item label="培训方式">
+          <a-select v-model="form.trainWay" placeholder="--请选择--">
+            <a-select-option value="1"> 培训 </a-select-option>
+            <a-select-option value="2"> 考试 </a-select-option>
+            <a-select-option value="3"> 培训-练习 </a-select-option>
+            <a-select-option value="4"> 培训-练习-考试 </a-select-option>
+          </a-select>
+        </a-form-model-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-model-item label="人员类型">
+          <a-select v-model="form.personType" placeholder="--请选择--">
+            <a-select-option v-for="item in personType" :key="item.value"> {{ item.name }} </a-select-option>
+          </a-select>
+        </a-form-model-item>
+      </a-col>
+      <!-- 时间选择器呢 -->
+      <a-col :span="24">
+        <a-form-item label="培训时间" style="margin-bottom: 0">
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+            <a-date-picker v-model="form.trainSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+          </a-form-item>
+          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+            <a-date-picker v-model="form.trainEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+          </a-form-item>
+        </a-form-item>
+      </a-col>
+      <!-- 时间选择器 -->
+      <a-col :span="24">
+        <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="练习时间" style="margin-bottom: 0">
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+            <a-date-picker v-model="form.practiceSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+          </a-form-item>
+          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+            <a-date-picker v-model="form.practiceEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+          </a-form-item>
+        </a-form-item>
+      </a-col>
+      <!-- 时间选择器 -->
+      <a-col :span="24">
+        <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试时间" style="margin-bottom: 0">
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+            <a-date-picker v-model="form.examSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+          </a-form-item>
+          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+            <a-date-picker v-model="form.examEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+          </a-form-item>
+        </a-form-item>
+      </a-col>
+
+      <!-- 考试次数 -->
+      <a-col :span="24">
+        <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试次数" style="margin-bottom: 0">
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
+            <a-input-number v-model="form.examNumber" :min="0" style="width: 100%" />
+          </a-form-item>
+          <span> 补考次数: </span>
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
+            <a-input-number v-model="form.resitNumber" :min="0" style="width: 100%" />
+          </a-form-item>
+          <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
+            <a-button type="primary" @click="javascript;"> 随机补考 </a-button>
+          </a-form-item>
+        </a-form-item>
+      </a-col>
+
+      <a-col :span="24">
+        <a-form-model-item label="模拟考试" v-if="['2', '3', '4'].includes(form.trainWay)">
+          <a-radio-group v-model="form.mockExam">
+            <a-radio value="1"> 允许 </a-radio>
+            <a-radio value="0"> 不允许 </a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+      </a-col>
+      <a-col :span="24">
+        <a-form-model-item label="备注">
+          <a-input v-model="form.remark" type="textarea" />
+        </a-form-model-item>
+      </a-col>
+      <a-col :span="24">
+        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+          <a-button type="primary" @click="toNext"> 下一步 </a-button>
+          <a-button style="margin-left: 10px"> 取消 </a-button>
+        </a-form-model-item>
+      </a-col>
+    </a-row>
+  </a-form-model>
+  <!-- </page-header-wrapper> -->
+</template>
+<script>
+import { dictGet } from '@/api/project/project'
+
+export default {
+  data() {
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form: this.$form.createForm(this),
+      personType: [],
+    }
+  },
+  components: {
+    dictGet,
+  },
+  created() {
+    this.fetchTemplateData()
+  },
+  methods: {
+    //获取字典值
+    fetchTemplateData() {
+      console.log('fetchTemplateData')
+      let formData = { type: 1 }
+      //请求数据方法
+      dictGet(formData).then((res) => {
+        console.log(res)
+        //这里根据自己接口返回进行判断 和循环赋值
+        if (res.code == 200) {
+          const result = res.data
+          result.forEach((r) => {
+            this.personType.push({
+              value: r.value,
+              name: r.name,
+            })
+          })
+          console.log("----------------",this.personType)
+        }
+      })
+    },
+
+    //跳转到下一页面
+    //下一步，跳转页面带上from对象
+    toNext() {
+      console.log('toNext', this.form)
+      const {
+        form: { validateFields },
+      } = this
+      // 先校验，通过表单校验后，才进入下一步
+      validateFields((err, values) => {
+        if (!err) {
+          this.$emit('nextStep')
+        }
+      })
+    },
+    createClass(){
+      console.log("-------createClass--------")
+    }
+  },
+}
+</script>

src/views/project/form/ProjectStepForm.vue

@@ -0,0 +1,70 @@
+<template>
+  <page-header-wrapper>
+    <!-- PageHeader 第二种使用方式 (v-slot) -->
+    <template v-slot:content>
+      将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
+    </template>
+    <a-card :bordered="false">
+      <a-steps class="steps" :current="currentTab">
+        <a-step title="基本信息" />
+        <a-step title="选择单位" />
+        <a-step title="选择课程" />
+        <a-step title="选择人员" />
+        <a-step title="完成" />
+      </a-steps>
+      <div class="content">
+        <step1 v-if="currentTab === 0" @nextStep="nextStep"/>
+        <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
+        <step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
+        <step2 v-if="currentTab === 3" @nextStep="nextStep" @prevStep="prevStep"/>
+        <step3 v-if="currentTab === 4" @prevStep="prevStep" @finish="finish"/>
+      </div>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import Step1 from './ProjectForm'
+import Step2 from './ProjectUnitSelect.vue'
+import Step3 from './ProjectCourseSelect.vue'
+
+export default {
+  name: 'StepForm',
+  components: {
+    Step1,
+    Step2,
+    Step3,
+  },
+  data () {
+    return {
+      currentTab: 0,
+      // form
+      form: null,
+    }
+  },
+  methods: {
+
+    // handler
+    nextStep () {
+      if (this.currentTab < 2) {
+        this.currentTab += 1
+      }
+    },
+    prevStep () {
+      if (this.currentTab > 0) {
+        this.currentTab -= 1
+      }
+    },
+    finish () {
+      this.currentTab = 0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .steps {
+    max-width: 750px;
+    margin: 16px auto;
+  }
+</style>

src/views/project/form/ProjectUnitSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <page-header-wrapper title="请选择受训单位">
     <a-form-model :model="form">
-      <a-form-model-item :wrapper-col="{ span: 14, offset: 4,}" >
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
         <a-button type="primary" @click="toNext"> 下一步 </a-button>
         <a-button style="margin-left: 10px"> 取消 </a-button>
       </a-form-model-item>
@@ -111,7 +111,7 @@ function handleTreeData(data, targetKeys = []) {
 export default {
   data() {
     return {
-      form: {},
+      form: this.$form.createForm(this),
       targetKeys: [],
       dataSource: transferDataSource,
 
@@ -131,6 +131,18 @@ export default {
     },
   },
   methods: {
+    toNext() {
+      console.log('toNext', this.form)
+      const {
+        form: { validateFields },
+      } = this
+      // 先校验，通过表单校验后，才进入下一步
+      validateFields((err, values) => {
+        if (!err) {
+          this.$emit('nextStep')
+        }
+      })
+    },
     onChange(targetKeys) {
       console.log('Target Keys:', targetKeys)
       this.targetKeys = targetKeys

src/views/security/maps/map.js

@@ -1,5 +0,0 @@
-export const typeMap = {
-  'CORPORATION': '公司',
-  'MALL': '门店',
-  'STORE': '店铺'
-}

src/views/security/menu/MenuForm.vue

@@ -0,0 +1,388 @@
+<template>
+  <a-modal
+    :title="modalTitle"
+    :width="1000"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    :destroyOnClose="true"
+  >
+    <a-spin :spinning="formLoading">
+      <a-form :form="form" >
+        
+        <a-form-item v-show="false" >
+          <a-input v-decorator="['id']" />
+        </a-form-item>
+        
+        <a-row :gutter="24">
+          <a-col :md="12" :sm="24">
+            <a-form-item
+              label="菜单名称"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              hasFeedback
+            >
+              <a-input placeholder="请输入菜单名称" v-decorator="['name',{rules: [{required: true, min: 1, message: '请输入菜单名称！'}]}]" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :sm="24">
+            <a-form-item
+              style="width: 100%"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="菜单编号"
+              hasFeedback
+            >
+              <a-input placeholder="请输入菜单编号" v-decorator="['code', {rules: [{required: true, min: 1, message: '请输入菜单编号！'}]}]" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+          <a-col :md="12" :sm="24">
+            <a-form-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="菜单层级"
+            >
+              <a-radio-group v-decorator="['type',{rules: [{ required: true, message: '请选择菜单层级！' }]}]" >
+                <a-radio value="0" @click="meneTypeFunc(0)">目录</a-radio>
+                <a-radio value="1" @click="meneTypeFunc(1)">菜单</a-radio>
+                <a-radio value="2" @click="meneTypeFunc(2)">按钮</a-radio>
+              </a-radio-group>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :sm="24">
+            <div v-show="pidShow">
+              <a-form-item
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                label="父级菜单"
+                has-feedback
+              >
+                <a-tree-select
+                  v-decorator="['pid', {rules: [{ required: true, message: '请选择父级菜单！' }]}]"
+                  style="width: 100%"
+                  :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
+                  :treeData="menuTreeData"
+                  placeholder="请选择父级菜单"
+                  treeDefaultExpandAll
+                  :replaceFields="{
+                    children:'children',
+                    title:'name',
+                    key:'id',
+                    value:'id'
+                  }"
+                >
+                  <span slot="title" slot-scope="{ id }">{{ id }}
+                  </span>
+                </a-tree-select>
+              </a-form-item>
+            </div>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24" >
+          <a-col :md="12" :sm="24">
+            <div v-show="componentShow">
+              <a-form-item
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                hasFeedback
+              >
+                <span slot="label">
+                  <a-tooltip title="前端vue组件 views文件夹下路径，例：system/menu/index。注：目录级填写：RouteView(不带面包屑)，PageView(带面包屑)，菜单级内链打开http链接填写：Iframe">
+                    <a-icon type="question-circle-o" />
+                  </a-tooltip>&nbsp;
+                  前端组件
+                </span>
+                <a-input placeholder="请输入前端组件" :disabled="componentDisabled" prop="component" v-decorator="['component',{rules: [{required: componentRequired, message: '请输入前端组件'}]}]"/><!-- ,{rules: [{required: componentRequired, min: 1, message: '请输入前端组件！'}]}  -->
+              </a-form-item>
+            </div>
+          </a-col>
+          <a-col :md="12" :sm="24">
+            <div v-show="routerShow">
+              <a-form-item
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                hasFeedback
+              >
+                <span slot="label">
+                  <a-tooltip title="浏览器显示的URL，例：/menu，对应打开页面为菜单页面">
+                    <a-icon type="question-circle-o" />
+                  </a-tooltip>&nbsp;
+                  路由地址
+                </span>
+                <a-input placeholder="请输入路由" v-decorator="['router', {rules: [{required: routerRequired, message: '请输入路由！'}]}]" />
+              </a-form-item>
+            </div>
+            <div v-show="permissionShow">
+              <a-form-item
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                label="权限标识"
+                hasFeedback
+              >
+                <a-input placeholder="请输入权限标识" v-decorator="['permission', {rules: [{required: permissionRequired, message: '请输入权限标识！'}]}]" />
+              </a-form-item>
+            </div>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+          <a-col :md="12" :sm="24">
+            <a-form-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="是否可见"
+            >
+              <a-switch id="visible" checkedChildren="是" unCheckedChildren="否" v-decorator="['visible', { valuePropName: 'checked' }]"/><!-- defaultChecked -->
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :sm="24">
+            <a-form-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="排序"
+            >
+              <a-input-number style="width: 100%" v-decorator="['intCode', { initialValue: 100 }]" :min="1" :max="1000" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+          
+          <a-col :md="12" :sm="24">
+            <a-form-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="备注"
+              hasFeedback
+            >
+              <a-input placeholder="请输入备注" v-decorator="['remark']"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import { menuTree, menuAdd, menuEdit } from '@/api/security/menu'
+  export default {
+
+    data () {
+      return {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 6 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 }
+        },
+        modalTitle: "新增菜单",
+        visible: false,
+        confirmLoading: false,
+        menuTreeData: [],
+        componentShow: true,
+        componentDisabled: false,
+        componentRequired: true,
+        routerRequired: true,
+        routerShow: true,
+        pidShow: true,
+        permissionShow: true,
+        permissionRequired: true,
+        formLoading: true,
+        type: '',
+        form: this.$form.createForm(this)
+      }
+    },
+
+    methods: {
+      // 新增打开页面初始化
+      add (type) {
+        this.modalTitle = "新增菜单"
+        this.visible = true
+
+        // 默认选中菜单项，并初始化
+        this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: '1' })
+        this.meneTypeFunc('1')
+
+        // 默认选中的单选框
+        this.form.getFieldDecorator('visible', { initialValue: true })
+        
+        // 默认加载菜单树
+        this.getMenuTree()
+
+        this.formLoading = false
+      },
+      // 编辑打开页面初始化
+      edit (record) {
+        this.modalTitle = "编辑菜单"
+        this.visible = true
+
+        // 默认选中菜单项，并初始化
+        this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: record.type.toString() })
+        this.meneTypeFunc(record.type.toString())
+      
+        // 默认选中的单选框
+        // eslint-disable-next-line no-unused-vars
+        const visibleDef = false
+        // eslint-disable-next-line eqeqeq
+        if (record.visible == 1) {
+          this.visibleDef = true
+        }
+        this.form.getFieldDecorator('visible', { valuePropName: 'checked', initialValue: this.visibleDef })
+        
+        setTimeout(() => {
+           this.setMenuItem(record)
+           // 默认加载菜单树
+           this.getMenuTree()
+        }, 100)
+        
+        this.formLoading = false
+      },
+      getMenuTree () {
+        menuTree().then((res) => {
+          if (res.code == 200) {
+            this.form.resetFields(`pid`, [])
+            this.menuTreeData = [{
+              'id': '-1',
+              'parentId': '0',
+              'name': '顶级',
+              'value': '0',
+              'pid': '0',
+              'children': res.data
+            }]
+            console.log(this.menuTreeData)
+          } else {
+            this.$message.warning(res.msg)
+          }
+        })
+      },
+      /**
+       * 选择菜单类型执行初始化表单变量
+       */
+      meneTypeFunc (type) {
+        this.type = type
+        // eslint-disable-next-line eqeqeq
+        if (type == '0' || type == '1') {
+          // 路由必填，设置空值，并显示
+          this.routerRequired = true
+          this.form.getFieldDecorator('router', { initialValue: '' })
+          this.routerShow = true
+          // 权限标识框隐藏，选填，给空值
+          this.permissionShow = false
+          this.permissionRequired = false
+          this.form.getFieldDecorator('permission', { initialValue: '' })
+        }
+        // eslint-disable-next-line eqeqeq
+        if (type == '0') {
+          // 组件默认为显示，设置可输入，给默认组件 PageView，验证必填
+          this.componentShow = true
+          this.componentDisabled = false
+          this.form.getFieldDecorator('component', { initialValue: 'PageView' })
+          this.componentRequired = true
+          // 父级初始化顶级，并将其隐藏
+          this.form.getFieldDecorator('pid', { initialValue: '0' })
+          this.pidShow = false
+        } else {
+          // eslint-disable-next-line eqeqeq
+          if (type == '1') {
+            // 组件可以手输，取消值
+            this.componentDisabled = false
+            this.form.getFieldDecorator('component', { initialValue: '' })
+          }
+          // 父级选择放开
+          this.pidShow = true
+        }
+        // eslint-disable-next-line eqeqeq
+        if (type == '2') {
+          // 组件设置不填，不可输入，并给空（手输的跟设置的）
+          this.componentRequired = false
+          this.componentDisabled = true
+          this.form.resetFields(`component`, [])
+          this.form.getFieldDecorator('component', { initialValue: '' })
+          // 路由选填，设置空值，并隐藏
+          this.routerRequired = false
+          this.form.getFieldDecorator('router', { initialValue: '' })
+          this.routerShow = false
+          // 权限标识框显示，必填，给空值
+          this.permissionShow = true
+          this.permissionRequired = true
+          this.form.getFieldDecorator('permission', { initialValue: '' })
+        }
+      },
+      handleSubmit () {
+        const { form: { validateFields } } = this
+        this.confirmLoading = true
+        validateFields((errors, values) => {
+          if (!errors) {
+            if (values.visible) {
+              values.visible = 1
+            } else {
+              values.visible = 0
+            }
+            console.log(values)
+            if (values.id) {
+              menuEdit(values).then((res) => {
+                this.confirmLoading = false
+                if (res.code == 200) {
+                  this.$message.success('编辑成功')
+                  this.$emit('ok', values)
+                  this.handleCancel()
+                } else {
+                  this.$message.error('编辑失败：' + res.msg)
+                }
+              }).finally((res) => {
+                this.confirmLoading = false
+              })
+            } else {
+              menuAdd(values).then((res) => {
+                this.confirmLoading = false
+                if (res.code == 200) {
+                  this.$message.success('新增成功')
+                  this.$emit('ok', values)
+                  this.handleCancel()
+                } else {
+                  this.$message.error('新增失败：' + res.msg)
+                }
+              }).finally((res) => {
+                this.confirmLoading = false
+              })
+            }
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        this.form.resetFields()
+        this.confirmLoading = false
+        this.visible = false
+      },
+      setMenuItem (record) {
+        console.log(record)
+        this.form.setFieldsValue(
+          {
+            id: record.id,
+            name: record.name,
+            code: record.code,
+            component: record.component,
+            permission: record.permission,
+            router: record.router,
+            intCode: record.intCode,
+            remark: record.remark
+          }
+        )
+        this.form.getFieldDecorator('pid', { initialValue: record.pid })
+        this.pid = record.pid
+      }
+    }
+
+  }
+</script>

src/views/security/menu/MenuForm2.vue

@@ -0,0 +1,372 @@
+<template>
+  <a-modal
+    title="新增菜单"
+    :width="1000"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    :destroyOnClose="true"
+  >
+    <a-spin :spinning="formLoading">
+      <a-form-model ref="ruleForm" :model="form" :rules="rules" >
+        <a-row :gutter="24">
+          <a-col :md="12" :sm="24">
+            <a-form-model-item
+              label="菜单名称"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              hasFeedback
+              prop="name"
+            >
+              <a-input v-model="form.name" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :md="12" :sm="24">
+            <a-form-model-item
+              style="width: 100%"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="菜单编号"
+              hasFeedback
+              prop="code"
+            >
+              <a-input v-model="form.code" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+          <a-col :md="12" :sm="24">
+            <a-form-model-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="菜单层级"
+              prop="type"
+            >
+              <a-radio-group v-model="form.type" >
+                <a-radio :value="0" @click="meneTypeFunc(0)">目录</a-radio>
+                <a-radio :value="1" @click="meneTypeFunc(1)">菜单</a-radio>
+                <a-radio :value="2" @click="meneTypeFunc(2)">按钮</a-radio>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :md="12" :sm="24">
+            <div v-show="pidShow">
+              <a-form-model-item
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                label="父级菜单"
+                has-feedback
+                prop="pid"
+              >
+                <a-tree-select
+                  v-model="form.pid" 
+                  style="width: 100%"
+                  :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
+                  :treeData="menuTreeData"
+                  placeholder="请选择父级菜单"
+                  treeDefaultExpandAll
+                  :replaceFields="{
+                    children:'children',
+                    title:'name',
+                    key:'id',
+                    value:'id'
+                  }"
+                >
+                  <span slot="title" slot-scope="{ id }">{{ id }}
+                  </span>
+                </a-tree-select>
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24" >
+          <a-col :md="12" :sm="24">
+            <div v-show="componentShow">
+              <a-form-model-item
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                hasFeedback
+                prop="component"
+              >
+                <span slot="label">
+                  <a-tooltip title="前端vue组件 views文件夹下路径，例：system/menu/index。注：目录级填写：RouteView(不带面包屑)，PageView(带面包屑)，菜单级内链打开http链接填写：Iframe">
+                    <a-icon type="question-circle-o" />
+                  </a-tooltip>&nbsp;
+                  前端组件
+                </span>
+                <a-input placeholder="请输入前端组件" :disabled="componentDisabled" v-model="form.component"/><!-- ,{rules: [{required: componentRequired, min: 1, message: '请输入前端组件！'}]}  -->
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :md="12" :sm="24">
+            <div v-show="routerShow">
+              <a-form-model-item
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                hasFeedback
+                prop="router"
+              >
+                <span slot="label">
+                  <a-tooltip title="浏览器显示的URL，例：/menu，对应打开页面为菜单页面">
+                    <a-icon type="question-circle-o" />
+                  </a-tooltip>&nbsp;
+                  路由地址
+                </span>
+                <a-input placeholder="请输入路由" v-model="form.router" />
+              </a-form-model-item>
+            </div>
+            <div v-show="permissionShow">
+              <a-form-model-item
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                label="权限标识"
+                hasFeedback
+                prop="permission"
+              >
+                <a-input placeholder="请输入权限标识" v-model="form.permission" />
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+          <a-col :md="12" :sm="24">
+            <a-form-model-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="是否可见"
+              prop="visible"
+            >
+              <a-switch checked-children="开" un-checked-children="关" default-checked v-model="form.visible"/><!-- defaultChecked -->
+            </a-form-model-item>
+          </a-col>
+          <a-col :md="12" :sm="24">
+            <a-form-model-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="排序"
+              prop="intCode"
+            >
+              <a-input-number style="width: 100%" v-model="form.intCode" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+          
+          <a-col :md="12" :sm="24">
+            <a-form-model-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              label="备注"
+              hasFeedback
+              prop="remark"
+            >
+              <a-input v-model="form.remark"></a-input>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import { menuTree, menuAdd, menuEdit } from '@/api/security/menu'
+  export default {
+
+    data () {
+      return {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 6 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 }
+        },
+        form: {
+          name: '',
+          code: '',
+          pid: '',
+          type: 1,
+          router: '',
+          component: '',
+          permission: '',
+          visible: true,
+          intCode: 0,
+          remark: ''
+        },
+        rules: {
+          name: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 5, message: '长度不能小于5', trigger: 'blur' }],
+          code: [{ required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, message: '长度不能小于5', trigger: 'blur' }]
+        },
+        visible: false,
+        confirmLoading: false,
+        menuTreeData: [],
+        componentShow: true,
+        componentDisabled: false,
+        componentRequired: true,
+        routerRequired: true,
+        routerShow: true,
+        pidShow: true,
+        permissionShow: true,
+        permissionRequired: true,
+        formLoading: true
+      }
+    },
+
+    methods: {
+      // 新增打开页面初始化
+      add (type) {
+        this.visible = true
+
+        // 默认选中菜单项，并初始化
+        this.meneTypeFunc(1)
+
+        // 默认加载菜单树
+        this.getMenuTree()
+
+        this.formLoading = false
+      },
+      // 编辑打开页面初始化
+      edit (record) {
+        this.visible = true
+        
+        // 默认选中菜单项，并初始化
+        this.meneTypeFunc(record.type)
+        
+        setTimeout(() => {
+           // 默认加载菜单树
+           this.getMenuTree()
+           
+           this.form = record
+           // 默认选中的单选框
+           this.form.visible = record.visible === 1
+           
+           this.formLoading = false
+        }, 100)
+      },
+      getMenuTree () {
+        menuTree().then((res) => {
+          if (res.code == 200) {
+            this.form.pid = ''
+            this.menuTreeData = [{
+              'id': '-1',
+              'parentId': '0',
+              'name': '顶级',
+              'value': '0',
+              'pid': '0',
+              'children': res.data
+            }]
+            console.log(this.menuTreeData)
+          } else {
+            this.$message.warning(res.msg)
+          }
+        })
+      },
+      /**
+       * 选择菜单类型执行初始化表单变量
+       */
+      meneTypeFunc (type) {
+        if (type === 0 || type === 1) {
+          // 路由必填，设置空值，并显示
+          this.routerRequired = true
+          this.routerShow = true
+          this.form.router = ''
+          // 权限标识框隐藏，选填，给空值
+          this.permissionShow = false
+          this.permissionRequired = false
+          this.form.permission = ''
+        }
+        // eslint-disable-next-line eqeqeq
+        if (type === 0) {
+          // 组件默认为显示，设置可输入，给默认组件 PageView，验证必填
+          this.componentShow = true
+          this.componentDisabled = false
+          
+          this.form.component = 'PageView'
+          this.componentRequired = true
+          // 父级初始化顶级，并将其隐藏
+          this.form.pid = 0
+          this.pidShow = false
+        } else {
+          // eslint-disable-next-line eqeqeq
+          if (type === 1) {
+            // 组件可以手输，取消值
+            this.componentDisabled = false
+            this.form.component = ''
+          }
+          // 父级选择放开
+          this.pidShow = true
+        }
+        // eslint-disable-next-line eqeqeq
+        if (type === 2) {
+          // 组件设置不填，不可输入，并给空（手输的跟设置的）
+          this.componentRequired = false
+          this.componentDisabled = true
+          // this.form.resetFields(`component`, []) 不懂
+          this.form.component = ''
+          // 路由选填，设置空值，并隐藏
+          this.routerRequired = true
+          this.form.router = ''
+          this.routerShow = false
+          // 权限标识框显示，必填，给空值
+          this.permissionShow = true
+          this.permissionRequired = true
+          this.form.permission = ''
+        }
+      },
+      handleSubmit () {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            if (this.form.visible) {
+              this.form.visible = 1
+            } else {
+              this.form.visible = 0
+            }
+            if (this.form.id) {
+              menuAdd(this.form).then((res) => {
+                this.confirmLoading = false
+                if (res.code == 200) {
+                  this.$message.success('新增成功')
+                  this.$emit('ok', this.form)
+                  this.handleCancel()
+                } else {
+                  this.$message.error('新增失败：' + res.msg)
+                }
+              }).finally((res) => {
+                this.confirmLoading = false
+              })
+            } else {
+              menuEdit(this.form).then((res) => {
+                this.confirmLoading = false
+                if (res.code == 200) {
+                  this.$message.success('新增成功')
+                  this.$emit('ok', this.form)
+                  this.handleCancel()
+                } else {
+                  this.$message.error('新增失败：' + res.msg)
+                }
+              }).finally((res) => {
+                this.confirmLoading = false
+              })
+            } 
+          } else {
+            return false
+          }
+        })
+      },
+      handleCancel () {
+        this.$refs.ruleForm.resetFields()
+        delete this.form.id
+        this.confirmLoading = false
+        this.visible = false
+      }
+    }
+  }
+</script>

src/views/security/menu/MenuList.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="菜单名称">
+                <a-input v-model="queryParam.name" allow-clear placeholder="请输入菜单名称"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button @click="() => {queryParam = {}, this.loadData()}">重置</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      
+      <div class="table-operator">
+        <a-button type="primary" icon="plus" @click="$refs.menuForm.add()">新增菜单</a-button>
+      </div>
+      
+      <s-table
+        ref="table"
+        :rowKey="(record) => record.id"
+        :columns="columns"
+        :alert="false"
+        :data="loadData"
+        :showPagination="false"
+        :expandRowByClick="true"
+      >
+        <span slot="type" slot-scope="text, record">
+          <a-tag color="cyan" v-if="text === 0">
+            {{ record.type | typeFilter }}
+          </a-tag>
+          <a-tag color="blue" v-if="text === 1">
+            {{ record.type | typeFilter }}
+          </a-tag>
+          <a-tag color="purple" v-if="text === 2">
+            {{ record.type | typeFilter }}
+          </a-tag>
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <template>
+            <a @click="$refs.menuForm.edit(record)">编辑</a>
+            <a-divider type="vertical"/>
+            <a-popconfirm placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
+              <a>删除</a>
+            </a-popconfirm>
+          </template>
+        </span>
+      </s-table>
+      <menu-form ref="menuForm" @ok="handleOk"/>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { menuList, menuDel } from '@/api/security/menu'
+import MenuForm from './MenuForm'
+import { listToTree } from '@/utils/util'
+import { menuTypeMap } from '@/views/filterMap/menuTypeMap'
+const rootParentId = 0
+
+export default {
+  components: {
+    STable,
+    MenuForm
+  },
+  data () {
+    return {
+      data: [],
+      queryParam: {},
+      loading: true,
+      columns: [
+        {
+          title: '菜单名称',
+          dataIndex: 'name',
+          width: '20%'
+        },
+        {
+          title: '菜单类型',
+          dataIndex: 'type',
+          scopedSlots: { customRender: 'type' }
+        },
+        {
+          title: '组件',
+          dataIndex: 'component',
+          width: '20%',
+          ellipsis: true
+        },
+        {
+          title: '路由地址',
+          dataIndex: 'router',
+          key: 'router',
+          ellipsis: true
+        },
+        {
+          title: '排序',
+          dataIndex: 'intCode'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '150px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        return menuList(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res.data
+        })
+      }
+    }
+  },
+  created () {
+    // 根据权限加载，待处理
+    // if (this.hasPerm('sysMenu:edit') || this.hasPerm('sysMenu:delete')) {
+    //   this.columns.push({
+    //     title: '操作',
+    //     dataIndex: 'action',
+    //     width: '150px',
+    //     scopedSlots: { customRender: 'action' }
+    //   })
+    // }
+  },
+  filters: {
+    typeFilter (type) {
+      return menuTypeMap[type]
+    }
+  },
+  methods: {
+    handleDel (record) {
+      menuDel({id: record.id, deleteReason: ""}).then((res) => {
+        if (res.code == 200) {
+          this.$message.success('删除成功')
+          this.$refs.table.refresh()
+        } else {
+          this.$message.error('删除失败：' + res.msg)
+        }
+      })
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    }
+  }
+}
+
+</script>
+<style scoped>
+.table-operator {
+  margin-bottom: 18px;
+}
+button {
+  margin-right: 8px;
+}
+</style>

src/views/security/modules/CreateForm.vue

@@ -1,83 +0,0 @@
-<template>
-  <a-modal v-model="visible" :title="modalTitle" @ok="onSubmit" @cancel="onCancel" :width="1020">
-    <template slot="footer">
-      <a-button key="cancel" @click="onCancel">取消</a-button>
-      <a-button key="submit" type="primary" @click="onSubmit">保存</a-button>
-    </template>
-    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-model-item ref="name" label="名称" prop="name">
-        <a-input v-model="form.name"/>
-      </a-form-model-item>
-    </a-form-model>
-  </a-modal>
-</template>
-
-<script>
-import { userGet, userAdd, userUpdate } from '@/api/security/user'
-
-export default {
-  props: {
-    id: {
-      type: String,
-      default: undefined
-    }
-  },
-  data () {
-    return {
-      modalTitle: '新增',
-      visible: false,
-      labelCol: { span: 4 },
-      wrapperCol: { span: 16 },
-      form: {
-        name: ''
-      },
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' },
-          { min: 2, message: '长度不能小于2', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    add () {
-      this.modalTitle = '新增'
-      this.visible = true
-    },
-    edit (obj) {
-      this.modalTitle = '修改'
-      this.visible = true
-      userGet({ id: obj.id }).then(data => {
-        const form = data.data
-        this.form = form
-      })
-    },
-    onSubmit (e) {
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          if (this.form.id) {
-            userUpdate(this.form).then(data => {
-              this.$emit('ok')
-              this.onCancel()
-            })
-          } else {
-            userAdd(this.form).then(data => {
-              this.$emit('ok')
-              this.onCancel()
-            })
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    onCancel () {
-      this.$refs.ruleForm.resetFields()
-      this.visible = false
-    },
-    onReset () {
-      this.$refs.ruleForm.resetFields()
-    }
-  }
-}
-</script>

src/views/security/modules/UserDetail.vue

@@ -1,48 +0,0 @@
-<template>
-  <a-drawer
-    title="品牌详情"
-    width="640"
-    placement="right"
-    :visible="visible"
-    @close="onClose">
-    <a-descriptions :column="{ sm: 2, xs: 1 }">
-      <a-descriptions-item label="名称">{{ model.name }}</a-descriptions-item>
-      <a-descriptions-item label="编码">{{ model.code }}</a-descriptions-item>
-      <a-descriptions-item label="创建时间">{{ model.createdAt | moment('YYYY-MM-DD') }}</a-descriptions-item>
-      <a-descriptions-item label="上次修改时间">{{ model.updatedAt }}</a-descriptions-item>
-      <a-descriptions-item label="状态">{{ model.status | statusFilter }}</a-descriptions-item>
-      <a-descriptions-item label="排序">{{ model.sortOrder }}</a-descriptions-item>
-    </a-descriptions>
-  </a-drawer>
-</template>
-
-<script>
-import { userGet } from '@/api/security/user'
-import { statusMap } from '@/views/status/statusMap'
-
-export default {
-  data () {
-    return {
-      visible: false,
-      model: {}
-    }
-  },
-  filters: {
-    statusFilter (status) {
-      return statusMap[status]
-    }
-  },
-  methods: {
-    show (id) {
-      this.visible = true
-      userGet({ id: id }).then(data => {
-        this.model = data.data
-      })
-    },
-    onClose () {
-      this.model = {}
-      this.visible = false
-    }
-  }
-}
-</script>

src/views/security/resource/ResourceTree.vue

@@ -1,186 +0,0 @@
-<template>
-  <a-card :bordered="false">
-    <a-row :gutter="8">
-      <a-col :span="5">
-        <s-tree
-          :dataSource="orgTree"
-          :openKeys.sync="openKeys"
-          :search="true"
-          @click="handleClick"
-          @add="handleAdd"
-          @titleClick="handleTitleClick"></s-tree>
-      </a-col>
-      <a-col :span="19">
-        <s-table
-          ref="table"
-          size="default"
-          :columns="columns"
-          :data="loadData"
-          :alert="false"
-          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
-        >
-          <span slot="action" slot-scope="text, record">
-            <template v-if="$auth('table.update')">
-              <a @click="handleEdit(record)">编辑</a>
-              <a-divider type="vertical" />
-            </template>
-            <a-dropdown>
-              <a class="ant-dropdown-link">
-                更多 <a-icon type="down" />
-              </a>
-              <a-menu slot="overlay">
-                <a-menu-item>
-                  <a href="javascript:;">详情</a>
-                </a-menu-item>
-                <a-menu-item v-if="$auth('table.disable')">
-                  <a href="javascript:;">禁用</a>
-                </a-menu-item>
-                <a-menu-item v-if="$auth('table.delete')">
-                  <a href="javascript:;">删除</a>
-                </a-menu-item>
-              </a-menu>
-            </a-dropdown>
-          </span>
-        </s-table>
-      </a-col>
-    </a-row>
-    <org-modal ref="modal" @ok="handleSaveOk" @close="handleSaveClose" />
-  </a-card>
-</template>
-
-<script>
-import STree from '@/components/Tree/Tree'
-import { STable } from '@/components'
-import OrgModal from './modules/OrgModal'
-import { menuList } from '@/api/security/menu'
-
-export default {
-  name: 'MenuTree',
-  components: {
-    STable,
-    STree,
-    OrgModal
-  },
-  data () {
-    return {
-      queryParam: {
-        parentId: '-1'
-      },
-      openKeys: ['key-01'],
-      orgTree: [],
-      selectedRowKeys: [],
-      selectedRows: [],
-      columns: [
-        {
-          title: '#',
-          dataIndex: 'no'
-        },
-        {
-          title: '成员名称',
-          dataIndex: 'description'
-        },
-        {
-          title: '登录次数',
-          dataIndex: 'callNo',
-          sorter: true,
-          needTotal: true,
-          customRender: (text) => text + ' 次'
-        },
-        {
-          title: '状态',
-          dataIndex: 'status',
-          needTotal: true
-        },
-        {
-          title: '更新时间',
-          dataIndex: 'updatedAt',
-          sorter: true
-        },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          width: '150px',
-          scopedSlots: { customRender: 'action' }
-        }
-      ],
-      // 加载数据方法 必须为 Promise 对象
-      loadData: parameter => {
-        return menuList(Object.assign(parameter, this.queryParam))
-          .then(res => {
-            return res.result
-          })
-      }
-    }
-  },
-  created () {
-    menuList({
-      parentId: '-1'
-    }).then(res => {
-      this.orgTree = res.data
-    })
-  },
-  methods: {
-    handleClick (e) {
-      this.queryParam = {
-        key: e.key
-      }
-      this.$refs.table.refresh(true)
-    },
-    handleAdd (item) {
-      this.$message.info(`提示：你点了 ${item.key} - ${item.title} `)
-      this.$refs.modal.add(item.key)
-    },
-    handleTitleClick (item) {
-      console.log('handleTitleClick', item)
-    },
-    titleClick (e) {
-      console.log('titleClick', e)
-    },
-    handleSaveOk () {
-    },
-    handleSaveClose () {
-    },
-    onSelectChange (selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
-      this.selectedRows = selectedRows
-    }
-  }
-}
-</script>
-
-<style lang="less">
-  .custom-tree {
-    /deep/ .ant-menu-item-group-title {
-      position: relative;
-      &:hover {
-        .btn {
-          display: block;
-        }
-      }
-    }
-
-    /deep/ .ant-menu-item {
-      &:hover {
-        .btn {
-          display: block;
-        }
-      }
-    }
-
-    /deep/ .btn {
-      display: none;
-      position: absolute;
-      top: 0;
-      right: 10px;
-      width: 20px;
-      height: 40px;
-      line-height: 40px;
-      z-index: 1050;
-
-      &:hover {
-        transform: scale(1.2);
-        transition: 0.5s all;
-      }
-    }
-  }
-</style>

src/views/security/resource/modules/OrgModal.vue

@@ -1,100 +0,0 @@
-<template>
-  <a-modal
-    title="操作"
-    :width="600"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
-
-        <a-form-item
-          label="父级ID"
-        >
-          <a-input v-decorator="['parentId', {}]" disabled />
-        </a-form-item>
-
-        <a-form-item
-          label="机构名称"
-        >
-          <a-input v-decorator="['orgName', {}]" />
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-modal>
-</template>
-
-<script>
-export default {
-  name: 'OrgModal',
-  data () {
-    return {
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 5 }
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 16 }
-      },
-      visible: false,
-      confirmLoading: false,
-      mdl: {}
-    }
-  },
-  beforeCreate () {
-    this.form = this.$form.createForm(this)
-    console.log('form::', this.form)
-  },
-  created () {
-
-  },
-  methods: {
-    add (id) {
-      this.edit({ parentId: id })
-    },
-    edit (record) {
-      this.mdl = Object.assign({}, record)
-      this.visible = true
-      this.$nextTick(() => {
-        this.form.setFieldsValue({ ...record })
-      })
-    },
-    close () {
-      this.$emit('close')
-      this.visible = false
-    },
-    handleOk () {
-      const _this = this
-      // 触发表单验证
-      this.form.validateFields((err, values) => {
-        // 验证表单没错误
-        if (!err) {
-          console.log('form values', values)
-
-          _this.confirmLoading = true
-          // 模拟后端请求 2000 毫秒延迟
-          new Promise((resolve) => {
-            setTimeout(() => resolve(), 2000)
-          }).then(() => {
-            // Do something
-            _this.$message.success('保存成功')
-            _this.$emit('ok')
-          }).catch(() => {
-            // Do something
-          }).finally(() => {
-            _this.confirmLoading = false
-            _this.close()
-          })
-        }
-      })
-    },
-    handleCancel () {
-      this.close()
-    }
-
-  }
-}
-</script>

src/views/security/resource/modules/RoleModal.vue

@@ -1,147 +0,0 @@
-<template>
-  <a-modal
-    title="操作"
-    :width="800"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
-    <a-steps :current="1">
-      <a-step>
-        <!-- <span slot="title">Finished</span> -->
-        <template slot="title">
-          Finished
-        </template>
-        <span slot="description">This is a description.</span>
-      </a-step>
-      <a-step title="In Progress" description="This is a description." />
-      <a-step title="Waiting" description="This is a description." />
-    </a-steps>
-  </a-modal>
-</template>
-
-<script>
-import { getPermissions } from '@/api/manage'
-import { actionToObject } from '@/utils/permissions'
-import pick from 'lodash.pick'
-
-export default {
-  name: 'RoleModal',
-  data () {
-    return {
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 5 }
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 16 }
-      },
-      visible: false,
-      confirmLoading: false,
-      mdl: {},
-
-      form: this.$form.createForm(this),
-      permissions: []
-    }
-  },
-  created () {
-    this.loadPermissions()
-  },
-  methods: {
-    add () {
-      this.edit({ id: 0 })
-    },
-    edit (record) {
-      this.mdl = Object.assign({}, record)
-      this.visible = true
-
-      // 有权限表，处理勾选
-      if (this.mdl.permissions && this.permissions) {
-        // 先处理要勾选的权限结构
-        const permissionsAction = {}
-        this.mdl.permissions.forEach(permission => {
-          permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
-        })
-        // 把权限表遍历一遍，设定要勾选的权限 action
-        this.permissions.forEach(permission => {
-          permission.selected = permissionsAction[permission.id] || []
-        })
-      }
-
-      this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
-      })
-      console.log('this.mdl', this.mdl)
-    },
-    close () {
-      this.$emit('close')
-      this.visible = false
-    },
-    handleOk () {
-      const _this = this
-      // 触发表单验证
-      this.form.validateFields((err, values) => {
-        // 验证表单没错误
-        if (!err) {
-          console.log('form values', values)
-
-          _this.confirmLoading = true
-          // 模拟后端请求 2000 毫秒延迟
-          new Promise((resolve) => {
-            setTimeout(() => resolve(), 2000)
-          }).then(() => {
-            // Do something
-            _this.$message.success('保存成功')
-            _this.$emit('ok')
-          }).catch(() => {
-            // Do something
-          }).finally(() => {
-            _this.confirmLoading = false
-            _this.close()
-          })
-        }
-      })
-    },
-    handleCancel () {
-      this.close()
-    },
-    onChangeCheck (permission) {
-      permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
-      permission.checkedAll = permission.selected.length === permission.actionsOptions.length
-    },
-    onChangeCheckAll (e, permission) {
-      Object.assign(permission, {
-        selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
-        indeterminate: false,
-        checkedAll: e.target.checked
-      })
-    },
-    loadPermissions () {
-      const that = this
-      getPermissions().then(res => {
-        const result = res.result
-        that.permissions = result.map(permission => {
-          const options = actionToObject(permission.actionData)
-          permission.checkedAll = false
-          permission.selected = []
-          permission.indeterminate = false
-          permission.actionsOptions = options.map(option => {
-            return {
-              label: option.describe,
-              value: option.action
-            }
-          })
-          return permission
-        })
-      })
-    }
-
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/security/role/RoleForm.vue

@@ -0,0 +1,117 @@
+<template>
+  <a-modal :visible="visible" :title="modalTitle" :width="500" @cancel="onCancel" @ok="onSubmit">
+    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form-model-item ref="name" label="名称" prop="name">
+        <a-input v-model="form.name" />
+      </a-form-model-item>
+      <a-form-model-item ref="code" label="编码" prop="code">
+        <a-input v-model="form.code" />
+      </a-form-model-item>
+      <a-form-model-item ref="sort" label="排序" prop="sort">
+        <a-input-number v-model="form.sort" />
+      </a-form-model-item>
+      <a-form-model-item ref="remark" label="备注" prop="remark">
+        <a-textarea :rows="4" v-model="form.remark" />
+        </a-textarea>
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+  import {
+    roleAdd,
+    roleEdit
+  } from '@/api/security/role'
+
+  export default {
+    props: {
+      id: {
+        type: String,
+        default: undefined
+      }
+    },
+    data() {
+      return {
+        modalTitle: '新增角色',
+        visible: false,
+        labelCol: {
+          xs: {
+            span: 24
+          },
+          sm: {
+            span: 5
+          }
+        },
+        wrapperCol: {
+          xs: {
+            span: 24
+          },
+          sm: {
+            span: 18
+          }
+        },
+        form: {
+          name: '',
+          code: '',
+          sort: 0,
+          remark: ''
+        },
+        rules: {
+          name: [{
+            required: true,
+            message: '请输入角色名称',
+            trigger: 'blur'
+          }],
+          code: [{
+            required: true,
+            message: '请输入编码',
+            trigger: 'blur'
+          }]
+        }
+      }
+    },
+    methods: {
+      add() {
+        this.modalTitle = '新增角色'
+        this.visible = true
+      },
+      edit(obj) {
+        this.modalTitle = '修改角色'
+        this.visible = true
+        this.form = obj
+      },
+      onSubmit(e) {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            if (this.form.id) {
+              roleEdit(this.form).then(res => {
+                if (res.code == 200) {
+                  this.$message.success('编辑成功')
+                  this.onCancel()
+                } else {
+                  this.$message.error('编辑失败：' + res.msg)
+                }
+              })
+            } else {
+              roleAdd(this.form).then(data => {
+                if (res.code == 200) {
+                  this.$message.success('新增成功')
+                  this.onCancel()
+                } else {
+                  this.$message.error('新增失败：' + res.msg)
+                }
+              })
+            }
+          } else {
+            return false
+          }
+        })
+      },
+      onCancel() {
+        this.$refs.ruleForm.resetFields()
+        this.visible = false
+      }
+    }
+  }
+</script>

src/views/security/role/RoleList.vue

@@ -1,168 +1,129 @@
 <template>
+  <div>
     <a-card :bordered="false">
       <div class="table-page-search-wrapper">
         <a-form layout="inline">
           <a-row :gutter="48">
-          <a-col :md="6" :sm="24">
+            <a-col :md="8" :sm="24">
-            <a-form-item label="名称">
+              <a-form-item label="角色名称">
-              <a-input v-model="queryParam.name" placeholder="请输入名称" @pressEnter="handleFefresh"/>
+                <a-input v-model="queryParam.name" allow-clear placeholder="请输入角色名称"/>
               </a-form-item>
             </a-col>
-          <a-col :md="6" :sm="24">
+            <a-col :md="8" :sm="24">
-            <a-form-item label="状态">
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0" @pressEnter="handleFefresh">
+              <a-button @click="() => {queryParam = {}, this.loadData()}">重置</a-button>
-                <a-select-option value="">全部</a-select-option>
-                <a-select-option v-for="(item, index) in statusMap" :key="index" :value="index">{{ item }}</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="24">
-            <a-button type="primary" @click="handleFefresh">查询</a-button>
-            <a-button @click="() => {queryParam = {}, handleFefresh()}">重置</a-button>
-          </a-col>
-          <a-col :md="6" :sm="24" align="right">
-            <a-button type="primary" @click="handleCreate">新增</a-button>
             </a-col>
           </a-row>
         </a-form>
       </div>
+      
+      <div class="table-operator">
+        <a-button type="primary" icon="plus" @click="$refs.roleForm.add()">新增角色</a-button>
+      </div>
+      
       <s-table
         ref="table"
-      size="default"
+        :rowKey="(record) => record.id"
-      rowKey="id"
         :columns="columns"
         :data="loadData"
-      :rowSelection="rowSelection"
       >
-      <template slot="time" slot-scope="text, record">{{record.createdAt | moment}}</template>
+        <span slot="action" slot-scope="text, record">
-      <template slot="tbStatus" slot-scope="text, record">
+          <a @click="$refs.roleForm.edit(record)">编辑</a>
-        <a-switch checked-children="启用" un-checked-children="停用" v-model="record.status" @change="updateStatus(record.id, record.status)"/>
-      </template>
-      <template slot="action" slot-scope="text, record">
-        <a href="javascript:;" @click="handleEdit(record)">修改</a>
           <a-divider type="vertical"/>
-        <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
+          <a-dropdown>
-          <a href="javascript:;">删除</a>
+            <a class="ant-dropdown-link">
+              更多 <a-icon type="down" />
+            </a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a @click="$refs.roleMenuForm.roleMenu(record)">授权菜单</a>
+              </a-menu-item>
+              <a-menu-item>
+                <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => handleDel(record)">
+                  <a>删除</a>
                 </a-popconfirm>
-        <a-divider type="vertical" />
+              </a-menu-item>
-        <a href="javascript:;" @click="handleDetail(record.id)">详情</a>
+            </a-menu>
-      </template>
+          </a-dropdown>
+        </span>
       </s-table>
-    <create-form ref="modal" @ok="handleOk" />
+      <role-form ref="roleForm" @ok="handleOk"/>
-    <role-detail ref="detail"></role-detail>
+      <role-menu-form ref="roleMenuForm" @ok="handleOk"/>
     </a-card>
+  </div>
 </template>
 
 <script>
-import { rolePage, roleUpdateStatus, roleDelete } from '@/api/security/role'
 import { STable } from '@/components'
-import CreateForm from './modules/CreateForm'
+import { rolePage, roleDel } from '@/api/security/role'
-import RoleDetail from './modules/RoleDetail'
+import RoleForm from './RoleForm'
-import { statusMap } from '@/views/status/statusMap'
+import RoleMenuForm from './RoleMenuForm'
 
 export default {
-  name: 'roleList',
   components: {
     STable,
-    CreateForm,
+    RoleForm,
-    RoleDetail
+    RoleMenuForm
   },
   data () {
     return {
-      statusMap: statusMap,
+      data: [],
-      queryParam: { name: '', status: '' },
+      queryParam: {},
-      selectedRowKeys: [], // 选中行的key 出选择框时需要配置
+      loading: true,
-      selectedRows: [], // 选中行的数据
       columns: [
-        { title: '名称', width: 30, dataIndex: 'name', key: 'name' },
-        { title: '编码', width: 30, dataIndex: 'code', key: 'code' },
         {
-          title: '创建时间',
+          title: '角色名称',
-          width: 10,
+          dataIndex: 'name',
-          key: 'createdAt',
+          width: '20%'
-          align: 'center',
-          scopedSlots: { customRender: 'time' }
         },
         {
-          title: '状态',
+          title: '唯一编码',
-          width: 10,
+          dataIndex: 'code'
-          key: 'tbStatus',
+        },
-          align: 'center',
+        {
-          scopedSlots: { customRender: 'tbStatus' }
+          title: '排序',
+          dataIndex: 'sort'
         },
         {
           title: '操作',
-          key: 'operation',
+          dataIndex: 'action',
-          width: 10,
+          width: '150px',
-          align: 'right',
           scopedSlots: { customRender: 'action' }
         }
       ],
       loadData: parameter => {
-        return rolePage(Object.assign(parameter, this.queryParam))
+        return rolePage(Object.assign(parameter, this.queryParam)).then((res) => {
-          .then(res => {
+          return res
-            const data = res.data
-            data.entities.forEach((item) => {
-              item.status = item.status === 1
-            })
-            return data
         })
       }
     }
   },
-  computed: {
+  created () {
-    rowSelection () {
+    // 根据权限加载，待处理
-      return {
-        selectedRowKeys: this.selectedRowKeys,
-        onChange: this.onSelectChange
-      }
-    }
   },
   methods: {
-    // 修改状态
+    handleDel (record) {
-    updateStatus (id, status) {
+      roleDel({id: record.id}).then((res) => {
-      roleUpdateStatus({
+        if (res.code == 200) {
-        id: id,
+          this.$message.success('删除成功')
-        status: status ? 1 : 0
-      }).then(res => {
-        this.$notification.success({
-          message: '操作成功',
-          duration: 1,
-          description: status ? '角色已启用' : '角色已停用'
-        })
           this.$refs.table.refresh()
+        } else {
+          this.$message.error('删除失败：' + res.msg)
+        }
       })
     },
-    // 增
-    handleCreate () {
-      this.$refs.modal.add()
-    },
-    // 改
-    handleEdit (record) {
-      this.$refs.modal.edit(record)
-    },
-    // 删
-    handleDelete (record) {
-      roleDelete({ id: record.id }).then(() => {
-        this.loadData()
-      })
-    },
-    // 编辑后回调
     handleOk () {
       this.$refs.table.refresh()
-    },
-    // 详情
-    handleDetail (id) {
-      this.$refs.detail.show(id)
-    },
-    handleFefresh () {
-      this.$refs.table.refresh(true)
-    },
-    // 选择行
-    onSelectChange (selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
-      this.selectedRows = selectedRows
     }
   }
 }
+
 </script>
+<style scoped>
+.table-operator {
+  margin-bottom: 18px;
+}
+button {
+  margin-right: 8px;
+}
+</style>

src/views/security/role/RoleMenuForm.vue

@@ -0,0 +1,186 @@
+<template>
+  <a-modal
+    title="授权菜单"
+    :width="600"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="formLoading">
+      <a-form :form="form">
+
+        <a-form-item
+          label="菜单权限"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol">
+
+          <a-tree
+            v-model="checkedKeys"
+            multiple
+            checkable
+            :auto-expand-parent="autoExpandParent"
+            :expanded-keys="expandedKeys"
+            :tree-data="menuTreeData"
+            :selected-keys="selectedKeys"
+            :replaceFields="replaceFields"
+            @expand="onExpand"
+            @check="onCheck"
+          />
+        </a-form-item>
+
+      </a-form>
+
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import { menuTreeForGrant } from '@/api/security/menu'
+  import { roleOwnMenu, roleGrantMenu } from '@/api/security/role'
+
+  export default {
+    data() {
+      return {
+        labelCol: {
+          style: { 'padding-right': '20px' },
+          xs: { span: 24 },
+          sm: { span: 5 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 15 }
+        },
+        menuTreeData: [],
+        expandedKeys: [],
+        checkedKeys: [],
+        visible: false,
+        confirmLoading: false,
+        formLoading: true,
+        autoExpandParent: true,
+        selectedKeys: [],
+        subValues: [],
+        roleEntity: [],
+        replaceFields: {
+          children:'children',
+          title:'name',
+          key:'id',
+          value:'id'
+        },
+        form: this.$form.createForm(this),
+        commitKeys: [],
+        leastChilds: []
+      }
+    },
+    methods: {
+      // 初始化方法
+      roleMenu(record) {
+        this.formLoading = true
+        this.roleEntity = record
+        this.visible = true
+        this.getMenuTree()
+      },
+
+      /**
+       * 获取菜单列表
+       */
+      getMenuTree() {
+        const _this = this
+        menuTreeForGrant().then((res) => {
+          if (res.code == 200) {
+            _this.menuTreeData = res.data
+            _this.getLeastChilds(res.data)
+            // 默认展开目录级
+            _this.menuTreeData.forEach(item => {
+              _this.expandedKeys.push(item.id)
+            })
+
+            _this.expandedMenuKeys(_this.roleEntity)
+          }
+        })
+      },
+
+      getLeastChilds(data) {
+        for (let i = 0; i < data.length; i++) {
+          this.pushLeastChilds(data[i])
+        }
+      },
+
+      pushLeastChilds(e) {
+        if (e.children.length > 0) {
+          this.getLeastChilds(e.children)
+          return
+        }
+        this.leastChilds.push(e.id)
+      },
+
+      /**
+       * 此角色已有菜单权限
+       */
+      expandedMenuKeys(record) {
+        const _this = this
+        roleOwnMenu({ id: record.id }).then((res) => {
+          if (res.code == 200) {
+            _this.pickCheckedKeys(res.data)
+            _this.commitKeys = res.data
+          }
+          _this.formLoading = false
+        })
+      },
+
+      pickCheckedKeys(data) {
+        for (let i = 0; i < data.length; i++) {
+          if (this.leastChilds.includes(data[i])) {
+            this.checkedKeys.push(data[i])
+          }
+        }
+      },
+
+      onExpand(expandedKeys) {
+        this.expandedKeys = expandedKeys
+        this.autoExpandParent = false
+      },
+
+      onCheck(checkedKeys, info) {
+        this.checkedKeys = checkedKeys
+        this.commitKeys = checkedKeys.concat(info.halfCheckedKeys)
+      },
+
+      onSelect(selectedKeys, info) {
+        this.selectedKeys = selectedKeys
+      },
+
+      handleSubmit() {
+        const _this = this
+        const { form: { validateFields } } = this
+        this.confirmLoading = true
+        validateFields((errors, values) => {
+          if (!errors) {
+            roleGrantMenu({ id: _this.roleEntity.id, grantMenuIdList: _this.commitKeys }).then((res) => {
+              if (res.code == 200) {
+                _this.$message.success('授权成功')
+                _this.confirmLoading = false
+                _this.$emit('ok', values)
+                _this.handleCancel()
+              } else {
+                _this.$message.error('授权失败：' + res.message)
+              }
+            }).finally((res) => {
+              _this.confirmLoading = false
+            })
+          } else {
+            _this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel() {
+        // 清空已选择的
+        this.checkedKeys = []
+        // 清空已展开的
+        this.expandedKeys = []
+        this.leastChilds = []
+        this.visible = false
+      }
+    }
+  }
+</script>

src/views/security/role/modules/CreateForm.vue

@@ -1,116 +0,0 @@
-<template>
-  <a-modal centered :visible="visible" :title="modalTitle" :width="720" @close="onCancel">
-    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-model-item ref="name" label="名称" prop="name"><a-input v-model="form.name" /></a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item ref="code" label="编码" prop="code"><a-input v-model="form.code" /></a-form-model-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-model-item ref="description" label="描述" prop="description"><a-input v-model="form.description" /></a-form-model-item>
-        </a-col>
-      </a-row>
-    </a-form-model>
-    <div class="draw-button-container align-center">
-      <a-button @click="onCancel">取消</a-button>
-      <a-button type="primary" @click="onSubmit">保存</a-button>
-    </div>
-  </a-modal>
-</template>
-
-<script>
-import { roleGet, roleAdd, roleUpdate } from '@/api/security/role'
-import { typeMap } from '../../maps/map.js'
-
-export default {
-  props: {
-    id: {
-      type: String,
-      default: undefined
-    }
-  },
-  data () {
-    return {
-      typeMap: typeMap,
-      orgList: [],
-      modalTitle: '新增',
-      visible: false,
-      labelCol: { span: 4 },
-      wrapperCol: { span: 16 },
-      form: {
-        rolename: '',
-        realName: '',
-        mobile: '',
-        password: '',
-        type: undefined,
-        orgId: undefined,
-        orgName: '',
-        address: '',
-        email: ''
-      },
-      rules: {
-        rolename: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 5, message: '长度不能小于5', trigger: 'blur' }],
-        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, message: '长度不能小于5', trigger: 'blur' }],
-        mobile: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/, trigger: 'blur' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, message: '长度不能小于6', trigger: 'blur' }],
-        orgId: [{ required: true, message: '请选择机构', trigger: 'blur' }]
-      }
-    }
-  },
-  filters: {
-    typeFilter (type) {
-      return typeMap[type]
-    }
-  },
-  methods: {
-    add () {
-      this.modalTitle = '新增'
-      this.visible = true
-    },
-    edit (obj) {
-      this.modalTitle = '修改'
-      this.visible = true
-      roleGet({ id: obj.id }).then(data => {
-        const form = data.data
-        this.form = form
-      })
-    },
-    onSubmit (e) {
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          if (this.form.id) {
-            roleUpdate(this.form).then(data => {
-              this.$emit('ok')
-              this.onCancel()
-            })
-          } else {
-            roleAdd(this.form).then(data => {
-              this.$emit('ok')
-              this.onCancel()
-            })
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    onCancel () {
-      this.$refs.ruleForm.resetFields()
-      this.visible = false
-    },
-    onReset () {
-      this.$refs.ruleForm.resetFields()
-    },
-    onChange (index) {
-      const org = this.orgList[index]
-      this.form.orgName = org.name
-      this.form.orgId = org.id
-      this.form.type = 'MALL'
-    }
-  }
-}
-</script>

src/views/security/role/modules/RoleDetail.vue

@@ -1,46 +0,0 @@
-<template>
-  <a-drawer
-    title="角色详情"
-    width="640"
-    placement="right"
-    :visible="visible"
-    @close="onClose">
-    <a-descriptions :column="{ sm: 2, xs: 1 }">
-      <a-descriptions-item label="名称">{{ model.name }}</a-descriptions-item>
-      <a-descriptions-item label="描述">{{ model.description }}</a-descriptions-item>
-      <a-descriptions-item label="创建时间">{{ model.createdAt | moment }}</a-descriptions-item>
-      <a-descriptions-item label="修改时间">{{ model.updatedAt | moment }}</a-descriptions-item>
-    </a-descriptions>
-  </a-drawer>
-</template>
-
-<script>
-import { roleGet } from '@/api/security/role'
-import { statusMap } from '@/views/status/statusMap'
-
-export default {
-  data () {
-    return {
-      visible: false,
-      model: {}
-    }
-  },
-  filters: {
-    statusFilter (status) {
-      return statusMap[status + '']
-    }
-  },
-  methods: {
-    show (id) {
-      this.visible = true
-      roleGet({ id: id }).then(data => {
-        this.model = data.data
-      })
-    },
-    onClose () {
-      this.model = {}
-      this.visible = false
-    }
-  }
-}
-</script>

src/views/security/user/UserForm.vue

@@ -0,0 +1,282 @@
+<template>
+  <a-modal
+    :title="modalTitle"
+    :width="900"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-divider orientation="left">基本信息</a-divider>
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item style="display: none;">
+              <a-input v-decorator="['id']" />
+            </a-form-item>
+
+            <a-form-item
+              label="账号"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input placeholder="请输入账号" v-decorator="['loginName', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :md="12" :sm="24" >
+          <a-form :form="form">
+            <a-form-item
+              label="姓名"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input placeholder="请输入姓名" v-decorator="['userName', {rules: [{required: true, message: '请输入姓名！'}]}]" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24" v-if="isAdd">
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="密码"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input
+                placeholder="请输入密码"
+                type="password"
+                v-decorator="['password', {rules: [{required: true, message: '请输入密码！'},{
+                  validator: validateToNextPassword,
+                },]}]" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="重复密码"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input
+                placeholder="请再次输入密码"
+                type="password"
+                v-decorator="['confirm', {rules: [{required: true, message: '请再次输入密码！'},
+                                                  {
+                                                    validator: compareToFirstPassword,
+                                                  }]}]" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="昵称"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input placeholder="请输入昵称" v-decorator="['nickName']" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="生日"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-date-picker placeholder="请选择生日" @change="onChange" style="width: 100%" v-decorator="['birthday']" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="性别"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+            >
+              <a-radio-group v-decorator="['sex',{rules: [{ required: true, message: '请选择性别！' }]}]" >
+                <a-radio :value="1">男</a-radio>
+                <a-radio :value="2">女</a-radio>
+              </a-radio-group>
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="邮箱"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input placeholder="请输入邮箱" v-decorator="['email']" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-form :form="form">
+            <a-form-item
+              label="手机号"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input placeholder="请输入手机号" v-decorator="['phoneNumber',{rules: [{ required: true, message: '请输入手机号！' }]}]" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import { userAdd, userEdit } from '@/api/security/user'
+  import moment from 'moment'
+  export default {
+    data () {
+      return {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 6 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 }
+        },
+        modalTitle: '新增菜单',
+        visible: false,
+        confirmLoading: false,
+        form: this.$form.createForm(this),
+        birthdayString: [],
+        isAdd: false
+      }
+    },
+    methods: {
+      // 新增初始化方法
+      add () {
+        this.modalTitle = '新增用户'
+        this.visible = true
+        this.isAdd = true
+      },
+      // 编辑初始化方法
+      edit (record) {
+        this.modalTitle = '编辑用户'
+        this.confirmLoading = true
+        this.visible = true
+        this.isAdd = false
+        // 基本信息加人表单
+        setTimeout(() => {
+          this.form.setFieldsValue(
+            {
+              id: record.id,
+              loginName: record.loginName,
+              userName: record.userName,
+              nickName: record.nickName,
+              sex: record.sex,
+              email: record.email,
+              phoneNumber: record.phoneNumber
+            }
+          )
+        }, 100)
+        // 时间单独处理
+        if (record.birthday != null) {
+          this.form.getFieldDecorator('birthday', { initialValue: moment(record.birthday, 'YYYY-MM-DD') })
+        }
+        this.birthdayString = moment(record.birthday).format('YYYY-MM-DD')
+        this.confirmLoading = false
+      },
+      compareToFirstPassword (rule, value, callback) {
+        const form = this.form
+        if (value && value !== form.getFieldValue('password')) {
+          // eslint-disable-next-line standard/no-callback-literal
+          callback('请确认两次输入密码的一致性！')
+        } else {
+          callback()
+        }
+      },
+      validateToNextPassword (rule, value, callback) {
+        const form = this.form
+        if (value && this.confirmDirty) {
+          form.validateFields(['confirm'], { force: true })
+        }
+        callback()
+      },
+      /**
+       * 日期需单独转换
+       */
+      onChange (date, dateString) {
+        if (date == null) {
+          this.birthdayString = []
+        } else {
+          this.birthdayString = moment(date).format('YYYY-MM-DD')
+        }
+      },
+      handleSubmit () {
+        const { form: { validateFields } } = this
+        this.confirmLoading = true
+        validateFields((errors, values) => {
+          if (!errors) {
+            if (this.birthdayString.length > 0) {
+              values.birthday = this.birthdayString
+            }
+            if (values.id) {
+              userEdit(values).then((res) => {
+                this.confirmLoading = false
+                if (res.code === 200) {
+                  this.$message.success('编辑成功')
+                  this.$emit('ok', values)
+                  this.handleCancel()
+                } else {
+                  this.$message.error('编辑失败：' + res.msg)
+                }
+              }).finally((res) => {
+                this.confirmLoading = false
+              })
+            } else {
+              userAdd(values, { password: values.password }).then((res) => {
+                this.confirmLoading = false
+                if (res.code === 200) {
+                  this.$message.success('新增成功')
+                  this.$emit('ok', values)
+                  this.handleCancel()
+                } else {
+                  this.$message.error('新增失败：' + res.msg)
+                }
+              }).finally((res) => {
+                this.confirmLoading = false
+              })
+            }
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        this.form.resetFields()
+        this.visible = false
+        // 清理时间
+        this.birthdayString = ''
+        this.form.getFieldDecorator('birthday', { initialValue: null })
+      }
+    }
+  }
+</script>

src/views/security/user/UserList.vue

@@ -1,152 +1,188 @@
 <template>
-  <page-header-wrapper :title="false">
+  <div>
     <a-card :bordered="false">
       <div class="table-page-search-wrapper">
         <a-form layout="inline">
-          <a-row :gutter="48">
+          <a-row :gutter="24">
             <a-col :md="6" :sm="24">
-              <a-form-item label="名称">
+              <a-form-item label="用户名称" >
-                <a-input v-model="queryParam.realName" placeholder="请输入名称" @pressEnter="handleFefresh"/>
+                <a-input v-model="queryParam.userName" placeholder="请输入用户名称"/>
               </a-form-item>
             </a-col>
             <a-col :md="6" :sm="24">
-              <a-form-item label="状态">
+              <a-form-item label="账号" >
-                <a-select v-model="queryParam.enabled" placeholder="请选择" default-value="0" @pressEnter="handleFefresh">
+                <a-input v-model="queryParam.loginName" placeholder="请输入账号"/>
-                  <a-select-option value="">全部</a-select-option>
-                  <a-select-option v-for="(item, index) in statusMap" :key="index" :value="index">{{ item }}</a-select-option>
-                </a-select>
               </a-form-item>
             </a-col>
             <a-col :md="6" :sm="24">
-              <a-button type="primary" @click="handleFefresh">查询</a-button>
+              <a-form-item label="手机号码" >
-              <a-button @click="() => {queryParam = {}, handleFefresh()}">重置</a-button>
+                <a-input v-model="queryParam.phoneNumber" placeholder="请输入手机号码"/>
+              </a-form-item>
             </a-col>
-            <a-col :md="6" :sm="24" align="right">
+            <a-col :md="4" :sm="24">
-              <a-button type="primary" @click="handleCreate">新增</a-button>
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
             </a-col>
           </a-row>
         </a-form>
       </div>
+
+      <div class="table-operator">
+        <a-button type="primary" icon="plus" @click="$refs.userForm.add()">新增用户</a-button>
+        <a-button type="danger" :disabled="selectedRowKeys.length < 1" @click="batchDelete">
+          <a-icon type="delete"/>批量删除
+        </a-button>
+      </div>
+
       <s-table
         ref="table"
-        size="default"
-        rowKey="id"
         :columns="columns"
         :data="loadData"
-        :rowSelection="rowSelection"
+        :alert="options.alert"
+        :rowKey="(record) => record.id"
+        :rowSelection="options.rowSelection"
       >
-        <template slot="tbStatus" slot-scope="text, record">
+        <span slot="sex" slot-scope="text, record">
-          <a-switch checked-children="启用" un-checked-children="停用" v-model="record.enabled" @change="updateStatus(record.id, record.enabled)"/>
+          {{ record.sex | sexFilter }}
-        </template>
+        </span>
-        <template slot="action" slot-scope="text, record">
+        <span slot="action" slot-scope="text, record">
-          <a href="javascript:;" @click="handleEdit(record)">修改</a>
+          <a @click="$refs.userForm.edit(record)">编辑</a>
           <a-divider type="vertical" />
-          <a href="javascript:;" @click="handleDetail(record.id)">详情</a>
+          <a-dropdown >
-          <a-divider type="vertical" />
+            <a class="ant-dropdown-link">
-          <a href="javascript:;" @click="handleDetail(record.id)">修改密码</a>
+              更多 <a-icon type="down" />
-        </template>
+            </a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a-popconfirm placement="topRight" title="确认重置密码？" @confirm="() => resetPwd(record)">
+                  <a>重置密码</a>
+                </a-popconfirm>
+              </a-menu-item>
+              <a-menu-item>
+                <a @click="$refs.userRoleForm.userRole(record)">授权角色</a>
+              </a-menu-item>
+              <a-menu-item>
+                <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
       </s-table>
-      <create-form ref="modal" @ok="handleOk" />
+      <user-form ref="userForm" @ok="handleOk" />
-      <user-detail ref="detail"></user-detail>
+      <user-role-form ref="userRoleForm" @ok="handleOk"/>
     </a-card>
-  </page-header-wrapper>
+  </div>
 </template>
-
 <script>
-import { userPage, userUpdateEnabled } from '@/api/security/user'
 import { STable } from '@/components'
-import CreateForm from './modules/CreateForm'
+import { userPage, userDel, passwordReset } from '@/api/security/user'
-import UserDetail from './modules/UserDetail'
+import UserForm from './UserForm'
-import { statusMap } from '@/views/status/statusMap'
+import UserRoleForm from './UserRoleForm'
-
+import { sexMap } from '@/views/filterMap/sexMap'
 export default {
-  name: 'UserList',
   components: {
     STable,
-    CreateForm,
+    UserForm,
-    UserDetail
+    UserRoleForm
   },
   data () {
     return {
-      statusMap: statusMap,
+      // 查询参数
-      queryParam: { realName: '', enabled: '' },
+      queryParam: {},
-      selectedRowKeys: [], // 选中行的key 出选择框时需要配置
+      // 表头
-      selectedRows: [], // 选中行的数据
       columns: [
-        { title: '名称', width: 40, dataIndex: 'realName', key: 'realName' },
-        { title: '手机号', width: 40, dataIndex: 'mobile', key: 'mobile' },
-        { title: '邮箱', width: 40, dataIndex: 'email', key: 'email' },
         {
-          title: '状态',
+          title: '账号',
-          width: 10,
+          dataIndex: 'loginName'
-          key: 'tbStatus',
+        },
-          align: 'center',
+        {
-          scopedSlots: { customRender: 'tbStatus' }
+          title: '姓名',
+          dataIndex: 'userName'
+        },
+        {
+          title: '昵称',
+          dataIndex: 'nickName'
+        },
+        {
+          title: '性别',
+          dataIndex: 'sex',
+          scopedSlots: { customRender: 'sex' }
+        }, {
+          title: '手机',
+          dataIndex: 'phoneNumber'
         },
         {
           title: '操作',
-          key: 'operation',
+          width: '150px',
-          width: 10,
+          dataIndex: 'action',
-          align: 'right',
           scopedSlots: { customRender: 'action' }
         }
       ],
+      // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        const enabled = this.queryParam.enabled
+        return userPage(Object.assign(parameter, this.queryParam)).then((res) => {
-        const queryParam = {
+          return res
-          realName: this.queryParam.realName,
-          enabled: enabled === '1' ? true : enabled === '0' ? false : ''
-        }
-        return userPage(Object.assign(parameter, queryParam))
-          .then(res => {
-            return res.data
         })
-      }
-    }
       },
-  computed: {
+      selectedRowKeys: [], // 选中行的key 出选择框时需要配置
-    rowSelection () {
+      selectedRows: [], // 选中行的数据
-      return {
+      options: {
+        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+        rowSelection: {
           selectedRowKeys: this.selectedRowKeys,
           onChange: this.onSelectChange
         }
       }
+    }
+  },
+  filters: {
+    sexFilter (sex) {
+      return sexMap[sex]
+    }
+  },
+  created () {
+    // 动态加载权限
   },
   methods: {
-    // 修改状态
+    // 重置密码
-    updateStatus (id, status) {
+    resetPwd (record) {
-      userUpdateEnabled({
+      passwordReset({ id: record.id }).then(res => {
-        id: id,
+        if (res.code === 200) {
-        enabled: status ? 1 : 0
+          this.$message.success('重置成功')
-      }).then(res => {
+          // this.$refs.table.refresh()
-        this.$notification.success({
+        } else {
-          message: '操作成功',
+          this.$message.error('重置失败：' + res.message)
-          duration: 1,
+        }
-          description: status ? '用户已启用' : '用户已停用'
       })
+    },
+    // 单个删除
+    singleDelete (record) {
+      const param = { 'ids': record.id }
+      this.sysUserDelete(param)
+    },
+    // 批量删除
+    batchDelete () {
+      const paramIds = this.selectedRowKeys.join(',')
+      const param = { 'ids': paramIds }
+      this.sysUserDelete(param)
+    },
+    sysUserDelete (param) {
+      userDel(param).then((res) => {
+        if (res.code === 200) {
+          this.$message.success('删除成功')
           this.$refs.table.refresh()
+        } else {
+          this.$message.error('删除失败：' + res.message)
+        }
+      }).catch((err) => {
+        this.$message.error('删除错误：' + err.message)
       })
     },
-    // 增
-    handleCreate () {
-      this.$refs.modal.add()
-    },
-    // 改
-    handleEdit (record) {
-      this.$refs.modal.edit(record)
-    },
-    // 编辑后回调
     handleOk () {
       this.$refs.table.refresh()
     },
-    // 详情
-    handleDetail (id) {
-      this.$refs.detail.show(id)
-    },
-    handleFefresh () {
-      this.$refs.table.refresh(true)
-    },
-    // 选择行
     onSelectChange (selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
@@ -154,3 +190,11 @@ export default {
   }
 }
 </script>
+<style lang="less">
+  .table-operator {
+    margin-bottom: 18px;
+  }
+  button {
+    margin-right: 8px;
+  }
+</style>

src/views/security/user/UserRoleForm.vue

@@ -0,0 +1,114 @@
+<template>
+  <a-modal
+    title="授权角色"
+    :width="800"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+
+    <a-card :bordered="false">
+      <div>
+        <a-table
+          size="middle"
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :columns="columns"
+          :dataSource="loadData"
+          :pagination="false"
+          :loading="loading"
+          :rowKey="(record) => record.id"
+        />
+      </div>
+    </a-card>
+
+  </a-modal>
+</template>
+
+<script>
+  import { roleList } from '@/api/security/role'
+  import { userOwnRole, userGrantRole } from '@/api/security/user'
+
+  const columns = [
+    {
+      title: '角色名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '唯一编码',
+      dataIndex: 'code'
+    }
+  ]
+
+  export default {
+    name: 'UserRoleIndex',
+
+    data () {
+      return {
+        columns,
+        loadData: [],
+        selectedRowKeys: [], // Check here to configure the default column
+        loading: true,
+        visible: false,
+        confirmLoading: false,
+        recordEntity: []
+      }
+    },
+    computed: {
+      hasSelected () {
+        return this.selectedRowKeys.length > 0
+      }
+    },
+    methods: {
+      // 初始化方法
+      userRole (record) {
+        this.recordEntity = record
+        this.visible = true
+        // 加载已有数据
+        this.sysUserOwnRole()
+        // 获取全部列表,无需分页
+        roleList().then((res) => {
+          this.loadData = res.data
+        })
+      },
+
+      /**
+       * 获取用户已有角色
+       */
+      sysUserOwnRole () {
+        this.loading = true
+        userOwnRole({ id: this.recordEntity.id }).then((res) => {
+          // 选中多选框
+          this.selectedRowKeys = res.data
+          this.loading = false
+        })
+      },
+
+      onSelectChange (selectedRowKeys) {
+        this.selectedRowKeys = selectedRowKeys
+      },
+
+      handleSubmit () {
+        this.confirmLoading = false
+        userGrantRole({ id: this.recordEntity.id, grantRoleIdList: this.selectedRowKeys }).then((res) => {
+           if (res.code == 200) {
+             this.$message.success('授权成功')
+             this.confirmLoading = false
+             this.$emit('ok', this.recordEntity)
+             this.handleCancel()
+           } else {
+             this.$message.error('授权失败：' + res.message)
+           }
+         }).finally((res) => {
+           this.confirmLoading = false
+         })
+        this.visible = false     
+      },
+      handleCancel () {
+        this.recordEntity = []
+        this.selectedRowKeys = []
+        this.visible = false
+      }
+    }
+  }
+</script>

src/views/security/user/modules/CreateForm.vue

@@ -1,127 +0,0 @@
-<template>
-  <a-drawer :visible="visible" :title="modalTitle" :width="720" @close="onCancel">
-    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-model-item ref="username" label="用户名" prop="username"><a-input v-model="form.username" /></a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item ref="realName" label="姓名" prop="realName"><a-input v-model="form.realName" /></a-form-model-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-model-item ref="mobile" label="手机号" prop="mobile"><a-input v-model="form.mobile" /></a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item ref="password" label="密码" prop="password"><a-input-password v-model="form.password" /></a-form-model-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-model-item ref="address" label="地址" prop="address"><a-input v-model="form.address" /></a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item ref="email" label="邮箱" prop="email"><a-input v-model="form.email" /></a-form-model-item>
-        </a-col>
-      </a-row>
-    </a-form-model>
-    <div class="draw-button-container align-center">
-      <a-button @click="onCancel">取消</a-button>
-      <a-button type="primary" @click="onSubmit">保存</a-button>
-    </div>
-  </a-drawer>
-</template>
-
-<script>
-import { userGet, userAdd, userUpdate } from '@/api/security/user'
-import { typeMap } from '../../maps/map.js'
-
-export default {
-  props: {
-    id: {
-      type: String,
-      default: undefined
-    }
-  },
-  data () {
-    return {
-      typeMap: typeMap,
-      orgList: [],
-      modalTitle: '新增',
-      visible: false,
-      labelCol: { span: 4 },
-      wrapperCol: { span: 16 },
-      form: {
-        username: '',
-        realName: '',
-        mobile: '',
-        password: '',
-        type: undefined,
-        orgId: undefined,
-        orgName: '',
-        address: '',
-        email: ''
-      },
-      rules: {
-        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 5, message: '长度不能小于5', trigger: 'blur' }],
-        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, message: '长度不能小于5', trigger: 'blur' }],
-        mobile: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/, trigger: 'blur' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, message: '长度不能小于6', trigger: 'blur' }],
-        orgId: [{ required: true, message: '请选择机构', trigger: 'blur' }]
-      }
-    }
-  },
-  filters: {
-    typeFilter (type) {
-      return typeMap[type]
-    }
-  },
-  methods: {
-    add () {
-      this.modalTitle = '新增'
-      this.visible = true
-    },
-    edit (obj) {
-      this.modalTitle = '修改'
-      this.visible = true
-      userGet({ id: obj.id }).then(data => {
-        const form = data.data
-        this.form = form
-      })
-    },
-    onSubmit (e) {
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          if (this.form.id) {
-            userUpdate(this.form).then(data => {
-              this.$emit('ok')
-              this.onCancel()
-            })
-          } else {
-            userAdd(this.form).then(data => {
-              this.$emit('ok')
-              this.onCancel()
-            })
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    onCancel () {
-      this.$refs.ruleForm.resetFields()
-      this.visible = false
-    },
-    onReset () {
-      this.$refs.ruleForm.resetFields()
-    },
-    onChange (index) {
-      const org = this.orgList[index]
-      this.form.orgName = org.name
-      this.form.orgId = org.id
-      this.form.type = 'MALL'
-    }
-  }
-}
-</script>

src/views/security/user/modules/UserDetail.vue

@@ -1,56 +0,0 @@
-<template>
-  <a-drawer
-    title="用户详情"
-    width="640"
-    placement="right"
-    :visible="visible"
-    @close="onClose">
-    <a-descriptions :column="{ sm: 2, xs: 1 }">
-      <a-descriptions-item label="用户名">{{ model.username }}</a-descriptions-item>
-      <a-descriptions-item label="姓名">{{ model.realName }}</a-descriptions-item>
-      <a-descriptions-item label="创建时间">{{ model.createdAt | moment }}</a-descriptions-item>
-      <a-descriptions-item label="修改时间">{{ model.updatedAt | moment }}</a-descriptions-item>
-      <a-descriptions-item label="状态">{{ model.enabled | statusFilter }}</a-descriptions-item>
-      <a-descriptions-item label="手机号">{{ model.mobile }}</a-descriptions-item>
-      <a-descriptions-item label="机构">{{ model.orgName }}</a-descriptions-item>
-      <a-descriptions-item label="类型">{{ model.type | typeFilter}}</a-descriptions-item>
-      <a-descriptions-item label="地址">{{ model.address }}</a-descriptions-item>
-      <a-descriptions-item label="邮箱">{{ model.email }}</a-descriptions-item>
-    </a-descriptions>
-  </a-drawer>
-</template>
-
-<script>
-import { userGet } from '@/api/security/user'
-import { enabledMap } from '@/views/status/enabledMap'
-import { typeMap } from '../../maps/map.js'
-
-export default {
-  data () {
-    return {
-      visible: false,
-      model: {}
-    }
-  },
-  filters: {
-    statusFilter (status) {
-      return enabledMap[status + '']
-    },
-    typeFilter (type) {
-      return typeMap[type]
-    }
-  },
-  methods: {
-    show (id) {
-      this.visible = true
-      userGet({ id: id }).then(data => {
-        this.model = data.data
-      })
-    },
-    onClose () {
-      this.model = {}
-      this.visible = false
-    }
-  }
-}
-</script>

src/views/status/enabledMap.js

@@ -1,4 +0,0 @@
-export const enabledMap = {
-  'false': '停用',
-  'true': '启用'
-}

src/views/status/statusMap.js

@@ -1,4 +0,0 @@
-export const statusMap = {
-  '0': '停用',
-  '1': '启用'
-}