Files
dvcp_v2_webapp/project/pingchang/apps/AppCommunityMember/AppCommunityMember.vue
2022-10-19 13:38:16 +08:00

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>