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>
          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
            <div class="navBar-title flex flex-col items-center justify-center">
              <span class="text-[34rpx] font-medium">
                {{ $t('chat.settings.groupAdmin') }}
              </span>
            </div>
          </tm-navbar>
        </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"
              v-for="(item, index) in state.groupAdminList"
              :key="index"
            >
              <span>{{ item }}</span>
            </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>
        <template #bottom>
          <customBtn :isBottom="true" :btnText="$t('ok')"></customBtn>
        </template>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import customBtn from '@/components/custom-btn/custom-btn.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, reactive } from 'vue'

import { useGroupTypeStore } from '@/store/groupType'
import { useGroupStore, useDialogueStore } from '@/store'

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

const groupTypeStore = useGroupTypeStore()
const groupTypeParams = reactive({
  postTreeList: computed(() => groupTypeStore.postTreeList),
})
const groupStore = useGroupStore()
const groupParams = reactive({
  groupInfo: computed(() => groupStore.groupInfo),
})
const dialogueStore = useDialogueStore()
const dialogueParams = reactive({
  adminList: computed(() => dialogueStore.getAdminList),
})

const state = reactive({
  silenceAllBtn: null, //全员禁言按钮
  groupAdminList: [], //群管理员列表
})

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

onMounted(async () => {
  console.log(dialogueParams.adminList)
  await groupStore.ServeGroupDetail()
  await groupTypeStore.getPositionsTree()
  console.log(groupParams.groupInfo)
  console.log(groupTypeParams.postTreeList)
  assembleDepartmentPositions()
})

//组装部门和岗位对应关系数据
const assembleDepartmentPositions = () => {
  let deptPosArr = []
  if (groupParams?.groupInfo?.deptInfos?.length > 0) {
    if (groupParams?.groupInfo?.positionInfos?.length > 0) {
      groupParams?.groupInfo?.deptInfos.forEach((deptInfo) => {
        groupParams?.groupInfo?.positionInfos.forEach((positionInfo) => {
          let deptPosItem = groupTypeStore.getDepartmentPositionsById(
            deptInfo.dept_id,
            positionInfo.position_id,
          )
          if (deptPosItem) {
            deptPosArr.push(deptPosItem)
          }
        })
      })
    }
  }
  console.log(deptPosArr)
  state.groupAdminList = deptPosArr
}

//点击跳转到添加禁言成员页面
const toSelectMembersPage = () => {
  uni.navigateTo({
    url: '/pages/chatSettings/groupManage/selectMembers?manageType=admin',
  })
}
</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 0;
      margin: 0 32rpx;
      border-bottom: 1px solid $theme-border-color;
    }
  }
  .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>