income_payments_client/src/views/dataNetworkDiskManagement/committee/modules/CommitteeMemberModule.vue

<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 :xl="12" :sm="24">
            <a-form-item label="分标委名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入分标委名称"
                       v-decorator="['name',validatorRules.name]"
                       :disabled="true"
                       :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="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <company-select placeholder="请选择企业"
                              v-decorator="['company',validatorRules.company]"
                              @change="companyChange">
              </company-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="12" :sm="24">
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <!--              联系人使用将label、value合并为数组形式传值-->
              <select-contacts :selected-company="selectedCompany"
                               placeholder="请选择联系人"
                               v-decorator="['contacts',validatorRules.contacts]"
                               :maxLength='50'
                               ref="selectContacts"
                               labelInValue
                               @change="handleContactChange"
                               @ok="addContactsOk"></select-contacts>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :sm="24">
            <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入职务"
                       v-decorator="['post',validatorRules.post]"
                       :disabled="true"
                       :maxLength='50'
                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="12" :sm="24">
            <a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入手机"
                       v-decorator="['phone',validatorRules.phone]"
                       :disabled="true"
                       :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="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入邮箱"
                       v-decorator="['email',validatorRules.email]"
                       :disabled="true"
                       :maxLength='50'
                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button @click="handleOk" type="primary" v-preventclick>确定</a-button>
    </template>
  </j-modal>
</template>

<script>
import pick from 'lodash.pick'
import { httpAction } from '@api/manage'
import { getContactsById } from '@api/api'
import CompanySelect from '@comp/company/CompanySelect'
import SelectContacts from '@comp/company/SelectContacts'

export default {
  name: 'CommitteeMemberModule',
  components: { CompanySelect, SelectContacts },
  data() {
    return {
      title: '操作',
      width: 800,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      selectedCompany: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      validatorRules: {
        company: {
          rules: [{ required: true, message: '请选择企业' }],
          validateTrigger: 'blur'
        },
        contacts: {
          rules: [{ required: true, message: '请选择联系人' }],
          validateTrigger: 'blur'
        }
      },
      url: {
        add: '/payCaseCommitteeSubitem/payCaseCommitteeSubitem/add'
      }
    }
  },
  methods: {
    add(record) {
      this.edit(record)
    },
    edit(record) {
      console.log(record)
      this.form.resetFields()
      let recordValue = {
        name: record.name,
        committeeId: record.id
      }
      this.model = Object.assign({}, recordValue)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'name'))
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          let httpurl = this.url.add
          let method = 'post'
          // 拆分联系人信息
          values.contactsName = values.contacts.label
          values.contactsId = values.contacts.key
          const submitValue = Object.assign(this.model, values)
          const formData = {
            committeeId: submitValue.committeeId,
            companyId: submitValue.companyId,
            companyName: submitValue.companyName,
            contactsId: submitValue.contactsId,
            contactsName: submitValue.contactsName
          }
          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 value
     */
    companyChange(value) {
      console.log(value)
      this.selectedCompany = value
      this.model.contacts = undefined
      this.model.email = undefined
      this.model.phone = undefined
      this.model.post = undefined
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'contacts', 'email', 'phone', 'post'))
      })
    },
    /**
     * 在新增成功后重新获取联系人列表
     */
    addContactsOk() {
      this.$refs.selectContacts.getContactsList()
    },
    /**
     * 获取选中联系人的信息并回显
     * @param value
     */
    handleContactChange(value) {
      const param = {
        id: value.key
      }
      getContactsById(param).then(res => {
        this.model = Object.assign(this.model, res.result)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'email', 'phone', 'post'))
        })
      })
    }
  }
}
</script>

<style scoped>

</style>