工作组项目管理--成员维护

src/views/projectManagement/modules/WorkingGroupMemberUnitModule.vue

@@ -0,0 +1,426 @@
+<template>
+  <j-modal
+      :title="title"
+      :width="width"
+      :visible="visible"
+      :confirmLoading="confirmLoading"
+      switchFullscreen
+      @ok="handleOk"
+      @cancel="handleCancel"
+      cancelText="关闭">
+    <a-form :form="form">
+      <a-row>
+        <a-col>
+          <a-form-item label="成员单位" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+            <company-select placeholder="请选择成员单位"
+                            v-decorator="['chargeCompany',validatorRules.chargeCompany]"
+                            @change="companyChange"
+                            :maxLength='50'>
+            </company-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="企业联系人1" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <select-contacts :selected-company="selectedCompany"
+                             :init-contacts="selectedContact1"
+                             placeholder="请选择企业联系人1"
+                             v-decorator="['contactsIdOne',validatorRules.contactsIdOne]"
+                             :maxLength='50'
+                             ref="selectContacts1"
+                             @ok="addContactsOk"></select-contacts>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="企业联系人2" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <select-contacts :selected-company="selectedCompany"
+                             :init-contacts="selectedContact2"
+                             placeholder="请选择企业联系人2"
+                             v-decorator="['contactsIdTwo']"
+                             :maxLength='50'
+                             ref="selectContacts2"
+                             @ok="addContactsOk"></select-contacts>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="企业联系人3" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <select-contacts :selected-company="selectedCompany"
+                             :init-contacts="selectedContact3"
+                             placeholder="请选择企业联系人3"
+                             v-decorator="['contactsIdThree']"
+                             :maxLength='50'
+                             ref="selectContacts3"
+                             @ok="addContactsOk"></select-contacts>
+          </a-form-item>
+        </a-col>
+        <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"
+                             @ok="addContactsOk"></select-contacts>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="来款方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-radio-group v-decorator="['chargeWay',validatorRules.chargeWay]" @change="handlechargeWayChange">
+              <a-radio :value="1">无</a-radio>
+              <a-radio :value="2">合同</a-radio>
+              <a-radio :value="3">收费通知</a-radio>
+            </a-radio-group>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24" v-if="chargeWayType === 3">
+          <a-form-item label="收费通知号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-radio-group v-decorator="['chargeNoticeNo',validatorRules.chargeNoticeNo]" @change="handleChargeNoticeChange" :options="chargeNoticeList">
+            </a-radio-group>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="chargeWayType === 2">
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="应收金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-row>
+              <a-col :span="20">
+                <a-input placeholder="请输入应收金额"
+                         v-decorator="['receivableAmount',validatorRules.receivableAmount]"
+                         :maxLength='50'
+                         @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+              </a-col>
+              <a-col :span="1">元</a-col>
+            </a-row>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="合同号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入合同号"
+                     v-decorator="['contractNum',validatorRules.contractNum]"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="chargeWayType === 3 && selectedChargeNotice === 'A'">
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="本年应收款A" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入本年应收款A"
+                     v-decorator="['receivableAmount',validatorRules.receivableAmount]"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="收费通知A" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <j-upload file-type="pdf"
+                      file-type-error-message="请上传收费通知"
+                      :multiple="false"
+                      :return-id="true"
+                      bizPath="payment"
+                      v-decorator="['chargeNoticeId']"
+                      :trigger-change="true"></j-upload>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="chargeWayType === 3 && selectedChargeNotice === 'B'">
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="本年应收款B" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入本年应收款A"
+                     v-decorator="['receivableAmount',validatorRules.receivableAmount]"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="收费通知B" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <j-upload file-type="pdf"
+                      file-type-error-message="请上传收费通知"
+                      :multiple="false"
+                      :return-id="true"
+                      bizPath="payment"
+                      v-decorator="['chargeNoticeId']"
+                      :trigger-change="true"></j-upload>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="需要发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <j-dict-select-tag v-decorator="['needInvoice',validatorRules.needInvoice]"
+                               :maxLength='50'
+                               :triggerChange="true"
+                               placeholder="请选择发票类型"
+                               dictCode="invoice_type"/>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col>
+          <a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+            <a-textarea
+                placeholder="请输入备注"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                v-decorator="['remarks']"
+                :maxLength='200'
+                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { httpAction } from '@api/manage'
+import JYearDate from '@comp/jero/JYearDate'
+import JUpload from '@comp/jero/JUpload'
+import CompanySelect from '@comp/company/CompanySelect'
+import ContactManagementModule from '@views/businessManagement/modules/ContactManagementModule'
+import SelectPrincipal from '@comp/company/SelectPrincipal'
+import SelectContacts from '@comp/company/SelectContacts'
+
+export default {
+  name: 'WorkingGroupMemberUnitModule',
+  components: { JYearDate, JUpload, CompanySelect, ContactManagementModule, SelectPrincipal, SelectContacts },
+  data() {
+    return {
+      title: '操作',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      remarksLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      remarksWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 21 }
+      },
+      validatorRules: {
+        chargeCompany: {
+          rules: [{ required: true, message: '请选择成员单位' }],
+          validateTrigger: 'change'
+        },
+        contactsIdOne: {
+          rules: [{ required: true, message: '请选择企业联系人1' }],
+          validateTrigger: 'blur'
+        },
+        mailContactsId: {
+          rules: [{ required: true, message: '请选择邮寄联系人' }],
+          validateTrigger: 'blur'
+        },
+        chargeWay: {
+          rules: [{ required: true, message: '请选择来款方式' }],
+          validateTrigger: 'blur'
+        },
+        receivableAmount: {
+          rules: [{ required: true, message: '请输入应收金额' }],
+          validateTrigger: 'blur'
+        },
+        contractNum: {
+          rules: [{ required: true, message: '请输入合同号' }],
+          validateTrigger: 'blur'
+        },
+        chargeNoticeNo: {
+          rules: [{ required: true, message: '请输入收费通知号' }],
+          validateTrigger: 'blur'
+        },
+        needInvoice: {
+          rules: [{ required: true, message: '请选择发票类型' }],
+          validateTrigger: 'blur'
+        }
+      },
+      chargeWayType: null,
+      selectedCompany: null, // 当前选中的企业
+      selectedContact1: null, // 编辑时的联系人
+      selectedContact2: null, // 编辑时的联系人
+      selectedContact3: null, // 编辑时的联系人
+      selectedMailContact: null, // 编辑时的邮寄联系人
+      chargeNoticeList: [], // 收费通知号list
+      selectedChargeNotice: null, // 选中的收费通知号
+      workingGroupId: null,
+      url: {
+        add: '/project/payWorkingGroupSubitem/add',
+        edit: '/project/payWorkingGroupSubitem/edit'
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      record.chargeCompany = {
+        id: record.chargeCompanyId,
+        companyName: record.chargeCompanyTemporaryName
+      }
+      // 回显选中的企业
+      this.selectedCompany = record.chargeCompany
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      if (this.model.id) {
+        this.selectedContact1 = {
+          id: this.model.contactsTemporaryIdOne,
+          name: this.model.contactsTemporaryNameOne
+        }
+        this.selectedContact2 = {
+          id: this.model.contactsTemporaryIdTwo,
+          name: this.model.contactsTemporaryNameTwo
+        }
+        this.selectedContact3 = {
+          id: this.model.contactsTemporaryIdThree,
+          name: this.model.contactsTemporaryNameThree
+        }
+        this.selectedMailContact = {
+          id: this.model.mailContactsTemporaryId,
+          name: this.model.mailContactsTemporaryName
+        }
+      }
+      this.chargeWayType = record.chargeWay
+      this.pickChargeNoticeType(record.chargeNoticeNo)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'chargeCompany', 'contactsIdOne', 'contactsIdTwo', 'contactsIdThree', 'mailContactsId', 'chargeWay', 'chargeNoticeNo', 'receivableAmount', 'contractNum', 'receivableAmount', 'chargeNoticeId', 'needInvoice', 'remarks'))
+      })
+    },
+    close() {
+      this.$emit('close')
+      this.chargeWayType = null
+      this.selectedCompany = null
+      this.visible = false
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          values.chargeCompanyTemporaryName = values.chargeCompany.companyName
+          values.chargeCompanyId = values.chargeCompany.id
+          let httpurl = ''
+          let method = 'post'
+          if (!this.model.id) {
+            httpurl += this.url.add
+          } else {
+            httpurl += this.url.edit
+          }
+          values.workingGroupId = this.workingGroupId
+          const formData = Object.assign(this.model, values)
+          console.log('表单提交数据', formData)
+          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(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    /**
+     * 来款方式变化
+     * @param e
+     */
+    handlechargeWayChange(e) {
+      if (e.target.value === 3) {
+        if (this.chargeNoticeList.length === 0) {
+          this.$message.warn('请先补充该工作组的收费通知信息')
+          return
+        }
+      }
+      this.chargeWayType = e.target.value
+    },
+    /**
+     * 收费通知号变化, 回显本年应收款和文件
+     */
+    handleChargeNoticeChange(e) {
+      let chargeNoticeNo = e.target.value
+      this.pickChargeNoticeType(chargeNoticeNo)
+    },
+    /**
+     * 匹配显隐
+     * @param value
+     */
+    pickChargeNoticeType(value) {
+      this.chargeNoticeList.forEach(item => {
+        if (item.value === value) {
+          if (item.type === 'chargeNoticeA') {
+            this.selectedChargeNotice = 'A'
+            this.model.receivableAmount = item.yearCharge
+            this.model.chargeNoticeId = item.chargeNoticeId
+          } else {
+            this.selectedChargeNotice = 'B'
+            this.model.receivableAmount = item.yearCharge
+            this.model.chargeNoticeId = item.chargeNoticeId
+          }
+        }
+      })
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'receivableAmount', 'chargeNoticeId'))
+      })
+    },
+    /**
+     * 选中企业变化，将联系人的值清空
+     * @param value
+     */
+    companyChange(value) {
+      this.selectedCompany = value
+      this.model.contactsId = undefined
+      this.model.mailContactsId = undefined
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'contactsId', 'mailContactsId'))
+      })
+    },
+    /**
+     * 企业必填校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkCompany(rules, value, callback) {
+      if (value.id && value.companyName) {
+        callback()
+        return
+      }
+      callback('请选择企业')
+    },
+    /**
+     * 在新增成功后重新获取联系人列表
+     */
+    addContactsOk() {
+      this.$refs.selectContacts1.getContactsList()
+      this.$refs.selectContacts2.getContactsList()
+      this.$refs.selectContacts3.getContactsList()
+      this.$refs.selectMailContacts.getContactsList()
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>