| | |
| | | <template> |
| | | <div class="createUser"> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <el-form |
| | | ref="user" |
| | | label-width="140px" |
| | | autoComplete="on" |
| | | :model="user" |
| | | :rules="createUserRules" |
| | | label-position="right" |
| | | > |
| | | <!-- 用户名称 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="用户名称:" |
| | | prop="username" |
| | | > |
| | | <el-input |
| | | v-model="user.username" |
| | | placeholder="填写用户名称" |
| | | autoComplete="new-username" |
| | | <div class="createUser"> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <el-form |
| | | ref="user" |
| | | label-width="140px" |
| | | autoComplete="on" |
| | | :model="user" |
| | | :rules="createUserRules" |
| | | label-position="right" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | <!-- 用户名称 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="用户名称:" |
| | | prop="username" |
| | | > |
| | | <el-input |
| | | v-model="user.username" |
| | | placeholder="填写用户名称" |
| | | autoComplete="new-username" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 用户密码 --> |
| | | <div v-if="!user.id" class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="用户密码:" |
| | | prop="password" |
| | | > |
| | | <el-input |
| | | v-model="user.password" |
| | | type="password" |
| | | autoComplete="new-password" |
| | | placeholder="请输入用户密码" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | <!-- 重新输入密码即为修改,密码有效期默认为3个月 --> |
| | | </div> |
| | | <!-- 所属用户姓名 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="所属用户姓名:" |
| | | prop="nickName" |
| | | > |
| | | <el-input |
| | | v-model="user.nickName" |
| | | placeholder="请填写用户姓名" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 性别 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="性别:" |
| | | prop="sex" |
| | | > |
| | | <el-radio-group v-model="user.sex"> |
| | | <el-radio :label="1">男</el-radio> |
| | | <el-radio :label="0">女</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 是否党员 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="是否党员:" |
| | | prop="isDy" |
| | | > |
| | | <el-radio-group v-model="user.isDy"> |
| | | <el-radio :label="1">是</el-radio> |
| | | <el-radio :label="0">否</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 所属手机号码 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="所属手机号码:" |
| | | prop="mobile" |
| | | > |
| | | <el-input |
| | | v-model="user.mobile" |
| | | maxlength="11" |
| | | placeholder="请填写手机号码" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 邮箱地址 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="邮箱地址:" |
| | | prop="email" |
| | | > |
| | | <el-input |
| | | v-model="user.email" |
| | | placeholder="请填写邮箱地址" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 选择角色 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="选择角色:" |
| | | prop="role" |
| | | > |
| | | <el-select |
| | | v-model="user.role" |
| | | placeholder="请选择所属角色" |
| | | multiple |
| | | collapse-tags |
| | | > |
| | | <el-option |
| | | v-for="item in roleList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 用户类型 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="用户类型:" |
| | | prop="userType" |
| | | > |
| | | <el-select |
| | | v-model="user.userType" |
| | | placeholder="请选择用户类型" |
| | | > |
| | | <el-option |
| | | v-for="item in typeList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 座机/分机 --> |
| | | <div class="user-item sp-item"> |
| | | <div class="item-left"> |
| | | <el-form-item label="座机/分机:" prop="zjarea"> |
| | | <el-input |
| | | v-model="user.zjarea" |
| | | placeholder="电话区号" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="zjnumber" class="left-px"> |
| | | <el-input |
| | | v-model="user.zjnumber" |
| | | placeholder="电话号码" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="zjother" class="left-px"> |
| | | <el-input |
| | | v-model="user.zjother" |
| | | placeholder="分机号码" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 所属部门 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="所属部门:" |
| | | prop="departmentId" |
| | | > |
| | | <departTree |
| | | :depart="userDepart" |
| | | @selectDepart="selectDepart" |
| | | ></departTree> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 当前职务 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="当前职务:" |
| | | prop="jobTitle" |
| | | > |
| | | <el-input |
| | | v-model="user.jobTitle" |
| | | placeholder="请输入当前职务" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 填写所属mac地址 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="填写所属mac地址:" |
| | | prop="mac" |
| | | > |
| | | <el-input |
| | | v-model="user.mac" |
| | | placeholder="请填写所属mac地址" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 填写所属ip地址 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="填写所属ip地址:" |
| | | prop="ip" |
| | | > |
| | | <el-input |
| | | v-model="user.ip" |
| | | placeholder="请填写所属ip地址" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <div class="user-item sp-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="账号有效期:" |
| | | prop="days" |
| | | > |
| | | <el-input |
| | | v-model="user.days" |
| | | placeholder="请填写账号有效期天数" |
| | | ></el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item class="left-px"> |
| | | <span |
| | | style=" |
| | | margin: 0 20px 0 10px; |
| | | font-size: 18px; |
| | | " |
| | | >天</span |
| | | > |
| | | </el-form-item> |
| | | |
| | | <el-form-item class="left-px"> |
| | | <el-checkbox |
| | | label="长期" |
| | | v-model="user.dayCheck" |
| | | @change="dayaCheck" |
| | | ></el-checkbox> |
| | | </el-form-item> |
| | | </div> |
| | | <!-- <div class="item-left"> |
| | | <el-form-item label="座机/分机:" prop="zjarea"> |
| | | <el-input |
| | | v-model="user.zjarea" |
| | | placeholder="电话区号" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="zjother" class="left-px"> |
| | | <el-input |
| | | v-model="user.zjother" |
| | | placeholder="分机号码" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | </div> --> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <el-button |
| | | type="primary" |
| | | class="btn submit" |
| | | @click.native.prevent="handleUser" |
| | | >提交 |
| | | </el-button> |
| | | <el-button |
| | | class="btn reset" |
| | | @click.native.prevent="resetForm" |
| | | >重置</el-button |
| | | > |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 用户密码 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="用户密码:" |
| | | prop="password" |
| | | > |
| | | <el-input |
| | | v-model="user.password" |
| | | type="password" |
| | | autoComplete="new-password" |
| | | placeholder="请输入用户密码" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | <!-- 重新输入密码即为修改,密码有效期默认为3个月 --> |
| | | </div> |
| | | <!-- 所属用户姓名 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="所属用户姓名:" |
| | | prop="nickName" |
| | | > |
| | | <el-input |
| | | v-model="user.nickName" |
| | | placeholder="请填写用户姓名" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 性别 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item class="optionItem" label="性别:" prop="sex"> |
| | | <el-radio-group v-model="user.sex"> |
| | | <el-radio :label="1">男</el-radio> |
| | | <el-radio :label="0">女</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 是否党员 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item class="optionItem" label="是否党员:" prop="isDy"> |
| | | <el-radio-group v-model="user.isDy"> |
| | | <el-radio :label="1">是</el-radio> |
| | | <el-radio :label="0">否</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 所属手机号码 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="所属手机号码:" |
| | | prop="mobile" |
| | | > |
| | | <el-input |
| | | v-model="user.mobile" |
| | | maxlength="11" |
| | | placeholder="请填写手机号码" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 邮箱地址 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item class="optionItem" label="邮箱地址:" prop="email"> |
| | | <el-input |
| | | v-model="user.email" |
| | | placeholder="请填写邮箱地址" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 选择角色 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item class="optionItem" label="选择角色:" prop="role"> |
| | | <el-select |
| | | v-model="user.role" |
| | | placeholder="请选择所属角色" |
| | | multiple |
| | | collapse-tags |
| | | > |
| | | <el-option |
| | | v-for="item in roleList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 用户类型 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="用户类型:" |
| | | prop="userType" |
| | | > |
| | | <el-select v-model="user.userType" placeholder="请选择用户类型"> |
| | | <el-option |
| | | v-for="item in typeList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 座机/分机 --> |
| | | <div class="user-item sp-item"> |
| | | <div class="item-left"> |
| | | <el-form-item label="座机/分机:" prop="zjarea"> |
| | | <el-input v-model="user.zjarea" placeholder="电话区号"> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="zjnumber" class="left-px"> |
| | | <el-input v-model="user.zjnumber" placeholder="电话号码"> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="zjother" class="left-px"> |
| | | <el-input v-model="user.zjother" placeholder="分机号码"> |
| | | </el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 所属部门 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="所属部门:" |
| | | prop="departmentId" |
| | | > |
| | | <departTree |
| | | :depart="userDepart" |
| | | @selectDepart="selectDepart" |
| | | ></departTree> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 当前职务 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="当前职务:" |
| | | prop="jobTitle" |
| | | > |
| | | <el-input |
| | | v-model="user.jobTitle" |
| | | placeholder="请输入当前职务" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 填写所属mac地址 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="填写所属mac地址:" |
| | | prop="mac" |
| | | > |
| | | <el-input |
| | | v-model="user.mac" |
| | | placeholder="请填写所属mac地址" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <!-- 填写所属ip地址 --> |
| | | <div class="user-item"> |
| | | <div class="item-left"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="填写所属ip地址:" |
| | | prop="ip" |
| | | > |
| | | <el-input |
| | | v-model="user.ip" |
| | | placeholder="请填写所属ip地址" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="item-right"></div> |
| | | </div> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <el-button |
| | | type="primary" |
| | | class="btn submit" |
| | | @click.native.prevent="handleUser" |
| | | >提交 |
| | | </el-button> |
| | | <el-button class="btn reset" @click.native.prevent="resetForm" |
| | | >重置</el-button |
| | | > |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </main> |
| | | </div> |
| | | </main> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { getTypeList } from "@/utils/helper"; |
| | | import departTree from "@/components/departTree/index.vue"; |
| | | export default { |
| | | components: { |
| | | departTree, |
| | | }, |
| | | data() { |
| | | const validateNickname = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("所属姓名不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePass = (rule, value, callback) => { |
| | | //必须包含字母、数字、长度再6-16位之间 |
| | | var rep = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/; |
| | | if (!rep.test(value)) { |
| | | callback( |
| | | new Error( |
| | | "密码长度8到16位且密码中的字符必须包含字母大写和字母小写和必须包含数字,不能包含空格" |
| | | ) |
| | | ); |
| | | } else { |
| | | callback(); |
| | | } |
| | | components: { |
| | | departTree, |
| | | }, |
| | | data() { |
| | | const validateNickname = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("所属姓名不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePass = (rule, value, callback) => { |
| | | //必须包含字母、数字、长度再6-16位之间 |
| | | var rep = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/; |
| | | if (!rep.test(value)) { |
| | | callback( |
| | | new Error( |
| | | "密码长度8到16位且密码中的字符必须包含字母大写和字母小写和必须包含数字,不能包含空格" |
| | | ) |
| | | ); |
| | | } else { |
| | | callback(); |
| | | } |
| | | |
| | | // if (!value) { |
| | | // callback(new Error("用户密码不能为空")); |
| | | // } else { |
| | | // if (value.length < 6 || value.length > 16){ |
| | | // callback(new Error("用户密码长度不合法")); |
| | | // }else { |
| | | // const rep = /^\w+$/; |
| | | // if (!rep.test(value)) { |
| | | // callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | // } else { |
| | | // callback(); |
| | | // } |
| | | // } |
| | | // } |
| | | }; |
| | | const validateTruename = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("用户姓名不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePhone = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("手机号码不能为空")); |
| | | } else { |
| | | const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/; |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的手机号码"); |
| | | } else { |
| | | callback(); |
| | | // if (!value) { |
| | | // callback(new Error("用户密码不能为空")); |
| | | // } else { |
| | | // if (value.length < 6 || value.length > 16){ |
| | | // callback(new Error("用户密码长度不合法")); |
| | | // }else { |
| | | // const rep = /^\w+$/; |
| | | // if (!rep.test(value)) { |
| | | // callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | // } else { |
| | | // callback(); |
| | | // } |
| | | // } |
| | | // } |
| | | }; |
| | | const validateTruename = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("用户姓名不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePhone = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("手机号码不能为空")); |
| | | } else { |
| | | const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/; |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的手机号码"); |
| | | } else { |
| | | callback(); |
| | | } |
| | | } |
| | | }; |
| | | 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("请输入正确的邮箱")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | 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(); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateIp = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | return { |
| | | user: { |
| | | nickName: "", |
| | | password: "", |
| | | username: "", |
| | | sex: 1, |
| | | isDy: 0, |
| | | mobile: "", |
| | | email: "", |
| | | role: null, |
| | | userType: null, |
| | | zjarea: "", |
| | | zjnumber: "", |
| | | zjother: "", |
| | | departmentId: null, |
| | | jobTitle: null, |
| | | mac: "", |
| | | ip: "", |
| | | }, |
| | | userDepart: {}, |
| | | createUserRules: { |
| | | nickName: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | password: [ |
| | | { required: true, trigger: "blur", validator: validatePass }, |
| | | ], |
| | | username: [ |
| | | { required: true, trigger: "blur", validator: validateTruename }, |
| | | ], |
| | | sex: [{ required: true, trigger: "blur" }], |
| | | isDy: [{ required: true, trigger: "blur" }], |
| | | mobile: [{ required: true, trigger: "blur", validator: validatePhone }], |
| | | email: [{ required: true, trigger: "blur", validator: validateMail }], |
| | | role: [{ required: true, trigger: "change", validator: validateRole }], |
| | | userType: [ |
| | | { required: true, trigger: "change", validator: validateType }, |
| | | ], |
| | | zj: [{ required: false, trigger: "blur" }], |
| | | departmentId: [ |
| | | { required: true, trigger: "change", validator: validateDepartment }, |
| | | ], |
| | | jobTitle: [ |
| | | { required: true, trigger: "blur", validator: validateWork }, |
| | | ], |
| | | mac: [{ required: false, trigger: "blur", validator: validateMac }], |
| | | ip: [{ required: false, trigger: "blur", validator: validateIp }], |
| | | }, |
| | | roleList: [], |
| | | typeList: [], |
| | | departList: [], |
| | | mylabel: "", |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "departName", |
| | | disabled: (data, node) => { |
| | | if (node.level === 1 && node.childNodes.length !== 0) { |
| | | return !data.leaf; |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | }, |
| | | created() { |
| | | // 获取角色列表 |
| | | this.getRoleList(); |
| | | // 获取用户类型 |
| | | this.getUserTypeList(); |
| | | if (this.userInfo) { |
| | | this.user = this.userInfo |
| | | |
| | | this.user.role = this.userInfo.roles.map(o => o.id) |
| | | |
| | | if (this.userInfo.depart && this.userInfo.depart.length > 0) { |
| | | this.userDepart = this.userInfo.depart[this.userInfo.depart.length - 1] |
| | | this.user.departmentId = this.userInfo.depart[this.userInfo.depart.length - 1].id |
| | | } |
| | | if (!this.userInfo.expirationDate || this.userInfo.expirationDate == '2199-12-31') { |
| | | this.userInfo.dayCheck = true |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | 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("请输入正确的邮箱")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | 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(); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateIp = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | return { |
| | | user: { |
| | | nickName: "", |
| | | password: "", |
| | | username: "", |
| | | sex: 1, |
| | | isDy: 0, |
| | | mobile: "", |
| | | email: "", |
| | | role: null, |
| | | userType: null, |
| | | zjarea: "", |
| | | zjnumber: "", |
| | | zjother: "", |
| | | departmentId: null, |
| | | jobTitle: null, |
| | | mac: "", |
| | | ip: "", |
| | | }, |
| | | userDepart: {}, |
| | | createUserRules: { |
| | | nickName: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | password: [ |
| | | { required: true, trigger: "blur", validator: validatePass }, |
| | | ], |
| | | username: [ |
| | | { required: true, trigger: "blur", validator: validateTruename }, |
| | | ], |
| | | sex: [{ required: true, trigger: "blur" }], |
| | | isDy: [{ required: true, trigger: "blur" }], |
| | | mobile: [{ required: true, trigger: "blur", validator: validatePhone }], |
| | | email: [{ required: true, trigger: "blur", validator: validateMail }], |
| | | role: [{ required: true, trigger: "change", validator: validateRole }], |
| | | userType: [ |
| | | { required: true, trigger: "change", validator: validateType }, |
| | | ], |
| | | zj: [{ required: false, trigger: "blur" }], |
| | | departmentId: [ |
| | | { required: true, trigger: "change", validator: validateDepartment }, |
| | | ], |
| | | jobTitle: [ |
| | | { required: true, trigger: "blur", validator: validateWork }, |
| | | ], |
| | | mac: [{ required: false, trigger: "blur", validator: validateMac }], |
| | | ip: [{ required: false, trigger: "blur", validator: validateIp }], |
| | | }, |
| | | roleList: [], |
| | | typeList: [], |
| | | departList: [], |
| | | mylabel: "", |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "departName", |
| | | disabled: (data, node) => { |
| | | if (node.level === 1 && node.childNodes.length !== 0) { |
| | | return !data.leaf; |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | }, |
| | | created() { |
| | | // 获取角色列表 |
| | | this.getRoleList(); |
| | | // 获取用户类型 |
| | | this.getUserTypeList(); |
| | | }, |
| | | methods: { |
| | | // 提交注册 |
| | | handleUser() { |
| | | this.$refs["user"].validate((valid) => { |
| | | console.log(valid); |
| | | if (valid) { |
| | | const { user } = this; |
| | | console.log(user); |
| | | this.$axios |
| | | .post("sccg/admin/register", { |
| | | departmentId: user.departmentId, |
| | | email: user.email, |
| | | icon: "", |
| | | isDy: `${user.isDy}`, |
| | | jobTitle: user.jobTitle, |
| | | mobile: user.mobile, |
| | | note: "", |
| | | roleIds: user.role, |
| | | // nickName: user.nickName, |
| | | sex: `${user.sex}`, |
| | | password: user.password, |
| | | userType: user.userType, |
| | | username: user.username, |
| | | zj: user.zjarea + `${user.zjnumber}` + user.zjother, |
| | | nickName: user.nickName, |
| | | // departName:user.departName, |
| | | }) |
| | | .then((res) => { |
| | | if (res.code === 200) { |
| | | console.log(1); |
| | | this.$message({ |
| | | type: "success", |
| | | message: res.message, |
| | | }); |
| | | this.$emit("sendDialog", { flag: false }); |
| | | } else if (res.code === 500 && res.message === "操作失败") { |
| | | this.$message({ |
| | | type: "warning", |
| | | message: "该用户已注册", |
| | | }); |
| | | } else { |
| | | this.$message({ |
| | | type: "warning", |
| | | message: res.message, |
| | | }); |
| | | } |
| | | }, |
| | | methods: { |
| | | // 提交注册 |
| | | handleUser() { |
| | | this.$refs["user"].validate((valid) => { |
| | | if (valid) { |
| | | const { user } = this; |
| | | console.log(user); |
| | | this.$axios |
| | | .post("sccg/admin/register", { |
| | | id: user.id, |
| | | departmentId: user.departmentId, |
| | | email: user.email, |
| | | icon: "", |
| | | isDy: `${user.isDy}`, |
| | | jobTitle: user.jobTitle, |
| | | mobile: user.mobile, |
| | | note: "", |
| | | roleIds: user.role, |
| | | // nickName: user.nickName, |
| | | sex: `${user.sex}`, |
| | | password: user.password, |
| | | userType: user.userType, |
| | | username: user.username, |
| | | zj: user.zjarea + `${user.zjnumber}` + user.zjother, |
| | | nickName: user.nickName, |
| | | days: user.days |
| | | // departName:user.departName, |
| | | }) |
| | | .then((res) => { |
| | | if (res.code === 200) { |
| | | console.log(1); |
| | | this.$message({ |
| | | type: "success", |
| | | message: res.message, |
| | | }); |
| | | this.$emit("sendDialog", { flag: false }); |
| | | } else if (res.code === 500 && res.message === "操作失败") { |
| | | this.$message({ |
| | | type: "warning", |
| | | message: "该用户已注册", |
| | | }); |
| | | } else { |
| | | this.$message({ |
| | | type: "warning", |
| | | message: res.message, |
| | | }); |
| | | } |
| | | }); |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | }, |
| | | // 获取角色列表 |
| | | getRoleList() { |
| | | this.$axios({ |
| | | method: "get", |
| | | url: "sccg/role/listAll", |
| | | }).then((res) => { |
| | | this.roleList = res.data; |
| | | }); |
| | | }, |
| | | dayaCheck(e) { |
| | | if (e) { |
| | | this.user.days = null |
| | | } |
| | | this.user.dayCheck = e |
| | | }, |
| | | // 重置表单 |
| | | resetForm() { |
| | | this.$refs["user"].resetFields(); |
| | | }, |
| | | // 获得部门名称 |
| | | getDepartName(data) { |
| | | this.departList.forEach((item) => { |
| | | if (item.id === data) { |
| | | this.user.departName = item.departName; |
| | | } |
| | | }); |
| | | }, |
| | | // 获取用户类型 |
| | | async getUserTypeList() { |
| | | this.typeList = await getTypeList(1, "07"); |
| | | }, |
| | | selectDepart(depart) { |
| | | if (depart) { |
| | | this.user.departmentId = depart.departId; |
| | | this.user.departName = depart.departName; |
| | | } |
| | | }, |
| | | }, |
| | | // 获取角色列表 |
| | | getRoleList() { |
| | | this.$axios({ |
| | | method: "get", |
| | | url: "sccg/role/listAll", |
| | | }).then((res) => { |
| | | this.roleList = res.data; |
| | | }); |
| | | }, |
| | | // 重置表单 |
| | | resetForm() { |
| | | this.$refs["user"].resetFields(); |
| | | }, |
| | | // 获得部门名称 |
| | | getDepartName(data) { |
| | | this.departList.forEach((item) => { |
| | | if (item.id === data) { |
| | | this.user.departName = item.departName; |
| | | } |
| | | }); |
| | | }, |
| | | // 获取用户类型 |
| | | async getUserTypeList() { |
| | | this.typeList = await getTypeList(1, "07"); |
| | | }, |
| | | selectDepart(depart) { |
| | | if (depart) { |
| | | this.user.departmentId = depart.departId; |
| | | this.user.departName = depart.departName; |
| | | } |
| | | }, |
| | | }, |
| | | props: ["sendDialog"], |
| | | props: ["sendDialog", "userInfo"], |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .createUser { |
| | | border-radius: 1px; |
| | | // background-color: #09152f; |
| | | |
| | | main { |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | border-radius: 1px; |
| | | // background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | padding-top: 20px; |
| | | |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 50px; |
| | | width: 100%; |
| | | // &::v-deep .el-form-item__label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | main { |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | // background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | padding-top: 20px; |
| | | |
| | | // &::v-deep .el-input__inner { |
| | | // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 50px; |
| | | width: 100%; |
| | | // &::v-deep .el-form-item__label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | |
| | | .el-form-item__content { |
| | | width: 400px; |
| | | .el-select { |
| | | width: 100%; |
| | | // &::v-deep .el-input__inner { |
| | | // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | |
| | | .el-form-item__content { |
| | | width: 400px; |
| | | .el-select { |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | .sp-item { |
| | | .item-left { |
| | | display: flex; |
| | | } |
| | | } |
| | | |
| | | .user-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .item-left { |
| | | width: 500px; |
| | | } |
| | | .item-right { |
| | | line-height: 40px; |
| | | color: #4b9bb7; |
| | | font-size: 12px; |
| | | // margin-left: 16px; |
| | | } |
| | | |
| | | .left-px :deep(.el-form-item__content) { |
| | | margin-left: 0px !important; |
| | | } |
| | | } |
| | | |
| | | .optionBtn { |
| | | display: flex; |
| | | margin-top: 20px; |
| | | |
| | | .btn { |
| | | padding: 12px 50px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .sp-item { |
| | | .item-left { |
| | | display: flex; |
| | | } |
| | | } |
| | | |
| | | .user-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .item-left { |
| | | width: 500px; |
| | | } |
| | | .item-right { |
| | | line-height: 40px; |
| | | color: #4b9bb7; |
| | | font-size: 12px; |
| | | // margin-left: 16px; |
| | | } |
| | | |
| | | .left-px :deep(.el-form-item__content) { |
| | | margin-left: 0px !important; |
| | | } |
| | | } |
| | | |
| | | .optionBtn { |
| | | display: flex; |
| | | margin-top: 20px; |
| | | |
| | | .btn { |
| | | padding: 12px 50px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-form-item__error { |
| | | width: 608px; |
| | | width: 608px; |
| | | } |
| | | </style> |