laws_weilai/jero-web/src/views/businessSupport/problemKnowledgeBase/components/optionMaintenanceAdd.vue

<template>
  <a-modal
    :title="title"
    :width="700"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
      <a-row :gutter="24">
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
              <span class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('name')">{{$t('name')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="name">
              <a-input class="box-input"
                       v-model="formInline.name"
                       :placeholder="$t('PleaseEnter')+$t('name')"/>
            </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 class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('enName')">{{$t('enName')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="enName">
              <a-input class="box-input"
                       v-model="formInline.enName"
                       :placeholder="$t('PleaseEnter')+$t('enName')"/>
            </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 class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('DisplayOrder')">{{$t('DisplayOrder')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="DisplayOrder">
              <a-input-number class="box-input"
                              v-model="formInline.DisplayOrder"
                              :placeholder="$t('PleaseEnter')+$t('DisplayOrder')"/>
            </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 class="title-text-text"
                    :title="$t('describe')">{{$t('describe')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="describe">
              <a-textarea
                :placeholder="$t('PleaseEnter')+$t('describe')"
                :disabled="disabled"
                v-model="formInline.describe" :rows="4"/>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
  import { getAction, postAction, downloadFile } from '@/api/manage'

  export default {
    name: 'optionMaintenanceAdd',
    data() {
      return {
        visible: false,
        confirmLoading: false,
        formInline: {},
        disabled: false,
        rules: {
          name: [
            {
              required: true,
              message: this.$t('name') + this.$t('cannotEmpty'),
              trigger: 'blur'
            },
            {
              max: 100,
              message: this.$t('name') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
              trigger: 'blur'
            }
          ],
          enName: [
            {
              required: true,
              message: this.$t('enName') + this.$t('cannotEmpty'),
              trigger: 'blur'
            },
            {
              max: 100,
              message: this.$t('enName') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
              trigger: 'blur'
            }
          ],
          DisplayOrder: [
            {
              required: true,
              message: this.$t('DisplayOrder') + this.$t('cannotEmpty'),
              trigger: 'blur'
            }
          ],
          describe: [
            {
              max: 300,
              message: this.$t('describe') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
              trigger: 'blur'
            }
          ]
        },
        title: ''
      }
    },
    mounted() {
    },
    methods: {
      add() {
        this.visible = true
        this.title = this.$t('newlyAdded')
        this.$nextTick(() => {
          this.formInline = {}
          this.$refs.ruleForm.clearValidate()
        })
      },
      edit(data) {
        this.visible = true
        this.title = this.$t('edit')
        this.$nextTick(() => {
          this.formInline = data
          this.$refs.ruleForm.clearValidate()
        })
      },
      PersonnelSelectionChange(value, id) {
        this.formInline[value] = id
        this.formInline = { ...this.formInline }
      },
      handleOk() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {

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

<style scoped>
  .box-title-text {
    line-height: 1.4;
    display: flex;
  }

  .title-text {
    width: 84px;
    text-align: right;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    margin-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 42px;
    line-height: 42px;
  }

  .box-input {
    display: inline-block;
    height: 38px;
    width: 100%;
  }

  .itemModel {
    width: calc(100% - 130px);
    display: inline-block;
    margin-top: 2px;
  }

  .title-text-text {
    margin-top: 9px;
  }

  .formAdd {
    margin-bottom: 40px;
  }

  .Required {
    color: red;
    margin-right: 4px;
  }
</style>