index.vue

<template>
  <div
    class="hsInputBox"
    :id='elId'
  >
    <div
      class="inputTitle"
      v-if='configData.title'
    >{{configData.title}}</div>
    <div class="inputCurr">
      <el-input
        :clearable='clearable'
        :size='configData.size'
        @clear='clear'
        @keyup.enter.native="submitInput"
        v-model="value_inner"
        @input='inputFun'
        @change='changeFun'
        @blur="inputBlur"
        :disabled="isReadOnly"
        :placeholder="configData.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";
import _ from "lodash";
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,
      isInputed: false,
      clearable: true,
      configData: {
        title: "",
        placeholder: "",
        size: "mini",
        clearable: true,
        placeholder: ""
      }
    };
  },
  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);
    },
    clear(value) {
      const { clear } = this.configData;
      this.execAction(clear, 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 config_ = _.cloneDeep(config);
      this.configData = Object.assign(this.configData, config_);
    },
    submitInput(val) {
      const { entered } = this.configData;
      this.execAction(entered, value, this.elInfo);
      this.$emit("enterInput", this.value_inner, this.elInfo);
    }
  }
};
</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>