<template>
|
<div>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form-model @submit="handleSearch" layout="horizontal">
|
<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-row>
|
</a-form-model>
|
</div>
|
<av-standard-table
|
:dataSource="dataSource"
|
:selectedRows="selectedRows"
|
:columns="columns"
|
:paginationProps="pagination"
|
: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: '请输入名称！'},{ message: '名称字数不能超过20个！',max: 19}]}" >
|
<a-input
|
placeholder="请输入"
|
type="string"
|
/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="备注" fieldDecoratorId="desc"
|
:fieldDecoratorOptions="{rules: [{ message: '请输入角色描述！'},{ message: '备注字数不能超过20个！',max: 19}]}" >
|
<a-input
|
placeholder="请输入"
|
type="string"
|
/>
|
</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 {
|
State,
|
Mutation,
|
namespace,
|
} from 'vuex-class';
|
|
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'
|
|
|
|
|
import modalService from '@/core/ModalService.ts';
|
|
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 pagination:any={
|
total:0,
|
current:1,
|
pageSize:5,
|
showSizeChanger: false,
|
showQuickJumper: false,
|
};
|
private searchFormLayout: any = {
|
labelCol: {
|
span: 5,
|
},
|
wrapperCol: {
|
span: 18,
|
offset: 1,
|
},
|
};
|
|
@Watch('serch.name')
|
private watchsearchInform(newVal:string,oldval:string){
|
if (newVal !== '' && oldval === '') {
|
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 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: '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 handleFormReset(): void {
|
this.serch.name = null
|
this.handleSearch()
|
}
|
|
private handleSearch(): void {
|
get("manageRole/getManageRoleByNameFuzzy",{
|
name:this.serch.name,
|
current: this.pagination.current,
|
size: 5
|
}).then(res=>{
|
this.dataSource = res.data.data.manageRoles;
|
this.pagination.total=res.data.data.totalNumber;
|
this.pagination.current=res.data.data.current;
|
this.dataSource = res.data.data.manageRoles;
|
})
|
.catch(err=>{
|
console.log(err);
|
})
|
}
|
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.pagination.current = pagination.current
|
this.pagination.total = pagination.total
|
this.handleSearch()
|
}
|
|
|
|
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)
|
} else {
|
this.createForm.resetFields();
|
this.$message.success(res.data.message)
|
this.visibleCreateModal = false;
|
this.handleSearch();
|
}
|
}).catch((err)=>{
|
console.log(err);
|
})
|
});
|
}
|
|
private handleUpdateOk() {
|
this.handleSearch();
|
}
|
|
private handleCreateModalCancel(): any {
|
this.visibleCreateModal = false;
|
}
|
|
private handlerSelectChange(arr1: any, arr2: any) {
|
this.selectedRows = arr2;
|
}
|
|
private handleMenuClick(e: any) {
|
}
|
|
private mounted() {
|
this.handleSearch();
|
// this.menuData()
|
}
|
|
|
|
|
|
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.handleSearch()
|
}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>
|
<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>
|
