<template>
|
<div>
|
<!-- <av-page-header :title="$t(`menu.list.role`)">
|
<div slot="breadcrumb">
|
<a-breadcrumb>
|
<a-breadcrumb-item>
|
<a >{{$t(`menu.home`)}}</a>
|
</a-breadcrumb-item>
|
<a-breadcrumb-item>
|
<a >{{$t(`menu.list`)}}</a>
|
</a-breadcrumb-item>
|
<a-breadcrumb-item>{{$t(`menu.list.role`)}}</a-breadcrumb-item>
|
</a-breadcrumb>
|
</div>
|
</av-page-header> -->
|
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form @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-item fieldDecoratorId="name" v-bind="searchFormLayout" style="width: 240px;float: right;">
|
<a-input v-model="serch.name" placeholder="请输入角色名称或编号" />
|
</a-form-item>
|
<!-- <a-form-model style="width: 240px;float: right;">
|
<a-input v-model="serch.name" placeholder="请输入角色名称或编号" />
|
</a-form-model> -->
|
</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>
|
</div>
|
<!-- <div class="tableListOperator">
|
|
<a-button icon="plus" type="primary" @click="() => this.test()">
|
测试功能
|
</a-button>
|
|
<span v-if="selectedRows.length > 0">
|
<a-button>批量操作</a-button>
|
<a-dropdown>
|
<template slot="overlay">
|
<a-menu @click="handleMenuClick">
|
<a-menu-item key="remove">删除</a-menu-item>
|
<a-menu-item key="approval">批量审批</a-menu-item>
|
</a-menu>
|
</template>
|
<a-button>
|
更多操作 <a-icon type="down" />
|
</a-button>
|
</a-dropdown>
|
</span>
|
</div> -->
|
<av-standard-table :dataSource="dataSource" :selectedRows="selectedRows" :columns="columns" :loading="tableLoading" @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" :autoFormCreate="(form)=>{this.createForm = form}">
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" fieldDecoratorId="name" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入名称！', min: 1 }]}">
|
<a-input placeholder="请输入" />
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="备注" fieldDecoratorId="desc" :fieldDecoratorOptions="{rules: [{ message: '请输入角色描述！'}]}">
|
<a-input placeholder="请输入" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
|
<update-task-form :visible.sync="updateTaskFormVisible" :record="updateRecord" @ok="handleUpdateOk"></update-task-form>
|
<distribution-menu :visible.sync="distributionMenuVisible" :record="updateRecord1" @ok="handleUpdateOk"></distribution-menu>
|
|
</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 { Observable, Subscription, BehaviorSubject } from 'rxjs';
|
|
import UpdateTaskForm from './components/UpdateTaskFormRole.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 serch:any = {
|
name:''
|
}
|
|
private searchFormLayout: any = {
|
labelCol: {
|
span: 5,
|
},
|
wrapperCol: {
|
span: 18,
|
offset: 1,
|
},
|
};
|
|
@Watch('serch.name')
|
private watchsearchInform(newVal:string,oldval:string){
|
this.handleSearch()
|
}
|
|
private expandForm: boolean = false;
|
|
private selectedRowKeys: any[] = [];
|
|
private selectedRows: any[] = [];
|
|
private tableLoading: boolean = false;
|
|
private moment: any = moment;
|
|
private dataSource: any[] = [];
|
|
private visibleCreateModal: boolean = false;
|
|
private updateTaskFormVisible: boolean = false;
|
|
private distributionMenuVisible: boolean = false;
|
|
private createForm: any = null;
|
|
private updateRecord: any = {};
|
|
private updateRecord1: any = {};
|
|
private columns: any[] = [{
|
title: '名称',
|
dataIndex: 'name',
|
},
|
{
|
title: '编号',
|
dataIndex: 'id',
|
},
|
{
|
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 toggleForm(): void {
|
this.expandForm = !this.expandForm;
|
}
|
|
|
private handleSearch(): void {
|
get("manageRole/getManageRoleByNameFuzzy",{
|
name:this.serch.name,
|
current: 1,
|
size: 100
|
})
|
.then(res=>{
|
this.dataSource = res.data.data.manageRoles;
|
})
|
.catch(err=>{
|
console.log(err);
|
})
|
}
|
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
|
}
|
|
|
|
private handleUpdateModalVisible(visible: boolean, record: any): void {
|
this.updateTaskFormVisible = true;
|
this.updateRecord = record;
|
}
|
|
private handleUpdateModalVisible1(visible: boolean, record: any): void {
|
this.updateRecord1 = record;
|
setTimeout(()=>{
|
this.distributionMenuVisible = true;
|
},500)
|
}
|
|
private handleCreateModalOk() {
|
this.createForm.validateFields((err: any, fieldsValue: any) => {
|
if (err) {
|
return;
|
}
|
const name = this.createForm.getFieldValue('name');
|
const desc = this.createForm.getFieldValue('desc');
|
post('manageRole/insertOneManageRole', {
|
name:name,
|
desc: desc,
|
menuIds:[]
|
})
|
.then((res: any) => {
|
if(res.data.code !== 0){
|
this.$message.warning(res.data.message,2)
|
}
|
this.createForm.resetFields();
|
this.visibleCreateModal = false;
|
this.loadRuleData();
|
}).catch((err)=>{
|
console.log(err);
|
})
|
});
|
}
|
|
private handleUpdateOk() {
|
this.loadRuleData();
|
}
|
|
private handleCreateModalCancel(): any {
|
this.visibleCreateModal = false;
|
}
|
|
private handlerSelectChange(arr1: any, arr2: any) {
|
this.selectedRows = arr2;
|
}
|
|
private handleMenuClick(e: any) {
|
}
|
|
private mounted() {
|
this.loadRuleData();
|
// this.menuData()
|
}
|
|
private loadRuleData() {
|
this.tableLoading = true;
|
get('manageRole/getAllManageRole',{
|
current: 1,
|
size: 20
|
})
|
.then((res) => {
|
this.dataSource = res.data.data.manageRoles;
|
})
|
.finally(() => {
|
this.tableLoading = false;
|
});
|
}
|
|
|
private rightRender(text: string) {
|
return `${text} 万`;
|
}
|
|
private statusRender(text: any, record: any, index: number) {
|
return <a-badge status = {
|
statusMap[text]
|
}
|
text = {
|
status[text]
|
}
|
/>;
|
}
|
|
private updatedAtRender(text: string) {
|
return <span> {
|
moment(text).format('YYYY-MM-DD HH:mm:ss')
|
} </span>;
|
}
|
|
private deleteManageRole(record: any){
|
post('manageRole/deleteManageRole',{id:record.id}
|
).then((res)=>{
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message)
|
this.loadRuleData()
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
|
})
|
.catch(function (error) {
|
})
|
}
|
|
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>
|
<a-divider type = 'vertical' />
|
<a onClick = {
|
() => this.handleUpdateModalVisible1(true, record)
|
} >分配菜单</a>
|
</div>;
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
