108 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			108 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div class="AppCommunityMember">
 | |
|     <ai-list v-show="!detailShow">
 | |
|       <template slot="title">
 | |
|         <ai-title title="报到服务" :isShowBottomBorder="false" :instance="instance" :isShowArea="currIndex == 0 ? true : false" v-model="areaId" @change="changeArea"></ai-title>
 | |
|       </template>
 | |
|       <template slot="tabs">
 | |
|         <el-tabs v-model="currIndex">
 | |
|           <el-tab-pane v-for="(tab,i) in tabs" :key="i" :name="String(i)" :label="tab.label">
 | |
|             <component
 | |
|               :is="tab.comp"
 | |
|               v-if="currIndex === String(i)"
 | |
|               :areaId="areaId"
 | |
|               :ref="tab.name"
 | |
|               @showDetail="showDetail"
 | |
|               :instance="instance"
 | |
|               :dict="dict"
 | |
|               :permissions="permissions" />
 | |
|           </el-tab-pane>
 | |
|         </el-tabs>
 | |
|       </template>
 | |
|     </ai-list>
 | |
|     <component v-if="detailShow" :is="currDet" :areaId="areaId" :id="id" @goBack="goBack" :instance="instance" :dict="dict" :permissions="permissions"/>
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import List from './List'
 | |
| import Statistics from './Statistics'
 | |
| import Organization from './Organization'
 | |
| import Add from './Add'
 | |
| import Detail from './Detail'
 | |
| 
 | |
| import {mapState} from 'vuex'
 | |
| 
 | |
| export default {
 | |
|   name: "AppCommunityMember",
 | |
|   label: "在职党员社区报到",
 | |
|   components: {List, Statistics, Organization, Add, Detail},
 | |
|   props: {
 | |
|     instance: Function,
 | |
|     dict: Object,
 | |
|     permissions: Function
 | |
|   },
 | |
| 
 | |
|   computed: {
 | |
|     tabs() {
 | |
|       return [
 | |
|         {
 | |
|           label: "社区活动管理",
 | |
|           name: "List",
 | |
|           comp: List,
 | |
|         },
 | |
|         {
 | |
|           label: "报到数据",
 | |
|           name: "Statistics",
 | |
|           comp: Statistics,
 | |
|         },
 | |
|         {
 | |
|           label: "报到组织管理",
 | |
|           name: "Organization",
 | |
|           comp: Organization,
 | |
|         },
 | |
|       ]
 | |
|     },
 | |
|     ...mapState(['user']),
 | |
|     currDet() {
 | |
|       return this.id ? Detail : Add
 | |
|     }
 | |
|   },
 | |
|   created() {
 | |
|     this.areaId = this.user.info.areaId;
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       activeName: "List",
 | |
|       currIndex: 0,
 | |
|       areaId: '',
 | |
|       detailShow: false,
 | |
|       id: ''
 | |
|     }
 | |
|   },
 | |
|   methods: {
 | |
|     goBack() {
 | |
|       this.detailShow = false;
 | |
|       this.$nextTick(() => {
 | |
|         this.$refs.List[0].getListInit()
 | |
|       })
 | |
|     },
 | |
|     showDetail(id) {
 | |
|       this.id = id || ''
 | |
|       this.detailShow = true
 | |
|     },
 | |
|     changeArea() {
 | |
|       this.$nextTick(() => {
 | |
|         this.$refs.List[0].getListInit()
 | |
|       })
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| <style lang="scss" scoped>
 | |
| .AppCommunityMember {
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
| }
 | |
| </style>
 |