add 起草组报名页面部分

src/views/workTeam/WorkTeam.vue

@@ -64,6 +64,7 @@
           <!--          缴费凭证-->
           <span slot="action" class="action-span-cell" slot-scope="text,record">
             <a @click="paymentVoucher(record)" :disabled="Number(record.receivableAmount) === 0 || $store.getters.userInfo.roleCode === '3' ">申请开票</a>
+            <a @click="handleContacts(record)">联系人</a>
           </span>
         </a-table>
       </div>
@@ -74,6 +75,8 @@
     <project-detail-modal ref="projectDetail" @openContractModule="handleOpenContractModule"></project-detail-modal>
     <mine-contract-module :contract-id="contractId" :visible.sync="contractModuleVisible"
                           @openProjectDetail="openDetailModal"></mine-contract-module>
+    <!--  联系人弹框  -->
+    <work-team-modal ref="workTeamModal" @ok="modalFormOk"/>
   </div>
 </template>
 <script>
@@ -81,10 +84,11 @@ import { JeroListMixin } from '@/mixins/JeroListMixin'
 import ProjectDetailModal from '@views/MessagePage/ProjectDetailModal'
 import MineContractModule from '@views/mineContract/modules/MineContractModule'
 import JYearDate from '@comp/jero/JYearDate'
