From e2f129ee192ae3469848beeceac262b13ba8eacb Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Wed, 14 Jun 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