index.vue

<template>
  <div
    :id='elId'
    class="selectBoxPlus"
    style='width:100%;height:100%;'
  >
    <div
      class="contarnBox"
      style='width:100%;height:100%;'
    >
      <div
        class="selectTitle"
        v-show='configData.title'
      >{{configData.title}}</div>
      <div
        class="selectCurr"
        style='width:80%;height:100%;'
      >
        <el-date-picker
          @change='changed'
          size='mini'
          v-model="value_inner"
          :type="configData.type"
          :value-format="configData.valueFormat"
          :placeholder="configData.placeholder"
          :range-separator="configData.rangeSeparator"
          :start-placeholder="configData.startPlaceholder"
          :end-placeholder="configData.endPlaceholder"
        >
        </el-date-picker>
      </div>
    </div>
    <jsoneditor
      v-model='jsoneditorVisible'
      :elInfo='elInfo'
      :layout='layout'
      :jsoneditorCloseAfter='jsoneditorCloseAfter'
      :jsoneditorOpenAfter='jsoneditorOpenAfter'
    >
    </jsoneditor>
  </div>
</template>
<script>
import jsoneditor from "../common/jsoneditor";
import ucComponent from "../ucClass/uc_component";
export default {
  mixins: [ucComponent],
  components: {
    jsoneditor
  },
  name: "hs-date-picker",
  props: {
    elInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    allSourceData: {
      type: Object,
      default() {
        return {};
      }
    },
    value: "",
    layout: {},
    jsoneditorCloseAfter: {
      type: Function
    },
    jsoneditorOpenAfter: {
      type: Function
    }
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        const { config } = newVal;
        this.initConfig(config);
      },
      deep: true
    },
    value(val) {
      this.value_inner = val;
    },
    value_inner(val) {
      this.$emit("input", val);
    }
  },
  data() {
    return {
      elId: "",
      value_inner: "",
      jsoneditorVisible: false,
      configData: {}
    };
  },
  mounted() {
    const { config } = this.allSourceData;
    this.initConfig(config);
  },
  methods: {
    execAction(actionName, value) {
      const type = typeof actionName;
      if (type === "function") {
        actionName(value, this.formData);
      }
    },
    changed(value) {
      this.$emit('changed',value);
      const { changed } = this.configData;
      this.execAction(changed,value)
    },
    initConfig(config) {
      if (!config) return;
      this.configData = config;
    }
  }
};
</script>
<style scoped>
.hsInputBox {
  padding: 1px;
  width: 100%;
  height: 100%;
  display: flex;
}
.hsInputInner {
  height: 80%;
  width: 80%;
}
.inputTitle {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputCurr {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.contarnBox {
  display: flex;
}
.selectTitle {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selectCurr {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selectBoxPlus >>> .el-select > .el-input {
  height: 100%;
}
.selectBoxPlus >>> .el-select .el-input__inner {
  height: 100%;
}
</style>