Skip to content

S
soss
Commit 5203f7a4 by lixiaomin
Options

修改用户

parent a7a6c2a8
Showing with 94 additions and 446 deletions
src/views/system/user/index.vue
......@@ -2,10 +2,7 @@
<div class="app-container">
<el-row :gutter="20">
<el-col :span="24" :xs="24">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
<el-form :model="queryParams" ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
......@@ -13,16 +10,7 @@
<el-form-item label="人员名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入人员名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
placeholder="请输入姓名、手机号"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
......@@ -36,24 +24,14 @@
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
v-for="dict in statusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
......@@ -80,120 +58,22 @@
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:user:import']"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column
label="人员编号"
align="center"
key="userId"
prop="userId"
v-if="columns[0].visible"
/>
<el-table-column
label="人员名称"
align="center"
key="userName"
prop="userName"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="人员昵称"
align="center"
key="nickName"
prop="nickName"
v-if="columns[2].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码"
align="center"
key="phonenumber"
prop="phonenumber"
v-if="columns[4].visible"
width="120"
/>
<el-table-column
label="状态"
align="center"
key="status"
v-if="columns[5].visible"
>
<el-table v-loading="loading" :data="userList">
<el-table-column label="姓名" align="center" prop="nickName">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
<a @click="handleUpdate(scope.row)" style="color: blue">{{ scope.row.nickName }}</a>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
v-if="columns[6].visible"
width="160"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
<el-table-column label="手机号" align="center" prop="phonenumber"/>
<el-table-column label="角色" align="center" prop=""/>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="状态" align="center" prop="status">
<template scope="scope">
<span v-if="scope.row.status=='0'">启用</span>
<span v-if="scope.row.status=='1'">停用</span>
</template>
</el-table-column>
<el-table-column
......@@ -203,49 +83,15 @@
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
<el-dropdown
size="mini"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['system:user:resetPwd', 'system:user:edit']"
>
<span class="el-dropdown-link">
<i class="el-icon-d-arrow-right el-icon--right"></i>更多
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
command="handleResetPwd"
icon="el-icon-key"
v-hasPermi="['system:user:resetPwd']"
>重置密码</el-dropdown-item
>
<el-dropdown-item
command="handleAuthRole"
icon="el-icon-circle-check"
v-hasPermi="['system:user:edit']"
>分配角色</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']">删除</el-button >
<el-button v-show="scope.row.status == '1'" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'0')"
v-hasPermi="['system:material:edit']">启用</el-button>
<el-button v-show="scope.row.status == '0'" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'1')"
v-hasPermi="['system:material:edit']">停用</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
......@@ -255,122 +101,51 @@
/>
</el-col>
</el-row>
<!-- 添加或修改人员配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="人员姓名" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入人员姓名"
maxlength="30"
/>
<el-form-item label="姓名" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入人员姓名" maxlength="30" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="form.phonenumber"
placeholder="请输入手机号码"
maxlength="11"
/>
<el-form-item label="手机号" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号" maxlength="11"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
/>
<el-form-item label="角色" prop="roleIds">
<el-select v-model="form.roleIds" multiple placeholder="请选择" clearable>
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="邮箱" >
<el-input v-model="form.email" placeholder="请输入邮箱" mmaxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" ></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 人员导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的人员数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listUser,
getUser,
delUser,
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
} from "@/api/system/user";
import {listUser,getUser,delUser,addUser,updateUser,resetUserPwd,changeUserStatus,} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Second from '../../../components/Crontab/second.vue';
export default {
name: "User",
dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect },
// components: { TreeselectSecond },
data() {
return {
// 遮罩层
......@@ -393,32 +168,11 @@ export default {
open: false,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label",
},
// 人员导入参数
upload: {
// 是否显示弹出层（人员导入）
open: false,
// 弹出层标题（人员导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的人员数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData",
form: {
roleIds: []
},
// 查询参数
queryParams: {
......@@ -426,57 +180,24 @@ export default {
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
status: undefined
},
// 列信息
columns: [
{ key: 0, label: `人员编号`, visible: true },
{ key: 1, label: `人员名称`, visible: true },
{ key: 2, label: `人员昵称`, visible: true },
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true },
],
// 表单校验
rules: {
userName: [
{ required: true, message: "人员名称不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "人员名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
],
nickName: [
{ required: true, message: "人员昵称不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "人员密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "人员密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
{ required: true, message: "姓名不能为空", trigger: "blur" },
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
roleIds: [
{ required: true, message: "角色不能为空", trigger: "blur" },
],
phonenumber: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
{required: true,pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: "请输入正确的手机号码",trigger: "blur"}
],
},
statusList:[
{value:0,label:"启用"},
{value:1,label:"停用"}
]
};
},
created() {
......@@ -489,28 +210,37 @@ export default {
/** 查询人员列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
listUser(this.queryParams).then((response) => {
if(response.code=="200"){
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
});
},
// 人员状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
/** 启用、禁用按钮操作 */
handleStatus(row,tag) {
let mess="";
let sta="";
if(tag=='0'){
mess="启用";
sta="0";
}else if(tag=='1'){
mess="停用";
sta="1";
}
this.$modal
.confirm('确认要"' + text + '""' + row.userName + '"人员吗？')
.confirm('是否确认' + mess + '该数据项？')
.then(function () {
return changeUserStatus(row.userId, row.status);
return updateUser({id:row.userId,status:sta});
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
.then((response) => {
if(response.code="200"){
this.getList();
this.$modal.msgSuccess('' + mess + '成功');
}
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
.catch(() => { });
},
// 取消按钮
cancel() {
......@@ -520,17 +250,14 @@ export default {
// 表单重置
reset() {
this.form = {
userId: undefined,
deptId: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
userId: null,
userName: null,
nickName: null,
password: null,
phonenumber: null,
email: null,
status: "0",
remark: undefined,
postIds: [],
remark: null,
roleIds: [],
};
this.resetForm("form");
......@@ -542,38 +269,20 @@ export default {
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleResetPwd":
this.handleResetPwd(row);
break;
case "handleAuthRole":
this.handleAuthRole(row);
break;
default:
break;
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
getUser().then((response) => {
this.postOptions = response.posts;
if(response.code=="200"){
this.roleOptions = response.roles;
this.open = true;
this.title = "添加人员";
this.form.password = this.initPassword;
}
});
},
/** 修改按钮操作 */
......@@ -581,52 +290,36 @@ export default {
this.reset();
const userId = row.userId || this.ids;
getUser(userId).then((response) => {
if(response.code=="200"){
this.form = response.data;
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.form.postIds = response.postIds;
this.form.roleIds = response.roleIds;
this.open = true;
this.title = "修改人员";
this.form.password = "";
}
});
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "人员密码长度必须介于 5 和 20 之间",
})
.then(({ value }) => {
resetUserPwd(row.userId, value).then((response) => {
this.$modal.msgSuccess("修改成功，新密码是：" + value);
});
})
.catch(() => {});
},
/** 分配角色操作 */
handleAuthRole: function (row) {
const userId = row.userId;
this.$router.push("/system/user-auth/role/" + userId);
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.userId != undefined) {
this.form.userName=this.form.phonenumber;
if (this.form.userId != null) {
updateUser(this.form).then((response) => {
if(response.code=="200"){
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addUser(this.form).then((response) => {
if(response.code=="200"){
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
......@@ -636,7 +329,7 @@ export default {
handleDelete(row) {
const userIds = row.userId || this.ids;
this.$modal
.confirm('是否确认删除人员编号为"' + userIds + '"的数据项？')
.confirm('是否确认删除人员编号为"' + row.nickName + '"的数据项？')
.then(function () {
return delUser(userIds);
})
......@@ -645,52 +338,7 @@ export default {
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/user/export",
{
...this.queryParams,
},
`user_${new Date().getTime()}.xlsx`
);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "人员导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"system/user/importTemplate",
{},
`user_template_${new Date().getTime()}.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
}
},
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment