| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="角色" prop="roleIds"> |
| | | <el-select v-model="form.roleIds" multiple placeholder="请选择角色"> |
| | | <el-select v-model="rt" placeholder="请选择角色" @change="getRole"> |
| | | <el-option :key="-1" :label="无" :value="-1">无</el-option> |
| | | <el-option |
| | | v-for="item in roleOptions" |
| | | :key="item.roleId" |
| | |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item label="家庭号"> |
| | | <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择家庭号" /> |
| | | <el-select v-model="fid" placeholder="请选择家庭号"> |
| | | <el-option :key="-1" :label="无" |
| | | value="无">无</el-option> |
| | | |
| | | <el-option |
| | | v-for="item in famiInfo" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | |
| | | ></el-option> |
| | | </el-select> |
| | | |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user"; |
| | | import { listUser, getUser, delUser, updateUserInfo,addUser, updateUser, getAllFamilys,resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user"; |
| | | import { getToken } from "@/utils/auth"; |
| | | import Treeselect from "@riophae/vue-treeselect"; |
| | | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
| | |
| | | return { |
| | | // 遮罩层 |
| | | loading: true, |
| | | //角色保存 |
| | | rt: undefined, |
| | | // 选中数组 |
| | | ids: [], |
| | | // 非单个禁用 |
| | |
| | | initPassword: undefined, |
| | | // 日期范围 |
| | | dateRange: [], |
| | | //家庭号 |
| | | famiInfo:[], |
| | | fid: "无", |
| | | // 岗位选项 |
| | | postOptions: [], |
| | | // 角色选项 |
| | | roleOptions: [], |
| | | // 表单参数 |
| | | |
| | | form: {}, |
| | | defaultProps: { |
| | | children: "children", |
| | |
| | | }, |
| | | created() { |
| | | this.getList(); |
| | | this.getFamlilyInfo(); |
| | | this.getDeptTree(); |
| | | this.getConfigKey("sys.user.initPassword").then(response => { |
| | | this.initPassword = response.msg; |
| | | }); |
| | | }, |
| | | methods: { |
| | | getRole(){ |
| | | this.form.roleIds = [] |
| | | //alert(123) |
| | | this.form.roleIds.push(this.rt) |
| | | }, |
| | | getFamlilyInfo(){ |
| | | let _this = this |
| | | getAllFamilys().then(response => { |
| | | //console.log(response.data) |
| | | _this.famiInfo = response.data |
| | | }) |
| | | }, |
| | | /** 查询用户列表 */ |
| | | getList() { |
| | | this.loading = true; |
| | |
| | | this.form = response.data; |
| | | this.postOptions = response.posts; |
| | | this.roleOptions = response.roles; |
| | | this.rt = response.roleIds[0] |
| | | this.$set(this.form, "postIds", response.postIds); |
| | | this.$set(this.form, "roleIds", response.roleIds); |
| | | this.open = true; |
| | |
| | | /** 提交按钮 */ |
| | | submitForm: function() { |
| | | this.$refs["form"].validate(valid => { |
| | | alert(valid) |
| | | if (valid) { |
| | | if (this.form.userId != undefined) { |
| | | updateUser(this.form).then(response => { |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } else { |
| | | addUser(this.form).then(response => { |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | /** 删除按钮操作 */ |
| | | handleDelete(row) { |
| | | const userIds = row.userId || this.ids; |
| | | this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(function() { |
| | | return delUser(userIds); |
| | | }).then(() => { |
| | | this.getList(); |
| | | 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> |
| | | //alert(valid) |
| | | // alert(this.fid) |
| | | //alert(this.rt) |
| | | |
| | | export default { |
| | | name: "User", |
| | | dicts: ['sys_normal_disable', 'sys_user_sex'], |
| | | 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: [], |
| | | // 岗位选项 |
| | | 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" |
| | | }, |
| | | // 查询参数 |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | userName: undefined, |
| | | phonenumber: 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: { |
| | | 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' } |
| | | ], |
| | | email: [ |
| | | { |
| | | type: "email", |
| | | message: "请输入正确的邮箱地址", |
| | | trigger: ["blur", "change"] |
| | | } |
| | | ], |
| | | phonenumber: [ |
| | | { |
| | | 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.getDeptTree(); |
| | | 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.rows; |
| | | this.total = response.total; |
| | | this.loading = false; |
| | | // alert(this.form.roleIds) |
| | | let ps = true |
| | | // alert(this.rt) |
| | | // alert(this.fid) |
| | | let _this = this |
| | | if(this.rt===2 && (this.fid!="无")) |
| | | { |
| | | ps = false |
| | | |
| | | } |
| | | ); |
| | | }, |
| | | /** 查询部门下拉树结构 */ |
| | | getDeptTree() { |
| | | deptTreeSelect().then(response => { |
| | | this.deptOptions = response.data; |
| | | }); |
| | | }, |
| | | // 筛选节点 |
| | | filterNode(value, data) { |
| | | if (!value) return true; |
| | | return data.label.indexOf(value) !== -1; |
| | | }, |
| | | // 节点单击事件 |
| | | handleNodeClick(data) { |
| | | this.queryParams.deptId = data.id; |
| | | this.handleQuery(); |
| | | }, |
| | | // 用户状态修改 |
| | | 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; |
| | | this.reset(); |
| | | }, |
| | | // 表单重置 |
| | | reset() { |
| | | this.form = { |
| | | userId: undefined, |
| | | deptId: undefined, |
| | | userName: undefined, |
| | | nickName: undefined, |
| | | password: undefined, |
| | | phonenumber: undefined, |
| | | email: undefined, |
| | | sex: undefined, |
| | | status: "0", |
| | | remark: undefined, |
| | | postIds: [], |
| | | roleIds: [] |
| | | }; |
| | | this.resetForm("form"); |
| | | }, |
| | | /** 搜索按钮操作 */ |
| | | handleQuery() { |
| | | this.queryParams.pageNum = 1; |
| | | this.getList(); |
| | | }, |
| | | /** 重置按钮操作 */ |
| | | resetQuery() { |
| | | this.dateRange = []; |
| | | this.resetForm("queryForm"); |
| | | this.queryParams.deptId = undefined; |
| | | this.$refs.tree.setCurrentKey(null); |
| | | 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; |
| | | this.roleOptions = response.roles; |
| | | this.open = true; |
| | | this.title = "添加用户"; |
| | | this.form.password = this.initPassword; |
| | | }); |
| | | }, |
| | | /** 修改按钮操作 */ |
| | | handleUpdate(row) { |
| | | this.reset(); |
| | | const userId = row.userId || this.ids; |
| | | 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 = ""; |
| | | }); |
| | | }, |
| | | /** 重置密码按钮操作 */ |
| | | 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) { |
| | | updateUser(this.form).then(response => { |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } else { |
| | | addUser(this.form).then(response => { |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } |
| | | // alert(ps) |
| | | if(ps) |
| | | { |
| | | if (valid) { |
| | | if (this.form.userId != undefined) { |
| | | updateUser(this.form).then(response => { |
| | | |
| | | let fm = {} |
| | | fm.userId = _this.form.userId |
| | | |
| | | if(_this.fid==="无") |
| | | fm.familyId= -1 |
| | | else |
| | | fm.familyId = _this.fid |
| | | updateUserInfo(fm).then(response=>{ |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }) |
| | | }); |
| | | } else { |
| | | addUser(this.form).then(response => { |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | else{ |
| | | this.$modal.msgSuccess("普通角色不能拥有家庭号!"); |
| | | } |
| | | }); |
| | | }, |