Skip to content

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

节点添加编辑弹框

parent 3c995732
Hide whitespace changes
Inline Side-by-side
Showing with 498 additions and 456 deletions
src/api/authority.js
View file @ fb358db8
...@@ -23,6 +23,17 @@ export function getMenuList(parameter) { ...@@ -23,6 +23,17 @@ export function getMenuList(parameter) {
params: parameter params: parameter
}) })
} }
// 获取权限节点详情
export function getMenuDetails (parameter) {
console.log(parameter)
return axios({
url: 'authority/authority-nodes/node-details',
method: 'get',
params: {
'ID':parameter
}
})
}
// 获取角色列表 // 获取角色列表
export function getRoleList(parameter) { export function getRoleList(parameter) {
return axios({ return axios({
......
src/views/authority/menuList.vue
View file @ fb358db8
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<a-card style="margin-bottom:10px"> <a-card style="margin-bottom:10px">
<a-form :form="newform" layout="inline"> <a-form :form="newform" layout="inline">
<a-row :gutter="16" type="flex" justify="start"> <a-row :gutter="16" type="flex" justify="start">
<!-- <a-col :span="6"> <a-col :span="6">
<a-form-item label="名称："> <a-form-item label="名称：">
<a-input type="text" v-model="queryParam.TITLE"> </a-input> <a-input type="text" v-model="queryParam.TITLE"> </a-input>
</a-form-item> </a-form-item>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<a-radio-button value="1">禁用</a-radio-button> <a-radio-button value="1">禁用</a-radio-button>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
</a-col> --> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-form-item> <a-form-item>
<a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" /> <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
...@@ -24,7 +24,11 @@ ...@@ -24,7 +24,11 @@
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
<div class="table-operator">
<a-button-group>
<a-button type='primary' icon='plus' @click="getMenuClick(1)">添加节点</a-button>
</a-button-group>
</div>
<s-table <s-table
style="margin-top:10px" style="margin-top:10px"
ref="table" ref="table"
...@@ -33,14 +37,13 @@ ...@@ -33,14 +37,13 @@
childrenColumnName ="son" childrenColumnName ="son"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:showPagination="pagination" :showPagination="pagination"
:rowSelection="rowSelection" :rowSelection="rowSelection"
> >
<!-- :scroll="{ x: 1200, y: 300 }" --> <!-- :scroll="{ x: 1200, y: 300 }" -->
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<template> <template>
<a @click="handleEdit(record)">编辑</a> <a @click="getMenuClick(record)">编辑</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.ID)"> <a-popconfirm title="是否要删除此行？" @confirm="remove(record.ID)">
<a>删除</a> <a>删除</a>
...@@ -48,9 +51,103 @@ ...@@ -48,9 +51,103 @@
</template> </template>
</span> </span>
</s-table> </s-table>
<!-- </a-spin> --> <a-modal :title="modalTitle" v-model="showMenuModal" :maskClosable="false" @ok="editMenu()">
</a-card> <a-form :form="form">
<a-form-item label="菜单名称:" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['TITLE', { rules: [{ message: '请输入菜单名称' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="菜单地址：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['NAME', { rules: [{ message: '请输入菜单地址' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="图标：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['ICON', { rules: [{ message: '请输入图标' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="菜单状态：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['STATUS', { rules: [{ message: '请输入菜单状态' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="是否为菜单：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['IS_MENU', { rules: [{ message: '请输入是否为菜单' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="是否顶部菜单：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['IS_TOP_MENU', { rules: [{ message: '请输入是否顶部菜单' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="是否默认显示：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['IS_DEFAULT_SHOW', { rules: [{ message: '请输入是否进入默认显示页面' }] }]"
>
</a-input>
</a-form-item>
<a-form-item label="描述：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input
type="text"
v-decorator="['REMARK']"
placeholder="描述"
/>
</a-form-item>
<!-- <a-form-item label="图标：" :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="父级菜单ID：" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-input type="number" v-decorator="['PID']"> </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="queryParam.LEVEL"
v-decorator="[
'LEVEL',
{ rules: [{ required: true, message: '请选择菜单层级等级' }, { validator: makeMenuTypeSafe }] }
]"
>
<a-radio-button value="0">项目</a-radio-button>
<a-radio-button value="1">模块</a-radio-button>
<a-radio-button value="2">操作</a-radio-button>
<a-radio-button value="3">动作</a-radio-button>
</a-radio-group>
</a-form-item>
<!-- <a-tree
checkable
:replaceFields="modalTree.replaceFields"
:treeData="modalTree.treeData"
v-model="modalTree.checkedKeys"
>
</a-tree> -->
</a-form>
</a-modal>
</a-card>
<!--
<!-- <a-modal v-model="showMenuModal" title="菜单" :maskClosable="false" @ok="editMenu"> <!-- <a-modal v-model="showMenuModal" title="菜单" :maskClosable="false" @ok="editMenu">
<a-form :form="form"> <a-form :form="form">
<a-form-item v-show="false"> <a-form-item v-show="false">
...@@ -128,62 +225,7 @@ ...@@ -128,62 +225,7 @@
// , addMenu, updateMenu, deleteMenu // , addMenu, updateMenu, deleteMenu
import moment from 'moment' import moment from 'moment'
import { STable } from '@/components' import { STable } from '@/components'
import { getMenuList } from '@/api/authority' import { getMenuList, getMenuDetails} from '@/api/authority'
// const x = 3;
// const y = 2;
// const z = 1;
// const gData = [];
// const generateData = (_level, _preKey, _tns) => {
// const preKey = _preKey || '0';
// const tns = _tns || gData;
// const children = [];
// for (let i = 0; i < x; i++) {
// const key = `${preKey}-${i}`;
// tns.push({ title: key, key, scopedSlots: { title: 'title' } });
// if (i < y) {
// children.push(key);
// }
// }
// if (_level < 0) {
// return tns;
// }
// const level = _level - 1;
// children.forEach((key, index) => {
// tns[index].children = [];
// return generateData(level, key, tns[index].children);
// });
// };
// generateData(z);
// const dataList = [];
// const generateList = data => {
// for (let i = 0; i < data.length; i++) {
// const node = data[i];
// const key = node.key;
// dataList.push({ key, title: key });
// if (node.children) {
// generateList(node.children, node.key);
// }
// }
// };
// generateList(gData);
// const getParentKey = (key, tree) => {
// let parentKey;
// for (let i = 0; i < tree.length; i++) {
// const node = tree[i];
// if (node.children) {
// if (node.children.some(item => item.key === key)) {
// parentKey = node.key;
// } else if (getParentKey(key, node.children)) {
// parentKey = getParentKey(key, node.children);
// }
// }
// }
// return parentKey;
// };
const rowSelection = { const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => { onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
...@@ -203,14 +245,6 @@ export default { ...@@ -203,14 +245,6 @@ export default {
data() { data() {
return { return {
rowSelection, rowSelection,
// expandedKeys: [],
// searchValue: '',
// autoExpandParent: true,
// gData,
// loading: false,
// parentTreeSelected: {},
labelCol: { labelCol: {
xs: { span: 5 } xs: { span: 5 }
}, },
...@@ -218,12 +252,18 @@ export default { ...@@ -218,12 +252,18 @@ export default {
xs: { span: 17 } xs: { span: 17 }
}, },
// 查询参数 // 查询参数
queryParam: {}, queryParam: {
LEVEL:'0'
},
form: this.$form.createForm(this),
newform: this.$form.createForm(this), newform: this.$form.createForm(this),
// rowSelection: { rowSelection: {
// type: 'radio', type: 'radio',
// selectedRowKeys: [] selectedRowKeys: []
// }, },
showMenuModal:false,
modalTitle:'添加角色',//modal标题
addoredit:1,//添加1or编辑0
columns: [ columns: [
{ {
title: '菜单名称', title: '菜单名称',
...@@ -231,37 +271,28 @@ export default { ...@@ -231,37 +271,28 @@ export default {
// fixed: 'left', // fixed: 'left',
// width: 200, // width: 200,
width: '20%', width: '20%',
scopedSlots: { customRender: 'TITLE' } scopedSlots: { customRender: '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: 'TITLE',
// width:200,
// key:'TITLE',
// fixed:'left'
// },
{ {
title: '节点id', title: '节点id',
dataIndex: 'ID', dataIndex: 'ID',
width: '8%', width: '8%',
// width: 90,
key: 'ID', key: 'ID',
// fixed: 'left'
// 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: '菜单地址', title: '菜单地址',
...@@ -271,26 +302,48 @@ export default { ...@@ -271,26 +302,48 @@ export default {
}, },
{ {
title: '菜单状态', title: '菜单状态',
width: '6%', width: '8%',
dataIndex: 'STATUS', dataIndex: 'STATUS',
customRender: (state, row, index) => {
return <div>{state === 0 ? <a-tag color="red">禁用</a-tag> : <a-tag color="cyan">启用</a-tag>}</div>
}
// width: 150 // width: 150
}, },
{ {
title: '是否为菜单', title: '是否为菜单',
width: '6%', width: '6%',
dataIndex: 'IS_MENU', dataIndex: 'IS_MENU',
// width: 100 customRender: (text) => {
if(Number(text)==0){
return "否"
}else{
return "是"
}
}
}, },
{ {
title: '是否顶部菜单', title: '是否顶部菜单',
width: '6%', width: '6%',
dataIndex: 'IS_TOP_MENU', dataIndex: 'IS_TOP_MENU',
// width: 100 customRender: (text) => {
if(Number(text)==0){
return "否"
}else{
return "是"
}
}
}, },
{ {
title: '是否默认显示', title: '是否默认显示',
width: '6%', width: '6%',
dataIndex: 'IS_DEFAULT_SHOW', dataIndex: 'IS_DEFAULT_SHOW',
customRender: (text) => {
if(Number(text)==0){
return "否"
}else{
return "是"
}
}
// width: 150 // width: 150
}, },
{ {
...@@ -322,14 +375,34 @@ export default { ...@@ -322,14 +375,34 @@ export default {
dataIndex: 'SORT', dataIndex: 'SORT',
// width: 100 // width: 100
}, },
{ // {
// title: '类型',
//LEVEL:菜单层级等级(类型-0:项目,1:模块,2:操作,3:动作),
// dataIndex: 'LEVEL',
// width: '5%',
// // width: 100
// // customRender: (state, row, index) => {
// // return <div>{state === 0 ? <a-tag color="cyan">显示</a-tag> : <a-tag color="red">隐藏</a-tag>}</div>
// // }
// },
{
title: '类型', title: '类型',
dataIndex: 'LEVEL', dataIndex: 'LEVEL',
width: '5%', customRender: (type, row, index) => {
// width: 100 return (
// customRender: (state, row, index) => { <div>
// return <div>{state === 0 ? <a-tag color="cyan">显示</a-tag> : <a-tag color="red">隐藏</a-tag>}</div> {type === '0' ? (
// } <a-tag color="blue">项目</a-tag>
) : type === '1' ? (
<a-tag color="green">模块</a-tag>
) : type === '2' ? (
<a-tag color="red">操作</a-tag>
) : (
<a-tag color="volcano">操作</a-tag>
)}
</div>
)
}
}, },
{ {
...@@ -357,7 +430,8 @@ export default { ...@@ -357,7 +430,8 @@ export default {
}, },
selectedRowKeys: [], selectedRowKeys: [],
selectedRows: [], selectedRows: [],
modalNow: 1 // modalNow: 1,
// ICON:'',
// data: [], // data: [],
// modalTreeData: [], // modalTreeData: [],
// params: {}, // params: {},
...@@ -366,15 +440,26 @@ export default { ...@@ -366,15 +440,26 @@ export default {
// }, // },
// showMenuModal: false, // showMenuModal: false,
// tableSelected: {}, // tableSelected: {},
// editType: '', editType: '',
// expandedRowKeys: [] // expandedRowKeys: []
} }
}, },
methods: { methods: {
onExpand(expandedKeys) { // onExpand(expandedKeys) {
this.expandedKeys = expandedKeys; // this.expandedKeys = expandedKeys;
this.autoExpandParent = false; // this.autoExpandParent = false;
}, // },
getMenuClick(value){
this.showMenuModal=true;
if(value==1){
this.addoredit=1;
this.modalTitle='添加节点';
}else{
this.addoredit=0;
this.modalTitle='编辑节点';
this.getMenuDetails(value.ID)
}
},
onChange(e) { onChange(e) {
const value = e.target.value; const value = e.target.value;
const expandedKeys = dataList const expandedKeys = dataList
...@@ -391,18 +476,49 @@ export default { ...@@ -391,18 +476,49 @@ export default {
autoExpandParent: true, autoExpandParent: true,
}); });
}, },
// secondLoad(){ // 获取节点详情
loadData: parameter => { getMenuDetails(value){
return getMenuList(Object.assign(parameter, this.queryParam)).then(res => { getMenuDetails(value).then(res => {
// res.pageSize = res._meta.perPage // this.$nextTick(() => {
// res.page = res._meta.currentPage // this.modalForm.setFieldsValue(res)
// res.totalPage = res._meta.pageCount // })
// res.totalCount = res._meta.totalCount var formValue = {
this.listData = res 'NAME':res.NAME,
res.data = this.listData 'TITLE':res.TITLE,
return res 'ICON':res.ICON,
'STATUS':res.STATUS,
'IS_MENU':res.IS_MENU,
'IS_TOP_MENU':res.IS_TOP_MENU,
'IS_DEFAULT_SHOW':res.IS_DEFAULT_SHOW,
'REMARK':res.REMARK,
'SORT':res.SORT,
'LEVEL':res.LEVEL,
}
this.$nextTick(() => {this.form.setFieldsValue(formValue);})
console.log(formValue)
}).catch(err => {
}) })
} },
makeMenuTypeSafe (rule, value, cb) {
var parentType = '0'
// 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 === '1' && value !== '2') {
cb(new Error('菜单下只能包含按钮'))
} else if (parentType === '0' && value === '3') {
cb(new Error('目录下不能包含按钮'))
} else if (parentType === '3') {
cb(new Error('按钮下不能包含子项'))
}
cb()
},
} }
} }
......
src/views/authority/test.vue
View file @ fb358db8
<template> <template>
<div> <div>
<a-card style="margin-bottom:10px"> <a-card style="margin-bottom:10px">
<a-form layout="inline"> <a-form :form="newform" layout="inline">
<a-row :gutter="16" type="flex" justify="start"> <a-row :gutter="16" type="flex" justify="start">
<a-col :span="6"> <!-- <a-col :span="6">
<a-form-item label="名称："> <a-form-item label="名称：">
<a-input type="text" v-model="params.name"> </a-input> <a-input type="text" v-model="queryParam.TITLE"> </a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-form-item label="类型："> <a-form-item label="类型：">
<a-radio-group v-model="params.state"> <a-radio-group>
<a-radio-button value="0">显示</a-radio-button> <a-radio-button value="0">显示</a-radio-button>
<a-radio-button value="1">禁用</a-radio-button> <a-radio-button value="1">禁用</a-radio-button>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col> -->
<a-col :span="6"> <a-col :span="6">
<a-form-item> <a-form-item>
<a-button type="primary" @click="getData"> <a-icon type="search"></a-icon>搜索 </a-button> <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
<!-- <a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</a-card> <div class="table-operator">
<a-card hoverable>
<a-spin tip="加载中，请稍候..." :spinning="loading">
<a-button-group> <a-button-group>
<a-button <a-button type='primary' icon='plus' @click="getMenuClick()">添加节点</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-button-group>
<a-table </div>
style="margin-top:10px" <s-table
:columns="header" style="margin-top:10px"
:dataSource="data" ref="table"
rowKey="ID" size="default"
:defaultExpandedRowKeys="expandedRowKeys" rowKey="ID"
:rowSelection="rowSelection" childrenColumnName ="son"
:customRow="customRow" :columns="columns"
:pagination="false" :data="loadData"
/> :showPagination="pagination"
</a-spin> :rowSelection="rowSelection"
</a-card> >
<!-- :scroll="{ x: 1200, y: 300 }" -->
<span slot="action" slot-scope="text, record">
<template>
<a @click="getMenuClick(record.ID)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.ID)">
<a>删除</a>
</a-popconfirm>
</template>
</span>
</s-table>
<a-modal title="菜单" v-model="showMenuModal" :maskClosable="false" @ok="editMenu()">
<a-form :form="form">
<!-- <a-tree
checkable
:replaceFields="modalTree.replaceFields"
:treeData="modalTree.treeData"
v-model="modalTree.checkedKeys"
>
<a-modal v-model="showMenuModal" title="菜单" :maskClosable="false" @ok="editMenu"> </a-tree> -->
</a-form>
</a-modal>
</a-card>
<!--
<!-- <a-modal v-model="showMenuModal" title="菜单" :maskClosable="false" @ok="editMenu">
<a-form :form="form"> <a-form :form="form">
<a-form-item v-show="false"> <a-form-item v-show="false">
<a-input type="hidden" v-decorator="['id']"></a-input> <a-input type="hidden" v-decorator="['id']"></a-input>
...@@ -121,241 +135,62 @@ ...@@ -121,241 +135,62 @@
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal> -->
</div> </div>
</template> </template>
<script> <script>
import { getMenuList, addMenu, updateMenu, deleteMenu } from '@/api/authority' // , addMenu, updateMenu, deleteMenu
export default { import moment from 'moment'
methods: { import { STable } from '@/components'
regetTreeData () { import { getMenuList, getMenuDetails } from '@/api/authority'
if (this.modalTreeData.length <= 0) { const rowSelection = {
getMenuList({}).then(res => { onChange: (selectedRowKeys, selectedRows) => {
this.modalTreeData = [{ id: 0, name: '主菜单', type: 'D' }] console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.modalTreeData[0].children = res.data
this.makeTreeDataSafe(this.modalTreeData)
})
}
}, },
customRow (record) { onSelect: (record, selected, selectedRows) => {
return { console.log(record, selected, selectedRows);
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 () { onSelectAll: (selected, selectedRows, changeRows) => {
if (this.tableSelected.type === 'B') { console.log(selected, selectedRows, changeRows);
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) { export default {
this.$message.warning('请选择要修改的菜单项', 5) name: 'authority',
return components: {
} STable
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 () { data() {
return { return {
loading: false, rowSelection,
parentTreeSelected: {},
labelCol: { labelCol: {
xs: { span: 5 } xs: { span: 5 }
}, },
wrapperCol: { wrapperCol: {
xs: { span: 17 } xs: { span: 17 }
}, },
// 查询参数
queryParam: {},
form: this.$form.createForm(this), form: this.$form.createForm(this),
newform: this.$form.createForm(this),
rowSelection: { rowSelection: {
type: 'radio', type: 'radio',
selectedRowKeys: [] selectedRowKeys: []
}, },
header: [ showMenuModal:false,
addoredit:1,//添加1or编辑0
columns: [
{ {
title: '名称', title: '菜单名称',
dataIndex: 'TITLE', dataIndex: 'TITLE',
// fixed: 'left',
// width: 200,
width: '20%',
scopedSlots: { customRender: 'TITLE' },
customRender: (value, row, index) => { customRender: (value, row, index) => {
var ret = [] var ret = []
// 添加icon // 添加icon
if (row.icon) { if (row.ICON) {
ret.push(<a-icon type={row.icon} style="font-size:14px;padding-right:3px" />) ret.push(<a-icon type={row.ICON} style="font-size:14px;padding-right:3px" />)
} else { } else {
ret.push(<span style="padding-right:17px" />) ret.push(<span style="padding-right:17px" />)
} }
...@@ -368,115 +203,195 @@ export default { ...@@ -368,115 +203,195 @@ export default {
} }
}, },
{ {
title: '路径', title: '节点id',
dataIndex: 'path' dataIndex: 'ID',
width: '8%',
key: 'ID',
},
{
title: '菜单地址',
dataIndex: 'NAME',
width: '15%',
// width: 200
}, },
{ {
title: '组件', title: '菜单状态',
dataIndex: 'component' width: '8%',
dataIndex: 'STATUS',
customRender: (state, row, index) => {
return <div>{state === 0 ? <a-tag color="red">禁用</a-tag> : <a-tag color="cyan">启用</a-tag>}</div>
}
// width: 150
}, },
{ {
title: '权限标识', title: '是否为菜单',
dataIndex: 'permName' width: '6%',
dataIndex: 'IS_MENU',
customRender: (text) => {
if(Number(text)==0){
return "否"
}else{
return "是"
}
}
}, },
{ {
title: '是否顶部菜单',
width: '6%',
dataIndex: 'IS_TOP_MENU',
customRender: (text) => {
if(Number(text)==0){
return "否"
}else{
return "是"
}
}
},
{
title: '是否默认显示',
width: '6%',
dataIndex: 'IS_DEFAULT_SHOW',
customRender: (text) => {
if(Number(text)==0){
return "否"
}else{
return "是"
}
}
// width: 150
},
{
title: '描述',
width: '12%',
dataIndex: 'REMARK',
// width: 90
},
// {
// 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: '排序',
width: '5%',
dataIndex: 'SORT',
// width: 100
},
// {
// title: '类型',
//LEVEL:菜单层级等级(类型-0:项目,1:模块,2:操作,3:动作),
// dataIndex: 'LEVEL',
// width: '5%',
// // width: 100
// // customRender: (state, row, index) => {
// // return <div>{state === 0 ? <a-tag color="cyan">显示</a-tag> : <a-tag color="red">隐藏</a-tag>}</div>
// // }
// },
{
title: '类型', title: '类型',
dataIndex: 'type', dataIndex: 'LEVEL',
customRender: (type, row, index) => { customRender: (type, row, index) => {
return ( return (
<div> <div>
{type === 'D' ? ( {type === '0' ? (
<a-tag color="blue">目录</a-tag> <a-tag color="blue">项目</a-tag>
) : type === 'M' ? ( ) : type === '1' ? (
<a-tag color="green">菜单</a-tag> <a-tag color="green">模块</a-tag>
) : type === '2' ? (
<a-tag color="red">操作</a-tag>
) : ( ) : (
<a-tag color="volcano">按钮</a-tag> <a-tag color="volcano">操作</a-tag>
)} )}
</div> </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: '操作', title: '操作',
customRender: (state, row, index) => { dataIndex: 'action',
// return ( // fixed: 'right',
// <div> width:'15%',
// <a-button-group> scopedSlots: { customRender: 'action' }
// {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: [], listData: [],
modalTreeData: [], pagination: false,
params: {}, // 加载数据方法 必须为 Promise 对象
modalParams: { loadData: parameter => {
type: 'M' return getMenuList().then(res => {
// res.pageSize = res._meta.perPage
// res.page = res._meta.currentPage
// res.totalPage = res._meta.pageCount
// res.totalCount = res._meta.totalCount
console.log(res)
this.listData = res
res.data = this.listData
return res
})
}, },
showMenuModal: false, selectedRowKeys: [],
tableSelected: {}, selectedRows: [],
editType: '', // modalNow: 1,
expandedRowKeys: [] // ICON:'',
// data: [],
// modalTreeData: [],
// params: {},
// modalParams: {
// type: 'M'
// },
// showMenuModal: false,
// tableSelected: {},
// editType: '',
// expandedRowKeys: []
} }
},
methods: {
// onExpand(expandedKeys) {
// this.expandedKeys = expandedKeys;
// this.autoExpandParent = false;
// },
onChange(e) {
const value = e.target.value;
const expandedKeys = dataList
.map(item => {
if (item.key.indexOf(value) > -1) {
return getParentKey(item.key, gData);
}
return null;
})
.filter((item, i, self) => item && self.indexOf(item) === i);
Object.assign(this, {
expandedKeys,
searchValue: value,
autoExpandParent: true,
});
},
getMenuClick(ID=""){
this.visible=true;
if(ID){
this.addoredit=1;
this.modalTitle='添加节点';
}else{
this.addoredit=0;
this.modalTitle='编辑节点';
this.getMenuDetails(value.ID)
}
},
} }
} }
</script> </script>
<style> <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