dvcp_v2_webapp/packages/bigscreen/designer/AppDesigner.vue

<template>
  <ai-list v-if="!isShowDetail">
    <template slot="title">
      <ai-title title="大屏列表" :isShowBottomBorder="false" :instance="instance"></ai-title>
    </template>
    <template slot="tabs">
      <el-tabs v-model="currIndex">
        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
          <component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp"
                     @change="onChange" lazy
                     :instance="instance" :dict="dict" :permissions="permissions"/>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ai-list>
  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance"
       :dict="dict"
       :permissions="permissions" @change="onChange"></Add>
  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance"
              :dict="dict"
              :permissions="permissions" @change="onChange"></SourceData>
</template>

<script>
import List from './components/List.vue'
import Add from './components/Add'
import SourceData from './components/SourceData'
import dvui from '../../../project/dvui/entries'
import Vue from "vue";

Vue.use(dvui)
export default {
  name: 'AppDesigner',
  label: '大屏设计',

  components: {
    List,
    Add,
    SourceData
  },

  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    urlPrefix: {
      type: String,
      default: '/app'
    }
  },

  computed: {
    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
      }
    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
</style>