<template>
|
<div>
|
<a-card :bordered="false" style="margin-top: 24px">
|
<table style="background-color: #FAFAFA;width: 100%;position: absolute;right: 50px">
|
<tr style="background-color: #FAFAFA;height: 50px;width: 100%;height: 24px;margin-top: -25px;margin-left: 50px; left: 0;right: 0;;position: absolute;display: flex">
|
<th style="position: relative;flex: 1;text-align: center">名称</th>
|
<th style="position: relative;flex: 1;text-align: center">顺序</th>
|
<th style="position: relative;flex: 1;text-align: center">路径</th>
|
<th style="position: relative;flex: 1;text-align: center">操作</th>
|
</tr>
|
</table>
|
<menu-list
|
:menuListData="JSON.parse(JSON.stringify(webMenusData))"
|
></menu-list>
|
<a-modal width="45%" title="新增-菜单" destroyOnClose :visible="addModelFlag" @ok="saveMenuData" @cancel="addModalCancel">
|
|
<!---->
|
<a-form-model style="margin-top: 8px" ref="addMenuForm"
|
:label-col="{span: 4}"
|
:rules="rules"
|
:wrapper-col="{span: 14}"
|
:model="addForm">
|
<a-row>
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" prop="name">
|
<a-input placeholder="名称" v-model="addForm.name" />
|
</a-form-model-item>
|
</a-col>
|
<!-- <a-col v-if="addForm.parentId === -1" :md="12" :sm="24">-->
|
<!-- <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="父菜单" prop="name">-->
|
<!-- <a-input placeholder="父菜单" v-model="addForm.name" />-->
|
<!-- </a-form-model-item>-->
|
<!-- </a-col>-->
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="排序" prop="order">
|
<a-input placeholder="排序" v-model="addForm.order" />
|
</a-form-model-item>
|
</a-col>
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="路径" prop="url">
|
<a-input placeholder="路径" v-model="addForm.url" />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</a-modal>
|
<a-modal width="45%" title="新增-根菜单" destroyOnClose :visible="addRootMenuModel" @ok="saveMenuData" @cancel="addModalCancel">
|
|
<!---->
|
<a-form-model style="margin-top: 8px" ref="addMenuForm"
|
:label-col="{span: 4}"
|
:wrapper-col="{span: 14}"
|
:rules="rules"
|
:model="addForm">
|
<a-row>
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" prop="name">
|
<a-input placeholder="名称" v-model="addForm.name" />
|
</a-form-model-item>
|
</a-col>
|
<!-- <a-col v-if="addForm.parentId === -1" :md="12" :sm="24">-->
|
<!-- <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="父菜单" prop="name">-->
|
<!-- <a-input placeholder="父菜单" v-model="addForm.name" />-->
|
<!-- </a-form-model-item>-->
|
<!-- </a-col>-->
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="排序" prop="order">
|
<a-input placeholder="排序" v-model="addForm.order" />
|
</a-form-model-item>
|
</a-col>
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="路径" prop="url">
|
<a-input placeholder="路径" v-model="addForm.url" />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</a-modal>
|
<a-modal width="45%" title="编辑-菜单" destroyOnClose :visible="editModelFlag" @ok="editMenuData" @cancel="editModalCancel">
|
|
<!---->
|
<a-form-model style="margin-top: 8px" ref="editMenuForm"
|
:label-col="{span: 4}"
|
:wrapper-col="{span: 14}"
|
:rules="editRules"
|
:model="editForm">
|
<a-row>
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" prop="name">
|
<a-input placeholder="名称" v-model="editForm.name" />
|
</a-form-model-item>
|
</a-col>
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="父菜单" v-if="rootFlag">
|
<a-select
|
show-search
|
v-model="editForm.selectData.value"
|
option-filter-prop="children"
|
:filter-option="filterOption"
|
@change="handleChange">
|
<!-- @blur="handleBlur"-->
|
<a-select-option v-for="(item,index) of editForm.selectData.pMenuList" :key="item.id" > {{item.name}}</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="排序" prop="order">
|
<a-input placeholder="排序" v-model="editForm.order" />
|
</a-form-model-item>
|
</a-col>
|
<a-col :md="12" :sm="24">
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="路径">
|
<a-input placeholder="路径" v-model="editForm.url" />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</a-modal>
|
<div class="tableListOperator2">
|
<a-button icon="plus" type="primary" @click="() => this.addRootMenu()">
|
新建根菜单
|
</a-button>
|
</div>
|
</a-card>
|
</div>
|
|
|
</template>
|
|
<script lang="tsx">
|
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
|
import { get, post } from "@/util/request";
|
import menuList from '@/components/webMenu/menuList.vue'
|
import Bus from '@/bus'
|
import logger from "vuex/types/logger";
|
@Component({
|
components:{
|
menuList
|
}
|
})
|
export default class WebMenu extends Vue{
|
private text: any = 'alalallalaa'
|
private webMenusData:any[] = []
|
private addModel: boolean = false
|
private rootMenuFlag: boolean = false
|
// 添加双向绑定数据
|
private addForm: any = {
|
name: '',
|
order: '',
|
url: ''
|
}
|
// 修改双向绑定数据
|
private editForm: any = {
|
name: '',
|
selectData: {
|
pMenuList:null,//菜单下拉数据列表
|
value:'',//选择下拉列表中选项后的值
|
getlistLoading:false,//获取到下拉列表的数据前默认改选择器不可用
|
},
|
order: '',
|
url: '',
|
id: ''
|
}
|
private rules: any = {
|
name:[
|
{ required: true, message: '名称不能为空' }
|
],
|
order:[
|
{ required: true, message: '请输入序号' },
|
{ pattern:/^\+?[1-9][0-9]*|[0]$/, message: '请输入数字' }
|
]
|
}
|
private editRules: any = {
|
name:[
|
{ required: true, message: '名称不能为空' }
|
],
|
order:[
|
{ required: true, message: '请输入序号' },
|
{ pattern:/^\+?[1-9][0-9]*|[0]$/, message: '请输入数字' }
|
],
|
rootFlag: [
|
|
]
|
|
}
|
// @Watch('addModel')
|
// private addModelFlagWatch(newVal:string,oldVal:string) {
|
// }
|
get addModelFlag() {
|
this.addModel = this.$store.state.webMenu.webMenuAddFlag
|
return this.addModel
|
}
|
|
get addRootMenuModel() {
|
return this.rootMenuFlag
|
}
|
// 新增根菜单
|
private addRootMenu() {
|
this.$store.state.webMenu.webMenuParentId = 0
|
this.rootMenuFlag = true
|
}
|
get editModelFlag() {
|
return this.$store.state.webMenu.editModelFlag
|
}
|
|
private rFlag: boolean = true
|
get rootFlag() {
|
return this.rFlag
|
}
|
|
private editBeforeData:any = null
|
private mounted() {
|
this.getMenus()
|
// 用于爷爷孙子组件传值
|
Bus.$on( 'delete', (res: boolean) => {
|
if (res) {
|
this.getMenus()
|
}
|
})
|
Bus.$on( 'edit', (res: any) => {
|
this.editBeforeData = res
|
this.editForm.name = res.name
|
this.editForm.order = res.order
|
this.editForm.url = res.url
|
this.editForm.selectData.value = res.parentId
|
if ( this.editForm.selectData.value === 0 ) {
|
this.rFlag = false
|
}else {
|
this.rFlag = true
|
}
|
this.editForm.id = res.id
|
this.getAllMenuName()
|
})
|
}
|
|
// 保存修改
|
private editMenuData() {
|
this.$refs.editMenuForm.validate((valid: any) => {
|
if (valid){
|
if (!(this.editBeforeData.order === this.editForm.order && this.editBeforeData.id === this.editForm.id
|
&& this.editBeforeData.name === this.editForm.name && this.editBeforeData.url === this.editForm.url
|
&& this.editBeforeData.parentId === this.editForm.selectData.value)) {
|
post('menu/update', {
|
id: this.editForm.id,
|
name: this.editForm.name,
|
parentId: this.editForm.selectData.value,
|
order: this.editForm.order,
|
url: this.editForm.url
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.getMenus()
|
this.$message.success(res.data.message)
|
this.$store.state.webMenu.editModelFlag = false
|
}else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
}else {
|
this.$message.warning('未修改')
|
}
|
}
|
})}
|
// 取消修改
|
private editModalCancel() {
|
this.$store.state.webMenu.editModelFlag = false
|
}
|
|
// 新增保存
|
private saveMenuData() {
|
this.$refs.addMenuForm.validate((valid: any) => {
|
if (valid){
|
post('menu/insert',
|
{
|
name: this.addForm.name,
|
parentId: this.$store.state.webMenu.webMenuParentId,
|
order: this.addForm.order,
|
url: this.addForm.url
|
}
|
).then((res: any) => {
|
if (res.data.code === 0) {
|
this.getMenus()
|
this.addForm = {
|
name: '',
|
order: '',
|
url: ''
|
}
|
this.$message.success(res.data.message)
|
this.$store.state.webMenu.webMenuAddFlag = false
|
this.rootMenuFlag = false
|
}else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
}else {
|
|
}
|
|
|
})
|
|
|
}
|
// 取消新增
|
private addModalCancel(){
|
this.addModel = false
|
this.$store.state.webMenu.webMenuAddFlag = false
|
this.rootMenuFlag = false
|
}
|
private getMenus() {
|
get('menu/query',{}).then((res: any) => {
|
this.webMenusData = res.data.data.menus
|
})
|
|
}
|
|
|
private handleChange(value: any){
|
this.editForm.selectData.value = value!=null && value !='' ? value : [];
|
}
|
|
private filterOption(input: any, option: any) {
|
return (
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
);
|
}
|
private getAllMenuName() {
|
get("menu/queryNames",{
|
id: this.editForm.id
|
}).then(res => {
|
this.editForm.selectData.pMenuList = res.data.data.menuVOs
|
})
|
}
|
}
|
</script>
|
|
<style lang="less">
|
|
|
.tableListOperator2 {
|
margin-bottom: 16px;
|
margin-right: 50px;
|
button {
|
margin-left: 93%;
|
margin-top: 10px;
|
}
|
}
|
</style>
|
