Merge branch 'develop' of https://gitee.com/siwa-team/dawa-vue into develop
This commit is contained in:
commit
385a56f457
|
@ -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/)
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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
|
||||
})
|
||||
|
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
export const menuTypeMap = {
|
||||
0: '目录',
|
||||
1: '菜单',
|
||||
2: '按钮'
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
export const sexMap = {
|
||||
0: '未知',
|
||||
1: '男',
|
||||
2: '女'
|
||||
}
|
|
@ -303,6 +303,7 @@ export default {
|
|||
},
|
||||
onSelectChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
console.log(this.selectedRowKeys.length)
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
|
|
|
@ -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>
|
|
@ -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' },
|
||||
},
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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
|
|
@ -1,5 +0,0 @@
|
|||
export const typeMap = {
|
||||
'CORPORATION': '公司',
|
||||
'MALL': '门店',
|
||||
'STORE': '店铺'
|
||||
}
|
|
@ -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>
|
||||
前端组件
|
||||
</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>
|
||||
路由地址
|
||||
</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>
|
|
@ -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>
|
||||
前端组件
|
||||
</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>
|
||||
路由地址
|
||||
</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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -1,168 +1,129 @@
|
|||
<template>
|
||||
<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-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>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
rowKey="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>
|
||||
</a-popconfirm>
|
||||
<a-divider type="vertical" />
|
||||
<a href="javascript:;" @click="handleDetail(record.id)">详情</a>
|
||||
</template>
|
||||
</s-table>
|
||||
<create-form ref="modal" @ok="handleOk" />
|
||||
<role-detail ref="detail"></role-detail>
|
||||
</a-card>
|
||||
<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.roleForm.add()">新增角色</a-button>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
:rowKey="(record) => record.id"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
>
|
||||
<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-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
<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 ? '角色已启用' : '角色已停用'
|
||||
})
|
||||
this.$refs.table.refresh()
|
||||
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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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, this.queryParam)).then((res) => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
selectedRowKeys: [], // 选中行的key 出选择框时需要配置
|
||||
selectedRows: [], // 选中行的数据
|
||||
options: {
|
||||
alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
|
||||
rowSelection: {
|
||||
selectedRowKeys: this.selectedRowKeys,
|
||||
onChange: this.onSelectChange
|
||||
}
|
||||
return userPage(Object.assign(parameter, queryParam))
|
||||
.then(res => {
|
||||
return res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rowSelection () {
|
||||
return {
|
||||
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 ? '用户已启用' : '用户已停用'
|
||||
})
|
||||
this.$refs.table.refresh()
|
||||
// 重置密码
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 增
|
||||
handleCreate () {
|
||||
this.$refs.modal.add()
|
||||
// 单个删除
|
||||
singleDelete (record) {
|
||||
const param = { 'ids': record.id }
|
||||
this.sysUserDelete(param)
|
||||
},
|
||||
// 改
|
||||
handleEdit (record) {
|
||||
this.$refs.modal.edit(record)
|
||||
// 批量删除
|
||||
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)
|
||||
})
|
||||
},
|
||||
// 编辑后回调
|
||||
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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -1,4 +0,0 @@
|
|||
export const enabledMap = {
|
||||
'false': '停用',
|
||||
'true': '启用'
|
||||
}
|
|
@ -1,4 +0,0 @@
|
|||
export const statusMap = {
|
||||
'0': '停用',
|
||||
'1': '启用'
|
||||
}
|
Loading…
Reference in New Issue