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"
    @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">{{ item }}</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 class="box-input"
                           :placeholder="$t('pleaseSelect') + $t('standardRegulationLibrary.standardDetail.problemOccurrenceTime')"
                           :getCalendarContainer="(trigger) => trigger.parentNode"
                           v-decorator="['problemOccurrenceTime', validatorRules.problemOccurrenceTime]"
                           style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <!--          回答人-->
          <a-form-item :label="$t('standardRegulationLibrary.standardDetail.respondent')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <user-selection v-decorator="['respondent', validatorRules.respondent]"
                            :placeholder="$t('pleaseSelect') + $t('standardRegulationLibrary.standardDetail.respondent')" />
          </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="['fileIds', validatorRules.fileIds]" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </j-modal>
</template>

<script>
import UserSelection from '../../../../components/selection/UserSelection.vue'

export default {
  name: 'SubmitQuestionModal',
  components: { UserSelection },
  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'
        },
        // 问题发生时间
        problemOccurrenceTime: {
          rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('standardRegulationLibrary.standardDetail.problemOccurrenceTime') }],
          validateTrigger: 'change'
        },
        // 回答人
        respondent: {
          rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('standardRegulationLibrary.standardDetail.respondent') }],
          validateTrigger: 'change'
        },
        // 问题描述
        problemDescription: {
          rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('standardRegulationLibrary.standardDetail.problemDescription') }],
          validateTrigger: 'blur'
        },
        // 附件
        fileIds: {}
      },
      projectSelectOptions: [] // 项目下拉数据
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    handleOk () {

    },
    handleCancel () {

    },
    close () {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">

</style>