<template>
|
<section>
|
<el-card class="box-card toolCard">
|
<div slot="header" class="clearfix">
|
<!--显示导航-->
|
<el-breadcrumb separator="/">
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>
|
<a href="javascript:void(0);">系统管理</a>
|
</el-breadcrumb-item>
|
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<!--<div class="text item">-->
|
<!--工具条-->
|
<!--<section class="toolbar">-->
|
|
<!--</section>-->
|
<el-form :inline="true" :model="searchForm">
|
<el-form-item label="名称">
|
<el-input v-model="searchForm.name" placeholder="名称"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号">
|
<el-input v-model="searchForm.phone" placeholder="手机号"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="small" @click="onSearch" icon="el-icon-search">查询</el-button>
|
<el-button type="primary" size="small" @click="onAdd" icon="el-icon-plus">增加</el-button>
|
<el-button type="primary" size="small" @click="onInitPassword" icon="el-icon-refresh">初始化密码</el-button>
|
<el-button type="primary" size="small" @click="onSetUserImage" icon="el-icon-picture-outline">设置头像</el-button>
|
<el-button type="primary" size="small" @click="onChangeDept" icon="el-icon-picture-outline">调换部门</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!--</div>-->
|
</el-card>
|
|
<!--列表数据-->
|
<el-table :data="pageData.rows" v-loading="pageData.isLoading" :element-loading-text="pageData.loadingText"
|
border
|
:height="pageConfig.maxHeight"
|
stripe tooltip-effect="dark" style="width:100%; height:100%" @selection-change="onSelectionChange" @row-click="clickRow"
|
ref="mulTable">
|
<!--<el-table-column-->
|
<!--type="selection"-->
|
<!--width="50">
|
</el-table-column>-->
|
<el-table-column prop="loginName" label="登录名">
|
</el-table-column>
|
<el-table-column prop="name" label="姓名">
|
</el-table-column>
|
<el-table-column prop="sexStr" label="性别名">
|
</el-table-column>
|
<el-table-column prop="age" label="年龄">
|
</el-table-column>
|
<el-table-column prop="deptName" label="所在部门">
|
</el-table-column>
|
<el-table-column prop="post" label="职位">
|
</el-table-column>
|
<el-table-column prop="phone" label="手机号">
|
</el-table-column>
|
<el-table-column prop="roleNames" label="角色">
|
</el-table-column>
|
<el-table-column prop="status" label="状态">
|
</el-table-column>
|
<el-table-column prop="lastLoginTime" label="最近登录时间">
|
</el-table-column>
|
|
<el-table-column label="操作" fixed="right" width="250">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
@click="onEdit(scope.$index, scope.row)">编辑
|
</el-button>
|
<el-button
|
size="mini"
|
type="danger"
|
@click="onStop(scope.$index, scope.row)">停用
|
</el-button>
|
<el-button
|
size="mini"
|
@click="onStart(scope.$index, scope.row)">启用
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!--分页信息-->
|
<el-pagination
|
background
|
@size-change="onPageSizeChange"
|
@current-change="onCurrentPageChange"
|
:current-page="pageData.currentPage"
|
:page-sizes="[10, 20, 30, 40, 50, 100, 200]"
|
:page-size="pageData.pageSize"
|
layout="total, sizes, jumper, prev, pager, next"
|
:total="pageData.total">
|
</el-pagination>
|
</section>
|
</template>
|
|
<script>
|
// 导入新增组件
|
import addDialog from './AddDialog'
|
export default {
|
name: "UserIndex",
|
data: function () {
|
return {
|
pageConfig: {
|
pageDataUrl: this.$systemconfig.basePath + '/security/user/list',
|
stopUrl: this.$systemconfig.basePath + '/security/user/stop',
|
startUrl: this.$systemconfig.basePath + '/security/user/start',
|
initPasswordUrl:this.$systemconfig.basePath+'/security/user/restoreInitialPassword',
|
},
|
// 查询数据
|
searchForm: {
|
name: ''
|
},
|
// 页面数据
|
pageData: this.$byutil.defaultPageData()
|
}
|
},
|
// 引入组件
|
components: {
|
addDialog: addDialog
|
},
|
// 执行初始化数据
|
mounted() {
|
this.$byutil.initTableMaxHeight(this);
|
this.loadData();
|
},
|
// 方法
|
methods: {
|
//加载数据
|
loadData() {
|
this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl, this.searchForm);
|
},
|
// 点击查询按钮
|
onSearch() {
|
this.pageData = this.$byutil.defaultPageData();
|
this.loadData();
|
},
|
// 点击新增按钮
|
onAdd() {
|
this.$refs.addDialog.showDialog(true);
|
},
|
// 点击编辑按钮
|
onEdit(index, row) {
|
this.$refs.addDialog.showDialog(true);
|
//初始化旧数据
|
this.$refs.addDialog.initData(row);
|
},
|
// 点击停用
|
onStop(index, row) {
|
if(row.status == "删除"){
|
alert("已经停用，不能再次停用");
|
return;
|
}
|
this.$byutil.stopData(this, this.pageConfig.stopUrl, row);
|
},
|
// 点击启用
|
onStart(index, row) {
|
if(row.status == "正常"){
|
alert("正常状态，不能再次启用");
|
return;
|
}
|
this.$byutil.startData(this, this.pageConfig.startUrl, row);
|
},
|
// 多选时
|
onSelectionChange(val) {
|
// this.pageData.multipleSelection = val
|
},
|
// 切换每页显示条数
|
onPageSizeChange(val) {
|
this.pageData.pageSize = val;
|
this.loadData();
|
},
|
// 跳转页
|
onCurrentPageChange(val) {
|
this.pageData.page = val;
|
this.loadData();
|
},
|
//单选
|
clickRow(val){
|
this.pageData.signSelection = val
|
|
},
|
// 设置头像
|
onSetUserImage (){
|
let row = this.pageData.signSelection;
|
if(!row){
|
this.$alert('请选择用户', {'title': '提示','type': 'warning','center': true,'showClose': false});
|
return;
|
}
|
this.$refs.setUserImageDialog.showDialog(true);
|
this.$refs.setUserImageDialog.initData(row);
|
},
|
|
// 调换部门
|
onChangeDept (){
|
let row = this.pageData.signSelection;
|
if(!row){
|
this.$alert('请选择用户', {'title': '提示','type': 'warning','center': true,'showClose': false});
|
return;
|
}
|
this.$refs.changeDeptDialog.showDialog(true);
|
this.$refs.changeDeptDialog.initData(row);
|
},
|
|
//初始化密码
|
onInitPassword(){
|
let row = this.pageData.signSelection;
|
if(!row){
|
this.$alert('请选择用户', {'title': '提示','type': 'warning','center': true,'showClose': false});
|
return;
|
}
|
this.$byutil.postData(this,this.pageConfig.initPasswordUrl,row,res=>{
|
this.$alert(row.name+'初始化密码成功', {'title': '提示','type': 'success','center': true,'showClose': false});
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
