chat-app/src/pages/chatSettings/groupManage/manageGroupAdmin.vue

<template>
  <div class="outer-layer manage-group-admin-page">
    <div class="root">
      <ZPaging ref="zPaging" :show-scrollbar="false">
        <template #top>
          <customNavbar :title="$t('chat.settings.groupAdmin')"></customNavbar>
        </template>
        <div class="manage-group-admin">
          <span class="manage-group-admin-title text-[28rpx] font-regular">
            {{ $t('chat.settings.groupAdmin') }}
          </span>
          <div
            class="group-admin-list chat-settings-card"
            :style="{
              margin: state?.groupAdminList?.length > 0 ? '20rpx 0 0' : '',
            }"
          >
            <div
              class="group-admin-list-each"
              :style="{
                padding:
                  groupParams?.groupInfo?.group_type == 1 ||
                  groupParams?.groupInfo?.group_type == 3
                    ? '18rpx 26rpx 18rpx 14rpx'
                    : '',
              }"
              v-for="(item, index) in state?.groupAdminList"
              :key="index"
            >
              <selectMemberItem
                v-if="
                  groupParams?.groupInfo?.group_type == 1 ||
                  groupParams?.groupInfo?.group_type == 3
                "
                :groupType="groupParams.groupInfo.group_type"
                :memberItem="item"
              ></selectMemberItem>
              <span
                v-if="
                  groupParams?.groupInfo?.group_type == 2 ||
                  groupParams?.groupInfo?.group_type == 4
                "
              >
                {{ item.deptPos }}
              </span>
              <div class="group-admin-list-each-btns">
                <img
                  v-if="item.is_mine"
                  src="/src/static/image/chatSettings/is-mine.png"
                />
                <div
                  class="group-admin-list-each-btns-each"
                  v-if="!item.cannotRemove"
                  @click="removeGroupAdmin(item)"
                >
                  <span class="text-[28rpx] font-regular">
                    {{ $t('chatSettings.btn.removeAdmin') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="add-admin-member-btn chat-settings-card"
            @click="toSelectMembersPage"
            :style="{
              margin: state?.groupAdminList.length == 0 ? '20rpx 0 0' : '',
            }"
          >
            <img src="/src/static/image/chatSettings/add-btn.png" />
            <span class="text-[28rpx] font-medium">
              {{ $t('chat.manage.addAdmin') }}
            </span>
          </div>
        </div>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import selectMemberItem from '../components/select-member-item.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, reactive, watch } from 'vue'

import {
  ServeEditGroupAdmin,
  ServeGroupAssignAdmin,
} from '@/api/group/index.js'
import { useGroupStore, useDialogueStore } from '@/store'

import { useAuth } from '@/store/auth'
const { userInfo } = useAuth()

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const groupStore = useGroupStore()
const groupParams = reactive({
  groupInfo: computed(() => groupStore.groupInfo),
})
const dialogueStore = useDialogueStore()
const dialogueParams = reactive({
  adminList: computed(() => dialogueStore.getAdminList),
  receiverId: computed(() => dialogueStore.talk.receiver_id),
})

const state = reactive({
  groupAdminList: [], //群管理员列表
})

watch(
  [() => groupParams?.groupInfo, , () => dialogueParams?.adminList],
  (newGroupInfo) => {
    getGroupAdminList()
  },
  { deep: true },
)

onLoad((options) => {
  console.log(options)
})

onMounted(async () => {
  getGroupAdminList()
})

//加载群聊管理员列表
const getGroupAdminList = () => {
  if (
    groupParams?.groupInfo?.group_type == 1 ||
    groupParams?.groupInfo?.group_type == 3
  ) {
    if (dialogueParams?.adminList?.length > 0) {
      dialogueParams?.adminList.forEach((item) => {
        if (item?.erp_user_id == userInfo?.value?.ID) {
          item.is_mine = true
          item.cannotRemove = true
        }
      })
    }
    state.groupAdminList = dialogueParams?.adminList
  } else if (
    groupParams?.groupInfo?.group_type == 2 ||
    groupParams?.groupInfo?.group_type == 4
  ) {
    let myPositionsList = []
    if (groupParams?.groupInfo?.groupAdminList?.length > 0) {
      groupParams?.groupInfo?.groupAdminList.forEach((groupAdminItem) => {
        if (userInfo?.value?.PositionUsers?.length > 0) {
          userInfo?.value?.PositionUsers.forEach((item) => {
            // console.log(item.DepartmentId + '-' + item.PositionID)
            if (item.PositionID === groupAdminItem.position_id) {
              myPositionsList.push(groupAdminItem)
            }
          })
        }
      })
    }
    if (
      groupParams?.groupInfo?.groupAdminList?.length > 0 &&
      myPositionsList?.length > 0
    ) {
      groupParams.groupInfo.groupAdminList.forEach((ele) => {
        myPositionsList.forEach((item) => {
          if (ele.deptPos === item.deptPos) {
            item.is_mine = true
            if (myPositionsList?.length == 1) {
              item.cannotRemove = true
            }
          }
        })
      })
    }
    state.groupAdminList = groupParams?.groupInfo?.groupAdminList
  }
}

//点击跳转到添加管理员页面
const toSelectMembersPage = () => {
  uni.navigateTo({
    url: '/pages/chatSettings/groupManage/selectMembers?manageType=admin',
  })
}

//点击移除群管理员
const removeGroupAdmin = (adminItem) => {
  if (
    groupParams?.groupInfo?.group_type == 1 ||
    groupParams?.groupInfo?.group_type == 3
  ) {
    let params = {
      mode: 2, //1管理员，2不是管理员
      group_id: dialogueParams.receiverId, //群id
      user_ids: String(adminItem.id),
    }
    console.log(params)
    const resp = ServeGroupAssignAdmin(params)
    resp.then(({ code, data }) => {
      console.log(data)
      if (code == 200) {
        useDialogueStore().updateGroupMembers()
      } else {
      }
    })
    resp.catch(() => {})
  } else if (
    groupParams?.groupInfo?.group_type == 2 ||
    groupParams?.groupInfo?.group_type == 4
  ) {
    let positionInfos = []
    if (state?.groupAdminList?.length > 0) {
      positionInfos = state?.groupAdminList.filter((item) => {
        return (
          item.dept_id != adminItem.dept_id ||
          item.position_id != adminItem.position_id
        )
      })
      let params = {
        source: 'app',
        id: dialogueParams.receiverId,
        deptInfos: groupParams.groupInfo.deptInfos,
        positionInfos: positionInfos,
      }
      console.log(params)
      const resp = ServeEditGroupAdmin(params)
      resp.then(({ code, data }) => {
        console.log(data)
        if (code == 200) {
          groupStore.ServeGroupDetail()
        } else {
        }
      })
      resp.catch(() => {})
    }
  }
}
</script>
<style scoped lang="scss">
.outer-layer {
  flex: 1;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.manage-group-admin {
  padding: 20rpx 32rpx;
  .manage-group-admin-title {
    line-height: 40rpx;
    color: #959598;
  }

  .group-admin-list {
    .group-admin-list-each {
      padding: 36rpx 26rpx 36rpx 14rpx;
      margin: 0 18rpx;
      border-bottom: 1px solid $theme-border-color;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      ::v-deep .select-member-item {
        padding: 0;
        border-bottom: 0;
      }
      .group-admin-list-each-btns {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;
        img {
          width: 52rpx;
          height: 52rpx;
        }
        .group-admin-list-each-btns-each {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 10rpx 30rpx;
          border: 2rpx solid #eeeeee;
          margin: 0 0 0 20rpx;
          span {
            line-height: 40rpx;
            color: #191919;
          }
        }
      }
    }
  }
  .add-admin-member-btn {
    padding: 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    img {
      width: 40rpx;
      height: 40rpx;
      margin: 0 22rpx 0 0;
    }
    span {
      line-height: 40rpx;
      color: $theme-text;
    }
  }
  .chat-settings-card {
    width: 100%;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
  }
}
</style>