formCmp.vue 2.14 KB
<template>
  <div>
    <dee-form
      ref="searchForm"
      :form="form"
      :form-data="showFormData"
      :rules="configData.rules"
      :form-buttons="formButtons"
      form-btn-position="center"
      :label-width="labelWidth"
      @on-submit="searchFun"
      @on-reset="resetFun"
    />
  </div>
</template>
<script>
import { getLayouts } from '@/api/config'
export default {
  name: 'DeeFormCmp',
  props: {
    typeName: {
      type: String,
      default: ''
    },
    typeKey: {
      type: String,
      default: 'search'
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    basicData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      configData: {},
      form: {},
      formButtons: [{
        'text': '查询',
        'type': 'submit',
        'component': {
          'type': 'primary',
          'size': 'small'
        }
      },
      {
        'text': '重置',
        'type': 'reset',
        'component': {
          'size': 'small'
        }
      }]
    }
  },
  computed: {
    showFormData() {
      return this.getFormData(this.configData)
    }
  },
  watch: {
    typeName: {
      immediate: true,
      handler: function(val) {
        this.getlayout()
      }
    },
    typeKey: {
      immediate: true,
      handler: function(val) {
        this.getlayout()
      }
    }
  },
  created() {
    this.getlayout()
  },
  methods: {
    async getlayout() {
      if (!this.typeName || !this.typeKey) {
        return
      }
      await getLayouts(this.typeName, this.typeKey).then((res) => {
        if (res.items) {
          const x = res.items.slice(-1)
          if (x[0] && x[0].configDetails) {
            const configData = JSON.parse(x[0].configDetails)
            this.configData = configData
          }
        }
      })
    },
    getFormData(configData) {
      if (!configData || !configData.formData) {
        return []
      }
      return configData.formData
    },
    searchFun() {
      this.$emit('searchFun', this.form)
    },
    resetFun() {
      this.$refs['searchForm'].reset()
    }
  }
}
</script>
<style lang="scss">
</style>