From 0384353ad92d952bb194c52bf8f3abbc1d1b22b3 Mon Sep 17 00:00:00 2001 From: xt12321 <1499410095@qq.com> Date: Sat, 27 Mar 2021 20:26:55 +0800 Subject: [PATCH] =?UTF-8?q?!2=20=E5=8A=9F=E8=83=BD=E5=8F=98=E5=8C=96(?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86)=EF=BC=9A=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=85=B3=E8=81=94=E8=A7=92=E8=89=B2=E5=88=97=EF=BC=9B?= =?UTF-8?q?=20*=20=E5=8A=9F=E8=83=BD=E5=8F=98=E5=8C=96(=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E7=AE=A1=E7=90=86)=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=85=B3?= =?UTF-8?q?=E8=81=94=E8=A7=92=E8=89=B2=E5=88=97=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/vadmin/permission/user/index.vue | 718 +++++++++--------- 1 file changed, 376 insertions(+), 342 deletions(-) diff --git a/dvadmin-ui/src/views/vadmin/permission/user/index.vue b/dvadmin-ui/src/views/vadmin/permission/user/index.vue index 1991185..5c0797e 100755 --- a/dvadmin-ui/src/views/vadmin/permission/user/index.vue +++ b/dvadmin-ui/src/views/vadmin/permission/user/index.vue @@ -91,7 +91,8 @@ size="mini" @click="handleAdd" v-hasPermi="['permission:user:post']" - >新增 + >新增 + 修改 + >修改 + 删除 + >删除 + 导入 + >导入 + 导出 + >导出 + - - - - - - - + + + + + + + + + + - + @@ -173,7 +200,8 @@ icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['permission:user:{id}:put']" - >修改 + >修改 + 删除 + >删除 + 重置 + >重置 + @@ -209,36 +239,36 @@ - + - + - + - + - + - + @@ -262,7 +292,8 @@ v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue" - >{{dict.dictLabel}} + >{{dict.dictLabel}} + @@ -329,7 +360,8 @@ 点击上传
- 是否更新已经存在的用户数据 + + 是否更新已经存在的用户数据 下载模板
提示：仅允许导入“xls”或“xlsx”格式文件！
@@ -354,338 +386,340 @@ listUser, resetUserPwd, updateUser - } from "@/api/vadmin/permission/user"; - import {getToken} from "@/utils/auth"; - import {treeselect} from "@/api/vadmin/permission/dept"; - import Treeselect from "@riophae/vue-treeselect"; - import "@riophae/vue-treeselect/dist/vue-treeselect.css"; + } from '@/api/vadmin/permission/user' + import { getToken } from '@/utils/auth' + import { treeselect } from '@/api/vadmin/permission/dept' + import Treeselect from '@riophae/vue-treeselect' + import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default { - name: "User", - components: { Treeselect }, - data() { - return { - // 遮罩层 - loading: true, - // 选中数组 - ids: [], - // 非单个禁用 - single: true, - // 非多个禁用 - multiple: true, - // 显示搜索条件 - showSearch: true, - // 总条数 - total: 0, - // 用户表格数据 - userList: null, - // 弹出层标题 - title: "", - // 部门树选项 - deptOptions: undefined, - // 是否显示弹出层 - open: false, - // 部门名称 - deptName: undefined, - // 默认密码 - initPassword: undefined, - // 日期范围 - dateRange: [], - // 状态数据字典 - statusOptions: [{dictLabel: '正常', dictValue: true,}, {dictLabel: '停用', dictValue: false,}], - // 性别状态字典 - sexOptions: [], - // 岗位选项 - postOptions: [], - // 角色选项 - roleOptions: [], - // 表单参数 - form: {}, - defaultProps: { - children: "children", - label: "label" - }, - // 用户导入参数 - upload: { - // 是否显示弹出层（用户导入） + name: 'User', + components: { Treeselect }, + data() { + return { + // 遮罩层 + loading: true, + // 选中数组 + ids: [], + // 非单个禁用 + single: true, + // 非多个禁用 + multiple: true, + // 显示搜索条件 + showSearch: true, + // 总条数 + total: 0, + // 用户表格数据 + userList: null, + // 弹出层标题 + title: '', + // 部门树选项 + deptOptions: undefined, + // 是否显示弹出层 open: false, - // 弹出层标题（用户导入） - title: "", - // 是否禁用上传 - isUploading: false, - // 是否更新已经存在的用户数据 - updateSupport: 0, - // 设置上传的请求头部 - headers: { Authorization: "Bearer " + getToken() }, - // 上传的地址 - url: process.env.VUE_APP_BASE_API + "/admin/system/savefile/" - }, - // 查询参数 - queryParams: { - pageNum: 1, - pageSize: 10, - username: undefined, - mobile: undefined, - is_active: 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: { - username: [ - { required: true, message: "用户名称不能为空", trigger: "blur" } + // 部门名称 + deptName: undefined, + // 默认密码 + initPassword: undefined, + // 日期范围 + dateRange: [], + // 状态数据字典 + statusOptions: [{ dictLabel: '正常', dictValue: true }, { dictLabel: '停用', dictValue: false }], + // 性别状态字典 + sexOptions: [], + // 岗位选项 + 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 + '/admin/system/savefile/' + }, + // 查询参数 + queryParams: { + pageNum: 1, + pageSize: 10, + username: undefined, + mobile: undefined, + is_active: 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 }, + { key: 7, label: `创建时间`, visible: true } ], - name: [ - { required: true, message: "用户昵称不能为空", trigger: "blur" } - ], - password: [ - { required: true, message: "用户密码不能为空", trigger: "blur" } - ], - email: [ - { - type: "email", - message: "'请输入正确的邮箱地址", - trigger: ["blur", "change"] - } - ], - mobile: [ - { - pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, - message: "请输入正确的手机号码", - trigger: "blur" - } - ] + // 表单校验 + rules: { + username: [ + { required: true, message: '用户名称不能为空', trigger: 'blur' } + ], + name: [ + { required: true, message: '用户昵称不能为空', trigger: 'blur' } + ], + password: [ + { required: true, message: '用户密码不能为空', trigger: 'blur' } + ], + email: [ + { + type: 'email', + message: '\'请输入正确的邮箱地址', + trigger: ['blur', 'change'] + } + ], + mobile: [ + { + pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, + message: '请输入正确的手机号码', + trigger: 'blur' + } + ] + } } - }; - }, - watch: { - // 根据名称筛选部门树 - deptName(val) { - this.$refs.tree.filter(val); - } - }, - created() { - this.getList(); - this.getTreeselect(); - // this.getDicts("sys_normal_disable").then(response => { - // this.statusOptions = response.data; - // }); - this.getDicts("sys_user_sex").then(response => { - this.sexOptions = response.data; - }); - this.getConfigKey("sys.user.initPassword").then(response => { - this.initPassword = response.msg; - }); - }, - methods: { - /** 查询用户列表 */ - getList() { - this.loading = true; - listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => { - this.userList = response.data.results; - this.total = response.data.count; - this.loading = false; - } - ); }, - /** 查询部门下拉树结构 */ - getTreeselect() { - treeselect().then(response => { - this.deptOptions = this.handleTree(response.data,'id'); - }); + watch: { + // 根据名称筛选部门树 + deptName(val) { + this.$refs.tree.filter(val) + } }, - // 筛选节点 - filterNode(value, data) { - if (!value) return true; - return data.label.indexOf(value) !== -1; + created() { + this.getList() + this.getTreeselect() + // this.getDicts("sys_normal_disable").then(response => { + // this.statusOptions = response.data; + // }); + this.getDicts('sys_user_sex').then(response => { + this.sexOptions = response.data + }) + this.getConfigKey('sys.user.initPassword').then(response => { + this.initPassword = response.msg + }) }, - // 节点单击事件 - handleNodeClick(data) { - this.queryParams.deptId = data.id; - this.getList(); - }, - // 用户状态修改 - handleStatusChange(row) { - let text = row.is_active === true ? "启用" : "停用"; - this.$confirm('确认要"' + text + '""' + row.username + '"用户吗?', "警告", { - confirmButtonText: "确定", - cancelButtonText: "取消", - type: "warning" - }).then(function() { - return changeUserStatus(row.id, row.is_active); - }).then(() => { - this.msgSuccess(text + "成功"); - }).catch(function() { - row.is_active = row.is_active === false ? true : false; - }); - }, - // 取消按钮 - cancel() { - this.open = false; - this.reset(); - }, - // 表单重置 - reset() { - this.form = { - id: undefined, - deptId: undefined, - username: undefined, - name: undefined, - password: undefined, - mobile: undefined, - email: undefined, - gender: undefined, - is_active: false, - remark: undefined, - postIds: [], - roleIds: [] - }; - this.resetForm("form"); - }, - /** 搜索按钮操作 */ - handleQuery() { - this.queryParams.page = 1; - this.getList(); - }, - /** 重置按钮操作 */ - resetQuery() { - this.dateRange = []; - this.queryParams.deptId = '' - this.resetForm("queryForm"); - this.handleQuery(); - }, - // 多选框选中数据 - handleSelectionChange(selection) { - this.ids = selection.map(item => item.id); - this.single = selection.length != 1; - this.multiple = !selection.length; - }, - /** 新增按钮操作 */ - handleAdd() { - this.reset(); - this.getTreeselect(); - getUser().then(response => { - this.postOptions = response.data.posts; - this.roleOptions = response.data.roles; - this.open = true; - this.title = "添加用户"; - this.form.password = this.initPassword; - }); - }, - /** 修改按钮操作 */ - handleUpdate(row) { - this.reset(); - this.getTreeselect(); - const id = row.id || this.ids; - getUser(id).then(response => { - let data = response.data.data - data['postIds'] = response.data.postIds - data['roleIds'] = response.data.roleIds - this.form = data; - this.postOptions = response.data.posts; - this.roleOptions = response.data.roles; - this.open = true; - this.title = "修改用户"; - this.form.password = ""; - }); - }, - /** 重置密码按钮操作 */ - handleResetPwd(row) { - this.$prompt('请输入"' + row.username + '"的新密码', "提示", { - confirmButtonText: "确定", - cancelButtonText: "取消" - }).then(({ value }) => { - resetUserPwd(row.id, value).then(response => { - this.msgSuccess("修改成功，新密码是：" + value); - }); - }).catch(() => {}); - }, - /** 提交按钮 */ - submitForm: function() { - this.$refs["form"].validate(valid => { - if (valid) { - if (this.form.id != undefined) { - updateUser(this.form).then(response => { - this.msgSuccess("修改成功"); - this.open = false; - this.getList(); - }); - } else { - addUser(this.form).then(response => { - this.msgSuccess("新增成功"); - this.open = false; - this.getList(); - }); + methods: { + /** 查询用户列表 */ + getList() { + this.loading = true + listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => { + this.userList = response.data.results + this.total = response.data.count + this.loading = false } - } - }); - }, - /** 删除按钮操作 */ - handleDelete(row) { - const userIds = row.id || this.ids; - this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', "警告", { - confirmButtonText: "确定", - cancelButtonText: "取消", - type: "warning" + ) + }, + /** 查询部门下拉树结构 */ + getTreeselect() { + treeselect().then(response => { + this.deptOptions = this.handleTree(response.data, 'id') + }) + }, + // 筛选节点 + filterNode(value, data) { + if (!value) return true + return data.label.indexOf(value) !== -1 + }, + // 节点单击事件 + handleNodeClick(data) { + this.queryParams.deptId = data.id + this.getList() + }, + // 用户状态修改 + handleStatusChange(row) { + let text = row.is_active === true ? '启用' : '停用' + this.$confirm('确认要"' + text + '""' + row.username + '"用户吗?', '警告', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' }).then(function() { - return delUser(userIds); + return changeUserStatus(row.id, row.is_active) }).then(() => { - this.getList(); - this.msgSuccess("删除成功"); + this.msgSuccess(text + '成功') + }).catch(function() { + row.is_active = row.is_active === false ? true : false }) - }, - /** 导出按钮操作 */ - handleExport() { - const queryParams = this.queryParams; - this.$confirm('是否确认导出所有用户数据项?', "警告", { - confirmButtonText: "确定", - cancelButtonText: "取消", - type: "warning" + }, + // 取消按钮 + cancel() { + this.open = false + this.reset() + }, + // 表单重置 + reset() { + this.form = { + id: undefined, + deptId: undefined, + username: undefined, + name: undefined, + password: undefined, + mobile: undefined, + email: undefined, + gender: undefined, + is_active: false, + remark: undefined, + postIds: [], + roleIds: [] + } + this.resetForm('form') + }, + /** 搜索按钮操作 */ + handleQuery() { + this.queryParams.page = 1 + this.getList() + }, + /** 重置按钮操作 */ + resetQuery() { + this.dateRange = [] + this.queryParams.deptId = '' + this.resetForm('queryForm') + this.handleQuery() + }, + // 多选框选中数据 + handleSelectionChange(selection) { + this.ids = selection.map(item => item.id) + this.single = selection.length != 1 + this.multiple = !selection.length + }, + /** 新增按钮操作 */ + handleAdd() { + this.reset() + this.getTreeselect() + getUser().then(response => { + this.postOptions = response.data.posts + this.roleOptions = response.data.roles + this.open = true + this.title = '添加用户' + this.form.password = this.initPassword + }) + }, + /** 修改按钮操作 */ + handleUpdate(row) { + this.reset() + this.getTreeselect() + const id = row.id || this.ids + getUser(id).then(response => { + let data = response.data.data + data['postIds'] = response.data.postIds + data['roleIds'] = response.data.roleIds + this.form = data + this.postOptions = response.data.posts + this.roleOptions = response.data.roles + this.open = true + this.title = '修改用户' + this.form.password = '' + }) + }, + /** 重置密码按钮操作 */ + handleResetPwd(row) { + this.$prompt('请输入"' + row.username + '"的新密码', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消' + }).then(({ value }) => { + resetUserPwd(row.id, value).then(response => { + this.msgSuccess('修改成功，新密码是：' + value) + }) + }).catch(() => { + }) + }, + /** 提交按钮 */ + submitForm: function() { + this.$refs['form'].validate(valid => { + if (valid) { + if (this.form.id != undefined) { + updateUser(this.form).then(response => { + this.msgSuccess('修改成功') + this.open = false + this.getList() + }) + } else { + addUser(this.form).then(response => { + this.msgSuccess('新增成功') + this.open = false + this.getList() + }) + } + } + }) + }, + /** 删除按钮操作 */ + handleDelete(row) { + const userIds = row.id || this.ids + this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' }).then(function() { - return exportUser(queryParams); - }).then(response => { - this.download(response.data.file_url,response.data.name); + return delUser(userIds) + }).then(() => { + this.getList() + this.msgSuccess('删除成功') }) - }, - /** 导入按钮操作 */ - handleImport() { - this.upload.title = "用户导入"; - this.upload.open = true; - }, - /** 下载模板操作 */ - importTemplate() { - importTemplate().then(response => { - this.download(response.data.file_url,response.data.name); - }); - }, - // 文件上传中处理 - handleFileUploadProgress(event, file, fileList) { - this.upload.isUploading = true; - }, - // 文件上传成功处理 - handleFileSuccess(response, file, fileList) { - this.upload.open = false; - this.upload.isUploading = false; - this.$refs.upload.clearFiles(); - // 是否更新已经存在的用户数据 - importsUser({file_url: response.data.file_url,updateSupport:this.upload.updateSupport}).then(response => { - this.$alert('导入成功！', "导入结果", { dangerouslyUseHTMLString: true }); - this.getList(); - }); - }, - // 提交上传文件 - submitFileForm() { - this.$refs.upload.submit(); + }, + /** 导出按钮操作 */ + handleExport() { + const queryParams = this.queryParams + this.$confirm('是否确认导出所有用户数据项?', '警告', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }).then(function() { + return exportUser(queryParams) + }).then(response => { + this.download(response.data.file_url, response.data.name) + }) + }, + /** 导入按钮操作 */ + handleImport() { + this.upload.title = '用户导入' + this.upload.open = true + }, + /** 下载模板操作 */ + importTemplate() { + importTemplate().then(response => { + this.download(response.data.file_url, response.data.name) + }) + }, + // 文件上传中处理 + handleFileUploadProgress(event, file, fileList) { + this.upload.isUploading = true + }, + // 文件上传成功处理 + handleFileSuccess(response, file, fileList) { + this.upload.open = false + this.upload.isUploading = false + this.$refs.upload.clearFiles() + // 是否更新已经存在的用户数据 + importsUser({ file_url: response.data.file_url, updateSupport: this.upload.updateSupport }).then(response => { + this.$alert('导入成功！', '导入结果', { dangerouslyUseHTMLString: true }) + this.getList() + }) + }, + // 提交上传文件 + submitFileForm() { + this.$refs.upload.submit() + } } } -};