| | |
| | | <div class="headerTitle">{{updateFlag ? '修改用户部门信息' :'查看用户信息'}}</div> |
| | | </header> |
| | | <main> |
| | | <div class="mainTitle">基础信息</div> |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" |
| | | label-position="right"> |
| | | <!-- 用户名称 --> |
| | | <el-form-item class="optionItem" label="用户名称:" prop="username"> |
| | | <el-input v-model="user.username" placeholder="填写用户名称" :disabled="true"></el-input> |
| | | <!-- 部门名称 --> |
| | | <el-form-item class="optionItem" label="部门名称:" prop="departName"> |
| | | <el-input v-model="user.departName" placeholder="请输入部门名称" :disabled="true"></el-input> |
| | | </el-form-item> |
| | | <!-- 用户密码 --> |
| | | <el-form-item class="optionItems" label="用户密码:" prop="password"> |
| | | <el-input v-model="user.password" type="password" placeholder="请输入用户密码" :disabled="true"> |
| | | </el-input> |
| | | </el-form-item> |
| | | <!-- 所属用户姓名 --> |
| | | <!-- <el-form-item class="optionItem" label="所属用户姓名:" prop="true_name"> |
| | | <el-input v-model="user.true_name" placeholder="请填写用户姓名"></el-input> |
| | | </el-form-item> --> |
| | | <!-- 性别 --> |
| | | <!-- <el-form-item class="optionItem" label="性别:" prop="gender"> |
| | | <el-radio-group v-model="user.gender"> |
| | | <el-radio :label="1">男</el-radio> |
| | | <el-radio :label="2">女</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> --> |
| | | <!-- 是否党员 --> |
| | | <el-form-item class="optionItem" label="是否党员:" prop="isDy"> |
| | | <el-radio-group v-model="user.isDy" disabled> |
| | | <el-radio :label="1">是</el-radio> |
| | | <el-radio :label="0">否</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <!-- 所属手机号码 --> |
| | | <el-form-item class="optionItem" label="所属手机号码:" prop="mobile"> |
| | | <el-input v-model="user.mobile" placeholder="请填写手机号码" :disabled="true"></el-input> |
| | | </el-form-item> |
| | | <!-- 邮箱地址 --> |
| | | <el-form-item class="optionItem" label="邮箱地址:" prop="email"> |
| | | <el-input v-model="user.email" placeholder="请填写邮箱地址" :disabled="true"></el-input> |
| | | </el-form-item> |
| | | <!-- 选择角色 --> |
| | | <!-- <el-form-item class="optionItem" label="选择角色:" prop="role"> |
| | | <el-select v-model="user.role" placeholder="请选择所属角色"> |
| | | <el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> --> |
| | | <!-- 用户类型 --> |
| | | <el-form-item class="optionItem" label="用户类型:" prop="userType"> |
| | | <el-select v-model="user.userType" placeholder="请选择用户类型" disabled> |
| | | <!-- 上级部门 --> |
| | | <el-form-item class="optionItems" label="上级部门:" prop="parentId"> |
| | | <el-select v-model="user.parentId" placeholder="请选择上级部门" disabled> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 座机/分机 --> |
| | | <!-- <el-form-item class="optionItem" label="座机/分机:" prop="zj"> |
| | | <div class="optionHandleSp"> |
| | | <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="电话区号"> |
| | | </el-input> |
| | | <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="电话号码"> |
| | | </el-input> |
| | | <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="分机号码"> |
| | | </el-input> |
| | | </div> |
| | | </el-form-item> --> |
| | | <!-- 所属部门 --> |
| | | <el-form-item class="optionItem" label="所属部门:" prop="departmentId"> |
| | | <el-select v-model="user.department" placeholder="请选择所属部门" :disabled="!updateFlag"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.departName" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 当前职务 --> |
| | | <el-form-item class="optionItem" label="当前职务:" prop="jobTitle"> |
| | | <el-select v-model="user.work" placeholder="请选择当前职务" disabled> |
| | | <!-- 部门类型 --> |
| | | <el-form-item class="optionItem" label="部门类型:" prop="departType"> |
| | | <el-select v-model="user.departType" placeholder="请选择部门类型" disabled> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 填写所属mac地址 --> |
| | | <!-- <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac"> |
| | | <el-input v-model="user.mac" placeholder="请填写所属mac地址"></el-input> |
| | | </el-form-item> --> |
| | | <!-- 填写所属ip地址 --> |
| | | <!-- <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip"> |
| | | <el-input v-model="user.ip" placeholder="请填写所属ip地址"></el-input> |
| | | </el-form-item> --> |
| | | <!-- 部门描述 --> |
| | | <el-form-item class="optionItem" label="部门描述:" prop="departDes"> |
| | | <el-input v-model="user.departDes" placeholder="请输入部门描述" :disabled="true"></el-input> |
| | | </el-form-item> |
| | | <el-form-item v-if="updateFlag"> |
| | | <div class="optionBtn"> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交 |
| | |
| | | } |
| | | } |
| | | }; |
| | | const validateMail = (rule, value, callback) => { |
| | | if (value) { |
| | | const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; |
| | | if (!rep.test(value)) { |
| | | callback(new Error("请输入正确的邮箱")) |
| | | } |
| | | } |
| | | }; |
| | | const validateRole = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateType = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateDepartment = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateWork = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateMac = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateIp = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | return { |
| | | user: { |
| | | nickName: '', |
| | | password: '', |
| | | username: '', |
| | | // gender: 1, |
| | | isDy: 1, |
| | | mobile: '', |
| | | email: '', |
| | | // role: null, |
| | | userType: null, |
| | | zj: { |
| | | areaNumber: '', |
| | | phoneNumber: "", |
| | | moreNumber: "", |
| | | }, |
| | | departmentId: null, |
| | | jobTitle: null, |
| | | // mac: '', |
| | | // ip: '', |
| | | departName: '', |
| | | parentId: '', |
| | | departDes: '', |
| | | departType:'', |
| | | }, |
| | | createUserRules: { |
| | | nickName: [ |
| | | departName: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | password: [ |
| | | parentId: [ |
| | | { required: true, trigger: "blur", validator: validatePass }, |
| | | ], |
| | | username: [ |
| | | departDes: [ |
| | | { required: true, trigger: "blur", validator: validateTruename }, |
| | | ], |
| | | // gender: [ |
| | | // { required: true, trigger: "blur" }, |
| | | // ], |
| | | isDy: [ |
| | | departType: [ |
| | | { required: true, trigger: "blur" }, |
| | | ], |
| | | mobile: [ |
| | | { required: true, trigger: "blur", validator: validatePhone }, |
| | | ], |
| | | email: [ |
| | | { required: false, trigger: "blur", validator: validateMail }, |
| | | ], |
| | | // role: [ |
| | | // { required: true, trigger: "blur", validator: validateRole }, |
| | | // ], |
| | | userType: [ |
| | | { required: true, trigger: "blur", validator: validateType }, |
| | | ], |
| | | zj: [ |
| | | { required: false, trigger: "blur" }, |
| | | ], |
| | | departmentId: [ |
| | | { required: true, trigger: "blur", validator: validateDepartment }, |
| | | ], |
| | | jobTitle: [ |
| | | { required: true, trigger: "blur", validator: validateWork }, |
| | | ], |
| | | // mac: [ |
| | | // { required: false, trigger: "blur", validator: validateMac }, |
| | | // ], |
| | | // ip: [ |
| | | // { required: false, trigger: "blur", validator: validateIp }, |
| | | // ], |
| | | }, |
| | | roleList: [ |
| | | { name: '角色1', value: 1 }, { name: '角色2', value: 2 } |
| | |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | | |
| | | margin-top: 50px; |
| | | .el-form-item__content { |
| | | width: 400px; |
| | | |