chat/_src/components/chatGroudMgr/index.vue

<template>
  <div class="r-view-mgr" @click.stop>
    <template v-if="!adminShow">
      <div class="groudMgr-top">
        <i class="el-icon-arrow-left" @click="handleGroudMgr"></i>
        <span>{{$t('public.setting')}}</span>
        <i class="el-icon-close" @click="handleCloseCharSet"></i>
      </div>
      <div class="ad-wrap">
        <div class="ad-item" @click="adminShow = true">
          {{$t('group.adminSetting')}}<i class="el-icon-arrow-right"></i>
        </div>
        <div class="ad-item" @click="$showInvite(5)">
          {{$t('invite.transferGroupOwner')}}<i class="el-icon-arrow-right"></i>
        </div>
        <div class="ad-item" @click="addGroupAuth">
          {{$t('group.groupCertification')}}<i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="groudMgr-top">
        <i class="el-icon-arrow-left" @click="adminShow = false"></i>
        <span>{{$t('group.admin')}}</span>
        <i class="el-icon-close" @click="handleCloseCharSet"></i>
      </div>
      <div class="groudMgr-admins">
        <div class="admins-add" @click="$showInvite(4)">
          <div class="add-fl">
            <i class="el-icon-circle-plus-outline"></i>{{$t('group.add')}}{{$t('group.admin')}}
          </div>
          <div class="add-fr">
            {{adminsList.length}}/{{membersArray.length}}
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <ul class="admin-list">
          <li class="admin-item" v-for="(item, key) in adminsList" :key="key">
            <img class="user-avatar" :src="item.cover_photo" v-if="item.cover_photo">
            <div class="user-avatar" v-else :class="`avatar_bg${item.user_id % 9}`" :data-name="item.nick_name.slice(0,2).toUpperCase()">
              </div>
            <span class="name">{{item.nick_name}}</span>
            <el-button @click="removeAdmin(item.user_id,item.nick_name)">{{$t('public.remove')}}</el-button>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button, MessageBox } from 'element-ui'
import { mapState } from 'vuex'
import API from '@/api'
import { addPanelSessionMixin } from '@/mixins/index'

Vue.component(Button.name, Button)

export default {
  name: 'chatGroudMgr',
  mixins: [addPanelSessionMixin],
  computed: {
    ...mapState({
      curGroupId: state => state.curSession,
      userId: state => state.userId,
      membersArray: state => state.group.membersArray,
      sessionList: state => state.chat.sessionList
    }),
    adminsList () {
      return this.membersArray.filter(v => {
        return v.is_admin == 1
      })
    }
  },
  data () {
    return {
      adminShow: false
    }
  },
  methods: {
    handleGroudMgr () {
      this.$emit('handleShowGroudMgr', 0)
    },
    handleCloseCharSet () {
      this.$emit('handleShowCharSet', 0)
      this.adminShow = false
    },
    removeAdmin (userId, nick) {
      MessageBox.confirm(`${this.$t('public.confirm')}${this.$t('public.remove')}${nick}?`).then(() => {
        API.group
          .removeAdmin({
            admin_id: userId,
            group_id: this.curGroupId
          })
          .then(({ data }) => {
            this.$store.dispatch('getGroupInfo')
          })
      })
        .catch(e => {
          console.log(e)
        })
    },
    addGroupAuth () {
      API.base.groupAuth({
        group_id: this.curGroupId
      }).then(({ data }) => {
        let serverId = data.data.serverId
        let sessionId = this.userId > serverId
          ? `${serverId}-${this.userId}`
          : `${this.userId}-${serverId}`

        this.addPanelSession(serverId, sessionId)
        this.$store.commit('changeSessionId', sessionId)
        this.$router.push({ path: `/pm/${sessionId}` })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>