+import WorkTeamModal from '@views/workTeam/modules/WorkTeamModal'
 
 export default {
   name: 'WorkTeam',
-  components: { ProjectDetailModal, MineContractModule, JYearDate },
+  components: {WorkTeamModal, ProjectDetailModal, MineContractModule, JYearDate },
   mixins: [JeroListMixin],
   data() {
     return {
@@ -142,7 +146,7 @@ export default {
           title: '操作',
           dataIndex: 'action',
           align: 'center',
-          width: 100,
+          width: 200,
           fixed: 'right',
           scopedSlots: { customRender: 'action' }
         }
@@ -165,6 +169,10 @@ export default {
     this.loadData()
   },
   methods: {
+    // 联系人弹框
+    handleContacts (record) {
+      this.$refs.workTeamModal.edit(record)
+    },
     toMeeting() {
       this.$router.push({
         path: '/meetingActivity/MeetingActivity',

src/views/workTeam/modules/WorkTeamModal.vue

@@ -0,0 +1,434 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+
+      <a-form :form="form">
+        <a-row>
+          <a-col>
+            <a-form-item label="成员单位" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+              <company-select placeholder="请选择成员单位"
+                              v-decorator="['chargeCompany',validatorRules.chargeCompany]"
+                              :disabled="disabledCompany"
+                              @change="companyChange"
+                              :maxLength='50'>
+              </company-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <template
+          v-if="model.payWorkingGroupSubItemContactsList && model.payWorkingGroupSubItemContactsList.length > 0">
+          <a-row v-for="(item, index) in model.payWorkingGroupSubItemContactsList" :key="index + ''">
+            <a-col :xl="12" :sm="24">
+              <a-form-item :label="`企业联系人${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <select-contacts :selected-company="selectedCompany"
+                                 :init-contacts="model.payWorkingGroupSubItemContactsList[index]"
+                                 :placeholder="`请选择企业联系人${index + 1}`"
+                                 v-decorator="[`payWorkingGroupSubItemContactsList[${index}].contactsId`, {rules: [{ required: index === 0, validator: index === 0 ? validateContactRequired : validateContact }],validateTrigger: 'change'}]"
+                                 :maxLength='50'
+                                 :ref="`selectContacts${index}`"
+                                 @ok="addContactsOneOk"
+                                 @change="value => contactsChange(value, index)"></select-contacts>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="9" :sm="20">
+              <!--            v-show="hasContactOne"-->
+              <a-form-item :label="`备注${index + 1}`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :placeholder="`请输入备注${index + 1}`"
+                  v-decorator="[`payWorkingGroupSubItemContactsList[${index}].remarks`]"
+                  :maxLength='50'
+                  @change="e => {e.target.value = (e.target.value + '').trim()}">
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="3" :sm="4">
+              <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>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="邮寄联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <select-contacts :selected-company="selectedCompany"
+                               :init-contacts="selectedMailContact"
+                               placeholder="请选择邮寄联系人"
+                               v-decorator="['mailContactsId',validatorRules.mailContactsId]"
+                               :maxLength='50'
+                               ref="selectMailContacts">
+              </select-contacts>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import {httpAction} from '@api/manage'
+import SelectContacts from '@comp/company/SelectContacts'
+import CompanySelect from '@comp/company/CompanySelect'
+
+export default {
+  name: 'WorkTeamModal',
+  components: {CompanySelect, SelectContacts},
+  data () {
+    return {
+      title: '操作',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      remarksLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      remarksWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      validatorRules: {
+        workingGroupId: {
+          rules: [{ required: true, message: '请选择工作组项目' }],
+          validateTrigger: 'change'
+        },
+        chargeCompany: {
+          rules: [{ required: true, validator: this.checkCompany }],
+          validateTrigger: 'change'
+        },
+        taxRate: {
+          rules: [{ required: true, message: '请选择税率' }],
+          validateTrigger: 'change', initialValue: '0.06'
+        },
+        contactsIdOne: {
+          rules: [{ required: true, message: '请选择企业联系人1' }],
+          validateTrigger: 'change'
+        },
+        contactsRepeat: {
+          rules: [{ required: false, validator: this.validateContact }],
+          validateTrigger: 'change'
+        },
+        mailContactsId: {
+          rules: [{ required: true, message: '请选择邮寄联系人' }],
+          validateTrigger: 'blur'
+        }
+      },
+      selectedCompany: null, // 当前选中的企业
+      selectedContact1: null, // 编辑时的联系人
+      selectedContact2: null, // 编辑时的联系人
+      selectedContact3: null, // 编辑时的联系人
+      selectedMailContact: null, // 编辑时的邮寄联系人
+      workingGroupId: null,
+      disabledCompany: true, // 企业是否禁用
+      // 默认的联系人数据
+      defaultPayWorkingGroupSubItemContact: {
+        contactsId: undefined,
+        remarks: null,
+        name: null
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      console.log(record)
+      // 回显选中的企业
+      record.chargeCompany = {
+        id: record.chargeCompanyId,
+        companyName: record.chargeCompanyTemporaryName
+      }
+      this.selectedCompany = record.chargeCompany
+      this.companyChange(this.selectedCompany)
+      this.form.resetFields()
+      this.model = Object.assign({}, JSON.parse(JSON.stringify(record)))
+      if (this.model.id) {
+        // 传给组件的init-contact值，需要id和name两个属性
+        this.model.payWorkingGroupSubItemContactsList && this.model.payWorkingGroupSubItemContactsList.forEach(item => {
+          item.name = item.contactsTemporaryName
+        })
+        this.selectedMailContact = {
+          id: this.model.mailContactsTemporaryId,
+          name: this.model.mailContactsTemporaryName
+        }
+      } else {
+        // 新增处理默认显示的三个企业联系人
+        this.model.payWorkingGroupSubItemContactsList = []
+        this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+        this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+        this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+      }
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'chargeCompany', 'contactsIdOne', 'contactsIdTwo', 'contactsIdThree', 'mailContactsId'))
+      })
+    },
+    close() {
+      this.$emit('close')
+      this.selectedCompany = null
+      // 清除选中联系人信息
+      this.selectedContact1 = null
+      this.selectedContact2 = null
+      this.selectedContact3 = null
+      this.selectedMailContact = null
+      // 清除企业、来款方式、合同号的限制
+      this.isAssociatedContract = false
+      // this.disabledCompany = false
+      // 清除联系人备注信息
+      // this.hasContactOne = false
+      // this.hasContactTwo = false
+      // this.hasContactThree = false
+      this.visible = false
+      this.model = Object.assign({}, {})
+      this.form.resetFields()
+    },
+    handleOk() {
+      if (this.confirmLoading) {
+        return
+      }
+      // this.confirmLoading = true
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          // that.confirmLoading = true
+          values.chargeCompanyTemporaryName = values.chargeCompany.companyName
+          values.chargeCompanyId = values.chargeCompany.id
+          let httpurl = '/project/payWorkingGroupSubitem/editCompany'
+          let method = 'post'
+          if (this.workingGroupId) {
+            values.workingGroupId = this.workingGroupId
+          }
+          // 企业联系人信息中将没有值的去掉
+          let haveValueContactArr = values.payWorkingGroupSubItemContactsList.filter(tt => tt.contactsId)
+          let obj = {
+            payWorkingGroupSubItemContactsList: haveValueContactArr
+          }
+          const formData = Object.assign(this.model, values, obj)
+          console.log('表单提交数据', formData)
+          return
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            setTimeout(() => {
+              this.confirmLoading = false
+            }, 1000)
+          })
+        } else {
+          this.confirmLoading = false
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    validateContactRequired(rule, value, callback) {
+      if (value) {
+        callback()
+      }
+      callback('请选择企业联系人1')
+    },
+    /**
+     * 在新增成功后重新获取联系人列表
+     */
+    addContactsOneOk() {
+      this.$refs.selectMailContacts.getContactsList()
+    },
+    addMailContactsOk() {
+      this.$refs.selectContacts1.getContactsList()
+      this.$refs.selectContacts2.getContactsList()
+      this.$refs.selectContacts3.getContactsList()
+    },
+    /**
+     * 校验企业联系人是否重复
+     * @param rule
+     * @param value
+     * @param callback
+     */
+    validateContact(rule, value, callback) {
+      if (value) {
+        let contactsList = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
+        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 value
+     */
+    companyChange(value) {
+      // 当前选中的企业和之前选中的企业一致，就不修改了
+      if (this.selectedCompany && value && this.selectedCompany.id === value.id) {
+        return
+      }
+      this.selectedCompany = value
+      // this.model.contactsIdOne = undefined
+      // this.model.contactsIdTwo = undefined
+      // this.model.contactsIdThree = undefined
+      // 处理默认显示的三个企业联系人
+      this.model.payWorkingGroupSubItemContactsList = []
+      this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+      this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+      this.model.payWorkingGroupSubItemContactsList.push(this.defaultPayWorkingGroupSubItemContact)
+      this.model.mailContactsId = undefined
+      this.selectedMailContact = null
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'mailContactsId', 'payWorkingGroupSubItemContactsList'))
+      })
+    },
+    /**
+     * 企业联系人1、邮寄联系人联动
+     * @param value
+     * @param index
+     */
+    contactsChange(value, index) {
+      let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
+      formData[index].contactsId = value
+      // 如果没有值，清空对应的备注
+      if (!value) {
+        formData[index].remarks = null
+      } else {
+        // 如果值和初始值不一致，则清除备注
+        if (this.model.payWorkingGroupSubItemContactsList[index].contactsId !== value) {
+          formData[index].remarks = null
+        }
+        let mailContact = Object.values(this.form.getFieldValue(['mailContactsId']))[0]
+        // 邮寄联系人非undefined时赋值
+        if (!mailContact && index === 0) {
+          this.model.mailContactsId = value
+          this.$nextTick(() => {
+            this.form.setFieldsValue(pick(this.model, 'mailContactsId'))
+          })
+        }
+      }
+      this.$nextTick(() => {
+        this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
+        this.form.validateFields(['payWorkingGroupSubItemContactsList'])
+      })
+    },
+    /**
+     * 添加联系人
+     * @param index
+     */
+    handleAddContact(index) {
+      if (this.model.payWorkingGroupSubItemContactsList.length >= 10) {
+        this.$message.warn('最多添加十个企业联系人')
+        return
+      }
+      let obj = {
+        contactsId: undefined,
+        remarks: null
+      }
+      this.model.payWorkingGroupSubItemContactsList.splice(index + 1, 0, obj)
+      this.$forceUpdate()
+      let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
+      formData.splice(index + 1, 0, obj)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
+      })
+    },
+    /**
+     * 删除联系人
+     * @param index
+     */
+    handleDelContact(index) {
+      if (this.model.payWorkingGroupSubItemContactsList.length === 1) {
+        this.$message.warn('最少需要一个企业联系人')
+        return
+      }
+      this.model.payWorkingGroupSubItemContactsList.splice(index, 1)
+      let formData = this.form.getFieldValue('payWorkingGroupSubItemContactsList')
+      formData.splice(index, 1)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({ payWorkingGroupSubItemContactsList: formData })
+      })
+    },
+    // 下拉框的搜索
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.charge-notice-no {
+  width: 100%;
+
+  /deep/ .ant-radio-wrapper {
+    display: inline-block;
+    width: 100%;
+
+    span.ant-radio + * {
+      display: inline-block;
+      width: 100%;
+
+      span {
+        vertical-align: bottom;
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.contact-btn {
+  display: inline-block;
+  margin: 0 8px;
+  padding: 0;
+  height: 40px;
+}
+
+.del-btn {
+  color: #ff4d4f
+}
+</style>