136 lines
3.5 KiB
Vue
136 lines
3.5 KiB
Vue
<template>
|
|
<div class="app-container menu">
|
|
<el-tree
|
|
:props="defaultProps"
|
|
:data="treeData"
|
|
node-key="Id"
|
|
:default-expand-all="true"
|
|
:expand-on-click-node="false"
|
|
style="width:80%;"
|
|
>
|
|
<span slot-scope="{ node, data }" class="custom-tree-node">
|
|
<span v-if="data.FunctionName">{{ node.label }} --------------------(Function)</span>
|
|
<span v-else>{{ node.label }}</span>
|
|
<span>
|
|
<el-button type="text" icon="el-icon-plus" size="small" @click="() => append(data)">Append</el-button>
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
size="small"
|
|
@click="() => edit(data)"
|
|
>Edit</el-button>
|
|
<el-button type="text" icon="el-icon-delete" size="small" @click="() => remove(data)">Delete</el-button>
|
|
</span>
|
|
</span>
|
|
</el-tree>
|
|
<menu-form v-if="model_cfg.visible" :form="currenNode" width="500px" @close="closeModel" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getMenuFunction, deleteMenuFunction } from '@/api/admin'
|
|
import MenuForm from './components/MenuForm'
|
|
import { model_cfg } from './menu'
|
|
export default {
|
|
name: 'Menu',
|
|
components: { MenuForm },
|
|
data() {
|
|
return {
|
|
model_cfg,
|
|
treeData: [],
|
|
defaultProps: {
|
|
label: 'MenuName',
|
|
children: 'Children'
|
|
},
|
|
dialogVisible: false,
|
|
title: '',
|
|
currenNode: {},
|
|
nodeId: '',
|
|
parentId: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getlist()
|
|
},
|
|
methods: {
|
|
// 获取菜单数据
|
|
getlist() {
|
|
const loading = this.$loading({
|
|
target: document.querySelector('.menu'),
|
|
fullscreen: false,
|
|
lock: true,
|
|
text: 'Loading',
|
|
spinner: 'el-icon-loading'
|
|
})
|
|
getMenuFunction().then(res => {
|
|
loading.close()
|
|
this.treeData = res.Result
|
|
}).catch(() => { loading.close() })
|
|
},
|
|
// 添加菜单
|
|
append(node) {
|
|
this.currenNode = {}
|
|
this.currenNode.ParentId = node.Id
|
|
this.currenNode.Status = 1
|
|
// this.currenNode.ShowOrder = 0
|
|
this.nodeId = node.Id
|
|
this.model_cfg.title = 'Append'
|
|
this.model_cfg.visible = true
|
|
},
|
|
// 编辑菜单
|
|
edit(node) {
|
|
// eslint-disable-next-line no-unused-vars
|
|
const { Children, CreateTime, CreateUserId, UpdateTime, UpdateUserId, ...obj } = JSON.parse(JSON.stringify(node))
|
|
obj.MetaBreadcrumb = obj.MetaBreadcrumb ? 1 : 0
|
|
obj.Hidden = obj.Hidden ? 1 : 0
|
|
this.currenNode = obj
|
|
this.nodeId = node.Id
|
|
this.model_cfg.title = 'Edit'
|
|
this.model_cfg.visible = true
|
|
},
|
|
// 移除菜单
|
|
remove(node) {
|
|
this.$confirm(this.$t('trials:uploadedDicoms:message:deleteMes'), {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true
|
|
})
|
|
.then(() => {
|
|
deleteMenuFunction(node.Id)
|
|
.then(res => {
|
|
if (res.IsSuccess) {
|
|
this.getlist()
|
|
this.$message.success(this.$t('common:message:deletedSuccessfully'))
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 关闭弹窗
|
|
closeModel() {
|
|
this.model_cfg.visible = false
|
|
this.getlist()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.menu{
|
|
.el-tree {
|
|
margin-top: 20px;
|
|
}
|
|
.el-tree-node{
|
|
margin-top: 5px;
|
|
}
|
|
.custom-tree-node {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
padding-right: 8px;
|
|
}
|
|
.el-dialog__body{
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
</style>
|