<template>
|
<div class="app-container">
|
<div class="filter-container select">
|
<!-- <el-input v-model="searchusername" placeholder="输入用户名，回车搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />-->
|
<!-- <el-input v-model="searchname" placeholder="输入姓名，回车搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />-->
|
|
<!-- <div class="select xian">-->
|
<PageTitle title="用户管理"></PageTitle>
|
<div class='searchBar'>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<span style='white-space: nowrap'>用户名：</span>
|
<el-input
|
v-model="listQuery.searchusername"
|
clearable
|
/>
|
</el-col>
|
<el-col :span="6">
|
<span style='white-space: nowrap'>姓名：</span>
|
<el-input
|
v-model="listQuery.searchname"
|
clearable
|
/>
|
</el-col>
|
<el-col :span="6" style='display: flex;align-items: center;justify-content: end'>
|
<el-button class="filter-item" type="primary" size="medium" icon="el-icon-search" @click="handleFilter">
|
{{ $t('common.search') }}
|
</el-button>
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" size="medium" icon="el-icon-edit"
|
@click="handleAdd">
|
{{ $t('common.add') }}
|
</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
|
<el-table stripe :data="userList" style="width: 97%" :header-cell-style="{background:'#f4f4f4'}" border>
|
<el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
|
<el-table-column label="用户名" align="center" min-width="10%">
|
<template slot-scope="scope">
|
<el-popover trigger="hover" placement="top">
|
<p>{{ scope.row.password }}</p>
|
<div slot="reference" class="name-wrapper">
|
<el-tag size="medium">{{ scope.row.userName }}</el-tag>
|
</div>
|
</el-popover>
|
</template>
|
</el-table-column>
|
<el-table-column label="姓名" align="center" min-width="10%">
|
<template slot-scope="scope">
|
<span>{{ scope.row.nickName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="手机号" align="center" min-width="20%">
|
<template slot-scope="scope">
|
<span>{{ scope.row.phonenumber }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="邮箱" align="center" min-width="20%">
|
<template slot-scope="scope">
|
<span>{{ scope.row.email }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" min-width="30%">
|
<template slot-scope="scope">
|
<el-button size="mini" type="primary" @click="handleView(scope.$index, scope.row)">查看</el-button>
|
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">{{
|
$t('common.edit')
|
}}
|
</el-button>
|
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{
|
$t('common.delete')
|
}}
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listQuery.page"
|
:page-sizes="[10, 20, 25, 50]"
|
:page-size="listQuery.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
|
<el-dialog
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
:title="dialogState === 1 ? '用户信息添加' : (dialogState === 2 ? '用户信息修改' : '用户信息查看')"
|
:visible.sync="dialogVisible"
|
width="50%"
|
:before-close="handleClose"
|
>
|
<el-form ref="dialogform" :disabled="disabled" :model="form" :rules="rules" label-width="100px"
|
class="dialog_form">
|
<el-row :gutter="40">
|
<el-col :span="12">
|
<el-form-item prop="userName" label="账号">
|
<el-input v-model="form.userName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="password" label="密码">
|
<el-input v-model="form.password" show-password :disabled="dialogState === 1 ? false : true"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="40">
|
<el-col :span="12">
|
<el-form-item prop="nickName" label="姓名">
|
<el-input v-model="form.nickName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="sex" label="性别">
|
<el-select v-model="form.sex" filterable placeholder="请选择" style="width: 100%">
|
<el-option v-for="item in teacherSexValue" :key="item.id" :label="item.label"
|
:value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="40">
|
<el-col :span="12">
|
<el-form-item prop="phonenumber" label="手机号">
|
<el-input v-model="form.phonenumber"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="email" label="邮箱">
|
<el-input v-model="form.email"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-form-item prop="remark" label="备注">
|
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.remark"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-form-item align="right" v-show="!disabled">
|
<el-button type="primary" @click="onSubmit(form)">
|
{{ dialogState === 1 ? $t('common.add') : $t('common.save') }}
|
</el-button>
|
<el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
|
</el-form-item>
|
</el-row>
|
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import md5 from 'js-md5';
|
import {getUserList, addUser, deleteUserById, updateUser, getUserById, fetchList} from '@/api/user';
|
import {getRoleList} from '@/api/role';
|
import {getGroupData} from '../../utils';
|
import Uploader from '@/components/Uploader';
|
import download from '@/api/uploadUrl';
|
import PageTitle from '@/components/PageTitle/index.vue'
|
|
export default {
|
components: {Uploader, PageTitle},
|
data() {
|
return {
|
fileUrl: "",
|
fileName: '',
|
total: 0,
|
download: download,
|
teacherSexValue: [
|
{
|
id: "1",
|
label: '男'
|
},
|
{
|
id: "0",
|
label: '女'
|
}
|
],
|
listQuery: {
|
searchusername: '',
|
searchname: '',
|
// page: 1,
|
// limit: 10
|
},
|
educationValue: getGroupData('XL'),
|
userList: [],
|
dialogState: 1, //1:add, 2:edit
|
dialogVisible: false,
|
disabled: false,
|
form: {
|
id: "",
|
username: '',
|
password: '',
|
name: '',
|
roleid: '',
|
phone: '',
|
email: '',
|
teacherSex: '',
|
cardId: '',
|
workingTime: '',
|
education: '',
|
photoUrl: '',
|
personalProfile: '',
|
remark: '',
|
},
|
rules: {
|
userName: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
|
password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
|
nickName: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
|
phonenumber: [
|
{required: true, message: '手机号码不能为空', trigger: 'blur'},
|
{
|
pattern: /^(13[0-9]{1}|14[5|7|9]{1}|15[0-3|5-9]{1}|166|17[0-3|5-8]{1}|18[0-9]{1}|19[8-9]{1}){1}\d{8}$/,
|
message: '手机号码格式不正确'
|
}
|
],
|
email: [
|
{required: true, message: '邮箱地址不能为空', trigger: 'blur'},
|
{
|
pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
|
message: '邮箱地址格式不正确'
|
}
|
]
|
},
|
roleList: [],
|
roleValue: null,
|
};
|
},
|
mounted() {
|
this.getList();
|
this.getRoleList();
|
},
|
methods: {
|
|
handleSizeChange(size) {
|
this.listQuery.size = size
|
this.getList();
|
},
|
handleCurrentChange(page) {
|
this.listQuery.page = page
|
this.getList();
|
},
|
getList() {
|
getUserList({}).then(res => {
|
if (res.code != 200) {
|
this.$message("数据查询失败！请重试", 'error', 3 * 1000);
|
return;
|
}
|
this.userList = res.data.list;
|
});
|
},
|
getRoleList() {
|
getRoleList().then(res => {
|
if (!res.result) {
|
return;
|
}
|
this.roleList = res.data.list.map(item => {
|
return {
|
value: item.id,
|
label: item.rolename
|
};
|
});
|
});
|
},
|
|
handleFilter() {
|
this.listQuery.page = 1;
|
this.fetchList();
|
},
|
async fetchList() {
|
this.listLoading = true;
|
|
const res = await fetchList(this.listQuery);
|
if (res.code == 200) {
|
this.userList = res.data.list;
|
this.total = res.data.total || 0;
|
}
|
|
this.listLoading = false;
|
},
|
handleAdd() {
|
this.form = {
|
id: "",
|
username: '',
|
password: '',
|
name: '',
|
roleid: '',
|
phone: '',
|
email: '',
|
teacherSex: '',
|
cardId: '',
|
workingTime: '',
|
education: '',
|
logoUrl: "",
|
logoName: "",
|
personalProfile: '',
|
remark: '',
|
};
|
this.disabled = false
|
this.fileUrl = "",
|
this.fileName = "",
|
this.dialogState = 1;
|
this.dialogVisible = true;
|
},
|
async handleEdit(index, row) {
|
console.log(row)
|
this.disabled = false
|
this.dialogState = 2;
|
//this.form = deepClone(row);
|
|
const res = await getUserById(row.userId);
|
if (res.code == 200) {
|
this.form = res.data
|
this.form.password = "*********";
|
this.fileUrl = this.form.photoUrl
|
this.fileName = this.form.photoName
|
this.dialogVisible = true;
|
}
|
},
|
async handleView(index, row) {
|
this.disabled = true
|
|
this.dialogState = 3;
|
this.dialogVisible = true
|
this.form = deepClone(row);
|
const res = await getUserById(row.userId);
|
if (res) {
|
console.log(res.data.phonenumber);
|
this.form = res.data
|
console.log(this.form)
|
this.fileUrl = this.form.photoUrl
|
this.fileName = this.form.photoName
|
this.dialogVisible = true;
|
}
|
},
|
handleDelete(index, row) {
|
console.log(index, row);
|
const _this = this;
|
this.$confirm(this.$t('message.delete_confirm'), this.$t('common.tip'), {
|
confirmButtonText: this.$t('common.ok'),
|
cancelButtonText: this.$t('common.cancel'),
|
type: 'warning'
|
})
|
.then(() => {
|
deleteUserById(row.userId).then(res => {
|
if (res.code == 200) {
|
this.$message(this.$t('message.delete_success'), 'success');
|
this.getList();
|
} else {
|
this.$message(res.msg, 'error');
|
}
|
});
|
})
|
.catch(error => {
|
});
|
},
|
handleClose(done) {
|
done();
|
},
|
onSubmit() {
|
this.$refs.dialogform.validate(valid => {
|
if (!valid) {
|
this.$message('填写的信息有误，请确认', 'error');
|
return;
|
}
|
//this.form.roleid = this.roleValue;
|
this.form.photoUrl = this.fileUrl
|
this.form.photoName = this.fileName
|
if (this.dialogState === 1) {
|
const data = Object.assign(this.form);
|
addUser(data)
|
.then(res => {
|
if (res.code != 200) {
|
this.$message(res.msg || this.$t('message.add_fail'), 'error');
|
return;
|
}
|
this.$message(this.$t('message.add_success'), 'success');
|
this.getList();
|
this.dialogVisible = false;
|
})
|
.catch(error => {
|
});
|
} else {
|
updateUser(this.form)
|
.then(res => {
|
if (res.code != 200) {
|
this.$message(res.msg || this.$t('message.edit_fail'), 'error');
|
return;
|
}
|
this.$message(this.$t('message.edit_success'), 'success');
|
this.getList();
|
this.dialogVisible = false;
|
})
|
.catch(error => {
|
});
|
}
|
});
|
},
|
uploadSuccess(data) {
|
this.fileUrl = data.fileUrl;
|
this.fileName = data.fileName
|
}
|
}
|
};
|
</script>
|
<style lang='scss' scoped>
|
.select {
|
width: 100%;
|
background-color: white;
|
margin-bottom: 20px;
|
.searchBar{
|
padding: 10px 20px;
|
|
.el-col{
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
|
.filter-container {
|
padding-bottom: 0px;
|
}
|
|
.dialog_form {
|
width: 90%;
|
margin: 0 auto;
|
}
|
|
::v-deep .el-dialog__header {
|
font-weight: bolder;
|
}
|
|
::v-deep .el-dialog {
|
border-radius: 10px
|
}
|
</style>
|
