95 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			95 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <ai-list v-if="!isShowDetail">
 | 
						|
    <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">
 | 
						|
          <component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance" :dict="dict" />
 | 
						|
        </el-tab-pane>
 | 
						|
      </el-tabs>
 | 
						|
    </template>
 | 
						|
  </ai-list>
 | 
						|
  <Detail v-else-if="component === 'Detail'" :params="params" :instance="instance" :dict="dict" @change="onChange"></Detail>
 | 
						|
</template>
 | 
						|
 | 
						|
 | 
						|
<script>
 | 
						|
  import List from './components/List.vue'
 | 
						|
  import Statistics from './components/Statistics'
 | 
						|
  import Detail from './components/Detail'
 | 
						|
 | 
						|
  export default {
 | 
						|
    name: 'AppCommunityManagement',
 | 
						|
    label: '社区管理',
 | 
						|
 | 
						|
    props: {
 | 
						|
      instance: Function,
 | 
						|
      dict: Object
 | 
						|
    },
 | 
						|
 | 
						|
    data () {
 | 
						|
      return {
 | 
						|
        component: 'List',
 | 
						|
        params: {},
 | 
						|
        isShowDetail: false,
 | 
						|
        currIndex: 0
 | 
						|
      }
 | 
						|
    },
 | 
						|
 | 
						|
    components: {
 | 
						|
      Detail,
 | 
						|
      List,
 | 
						|
      Statistics
 | 
						|
    },
 | 
						|
 | 
						|
    computed: {
 | 
						|
      tabs () {
 | 
						|
        const tabList = [
 | 
						|
          {label: '社区管理', name: 'List', comp: List },
 | 
						|
          {label: '管理统计', name: 'Statistics', comp: Statistics }
 | 
						|
        ]
 | 
						|
 | 
						|
        return tabList
 | 
						|
      }
 | 
						|
    },
 | 
						|
 | 
						|
    methods: {
 | 
						|
      onChange (data) {
 | 
						|
        if (data.type === 'Detail') {
 | 
						|
          this.component = 'Detail'
 | 
						|
          this.params = data.params
 | 
						|
          this.isShowDetail = true
 | 
						|
        }
 | 
						|
 | 
						|
        if (data.type === 'Statistics') {
 | 
						|
          this.component = 'Statistics'
 | 
						|
          this.params = data.params
 | 
						|
          this.isShowDetail = false
 | 
						|
        }
 | 
						|
 | 
						|
        if (data.type === 'List') {
 | 
						|
          this.component = 'List'
 | 
						|
          this.params = data.params
 | 
						|
          this.isShowDetail = false
 | 
						|
 | 
						|
          this.$nextTick(() => {
 | 
						|
            if (data.isRefresh) {
 | 
						|
              this.$refs.component.getList()
 | 
						|
            }
 | 
						|
          })
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
</script>
 | 
						|
 | 
						|
<style lang="scss">
 | 
						|
  .doc-circulation {
 | 
						|
    height: 100%;
 | 
						|
    background: #F3F6F9;
 | 
						|
    overflow: auto;
 | 
						|
  }
 | 
						|
</style>
 |