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

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <span class="prompt-message">
      说明：1.负责人A为该分标委的主负责人，负责人B为该分标委的辅助负责人。
      </span>
      <a-form :form="form">
        <a-row :gutter="10">
          <a-col :xl="12" :sm="24">
            <a-form-item label="分标委名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入分标委名称"
                       v-decorator="['name',validatorRules.name]"
                       :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">
              <div class="abbreviation">
                <div class="abbreviation-title">SC</div>
                <a-input placeholder="请输入分标委简称"
                         v-decorator="['abbreviation',validatorRules.abbreviation]"
                         :maxLength='50'
                         @change="e => e.target.value = (e.target.value.replace(/[^0-9]/g, '')).trim()"></a-input>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="负责人A" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <select-principal placeholder="请选择负责人A"
                                v-decorator="['principalIdA',validatorRules.principalIdA]"
                                :maxLength='50'></select-principal>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="负责人B" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <select-principal placeholder="请选择负责人B"
                                v-decorator="['principalIdB',validatorRules.principalIdB]"
                                :maxLength='50'></select-principal>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="目标简述" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
              <a-textarea
                placeholder="请输入目标简述"
                v-decorator="['remarks',validatorRules.remarks]"
                :auto-size="{ minRows: 3, maxRows: 6 }"
                :maxLength='200'
                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import pick from 'lodash.pick'
import SelectPrincipal from '@comp/company/SelectPrincipal'
import { httpAction } from '@api/manage'
import {isRepeat} from '../../../../utils/util'

export default {
  name: 'CommitteeModule',
  components: { SelectPrincipal },
  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: {
        name: {
          rules: [{ required: true, message: '请输入分标委名称' }],
          validateTrigger: 'blur'
        },
        abbreviation: {
          rules: [{ required: true, message: '请输入分标委简称' }],
          validateTrigger: 'blur'
        },
        principalIdA: {
          rules: [{ required: true, validator: this.validatePrincipal }],
          validateTrigger: 'change'
        },
        principalIdB: {
          rules: [{ required: false, validator: this.validatePrincipal }],
          validateTrigger: 'change'
        },
        remarks: {
          rules: [{ required: true, message: '请输入目标简述' }],
          validateTrigger: 'blur'
        }
      },
      url: {
        add: '/payCaseCommittee/payCaseCommittee/add',
        edit: '/payCaseCommittee/payCaseCommittee/edit'
      }
    }
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.model.principalIdB = this.model.principalIdB || undefined
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'name', 'abbreviation', 'remarks', 'principalIdA', 'principalIdB'))
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    /**
     * 校验负责人是否重复
     * @param rule
     * @param value
     * @param callback
     */
    validatePrincipal(rule, value, callback) {
      if (rule.field === 'principalIdA') {
        if (!value) {
          callback('请选择负责人A')
        }
      }
      if (value) {
        const principalObj = this.form.getFieldsValue(['principalIdA', 'principalIdB'])
        const principalArr = Object.values(principalObj)
        principalArr.filter(tt => tt !== undefined)
        if (isRepeat(principalArr)) {
          callback('请选择不同的负责人')
        } else {
          callback()
        }
        return
      }
      callback()
    },
    handleOk() {
      if (this.confirmLoading) {
        return
      }
      this.confirmLoading = true
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          let httpurl = ''
          let method = 'post'
          if (!this.model.id) {
            httpurl += this.url.add
          } else {
            httpurl += this.url.edit
          }
          const formData = Object.assign(this.model, values)
          // 把list的数据删掉
          delete formData.list
          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(() => {
            setTimeout(() => {
              this.confirmLoading = false
            }, 1000)
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.close()
    },
    // 下拉框的搜索
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style scoped lang="less">
.abbreviation {
  display: flex;
  align-items: center;

  &-title {
    flex-shrink: 0;
    padding: 0 10px 0 5px;
  }
}
.prompt-message {
  float: left;
  color: red;
  margin-bottom: 10px;
  &-line2 {
    padding-left: 2.7rem;
  }
}
</style>