From 140e83402814ffd2e92dfe313f5681feedd39f86 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Tue, 06 Feb 2024 16:49:12 +0800
Subject: [PATCH] 修复弹窗bug
---
src/views/Admin/components/sameLevelMod.vue | 149 +++++++++++++++++++++++++++++++++++++++----------
1 files changed, 118 insertions(+), 31 deletions(-)
diff --git a/src/views/Admin/components/sameLevelMod.vue b/src/views/Admin/components/sameLevelMod.vue
index 2befd6c..f235579 100644
--- a/src/views/Admin/components/sameLevelMod.vue
+++ b/src/views/Admin/components/sameLevelMod.vue
@@ -2,6 +2,7 @@
<a-modal
:title="title"
:visible="visible"
+ centered
:confirm-loading="confirmLoading"
width="50%"
cancelText="取消"
@@ -11,17 +12,17 @@
:afterClose="clearMod"
>
<a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
- <a-form-model-item label="姓名或称呼" prop="name">
- <a-input v-model="form.name"/>
+ <a-form-model-item label="姓名或称呼" prop="recipientName">
+ <a-input v-model="form.recipientName"/>
</a-form-model-item>
- <a-form-model-item label="单位名称（备注）" prop="depName">
- <a-input v-model="form.depName"/>
+ <a-form-model-item label="单位名称（备注）" prop="company">
+ <a-input v-model="form.company"/>
</a-form-model-item>
<a-form-model-item label="手机号码" prop="phone">
<a-input v-model="form.phone"/>
</a-form-model-item>
- <a-form-model-item label="选择级别" prop="level">
- <a-select v-model="form.level" placeholder="监管级别">
+ <a-form-model-item label="单位层级">
+ <a-select v-model="form.unittype" placeholder="单位层级" disabled>
<a-select-option :value="1">
省级
</a-select-option>
@@ -36,25 +37,47 @@
</a-select-option>
</a-select>
</a-form-model-item>
- <a-form-model-item label="所属地区" prop="area">
+ <a-form-model-item label="所属地区" prop="districtId">
<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"
+ disabled
>
</a-tree-select>
+ </a-form-model-item>
+ <a-form-model-item label="选择分组" prop="peerRecipientGroupId">
+ <a-select v-model="form.peerRecipientGroupId" style="width: 100%">
+ <a-select-option v-for="(item,index) in groupData" :value="item.id" :key="index">{{item.name}}</a-select-option>
+ </a-select>
</a-form-model-item>
</a-form-model>
</a-modal>
</template>
<script>
-import { addUser } from '@/api/user'
+
+import {addRecipient, addUser, getSameLevelGroupList, updateRecipient, updateUser} from "@/api/user";
+import {verifySimplePhone} from "@/util/validate";
export default {
name: 'userMod',
+ props: [],
data () {
+ let validatePhone = (rule, value, callback)=>{
+ if(value === ''){
+ callback(new Error('请输入手机号'))
+ }else{
+ if(!verifySimplePhone(value)){
+ callback(new Error('手机号格式有误'))
+ }else{
+ callback()
+ }
+ }
+ }
return {
title: '新增用户',
visible: false,
@@ -62,20 +85,27 @@
labelCol: { span: 4 },
wrapperCol: { span: 14 },
areaData: [],
+ groupData: [],
+ replaceFields: {
+ children:'children',
+ title:'name',
+ key:'id',
+ value: 'id'
+ },
unitName: '',
form: {
- name: '',
- depName: '',
+ id: null,
+ recipientName: '',
+ company: '',
phone: '',
- level: null,
- area: null
+ unittype: null,
+ districtId: null,
+ peerRecipientGroupId: null
},
rules: {
- name: [{ required: true, message: '请输入姓名', trigger: 'blur'}],
- phone: [{ required: true, message: '请输入手机号', trigger: 'blur'}],
- depName: [{ required: true, message: '请输入单位名称', trigger: 'blur'}],
- level: [{ required: true, message: '请选择监管级别', trigger: 'change'}],
- area: [{ required: true, message: '请选择行政区划', trigger: 'change'}]
+ recipientName: [{ required: true, message: '请输入姓名或称呼', trigger: 'blur'}],
+ company: [{ required: true, message: '请输入单位名称（备注）', trigger: 'blur'}],
+ phone: [{ required: true, validator: validatePhone, trigger: 'blur'}],
}
}
},
@@ -83,50 +113,107 @@
const t = this
},
methods:{
- openDialog(type,data){
+ openDialog(type,data,group){
const t = this
+ t.groupData = group
+ console.log(t.groupData,'data222')
if(type == 'add'){
t.title = '新增用户'
t.form = {
- name: '',
- depName: '',
+ id: null,
+ recipientName: '',
+ company: '',
phone: '',
- level: null,
- area: null
+ unittype: null,
+ districtId: null,
+ peerRecipientGroupId: null
}
}else{
t.title = '编辑用户'
- t.form = data
+ for(let i in data){
+ if(t.isValidKey(i,t.form)){
+ t.form[i] = data[i]
+ }
+ }
+ t.form.peerRecipientGroupId = data.peerRecipientGroupId ? data.peerRecipientGroupId: null
}
t.visible = true
},
+ isValidKey(key, object){
+ return key in object;
+ },
+
clearMod(){
this.$refs.ruleForm.clearValidate()
+ this.$refs.ruleForm.resetFields()
},
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
- alert('submit!');
+ if(this.title == '新增用户'){
+ const { id,...data } = this.form
+ addRecipient(data).then((res)=>{
+ if(res.data.code == 100){
+ this.$message.success('新增平级接收人成功')
+ this.$emit('refresh')
+ }else{
+ this.$message.error(res.data.msg)
+ }
+ })
+ }else{
+ const data = this.form
+ updateRecipient(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;
}
});
},
- handleOk(e) {
+ changeArea(value, label, extra){
const t = this
- t.confirmLoading = true;
+ t.form.districtId = value
+ const code = t.findCodeById(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] + '自然灾害综合预警监测中心'
+ }
},
+
handleCancel(e) {
const t = this
t.visible = false;
- },
- onChange(value) {
- console.log(value);
}
}
}
--
Gitblit v1.9.2