|
@@ -77,7 +77,8 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item
|
|
|
label="节点ID"
|
|
|
- prop="menuId">
|
|
|
+ prop="menuId"
|
|
|
+ v-if="form.menuId">
|
|
|
<el-input
|
|
|
v-model="form.menuId"
|
|
|
:disabled="formEdit || formStatus === 'update'"
|
|
@@ -95,17 +96,8 @@
|
|
|
<el-form-item
|
|
|
label="类型"
|
|
|
prop="type">
|
|
|
- <el-select
|
|
|
- v-model="form.type"
|
|
|
- :disabled="formEdit"
|
|
|
- class="filter-item"
|
|
|
- placeholder="请输入资源请求类型">
|
|
|
- <el-option
|
|
|
- v-for="item in typeOptions"
|
|
|
- :key="item"
|
|
|
- :label="item | typeFilter"
|
|
|
- :value="item"/>
|
|
|
- </el-select>
|
|
|
+ <el-radio v-model="form.type" label="0" :disabled="formEdit">菜单</el-radio>
|
|
|
+ <el-radio v-model="form.type" label="1" :disabled="formEdit">按钮</el-radio>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item
|
|
@@ -117,6 +109,15 @@
|
|
|
:disabled="formEdit"
|
|
|
placeholder="请输入权限标识"/>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="form.type === '0'"
|
|
|
+ label="前端组件"
|
|
|
+ prop="component">
|
|
|
+ <el-input
|
|
|
+ v-model="form.component"
|
|
|
+ :disabled="formEdit"
|
|
|
+ placeholder="http://xx | views/xx/xx"/>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item
|
|
|
v-if="form.type === '0'"
|
|
|
label="图标"
|
|
@@ -129,7 +130,7 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item
|
|
|
v-if="form.type === '0'"
|
|
|
- label="排序"
|
|
|
+ label="菜单排序"
|
|
|
prop="sort">
|
|
|
<el-input
|
|
|
v-model="form.sort"
|
|
@@ -137,28 +138,10 @@
|
|
|
type="number"
|
|
|
placeholder="请输入排序"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- v-if="form.type === '0'"
|
|
|
- label="前端组件"
|
|
|
- prop="component">
|
|
|
- <el-input
|
|
|
- v-model="form.component"
|
|
|
- :disabled="formEdit"
|
|
|
- placeholder="请输入描述"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- v-if="form.type === '0'"
|
|
|
- label="前端地址"
|
|
|
- prop="component">
|
|
|
- <el-input
|
|
|
- v-model="form.path"
|
|
|
- :disabled="formEdit"
|
|
|
- placeholder="iframe嵌套地址"/>
|
|
|
- </el-form-item>
|
|
|
<el-form-item
|
|
|
v-if="form.type === '0'"
|
|
|
label="路由缓冲"
|
|
|
- prop="component">
|
|
|
+ prop="keepAlive">
|
|
|
<el-switch
|
|
|
v-model="form.keepAlive"
|
|
|
:disabled="formEdit"
|
|
@@ -190,215 +173,225 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { addObj, delObj, fetchMenuTree, getObj, putObj } from '@/api/admin/menu'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import iconList from '@/const/iconList'
|
|
|
+ import {addObj, delObj, fetchMenuTree, getObj, putObj} from '@/api/admin/menu'
|
|
|
+ import {mapGetters} from 'vuex'
|
|
|
+ import {validatenull} from '@/util/validate'
|
|
|
+ import iconList from '@/const/iconList'
|
|
|
|
|
|
-export default {
|
|
|
- name: 'Menu',
|
|
|
- filters: {
|
|
|
- typeFilter(type) {
|
|
|
- const typeMap = {
|
|
|
- 0: '菜单',
|
|
|
- 1: '按钮'
|
|
|
+ export default {
|
|
|
+ name: 'Menu',
|
|
|
+ filters: {
|
|
|
+ typeFilter(type) {
|
|
|
+ const typeMap = {
|
|
|
+ 0: '菜单',
|
|
|
+ 1: '按钮'
|
|
|
+ }
|
|
|
+ return typeMap[type]
|
|
|
}
|
|
|
- return typeMap[type]
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- iconList: iconList,
|
|
|
- list: null,
|
|
|
- total: null,
|
|
|
- formEdit: true,
|
|
|
- formAdd: true,
|
|
|
- formStatus: '',
|
|
|
- showElement: false,
|
|
|
- typeOptions: ['0', '1'],
|
|
|
- listQuery: {
|
|
|
- name: undefined
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ iconList: iconList,
|
|
|
+ list: null,
|
|
|
+ total: null,
|
|
|
+ formEdit: true,
|
|
|
+ formAdd: true,
|
|
|
+ formStatus: '',
|
|
|
+ showElement: false,
|
|
|
+ typeOptions: ['0', '1'],
|
|
|
+ listQuery: {
|
|
|
+ name: undefined
|
|
|
+ },
|
|
|
+ treeData: [],
|
|
|
+ oExpandedKey: {
|
|
|
+ // key (from tree id) : expandedOrNot boolean
|
|
|
+ },
|
|
|
+ oTreeNodeChildren: {
|
|
|
+ // id1 : [children] (from tree node id1)
|
|
|
+ // id2 : [children] (from tree node id2)
|
|
|
+ },
|
|
|
+ aExpandedKeys: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ labelPosition: 'right',
|
|
|
+ form: {
|
|
|
+ permission: undefined,
|
|
|
+ name: undefined,
|
|
|
+ menuId: undefined,
|
|
|
+ parentId: undefined,
|
|
|
+ icon: undefined,
|
|
|
+ sort: 0,
|
|
|
+ component: undefined,
|
|
|
+ type: undefined,
|
|
|
+ path: undefined,
|
|
|
+ },
|
|
|
+ currentId: -1,
|
|
|
+ menuManager_btn_add: false,
|
|
|
+ menuManager_btn_edit: false,
|
|
|
+ menuManager_btn_del: false,
|
|
|
+ rules: {
|
|
|
+ name: [{required: true, message: '请输入标题', trigger: 'blur'}],
|
|
|
+ type: [{required: true, message: '请输入类型', trigger: 'blur'}],
|
|
|
+ component: [{validator: this.checkComponent, trigger: 'blur'}]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ this.menuManager_btn_add = this.permissions['sys_menu_add']
|
|
|
+ this.menuManager_btn_edit = this.permissions['sys_menu_edit']
|
|
|
+ this.menuManager_btn_del = this.permissions['sys_menu_del']
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['elements', 'permissions'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ fetchMenuTree(this.listQuery).then(response => {
|
|
|
+ this.treeData = response.data.data
|
|
|
+ })
|
|
|
},
|
|
|
- treeData: [],
|
|
|
- oExpandedKey: {
|
|
|
- // key (from tree id) : expandedOrNot boolean
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true
|
|
|
+ return data.label.indexOf(value) !== -1
|
|
|
},
|
|
|
- oTreeNodeChildren: {
|
|
|
- // id1 : [children] (from tree node id1)
|
|
|
- // id2 : [children] (from tree node id2)
|
|
|
+
|
|
|
+ nodeExpand(data) {
|
|
|
+ const aChildren = data.children
|
|
|
+ if (aChildren.length > 0) {
|
|
|
+ this.oExpandedKey[data.id] = true
|
|
|
+ this.oTreeNodeChildren[data.id] = aChildren
|
|
|
+ }
|
|
|
+ this.setExpandedKeys()
|
|
|
},
|
|
|
- aExpandedKeys: [],
|
|
|
- defaultProps: {
|
|
|
- children: 'children',
|
|
|
- label: 'name'
|
|
|
+ nodeCollapse(data) {
|
|
|
+ this.oExpandedKey[data.id] = false
|
|
|
+ // 如果有子节点
|
|
|
+ this.treeRecursion(this.oTreeNodeChildren[data.id], oNode => {
|
|
|
+ this.oExpandedKey[oNode.id] = false
|
|
|
+ })
|
|
|
+ this.setExpandedKeys()
|
|
|
},
|
|
|
- labelPosition: 'right',
|
|
|
- form: {
|
|
|
- permission: undefined,
|
|
|
- name: undefined,
|
|
|
- menuId: undefined,
|
|
|
- parentId: undefined,
|
|
|
- icon: undefined,
|
|
|
- sort: undefined,
|
|
|
- component: undefined,
|
|
|
- type: undefined,
|
|
|
- path: undefined
|
|
|
+ setExpandedKeys() {
|
|
|
+ const oTemp = this.oExpandedKey
|
|
|
+ this.aExpandedKeys = []
|
|
|
+ for (const sKey in oTemp) {
|
|
|
+ if (oTemp[sKey]) {
|
|
|
+ this.aExpandedKeys.push(parseInt(sKey))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ treeRecursion(aChildren, fnCallback) {
|
|
|
+ if (aChildren) {
|
|
|
+ for (let i = 0; i < aChildren.length; ++i) {
|
|
|
+ const oNode = aChildren[i]
|
|
|
+ fnCallback && fnCallback(oNode)
|
|
|
+ this.treeRecursion(oNode.children, fnCallback)
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- currentId: -1,
|
|
|
- menuManager_btn_add: false,
|
|
|
- menuManager_btn_edit: false,
|
|
|
- menuManager_btn_del: false,
|
|
|
- rules: {
|
|
|
- menuId: [{ required: true, message: '节点ID不合法', trigger: 'blur' }],
|
|
|
- name: [{ required: true, message: '标题不合法', trigger: 'blur' }],
|
|
|
- type: [{ required: true, message: '标题不合法', trigger: 'blur' }]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getList()
|
|
|
- this.menuManager_btn_add = this.permissions['sys_menu_add']
|
|
|
- this.menuManager_btn_edit = this.permissions['sys_menu_edit']
|
|
|
- this.menuManager_btn_del = this.permissions['sys_menu_del']
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['elements', 'permissions'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getList() {
|
|
|
- fetchMenuTree(this.listQuery).then(response => {
|
|
|
- this.treeData = response.data.data
|
|
|
- })
|
|
|
- },
|
|
|
- filterNode(value, data) {
|
|
|
- if (!value) return true
|
|
|
- return data.label.indexOf(value) !== -1
|
|
|
- },
|
|
|
|
|
|
- nodeExpand(data) {
|
|
|
- const aChildren = data.children
|
|
|
- if (aChildren.length > 0) {
|
|
|
- this.oExpandedKey[data.id] = true
|
|
|
- this.oTreeNodeChildren[data.id] = aChildren
|
|
|
- }
|
|
|
- this.setExpandedKeys()
|
|
|
- },
|
|
|
- nodeCollapse(data) {
|
|
|
- this.oExpandedKey[data.id] = false
|
|
|
- // 如果有子节点
|
|
|
- this.treeRecursion(this.oTreeNodeChildren[data.id], oNode => {
|
|
|
- this.oExpandedKey[oNode.id] = false
|
|
|
- })
|
|
|
- this.setExpandedKeys()
|
|
|
- },
|
|
|
- setExpandedKeys() {
|
|
|
- const oTemp = this.oExpandedKey
|
|
|
- this.aExpandedKeys = []
|
|
|
- for (const sKey in oTemp) {
|
|
|
- if (oTemp[sKey]) {
|
|
|
- this.aExpandedKeys.push(parseInt(sKey))
|
|
|
+ getNodeData(data) {
|
|
|
+ if (!this.formEdit) {
|
|
|
+ this.formStatus = 'update'
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- treeRecursion(aChildren, fnCallback) {
|
|
|
- if (aChildren) {
|
|
|
- for (let i = 0; i < aChildren.length; ++i) {
|
|
|
- const oNode = aChildren[i]
|
|
|
- fnCallback && fnCallback(oNode)
|
|
|
- this.treeRecursion(oNode.children, fnCallback)
|
|
|
+ getObj(data.id).then(response => {
|
|
|
+ this.form = response.data.data
|
|
|
+ })
|
|
|
+ this.currentId = data.id
|
|
|
+ this.showElement = true
|
|
|
+ },
|
|
|
+ handlerEdit() {
|
|
|
+ if (this.form.menuId) {
|
|
|
+ this.formEdit = false
|
|
|
+ this.formStatus = 'update'
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- getNodeData(data) {
|
|
|
- if (!this.formEdit) {
|
|
|
- this.formStatus = 'update'
|
|
|
- }
|
|
|
- getObj(data.id).then(response => {
|
|
|
- this.form = response.data.data
|
|
|
- })
|
|
|
- this.currentId = data.id
|
|
|
- this.showElement = true
|
|
|
- },
|
|
|
- handlerEdit() {
|
|
|
- if (this.form.menuId) {
|
|
|
+ },
|
|
|
+ handlerAdd() {
|
|
|
+ this.resetForm()
|
|
|
this.formEdit = false
|
|
|
- this.formStatus = 'update'
|
|
|
- }
|
|
|
- },
|
|
|
- handlerAdd() {
|
|
|
- this.resetForm()
|
|
|
- this.formEdit = false
|
|
|
- this.formStatus = 'create'
|
|
|
- },
|
|
|
- handleDelete() {
|
|
|
- this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- delObj(this.currentId).then(() => {
|
|
|
- this.getList()
|
|
|
- this.resetForm()
|
|
|
- this.onCancel()
|
|
|
- this.$notify({
|
|
|
- title: '成功',
|
|
|
- message: '删除成功',
|
|
|
- type: 'success',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- update() {
|
|
|
- this.$refs.form.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- putObj(this.form).then(() => {
|
|
|
- this.getList()
|
|
|
- this.formEdit = false
|
|
|
- this.$notify({
|
|
|
- title: '成功',
|
|
|
- message: '更新成功',
|
|
|
- type: 'success',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
- })
|
|
|
+ this.formStatus = 'create'
|
|
|
+ },
|
|
|
+ checkComponent(rule, value, callback) {
|
|
|
+ if (this.form.type === '1') {
|
|
|
+ callback()
|
|
|
+ } else if (validatenull(value)) {
|
|
|
+ callback(new Error('请输入前端组件'))
|
|
|
+ } else if (value.startsWith('/') || value.endsWith("/")) {
|
|
|
+ callback(new Error('组件不能以/开头或结尾'))
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- create() {
|
|
|
- this.$refs.form.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- addObj(this.form).then(() => {
|
|
|
+ },
|
|
|
+ handleDelete() {
|
|
|
+ this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ delObj(this.currentId).then(() => {
|
|
|
this.getList()
|
|
|
- this.formEdit = false
|
|
|
+ this.resetForm()
|
|
|
+ this.onCancel()
|
|
|
this.$notify({
|
|
|
title: '成功',
|
|
|
- message: '创建成功',
|
|
|
+ message: '删除成功',
|
|
|
type: 'success',
|
|
|
duration: 2000
|
|
|
})
|
|
|
})
|
|
|
+ })
|
|
|
+ },
|
|
|
+ update() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ putObj(this.form).then(() => {
|
|
|
+ this.getList()
|
|
|
+ this.formEdit = false
|
|
|
+ this.$notify({
|
|
|
+ title: '成功',
|
|
|
+ message: '更新成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ create() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ addObj(this.form).then(() => {
|
|
|
+ this.getList()
|
|
|
+ this.formEdit = false
|
|
|
+ this.$notify({
|
|
|
+ title: '成功',
|
|
|
+ message: '创建成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ this.formEdit = true
|
|
|
+ this.formStatus = ''
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.form = {
|
|
|
+ permission: undefined,
|
|
|
+ name: undefined,
|
|
|
+ menuId: undefined,
|
|
|
+ parentId: this.currentId,
|
|
|
+ icon: undefined,
|
|
|
+ sort: 0,
|
|
|
+ component: undefined,
|
|
|
+ type: undefined,
|
|
|
+ path: undefined
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- onCancel() {
|
|
|
- this.formEdit = true
|
|
|
- this.formStatus = ''
|
|
|
- },
|
|
|
- resetForm() {
|
|
|
- this.form = {
|
|
|
- permission: undefined,
|
|
|
- name: undefined,
|
|
|
- menuId: undefined,
|
|
|
- parentId: this.currentId,
|
|
|
- icon: undefined,
|
|
|
- sort: undefined,
|
|
|
- component: undefined,
|
|
|
- type: undefined,
|
|
|
- path: undefined
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|