income_payments_client/src/views/projectManagement/modules/WorkingGroupMemberSetChargeNotice.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-form-item label="收费通知号" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
          <a-radio-group
            class="charge-notice-no"
            v-decorator="['charge']"
            @change="handleChargeNoticeChange">
            <a-radio v-for="item in chargeNoticeList" :key="item.key" :value="item.key">
              <a-tooltip :title="item.label">
                {{ item.label }}
              </a-tooltip>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-row v-if="selectedChargeNotice === 'A'">
          <a-col :xl="12" :sm="24">
            <a-form-item label="本年应收款A" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入本年应收款A"
                       v-decorator="['receivableAmount']"
                       :maxLength='50'
                       @blur="addZero"
                       @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 :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="selectedChargeNotice === 'B'">
          <a-col :xl="12" :sm="24">
            <a-form-item label="本年应收款B" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入本年应收款B"
                       v-decorator="['receivableAmount']"
                       :maxLength='50'
                       @blur="addZero"
                       @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 :multiple="false"
                        :return-id="true"
                        bizPath="payment"
                        v-decorator="['chargeNoticeId']"
                        :trigger-change="true"></j-upload>
            </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 JUpload from '@/components/jero/JUpload'
import { postAction } from '@/api/manage'
import { addZero } from '../../../utils/util'

export default {
  name: 'WorkingGroupMemberSetChargeNotice',
  components: { JUpload },
  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 }
      },
      selectedRowKeys: null, // 选中项目的id
      chargeNoticeList: null, // 收费通知列表
      selectedChargeNotice: null, // 选中的收费通知类型
      url: {
        setCharge: '/project/payWorkingGroupSubitem/setCharge'
      }
    }
  },
  methods: {
    addZero,
    handleOpen() {
      this.visible = true
    },
    handleOk() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          const formData = Object.assign(this.model, values)
          console.log('表单提交数据', formData)
          formData.ids = this.selectedRowKeys.join(',')
          postAction(this.url.setCharge, formData).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
              this.close()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
      this.model = {}
    },
    /**
     * 收费通知号变化, 回显本年应收款和文件
     */
    handleChargeNoticeChange(e) {
      let key = e.target.value
      this.pickChargeNoticeType(key)
    },
    /**
     * 匹配显隐
     * @param key
     */
    pickChargeNoticeType(key) {
      this.chargeNoticeList.forEach(item => {
        if (item.type === 'chargeNoticeA' && key === 'a') {
          this.selectedChargeNotice = 'A'
          this.model.receivableAmount = item.yearCharge
          this.model.chargeNoticeId = item.chargeNoticeId
          this.model.chargeNoticeNo = item.value
        } else if (item.type === 'chargeNoticeB' && key === 'b'){
          this.selectedChargeNotice = 'B'
          this.model.receivableAmount = item.yearCharge
          this.model.chargeNoticeId = item.chargeNoticeId
          this.model.chargeNoticeNo = item.value
        }
      })
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'receivableAmount', 'chargeNoticeId'))
      })
    }
  }
}
</script>

<style scoped>

</style>