laws-sinotruk-client/src/views/documentManage/modules/PhasedImplementationModal.vue

<template>
  <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :maskClosable="false"
    @cancel="visible = false"
  >
    <a-form-model :rules="rules" :model="tableDataGrad"
                  ref="tableRuleForm">
      <a-row :gutter="24">
        <a-col :span="12">
          <div class="box-title-text">
            <div class="title-text">
              <span class="required">*</span>
              <span :title="$t('docLibrary.statuteNumberClause')">{{$t('docLibrary.statuteNumberClause')}}</span>
            </div>
            <a-form-model-item class="item-model" prop="standNumberOrClause">
              <a-input class="box-input" v-model.trim="tableDataGrad.standNumberOrClause"
                       :placeholder="$t('pleaseEnter')+$t('docLibrary.statuteNumberClause')"/>
            </a-form-model-item>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="box-title-text">
            <div class="title-text">
              <span class="required">*</span>
              <span :title="$t('docLibrary.typeofImplementation')">{{$t('docLibrary.typeofImplementation')}}</span>
            </div>
            <a-form-model-item class="item-model" prop="implementationType">
              <j-multi-select-tag class="box-input" v-model="tableDataGrad.implementationType"
                                  :placeholder="$t('pleaseSelect')+$t('docLibrary.typeofImplementation')"
                                  :type="'select'"
                                  @changeQuery='implementationTypeChange'
                                  :triggerChange="false" dictCode="shi2_shi1_lei4_xing2"/>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <div class="box-title-text">
            <div class="title-text">
              <span class="required">*</span>
              <span :title="$t('docLibrary.implementationDateTwo')">{{$t('docLibrary.implementationDateTwo')}}</span>
            </div>
            <a-form-model-item class="item-model" prop="implementationDate">
              <a-date-picker class="box-input" v-model="tableDataGrad.implementationDate"
                             :placeholder="$t('pleaseSelect')+$t('docLibrary.implementationDateTwo')"
                             format="YYYY-MM-DD"
                             value-format="YYYY-MM-DD"
                             style="width: 100%"/>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
              <span :title="$t('remarks')">{{$t('remarks')}}</span>
            </div>
            <a-form-model-item class="item-model" style="height: auto" prop="remarks">
              <a-textarea :placeholder="$t('pleaseEnter')+$t('remarks')"
                          :rows="4" v-model="tableDataGrad.remarks"/>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
    <template slot="footer">
      <a-button key="back" @click="visible = false">
        {{ $t('cancel') }}
      </a-button>
      <a-button key="submit" type="primary" @click="handleTableSubmit">
        {{ $t('determine') }}
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'

export default {
  name: 'PhasedImplementationModal',
  components: { JMultiSelectTag },
  data () {
    return {
      visible: false,
      title: '',
      confirmLoading: false,
      rules: {
        standNumberOrClause: [
          {
            required: true,
            message: this.$t('docLibrary.statuteNumberClause') + this.$t('cannotEmpty'),
            trigger: 'blur'
          },
          {
            // required: true,
            max: 200,
            message: this.$t('docLibrary.statuteNumberClause') + this.$t('cannotExceed') + 200 + this.$t('characters'),
            trigger: 'blur'
          }
        ],
        implementationType: [
          {
            required: true,
            message: this.$t('docLibrary.typeofImplementation') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ],
        implementationDate: [
          {
            required: true,
            message: this.$t('docLibrary.implementationDateTwo') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ],
        remarks: [
          {
            // required: true,
            max: 1000,
            message: this.$t('remarks') + this.$t('cannotExceed') + 1000 + this.$t('characters'),
            trigger: 'blur'
          }
        ]
      },
      tableDataGrad: {},
      index: 0,
      isEdit: false
    }
  },
  methods: {
    add () {
      this.title = this.$t('newlyAdded')
      this.visible = true
      this.isEdit = false
      this.tableDataGrad = {}
    },
    edit (record, index) {
      this.title = this.$t('edit')
      this.visible = true
      this.isEdit = true
      this.index = index
      this.tableDataGrad = Object.assign({}, record)
    },
    // 实施类型下拉框改变
    implementationTypeChange (val) {
      this.tableDataGrad.implementationTypeText = val
    },
    // 分阶段实施详情的新增弹框
    handleTableSubmit () {
      this.$refs.tableRuleForm.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.$emit('submit', this.tableDataGrad, this.index)
          } else {
            this.$emit('submit', this.tableDataGrad)
          }
          this.visibleGrad = false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>