lingling
/
welfare-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
qinjie 2021-09-01 08:58:39 +08:00
parent 493a39d96c 39ebbb6f7f
commit 385a56f457
39 changed files with 2342 additions and 1377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
README.en.md Normal file
View File

@ -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/)

44
src/api/security/menu.js
View File

@ -2,11 +2,11 @@ import request from '@/utils/request'
const menuApi = {
add: 'sys/menu/add',
get: 'sys/menu/get',
update: 'sys/menu/update',
del: 'sys/menu/delete',
updateStatus: 'sys/menu/updateStatus',
list: 'sys/menu/listByParentId'
edit: 'sys/menu/edit',
del: 'sys/menu/del',
list: 'sys/menu/list',
tree: 'sys/menu/tree',
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) {
return request({
url: menuApi.update,
method: 'post',
data: params
})
}
export function menuDelete (params) {
export function menuDel (params) {
return request({
url: menuApi.del,
method: 'post',
data: params
params: params
})
}
export function menuList (params) {
return request({
url: menuApi.list,
method: 'post',
data: params
method: 'get',
params: params
})
}
export function menuUpdateStatus (params) {
export function menuTree (params) {
return request({
url: menuApi.updateStatus,
method: 'post',
data: params
url: menuApi.tree,
method: 'get',
params: params
})
}
export function menuTreeForGrant (params) {
return request({
url: menuApi.treeForGrant,
method: 'get',
params: params
})
}

48
src/api/security/role.js
View File

@ -2,11 +2,12 @@ import request from '@/utils/request'
const roleApi = {
add: '/sys/role/add',
get: '/sys/role/getById',
update: '/sys/role/update',
del: '/sys/role/delete',
page: '/sys/role/page',
updateStatus: '/sys/role/updateStatus'
edit: '/sys/role/edit',
del: '/sys/role/del',
page: '/sys/role/pageList',
list: '/sys/role/list',
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) {
return request({
url: roleApi.update,
method: 'post',
data: params
})
}
export function roleDelete (params) {
export function roleDel (params) {
return request({
url: roleApi.del,
method: 'post',
data: params
params: params
})
}
export function rolePage (params) {
return request({
url: roleApi.page,
method: 'post',
data: params
method: 'get',
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
})

62
src/api/security/user.js
View File

@ -4,16 +4,17 @@ const userApi = {
login: '/login',
logout: '/logout',
add: '/sys/user/add',
get: '/sys/user/get',
update: '/sys/user/update',
del: '/sys/user/delete',
page: '/sys/user/page',
updateEnabled: '/sys/user/updateEnabled',
getInfo: '/sys/user/getInfo'
edit: '/sys/user/edit',
del: '/sys/user/del',
page: '/sys/user/pageList',
getInfo: '/sys/user/getInfo',
ownRole: '/sys/user/ownRole',
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) {
return request({
url: userApi.update,
method: 'post',
data: params
})
}
export function userDelete (params) {
export function userDel (params) {
return request({
url: userApi.del,
method: 'post',
data: params
params: params
})
}
export function userPage (params) {
return request({
url: userApi.page,
method: 'post',
data: params
method: 'get',
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
})
}

12
src/components/Table/index.js
View File

@ -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
})
}

38
src/config/router.config.js
View File

@ -52,9 +52,9 @@ export const asyncRouterMap = [
meta: { title: '角色管理', keepAlive: true }
},
{
path: '/security/resource',
name: 'SecurityResource',
component: () => import('@/views/security/resource/ResourceTree'),
path: '/security/menu',
name: 'SecurityMenu',
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',
name: 'ProjectForm',
component: () => import('@/views/project/ProjectForm'),
meta: { title: '新增项目', keepAlive: true, permission: ['form'], show: false }
},
{
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/projectStepForm',
name: 'projectStepForm',
component: () => import('@/views/project/form/ProjectStepForm'),
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',

4
src/core/lazy_use.js
View File

@ -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

2
src/utils/request.js
View File

@ -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

20
src/utils/util.js
View File

@ -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
}

5
src/views/filterMap/menuTypeMap.js Normal file
View File

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

5
src/views/filterMap/sexMap.js Normal file
View File

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

1
src/views/list/TableList.vue
View File

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

131
src/views/project/ProjectForm.vue
View File

@ -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>

4
src/views/project/ProjectList.vue
View File

@ -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' },
},

38
src/views/project/form/ProjectCourseSelect.vue Normal file
View File

@ -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>

188
src/views/project/form/ProjectForm.vue Normal file
View File

@ -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>

70
src/views/project/form/ProjectStepForm.vue Normal file
View File

@ -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>

16
src/views/project/ProjectUnitSelect.vue → src/views/project/form/ProjectUnitSelect.vue
View File

@ -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

5
src/views/security/maps/map.js
View File

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

388
src/views/security/menu/MenuForm.vue Normal file
View File

@ -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>

372
src/views/security/menu/MenuForm2.vue Normal file
View File

@ -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>

159
src/views/security/menu/MenuList.vue Normal file
View File

@ -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>

83
src/views/security/modules/CreateForm.vue
View File

@ -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>

48
src/views/security/modules/UserDetail.vue
View File

@ -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>

186
src/views/security/resource/ResourceTree.vue
View File

@ -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>

100
src/views/security/resource/modules/OrgModal.vue
View File

@ -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>

147
src/views/security/resource/modules/RoleModal.vue
View File

@ -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>

117
src/views/security/role/RoleForm.vue Normal file
View File

@ -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>

185
src/views/security/role/RoleList.vue
View File

@ -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-form-item label="名称">
<a-input v-model="queryParam.name" placeholder="请输入名称" @pressEnter="handleFefresh"/>
<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="6" :sm="24">
<a-form-item label="状态">
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0" @pressEnter="handleFefresh">
<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 :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.roleForm.add()">新增角色</a-button>
</div>
<s-table
ref="table"
size="default"
rowKey="id"
:rowKey="(record) => record.id"
:columns="columns"
:data="loadData"
:rowSelection="rowSelection"
>
<template slot="time" slot-scope="text, record">{{record.createdAt | moment}}</template>
<template slot="tbStatus" slot-scope="text, record">
<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 href="javascript:;">删除</a>
<span slot="action" slot-scope="text, record">
<a @click="$refs.roleForm.edit(record)">编辑</a>
<a-divider type="vertical"/>
<a-dropdown>
<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 href="javascript:;" @click="handleDetail(record.id)">详情</a>
</template>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</s-table>
<create-form ref="modal" @ok="handleOk" />
<role-detail ref="detail"></role-detail>
<role-form ref="roleForm" @ok="handleOk"/>
<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 RoleDetail from './modules/RoleDetail'
import { statusMap } from '@/views/status/statusMap'
import { rolePage, roleDel } from '@/api/security/role'
import RoleForm from './RoleForm'
import RoleMenuForm from './RoleMenuForm'
export default {
name: 'roleList',
components: {
STable,
CreateForm,
RoleDetail
RoleForm,
RoleMenuForm
},
data () {
return {
statusMap: statusMap,
queryParam: { name: '', status: '' },
selectedRowKeys: [], // 选中行的key 出选择框时需要配置
selectedRows: [], // 选中行的数据
data: [],
queryParam: {},
loading: true,
columns: [
{ title: '名称', width: 30, dataIndex: 'name', key: 'name' },
{ title: '编码', width: 30, dataIndex: 'code', key: 'code' },
{
title: '创建时间',
width: 10,
key: 'createdAt',
align: 'center',
scopedSlots: { customRender: 'time' }
title: '角色名称',
dataIndex: 'name',
width: '20%'
},
{
title: '状态',
width: 10,
key: 'tbStatus',
align: 'center',
scopedSlots: { customRender: 'tbStatus' }
title: '唯一编码',
dataIndex: 'code'
},
{
title: '排序',
dataIndex: 'sort'
},
{
title: '操作',
key: 'operation',
width: 10,
align: 'right',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' }
}
],
loadData: parameter => {
return rolePage(Object.assign(parameter, this.queryParam))
.then(res => {
const data = res.data
data.entities.forEach((item) => {
item.status = item.status === 1
})
return data
return rolePage(Object.assign(parameter, this.queryParam)).then((res) => {
return res
})
}
}
},
computed: {
rowSelection () {
return {
selectedRowKeys: this.selectedRowKeys,
onChange: this.onSelectChange
}
}
created () {
// 根据权限加载，待处理
},
methods: {
// 修改状态
updateStatus (id, status) {
roleUpdateStatus({
id: id,
status: status ? 1 : 0
}).then(res => {
this.$notification.success({
message: '操作成功',
duration: 1,
description: status ? '角色已启用' : '角色已停用'
})
handleDel (record) {
roleDel({id: record.id}).then((res) => {
if (res.code == 200) {
this.$message.success('删除成功')
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>

186
src/views/security/role/RoleMenuForm.vue Normal file
View File

@ -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>

116
src/views/security/role/modules/CreateForm.vue
View File

@ -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>

46
src/views/security/role/modules/RoleDetail.vue
View File

@ -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>

282
src/views/security/user/UserForm.vue Normal file
View File

@ -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>

228
src/views/security/user/UserList.vue
View File

@ -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-input v-model="queryParam.realName" placeholder="请输入名称" @pressEnter="handleFefresh"/>
<a-form-item label="用户名称" >
<a-input v-model="queryParam.userName" placeholder="请输入用户名称"/>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="状态">
<a-select v-model="queryParam.enabled" placeholder="请选择" default-value="0" @pressEnter="handleFefresh">
<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 label="账号" >
<a-input v-model="queryParam.loginName" placeholder="请输入账号"/>
</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-form-item label="手机号码" >
<a-input v-model="queryParam.phoneNumber" placeholder="请输入手机号码"/>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24" align="right">
<a-button type="primary" @click="handleCreate">新增</a-button>
<a-col :md="4" :sm="24">
<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">
<a-switch checked-children="启用" un-checked-children="停用" v-model="record.enabled" @change="updateStatus(record.id, record.enabled)"/>
</template>
<template slot="action" slot-scope="text, record">
<a href="javascript:;" @click="handleEdit(record)">修改</a>
<span slot="sex" slot-scope="text, record">
{{ record.sex | sexFilter }}
</span>
<span slot="action" slot-scope="text, record">
<a @click="$refs.userForm.edit(record)">编辑</a>
<a-divider type="vertical" />
<a href="javascript:;" @click="handleDetail(record.id)">详情</a>
<a-divider type="vertical" />
<a href="javascript:;" @click="handleDetail(record.id)">修改密码</a>
</template>
<a-dropdown >
<a class="ant-dropdown-link">
更多 <a-icon type="down" />
</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-detail ref="detail"></user-detail>
<user-form ref="userForm" @ok="handleOk" />
<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 UserDetail from './modules/UserDetail'
import { statusMap } from '@/views/status/statusMap'
import { userPage, userDel, passwordReset } from '@/api/security/user'
import UserForm from './UserForm'
import UserRoleForm from './UserRoleForm'
import { sexMap } from '@/views/filterMap/sexMap'
export default {
name: 'UserList',
components: {
STable,
CreateForm,
UserDetail
UserForm,
UserRoleForm
},
data () {
return {
statusMap: statusMap,
queryParam: { realName: '', enabled: '' },
selectedRowKeys: [], // 选中行的key 出选择框时需要配置
selectedRows: [], // 选中行的数据
// 查询参数
queryParam: {},
// 表头
columns: [
{ title: '名称', width: 40, dataIndex: 'realName', key: 'realName' },
{ title: '手机号', width: 40, dataIndex: 'mobile', key: 'mobile' },
{ title: '邮箱', width: 40, dataIndex: 'email', key: 'email' },
{
title: '状态',
width: 10,
key: 'tbStatus',
align: 'center',
scopedSlots: { customRender: 'tbStatus' }
title: '账号',
dataIndex: 'loginName'
},
{
title: '姓名',
dataIndex: 'userName'
},
{
title: '昵称',
dataIndex: 'nickName'
},
{
title: '性别',
dataIndex: 'sex',
scopedSlots: { customRender: 'sex' }
}, {
title: '手机',
dataIndex: 'phoneNumber'
},
{
title: '操作',
key: 'operation',
width: 10,
align: 'right',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
const enabled = this.queryParam.enabled
const queryParam = {
realName: this.queryParam.realName,
enabled: enabled === '1' ? true : enabled === '0' ? false : ''
}
return userPage(Object.assign(parameter, queryParam))
.then(res => {
return res.data
return userPage(Object.assign(parameter, this.queryParam)).then((res) => {
return res
})
}
}
},
computed: {
rowSelection () {
return {
selectedRowKeys: [], // 选中行的key 出选择框时需要配置
selectedRows: [], // 选中行的数据
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) {
userUpdateEnabled({
id: id,
enabled: status ? 1 : 0
}).then(res => {
this.$notification.success({
message: '操作成功',
duration: 1,
description: status ? '用户已启用' : '用户已停用'
// 重置密码
resetPwd (record) {
passwordReset({ id: record.id }).then(res => {
if (res.code === 200) {
this.$message.success('重置成功')
// this.$refs.table.refresh()
} else {
this.$message.error('重置失败：' + res.message)
}
})
},
// 单个删除
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>

114
src/views/security/user/UserRoleForm.vue Normal file
View File

@ -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>

127
src/views/security/user/modules/CreateForm.vue
View File

@ -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>

56
src/views/security/user/modules/UserDetail.vue
View File

@ -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>

4
src/views/status/enabledMap.js
View File

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

4
src/views/status/statusMap.js
View File

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