income_payments_client/src/views/functionalSafetyCenter/modules/SafetyCenterModule.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 :span="24">
            <a-form-item label="项目名称" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
              <a-input placeholder="请输入项目名称"
                       v-decorator="['projectName',validatorRules.projectName]"
                       :maxLength='50'
                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <select-principal placeholder="请选择负责人"
                                v-decorator="['principalId',validatorRules.principalId]"
                                :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="请输入任务及目标"
                :auto-size="{ minRows: 3, maxRows: 6 }"
                v-decorator="['missionAndObjectives']"
                :maxLength='200'
                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
            </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>
    </a-spin>
  </j-modal>
</template>

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

export default {
  name: 'SafetyCenterModule',
  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: {
        projectName: {
          rules: [{ required: true, message: '请输入项目名称' }],
          validateTrigger: 'blur'
        },
        year: {
          rules: [{ required: true, message: '请选择运行年份' }],
          validateTrigger: 'change'
        },
        principalId: {
          rules: [{ required: true, validator: '请选择负责人' }],
          validateTrigger: 'change'
        },
        checkMoney: {
          rules: [{ required: false, validator: this.checkMoney }],
          validateTrigger: 'blur'
        }
      },
      // 研究组的接口
      url: {
        add: '/SafetyCenter/add',
        edit: '/SafetyCenter/edit'
      },
      // 项目组的接口
      projectUrl: {
        add: '/SafetyCenter/addProjectGroup',
        edit: '/SafetyCenter/editProjectGroup'
      },
      // 项目类型，默认是研究组
      projectType: SafetyCenterProjectTypeEnums.studyGroup.value
    }
  },
  methods: {
    addZero,
    add() {
      this.edit({})
    },
    edit(record) {
      // 有id就是项目组
      if (this.$route.query.id) {
        this.projectType = SafetyCenterProjectTypeEnums.projectGroup.value
      } else {
        this.projectType = SafetyCenterProjectTypeEnums.studyGroup.value
      }
      this.form.resetFields()
      // 防止下拉选项出现问题
      record.principalId = record.principalId || undefined
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model,
          'projectName',
          'principalId',
          'missionAndObjectives',
          'remarks'
        ))
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      if (this.confirmLoading) {
        return
      }
      this.confirmLoading = true
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = 'post'
          // 研究组用url，项目组用projectUrl
          const urlObj = this.projectType === SafetyCenterProjectTypeEnums.studyGroup.value ? this.url : this.projectUrl
          if (!this.model.id) {
            httpurl += urlObj.add
          } else {
            httpurl += urlObj.edit
          }
          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(() => {
            setTimeout(() => {
              this.confirmLoading = false
            }, 1000)
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    // 下拉框的搜索
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    handleCancel() {
      this.close()
    },
  }
}
</script>

<style scoped lang="less">
.prompt-message {
  color: red;

  &-line2 {
    padding-left: 2.7rem;
  }
}
</style>