| | |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" |
| | | label-position="right"> |
| | | <!-- 部门id --> |
| | | <el-form-item class="optionItem" label="部门名称:" prop="id"> |
| | | <el-input v-model="user.id" placeholder="请输入部门名称" :disabled="!updateFlag"></el-input> |
| | | </el-form-item> |
| | | <!-- 部门名称 --> |
| | | <el-form-item class="optionItem" label="部门名称:" prop="departName"> |
| | | <el-input v-model="user.departName" placeholder="请输入部门名称" :disabled="true"></el-input> |
| | | <el-input v-model="user.departName" placeholder="请输入部门名称" :disabled="!updateFlag"></el-input> |
| | | </el-form-item> |
| | | <!-- 上级部门 --> |
| | | <el-form-item class="optionItems" label="上级部门:" prop="parentId"> |
| | | <el-select v-model="user.parentId" placeholder="请选择上级部门" disabled> |
| | | <el-select v-model="user.parentId" placeholder="请选择上级部门" :disabled="!updateFlag"> |
| | | <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="departType"> |
| | | <el-select v-model="user.departType" placeholder="请选择部门类型" disabled> |
| | | <el-select v-model="user.departType" placeholder="请选择部门类型" :disabled="!updateFlag"> |
| | | <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="departDes"> |
| | | <el-input v-model="user.departDes" placeholder="请输入部门描述" :disabled="true"></el-input> |
| | | <el-input v-model="user.departDes" placeholder="请输入部门描述" :disabled="!updateFlag"></el-input> |
| | | </el-form-item> |
| | | <el-form-item v-if="updateFlag"> |
| | | <div class="optionBtn"> |
| | |
| | | data() { |
| | | const validateNickname = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写用户名称")); |
| | | callback(new Error("请填写部门名称")); |
| | | } |
| | | }; |
| | | const validateId = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写部门id")); |
| | | } |
| | | } |
| | | const validatePass = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | |
| | | const rep = /^\w+$/; |
| | | if (!rep.test(value)) { |
| | | callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | } |
| | | } |
| | | }; |
| | | const validateTruename = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写用户姓名")); |
| | | } else { |
| | | const rep = /^[\u4E00-\u9FA5]{2,4}$/; |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的用户姓名"); |
| | | } |
| | | } |
| | | }; |
| | |
| | | }; |
| | | return { |
| | | user: { |
| | | id: '', |
| | | departName: '', |
| | | parentId: '', |
| | | departDes: '', |
| | | departType:'', |
| | | departType: '', |
| | | }, |
| | | createUserRules: { |
| | | id: [ |
| | | { required: true, trigger: "blur", validator: validateId }, |
| | | ], |
| | | departName: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | parentId: [ |
| | | { required: true, trigger: "blur", validator: validatePass }, |
| | | { required: false, trigger: "blur", validator: validatePass }, |
| | | ], |
| | | departDes: [ |
| | | { required: true, trigger: "blur", validator: validateTruename }, |
| | | { required: false, trigger: "blur" }, |
| | | ], |
| | | departType: [ |
| | | { required: true, trigger: "blur" }, |
| | | { required: false, trigger: "blur" }, |
| | | ], |
| | | }, |
| | | roleList: [ |
| | |
| | | methods: { |
| | | handleUser() { |
| | | const { user } = this; |
| | | this.$axios.post('sccg/depart/status', { |
| | | id: user.departmentId, |
| | | status: user.status ? 1 : 0, |
| | | const that = this; |
| | | this.$axios.post('sccg/depart/update', { |
| | | id: user.id, |
| | | departName: user.departName, |
| | | parentId: user.parentId, |
| | | departDes: user.departDes |
| | | }).then(res => { |
| | | console.log(res); |
| | | this.$emit('changeDialog',{dialogUpdate:false}); |
| | | this.getUserList(); |
| | | }) |
| | | } |
| | | }, |
| | | props: ['userInfo', 'updateFlag'] |
| | | props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog'] |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | |
| | | line-height: 60px; |
| | | padding: 0 20px; |
| | | border: 1px solid #fff; |
| | | |
| | | .headerTitle { |
| | | color: #4b9bb7; |
| | | font-weight: 600; |
| | |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | |
| | | .mainTitle { |
| | | color: #4b9bb7; |
| | | font-weight: 600; |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 50px; |
| | | |
| | | .el-form-item__content { |
| | | width: 400px; |
| | | |