<template>
|
<div class="app-container">
|
<div class="filter-container">
|
<el-button
|
class="filter-item"
|
type="primary"
|
style="margin-left: 10px;"
|
@click="newAdd"
|
>新增</el-button>
|
</div>
|
<el-row
|
:gutter="24"
|
style="margin-bottom: 20px;"
|
>
|
<el-col
|
:span="6"
|
style="margin-bottom: 20px;"
|
>
|
<div>
|
<el-tree
|
v-if="menuTree"
|
ref="menuTree"
|
:data="menuTree"
|
:render-content="renderContent"
|
:props="defaultProps"
|
style="height:560px;overflow-y:auto;"
|
show-checkbox
|
highlight-current
|
clearable
|
node-key="id"
|
@node-click="handleNodeClick"
|
/>
|
</div>
|
</el-col>
|
<el-col :span="18">
|
<el-card class="box-card">
|
<div class="text item">
|
<!-- {{cascaderValue}} -->
|
<el-form
|
ref="form"
|
:model="form"
|
:label-width="formLabelWidth"
|
:rules="formRules"
|
>
|
<el-form-item label="父级">
|
<!-- <el-select v-model.trim="form.parentid" placeholder="选择父节点" style="width:100%;">
|
<el-option v-for="(item,index) in menuTree" :key="index" :label="item.title" :value="item.id"/>
|
</el-select> -->
|
<el-cascader
|
v-model="cascaderValue"
|
:options="cascaderTree"
|
:props="cascaderProps"
|
clearable
|
show-all-levels
|
change-on-select
|
@change="cascaderChangeEvent"
|
/>
|
</el-form-item>
|
<el-form-item
|
label="类别"
|
prop="type"
|
>
|
<el-radio
|
v-model="form.type"
|
:label="1"
|
border
|
>菜单</el-radio>
|
<el-radio
|
v-model="form.type"
|
:label="4"
|
border
|
>数据查看权限</el-radio>
|
<!-- <el-radio-group v-model.number="form.type">
|
<el-radio-button label="菜单" :value='1'></el-radio-button>
|
<el-radio-button label="数据访问" :value='4'></el-radio-button>
|
</el-radio-group> -->
|
</el-form-item>
|
<el-form-item
|
label="名称"
|
prop="title"
|
>
|
<el-input
|
v-model="form.title"
|
auto-complete="off"
|
/>
|
</el-form-item>
|
<div v-if="form.type===4">
|
<el-form-item
|
label="英文名"
|
prop="name"
|
>
|
<el-tooltip
|
content="需唯一"
|
placement="right"
|
>
|
<el-input v-model="form.name" />
|
</el-tooltip>
|
</el-form-item>
|
</div>
|
<div v-if="form.type===1">
|
<el-form-item
|
label="路径"
|
prop="path"
|
>
|
<el-input
|
v-model="form.path"
|
auto-complete="off"
|
/>
|
</el-form-item>
|
<el-form-item
|
label="路由英文名"
|
prop="name"
|
>
|
<el-tooltip
|
content="需唯一"
|
placement="right"
|
>
|
<el-input v-model="form.name" />
|
</el-tooltip>
|
</el-form-item>
|
<el-form-item
|
label="图标"
|
prop="icon"
|
>
|
<el-input v-model="form.icon" />
|
<!-- <i :class="form.icon" v-model="form.icon" style="width:20px;height:20px;"></i>
|
<el-button @click="selectIconDialog=true">选择</el-button> -->
|
</el-form-item>
|
<el-form-item
|
label="前端组件"
|
prop="component"
|
>
|
<el-input v-model="form.component" />
|
</el-form-item>
|
</div>
|
<el-form-item
|
label="排序值"
|
prop="sortorder"
|
>
|
<el-input-number
|
v-model="form.sortorder"
|
:min="0"
|
:max="100"
|
/>
|
<span style="margin-left:5px">值越小越靠前，支持小数</span>
|
</el-form-item>
|
<el-form-item label="是否启用">
|
<el-switch
|
v-model="form.status"
|
:active-value="1"
|
:inactive-value="-1"
|
active-text="启用"
|
inactive-text="禁用"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
:disabled="saveDisabled"
|
type="primary"
|
@click="form.id?updateData():createData()"
|
v-text="form.id?'修改':'新增'"
|
/>
|
<el-button
|
v-show="form.id && form.id!=null"
|
type="danger"
|
icon="delete"
|
@click="deleteSelected"
|
>删除
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<el-dialog
|
:visible.sync="selectIconDialog"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
title="选择图标"
|
>
|
<div class="select-tree">
|
<el-scrollbar
|
tag="div"
|
class="is-empty"
|
wrap-class="el-select-dropdown__wrap"
|
view-class="el-select-dropdown__list"
|
>
|
<div style="text-align:center;">
|
<i
|
class="el-icon-home"
|
@click="selectIcon($event)"
|
/>
|
<i
|
class="el-icon-storage"
|
@click="selectIcon($event)"
|
/>
|
<i
|
class="el-icon-system"
|
@click="selectIcon($event)"
|
/>
|
<i
|
class="el-icon-ownspace"
|
@click="selectIcon($event)"
|
/>
|
</div>
|
</el-scrollbar>
|
</div>
|
<span
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button @click="selectIconDialog = false">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="selectIconDialog = false"
|
>确 定</el-button>
|
</span>
|
</el-dialog>
|
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
|
</template>
|
<script>
|
|
import {
|
permissionList, createPermission, deletePermission, updatePermission
|
} from '@/api/permission'
|
import merge from 'element-ui/src/utils/merge'
|
import { initRouter } from '@/utils/router'
|
import { parseError } from '@/utils/messageDialog'
|
import Cookies from 'js-cookie'
|
export default {
|
components: {
|
|
},
|
data() {
|
return {
|
selectIconDialog: false,
|
formLabelWidth: '100px',
|
defaultProps: {
|
children: 'children',
|
label: 'title',
|
id: 'id'
|
},
|
maxId: 7000000,
|
menuTree: [],
|
cascaderTree: [],
|
cascaderValue: [],
|
cascaderProps: {
|
children: 'children',
|
label: 'title',
|
value: 'id'
|
},
|
form: {
|
id: '',
|
title: '',
|
name: '',
|
path: '',
|
icon: '',
|
status: 1,
|
component: '',
|
sortorder: 0,
|
parentid: '',
|
type: 1,
|
isSafe: ''
|
},
|
formRules: {
|
name: [{ required: true, message: '路由英文名称不能为空', trigger: 'blur' }],
|
title: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
path: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
|
component: [
|
{ required: true, message: '前端组件不能为空', trigger: 'blur' }
|
]
|
},
|
saveDisabled: false,
|
operatorStatus: 'create',
|
treeLoading: false
|
}
|
},
|
created() {
|
this.getPermissionList()
|
},
|
methods: {
|
init() {
|
this.getPermissionList()
|
},
|
getPermissionList() {
|
const _this = this
|
const params = {}
|
params['userId'] = Cookies.get('userId')
|
permissionList(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.menuTree = res.result
|
const cascaderTree = []
|
const tmpList = JSON.parse(JSON.stringify(res.result))
|
// console.log(tmpList);
|
for (const item of tmpList) {
|
if (item.children.length == 0) {
|
item.child = null
|
} else {
|
for (const child of item.children) {
|
if (child.children.length == 0) {
|
child.children = null
|
}
|
}
|
}
|
cascaderTree.push(item)
|
// item.children = null
|
// cascaderTree.push(item)
|
}
|
this.cascaderTree = cascaderTree
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
})
|
},
|
|
selectIcon(event) {
|
this.form.icon = event.target.className
|
this.selectIconDialog = false
|
},
|
renderContent(h, { node, data, store }) {
|
return (
|
<span>
|
<span>
|
<span><i class={data.icon} style='width:20px;height:20px;'></i> {data.title}</span>
|
</span>
|
</span>)
|
},
|
newAdd() {
|
this.initData()
|
},
|
initData() {
|
this.form = {
|
id: '',
|
title: '',
|
name: '',
|
path: '',
|
icon: '',
|
status: 1,
|
component: '',
|
sortorder: 0,
|
parentid: '',
|
type: 1
|
}
|
this.operatorStatus = 'create'
|
this.cascaderValue = []
|
},
|
deleteSelected() {
|
const _this = this
|
const params = {}
|
if (!_this.form.id) {
|
parseError({ error: '请选择要删除的菜单', vm: _this })
|
return
|
}
|
params['id'] = this.form.id
|
const userName = Cookies.get('userName')
|
const name = Cookies.get('name')
|
params['createBy'] = userName
|
params['createName'] = name
|
params['operator'] = name + '(' + userName + ')'
|
deletePermission(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
initRouter(_this)
|
_this.init()
|
_this.initData()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
})
|
},
|
handleNodeClick(data) {
|
console.log('12313')
|
// console.log(this.$route.meta, 'this.$router.meta')
|
this.form = data
|
const cascaderValue = []
|
let exitFlag = false
|
for (const node of this.cascaderTree) {
|
if (node.id == data.parentid) {
|
cascaderValue.push(node.id)
|
exitFlag = true
|
break
|
}
|
}
|
if (!exitFlag) {
|
for (const node of this.cascaderTree) {
|
for (const child of node.children) {
|
if (child.id == data.parentid) {
|
cascaderValue.push(node.id)
|
cascaderValue.push(child.id)
|
exitFlag = true
|
break
|
}
|
}
|
if (exitFlag) {
|
break
|
}
|
}
|
}
|
// if(!exitFlag){
|
// parseError({error:'未找到匹配的父节点',vm:_this})
|
// return
|
// }
|
|
this.cascaderValue = cascaderValue
|
},
|
createData() {
|
const _this = this
|
_this.$refs.form.validate(valid => {
|
if (valid) {
|
if (this.form.type == 1) {
|
if (this.form.parentid) {
|
_this.form.level = 2
|
} else {
|
_this.form.level = 1
|
}
|
} else {
|
if (!this.form.parentid) {
|
parseError({ error: '数据访问权限必须选择父级菜单', vm: _this })
|
return
|
}
|
if (this.form.parentid && this.cascaderValue.length != 2) {
|
parseError({ error: '数据访问权限只能挂载在二级菜单下面', vm: _this })
|
return
|
}
|
_this.form.level = 3
|
}
|
|
createPermission(_this.form).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.$message({
|
message: '添加成功',
|
type: 'success'
|
})
|
initRouter(_this)
|
_this.init()
|
_this.initData()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
_this.saveDisabled = false
|
})
|
}
|
})
|
},
|
updateData() {
|
this.$refs.form.validate((valid) => {
|
const _this = this
|
if (valid) {
|
if (!this.form.id) {
|
parseError({ error: '请先点击选择要修改的菜单节点', vm: _this })
|
return
|
}
|
if (this.form.type == 4) {
|
if (!this.form.parentid) {
|
parseError({ error: '数据访问权限必须选择父级菜单', vm: _this })
|
return
|
}
|
if (this.cascaderValue.length != 2) {
|
parseError({ error: '数据访问权限只能挂载在二级菜单下面', vm: _this })
|
return
|
}
|
}
|
|
_this.saveDisabled = true
|
|
updatePermission(_this.form).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.$message({
|
message: '编辑成功',
|
type: 'success'
|
})
|
initRouter(_this)
|
_this.init()
|
_this.initData()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
_this.saveDisabled = false
|
})
|
}
|
})
|
},
|
cascaderChangeEvent(value) {
|
if (value && value.length > 0) {
|
this.form.parentid = value[value.length - 1]
|
}
|
// console.log('cascaderChangeEvent')
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.select-tree .is-empty i {
|
width: 30px;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
display: inline-block;
|
cursor: pointer;
|
}
|
|
.select-tree .is-empty i:hover {
|
background-color: #0d6aad;
|
color: #ffffff;
|
}
|
</style>
|
