Blame view

src/components/community/selectAdminOneCommunity.vue 1.71 KB
b25b036d   wuxw   v1.9 优化日期
1
  <template>
07e12785   wuxw   v1.9 admin账户中部分页面...
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
    <el-card class="community-selector">
      <div class="treeview attendance-staff">
        <ul class="community-list">
          <li 
            v-for="(item, index) in communityList" 
            :key="index" 
            @click="selectCommunity(item)"
            :class="{'selected': selectedCommunityId === item.communityId}">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </el-card>
  </template>
  
  <script>
  import { listAdminCommunitys } from '@/api/owner/adminOwnerApi'
  
  export default {
    name: 'SelectAdminOneCommunity',
    data() {
      return {
        communityList: [],
        selectedCommunityId: ''
      }
    },
    created() {
      this.loadCommunities()
    },
    methods: {
      loadCommunities() {
        const params = {
          page: 1,
          row: 100
        }
        
        listAdminCommunitys(params).then(res => {
          this.communityList = res.data
          if(this.communityList.length > 0) {
            this.selectCommunity(this.communityList[0])
          }
        }).catch(error => {
          console.log(error)
          this.$message.error(this.$t('adminOwner.fetchCommunityError'))
        })
      },
      selectCommunity(community) {
        this.selectedCommunityId = community.communityId
        this.$emit('changeCommunity', community)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .community-selector {
    max-height: 80vh;
    overflow-y: auto;
    .community-list {
      list-style: none;
      padding: 0;
      margin: 0;
      
      li {
        padding: 10px;
        cursor: pointer;
        transition: all 0.3s;
        color: #606060;
        font-size: 14px;
        
        &:hover {
          background-color: #f5f7fa;
        }
        
        &.selected {
          background-color: #409EFF;
          color: white;
        }
      }
    }
  }
  </style>