Vue_New/src/xt_pages/data/components/additionDialog.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="name">
            <el-input v-model="formValue.name"></el-input>
          </el-form-item>
        </el-col>


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


        <el-col :span="8">
          <el-form-item label="费用" >
            <el-input type="number" v-model="formValue.price"></el-input>
          </el-form-item>
        </el-col>

      </el-row>

    </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: {
          name: '',
          code: '',
          price: '',

        },
        resetForm: {
          name: '',
          code: '',
          price: '',
          wubi: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入费用名称', trigger: 'blur' }
          ],
          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>