index.vue

<template>
      <div  :id='elId'  class="outBox" :style="{'height':height}">
        <template v-if="type!=='queryArea'">
              <dyncFormItemComponentTable
                :elInfo='elInfo'
                :formParms='formParms'
                :jsoneditorOpenAfter='jsoneditorOpenAfter'
                :allSourceData='allSourceData_'
                :type='type'
                :readonlyStatus='readonlyStatus'
                >
              </dyncFormItemComponentTable>
        </template>
        <template v-else>
          <dyncFormItemComponentQuery
          :elInfo='elInfo'
          :formParms='formParms'
          :jsoneditorOpenAfter='jsoneditorOpenAfter'
          @submit='searchSubmit'
          @enterInput='searchSubmit'
          :allSourceData='allSourceData_'
          :type='type'
          ></dyncFormItemComponentQuery>
        </template>
          <jsoneditor
            :controlType='type'
            v-model='jsoneditorVisible'
            :elInfo='elInfo'
            :jsoneditorCloseAfter='jsoneditorCloseAfter'
            :jsoneditorOpenAfter='jsoneditorOpenAfter'
            >
          </jsoneditor>
      </div>
</template>
<script>
import ucComponent from '../ucClass/uc_component'
import jsoneditor from '../common/jsoneditor'
import _ from 'lodash'
import dyncFormItemComponentTable from './dyncFormItemComponentTable'
import dyncFormItemComponentQuery from './dyncFormItemComponentQuery'
export default {
  name: 'hsDyncForm',
  mixins: [ucComponent],
  components: {
    jsoneditor,
    dyncFormItemComponentTable,
    dyncFormItemComponentQuery
  },
  props: {
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    formParms: {},
    elInfo: {},
    jsoneditorCloseAfter: {
      default() {
        return () => {}
      }
    },
    jsoneditorOpenAfter: {
      default() {
        return () => {}
      }
    },
    type: {
      default: 'queryArea'
    },
    readonlyStatus: {}
  },
  watch: {
    allSourceData: {
      handler: function(newVal) {
        this.initConfig(newVal)
      },
      deep: true
    }
  },
  data() {
    return {
      jsoneditorVisible: false,
      height: '100%',
      allSourceData_: {}
    }
  },
  mounted() {
    this.initConfig(this.allSourceData)
  },
  methods: {
    initConfig(data) {
      this.allSourceData_ = _.cloneDeep(data)
      const { config } = this.allSourceData_
      if (!config) return
      const { height, formColumn } = config
      this.height = height || this.height
      if (formColumn) {
      // auto 生成控件名
        formColumn.forEach(item => {
          if (item.type.startsWith('hs')) {
            item.elInfo = {
              position: item.control_name,
              el: item.type
            }
          }
        })
      }
    },
    enterInput() {
      this.$emit('searchSubmit', this.formParms)
    },
    searchSubmit() {
      this.$emit('searchSubmit', this.formParms)
    }
  }
}
</script>
<style scoped>
.outBox{
  width: 100%;
}

</style>