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 @@ ...@@ -2,10 +2,7 @@
<div class="app-container"> <div class="app-container">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24" :xs="24"> <el-col :span="24" :xs="24">
<el-form <el-form :model="queryParams" ref="queryForm"
:model="queryParams"
ref="queryForm"
size="small"
:inline="true" :inline="true"
v-show="showSearch" v-show="showSearch"
label-width="68px" label-width="68px"
...@@ -13,16 +10,7 @@ ...@@ -13,16 +10,7 @@
<el-form-item label="人员名称" prop="userName"> <el-form-item label="人员名称" prop="userName">
<el-input <el-input
v-model="queryParams.userName" v-model="queryParams.userName"
placeholder="请输入人员名称" 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="请输入手机号码"
clearable clearable
style="width: 240px" style="width: 240px"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
...@@ -36,24 +24,14 @@ ...@@ -36,24 +24,14 @@
style="width: 240px" style="width: 240px"
> >
<el-option <el-option
v-for="dict in dict.type.sys_normal_disable" v-for="dict in statusList"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="dict.value" :value="dict.value"
/> />
</el-select> </el-select>
</el-form-item> </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-form-item>
<el-button <el-button
type="primary" type="primary"
...@@ -80,120 +58,22 @@ ...@@ -80,120 +58,22 @@
>新增</el-button >新增</el-button
> >
</el-col> </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-row>
<el-table <el-table v-loading="loading" :data="userList">
v-loading="loading" <el-table-column label="姓名" align="center" prop="nickName">
: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"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <a @click="handleUpdate(scope.row)" style="color: blue">{{ scope.row.nickName }}</a>
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="手机号" align="center" prop="phonenumber"/>
label="创建时间" <el-table-column label="角色" align="center" prop=""/>
align="center" <el-table-column label="备注" align="center" prop="remark"/>
prop="createTime" <el-table-column label="状态" align="center" prop="status">
v-if="columns[6].visible" <template scope="scope">
width="160" <span v-if="scope.row.status=='0'">启用</span>
> <span v-if="scope.row.status=='1'">停用</span>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
...@@ -203,49 +83,15 @@ ...@@ -203,49 +83,15 @@
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
> >
<template slot-scope="scope" v-if="scope.row.userId !== 1"> <template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-button <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
size="mini" v-hasPermi="['system:user:remove']">删除</el-button >
type="text" <el-button v-show="scope.row.status == '1'" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'0')"
icon="el-icon-edit" v-hasPermi="['system:material:edit']">启用</el-button>
@click="handleUpdate(scope.row)" <el-button v-show="scope.row.status == '0'" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'1')"
v-hasPermi="['system:user:edit']" v-hasPermi="['system:material:edit']">停用</el-button>
>修改</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>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination
v-show="total > 0" v-show="total > 0"
:total="total" :total="total"
...@@ -255,122 +101,51 @@ ...@@ -255,122 +101,51 @@
/> />
</el-col> </el-col>
</el-row> </el-row>
<!-- 添加或修改人员配置对话框 --> <!-- 添加或修改人员配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row> <el-form-item label="姓名" prop="nickName">
<el-col :span="24"> <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-form-item>
</el-col> <el-form-item label="手机号" prop="phonenumber">
</el-row> <el-input v-model="form.phonenumber" placeholder="请输入手机号" maxlength="11"/>
<el-row>
<el-col :span="24">
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="form.phonenumber"
placeholder="请输入手机号码"
maxlength="11"
/>
</el-form-item> </el-form-item>
</el-col> <el-form-item label="角色" prop="roleIds">
<el-col :span="24"> <el-select v-model="form.roleIds" multiple placeholder="请选择" clearable>
<el-form-item label="邮箱" prop="email"> <el-option
<el-input v-for="item in roleOptions"
v-model="form.email" :key="item.roleId"
placeholder="请输入邮箱" :label="item.roleName"
maxlength="50" :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-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注"> <el-form-item label="备注">
<el-input <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" ></el-input>
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
</el-form-item> </el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { import {listUser,getUser,delUser,addUser,updateUser,resetUserPwd,changeUserStatus,} from "@/api/system/user";
listUser,
getUser,
delUser,
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
} from "@/api/system/user";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept"; import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Second from '../../../components/Crontab/second.vue';
export default { export default {
name: "User", name: "User",
dicts: ["sys_normal_disable", "sys_user_sex"], dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect }, // components: { TreeselectSecond },
data() { data() {
return { return {
// 遮罩层 // 遮罩层
...@@ -393,32 +168,11 @@ export default { ...@@ -393,32 +168,11 @@ export default {
open: false, open: false,
// 默认密码 // 默认密码
initPassword: undefined, initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项 // 角色选项
roleOptions: [], roleOptions: [],
// 表单参数 // 表单参数
form: {}, form: {
defaultProps: { roleIds: []
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",
}, },
// 查询参数 // 查询参数
queryParams: { queryParams: {
...@@ -426,57 +180,24 @@ export default { ...@@ -426,57 +180,24 @@ export default {
pageSize: 10, pageSize: 10,
userName: undefined, userName: undefined,
phonenumber: undefined, phonenumber: undefined,
status: undefined, status: undefined
deptId: 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: { rules: {
userName: [
{ required: true, message: "人员名称不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "人员名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
],
nickName: [ nickName: [
{ required: true, message: "人员昵称不能为空", trigger: "blur" }, { required: true, message: "姓名不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "人员密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "人员密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
], ],
email: [ roleIds: [
{ { required: true, message: "角色不能为空", trigger: "blur" },
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
], ],
phonenumber: [ phonenumber: [
{ {required: true,pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: "请输入正确的手机号码",trigger: "blur"}
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
], ],
}, },
statusList:[
{value:0,label:"启用"},
{value:1,label:"停用"}
]
}; };
}, },
created() { created() {
...@@ -489,28 +210,37 @@ export default { ...@@ -489,28 +210,37 @@ export default {
/** 查询人员列表 */ /** 查询人员列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then( listUser(this.queryParams).then((response) => {
(response) => { if(response.code=="200"){
this.userList = response.rows; this.userList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
} }
); });
}, },
// 人员状态修改 /** 启用、禁用按钮操作 */
handleStatusChange(row) { handleStatus(row,tag) {
let text = row.status === "0" ? "启用" : "停用"; let mess="";
let sta="";
if(tag=='0'){
mess="启用";
sta="0";
}else if(tag=='1'){
mess="停用";
sta="1";
}
this.$modal this.$modal
.confirm('确认要"' + text + '""' + row.userName + '"人员吗？') .confirm('是否确认' + mess + '该数据项？')
.then(function () { .then(function () {
return changeUserStatus(row.userId, row.status); return updateUser({id:row.userId,status:sta});
}) })
.then(() => { .then((response) => {
this.$modal.msgSuccess(text + "成功"); if(response.code="200"){
this.getList();
this.$modal.msgSuccess('' + mess + '成功');
}
}) })
.catch(function () { .catch(() => { });
row.status = row.status === "0" ? "1" : "0";
});
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
...@@ -520,17 +250,14 @@ export default { ...@@ -520,17 +250,14 @@ export default {
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
userId: undefined, userId: null,
deptId: undefined, userName: null,
userName: undefined, nickName: null,
nickName: undefined, password: null,
password: undefined, phonenumber: null,
phonenumber: undefined, email: null,
email: undefined,
sex: undefined,
status: "0", status: "0",
remark: undefined, remark: null,
postIds: [],
roleIds: [], roleIds: [],
}; };
this.resetForm("form"); this.resetForm("form");
...@@ -542,38 +269,20 @@ export default { ...@@ -542,38 +269,20 @@ export default {
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.dateRange = [];
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); 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() { handleAdd() {
this.reset(); this.reset();
getUser().then((response) => { getUser().then((response) => {
this.postOptions = response.posts; if(response.code=="200"){
this.roleOptions = response.roles; this.roleOptions = response.roles;
this.open = true; this.open = true;
this.title = "添加人员"; this.title = "添加人员";
this.form.password = this.initPassword; this.form.password = this.initPassword;
}
}); });
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
...@@ -581,52 +290,36 @@ export default { ...@@ -581,52 +290,36 @@ export default {
this.reset(); this.reset();
const userId = row.userId || this.ids; const userId = row.userId || this.ids;
getUser(userId).then((response) => { getUser(userId).then((response) => {
if(response.code=="200"){
this.form = response.data; this.form = response.data;
this.postOptions = response.posts;
this.roleOptions = response.roles; this.roleOptions = response.roles;
this.form.postIds = response.postIds;
this.form.roleIds = response.roleIds; this.form.roleIds = response.roleIds;
this.open = true; this.open = true;
this.title = "修改人员"; this.title = "修改人员";
this.form.password = ""; 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 () { submitForm: function () {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if (this.form.userId != undefined) { this.form.userName=this.form.phonenumber;
if (this.form.userId != null) {
updateUser(this.form).then((response) => { updateUser(this.form).then((response) => {
if(response.code=="200"){
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}
}); });
} else { } else {
addUser(this.form).then((response) => { addUser(this.form).then((response) => {
if(response.code=="200"){
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}
}); });
} }
} }
...@@ -636,7 +329,7 @@ export default { ...@@ -636,7 +329,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const userIds = row.userId || this.ids; const userIds = row.userId || this.ids;
this.$modal this.$modal
.confirm('是否确认删除人员编号为"' + userIds + '"的数据项？') .confirm('是否确认删除人员编号为"' + row.nickName + '"的数据项？')
.then(function () { .then(function () {
return delUser(userIds); return delUser(userIds);
}) })
...@@ -645,52 +338,7 @@ export default { ...@@ -645,52 +338,7 @@ export default {
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}) })
.catch(() => {}); .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> </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