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) {
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) {
return axios({
......
src/views/authority/menuList.vue
View file @ fb358db8
......@@ -3,7 +3,7 @@
<a-card style="margin-bottom:10px">
<a-form :form="newform" layout="inline">
<a-row :gutter="16" type="flex" justify="start">
<!-- <a-col :span="6">
<a-col :span="6">
<a-form-item label="名称：">
<a-input type="text" v-model="queryParam.TITLE"> </a-input>
</a-form-item>
......@@ -15,7 +15,7 @@
<a-radio-button value="1">禁用</a-radio-button>
</a-radio-group>
</a-form-item>
</a-col> -->
</a-col>
<a-col :span="6">
<a-form-item>
<a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
......@@ -24,7 +24,11 @@
</a-col>
</a-row>
</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
style="margin-top:10px"
ref="table"
......@@ -33,14 +37,13 @@
childrenColumnName ="son"
:columns="columns"
:data="loadData"
:showPagination="pagination"
:rowSelection="rowSelection"
>
<!-- :scroll="{ x: 1200, y: 300 }" -->
<span slot="action" slot-scope="text, record">
<template>
<a @click="handleEdit(record)">编辑</a>
<a @click="getMenuClick(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.ID)">
<a>删除</a>
......@@ -48,9 +51,103 @@
</template>
</span>
</s-table>
<!-- </a-spin> -->
</a-card>
<a-modal :title="modalTitle" v-model="showMenuModal" :maskClosable="false" @ok="editMenu()">
<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-form :form="form">
<a-form-item v-show="false">
......@@ -128,62 +225,7 @@
// , addMenu, updateMenu, deleteMenu
import moment from 'moment'
import { STable } from '@/components'
import { getMenuList } 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;
// };
import { getMenuList, getMenuDetails} from '@/api/authority'
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
......@@ -203,14 +245,6 @@ export default {
data() {
return {
rowSelection,
// expandedKeys: [],
// searchValue: '',
// autoExpandParent: true,
// gData,
// loading: false,
// parentTreeSelected: {},
labelCol: {
xs: { span: 5 }
},
......@@ -218,12 +252,18 @@ export default {
xs: { span: 17 }
},
// 查询参数
queryParam: {},
queryParam: {
LEVEL:'0'
},
form: this.$form.createForm(this),
newform: this.$form.createForm(this),
// rowSelection: {
// type: 'radio',
// selectedRowKeys: []
// },
rowSelection: {
type: 'radio',
selectedRowKeys: []
},
showMenuModal:false,
modalTitle:'添加角色',//modal标题
addoredit:1,//添加1or编辑0
columns: [
{
title: '菜单名称',
......@@ -231,37 +271,28 @@ export default {
// fixed: 'left',
// width: 200,
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',
dataIndex: 'ID',
width: '8%',
// width: 90,
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: '菜单地址',
......@@ -271,26 +302,48 @@ export default {
},
{
title: '菜单状态',
width: '6%',
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: '是否为菜单',
width: '6%',
dataIndex: 'IS_MENU',
// width: 100
customRender: (text) => {
if(Number(text)==0){
return "否"
}else{
return "是"
}
}
},
{
title: '是否顶部菜单',
width: '6%',
dataIndex: 'IS_TOP_MENU',
// width: 100
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
},
{
......@@ -322,14 +375,34 @@ export default {
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: '类型',
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>
// }
customRender: (type, row, index) => {
return (
<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 {
},
selectedRowKeys: [],
selectedRows: [],
modalNow: 1
// modalNow: 1,
// ICON:'',
// data: [],
// modalTreeData: [],
// params: {},
......@@ -366,15 +440,26 @@ export default {
// },
// showMenuModal: false,
// tableSelected: {},
// editType: '',
editType: '',
// expandedRowKeys: []
}
},
methods: {
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys;
this.autoExpandParent = false;
},
// onExpand(expandedKeys) {
// this.expandedKeys = expandedKeys;
// 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) {
const value = e.target.value;
const expandedKeys = dataList
......@@ -391,18 +476,49 @@ export default {
autoExpandParent: true,
});
},
// secondLoad(){
loadData: parameter => {
return getMenuList(Object.assign(parameter, this.queryParam)).then(res => {
// res.pageSize = res._meta.perPage
// res.page = res._meta.currentPage
// res.totalPage = res._meta.pageCount
// res.totalCount = res._meta.totalCount
this.listData = res
res.data = this.listData
return res
// 获取节点详情
getMenuDetails(value){
getMenuDetails(value).then(res => {
// this.$nextTick(() => {
// this.modalForm.setFieldsValue(res)
// })
var formValue = {
'NAME':res.NAME,
'TITLE':res.TITLE,
'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>
<div>
<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-col :span="6">
<!-- <a-col :span="6">
<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-col>
<a-col :span="6">
<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="1">禁用</a-radio-button>
</a-radio-group>
</a-form-item>
</a-col>
</a-col> -->
<a-col :span="6">
<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-col>
</a-row>
</a-form>
</a-card>
<a-card hoverable>
<a-spin tip="加载中，请稍候..." :spinning="loading">
<div class="table-operator">
<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 type='primary' icon='plus' @click="getMenuClick()">添加节点</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>
</div>
<s-table
style="margin-top:10px"
ref="table"
size="default"
rowKey="ID"
childrenColumnName ="son"
:columns="columns"
:data="loadData"
:showPagination="pagination"
:rowSelection="rowSelection"
>
<!-- :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-item v-show="false">
<a-input type="hidden" v-decorator="['id']"></a-input>
......@@ -121,241 +135,62 @@
</a-radio-group>
</a-form-item>
</a-form>
</a-modal>
</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)
})
}
// , addMenu, updateMenu, deleteMenu
import moment from 'moment'
import { STable } from '@/components'
import { getMenuList, getMenuDetails } from '@/api/authority'
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
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: ''
}
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
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
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
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)
})
}
}
};
export default {
name: 'authority',
components: {
STable
},
data () {
data() {
return {
loading: false,
parentTreeSelected: {},
rowSelection,
labelCol: {
xs: { span: 5 }
},
wrapperCol: {
xs: { span: 17 }
},
// 查询参数
queryParam: {},
form: this.$form.createForm(this),
newform: this.$form.createForm(this),
rowSelection: {
type: 'radio',
selectedRowKeys: []
},
header: [
showMenuModal:false,
addoredit:1,//添加1or编辑0
columns: [
{
title: '名称',
title: '菜单名称',
dataIndex: 'TITLE',
// fixed: 'left',
// width: 200,
width: '20%',
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" />)
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" />)
}
......@@ -368,115 +203,195 @@ export default {
}
},
{
title: '路径',
dataIndex: 'path'
title: '节点id',
dataIndex: 'ID',
width: '8%',
key: 'ID',
},
{
title: '菜单地址',
dataIndex: 'NAME',
width: '15%',
// width: 200
},
{
title: '组件',
dataIndex: 'component'
title: '菜单状态',
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: '权限标识',
dataIndex: 'permName'
title: '是否为菜单',
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: '类型',
dataIndex: 'type',
dataIndex: 'LEVEL',
customRender: (type, row, index) => {
return (
<div>
{type === 'D' ? (
<a-tag color="blue">目录</a-tag>
) : type === 'M' ? (
<a-tag color="green">菜单</a-tag>
{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>
<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>
// )
}
dataIndex: 'action',
// fixed: 'right',
width:'15%',
scopedSlots: { customRender: 'action' }
}
],
data: [],
modalTreeData: [],
params: {},
modalParams: {
type: 'M'
listData: [],
pagination: false,
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
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,
tableSelected: {},
editType: '',
expandedRowKeys: []
selectedRowKeys: [],
selectedRows: [],
// modalNow: 1,
// 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>
<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