123 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			123 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <ai-list class="AppReportServe" v-if="showList">
 | |
|     <template slot="title">
 | |
|       <ai-title title="报到服务" :isShowBottomBorder="false"> </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" :name="String(i)">
 | |
|           <component :is="tab.comp" v-if="currIndex === String(i)" :ref="currIndex" :instance="instance" :dict="dict" @change="changeDetail"></component>
 | |
|         </el-tab-pane>
 | |
|       </el-tabs>
 | |
|     </template>
 | |
|   </ai-list>
 | |
| 
 | |
|   <component v-else @change="changeDetail" :is="componentName" :params="params" :instance="instance" :dict="dict"></component>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import ActiveList from './components/ActiveList.vue'
 | |
| import ActiveAdd from './components/ActiveAdd.vue'
 | |
| import ActiveEdit from './components/ActiveEdit.vue'
 | |
| import ActiveDetail from './components/ActiveDetail.vue'
 | |
| import DataList from './components/DataList.vue'
 | |
| 
 | |
| export default {
 | |
|   label: '报到服务',
 | |
|   name: 'AppReportServe',
 | |
|   // 组件
 | |
|   components: {
 | |
|     ActiveList,
 | |
|     ActiveAdd,
 | |
|     ActiveEdit,
 | |
|     ActiveDetail,
 | |
|     
 | |
|     DataList,
 | |
|   },
 | |
|   props: {
 | |
|     instance: Function,
 | |
|     permissions: Function,
 | |
|     dict: Object,
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       currIndex: '0',
 | |
|       showList: true,
 | |
|       componentName: '',
 | |
|       params: {},
 | |
|     }
 | |
|   },
 | |
|   // 计算
 | |
|   computed: {
 | |
|     tabs() {
 | |
|       return [
 | |
|         {
 | |
|           label: '活动管理',
 | |
|           name: 'ActiveList',
 | |
|           comp: ActiveList,
 | |
|         },
 | |
|         {
 | |
|           label: '报到数据',
 | |
|           name: 'DataList',
 | |
|           comp: DataList,
 | |
|         },
 | |
|       ]
 | |
|     },
 | |
|   },
 | |
|   // 监听
 | |
|   watch: {},
 | |
|   // 实例创建后
 | |
|   created() {},
 | |
|   // 实例渲染后
 | |
|   mounted() {},
 | |
|   // 方法
 | |
|   methods: {
 | |
|     changeDetail(data) {
 | |
|       if (data.type === 'ActiveList') {
 | |
|         this.showList = false
 | |
|         this.componentName = 'ActiveList'
 | |
|         this.params = data.params
 | |
|       }
 | |
|       if (data.type === 'ActiveAdd') {
 | |
|         this.showList = false
 | |
|         this.componentName = 'ActiveAdd'
 | |
|         this.params = data.params
 | |
|       }
 | |
| 
 | |
|       if (data.type === 'ActiveEdit') {
 | |
|         this.showList = false
 | |
|         this.componentName = 'ActiveEdit'
 | |
|         this.params = data.params
 | |
|       }
 | |
|       if (data.type === 'ActiveDetail') {
 | |
|         this.showList = false
 | |
|         this.componentName = 'ActiveDetail'
 | |
|         this.params = data.params
 | |
|       }
 | |
| 
 | |
|       if (data.type === 'DataList') {
 | |
|         this.showList = false
 | |
|         this.componentName = 'DataList'
 | |
|         this.params = data.params
 | |
|       }
 | |
| 
 | |
|       if (data.type === 'list') {
 | |
|         this.showList = true
 | |
|         this.$nextTick(() => {
 | |
|           // if (data.isRefresh) {
 | |
|           // }
 | |
|         })
 | |
|       }
 | |
|     },
 | |
|   },
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss">
 | |
| .AppReportServe {
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
| }
 | |
| </style>
 |