<template>
|
<div class="userInfo_box">
|
<My-bread
|
:list="[
|
`${$t('userManage.userManage')}`,
|
`${$t('userManage.userInfoManage')}`,
|
]"
|
></My-bread>
|
<el-divider />
|
<div class="inquire">
|
<el-form ref="ruleForm" :model="form" :inline="true">
|
<el-form-item :label="$t('operatManage.ELM.username')" prop="name">
|
<el-input
|
v-model="form.name"
|
:placeholder="$t('operatManage.ELM.usernameInfo')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label="$t('userManage.userInfoObj.depName')"
|
prop="depName"
|
>
|
<el-input
|
v-model="form.depName"
|
:placeholder="$t('common.pleaseInput')"
|
/> </el-form-item
|
><el-form-item>
|
<el-button @click="onSubmit"
|
><i class="el-icon-search"></i> {{
|
$t("operatManage.ELM.search")
|
}}</el-button
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="resetForm('ruleForm')"
|
><i class="el-icon-delete"></i> {{
|
$t("operatManage.ELM.reset")
|
}}</el-button
|
>
|
</el-form-item>
|
<br />
|
<el-form-item>
|
<el-button type="success" size="small" @click="showAddDialog"
|
><i class="el-icon-plus"></i> {{
|
$t("common.append")
|
}}</el-button
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="danger" size="small" @click="showAddDialog"
|
><i class="el-icon-delete"></i> {{
|
$t("common.delete")
|
}}</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_box">
|
<el-table
|
:data="tableData"
|
stripe
|
border
|
style="width: 100%"
|
height="99%"
|
>
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('common.index')"
|
width="70px"
|
fixed
|
/>
|
<el-table-column
|
align="center"
|
prop="uname"
|
width="150px"
|
:label="$t('userManage.userInfoObj.uname')"
|
fixed
|
/>
|
|
<el-table-column
|
align="center"
|
prop="sex"
|
width="80px"
|
:label="$t('userManage.userInfoObj.sex')"
|
>
|
<template slot-scope="scope">
|
<span v-if="scope.row.sex == 1"> 男 </span>
|
<span v-else-if="scope.row.sex == 0">女</span>
|
<span v-else>未知</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="natives"
|
width="100px"
|
:label="$t('userManage.userInfoObj.natives')"
|
/>
|
<el-table-column
|
align="center"
|
prop="depName"
|
width="200px"
|
:label="$t('userManage.userInfoObj.depName')"
|
/>
|
<el-table-column
|
align="center"
|
prop="idcard"
|
width="200px"
|
:label="$t('userManage.userInfoObj.idcard')"
|
/><el-table-column
|
align="center"
|
prop="job"
|
width="200px"
|
:label="$t('userManage.userInfoObj.job')"
|
/>
|
<el-table-column
|
align="center"
|
prop="edu"
|
width="200px"
|
:label="$t('userManage.userInfoObj.edu')"
|
/>
|
<el-table-column
|
align="center"
|
prop="addr"
|
width="200px"
|
:label="$t('userManage.userInfoObj.addr')"
|
/>
|
<el-table-column
|
align="center"
|
prop="email"
|
width="200px"
|
:label="$t('userManage.userInfoObj.email')"
|
/>
|
<el-table-column
|
align="center"
|
prop="contact"
|
width="200px"
|
:label="$t('userManage.userInfoObj.contact')"
|
/>
|
|
<el-table-column
|
align="center"
|
prop="largeModuleName"
|
:label="$t('userManage.userInfoObj.status')"
|
>
|
<template slot-scope="scope">
|
<el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
|
<el-tag v-if="scope.row.status == 1" type="info">禁用</el-tag>
|
<el-tag v-if="scope.row.status == 2" type="warning">删除</el-tag>
|
<el-tag v-if="scope.row.status == 3">申请</el-tag>
|
<el-tag v-if="scope.row.status == 4" type="danger">拒批</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="bak"
|
width="200px"
|
:label="$t('userManage.userInfoObj.bak')"
|
/>
|
<el-table-column
|
:label="$t('common.operate')"
|
width="200px"
|
fixed="right"
|
>
|
<template slot-scope="scope">
|
<!-- <el-button type="primary" size="small">修改</el-button> -->
|
|
<el-button
|
type="warning"
|
@click="editInfo(scope.row)"
|
size="mini"
|
>{{ $t("common.edit") }}</el-button
|
>
|
<el-button type="danger" @click="editPwd(scope.row)" size="mini">
|
重置密码
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 25px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="count"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
<el-dialog
|
width="500px"
|
top="7vh"
|
title="修改信息"
|
:visible.sync="dialogFormVisible"
|
:before-close="handleClose"
|
>
|
<el-form :model="ruleForm" ref="ruleForm" :rules="rules">
|
<el-form-item prop="name" label="用户名" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.uname" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="性别" :label-width="formLabelWidth">
|
<!-- <el-input v-model="ruleForm.sex" autocomplete="off"></el-input> -->
|
<el-select v-model="ruleForm.sex" clearable placeholder="请选择">
|
<el-option
|
v-for="item in sexOpt"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="籍贯" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.natives" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="单位名称" :label-width="formLabelWidth">
|
<el-input
|
v-model="ruleForm.depName"
|
disabled
|
autocomplete="off"
|
></el-input>
|
|
<el-button type="primary" size="mini" @click="showDep"
|
>选择</el-button
|
>
|
<el-card v-if="showDepTree" shadow="hover" class="box-card">
|
<div slot="header" class="clearfix">
|
<span>请选择部门</span>
|
<el-button
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="sendNode"
|
>确定</el-button
|
>
|
</div>
|
<div class="depTreeBox">
|
<el-tree
|
ref="tree"
|
:props="defaultProps"
|
node-key="id"
|
:data="depList"
|
:expand-on-click-node="false"
|
:default-expand-all="true"
|
@node-click="handleNodeClick"
|
>
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span>{{ node.label }}</span>
|
</span>
|
</el-tree>
|
</div>
|
</el-card>
|
</el-form-item>
|
<el-form-item label="证件号" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.idcard" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="工作" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.job" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="教育" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.edu" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="地址" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.addr" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="电子邮件" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.email" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="联系方式" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.contact" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="状态" :label-width="formLabelWidth">
|
<el-select v-model="ruleForm.status" clearable placeholder="请选择">
|
<el-option
|
v-for="item in statusOpt"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注" :label-width="formLabelWidth">
|
<el-input v-model="ruleForm.bak" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="medium" @click="cancelEdit('ruleForm')"
|
>取消</el-button
|
>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="sendEdit('ruleForm')"
|
v-loading.fullscreen.lock="fullscreenLoading"
|
>提交</el-button
|
>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
import {
|
queryDepTree,
|
queryPageUser,
|
insertUser,
|
deleteUser,
|
updateUser,
|
updateUserPwd,
|
} from "../../api/api";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
data() {
|
let validName = (rule, value, callback) => {
|
if (value === "" || value === null || value === undefined) {
|
return callback(new Error("名称不能为空"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
currentPage: 1,
|
defaultProps: {
|
children: "children",
|
label: "name",
|
},
|
form: {
|
username: "",
|
// userStatus: "all",
|
depName: "",
|
},
|
showDepTree: true,
|
tableData: [],
|
fullscreenLoading: false,
|
newDep: {
|
name: "",
|
id: null,
|
},
|
count: 0,
|
formLabelWidth: "100px",
|
dialogFormVisible: false,
|
ruleForm: {
|
uname: "",
|
pwd: "",
|
sex: "",
|
natives: "",
|
depName: "",
|
idcard: "",
|
job: "",
|
edu: "",
|
addr: "",
|
email: "",
|
contact: "",
|
status: "",
|
bak: "",
|
depid: null,
|
},
|
statusOpt: [
|
{
|
value: 0,
|
label: "正常",
|
},
|
{
|
value: 1,
|
label: "禁用",
|
},
|
{
|
value: 2,
|
label: "删除",
|
},
|
{
|
value: 3,
|
label: "申请",
|
},
|
{
|
value: 4,
|
label: "拒批",
|
},
|
],
|
depList: [],
|
sexOpt: [
|
{
|
value: 0,
|
label: "女",
|
},
|
{
|
value: 1,
|
label: "男",
|
},
|
{
|
value: -1,
|
label: "未知",
|
},
|
],
|
rules: {
|
name: [{ validator: validName, trigger: "blur" }],
|
},
|
};
|
},
|
methods: {
|
getUserInfo(params) {
|
// queryMaxId().then((res) => {
|
// this.id = res.data;
|
// });
|
queryDepTree().then((res) => {
|
if (res.code == 200) {
|
this.depList = this.treeData(res.result);
|
} else {
|
this.$notify.error({
|
title: res.code,
|
message: "无法获取单位列表",
|
});
|
}
|
});
|
queryPageUser({
|
pageIndex: 1,
|
pageSize: 10,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.tableData = res.result;
|
this.count = res.count;
|
} else {
|
console.log("接口报错");
|
}
|
});
|
},
|
treeData(source) {
|
let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
|
return father.pid == 0; // 返回一级菜单
|
});
|
},
|
showDep() {
|
this.showDepTree = true;
|
},
|
handleNodeClick(data) {
|
this.newDep.name = data.name;
|
this.newDep.id = data.id;
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
onSubmit() {
|
console.log("submit!");
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
editInfo(row) {
|
delete row.updateTime;
|
delete row.updateUser;
|
this.ruleForm = row;
|
this.dialogFormVisible = true;
|
},
|
editPwd(row) {
|
console.log(row.id + "---" + row.pwd);
|
},
|
sendNode() {
|
this.showDepTree = false;
|
this.ruleForm.depName = this.newDep.name;
|
this.ruleForm.depid = this.newDep.id;
|
},
|
handleClose(done) {
|
this.$confirm("确认关闭？")
|
.then((_) => {
|
done();
|
})
|
.catch((_) => {});
|
},
|
sendEdit(){
|
|
},
|
showAddDialog() {
|
this.dialogTableVisible = true;
|
},
|
},
|
mounted() {
|
this.getUserInfo(1, 10);
|
},
|
};
|
</script>
|
<style>
|
/deep/ .el-table__fixed-right {
|
height: 100% !important;
|
}
|
</style>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.userInfo_box {
|
background: rgb(240, 242, 245);
|
border-radius: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
.el-input {
|
width: 300px;
|
}
|
.inquire {
|
height: 110px;
|
overflow: auto;
|
padding: 8px;
|
margin-top: 20px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid rgb(202, 201, 204);
|
margin-bottom: 20px;
|
.el-form-item {
|
margin: 5px;
|
}
|
}
|
.table_box {
|
height: 70%;
|
padding: 10px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid rgb(202, 201, 204);
|
}
|
.el-dialog {
|
.el-form-item {
|
margin-bottom: 12px;
|
width: 100%;
|
}
|
.box-card {
|
position: absolute;
|
z-index: 100;
|
top: -243px;
|
left: 450px;
|
height: 800px;
|
width: 350px;
|
/deep/ .el-card__body {
|
height: 85%;
|
overflow: auto;
|
}
|
|
// background-color: #bfa;
|
}
|
.depTreeBox {
|
overflow: hidden;
|
|
.el-tree {
|
background: transparent;
|
font-size: 15px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #000000;
|
/deep/ .el-tree-node {
|
padding-top: 10px;
|
// padding-bottom: 10px;
|
}
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background-color: #b9b9b9;
|
}
|
/deep/ .el-tree-node__content:hover {
|
background-color: rgb(153, 153, 153);
|
}
|
.btnBox {
|
margin: 0 10px 0 5px;
|
.el-button + .el-button {
|
margin-left: 5px;
|
}
|
}
|
}
|
}
|
}
|
/deep/ .el-dialog__body {
|
padding: 30px 0 0 0;
|
}
|
}
|
|
// /deep/ .el-card__header {
|
// padding: 10px 10px !important;
|
// }
|
// /deep/ .el-dialog {
|
// margin-top: 2vh !important;
|
// }
|
// /deep/ .el-dialog__wrapper {
|
// overflow: hidden !important;
|
// }
|
</style>
|
