laws_chery_client/src/views/enterpriseStandardLibrary/standard/modules/CheckContentModal.vue

<template>
  <j-modal
    :title="title"
    :maskClosable="true"
    :width="800"
    :closable="true"
    @cancel="handleCancel"
    switchFullscreen
    @ok="handleOk"
    :visible="visible">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!--  章节条款 -->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('enterpriseStandardLibrary.standard.subjectToClause')">
          <a-input :placeholder="$t('pleaseEnter') + $t('enterpriseStandardLibrary.standard.subjectToClause')"
                   :maxLength="50"
                   v-decorator.trim="[ 'clause', validatorRules.clause ]" />
        </a-form-item>
        <!--  整改部门  -->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('enterpriseStandardLibrary.standard.rectificationDepartment')">
          <j-select-depart  :placeholder="$t('pleaseSelect') + $t('enterpriseStandardLibrary.standard.rectificationDepartment')"
                            v-decorator.trim="[ 'rectificationDepartment', validatorRules.rectificationDepartment ]"
                            @back="rectificationDepartmentBack"
                            backDepart />
        </a-form-item>
        <!--  标准内容或要求  -->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('enterpriseStandardLibrary.standard.standardContentOrRequirements')">
          <a-input :placeholder="$t('pleaseEnter') + $t('enterpriseStandardLibrary.standard.standardContentOrRequirements')"
                   :maxLength="2000"
                   :rows="4"
                   type="textarea"
                   v-decorator.trim="[ 'requirement', validatorRules.requirement ]" />
        </a-form-item>
      </a-form>
    </a-spin>

  </j-modal>
</template>

<script>
import pick from 'lodash.pick'

export default {
  name: 'CheckContentModal',
  data () {
    return {
      title: '',
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      validatorRules: {
        clause: {
          rules: [
            { required: false, message: this.$t('pleaseEnter') + this.$t('enterpriseStandardLibrary.standard.subjectToClause') }
          ],
          validateTrigger: 'blur'
        },
        rectificationDepartment: {
          rules: [
            { required: false, message: this.$t('pleaseSelect') + this.$t('enterpriseStandardLibrary.standard.rectificationDepartment') }
          ],
          validateTrigger: 'change'
        },
        requirement: {
          rules: [
            { required: false, message: this.$t('pleaseEnter') + this.$t('enterpriseStandardLibrary.standard.standardContentOrRequirements') }
          ],
          validateTrigger: 'blur'
        }
      },
      index: undefined // 编辑的表格的下标
    }
  },
  methods: {
    add () {
      this.visible = true
      this.form.resetFields()
    },
    edit (record, index) {
      this.visible = true
      this.index = index
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'clause', 'rectificationDepartment', 'requirement'))
      })
    },
    // 整改部门返回
    rectificationDepartmentBack (val) {
      this.model.rectificationDepartment_dictText = val.map(item => item.text).join(',')
    },
    close () {
      this.visible = false
      this.model = {}
      this.index = undefined
    },
    handleCancel () {
      this.close()
    },
    handleOk () {
      if (this.confirmLoading) return
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          const param = Object.assign({}, this.model, values)
          console.log(param)
          this.$emit('ok', param, this.index)
          this.close()
          this.confirmLoading = false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  .content-left {
    width: 60%;
    height: 100%;
    overflow-y: scroll;
    .left-spin {
      height: 100%;
    }
    /deep/ .ant-spin-container {
      height: 100%;
    }
    iframe {
      height: calc(100% - 20px) !important;
    }
  }
  .content-right {
    width: 40%;
    height: 100%;
    overflow-y: scroll;
  }
}

.empty-file {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

</style>