laws-sinotruk-client/src/views/standardRegulationLibrary/commonPage/modules/SubmitQuestionModal.vue

<template>
  <j-modal
    :title="$t('standardRegulationLibrary.submitQuestion')"
    :maskClosable="false"
    :width="width"
    :visible="visible"
    :confirm-loading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel">

    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :span="12">
          <!--          标题-->
          <a-form-item :label="$t('title')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input :placeholder="$t('pleaseEnter') + $t('title')"
                     @change="event => event.target.value = event.target.value.trim()"
                     :maxLength="50"
                     v-decorator="['title', validatorRules.title]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <!--          项目-->
          <a-form-item :label="$t('project')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-select :placeholder="$t('pleaseSelect') + $t('project')" v-decorator="['project', validatorRules.project]">
              <a-select-option v-for="item in projectSelectOptions" :key="item.id">{{ item.projectName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <!--          标准编号-->
          <a-form-item :label="$t('standardRegulationLibrary.standardDetail.standardNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.standardDetail.standardNumber')"
                     @change="event => event.target.value = event.target.value.trim()"
                     :maxLength="50"
                     disabled
                     v-decorator="['standardNumber', validatorRules.standardNumber]" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <!--   提问时间-->
          <a-form-item :label="$t('standardRegulationLibrary.standardDetail.problemOccurrenceTime')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-date-picker :placeholder="$t('pleaseSelect') + $t('standardRegulationLibrary.standardDetail.problemOccurrenceTime')"
                           :getCalendarContainer="(trigger) => trigger.parentNode"
                           v-decorator="['quizTime', validatorRules.quizTime]"
                           showTime
                           style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <!--         问题描述-->
          <a-form-item :label="$t('standardRegulationLibrary.standardDetail.problemDescription')"
                       :labelCol="longLabelCol"
                       :wrapperCol="longWrapperCol">
            <a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.standardDetail.problemDescription')"
                     type="textarea"
                     @change="event => event.target.value = event.target.value.trim()"
                     :maxLength="500"
                     v-decorator="['problemDescription', validatorRules.problemDescription]" />
            <j-upload v-decorator="['file', validatorRules.file]" return-id />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </j-modal>
</template>

<script>
import { submitDomesticQuestion, submitOverseasQuestion } from '../../../../api/standardRegulationLibraryApi.js'
import { getCarTypeProjectList } from '../../../../api/projectLibraryApi.js'
import { StandardSource } from '../../../../enums/commonEnums.js'

export default {
  name: 'SubmitQuestionModal',
  data () {
    return {
      width: 800,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      modal: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      longLabelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      longWrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      validatorRules: {
        // 标题
        title: {
          rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('title') }],
          validateTrigger: 'blur'
        },
        // 项目
        project: {
          rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
          validateTrigger: 'change'
        },
        // 标准编号
        standardNumber: {
          rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('standardRegulationLibrary.standardDetail.standardNumber') }],
          validateTrigger: 'blur'
        },
        // 问题发生时间
        quizTime: {
          rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('standardRegulationLibrary.standardDetail.problemOccurrenceTime') }],
          validateTrigger: 'change'
        },
        // 问题描述
        problemDescription: {
          rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('standardRegulationLibrary.standardDetail.problemDescription') }],
          validateTrigger: 'blur'
        },
        // 附件
        file: {},
        type: null
      },
      projectSelectOptions: [] // 项目下拉数据
    }
  },
  methods: {
    open (standardNumber, type) {
      this.visible = true
      this.initProjectOptions()
      this.type = type
      const param = {}
      param.standardNumber = standardNumber
      param.quizTime = new Date().getFullYear() + '-' + new Date().getMonth() + '-' + new Date().getDay() + ' ' +
        new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
      this.$nextTick(() => {
        this.form.setFieldsValue(param)
      })
    },
    // 获取项目下拉框数据
    initProjectOptions () {
      getCarTypeProjectList().then(res => {
        if (res.success) {
          this.projectSelectOptions = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleOk () {
      if (this.confirmLoading) return
      this.form.validateFields((err, values) => {
        if (!err) {
          let submitFunc
          switch (this.type) {
            case StandardSource.DOMESTIC.value:
              submitFunc = submitDomesticQuestion
              break
            case StandardSource.OVERSEAS.value:
              submitFunc = submitOverseasQuestion
              break
            default:
              break
          }
          this.confirmLoading = true
          const param = Object.assign({}, values)
          submitFunc(param).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.close()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel () {
      this.close()
    },
    close () {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">

</style>