update 起草组报名页面完善、工作组和起草组联系人完善（未完成）

src/views/draftTeam/SignUpDraftTeamPage.vue

@@ -66,40 +66,45 @@
             <div class="item-title">个人信息</div>
             <a-row :gutter="24">
               <a-col :xxl="8" :xl="12" :sm="24">
-                <a-form-item label="参会企业" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                  <company-select @change="changeCompany" v-decorator="['companyId',validatorRules.companyId]"
-                                  placeholder="请选择参会企业"
-                                  :is-limit="true"
-                                  full-company-info
+                <a-form-item label="成员单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <company-select placeholder="请选择成员单位"
+                                  v-decorator="['chargeCompany',validatorRules.chargeCompany]"
+                                  @change="companyChange"
                                   :maxLength='50'>
                   </company-select>
-                  <span class="color-red">若没有您要选择的企业,请您添加企业信息(发票抬头)</span>
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-row :gutter="24">
-              <a-col :xxl="8" :xl="12" :sm="24">
-                <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                  <select-contacts :selected-company="selectedCompany"
-                                   placeholder="请选择参会人"
-                                   :is-limit="true"
-                                   v-decorator="['companyContactId',validatorRules.companyContactId]"
-                                   :maxLength='50'
-                                   @change="changeContact"
-                                   ref="selectMailContacts"
-                                   @ok="addContactsOk"></select-contacts>
-                </a-form-item>
-              </a-col>
-              <a-col :xxl="8" :xl="12" :sm="24">
-                <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                  <a-input placeholder="请输入手机号"
-                           @change="(e) => {e.target.value = e.target.value.replace(/[^0-9]/g,'')}"
-                           :maxLength='11'
-                           disabled
-                           v-decorator="['phone',validatorRules.phone]"></a-input>
                 </a-form-item>
               </a-col>
             </a-row>
+            <template
+              v-if="model.payDraftingGroupSubItemContactsList && model.payDraftingGroupSubItemContactsList.length > 0">
+              <a-row :gutter="24" v-for="(item, index) in model.payDraftingGroupSubItemContactsList" :key="index + ''">
+                <a-col :xxl="8" :xl="12" :sm="24">
+                  <a-form-item :label="`企业联系人${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <select-contacts :selected-company="selectedCompany"
+                                     :init-contacts="model.payDraftingGroupSubItemContactsList[index]"
+                                     :placeholder="`请选择企业联系人${index + 1}`"
+                                     v-decorator="[`payDraftingGroupSubItemContactsList[${index}].contactsId`, {rules: [{ required: index === 0, validator: index === 0 ? validateContactRequired : validateContact }],validateTrigger: 'change'}]"
+                                     :maxLength='50'
+                                     :ref="`selectContacts${index}`"></select-contacts>
+                  </a-form-item>
+                </a-col>
+                <a-col :xxl="6" :xl="8" :sm="24">
+                  <!--            v-show="hasContactOne"-->
+                  <a-form-item :label="`备注${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :placeholder="`请输入备注${index + 1}`"
+                      v-decorator="[`payDraftingGroupSubItemContactsList[${index}].remarks`]"
+                      :maxLength='50'
+                      @change="e => {e.target.value = (e.target.value + '').trim()}">
+                    </a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :xxl="3" :xl="4" :sm="24">
+                  <a-button type="link" class="contact-btn" @click="handleAddContact(index)">添加</a-button>
+                  <a-button type="link" class="contact-btn del-btn" @click="handleDelContact(index)">删除</a-button>
+                </a-col>
+              </a-row>
+            </template>
 
             <!--个人信息end-->
             <div class="item-title">其他信息</div>
@@ -129,10 +134,9 @@
 </template>
 
 <script>
-import {getAction} from '@api/manage'
+import {getAction, postAction} from '@api/manage'
 import CompanySelect from '@comp/company/CompanySelect'
 import SelectContacts from '@comp/company/SelectContacts'
