Vue_New/src/xt_pages/data/components/diagnosisDialog.vue

<template>
  <el-dialog width="854px" :title="titles" :visible.sync="visibility" :close-on-click-modal="isClose"
             :close-on-press-escape="isClose">

    <el-form :model="formValue" :rules="rules" ref="formValue" class="demo-form-inline"
             :label-position="labelPosition"
             label-width="100px">

      <el-row>
        <el-col :span="8">
          <el-form-item label="大类名称" prop="class_name">
            <el-input v-model="formValue.class_name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="拼音" prop="pinyin">
            <el-input v-model="formValue.pinyin"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="五笔" prop="wubi">
            <el-input v-model="formValue.wubi"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="目录代码" prop="content_code">
            <el-input v-model="formValue.content_code"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="国家编码" prop="country_code">
            <el-input v-model="formValue.country_code"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="国家目录名称" prop="country_content_name">
            <el-input v-model="formValue.country_content_name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-col>
        <el-form-item label="备注">
          <el-input type="textarea" :row="5" v-model="formValue.remark"
                    placeholder="请输入内容">
          </el-input>
        </el-form-item>
      </el-col>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button v-if="isCreated == 3" @click="cancle('formValue')">取 消</el-button>
    <el-button v-if="isCreated != 3 " @click="cancle('formValue')">取 消</el-button>
    <el-button v-if="isCreated != 3" type="primary" @click="comfirm('formValue')">保 存</el-button>
  </span>
  </el-dialog>

</template>

<script>
  export default {
    name: 'diagnosisDialog',

    data() {

      return {
        visibility: false,
        labelPosition: 'right',
        isClose: false,
        form: {
          class_name: '',
          content_code: '',
          country_code: '',
          country_content_name: '',
          remark: '',
          pinyin: '',
          wubi: ''

        },
        resetForm: {
          class_name: '',
          content_code: '',
          country_code: '',
          country_content_name: '',
          remark: '',
          pinyin: '',
          wubi: ''
        },
        rules: {
          class_name: [
            { required: true, message: '请输入大类名称', trigger: 'blur' }
          ],
          content_code: [
            { required: true, message: '请输入目录代码', trigger: 'blur' }
          ]

        }
      }
    },
    props: {

      titles: {
        type: String,
        default: ''
      },
      formValue: {
        type: Object
      },
      type: {
        type: Number,
        default: 1

      },
      isCreated: {
        type: Number,
        default: 1

      }
    },
    methods: {
      show: function() {
        this.visibility = true

      }, hide: function() {
        this.visibility = false
      },
      cancle: function(formName) {
        this.$emit('dialog-cancle', this.getValue())
        this.$refs['formValue'].resetFields()
      },
      comfirm: function(formName) {
        this.$refs['formValue'].validate((valid) => {
          if (valid) {
            let value = {}
            value = this.getValue()
            this.$emit('dialog-comfirm', value)
            this.form = Object.assign({}, this.resetForm)

          }
        })
      },
      getValue: function() {
        let form = {}
        form = this.formValue
        form['title'] = this.titles
        form['type'] = this.type
        form['isCreated'] = this.isCreated
        return form
      }
    }

  }
</script>

<style scoped>

</style>