dvcp_v2_webapp/packages/bigscreen/designer/AppDesigner.vue

<template>
  <section class="AppDesigner">
    <component :is="currentPage" v-bind="$props"/>
  </section>
</template>

<script>
import List from './components/List.vue'
import Add from './components/Add'
import SourceData from './components/SourceData'
import Preview from "./components/preview";
import DesignDashboard from "./components/Layout";

export default {
  name: 'AppDesigner',
  label: '大屏设计',
  components: {DesignDashboard, Preview, List, Add, SourceData},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    urlPrefix: {
      type: String,
      default: '/app'
    }
  },

  computed: {
    currentPage() {
      const {hash} = this.$route
      return hash == "#sourceData" ? SourceData :
          hash == "#add" ? Add :
              hash == "#preview" ? Preview :
                  hash == "#design" ? DesignDashboard : List
    },
    tabs() {
      return [
        {label: '大屏列表', name: 'FormList', comp: List, permission: ''}
      ].filter(() => {
        return true
      })
    }
  },

  data() {
    return {
      currIndex: '0',
      componentName: '',
      params: {},
      areaId: '',
      isShowDetail: false
    }
  },

  methods: {
    onChange(data) {
      if (data.type === 'list') {
        this.componentName = 'List'
        this.isShowDetail = false
        this.params = data.params
      }

      if (data.type === 'add') {
        this.componentName = 'Add'
        this.isShowDetail = true
        this.params = data.params
      }

      if (data.type === 'SourceData') {
        this.componentName = 'SourceData'
        this.isShowDetail = true
        this.params = data.params
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.AppDesigner {
  height: 100%;
}
</style>