-import {getContactsById, validateStandard} from '@api/incomePaymentsApi'
 import pick from 'lodash.pick'
 
 export default {
@@ -156,52 +160,39 @@ export default {
         xs: {span: 24},
         sm: {span: 21}
       },
+      model: {},
       validatorRules: {
-        companyId: {
-          rules: [{required: true, message: '请选择参会企业'}],
+        chargeCompany: {
+          rules: [{ required: true, validator: this.checkCompany }],
           validateTrigger: 'change'
         },
-        choiceTopic: {
-          rules: [
-            // {required: true, message: '请选择会议名称'},
-            {required: true, validator: this.checkChoiceTopic},
-          ],
-          validateTrigger: ['change']
-        },
-        inviteCode: {
-          rules: [{required: true, message: '请选择是否有邀请码'}],
+        contactsIdOne: {
+          rules: [{ required: true, message: '请选择企业联系人1' }],
           validateTrigger: 'change'
         },
-        invitationCode: {
-          rules: [{required: true, validator: this.checkCode}],
+        contactsRepeat: {
+          rules: [{ required: false, validator: this.validateContact }],
           validateTrigger: 'change'
         },
-        companyContactId: {
-          rules: [{required: true, message: '请选择参会人'}],
-          validateTrigger: 'change'
-        },
-        phone: {
-          rules: [{required: true, message: '请输入手机号'}],
-          validateTrigger: 'blur'
-        },
-        identify: {
-          rules: [{required: true, message: '请选择身份'}],
-          validateTrigger: 'change'
-        },
-        guestType: {
-          rules: [{required: true, message: '请选择嘉宾类型'}],
-          validateTrigger: 'change'
-        }
       },
+      selectedCompany: null, // 当前选中的企业
+      selectedContact1: null, // 编辑时的联系人
+      selectedContact2: null, // 编辑时的联系人
+      selectedContact3: null, // 编辑时的联系人
       confirmLoading: false,
       form: this.$form.createForm(this),
       // 起草组信息
       currentDraftTempInfo: {},
       url: {
+        add: '/drafting/payDraftingGroupSubitem/add',
         info: '/drafting/payDraftingGroup/queryById'
       },
-      // 选择企业
-      selectedCompany: null,
+      // 默认的联系人数据
+      defaultPayWorkingGroupSubItemContact: {
+        contactsId: undefined,
+        remarks: null,
+        name: null
+      }
     }
   },
   created() {
@@ -210,37 +201,174 @@ export default {
         this.currentDraftTempInfo = res.result || {}
       }
     })
+    // 默认表单显示
+    this.companyChange()
+    this.form.resetFields()
+    this.model.payDraftingGroupSubItemContactsList = []
+    this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+    this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+    this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+    this.model.chargeCompany = {
+      id: undefined,
+      companyName: undefined
+    }
+    this.$nextTick(() => {
+      this.form.setFieldsValue(pick(this.model, 'chargeCompany', 'contactsIdOne', 'contactsIdTwo', 'contactsIdThree', 'remarks', 'remarksOne', 'remarksTwo', 'remarksThree', 'payDraftingGroupSubItemContactsList'))
+    })
   },
   methods: {
-
-    addContactsOk() {
-      this.$refs.selectContacts.getContactsList()
-    },
-    /*
-    * 选择联系人获取信息
-    * */
-    changeContact(val) {
-      // 监听删除联系人的时候 清除对应的表单赋值
-      if (val === undefined) {
-        this.form.resetFields(['phone'])
+    // 提交
+    handleOk () {
+      if (this.confirmLoading) {
+        return
       }
       const that = this
-      // 通过id查询联系人信息
-      getContactsById({id: val}).then(res => {
-        const model = Object.assign({}, res.result)
-        // 设置手机 邮箱 职务
-        if (res.success) {
-          that.form.setFieldsValue(pick(model, 'phone'))
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        console.log(err, values)
+        if (!err) {
+          that.confirmLoading = true
+          values.chargeCompanyTemporaryName = values.chargeCompany.companyName
+          values.chargeCompanyId = values.chargeCompany.id
+          // 当前起草组id
+          values.draftingGroupId = this.$route.query.id
+          // 企业联系人信息中将没有值的去掉
+          let haveValueContactArr = values.payDraftingGroupSubItemContactsList.filter(tt => tt.contactsId)
+          let obj = {
+            payDraftingGroupSubItemContactsList: haveValueContactArr
+          }
+          const formData = Object.assign(this.model, values, obj)
+          // 企业端添加的是需要审核 1 待审核；2 已审核；3 已驳回
+          formData.checkResult = 1
+          console.log('表单提交数据', formData)
+          postAction(this.url.add, formData).then((res) => {
+            if (res.success) {
+              let messageText = '报名成功'
+              that.$notification.success({
+                message: messageText,
+              })
+              setTimeout(() => {
+                that.handleCancel()
+              }, 500)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            setTimeout(() => {
+              this.confirmLoading = false
+            }, 1000)
+          })
+        } else {
+          this.confirmLoading = false
         }
       })
     },
-    /*
-    * 选择参会企业
-    * */
-    changeCompany(value) {
+    /**
+     * 选中企业变化，将联系人的值清空
+     * @param value
+     */
+    companyChange(value) {
+      // 当前选中的企业和之前选中的企业一致，就不修改了
+      if (this.selectedCompany && value && this.selectedCompany.id === value.id) {
+        return
+      }
       this.selectedCompany = value
-      // 选择企业清空 姓名 手机号
-      this.form.resetFields(['companyContactId', 'phone'])
+      // this.model.contactsIdOne = undefined
+      // this.model.contactsIdTwo = undefined
+      // this.model.contactsIdThree = undefined
+      // 处理默认显示的三个企业联系人
+      this.model.payDraftingGroupSubItemContactsList = []
+      this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+      this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+      this.model.payDraftingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+      // this.model.mailContactsId = undefined
+      this.selectedMailContact = null
+      this.model.contractNum = undefined
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'contractNum', 'payDraftingGroupSubItemContactsList'))
+      })
+    },
+    validateContactRequired(rule, value, callback) {
+      if (value) {
+        callback()
+      }
+      callback('请选择企业联系人1')
+    },
+    /**
+     * 校验企业联系人是否重复
+     * @param rule
+     * @param value
+     * @param callback
+     */
+    validateContact(rule, value, callback) {
+      if (value) {
+        let contactsList = this.form.getFieldValue('payDraftingGroupSubItemContactsList')
+        let hasValueArr = contactsList.filter(tt => tt.contactsId === value)
+        if (hasValueArr.length <= 1) {
+          callback()
+        }
+        callback('请选择不同的联系人')
+        return
+      }
+      callback()
+    },
+    /**
+     * 企业必填校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkCompany(rules, value, callback) {
+      if (value.id && value.companyName) {
+        callback()
+        return
+      }
+      callback('请选择成员单位')
+    },
+    /**
+     * 添加联系人
+     * @param index
+     */
+    handleAddContact(index) {
+      if (this.model.payDraftingGroupSubItemContactsList.length >= 10) {
+        this.$message.warn('最多添加十个企业联系人')
+        return
+      }
+      let obj = {
+        contactsId: undefined,
+        remarks: null
+      }
+      this.model.payDraftingGroupSubItemContactsList.splice(index + 1, 0, obj)
+      this.$forceUpdate()
+      let formData = this.form.getFieldValue('payDraftingGroupSubItemContactsList')
+      formData.splice(index + 1, 0, obj)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({ payDraftingGroupSubItemContactsList: formData })
+      })
+    },
+    /**
+     * 删除联系人
+     * @param index
+     */
+    handleDelContact(index) {
+      if (this.model.payDraftingGroupSubItemContactsList.length === 1) {
+        this.$message.warn('最少需要一个企业联系人')
+        return
+      }
+      this.model.payDraftingGroupSubItemContactsList.splice(index, 1)
+      let formData = this.form.getFieldValue('payDraftingGroupSubItemContactsList')
+      formData.splice(index, 1)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({ payDraftingGroupSubItemContactsList: formData })
+      })
+    },
+    // 下拉框的搜索
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
     },
     /*
      * 取消