From e2f129ee192ae3469848beeceac262b13ba8eacb Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期三, 14 六月 2023 15:52:11 +0800 Subject: [PATCH] 新增页面和配置,对接口 --- src/views/Admin/components/userMod.vue | 200 ++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 170 insertions(+), 30 deletions(-) diff --git a/src/views/Admin/components/userMod.vue b/src/views/Admin/components/userMod.vue index 9a5f08a..499ef98 100644 --- a/src/views/Admin/components/userMod.vue +++ b/src/views/Admin/components/userMod.vue @@ -33,15 +33,15 @@ <a-radio-button :value="0">女</a-radio-button> </a-radio-group> </a-form-model-item> - <a-form-model-item label="选择级别" prop="unittype"> - <a-select v-model="form.unittype" placeholder="监管级别"> - <a-select-option :value="1"> + <a-form-model-item label="单位层级" prop="unittype"> + <a-select v-model="form.unittype" placeholder="单位层级" @change="changeLevel"> + <a-select-option :disabled="unittype !== 1&&unittype !== null" :value="1"> 省级 </a-select-option> - <a-select-option :value="2"> + <a-select-option :disabled="unittype !== 1&&unittype !== null && unittype !== 2" :value="2"> 地(市、州)级 </a-select-option> - <a-select-option :value="3"> + <a-select-option :disabled="unittype == 4 ? true : false" :value="3"> 区县级 </a-select-option> <a-select-option :value="4"> @@ -49,21 +49,23 @@ </a-select-option> </a-select> </a-form-model-item> - <a-form-model-item label="所属地区" prop="area"> -<!-- <a-cascader v-model="form.area" :options="areaData" expandTrigger="hover" changeOnSelect placeholder="请选择" @change="onChange"/>--> + <a-form-model-item label="所属地区" prop="districtId"> + <!-- <a-cascader v-model="form.area" :options="areaData" expandTrigger="hover" changeOnSelect placeholder="请选择" @change="onChange"/>--> <a-tree-select - v-model="form.area" + v-model="form.districtId" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="areaData" placeholder="行政区划" + :replaceFields="replaceFields" + @change="changeArea" > </a-tree-select> </a-form-model-item> <a-form-model-item label="所属单位"> - <a-input v-model="unitName"/> + <a-input v-model="form.company" readOnly/> </a-form-model-item> - <a-form-model-item label="角色" prop="role"> + <a-form-model-item label="角色" prop="roleId"> <a-select v-model="form.roleId" placeholder="角色"> <a-select-option :value="2"> 领导 @@ -78,19 +80,59 @@ </template> <script> -import { addUser } from '@/api/user' +import {addUser, updateUser} from '@/api/user' +import {verifyPasswordPowerful, verifyPhone} from "@/util/validate"; export default { name: 'userMod', + props: ['unitType'], data () { + let validatePwd = (rule, value, callback)=>{ + if(value === ''){ + callback(new Error('请输入密码')) + }else{ + if(!verifyPasswordPowerful(value)){ + callback(new Error('密码须包含字母、数字、特殊字符(不包括下划线),长度在6-16之间')) + }else{ + callback() + } + } + } + let validatePhone = (rule, value, callback)=>{ + if(value === ''){ + callback(new Error('请输入手机号')) + }else{ + if(!verifyPhone(value)){ + callback(new Error('手机号格式有误')) + }else{ + callback() + } + } + } + let validatePwd2 = (rule, value, callback)=>{ + if(value === ''){ + callback(new Error('请再次输入密码')) + }else if(value !== this.form.pwd){ + callback(new Error('两次输入密码不同')) + }else{ + callback() + } + } return { title: '新增用户', visible: false, + unittype: this.unitType, confirmLoading: false, labelCol: { span: 4 }, wrapperCol: { span: 14 }, areaData: [], - unitName: '', + replaceFields: { + children:'children', + title:'name', + key:'id', + value: 'id' + }, form: { + id: null, realName: '', phone: '', name: '', @@ -98,18 +140,19 @@ dupPwd: '', sex: null, unittype: null, - area: null, - roleId: null + districtId: null, + roleId: null, + company: '' }, rules: { realName: [{ required: true, message: '请输入姓名', trigger: 'blur'}], - phone: [{ required: true, message: '请输入手机号', trigger: 'blur'}], + phone: [{ required: true, validator: validatePhone, trigger: 'blur'}], name: [{ required: true, message: '请输入用户名', trigger: 'blur'}], pwd: [{ required: true, message: '请输入密码', trigger: 'blur'}], - dupPwd: [{ required: true, message: '请再次输入密码', trigger: 'blur'}], + dupPwd: [{ required: true, validator: validatePwd2, trigger: 'blur'}], sex: [{ required: true, message: '请选择性别', trigger: 'change'}], - unittype: [{ required: true, message: '请选择监管级别', trigger: 'change'}], - area: [{ required: true, message: '请选择行政区划', trigger: 'change'}], + unittype: [{ required: true, message: '请选择单位层级', trigger: 'change'}], + districtId: [{ required: true, message: '请选择行政区划', trigger: 'change'}], roleId: [{ required: true, message: '请选择角色', trigger: 'change'}] } } @@ -123,38 +166,135 @@ if(type == 'add'){ t.title = '新增用户' t.form = { + id: null, realName: '', phone: '', name: '', pwd: '', dupPwd: '', - sex: undefined, - unittype: undefined, - area: undefined, - roleId: null + sex: null, + unittype: null, + districtId: null, + roleId: null, + company: '' } }else{ t.title = '编辑用户' data.roleId = data.role.roleId - const { realName,phone,name,sex,unittype,roleId } = data - t.form = { realName,phone,name,sex,unittype,roleId } + for(let i in data){ + if(t.isValidKey(i,t.form)){ + t.form[i] = data[i] + } + } } t.visible = true + }, + isValidKey(key, object){ + return key in object; + }, + + + // 根据id查对象 + findNodeById(data,value) { + for (const node of data) { + if (node.id === value) { + return node; + } + if (node.children) { + const foundNode = this.findNodeById(node.children, value); + if (foundNode) { + return foundNode; + } + } + } + return null; + }, + + // 根据code查对象 + findNodeByCode(data,code) { + for (const node of data) { + if (node.code === code) { + return node; + } + if (node.children) { + const foundNode = this.findNodeByCode(node.children,code); + if (foundNode) { + return foundNode; + } + } + } + return null; + }, + + changeLevel(value, option){ + console.log(value) + }, + + changeArea(value, label, extra){ + const t = this + t.form.districtId = value + const code = t.findNodeById(t.areaData,value).code + if(code.length == 2){ + t.form.company = '自治区自然灾害预警中心' + // t.form.province = t.findNodeByCode(t.areaData,code).name + // t.form.city = '' + // t.form.area = '' + // t.form.town = '' + } else if(code.length == 9){ + // t.form.province = t.findNodeByCode(t.areaData,code.substr(0,2)).name + // t.form.city = t.findNodeByCode(t.areaData,code.substr(0,4)).name + // t.form.area = t.findNodeByCode(t.areaData,code.substr(0,6)).name + // t.form.town = t.findNodeByCode(t.areaData,code).name + t.form.company = label[0] + } else{ + // if(code.length == 4){ + // t.form.city = t.findNodeByCode(t.areaData,code).name + // t.form.area = '' + // } + // if(code.length == 6){ + // t.form.city = t.findNodeByCode(t.areaData,code.substr(0,4)).name + // t.form.area = t.findNodeByCode(t.areaData,code).name + // } + // t.form.province = t.findNodeByCode(t.areaData,code.substr(0,2)).name + // t.form.town = '' + t.form.company = label[0] + '自然灾害综合预警监测中心' + } }, clearMod(){ this.$refs.ruleForm.clearValidate() + this.$refs.ruleForm.resetFields() }, onSubmit() { this.$refs.ruleForm.validate(valid => { if (valid) { - if(this.title == '新增用户') - addUser(this.form).then((res)=>{ - if(res.data.code == 100){ - console.log(res,'res') - } - }) + if(this.form.unittype !== this.findNodeById(this.areaData,this.form.districtId).type){ + this.$message.error('单位层级和所属地区不匹配,请重新选择') + return + } + if(this.title == '新增用户'){ + const { id,...data } = this.form + addUser(data).then((res)=>{ + if(res.data.code == 100){ + this.$message.success('新增用户成功') + this.$emit('refresh') + }else{ + this.$message.error(res.data.msg) + } + }) + }else{ + const {pwd,dupPwd,...data} = this.form + updateUser(data).then((res)=>{ + if(res.data.code == 100){ + this.$message.success('修改用户成功') + this.$emit('refresh') + }else{ + this.$message.error(res.data.msg) + } + }) + } + this.visible = false } else { console.log('error submit!!'); return false; -- Gitblit v1.9.2