| | |
| | | <template> |
| | | <div class="createUser"> |
| | | <!-- <header> |
| | | <div class="headerTitle">新增角色</div> |
| | | <div class="headerTip"> |
| | | <label>x</label> |
| | | </div> |
| | | </header> --> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="role" :rules="createRoleRules" |
| | |
| | | </el-form-item> |
| | | <!-- 角色类型 --> |
| | | <el-form-item class="optionItems" label="角色类型:" prop="status"> |
| | | <!-- <el-input v-model="role.type" placeholder="请选择角色类型"></el-input> --> |
| | | <el-select v-model="role.type" placeholder="请选择角色类型"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 角色描述 --> |
| | | <el-form-item class="optionItem" label="角色描述:" prop="description"> |
| | | <el-input v-model="role.description" placeholder="请输入描述内容200字以内"></el-input> |
| | | <el-input type="textarea" v-model="role.description" placeholder="请输入描述内容200字以内"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <el-button class="btn cancel" >取消</el-button> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交</el-button> |
| | | <el-button class="btn cancel" @click="handleStop">取消</el-button> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交 |
| | | </el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { getTypeList } from '@/utils/helper' |
| | | export default { |
| | | data() { |
| | | const validateNickname = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写用户名称")); |
| | | callback(new Error("请填写角色名称")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePass = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | callback(); |
| | | } else { |
| | | const rep = /^\w+$/; |
| | | if (!rep.test(value)) { |
| | | callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | } |
| | | // const rep = /^\w+$/; |
| | | // if (!rep.test(value)) { |
| | | // callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | // } |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateTruename = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写用户姓名")); |
| | | if (value) { |
| | | callback(); |
| | | } else { |
| | | const rep = /^[\u4E00-\u9FA5]{2,4}$/; |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的用户姓名"); |
| | | } |
| | | // const rep = /^[\u4E00-\u9FA5]{2,4}$/; |
| | | // if (!rep.test(value)) { |
| | | // callback("请输入正确的用户姓名"); |
| | | // } |
| | | callback(); |
| | | } |
| | | }; |
| | | return { |
| | | role: { |
| | | name: '', |
| | | type: '', |
| | | status: '', |
| | | description: '', |
| | | }, |
| | | createRoleRules: { |
| | | name: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | status: [ |
| | | type: [ |
| | | { required: false, trigger: "blur", validator: validatePass }, |
| | | ], |
| | | description: [ |
| | | { required: false, trigger: "blur", validator: validateTruename }, |
| | | ], |
| | | }, |
| | | roleList: [ |
| | | { name: '角色1', value: 1 }, { name: '角色2', value: 2 } |
| | | ], |
| | | typeList: [] |
| | | typeList:[], |
| | | } |
| | | }, |
| | | created() { |
| | | const that = this; |
| | | // 获取角色列表 |
| | | // this.$axios.get('') |
| | | // 获取用户类型列表 |
| | | // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{ |
| | | // console.log(res); |
| | | // }) |
| | | // 获取全部部门列表 |
| | | this.$axios.get('sccg/depart/page').then(res => { |
| | | that.typeList = res.data.records; |
| | | }) |
| | | this.getRoleTypeList(); |
| | | }, |
| | | methods: { |
| | | handleUser() { |
| | | const { role } = this; |
| | | console.log(role); |
| | | this.$axios.post('sccg/role/create', { |
| | | description:role.description,name:role.name,type:role.type |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | this.refresh(); |
| | | this.$refs['user'].validate((valid) => { |
| | | console.log(valid); |
| | | if (valid) { |
| | | const { role } = this; |
| | | console.log(role); |
| | | this.$axios.post('sccg/role/create', { |
| | | description: role.description, name: role.name, type: role.type |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | this.refresh(); |
| | | } |
| | | }) |
| | | } else { |
| | | return false; |
| | | } |
| | | }) |
| | | }, |
| | | handleStop(){ |
| | | this.refresh(); |
| | | }, |
| | | // 获取角色类型 |
| | | async getRoleTypeList(){ |
| | | this.typeList = await getTypeList(1,'09'); |
| | | } |
| | | }, |
| | | props: ['refresh'] |
| | |
| | | <style lang="scss" scoped> |
| | | .createUser { |
| | | border-radius: 1px; |
| | | background-color: #09152f; |
| | | |
| | | // header { |
| | | // display: flex; |
| | | // justify-content: space-between; |
| | | // height: 60px; |
| | | // line-height: 60px; |
| | | // padding: 0 20px; |
| | | // border: 1px solid #fff; |
| | | |
| | | // .headerTitle { |
| | | // color: #4b9bb7; |
| | | // font-weight: 600; |
| | | // } |
| | | |
| | | // .headerTip span { |
| | | // color: #ff3b6c; |
| | | // } |
| | | |
| | | // .headerTip label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | // } |
| | | // background-color: #09152f; |
| | | |
| | | main { |
| | | // border: 1px solid #fff; |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | | padding-top: 50px; |
| | | &::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | // &::v-deep .el-form-item__label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | |
| | | // &::v-deep .el-input__inner { |
| | | // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | |
| | | // &::v-deep .el-textarea__inner { |
| | | // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | |
| | | .el-form-item__content { |
| | | width: 400px; |