在职党员社区报到

project/pingchang/apps/AppCommunityMember/AppCommunityMember.vue

@@ -0,0 +1,107 @@
+<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>