| | |
| | | <div class="app-container"> |
| | | <el-row :gutter="20"> |
| | | <!--部门数据--> |
| | | <el-col :span="4" :xs="24"> |
| | | <div class="head-container"> |
| | | <el-input |
| | | v-model="deptName" |
| | | placeholder="请输入部门名称" |
| | | clearable |
| | | size="small" |
| | | prefix-icon="el-icon-search" |
| | | style="margin-bottom: 20px" |
| | | /> |
| | | </div> |
| | | <div class="head-container"> |
| | | <el-tree |
| | | :data="deptOptions" |
| | | :props="defaultProps" |
| | | :expand-on-click-node="false" |
| | | :filter-node-method="filterNode" |
| | | ref="tree" |
| | | node-key="id" |
| | | default-expand-all |
| | | highlight-current |
| | | @node-click="handleNodeClick" |
| | | /> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <!--用户数据--> |
| | | <el-col :span="20" :xs="24"> |
| | | <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
| | |
| | | <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="deptName" prop="dept.deptName" v-if="columns[3].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"> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="归属部门" prop="deptId"> |
| | | <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" /> |
| | | <el-form-item label="角色" prop="roleIds"> |
| | | <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" |
| | | :label="item.roleName" |
| | | :value="item.roleId" |
| | | :disabled="item.status == 1" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="手机号码" prop="phonenumber"> |
| | | <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item label="家庭号"> |
| | | <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> |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item label="邮箱" prop="email"> |
| | | <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /> |
| | |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="岗位"> |
| | | <el-select v-model="form.postIds" multiple placeholder="请选择岗位"> |
| | | <el-option |
| | | v-for="item in postOptions" |
| | | :key="item.postId" |
| | | :label="item.postName" |
| | | :value="item.postId" |
| | | :disabled="item.status == 1" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="角色"> |
| | | <el-select v-model="form.roleIds" multiple placeholder="请选择角色"> |
| | | <el-option |
| | | v-for="item in roleOptions" |
| | | :key="item.roleId" |
| | | :label="item.roleName" |
| | | :value="item.roleId" |
| | | :disabled="item.status == 1" |
| | | ></el-option> |
| | | </el-select> |
| | | <el-form-item label="手机号码" prop="phonenumber"> |
| | | <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user"; |
| | | import { listUser, getUser, delUser, 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", |
| | |
| | | nickName: [ |
| | | { required: true, message: "用户昵称不能为空", trigger: "blur" } |
| | | ], |
| | | roleIds: [ |
| | | { required: true, message: "用户角色不能为空", trigger: "blur" } |
| | | ], |
| | | deptId: [ |
| | | { required: true, message: "用户角色不能为空", trigger: "blur" } |
| | | ], |
| | | |
| | | password: [ |
| | | { required: true, message: "用户密码不能为空", trigger: "blur" }, |
| | | { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' } |
| | |
| | | }, |
| | | 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 => { |
| | | 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(valid) |
| | | // alert(this.fid) |
| | | //alert(this.rt) |
| | | |
| | | alert(this.form.roleIds) |
| | | let ps = true |
| | | // alert(this.rt) |
| | | // alert(this.fid) |
| | | |
| | | if(this.rt===2 && (this.fid!="无")) |
| | | ps = false |
| | | // alert(ps) |
| | | if(ps) |
| | | { |
| | | 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(); |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | else{ |
| | | this.$modal.msgSuccess("普通角色不能拥有家庭号!"); |
| | | } |
| | | }); |
| | | }, |
| | |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | </script> |