<template >
|
<div>
|
<a-collapse accordion>
|
<a-collapse-panel @click.stop v-for="item in menuListData" :key="item.id" :header="item.name" >
|
<span v slot="extra" style="position: absolute;left: 32%; width:10%; text-align: center;" >{{ item.order }}</span>
|
<span v slot="extra" style="position: absolute;left: 58%; width:10%; text-align: center" >{{ item.url }}</span>
|
<span v slot="extra" style="position: absolute;left: 82%; width:15%;text-align: center">
|
<a v slot="extra" @click="edit($event,item)">编辑</a>
|
<a-divider type = 'vertical' />
|
<a v slot="extra" @click="addMenu($event,item.id)">新增</a>
|
<a-divider type = 'vertical' />
|
<a-popconfirm placement="top" title="是否删除" ok-text="是" cancel-text="否" @confirm ="deleteMenu(item.id)" >
|
<a @click="prohibitShow">删除</a>
|
</a-popconfirm>
|
</span>
|
<div v-if="item.children && item.children.length > 0" >
|
<!-- <a-collapse>-->
|
<!-- <a-collapse-panel @click.stop v-for="item1 in item.children" :key="item1.id" :header="item1.name" >-->
|
<!-- <span v slot="extra" style="position: absolute;left: 32%; width:10%; text-align: center;" >{{ item1.order }}</span>-->
|
<!-- <span v slot="extra" style="position: absolute;left: 58%; width:10%; text-align: center" >{{ item1.url }}</span>-->
|
<!-- <span v slot="extra" style="position: absolute;left: 82%; width:15%;text-align: center">-->
|
<!-- <a v slot="extra" @click="edit($event,item1)">编辑</a>-->
|
<!-- <a-divider type = 'vertical' />-->
|
<!-- <a-popconfirm placement="top" title="是否删除" ok-text="是" cancel-text="否" @confirm ="deleteMenu(item1.id)" >-->
|
<!-- <a @click="prohibitShow">删除</a>-->
|
<!-- </a-popconfirm>-->
|
<!-- </span>-->
|
<!-- </a-collapse-panel>-->
|
<!-- </a-collapse>-->
|
<menu-list-item :menuListData="item.children" :key="item.id">
|
</menu-list-item>
|
</div>
|
</a-collapse-panel>
|
</a-collapse>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import { get, post } from "@/util/request";
|
import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
|
import Bus from '@/bus'
|
@Component({
|
components:{
|
}
|
})
|
export default class MenuListItem extends Vue{
|
@Prop({
|
type: Array
|
})
|
private menuListData: any[];
|
|
|
private created(){
|
|
}
|
|
private edit(event: any, item: any[]) {
|
event.stopPropagation()
|
this.$store.state.webMenu.editMenu = item
|
Bus.$emit('edit', item)
|
this.$store.state.webMenu.editModelFlag = true
|
}
|
private addMenu(event: any,id:number) {
|
this.$store.state.webMenu.webMenuParentId = id
|
event.stopPropagation()
|
this.$store.state.webMenu.webMenuAddFlag = true
|
}
|
private deleteMenu(id: number) {
|
post('menu/delete',
|
{
|
id: id
|
}
|
).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success('删除成功')
|
// 用于爷爷孙子组件传值
|
Bus.$emit('delete', true)
|
}else {
|
this.$message.warning(res.data.message)
|
}
|
|
})
|
}
|
private prohibitShow(event: any) {
|
event.stopPropagation()
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
