<template>
|
<div>
|
<a-card :bordered="false" style="margin-top: 24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form layout="horizontal">
|
<!-- gutter间隔属性 md>768 lg>992 xl>1200 目前宽度是891 ，是form的宽度-->
|
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
|
|
<a-col :md="8" :sm="24">
|
<!-- v-bind="searchFormLayout"绑定的是form表单布局 -->
|
<a-form-item label="用户名" fieldDecoratorId="name" v-bind="searchFormLayout">
|
<a-input placeholder="请输入用户名" v-model="searchInform.userinform" />
|
</a-form-item>
|
</a-col>
|
<a-col :md="8" :sm="24">
|
<a-form-item label="电话" fieldDecoratorId="phone" v-bind="searchFormLayout">
|
<a-input placeholder="请输入电话" v-model="searchInform.mobileinform" />
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="8" :sm="24" v-if="!expandForm">
|
<span class="submitButtons">
|
<a-button type="primary" @click="this.handleSearch">查询</a-button>
|
<a-button style="margin-left: 8px" @click="this.handleFormReset">重置</a-button>
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
<div class="tableListOperator">
|
<a-button icon="plus" type="primary" @click="() => this.handleModalVisible(true)">新建</a-button>
|
|
|
</div>
|
<av-standard-table
|
:dataSource="dataSource"
|
:columns="columns"
|
:paginationProps="pagination"
|
:selectedRows="selectedRows"
|
:loading="tableLoading"
|
@tableChange="handlerTableChange"
|
@selectChange="handlerSelectChange"
|
></av-standard-table>
|
</div>
|
</a-card>
|
|
<a-modal
|
title="新建-账户"
|
destroyOnClose
|
:visible="visibleCreateModal"
|
@ok="handleCreateModalOk"
|
@cancel="handleCreateModalCancel"
|
okText="保存"
|
>
|
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="帐号"
|
fieldDecoratorId="account"
|
:fieldDecoratorOptions="{rules: [{ required: true, pattern:/^[A-Za-z][a-zA-z0-9]*$/ ,message: '请输入账号，英文字母开头！', min: 2 }]}"
|
>
|
<a-input placeholder="请输入帐号，英文字母开头" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="密码"
|
fieldDecoratorId="password"
|
:fieldDecoratorOptions="{rules: [{ required: true,pattern:/^[A-Za-z0-9]+$/, message: '请输入密码,只能输入数字或字母！', min: 3 }]}"
|
>
|
<a-input placeholder="请输入密码" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="用户名"
|
fieldDecoratorId="userName"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入用户名！'},{ message: '用户名字数不能超过20个！',max: 19}]}"
|
>
|
<a-input placeholder="请输入用户名" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="电话"
|
fieldDecoratorId="mobile"
|
>
|
<a-input placeholder="请输入电话" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="电子邮件"
|
fieldDecoratorId="email"
|
>
|
<a-input placeholder="请输入电子邮件" />
|
</a-form-item>
|
|
<!-- <a-form-item-->
|
<!-- :labelCol="{ span: 5 }"-->
|
<!-- :wrapperCol="{ span: 15 }"-->
|
<!-- label="分配角色"-->
|
<!-- fieldDecoratorId="assignRoles"-->
|
<!-- >-->
|
|
<!-- <a-select-->
|
<!-- placeholder="请为账户分配角色"-->
|
<!-- allow-clear-->
|
<!-- show-search-->
|
<!-- >-->
|
<!-- <a-select-option v-for="(item,index) in this.searchrole" :key="item.id">{{item.name}}</a-select-option>-->
|
<!-- </a-select>-->
|
|
|
<!-- </a-form-item>-->
|
</a-form>
|
</a-modal>
|
|
<update-task-form
|
:visible.sync="updateTaskFormVisible"
|
:record="updateRecord"
|
@updateData="loadRuleData"
|
></update-task-form>
|
<change-password
|
:visible.sync="changePasswordVisible"
|
:record="changeRecord"
|
@updateData="loadRuleData"
|
></change-password>
|
<distrib-role
|
@updateData="loadRuleData"
|
:visible.sync="distribRoleVisible"
|
:record="distribRoleRecord"
|
></distrib-role>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
import { State, Mutation, namespace } from "vuex-class";
|
import { get, post } from "@/util/request";
|
|
// import moment from "moment";
|
import axios from "axios";
|
|
import { Observable, Subscription, BehaviorSubject } from "rxjs";
|
|
import UpdateTaskForm from "../list/components/UpdateTaskFormUser.vue";
|
import ChangePassword from '../list/components/ChangePassword.vue'
|
import DistribRole from '../list/components/DistribRole.vue'
|
|
import modalService from "../../core/ModalService";
|
import { Encrypt, Decrypt} from '../../util/AES.js'
|
|
@Component({
|
components: {
|
UpdateTaskForm,
|
ChangePassword,
|
DistribRole
|
}
|
})
|
//QueryList继承Vue类
|
export default class QueryList extends Vue {
|
private searchFormLayout: any = {
|
labelCol: {
|
span: 5
|
},
|
wrapperCol: {
|
span: 18,
|
offset: 1
|
}
|
};
|
|
private expandForm: boolean = false;
|
|
private selectedRowKeys: any[] = [];
|
|
private selectedRows: any[] = [];
|
|
private tableLoading: boolean = false;
|
|
private dataSource: any[] = [];
|
private dataSourceMiddle:any=[];
|
private pagination:any={
|
total:0,
|
current:1,
|
pageSize:5,
|
showSizeChanger: false,
|
showQuickJumper: false,
|
};
|
|
private searchInform: any = {
|
userinform: null,
|
mobileinform: null
|
};
|
|
private visibleCreateModal: boolean = false;
|
private updateTaskFormVisible: boolean = false;
|
private changePasswordVisible:boolean=false;
|
private distribRoleVisible:boolean=false;
|
private createForm: any = null;
|
private roles:any=null;
|
private updateRecord: any = {};
|
private changeRecord:any={};
|
private distribRoleRecord:any={}
|
|
private columns: any[] = [
|
{
|
title:'账号',
|
dataIndex:'account'
|
},
|
{
|
title: "用户名",
|
dataIndex: "userName"
|
},
|
{
|
title: "电话",
|
dataIndex: "mobile"
|
},
|
{
|
title: "电子邮件",
|
dataIndex: "email"
|
|
},
|
{
|
title: "角色",
|
dataIndex: "name"
|
|
},
|
{
|
title: "创建日期",
|
dataIndex: "createTime"
|
|
},
|
{
|
title: "操作",
|
customRender: this.opRender
|
}
|
];
|
|
|
|
//新建 button 弹窗事件 请求角色列表
|
private handleModalVisible(isVisible: boolean): void {
|
this.visibleCreateModal = isVisible;
|
axios.get('manageRole/getAllManageRole?current=1&size=100',{}).then(res=>{
|
this.searchrole=res.data.data.manageRoles
|
})
|
}
|
|
private searchrole :any=null;
|
private toggleForm(): void {
|
this.expandForm = !this.expandForm;
|
}
|
|
private handleFormReset(): void {
|
this.searchInform.userinform=null;
|
this.searchInform.mobileinform=null;
|
}
|
|
private searchData(pageSize: any):void{
|
if (
|
this.searchInform.userinform ||
|
this.searchInform.mobileinform
|
) {
|
get("account/query", {
|
page: pageSize,
|
size: 5,
|
orderType:1,
|
order:'updateTime',
|
userName:this.searchInform.userinform,
|
mobile:this.searchInform.mobileinform
|
}).then(res => {
|
this.pagination.total=res.data.data.total;
|
this.pagination.current=res.data.data.current;
|
this.pagination.pageSize=res.data.data.size
|
this.dataSource=[]
|
this.dataSource = res.data.data.accountVOs;
|
this.tableLoading = false;
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
}
|
//查询，网络请求，一页显示多少条
|
private handleSearch(): void {
|
this.searchData(1)
|
}
|
@Watch('searchInform.userinform')
|
private watchsearchInform(newVal:string,oldval:string){
|
if(!newVal&&!this.searchInform.mobileinform){
|
this.loadRuleData()
|
}
|
}
|
//监听写法，下面的方法，和上面连在一起
|
@Watch('searchInform.mobileinform')
|
private watchmobileinform(newVal:string,oldval:string){
|
if(!newVal&&!this.searchInform.userinform){
|
this.loadRuleData()
|
}
|
}
|
// 切换页码触发 分两块，一种是有查询的 ，一种是没查询的
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
if (
|
this.searchInform.userinform ||
|
this.searchInform.mobileinform
|
) {
|
this. searchData(pagination.current)
|
}else{
|
get("account/query", {
|
page: pagination.current,
|
size: 5,
|
orderType:1,
|
order:'updateTime'
|
}).then(res => {
|
let dataSource=res.data.data.accountVOs;
|
this.pagination.total=res.data.data.total;
|
this.pagination.current=res.data.data.current;
|
this.pagination.pageSize=res.data.data.size
|
for(let i=0;i<dataSource.length;i++){
|
let rolesInform= dataSource[i].roles;
|
if(rolesInform){
|
let role='';
|
for(let j=0;j<rolesInform.length;j++){
|
// 只有一个角色，后面不要、 2个以上最后一位去掉
|
role+= rolesInform[j].name+'、'
|
}
|
if(role.charAt(role.length-1)=='、'){
|
role=role.slice(0,role.length-1)
|
}
|
dataSource[i].name=role
|
}
|
}
|
this.dataSource=dataSource
|
this.dataSourceMiddle=dataSource
|
this.tableLoading = false;
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
|
}
|
}
|
|
private handleUpdateModalVisible(visible: boolean, record: any): void {
|
this.updateTaskFormVisible = true;
|
this.updateRecord = record;
|
}
|
//新建账户
|
private handleCreateModalOk() {
|
this.createForm.validateFields((err: any, fieldsValue: any) => {
|
if (err) {
|
return;
|
}
|
const account=this.createForm.getFieldValue("account")
|
let password=this.createForm.getFieldValue("password")
|
const userName=this.createForm.getFieldValue("userName")
|
const mobile=this.createForm.getFieldValue('mobile')?this.createForm.getFieldValue('mobile'):null
|
const email=this.createForm.getFieldValue('email')?this.createForm.getFieldValue('email'):null
|
|
//密码加密传入
|
password= Encrypt(password);
|
//插入数据库47.99.64.149
|
if(account!=""){
|
post("account/insert",{
|
account:account,
|
password:password,
|
userName:userName,
|
email:email,
|
mobile:mobile
|
}).then(res=>{
|
if(res.data.code!=0){
|
this.$message.error(res.data.message)
|
}else{
|
this.$message.success(res.data.message)
|
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();
|
}
|
|
private popupScroll(){}
|
//初始加载账号信息
|
private loadRuleData() {
|
this.tableLoading = true;
|
get("account/query", {
|
page: 1,
|
size: 5,
|
orderType:1,
|
order:'updateTime'
|
}).then(res => {
|
this.pagination.total=res.data.data.total;
|
this.pagination.current=res.data.data.current;
|
this.pagination.pageSize=res.data.data.size;
|
let dataSource=res.data.data.accountVOs;
|
|
for(let i=0;i<dataSource.length;i++){
|
let rolesInform= dataSource[i].roles;
|
if(rolesInform){
|
let role='';
|
for(let j=0;j<rolesInform.length;j++){
|
// 只有一个角色，后面不要、 2个以上最后一位去掉
|
role+= rolesInform[j].name+'、'
|
}
|
if(role.charAt(role.length-1)=='、'){
|
role=role.slice(0,role.length-1)
|
}
|
dataSource[i].name=role
|
}
|
}
|
this.dataSource=dataSource
|
this.dataSourceMiddle=dataSource
|
this.tableLoading = false;
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
|
|
|
|
//删除 ，确认网络请求
|
private popconfirm(record:any):void{
|
post("account/delete",{
|
accountId: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(err=>{
|
console.log(err)
|
})
|
}
|
//点击更多选项
|
private handleMenuItemClick(e:any,visible:boolean,record:any):void{
|
//判断e.key=1 修改密码
|
if(e.key==1){
|
this.changePasswordVisible=true
|
this.changeRecord=record
|
}
|
else{
|
this.distribRoleVisible=true;
|
this.distribRoleRecord=record
|
}
|
}
|
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div>
|
<a onClick={() => this.handleUpdateModalVisible(true, record)}>
|
编辑
|
</a>
|
<a-divider type="vertical" />
|
<a-popconfirm onConfirm={()=>this.popconfirm(record)} title="确定要删除该数据吗？" ok-text="确定" cancel-text="取消" >
|
<a >
|
删除
|
</a>
|
</a-popconfirm>
|
<a-divider type="vertical" />
|
<a-dropdown>
|
<a-menu slot="overlay" onClick={(e: any)=>this.handleMenuItemClick(e,true,record)}>
|
<a-menu-item key="1"> <a-icon type="unlock" />修改密码</a-menu-item>
|
<a-menu-item key="2"> <a-icon type="user" />分配角色 </a-menu-item>
|
</a-menu>
|
<a >更多<a-icon type="down" /></a>
|
// <a-button > 更多 <a-icon type="down" /> </a-button>
|
</a-dropdown>
|
</div>
|
);
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
