<template>
|
<div>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form-model
|
@submit="handleSearch"
|
layout="horizontal"
|
:autoFormCreate="(form)=>{this.searchForm = form}"
|
>
|
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
|
<a-button
|
icon="plus"
|
type="primary"
|
@click="() => this.handleModalVisible(true)"
|
style="margin-left: 25px;"
|
>新建
|
</a-button>
|
<a-form-model-item
|
fieldDecoratorId="name"
|
v-bind="searchFormLayout"
|
style="width: 240px;float: right"
|
>
|
<a-input v-model="serch.name" placeholder="请输入菜单名称"/>
|
</a-form-model-item>
|
<a-form-model-item style="width: 240px;float: right;margin-top:3px">
|
<a-select placeholder="选择父菜单" style="width: 120px"
|
allow-clear
|
v-model="serch.pId">
|
<a-select-option
|
v-for="item in parentData"
|
:value="item.id"
|
:key="item.id"
|
>{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-row>
|
<!-- <div :style="{ overflow: 'hidden' }" >
|
<div :style="{ float: 'right', marginBottom: 24 }">
|
<a-button type="primary" htmlType="submit">
|
查询
|
</a-button>
|
<a-button :style="{ 'margin-left': '8px' }" @click="this.handleFormReset">
|
重置
|
</a-button>
|
</div>
|
</div>-->
|
</a-form-model>
|
</div>
|
|
<av-standard-table
|
:dataSource="dataSource"
|
:selectedRows="selectedRows"
|
:columns="columns"
|
:loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
@selectChange="handlerSelectChange"
|
></av-standard-table>
|
</div>
|
</a-card>
|
|
<a-modal
|
title="添加-菜单"
|
destroyOnClose
|
:visible="visibleCreateModal"
|
@ok="handleCreateModalOk"
|
@cancel="handleCreateModalCancel"
|
>
|
<!---->
|
<a-form style="margin-top: 8px" :form="form">
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
>
|
<a-input placeholder="请输入名称" type="string"
|
v-decorator="['name', { rules: [{ required: true,message: '请输入名称！'}] }]"/>
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="选择父菜单"
|
>
|
<!-- @change="handleChange"-->
|
<a-select style="width: 120px" placeholder="选择父菜单"
|
allow-clear
|
v-decorator="['parent_id', { rules: [{ required: false}] }]">
|
<a-select-option
|
v-for="item in parentData"
|
:value="item.id"
|
:key="item.id"
|
>{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="顺序"
|
>
|
<a-input placeholder="请输入顺序" v-decorator="['order', { rules: [{ required: true,message: '请输入顺序！'}] }]"/>
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="路径"
|
>
|
<a-input placeholder="请输入路径" v-decorator="['url', { rules: [{ required: true, message: '请输入路径！'}] }]"/>
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="备注"
|
>
|
<a-input placeholder="请输入角色描述" v-decorator="['desc', { rules: [{ message: '请输入角色描述！'}] }]"/>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
|
<update-task-form
|
:visible.sync="updateTaskFormVisible"
|
:record="updateRecord"
|
@ok="handleUpdateOk"
|
></update-task-form>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator";
|
import moment from "moment";
|
import { get, post } from "@/util/request";
|
import UpdateTaskForm from "./components/UpdateTaskFormMenu.vue";
|
import DistributionMenu from "./components/DistributionMenu.vue";
|
|
const statusMap = ["default", "processing", "success", "error"];
|
const status = ["关闭", "运行中", "已上线", "异常"];
|
|
@Component({
|
components: {
|
UpdateTaskForm,
|
DistributionMenu
|
}
|
})
|
export default class QueryList extends Vue {
|
private searchForm: any;
|
|
private pagination: any = {
|
total: 0,
|
current: 1,
|
pageSize: 5,
|
showSizeChanger: false,
|
showQuickJumper: false
|
};
|
private form: any = {};
|
private serch: any = {
|
name: '',
|
pId: undefined
|
};
|
|
private searchFormLayout: any = {
|
labelCol: {
|
span: 5
|
},
|
wrapperCol: {
|
span: 18,
|
offset: 1
|
}
|
};
|
|
@Watch("serch",{
|
deep: true
|
})
|
private watchsearchInform(newVal: string, oldval: string) {
|
this.pagination.current = 1
|
this.handleSearch();
|
}
|
|
private expandForm: boolean = false;
|
|
private selectedRowKeys: any[] = [];
|
|
private selectedRows: any[] = [];
|
|
private tableLoading: boolean = false;
|
|
private moment: any = moment;
|
|
private dataSource: any[] = [];
|
|
private parentData: any[] = [];
|
|
private visibleCreateModal: boolean = false;
|
|
private updateTaskFormVisible: boolean = false;
|
|
private distributionMenuVisible: boolean = false;
|
|
private createForm: any = null;
|
|
private updateRecord: any = {};
|
|
private columns: any[] = [
|
{
|
title: "名称",
|
dataIndex: "name"
|
},
|
{
|
title: "顺序",
|
dataIndex: "order"
|
},
|
{
|
title: "路径",
|
dataIndex: "url"
|
},
|
{
|
title: "父菜单",
|
dataIndex: "parent_name"
|
},
|
{
|
title: "备注",
|
dataIndex: "desc"
|
},
|
{
|
title: "创建日期",
|
dataIndex: "createTime"
|
},
|
{
|
title: "更新日期",
|
dataIndex: "updateTime"
|
},
|
{
|
title: "操作",
|
customRender: this.opRender
|
}
|
];
|
|
constructor() {
|
super();
|
}
|
|
get status() {
|
return status;
|
}
|
|
get statusMap() {
|
return statusMap;
|
}
|
|
get statuFilters() {
|
return [
|
{
|
text: status[0],
|
value: 0
|
},
|
{
|
text: status[1],
|
value: 1
|
},
|
{
|
text: status[2],
|
value: 2
|
},
|
{
|
text: status[3],
|
value: 3
|
}
|
];
|
}
|
|
|
private handleModalVisible(isVisible: boolean): void {
|
this.visibleCreateModal = isVisible;
|
}
|
|
|
private handleSearch(): void {
|
this.loadRuleData()
|
}
|
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.pagination.current = pagination.current
|
this.loadRuleData()
|
}
|
|
|
private handleUpdateModalVisible(visible: boolean, record: any): void {
|
this.updateTaskFormVisible = true;
|
this.updateRecord = record;
|
}
|
|
private handleCreateModalOk() {
|
this.form.validateFields((err: any, values: any) => {
|
if (err) {
|
return;
|
}
|
const name = values.name
|
const url = values.url
|
const parent_id = values.parent_id === undefined ? 0 : values.parent_id
|
const order = values.order
|
const desc = values.desc
|
|
post("manageMenu/insertOneManageMenu",
|
{
|
name: name,
|
url: url,
|
parent_id: parent_id,
|
order: order,
|
desc: desc
|
}
|
).then((res: any) => {
|
if (res.data.code !== 0) {
|
this.$message.warning(res.data.message, 2);
|
}else {
|
this.visibleCreateModal = false;
|
this.serch.name = ''
|
this.$message.success(res.data.message)
|
this.loadRuleData();
|
}
|
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
|
})
|
}
|
|
private handleUpdateOk() {
|
this.serch.name = ''
|
this.loadRuleData();
|
}
|
|
private handleCreateModalCancel(): any {
|
this.visibleCreateModal = false;
|
}
|
|
private handlerSelectChange(arr1: any, arr2: any) {
|
this.selectedRows = arr2;
|
}
|
|
private handleMenuClick(e: any) {
|
}
|
|
private mounted() {
|
this.serch.name = ''
|
this.form = this.$form.createForm(this, {name: "Menu"});
|
this.loadRuleData();
|
this.getAllPMenus()
|
}
|
|
//获取所有父菜单
|
private getAllPMenus() {
|
get("manageMenu/getManageParentMenu", {}).then((res: any) => {
|
this.parentData = []
|
this.parentData = res.data.data.manageMenus
|
})
|
}
|
|
private loadRuleData() {
|
this.tableLoading = true;
|
get("manageMenu/getManageMenuByNameFuzzy", {
|
current: this.pagination.current,
|
size: 5,
|
parent_id: this.serch.pId === undefined ? null : this.serch.pId,
|
name: this.serch.name
|
}).then(res => {
|
this.dataSource = [];
|
this.dataSource = res.data.data.manageMenus;
|
this.pagination.pageSize = res.data.data.size
|
this.pagination.current = res.data.data.current
|
this.pagination.total = res.data.data.totalNumber
|
})
|
.finally(() => {
|
this.tableLoading = false;
|
});
|
}
|
|
|
private deleteManageRole(record: any) {
|
post("manageMenu/deleteManageMenu", {id: record.id}).then(res => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message)
|
this.pagination.current = 1
|
this.loadRuleData();
|
}else {
|
this.$message.error("删除失败！")
|
}
|
})
|
.catch(function (error) {
|
console.log("删除失败");
|
});
|
}
|
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div>
|
<a onClick={() => this.handleUpdateModalVisible(true, record)}>
|
{" "}
|
编辑{" "}
|
</a>
|
<a-divider type="vertical"/>
|
<a-popconfirm
|
title="确认删除吗？"
|
ok-text="确定"
|
cancel-text="取消"
|
onConfirm={() => this.deleteManageRole(record)}
|
>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
</div>
|
);
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
