Skip to content

N
newShopFront
Commit 68462395 authored by Your Name's avatar Your Name
Browse files
Options

权限节点列表

parent 26d5144f
Hide whitespace changes
Inline Side-by-side
Showing with 697 additions and 95 deletions
src/api/authority.js
View file @ 68462395
...@@ -98,7 +98,7 @@ export function searchUser (parameter) { ...@@ -98,7 +98,7 @@ export function searchUser (parameter) {
return axios({ return axios({
url: 'authority/manage-lists/search-user', url: 'authority/manage-lists/search-user',
method: 'get', method: 'get',
data: parameter params: parameter
}) })
} }
// 添加管理员 // 添加管理员
......
src/api/menu.js 0 → 100644
View file @ 68462395
import { axios } from '@/utils/request'
// export function getMenuList (params) {
// return axios({
// url: '/sys/menu/list',
// method: 'post',
// data: params
// })
// }
// 获取权限节点列表
export function getMenuList(parameter) {
console.log(parameter)
return axios({
url: 'authority/authority-nodes/node-list',
method: 'get',
params: parameter
})
}
export const addMenu = (params) => {
return axios({
url: '/sys/menu/add',
data: {
...params
},
method: 'post'
})
}
export const updateMenu = (params) => {
return axios.request({
url: '/sys/menu/update',
data: {
...params
},
method: 'post'
})
}
export const deleteMenu = (id) => {
return axios.request({
url: '/sys/menu/delete',
data: {
id
},
method: 'post'
})
}
export const getMenuWithRoleStatus = (params) => {
return axios.request({
url: '/sys/menu/listRole',
data: {
...params
},
method: 'post'
})
}
\ No newline at end of file
src/views/authority/details/Manage_editor.vue
View file @ 68462395
<template> <template>
<a-card :body-style="{ padding: '24px 32px' }" :bordered="false"> <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
<a-form :form="form"> <a-form :form="form">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="管理员账号"> <a-form-item v-show="false">
<a-input type="hidden" v-decorator="['USER_GUID']" name="USER_GUID" />
</a-form-item>
<a-form-item v-show="false">
<a-input type="hidden" v-decorator="['USER_ID']" name="USER_ID" />
</a-form-item>
<a-form-item v-show="false">
<a-input type="hidden" v-decorator="['CODE']" name="CODE"/>
</a-form-item>
<a-form-item v-show="false">
<a-input type="hidden" v-decorator="['BRANCH_GUID']" name="BRANCH_GUID"/><!-- 先写个GUID 这个需要获取门店接口-->
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="管理员账号" v-if="!GUID">
<!-- <a-input <!-- <a-input
v-decorator="['GUID', { rules: [{ required: true, message: '请输入姓名' }] }]" v-decorator="['GUID', { rules: [{ required: true, message: '请输入姓名' }] }]"
name="GUID" name="GUID"
...@@ -10,34 +22,34 @@ ...@@ -10,34 +22,34 @@
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
<a-input-group> <a-input-group>
<!-- <a-input v-decorator="['CODE']" name="CODE" placeholder="请输入员工邮箱/手机号" /> --> <!-- <a-input v-decorator="['CODE']" name="CODE" placeholder="请输入员工邮箱/手机号" disabled/> -->
<a-input style="width:50%" v-model="NAME" placeholder="请输入管理员账号" /> <a-input style="width:50%" v-model="CODE" placeholder="请输入管理员账号" />
<a-button @click='searchUser' type="primary" >查找用户信息</a-button> <a-button @click='searchUser' type="primary" >查找用户信息{{ userinfo.length }}</a-button>
</a-input-group> </a-input-group>
</a-col> </a-col>
</a-row> </a-row>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="姓名"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="姓名" v-if="userinfo">
<a-input <a-input
v-decorator="['NAME', { rules: [{ required: true, message: '请输入姓名' }] }]" v-decorator="['NAME', { rules: [{ required: true, message: '请输入姓名' }] }]"
name="NAME" name="NAME"
placeholder="请输入姓名" placeholder="请输入姓名"
/> />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="员工手机号"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="员工手机号" v-if="userinfo && !GUID">
<a-input v-decorator="['MOBILE_PHONE']" name="MOBILE_PHONE" /> <a-input v-decorator="['MOBILEPHONE']" name="MOBILEPHONE" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="性别"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="性别" v-if="userinfo && !GUID">
<a-input v-decorator="['CONTACT_SEX']" name="CONTACT_SEX" /> <a-input name="CONTACT_SEX" :value="userinfo.CONTACT_SEX" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="年龄"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="年龄" v-if="userinfo && !GUID">
<a-input v-decorator="['AGET']" name="AGET" /> <a-input name="AGE" :value="userinfo.AGE" />
</a-form-item> </a-form-item>
<!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="员工所属门店GUID"> <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="员工所属门店GUID">
<a-input v-decorator="['BRANCH_GUID']" name="BRANCH_GUID" /> <a-input v-decorator="['BRANCH_GUID']" name="BRANCH_GUID" />
</a-form-item> --> </a-form-item> -->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="员工所属门店名称"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="员工所属门店名称" v-if="userinfo">
<a-input v-decorator="['BRANCH_NAME']" name="BRANCH_NAME" /> <a-input name="BRANCH_NAME" :value="userinfo.BRANCHNAME" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拥有权限" > <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拥有权限" >
...@@ -64,7 +76,8 @@ export default { ...@@ -64,7 +76,8 @@ export default {
name: 'authority', name: 'authority',
data() { data() {
return { return {
NAME:'', userinfo:'',
CODE:'',
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 7 } sm: { span: 7 }
...@@ -91,38 +104,64 @@ export default { ...@@ -91,38 +104,64 @@ export default {
// this.goId = gooId // this.goId = gooId
this.GUID = id this.GUID = id
if (id) { if (id) {
// getManageGroupList().then(res => { getManageGroupList().then(res => {//先把拥有权限循环出来 保证渲染值时不出错
// this.grouplist = res.info; this.grouplist = res.info;
// return getManageUserInfo(id) return getManageUserInfo(id)
// }).then(res => { }).then(res => {
// this.form.setFieldsValue(res) var formValue = {
// this.res = res 'NAME':res.NAME,
// }).catch(err => { 'ROLE_ID':res.ROLE_ID,
'USER_ID':res.USER_ID,
// 'USER_GUID':'123',
// 'CODE':'456',
// 'BRANCH_GUID':'',
}
res.BRANCHNAME = res.BRANCH_NAME
this.userinfo = res
this.$nextTick(() => {this.form.setFieldsValue(formValue);})
console.log(formValue)
}).catch(err => {
// }) })
// loadData: parameter => { // loadData: parameter => {
// return getPermissions(Object.assign(parameter, this.queryParam)).then(res => { // return getPermissions(Object.assign(parameter, this.queryParam)).then(res => {
getManageUserInfo(id).then(res => { // getManageUserInfo(id).then(res => {
this.form.setFieldsValue(res) // var formValue = {
this.res = res // 'NAME':res.NAME,
}).catch(err => {}) // 'ROLE_ID':res.ROLE_ID,
// }
// this.userinfo = res.info
// this.$nextTick(() => {this.form.setFieldsValue(formValue);})
// this.userinfo = res
// }).catch(err => {})
}else{
//获取所有权限
getManageGroupList().then(res => {
console.log(res)
this.grouplist = res.info
}).catch(err => {})
} }
//获取所有权限
getManageGroupList().then(res => {
console.log(res)
this.grouplist = res.info
}).catch(err => {})
}, },
methods: { methods: {
//查找用户信息 //查找用户信息
searchUser(){ searchUser(){
var searchobj = { var searchobj = {
'MOBILE_PHONE':this.NAME 'MOBILE_PHONE':this.CODE
} }
searchUser(searchobj).then(res => { searchUser(searchobj).then(res => {
console.log(res) console.log(res)
this.grouplist = res.info var formValue = {
'NAME':res.info.USERNAME,
'MOBILEPHONE':res.info.MOBILE_PHONE,
'USER_GUID':res.info.GUID,
'CODE':res.info.CODE,
'ROLE_ID':'',
'BRANCH_GUID':'',
}
this.userinfo = res.info
this.$nextTick(() => {this.form.setFieldsValue(formValue);})
}).catch(err => {}) }).catch(err => {})
}, },
// checkboxGroup处理 // checkboxGroup处理
...@@ -165,13 +204,12 @@ export default { ...@@ -165,13 +204,12 @@ export default {
}, },
updateSubmit() { updateSubmit() {
let user_id= this.res.USER_ID;
const { const {
form: { validateFields } form: { validateFields }
} = this } = this
validateFields({ force: true }, (err, values) => { validateFields({ force: true }, (err, values) => {
if (!err) { if (!err) {
const ManageInfoModify = Object.assign({ ...values }, { USER_ID: user_id }) const ManageInfoModify = Object.assign({ ...values })
if (ManageInfoModify.ROLE_ID) { if (ManageInfoModify.ROLE_ID) {
ManageInfoModify.ROLE_ID = ManageInfoModify.ROLE_ID.toString() ManageInfoModify.ROLE_ID = ManageInfoModify.ROLE_ID.toString()
//ManageInfoModify.CONTACTBIRTH_DATE = ManageInfoModify.CONTACTBIRTH_DATE.format('YYYY-MM-DD') //ManageInfoModify.CONTACTBIRTH_DATE = ManageInfoModify.CONTACTBIRTH_DATE.format('YYYY-MM-DD')
......
src/views/authority/menuList.vue
View file @ 68462395
...@@ -30,16 +30,18 @@ ...@@ -30,16 +30,18 @@
ref="table" ref="table"
size="default" size="default"
rowKey="ID" rowKey="ID"
childrenColumnName ="son"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:scroll="{ x: 1200, y: 300 }" :scroll="{ x: 1200, y: 300 }"
:showPagination="pagination" :showPagination="pagination"
:rowSelection="rowSelection"
> >
<span slot="TITLE" slot-scope=""> <!-- <span slot="TITLE" slot-scope="">
<template> <template>
<div> <div> -->
<!-- <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" /> --> <!-- <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" /> -->
<a-tree <!-- <a-tree
@expand="onExpand" @expand="onExpand"
:expandedKeys="expandedKeys" :expandedKeys="expandedKeys"
:autoExpandParent="autoExpandParent" :autoExpandParent="autoExpandParent"
...@@ -56,7 +58,7 @@ ...@@ -56,7 +58,7 @@
</a-tree> </a-tree>
</div> </div>
</template> </template>
</span> </span> -->
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<template> <template>
<a @click="handleEdit(record)">编辑</a> <a @click="handleEdit(record)">编辑</a>
...@@ -148,60 +150,71 @@ ...@@ -148,60 +150,71 @@
import moment from 'moment' import moment from 'moment'
import { STable } from '@/components' import { STable } from '@/components'
import { getMenuList } from '@/api/authority' import { getMenuList } from '@/api/authority'
const x = 3; // const x = 3;
const y = 2; // const y = 2;
const z = 1; // const z = 1;
const gData = []; // const gData = [];
const generateData = (_level, _preKey, _tns) => { // const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || '0'; // const preKey = _preKey || '0';
const tns = _tns || gData; // const tns = _tns || gData;
const children = []; // const children = [];
for (let i = 0; i < x; i++) { // for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`; // const key = `${preKey}-${i}`;
tns.push({ title: key, key, scopedSlots: { title: 'title' } }); // tns.push({ title: key, key, scopedSlots: { title: 'title' } });
if (i < y) { // if (i < y) {
children.push(key); // children.push(key);
} // }
} // }
if (_level < 0) { // if (_level < 0) {
return tns; // return tns;
} // }
const level = _level - 1; // const level = _level - 1;
children.forEach((key, index) => { // children.forEach((key, index) => {
tns[index].children = []; // tns[index].children = [];
return generateData(level, key, tns[index].children); // return generateData(level, key, tns[index].children);
}); // });
}; // };
generateData(z); // generateData(z);
const dataList = []; // const dataList = [];
const generateList = data => { // const generateList = data => {
for (let i = 0; i < data.length; i++) { // for (let i = 0; i < data.length; i++) {
const node = data[i]; // const node = data[i];
const key = node.key; // const key = node.key;
dataList.push({ key, title: key }); // dataList.push({ key, title: key });
if (node.children) { // if (node.children) {
generateList(node.children, node.key); // generateList(node.children, node.key);
} // }
} // }
}; // };
generateList(gData); // generateList(gData);
const getParentKey = (key, tree) => { // const getParentKey = (key, tree) => {
let parentKey; // let parentKey;
for (let i = 0; i < tree.length; i++) { // for (let i = 0; i < tree.length; i++) {
const node = tree[i]; // const node = tree[i];
if (node.children) { // if (node.children) {
if (node.children.some(item => item.key === key)) { // if (node.children.some(item => item.key === key)) {
parentKey = node.key; // parentKey = node.key;
} else if (getParentKey(key, node.children)) { // } else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children); // parentKey = getParentKey(key, node.children);
} // }
} // }
} // }
return parentKey; // return parentKey;
// };
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
}; };
export default { export default {
name: 'authority', name: 'authority',
...@@ -210,11 +223,13 @@ export default { ...@@ -210,11 +223,13 @@ export default {
}, },
data() { data() {
return { return {
rowSelection,
expandedKeys: [], // expandedKeys: [],
searchValue: '', // searchValue: '',
autoExpandParent: true, // autoExpandParent: true,
gData, // gData,
// loading: false, // loading: false,
// parentTreeSelected: {}, // parentTreeSelected: {},
labelCol: { labelCol: {
...@@ -233,7 +248,7 @@ export default { ...@@ -233,7 +248,7 @@ export default {
columns: [ columns: [
{ {
title: '菜单名称', title: '菜单名称',
// dataIndex: 'TITLE', dataIndex: 'TITLE',
fixed: 'left', fixed: 'left',
width: 200, width: 200,
scopedSlots: { customRender: 'TITLE' } scopedSlots: { customRender: 'TITLE' }
......
src/views/authority/test.vue 0 → 100644
View file @ 68462395
<template>
<div>
<a-card style="margin-bottom:10px">
<a-form layout="inline">
<a-row :gutter="16" type="flex" justify="start">
<a-col :span="6">
<a-form-item label="名称：">
<a-input type="text" v-model="params.name"> </a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="类型：">
<a-radio-group v-model="params.state">
<a-radio-button value="0">显示</a-radio-button>
<a-radio-button value="1">禁用</a-radio-button>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item>
<a-button type="primary" @click="getData"> <a-icon type="search"></a-icon>搜索 </a-button>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<a-card hoverable>
<a-spin tip="加载中，请稍候..." :spinning="loading">
<a-button-group>
<a-button
type="primary"
:disabled="tableSelected.type && tableSelected.type === 'B'"
@click="addMenuClick"
>
<a-icon type="plus" />新增
</a-button>
<a-button type="primary" @click="editMenuClick"> <a-icon type="edit" />修改 </a-button>
<a-button type="danger" @click="deleteMenuClick"> <a-icon type="delete" />删除 </a-button>
</a-button-group>
<a-table
style="margin-top:10px"
:columns="header"
:dataSource="data"
rowKey="ID"
:defaultExpandedRowKeys="expandedRowKeys"
:rowSelection="rowSelection"
:customRow="customRow"
:pagination="false"
/>
</a-spin>
</a-card>
<a-modal v-model="showMenuModal" title="菜单" :maskClosable="false" @ok="editMenu">
<a-form :form="form">
<a-form-item v-show="false">
<a-input type="hidden" v-decorator="['id']"></a-input>
</a-form-item>
<a-form-item v-show="false">
<a-input type="hidden" v-decorator="['pid']"></a-input>
</a-form-item>
<a-form-item label="名称：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input type="text" v-decorator="['name', { rules: [{ required: true, message: '请输入菜单名' }] }]">
</a-input>
</a-form-item>
<a-form-item label="父菜单：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-tree-select
style="width:100%"
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
:treeData="modalTreeData"
:treeDefaultExpandedKeys="expandedRowKeys"
treeNodeLabelProp="name"
treeNodeFilterProp="id"
@select="parentTreeSelect"
:disabled="modalParams.type == 'B' && editType == 'update'"
v-decorator="['pMenu', { rules: [{ required: false }] }]"
>
</a-tree-select>
</a-form-item>
<a-form-item label="路径：" v-show="modalParams.type != 'B'" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['path', { rules: [{ required: modalParams.type != 'B', message: '请输入菜单路径' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="组件：" v-show="modalParams.type == 'M'" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['component', { rules: [{ required: modalParams.type == 'M', message: '请输入菜单组件' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="权限标识：" v-show="modalParams.type != 'D'" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['permName']"
placeholder="权限标识"
/>
</a-form-item>
<a-form-item label="图标：" v-show="modalParams.type != 'B'" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input type="text" v-decorator="['icon']"> </a-input>
</a-form-item>
<a-form-item label="排序：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input type="number" v-decorator="['sort']"> </a-input>
</a-form-item>
<a-form-item label="类型：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-radio-group
buttonStyle="solid"
:disabled="editType == 'update'"
v-model="modalParams.type"
v-decorator="[
'type',
{ rules: [{ required: true, message: '请选择菜单类型' }, { validator: makeMenuTypeSafe }] }
]"
>
<a-radio-button value="D">目录</a-radio-button>
<a-radio-button value="M">菜单</a-radio-button>
<a-radio-button value="B">按钮</a-radio-button>
</a-radio-group>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script>
import { getMenuList, addMenu, updateMenu, deleteMenu } from '@/api/authority'
export default {
methods: {
regetTreeData () {
if (this.modalTreeData.length <= 0) {
getMenuList({}).then(res => {
this.modalTreeData = [{ id: 0, name: '主菜单', type: 'D' }]
this.modalTreeData[0].children = res.data
this.makeTreeDataSafe(this.modalTreeData)
})
}
},
customRow (record) {
return {
on: {
click: () => {
this.rowSelection.selectedRowKeys = [record.id]
this.tableSelected = record
}
}
}
},
parentTreeSelect (value, node, extra) {
this.parentTreeSelected = extra.selectedNodes[0].data.props
},
getMenuById (data, id) {
if (id === null) return null
for (var i = 0; i < data.length; i++) {
if (data[i].id === id) {
return data[i]
}
if (data[i].children) {
var ret = null
if ((ret = this.getMenuById(data[i].children, id))) {
return ret
}
}
}
},
initMenuParams () {
this.modalParams = {
pMenu: '',
pid: '',
type: 'M',
permName: '',
name: '',
path: '',
component: '',
icon: ''
}
},
addMenuClick () {
if (this.tableSelected.type === 'B') {
this.$error({ title: '按钮下不能创建子项' })
return
}
this.editType = 'add'
this.initMenuParams()
this.modalParams.pMenu = this.tableSelected.name ? this.tableSelected.name : '主菜单'
this.modalParams.pid = this.tableSelected.id ? this.tableSelected.id : 0
if (this.tableSelected.type === 'M') {
this.modalParams.type = 'B'
}
this.showMenuModal = true
},
editMenuClick () {
if (!this.tableSelected.id) {
this.$message.warning('请选择要修改的菜单项', 5)
return
}
this.editType = 'update'
this.initMenuParams()
this.tableSelected = this.getMenuById(this.data, this.tableSelected.id)
Object.assign(this.modalParams, this.tableSelected)
var parentMenu = this.getMenuById(this.modalTreeData, this.modalParams.pid)
this.modalParams.pMenu = parentMenu.name
this.showMenuModal = true
},
deleteMenuClick () {
if (!this.tableSelected.id) {
this.$message.warning('请选择要删除的菜单项', 5)
return
}
this.$confirm({
title: `确认删除菜单【${this.tableSelected.name}】吗？`,
onOk: () => {
deleteMenu(this.tableSelected.id).then(res => {
if (!res.code) {
this.tableSelected = {}
this.$message.success('删除成功', 5)
this.getData()
this.updateModalTreeIfNeed()
} else {
this.$error({ title: `删除失败：${res.msg}` })
}
})
}
})
},
makeMenuTypeSafe (rule, value, cb) {
var parentType = 'D'
if (this.parentTreeSelected.type) {
// 用户自己选择父菜单
parentType = this.parentTreeSelected.type
} else if (this.modalParams.pid) {
// 对话框刚打开时
var parentMenu = this.getMenuById(this.modalTreeData, this.modalParams.pid)
parentType = parentMenu ? parentMenu.type : 'D'
}
if (parentType === 'M' && value !== 'B') {
cb(new Error('菜单下只能包含按钮'))
} else if (parentType === 'D' && value === 'B') {
cb(new Error('目录下不能包含按钮'))
} else if (parentType === 'B') {
cb(new Error('按钮下不能包含子项'))
}
cb()
},
updateModalTreeIfNeed () {
if (Object.keys(this.params).length === 0) {
this.modalTreeData = []
this.regetTreeData()
}
},
editMenu () {
this.form.validateFields((err, values) => {
if (!err) {
if (this.editType === 'add') {
addMenu(values).then(res => {
if (!res.code) {
this.showMenuModal = false
this.$message.success('添加成功', 5)
this.getData()
this.updateModalTreeIfNeed()
} else {
this.$error({ title: `添加失败：${res.msg}` })
}
})
} else if (this.editType === 'update') {
// 修改父菜单
if (this.parentTreeSelected.id) {
values.pid = this.parentTreeSelected.id
if (values.pid === values.id) {
this.$error({ title: `父菜单不能是自身` })
return
}
}
updateMenu(values).then(res => {
if (!res.code) {
this.showMenuModal = false
this.$message.success('修改成功', 5)
this.getData()
if (this.parentTreeSelected.id) {
// 更新下树结构
this.updateModalTreeIfNeed()
}
} else {
this.$error({ title: `修改失败：${res.msg}` })
}
})
}
}
})
},
getData () {
this.loading = true
getMenuList(this.params).then(res => {
this.loading = false
this.data = res
// 设置第一层级默认展开
this.expandedRowKeys.push(...this.data.map(item => item.ID))
if (Object.keys(this.params).length === 0 && this.modalTreeData.length <= 0) {
this.modalTreeData = [{ id: 0, name: '主菜单', type: 'D' }]
this.modalTreeData[0].children = JSON.parse(JSON.stringify(this.data))
this.makeTreeDataSafe(this.modalTreeData)
}
})
},
makeTreeDataSafe (data) {
// 修改为antd控件需要的不同属性名
for (var i = data.length - 1; i >= 0; i--) {
var item = data[i]
if (item.type === 'B') {
data.splice(i, 1)
}
item.title = item.name
item.key = item.id
item.value = item.name
if (item.children) {
this.makeTreeDataSafe(item.children)
}
}
}
},
created () {
this.getData()
},
watch: {
showMenuModal (newVal) {
if (newVal) {
this.parentTreeSelected = {}
this.$nextTick(() => {
this.form.setFieldsValue(this.modalParams)
})
}
}
},
data () {
return {
loading: false,
parentTreeSelected: {},
labelCol: {
xs: { span: 5 }
},
wrapperCol: {
xs: { span: 17 }
},
form: this.$form.createForm(this),
rowSelection: {
type: 'radio',
selectedRowKeys: []
},
header: [
{
title: '名称',
dataIndex: 'TITLE',
customRender: (value, row, index) => {
var ret = []
// 添加icon
if (row.icon) {
ret.push(<a-icon type={row.icon} style="font-size:14px;padding-right:3px" />)
} else {
ret.push(<span style="padding-right:17px" />)
}
return (
<span>
{ret}
<span>{value}</span>
</span>
)
}
},
{
title: '路径',
dataIndex: 'path'
},
{
title: '组件',
dataIndex: 'component'
},
{
title: '权限标识',
dataIndex: 'permName'
},
{
title: '类型',
dataIndex: 'type',
customRender: (type, row, index) => {
return (
<div>
{type === 'D' ? (
<a-tag color="blue">目录</a-tag>
) : type === 'M' ? (
<a-tag color="green">菜单</a-tag>
) : (
<a-tag color="volcano">按钮</a-tag>
)}
</div>
)
}
},
{
title: '状态',
dataIndex: 'state',
customRender: (state, row, index) => {
return <div>{state === 0 ? <a-tag color="cyan">显示</a-tag> : <a-tag color="red">隐藏</a-tag>}</div>
}
},
{
title: '排序',
dataIndex: 'sort'
},
{
title: '操作',
customRender: (state, row, index) => {
// return (
// <div>
// <a-button-group>
// {this.$hasPerm('menu:add') ? (
// <a-tooltip title="新增">
// <a-button
// style={{ visibility: row.type === 'B' ? 'hidden' : '' }}
// type="primary"
// size="small"
// icon="plus"
// onClick={() => {
// this.tableSelected = row
// this.addMenuClick()
// }}
// />
// </a-tooltip>
// ) : (
// ''
// )}
// {this.$hasPerm('menu:edit') ? (
// <a-tooltip title="修改">
// <a-button
// type="primary"
// size="small"
// icon="edit"
// onClick={() => {
// this.tableSelected = row
// this.editMenuClick()
// }}
// />
// </a-tooltip>
// ) : (
// ''
// )}
// {this.$hasPerm('menu:remove') ? (
// <a-tooltip title="删除">
// <a-button
// type="danger"
// size="small"
// icon="delete"
// onClick={() => {
// this.tableSelected = row
// this.deleteMenuClick()
// }}
// />
// </a-tooltip>
// ) : (
// ''
// )}
// </a-button-group>
// </div>
// )
}
}
],
data: [],
modalTreeData: [],
params: {},
modalParams: {
type: 'M'
},
showMenuModal: false,
tableSelected: {},
editType: '',
expandedRowKeys: []
}
}
}
</script>
<style>
.ant-card-body {
padding: 10px;
}
.ant-card-wider-padding .ant-card-body {
padding: 10px;
}
.ant-table-tbody > tr > td {
padding: 10px 10px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment