ItemComponentChild.vue

<template>
  <div style="width:100%;height:100%;">
    <template v-if="item.showType==='text'||!item.showType">
      <span
        style="width:100%"
        clearable
        :style="{width:item.width+'px'}"
        size='mini'
        :placeholder="item.label"
      >{{formParms[item.prop]}}</span>
    </template>
    <template v-if="item.showType==='input'">
      <el-input
        @keyup.enter.native="enterInput"
        style="width:100%"
        clearable
        :disabled='disabled'
        size='mini'
        v-model="formParms[item.prop]"
        :placeholder="item.label"
      ></el-input>
    </template>
    <template v-if="item.showType==='textarea'">
      <el-input
        style="width:100%"
        type='textarea'
        clearable
        :disabled='disabled'
        v-model="formParms[item.prop]"
        :placeholder="item.label"
      ></el-input>
    </template>

    <template v-if="item.showType==='elDatePicker'">
      <el-date-picker
        clearable
        :disabled='disabled'
        style="width:100%"
        size='mini'
        v-model="formParms[item.prop]"
        type="daterange"
        valueFormat='yyyy-MM-dd'
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </template>
    <template v-if="item.showType==='elDatePickerDatetime'">
      <el-date-picker
        clearable
        :disabled='disabled'
        style="width:100%"
        size='mini'
        v-model="formParms[item.prop]"
        type="datetime"
        valueFormat='yyyy-MM-dd HH:mm:ss'
        placeholder="选择日期时间"
      >
      </el-date-picker>
    </template>
    <template v-if="item.showType==='elSwitch'">
      <hsSwitch
        style="width:100%"
        size='mini'
        v-model="formParms[item.prop]"
        :disabled='disabled'
      >
      </hsSwitch>
    </template>
    <template v-if="item.showType==='elCheckbox'">
      <el-checkbox
        style="width:100%"
        size='mini'
        :disabled='disabled'
        v-model="formParms[item.prop]"
      >
      </el-checkbox>
    </template>
    <template v-if="item.showType==='hsComputed'">
        <hsComputed
        v-model="formParms[item.prop]"
        :allSourceData='item.allSourceData'
        :elInfo='item.elInfo'
        :readonly='disabled'
        :formData='formParms'
        >
      </hsComputed>
    </template>
    <template v-if="item.showType==='hsSelectPlus'">
      <hsSelectPlus
       v-model="formParms[item.prop]"
      :allSourceData='item.allSourceData'
      :elInfo='item.elInfo'
      :writeBackObject='formParms'
      :readonly='disabled'
      :requestMethod='item.requestMethod'
      >
      </hsSelectPlus>
    </template>
  </div>

</template>
<script>
export default {
  name: 'dyncFormItemComponentChild_',
  props: {
    item: {},
    formParms: {},
    jsoneditorOpenAfter: {
      type: Function
    },
    allColumsConfig: {},
    readonly: {}
  },
  watch: {
    item: {
      handler: function(newData) {},
      deep: true
    }
  },
  computed: {
    disabled() {
      let bool = false
      if (this.formParms._readonlyFields) {
        bool = JSON.parse(this.formParms._readonlyFields).includes(
          this.item.prop
        )
      } else {
        bool = this.item.isDisabled
      }
      return !!(this.readonly || bool)
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    enterInput(val) {
      this.$emit('enterInput', val)
    },
    showLabel(item) {
      if (item.isHideLabel) {
        return false
      }
      if (!item.label) {
        return false
      }
      return true
    },
    isShowItem(item) {
      if (item.isMoreSearch) {
        return false
      }
      if (!item.isHide) {
        return true
      }
    }
  }
}
</script>
<style scoped>
.inputBox {
  height: 100%;
}
</style>