【开发】新增会议 增加会议联系人

src/components/company/SelectPrincipal.vue

@@ -23,6 +23,10 @@ export default {
       type: String,
       required: false,
       default: undefined
+    },
+    index:{
+      type:[String,Number],
+      required: false
     }
   },
   data() {

src/views/incomePayments/meetManage/AddOrDetailMeet.vue

@@ -239,6 +239,43 @@
                          v-decorator="['directorPhone']"></a-input>
               </a-form-item>
             </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <section>
+              <a-row :gutter="24" v-for="(item, index) in model.meetingContactsList" :key="index">
+                <a-col :xxl="8" :xl="10" :md="12">
+                  <a-form-item label="会议联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+
+                    <!--                    @change="selectPerson"-->
+                    <!--     绑定 index 是因为 没法通过 selectMeetingContact 方法 去传递这个索引 只能绑定在组件上 通过change 方法的第二个参数 去获取这个 index 然后去做对应的表单复赋值   -->
+                    <select-principal placeholder="请选择会议联系人"
+                                      :index="index"
+                                      @change="selectMeetingContact"
+                                      v-decorator="['meetingContactsList['+index+'].meetingContactsId',validateInviteCode.meetingContactsId]">
+                    </select-principal>
+                  </a-form-item>
+                </a-col>
+                <a-col :xxl="8" :xl="10" :md="12">
+                  <a-form-item label="联系人手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="(e) => {e.target.value = e.target.value.replace(/[^0-9]/g,'')}"
+                      :maxLength="11"
+                      disabled
+                      v-decorator="['meetingContactsList['+index+'].meetingContactsPhone']"
+                      placeholder="请输入联系人手机号"></a-input>
+                  </a-form-item>
+                </a-col>
+                <!--                 style="transform: translateX(-130px);"-->
+                <a-col :xxl="2" :xl="4" :sm="6">
+                  <a-form-item>
+                    <a-button icon="plus" @click="addMeetingContacts"></a-button>
+                    <a-button icon="minus" @click="removeMeetingContacts(index)" style="margin-left: 8px;"></a-button>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </section>
+
+
           </a-row>
           <a-row :gutter="24">
             <a-col :xxl="8" :xl="12" :sm="24">
@@ -354,6 +391,7 @@ import {checkMeetingName} from '@/utils/validateOnly'
 import {addZero} from '@/utils/util'
 import {money, phoneReg} from '@/utils/validate'
 
+
 export default {
   name: 'AddOrDetailMeet',
   components: {
@@ -406,6 +444,12 @@ export default {
           ],
           validateTrigger: ['blur']
         },
+        meetingContactsId: {
+          rules: [
+            {required: true, validator: this.validateMeetingContact}
+          ],
+          validateTrigger: ['change']
+        },
         meetingName: {
           rules: [
             {required: true, validator: this.validaeMeetingName}
@@ -431,13 +475,14 @@ export default {
           ],
           validateTrigger: ['blur']
         },
-        directorPhone:{
+        directorPhone: {
           rules: [
             {required: true, validator: this.validateDirectorPhone}
           ],
           validateTrigger: ['blur']
         }
       },
+      userList: [],// 会议联系人下拉框集合
       url: {
         add: '/meeting/payMeeting/add',
         edit: '/meeting/payMeeting/edit'
@@ -531,6 +576,11 @@ export default {
           hotelContacts: '',
           hotelContactsPhone: ''
         }]
+        // 会议联系人
+        this.model.meetingContactsList = [{
+          meetingContactsId: '',
+          meetingContactsPhone: ''
+        }]
         // 新增取路由参数
         this.meetingType = this.$route.query.meetingType
         // 新增根据路由参数 会议类型更换不同的接口
@@ -553,12 +603,12 @@ export default {
       this.$nextTick(() => {
         // 加定时器是因为有可能赋值不成功
         setTimeout(() => {
-          this.form.setFieldsValue(pick(this.model, 'notice','hotelContactsList','hotelName', 'hotelAddress' ,'paymentQrCode', 'meetingName', 'meetingType', 'convokeTime', 'particularYear', 'estimatedNumber', 'meetingFiles', 'registerDeadline', 'meetingContent', 'convokeLocale', 'address', 'meetingCosts', 'directorId', 'remark', 'directorPhone')), 200
+          this.form.setFieldsValue(pick(this.model, 'notice', 'hotelContactsList', 'hotelName', 'hotelAddress', 'paymentQrCode', 'meetingName', 'meetingType', 'convokeTime', 'particularYear', 'estimatedNumber', 'meetingFiles', 'registerDeadline', 'meetingContent', 'convokeLocale', 'address', 'meetingCosts', 'directorId', 'remark', 'directorPhone')), 200
         })
         // 如果是标协会议则回显 标协会议的字段
         if (this.meetingType === '2') {
           console.log('this.model', this.model)
-          this.form.setFieldsValue(pick(this.model, 'signInTime', 'tbMeetingType', 'meetingCostsVip' ))
+          this.form.setFieldsValue(pick(this.model, 'signInTime', 'tbMeetingType', 'meetingCostsVip'))
         }
         // 如果是工作组会议 赋值工作组
         if (this.meetingType === '1') {
@@ -733,6 +783,82 @@ export default {
       })
     },
     /*
+    * 添加会议联系人
+    * */
+    addMeetingContacts(index) {
+      if (this.model.meetingContactsList.length >= 5) {
+        this.$message.warning('最多添加5个酒店联系人')
+        return
+      }
+      const {form} = this
+      const obj = {
+        meetingContactsId: '',
+        meetingContactsPhone: ''
+      }
+      const keys = form.getFieldValue('meetingContactsList')
+      // 增加数据后重新赋值
+      this.model.meetingContactsList.splice(index + 1, 0, obj)
+      // keys.splice(index , 0, obj)
+      this.$nextTick(() => {
+        form.setFieldsValue({
+          meetingContactsList: keys
+        })
+      })
+    },
+    /*
+    * 删除会议联系人
+    * */
+    removeMeetingContacts(k) {
+      // 如果长度是1的话则不进行删除操作
+      if (this.model.meetingContactsList.length === 1) {
+        return
+      }
+      const {form} = this
+      // // can use data-binding to get
+      const meetingContactsList = form.getFieldValue('meetingContactsList')
+      // 把循环的dom元素删除
+      this.model.meetingContactsList.splice(k, 1)
+      // 把绑定在dom里面的值删除
+      meetingContactsList.splice(k, 1)
+      this.$nextTick(() => {
+        // 重新赋值
+        form.setFieldsValue({
+          meetingContactsList: meetingContactsList
+        })
+      })
+    },
+    /**
+     * 选择会议联系人
+     * */
+    selectMeetingContact(val, VNode) {
+      console.log(val)
+      console.log(VNode)
+      if (val) {
+        // 索引 我不知道怎么去拿这个对应的索引 我只能把这个绑到这个组件上 通过这种方法 去拿索引
+        let idx = VNode.context.index
+
+        // 要设置表单值的数组
+        const keys = this.form.getFieldValue('meetingContactsList')
+
+        getUserInfo({id: val}).then(res => {
+          if (res.success) {
+            this.$nextTick(() => {
+              keys.forEach((item, index) => {
+                // 为数组索引为index 的赋值
+                if (index === idx) {
+                  keys.splice(index, 1, {
+                    meetingContactsId: val,
+                    meetingContactsPhone: res.result.phone
+                  })
+                }
+              })
+              this.form.setFieldsValue({meetingContactsList: keys})
+            })
+          }
+        })
+      }
+    },
+    /*
     *  召开地点吗转换
     * */
     getPcaText(code) {
@@ -811,6 +937,34 @@ export default {
       }
     },
     /*
+    * 校验会议联系人
+    * */
+    validateMeetingContact(rule, value, callback) {
+      // let meetingContactList = this.form.getFieldValue('meetingContactsList')
+      // meetingContactList.forEach((item,index) => {
+      //   if ( item.meetingContactsId === value && !item.meetingContactsPhone){
+      //     meetingContactList.splice(index,1)
+      //   }
+      // })
+      // let flag = meetingContactList.some(item => {
+      //   return item.meetingContactsId === value
+      // })
+      // if (meetingContactList.length === 1) {
+      //   flag = false
+      // }
+      if (value === '' || value === undefined || value === null) {
+        callback('请选择会议联系人')
+      }else {
+        callback()
+      }
+      // if (value && flag) {
+      //   callback('请选择不同的会议联系人')
+      // } else {
+      //   callback()
+      // }
+
+    },
+    /*
     * 会议名称唯一校验
     * */
     validaeMeetingName(rule, value, callback) {
@@ -872,17 +1026,17 @@ export default {
         callback('请输入合法的金额数字，最多2位小数,10位整数')
       }
     },
-    validateDirectorPhone(rule, value, callback){
+    validateDirectorPhone(rule, value, callback) {
       if (value && value !== '') {
         if (phoneReg(value)) {
           // 是否编辑
           callback()
-        }else {
+        } else {
           callback('请输入正确的手机号')
         }
 
 
-      }else {
+      } else {
         callback()
       }
     }

src/views/incomePayments/meetManage/meetingValidate.js

@@ -23,6 +23,12 @@ export default {
     ],
         validateTrigger:['blur']
   },
+  meetingContactsList:{
+    rules: [
+      { required: true, message: '请选择会议联系人' },
+    ],
+    validateTrigger:['change']
+  },
   registerDeadline:{
     rules: [
       { required: true, message: '请选择报名截止时间' },