index.vue

<template>
  <div class="hsInputBox" :id='elId'>
     <div class="inputTitle" v-if='title'>{{title}}</div>
     <div class="inputCurr">
          <el-input
          :size='size'
          @keyup.enter.native="submitInput"
          v-model="value_inner"
          @input='inputFun'
          @change='changeFun'
          @blur="inputBlur"
          :disabled="isReadOnly"
          :placeholder="placeholder||elInfo.placeholder"></el-input>
     </div>
    <jsoneditor v-model='jsoneditorVisible'
                :elInfo='elInfo'
                :layout='layout'
                :jsoneditorCloseAfter='jsoneditorCloseAfter'
                :jsoneditorOpenAfter='jsoneditorOpenAfter'
                >
    </jsoneditor>
  </div>
</template>
<script>
import ucComponent from '../ucClass/uc_component'
import uuidv1 from 'uuid/v1'
import jsoneditor from '../common/jsoneditor'
export default {
  mixins: [ucComponent],
  components: {
    jsoneditor
  },
  name: 'hsInput',
  props: {
    prop: {},
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    elInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    value: '',
    layout: {},
    jsoneditorCloseAfter: {
      type: Function,
      default() {
        return () => {}
      }
    },
    jsoneditorOpenAfter: {
      type: Function,
      default() {
        return () => {}
      }
    },
    readonly: {
      default: false
    }
  },
  watch: {
    formData: {
      handler: function(newVal, oldVal) {
        if (!this.isInputed) {
          const linkProps = this.configData.linkProps || []
          if (!linkProps.length) {
            this.inputComputed(this.value)
          }
          linkProps.forEach(item => {
            if (this.formData[`_${item}_`]) {
              this.inputComputed(this.value)
            }
          })
        }
      },
      deep: true
    },
    allSourceData: {
      handler: function(newVal, oldVal) {
        const { config } = newVal
        this.initConfig(config)
      },
      deep: true
    },
    value(val, oldVal) {
      this.value_inner = val
      this.valueChange(val)
    },
    value_inner(val) {
      this.$emit('input', val)
    }
  },
  computed: {
    isReadOnly: function() {
      return this.readonly || this.configData.disabled
    }
  },
  data() {
    return {
      elId: '',
      value_inner: '',
      jsoneditorVisible: false,
      title: '',
      placeholder: '',
      size: 'mini',
      configData: {},
      isInputed: false
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },
  mounted() {
    const { config } = this.allSourceData
    this.initConfig(config)
  },
  methods: {
    inputBlur() {
      this.isInputed = false
      this.formData[`_${this.prop}_`] = false
    },
    execAction(actionName, value) {
      const type = typeof actionName
      if (type === 'function') {
        actionName(value, this.formData)
      }
    },
    valueChange(value) {
      const { changing } = this.configData
      this.execAction(changing, value)
    },
    inputComputed(value) {
      const { computed } = this.configData
      this.execAction(computed, value)
    },
    changeFun(value) {
      const { changeed } = this.configData
      this.execAction(changeed, value)
    },
    inputFun(value) {
      this.isInputed = true
      this.formData[`_${this.prop}_`] = true
      const { inputed } = this.configData
      this.execAction(inputed, value)
    },
    initConfig(config) {
      if (typeof config !== 'object') return
      const { title, placeholder, size } = config
      this.configData = config
      this.title = title
      this.placeholder = placeholder

      if (size) {
        this.size = size
      }
    },
    submitInput(val) {
      const parm = {}
      parm[this.elInfo.prop] = this.value_inner
      this.$emit('enterInput', parm)
    }
  }
}
</script>
<style scoped>
.hsInputBox{
  padding: 1px;
  width:100%;
  height:100%;
  display: flex;
}
.inputTitle{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputCurr{
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>