112 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			112 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <ai-list v-if="!isShowDetail">
 | |
|     <template slot="title">
 | |
|       <ai-title title="居民活动" :isShowBottomBorder="false" :isShowArea="currIndex === '0'" :fullname.sync="areaName" v-model="areaId" :instance="instance" @change="onAreaChange"></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 :areaId="areaId" :ref="String(i)" 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'" :areaName="areaName" :areaId="areaId" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Add>
 | |
|   <Detail v-else-if="componentName === 'Detail'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Detail>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
|   import List from './components/List.vue'
 | |
|   import Statistics from './components/Statistics'
 | |
|   import Add from './components/Add'
 | |
|   import Detail from './components/Detail'
 | |
|   import { mapState } from 'vuex'
 | |
| 
 | |
|   export default {
 | |
|     name: 'AppVillageActivity',
 | |
|     label: '村民活动',
 | |
| 
 | |
|     components: {
 | |
|       List,
 | |
|       Add,
 | |
|       Detail,
 | |
|       Statistics
 | |
|     },
 | |
| 
 | |
|     props: {
 | |
|       instance: Function,
 | |
|       dict: Object,
 | |
|       permissions: Function
 | |
|     },
 | |
| 
 | |
|     computed: {
 | |
|       ...mapState(['user']),
 | |
| 
 | |
|       tabs () {
 | |
|         const tabList = [
 | |
|           {label: '活动管理', name: 'List', comp: List, permission: ''},
 | |
|           {label: '报到数据', name: 'Statistics', comp: Statistics, permission: ''}
 | |
|         ].filter(item => {
 | |
|           return true
 | |
|         })
 | |
| 
 | |
|         return tabList
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     data () {
 | |
|       return {
 | |
|         activeName: 'JoinEvent',
 | |
|         currIndex: '0',
 | |
|         componentName: '',
 | |
|         params: {},
 | |
|         areaName: '',
 | |
|         areaId: '',
 | |
|         isShowDetail: false
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     created () {
 | |
|       this.areaId = this.user.info.areaId
 | |
|       if (this.$route.query.id) {
 | |
|         this.componentName = this.$route.query?.type
 | |
|         this.params = {id: this.$route.query?.id}
 | |
|         this.isShowDetail = true
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     methods: {
 | |
|       onAreaChange () {
 | |
|         if (this.currIndex === '0') {
 | |
|           this.$nextTick(() => {
 | |
|             this.$refs[this.currIndex][0].getList()
 | |
|           })
 | |
|         }
 | |
|       },
 | |
| 
 | |
|       onChange (data) {
 | |
|         if (data.type === 'list') {
 | |
|           this.componentName = 'List'
 | |
|           this.isShowDetail = false
 | |
|           this.params = data.params
 | |
|         }
 | |
| 
 | |
|         if (data.type === 'Detail') {
 | |
|           this.componentName = 'Detail'
 | |
|           this.isShowDetail = true
 | |
|           this.params = data.params
 | |
|         }
 | |
| 
 | |
|         if (data.type === 'Add') {
 | |
|           this.componentName = 'Add'
 | |
|           this.isShowDetail = true
 | |
|           this.params = data.params
 | |
|         }
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| </style>
 |