zgj_jj/salary
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

用户管理

Browse Source
This commit is contained in:
zgj_jj
2022-11-21 14:43:11 +08:00
parent 18d6e4ff83
commit 80d32fe8ac
5 changed files with 250 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/system/user.js
+38 -21
View File
@@ -9,32 +9,49 @@
import request from '@/utils/request';
// 用户管理 aos/auth/api/user/list
export function getUserList(data) {
return request({
url: '/aos/auth/api/user/list',
method: 'post',
data
});
return request({
url: '/aos/auth/api/user/list',
method: 'post',
data
});
}
// 新增用户 aos/auth/api/user/add
export function addUser(data) {
return request({
url: '/aos/auth/api/user/add',
method: 'post',
data
});
return request({
url: '/aos/auth/api/user/add',
method: 'post',
data
});
}
// 更新用户 aos/auth/api/user/update
export function updateUser(data) {
return request({
url: '/aos/auth/api/user/update',
method: 'put',
data
});
return request({
url: '/aos/auth/api/user/update',
method: 'put',
data
});
}
// 删除 aos/auth/api/user/delete
export function deleteUser(id) {
return request({
url: `/aos/auth/api/user/delete`,
method: 'delete'
})
}
export function deleteUser(data) {
return request({
url: `/aos/auth/api/user/delete`,
method: 'delete',
data
});
}
// 重置密码 aos/auth/api/user/restPassword
export function restPassword(data) {
return request({
url: '/aos/auth/api/user/restPassword',
method: 'post',
data
});
}
// 用户管理-角色列表 aos/auth/api/role/role/info/list
export function selectRoleList() {
return request({
url: '/aos/auth/api/role/role/info/list',
method: 'get',
});
}
src/layout/index.vue
+6 -13
View File
@@ -8,26 +8,20 @@
<tags-view v-if="needTagsView" />
</div>
<app-main />
<right-panel v-if="showSettings">
<settings />
</right-panel>
</div>
</div>
</template>
<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import { AppMain, Navbar, Sidebar, TagsView } from './components';
import ResizeMixin from './mixin/ResizeHandler';
import { mapState } from 'vuex';
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
RightPanel,
Settings,
Sidebar,
TagsView
},
@@ -36,7 +30,6 @@ export default {
...mapState({
sidebar: state => state.app.sidebar,
device: state => state.app.device,
showSettings: state => state.settings.showSettings,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
@@ -46,15 +39,15 @@ export default {
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
};
}
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false });
}
}
}
};
</script>
<style lang="scss" scoped>
src/main.js
+4 -7
View File
@@ -1,6 +1,6 @@
/*
* @Descripttion:
* @version:
* @Descripttion:
* @version:
* @Author: zgj
* @Date: 2022-11-19 09:11:29
* @LastEditors: your name
@@ -14,8 +14,6 @@ import 'normalize.css/normalize.css'; // a modern alternative to CSS resets
import Element from 'element-ui';
import './styles/element-variables.scss';
import enLang from 'element-ui/lib/locale/lang/en';// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
import '@/styles/index.scss'; // global css
import App from './App';
@@ -28,9 +26,9 @@ import './utils/error-log'; // error log
// 分页组件
import Pagination from '@/components/Pagination';
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
import RightToolbar from '@/components/RightToolbar';
import * as filters from './filters'; // global filters
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/manager";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from '@/utils/manager';
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
@@ -55,7 +53,6 @@ Vue.prototype.selectDictLabels = selectDictLabels;
Vue.prototype.handleTree = handleTree;
Vue.use(Element, {
size: Cookies.get('size') || 'medium', // set element-ui default size
locale: enLang // 如果使用中文，无需设置，请删除
});
// register global utility filters
src/styles/index.scss
+4
View File
@@ -189,3 +189,7 @@ aside {
.multiselect--active {
z-index: 1000 !important;
}
.pagination-container .el-pagination {
right: 0;
position: absolute;
}
src/views/system/user/index.vue
+198 -236
View File
@@ -1,22 +1,32 @@
<template>
<div class="app-container">
<el-form
:model="queryParams"
v-show="showSearch"
ref="queryForm"
:model="queryParams"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="name">
<el-form-item label="用户账号" prop="account">
<el-input
v-model="queryParams.name"
v-model="queryParams.account"
placeholder="请输入用户账号"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<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="phone">
<el-input
v-model="queryParams.phone"
@@ -27,12 +37,7 @@
/>
</el-form-item>
<el-form-item label="状态" prop="state">
<el-select
v-model="queryParams.state"
placeholder="用户状态"
clearable
style="width: 240px"
>
<el-select v-model="queryParams.state" placeholder="用户状态" clearable style="width: 240px">
<el-option
v-for="dict in statusOpt"
:key="dict.value"
@@ -51,31 +56,24 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item> -->
</el-form-item>-->
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
<el-button
type="primary"
type="warning"
plain
icon="el-icon-plus"
icon="el-icon-key"
size="mini"
@click="handleAdd"
>新增</el-button
>
:disabled="multiple"
@click="handleInitPassword"
>重置密码</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@@ -85,69 +83,46 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
>删除</el-button>
</el-col>
<right-toolbar
style="text-align: right; float: right"
:showSearch.sync="showSearch"
:show-search.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column key="account" label="用户账户" align="account" prop="account" />
<el-table-column
label="用户账户"
align="account"
key="account"
prop="account"
/>
<el-table-column
key="userName"
label="用户名称"
align="center"
key="name"
prop="name"
prop="userName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码"
align="center"
key="phone"
prop="phone"
/>
<el-table-column
label="邮箱"
align="center"
key="email"
prop="email"
width="280"
/>
<el-table-column
label="操作"
align="center"
width="160"
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)"
>修改</el-button
>
<el-table-column key="phone" label="手机号码" align="center" prop="phone" />
<el-table-column key="email" label="邮箱" align="center" prop="email" width="280" />
<el-table-column label="创建时间" align="center" prop="createdAt">
<template slot-scope="scope">
<span>{{ scope.row.createdAt }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updatedAt">
<template slot-scope="scope">
<span>{{ scope.row.updatedAt }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
<template v-if="scope.row.userId !== 1" slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
>删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -165,51 +140,31 @@
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户名" prop="name">
<el-input
v-model="form.name"
placeholder="请输入用户名"
maxlength="30"
/>
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户账户" prop="account">
<el-input
v-model="form.account"
placeholder="请输入用户账户"
maxlength="30"
/>
<el-input v-model="form.account" placeholder="请输入用户账户" maxlength="30" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phone">
<el-input
v-model="form.phone"
placeholder="请输入手机号码"
maxlength="11"
/>
<el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
/>
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户密码"
prop="password"
>
<el-form-item v-if="form.id" label="用户密码" prop="password">
<el-input
v-model="form.password"
placeholder="请输入用户密码"
@@ -221,17 +176,12 @@
</el-col>
<el-col :span="12">
<el-form-item label="角色">
<el-select
v-model="form.roleIds"
multiple
placeholder="请选择角色"
>
<el-select v-model="form.hasRoleList" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:key="item.id"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
@@ -239,14 +189,13 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-form-item v-if="form.id" label="状态">
<el-radio-group v-model="form.state">
<el-radio
v-for="dict in statusOpt"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@@ -261,14 +210,18 @@
</template>
<script>
import { getUserList, addUser,deleteUser } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
getUserList,
addUser,
updateUser,
deleteUser,
restPassword,
selectRoleList
} from '@/api/system/user';
export default {
name: "User",
components: { Treeselect },
name: 'User',
components: {},
data() {
return {
// 遮罩层
@@ -286,19 +239,13 @@ export default {
// 用户表格数据
userList: [],
// 弹出层标题
title: "",
// 部门树选项
deptOptions: undefined,
title: '',
// 是否显示弹出层
open: false,
// 部门名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
@@ -306,112 +253,84 @@ export default {
statusOpt: [
{
value: 0,
label: "正常",
label: '停用'
},
{
value: 1,
label: "停用",
},
label: '启用'
}
],
sexOpt: [],
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",
children: 'children',
label: 'label'
},
// 查询参数
queryParams: {
pages: 1,
size: 10,
name: undefined,
userName: undefined,
phone: undefined,
state: undefined,
state: undefined
},
// 表单校验
rules: {
name: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
userName: [
{ required: true, message: '用户名称不能为空', trigger: 'blur' },
{
min: 2,
max: 20,
message: "用户名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
message: '用户名称长度必须介于 2 和 20 之间',
trigger: 'blur'
}
],
account: [
{ required: true, message: '用户账户不能为空', trigger: 'blur' }
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "用户密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
message: '用户密码长度必须介于 5 和 20 之间',
trigger: 'blur'
}
],
email: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
],
hasRoleList: [
{ required: true, message: '角色不能为空', trigger: 'change' }
],
state: [{ required: true, message: '状态不能为空', trigger: 'change' }],
phone: [
{
required: true,
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
}
};
},
watch: {},
created() {
this.getList();
// this.getDeptTree();
// this.getConfigKey("sys.user.initPassword").then((response) => {
// this.initPassword = response.msg;
// });
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true;
getUserList(this.queryParams).then((response) => {
debugger;
getUserList(this.queryParams).then(response => {
this.userList = response.data.records;
this.total = 1; // response.data.total
this.total = response.data.total;
this.loading = false;
});
},
// 用户状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal
.confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
.then(function () {
return changeUserStatus(row.userId, row.status);
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
@@ -420,20 +339,25 @@ export default {
// 表单重置
reset() {
this.form = {
userId: undefined,
deptId: undefined,
id: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
phone: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: [],
state: 1,
hasRoleList: []
};
this.resetForm("form");
this.resetForm('form');
},
// 获取角色列表
getRoleList() {
selectRoleList()
.then(res => {
if (res.code === '000000') {
this.roleOptions = res.data;
}
})
.catch();
},
/** 搜索按钮操作 */
handleQuery() {
@@ -443,78 +367,116 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.resetForm('queryForm');
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.ids = selection.map(item => item.id);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
debugger;
this.reset();
this.title = '添加用户';
this.getRoleList();
this.open = true;
this.title = "添加用户";
// this.form.password = this.initPassword;
// getUser().then((response) => {
// this.postOptions = response.posts;
// this.roleOptions = response.roles;
// });
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
// getUser(userId).then((response) => {
// this.form = response.data;
// this.postOptions = response.posts;
// this.roleOptions = response.roles;
// this.$set(this.form, "postIds", response.postIds);
// this.$set(this.form, "roleIds", response.roleIds);
// this.open = true;
// this.title = "修改用户";
// this.form.password = "";
// });
this.form = Object.assign({}, row);
this.getRoleList();
this.title = '修改用户';
this.open = true;
},
// 重置密码
handleInitPassword() {
const userIds = this.ids;
this.$confirm('是否确认重置密码, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
restPassword(userIds)
.then(res => {
if (res.code === '000000') {
this.$message({
type: 'success',
message: '重置密码成功!'
});
this.getList();
} else {
this.$message({
type: 'danger',
message: '重置密码失败!'
});
}
})
.catch();
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.id || this.ids;
this.$modal
.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
.then(function () {
return deleteUser(userIds);
})
const userIds = row && row.id ? [row.id] : this.ids;
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.getList();
this.$message({
message: "删除成功",
type: "success",
});
deleteUser(userIds)
.then(res => {
if (res.code === '000000') {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
} else {
this.$message({
type: 'danger',
message: '删除失败!'
});
}
})
.catch();
})
.catch(() => {});
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 新增用户
submitForm() {
this.$refs["form"].validate((valid) => {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
updateUser(this.form).then((response) => {
updateUser(this.form).then(response => {
this.$message({
message: "修改成功",
type: "success",
message: '修改成功',
type: 'success'
});
this.open = false;
this.getList();
});
} else {
addUser(this.form).then((response) => {
addUser(this.form).then(response => {
this.$message({
message: "新增成功",
type: "success",
message: '新增成功',
type: 'success'
});
this.open = false;
this.getList();
@@ -522,7 +484,7 @@ export default {
}
}
});
},
},
}
}
};
</script>
</script>