<template>
|
<a-modal
|
title="分配-角色"
|
destoryOnClose
|
:visible="visible"
|
@cancel="handleCancel"
|
@ok="handleOk"
|
okText="保存"
|
>
|
<div class="standardTable">
|
<a-table
|
:loading="loading"
|
:pagination="pagination"
|
:data-source="dataSource"
|
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: handleRowSelectChange }"
|
@change="handleTableChange"
|
:columns="columns"
|
></a-table>
|
</div>
|
</a-modal>
|
</template>
|
|
<script lang="ts">
|
import * as _ from "lodash";
|
import { get, post } from "@/util/request";
|
import {
|
Vue,
|
Prop,
|
Component,
|
Emit,
|
Model,
|
Watch
|
} from "vue-property-decorator";
|
@Component({
|
components: {}
|
})
|
export default class DistribRole extends Vue {
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private visible!: boolean;
|
|
@Prop({
|
type: Object,
|
default() {
|
return {};
|
}
|
})
|
private record!: any;
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private loading!: boolean;
|
|
private dataSource: any[] = [];
|
|
@Prop({
|
type: Array,
|
default: () => []
|
})
|
private selectedRows!: any[];
|
private selectedRowKeys: any[] = [];
|
private selectedRowKeysMiddle:any[]=[];//用于取消按钮，比对
|
private total: any = null;
|
private roleNames: any[] = [];
|
// private needTotalList: any[] = [];
|
|
private columns: any[] = [
|
{
|
title: "名称",
|
dataIndex: "name"
|
},
|
{
|
title: "备注"
|
}
|
];
|
|
get pagination(): any {
|
return {
|
showSizeChanger: false,
|
showQuickJumper: false,
|
// pageSizeOptions:null,//制定每页选择多少条
|
total: this.total ? this.total : 0, //获取总数必须这样写，不然获取pagination会出错
|
pageSize: 5
|
};
|
}
|
|
private created() {
|
//网络请求，获取角色
|
get("manageRole/getAllManageRole?current=1&size=5", {}).then(res => {
|
this.dataSource = res.data.data.manageRoles;
|
this.total = res.data.data.totalNumber;
|
});
|
}
|
@Watch("record", {
|
immediate: true,
|
deep: true
|
}) //回调，拿到数据赋值
|
private recordChange(newValue: any, oldValue: any): void {
|
|
this.selectedRowKeys=[];
|
//判断是否存在roleNames,存在的话 ，网络请求数据，
|
//比对成功，处于选中状态
|
if (newValue.roles) {
|
for (let i = 0; i < newValue.roles.length; i++) {
|
this.selectedRowKeys.push(newValue.roles[i].id);
|
}
|
}
|
|
this.selectedRowKeysMiddle=this.selectedRowKeys;
|
}
|
|
//取消，删除按钮
|
private handleCancel() {
|
//取消，选中的角色，要进行清除，还原
|
this.selectedRowKeys=this.selectedRowKeysMiddle
|
this.DistribRoleVisible(false);
|
}
|
DistribRoleVisible(visible: boolean): void {
|
this.$emit("update:visible", visible);
|
}
|
//保存按钮
|
private handleOk() {
|
//插入更新数据库
|
if(this.selectedRowKeys!=this.selectedRowKeysMiddle){
|
//修改数据库
|
post("account/updateRole",{
|
accountId:this.record.id,
|
roleId:this.selectedRowKeys[0] === undefined ? null : this.selectedRowKeys[0]
|
}).then(res=>{
|
//保存成功，组件刷新数据
|
this.$emit('updateData')
|
this.DistribRoleVisible(false);
|
}).catch(err=>{
|
console.log(err)
|
})
|
}
|
}
|
|
private cleanSelectedKeys(): void {
|
this.handleRowSelectChange([], []);
|
}
|
|
//切换页码，网络请求
|
private handleTableChange(pagination: any, filters: any, sorter: any): void {
|
// console.log(pagination);
|
get("manageRole/getAllManageRole", {
|
current: pagination.current,
|
size: 5,
|
order:'updateTime',
|
orderType:1
|
}).then(res => {
|
this.dataSource = res.data.data.manageRoles;
|
});
|
}
|
|
private handleRowSelectChange(selectedRowKeys: any, selectedRows: any): void {
|
if (selectedRowKeys.length>1) {
|
selectedRowKeys.splice(0,1)
|
}
|
this.selectedRowKeys = selectedRowKeys;
|
}
|
|
private initTotalList(columns: any[]) {
|
const totalList: any[] = [];
|
columns.forEach((column: any) => {
|
if (column.needTotal) {
|
totalList.push({ ...column, total: 0 });
|
}
|
});
|
return totalList;
|
}
|
}
|
</script>
|
|
|
<style lang="less">
|
.standardTable {
|
:global {
|
.ant-table-pagination {
|
margin-top: 24px;
|
}
|
}
|
.tableAlert {
|
margin-bottom: 16px;
|
}
|
}
|
</style>
|
