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

<template>
  <div class="outer-layer select-members-page">
    <div class="root">
      <ZPaging
        ref="zPaging"
        :show-scrollbar="false"
        :use-virtual-list="true"
        :virtual-list-col="5"
        :refresher-enabled="false"
        :loading-more-enabled="false"
        @scroll="onScroll"
      >
        <template #top>
          <customNavbar :title="pageTitle" id="topArea"></customNavbar>
        </template>
        <div class="select-members">
          <div
            class="search-member"
            v-if="state.manageType !== 'removeMembers'"
          >
            <customInput
              :searchText="state.searchText"
              @inputSearchText="inputSearchText"
            ></customInput>
          </div>
          <div
            class="member-list"
            :style="{
              padding: state.manageType === 'searchRecord' ? '20rpx 0 0' : '',
            }"
          >
            <div class="member-list-alphabet-anchor-point">
              <div
                class="member-list-alphabet-anchor-point-each"
                v-for="(alphabetItem, alphabetIndex) in state?.alphabet"
                :key="alphabetIndex"
                :style="{
                  margin: state?.alphabet?.length > 17 ? '0' : '',
                }"
                @click.stop="scrollToView(alphabetItem)"
              >
                <span
                  class="text-[32rpx] font-regular"
                  :style="{
                    color:
                      state.currentAlphabet === alphabetItem ? '#7A58DE' : '',
                  }"
                >
                  {{ alphabetItem }}
                </span>
              </div>
            </div>
            <div
              class="member-list-alphabet"
              v-for="(alphabetItem, alphabetIndex) in state.resultMemberList"
              :key="alphabetIndex"
            >
              <div
                class="member-list-alphabet-key"
                :style="{
                  padding:
                    state.manageType === 'searchRecord' ||
                    state.manageType === 'removeMembers'
                      ? '10rpx 30rpx'
                      : '',
                }"
                v-if="alphabetItem?.memberList?.length > 0"
                :id="alphabetItem.key"
                :ref="
                  (el) => {
                    if (el) alphabetElementRefs[alphabetIndex] = el
                  }
                "
              >
                <span class="text-[32rpx] font-regular">
                  {{ alphabetItem.key }}
                </span>
              </div>
              <div v-if="alphabetItem?.memberList?.length > 0">
                <div
                  class="member-list-each"
                  v-for="(item, index) in alphabetItem?.memberList"
                  :key="index"
                >
                  <tm-checkbox-group v-model="item.checkArr">
                    <selectMemberItem
                      :groupType="groupParams.groupInfo.group_type"
                      :memberItem="item"
                      @clickItem="handleClickItem(item)"
                      :manageType="state.manageType"
                      :itemStyle="
                        state.manageType === 'searchRecord' ||
                        state.manageType === 'removeMembers'
                          ? 'list'
                          : 'card'
                      "
                    >
                      <template
                        #left
                        v-if="state.manageType !== 'searchRecord'"
                      >
                        <div
                          v-if="
                            state.manageType === 'removeMembers' &&
                            item?.is_mine
                          "
                        >
                          <tm-checkbox
                            color="#fff"
                            :transprent="true"
                            :border="0"
                            :disabled="true"
                          ></tm-checkbox>
                        </div>
                        <tm-checkbox
                          v-if="
                            !(
                              state.manageType === 'removeMembers' &&
                              item?.is_mine
                            )
                          "
                          :round="10"
                          :color="
                            item?.checkArr?.length > 0 ? '#46299d' : '#B4B4B4'
                          "
                          :outlined="
                            item?.checkArr?.length > 0 ||
                            (state.manageType === 'silence' &&
                              item.is_mute === 1) ||
                            (state.manageType === 'admin' &&
                              (item.leader === 1 || item.leader === 2))
                              ? false
                              : true
                          "
                          :value="item.id"
                          :disabled="
                            (state.manageType === 'silence' &&
                              item.is_mute === 1) ||
                            (state.manageType === 'admin' &&
                              (item.leader === 1 || item.leader === 2))
                          "
                          @change="checkBoxChange"
                        ></tm-checkbox>
                      </template>
                    </selectMemberItem>
                  </tm-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #bottom v-if="state.manageType !== 'searchRecord'">
          <customBtn
            v-if="state.manageType !== 'removeMembers'"
            :isBottom="true"
            :btnText="$t('ok')"
            @clickBtn="confirmSelectMembers"
          ></customBtn>
          <div
            class="confirm-btn-area"
            v-if="state.manageType === 'removeMembers'"
          >
            <div class="confirm-btn-area-statistic-text">
              <span class="text-[28rpx] font-medium">
                {{
                  $t('select.member.num') +
                  '：' +
                  state.selectedMembersNum +
                  $t('statistic.unit.person')
                }}
              </span>
            </div>
            <customBtn
              :btnText="$t('ok')"
              @clickBtn="confirmSelectMembers"
              :disabled="state.selectedMembersNum == 0 ? true : false"
            ></customBtn>
          </div>
        </template>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import customInput from '@/components/custom-input/custom-input.vue'
import selectMemberItem from '../components/select-member-item.vue'
import customBtn from '@/components/custom-btn/custom-btn.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
  ServeGroupNoSpeak,
  ServeEditGroupAdmin,
  ServeGroupAssignAdmin,
  ServeRemoveMembersGroup,
} from '@/api/group/index.js'
import { useDialogueStore, useGroupStore, useGroupTypeStore } from '@/store'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const zPaging = ref()
useZPaging(zPaging)

const groupStore = useGroupStore()
const groupParams = reactive({
  groupInfo: computed(() => groupStore.groupInfo),
})

const groupTypeStore = useGroupTypeStore()
const groupTypeParams = reactive({
  departmentAllPositions: computed(() => groupTypeStore.departmentAllPositions),
})

const dialogueStore = useDialogueStore()
const dialogueParams = reactive({
  memberList: computed(() => {
    const lowerCaseSearchText = state?.searchText.toLowerCase()
    return dialogueStore.members.filter((item) =>
      state?.searchText
        ? item.nickname.toLowerCase().includes(lowerCaseSearchText)
        : true,
    )
  }),
  receiverId: computed(() => dialogueStore.talk.receiver_id),
})

const state = reactive({
  searchText: '', //搜索内容
  manageType: '', //管理类型
  alphabet: [], //A-Z列表
  resultMemberList: [], //按A-Z整理后的人员列表
  currentAlphabet: 'A', //当前A-Z位置
  scrollDirection: '', //当前列表滚动方向
  isAssign: false, //是否指定view
  selectedMembersNum: 0, //当前选中数量
  isCreateDepGroup: 0, //是否是创建部门群
})

watch(
  () => dialogueParams?.memberList,
  (newMemberList) => {
    assembleAlphabetMemberList(newMemberList)
  },
  { deep: true },
)

watch(
  () => groupParams?.groupInfo,
  (newGroupInfo) => {
    assembleAlphabetMemberList(dialogueParams?.memberList)
  },
  { deep: true },
)

//获取A-Z tag元素
const alphabetElementRefs = ref([])
//观察者
let observer

onLoad((options) => {
  console.log(options)
  if (options.manageType) {
    state.manageType = options.manageType
    assembleAlphabetMemberList(dialogueParams?.memberList)
  }
  if (options.isCreateDepGroup) {
    state.isCreateDepGroup = Number(options.isCreateDepGroup)
    assembleAlphabetMemberList()
  }
})

onMounted(() => {
  dialogueParams.memberList.forEach((ele) => {
    ele.checkArr = []
  })
  const options = {
    root: null, // 使用浏览器窗口作为根容器
    threshold: 1.0, // 当元素100%离开视口时触发
  }
  observer = new IntersectionObserver(handleIntersection, options)
  nextTick(() => {
    watch(
      alphabetElementRefs,
      (newAlphabetElementRefs) => {
        if (Array.isArray(newAlphabetElementRefs)) {
          newAlphabetElementRefs.forEach((el, index) => {
            observeElement(el, index)
          })
        }
      },
      { immediate: true, deep: true },
    )
    if (alphabetElementRefs.value.length > 0) {
      alphabetElementRefs.value.forEach((el, index) =>
        observeElement(el, index),
      )
    }
  })
})

//页面标题
const pageTitle = computed(() => {
  let page_title = ''
  if (state.manageType === 'silence') {
    page_title = t('chat.manage.addSilenceMember')
  } else if (state.manageType === 'admin') {
    page_title = t('chat.manage.addAdmin')
  } else if (state.manageType === 'searchRecord') {
    page_title = t('search.condition.member')
  } else if (state.manageType === 'removeMembers') {
    page_title = t('select.member.remove')
  }
  return page_title
})

// 观察者函数
const handleIntersection = (entries) => {
  if (state.isAssign) {
    state.isAssign = false
    return
  }
  entries.forEach((entry) => {
    if (!entry.isIntersecting && state.scrollDirection === 'down') {
      state.currentAlphabet = entry.target.id
    } else if (entry.isIntersecting && state.scrollDirection === 'up') {
      if (state?.alphabet?.length > 1) {
        state?.alphabet.forEach((item, index) => {
          if (item === entry.target.id && index > 0) {
            state.currentAlphabet = state?.alphabet[index - 1]
          }
        })
      } else {
        state.currentAlphabet = entry.target.id
      }
    }
  })
}

//观察元素
const observeElement = (el, index) => {
  if (el && observer) {
    observer.observe(el)
  }
}

//输入搜索文本
const inputSearchText = (e) => {
  // console.log(e)
  state.searchText = e
}

//点击item
const handleClickItem = (item) => {
  if (
    (state.manageType === 'silence' && item.is_mute === 1) ||
    (state.manageType === 'admin' &&
      (item.leader === 1 || item.leader === 2)) ||
    (state.manageType === 'removeMembers' && item.is_mine)
  ) {
    return
  }
  let itemList = dialogueParams.memberList
  if (
    state.manageType === 'admin' &&
    (groupParams.groupInfo.group_type == 2 ||
      groupParams.groupInfo.group_type == 4 ||
      state.isCreateDepGroup === 1)
  ) {
    itemList = state.resultMemberList[0].memberList
  }
  itemList.forEach((ele) => {
    if (ele.id == item.id) {
      ele.checkArr = ele.checkArr?.length > 0 ? [] : [item.id]
      if (ele.checkArr?.length > 0) {
        state.selectedMembersNum += 1
      } else {
        state.selectedMembersNum -= 1
      }
    }
  })
}

//点击确认选择的成员
const confirmSelectMembers = () => {
  let selectedUserIds = ''
  let itemList = dialogueParams.memberList
  let positionInfos = []
  if (
    state.manageType === 'admin' &&
    (groupParams.groupInfo.group_type == 2 ||
      groupParams.groupInfo.group_type == 4 ||
      state.isCreateDepGroup === 1)
  ) {
    itemList = state.resultMemberList[0].memberList
  }
  itemList.forEach((ele) => {
    if (ele.checkArr?.length > 0) {
      if (!selectedUserIds) {
        selectedUserIds = String(ele.checkArr[0])
      } else {
        selectedUserIds += ',' + ele.checkArr[0]
      }
    }
    if (
      ele.checkArr?.length > 0 ||
      (ele.leader && (ele.leader == 1 || ele.leader == 2))
    ) {
      if (state.isCreateDepGroup === 1) {
        let posInfo = Object.assign({}, ele.positionInfo, {
          name: ele.nickname,
          id: ele.id,
        })
        positionInfos.push(posInfo)
      } else {
        positionInfos.push(ele.positionInfo)
      }
    }
  })
  console.log(selectedUserIds)
  if (selectedUserIds) {
    if (state.manageType === 'silence') {
      let params = {
        mode: 1, //1禁言2解禁
        group_id: dialogueParams.receiverId, //群id
        user_ids: selectedUserIds, //用户ids
      }
      console.log(params)
      const resp = ServeGroupNoSpeak(params)
      resp.then(({ code, data }) => {
        console.log(data)
        if (code == 200) {
          useDialogueStore().updateGroupMembers()
        } else {
        }
      })
      resp.catch(() => {})
    } else if (state.manageType === 'admin') {
      if (state.isCreateDepGroup === 1) {
        // console.log(positionInfos)
        groupTypeStore.groupAdmins.value = positionInfos
        uni.navigateBack({
          delta: 1,
        })
      } else {
        if (
          groupParams.groupInfo.group_type == 1 ||
          groupParams.groupInfo.group_type == 3
        ) {
          let params = {
            mode: 1, //1管理员，2不是管理员
            group_id: dialogueParams.receiverId, //群id
            user_ids: selectedUserIds,
          }
          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 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(() => {})
        }
      }
    } else if (state.manageType === 'removeMembers') {
      let params = {
        group_id: dialogueParams.receiverId, //群id
        members_ids: selectedUserIds, //群成员id，批量的话逗号分割
      }
      console.log(params)
      const resp = ServeRemoveMembersGroup(params)
      resp.then(({ code, data }) => {
        console.log(data)
        if (code == 200) {
          useDialogueStore().updateGroupMembers()
          groupStore.ServeGroupDetail()
        } else {
        }
      })
      resp.catch(() => {})
    }
  }
}

//组装A-Z排序的人员列表
const assembleAlphabetMemberList = async (newMemberList) => {
  if (
    state.manageType === 'searchRecord' ||
    state.manageType === 'removeMembers'
  ) {
    const resultMemberList = ref([])
    const alphabet = Array.from({ length: 26 }, (_, i) =>
      String.fromCharCode(i + 65),
    )
    let tempAlphabet = []
    alphabet.forEach((letter) => {
      const matchedItems = newMemberList.filter((item) => item.key === letter)
      if (matchedItems.length > 0) {
        tempAlphabet.push(letter)
      }
      resultMemberList.value.push({
        key: letter,
        memberList: matchedItems.length ? matchedItems : [],
      })
    })
    state.alphabet = tempAlphabet
    state.resultMemberList = resultMemberList
  } else {
    if (
      (groupParams.groupInfo.group_type == 2 ||
        groupParams.groupInfo.group_type == 4) &&
      state.manageType === 'admin'
    ) {
      let departmentIdsArr = []
      if (groupParams?.groupInfo?.deptInfos?.length > 0) {
        groupParams.groupInfo.deptInfos.forEach((item) => {
          departmentIdsArr.push(item.dept_id)
        })
      }
      getPosiByDep(departmentIdsArr)
    } else if (state.isCreateDepGroup === 1) {
      let departmentIdsArr = []
      if (groupTypeStore?.depCheckedKeys?.value?.length > 0) {
        groupTypeStore.depCheckedKeys.value.forEach((item) => {
          departmentIdsArr.push(item.ID)
        })
      }
      getPosiByDep(departmentIdsArr)
    } else {
      state.resultMemberList = [
        {
          key: '',
          memberList: newMemberList,
        },
      ]
    }
  }
}

const getPosiByDep = async (departmentIdsArr) => {
  await groupTypeStore.getPositionByDepartment({
    IDs: departmentIdsArr,
  })
  let departmentAllPositions = []
  if (groupTypeParams?.departmentAllPositions?.value?.length > 0) {
    groupTypeParams?.departmentAllPositions?.value?.forEach((item) => {
      item?.AllPositions?.forEach((positionItem) => {
        departmentAllPositions.push({
          nickname: item.name + '-' + positionItem.name,
          id: item.ID + '-' + positionItem.ID,
          checkArr: [],
          positionInfo: {
            dept_id: item.ID,
            dept_name: item.name,
            position_id: positionItem.ID,
            position_name: positionItem.name,
          },
        })
      })
    })
  }
  if (groupParams?.groupInfo?.groupAdminList?.length > 0) {
    groupParams?.groupInfo?.groupAdminList.forEach((item) => {
      departmentAllPositions.forEach((idsItem) => {
        if (item.dept_id + '-' + item.position_id == idsItem.id) {
          idsItem.leader = 1
        }
      })
    })
  }
  if (
    state.isCreateDepGroup === 1 &&
    groupTypeStore?.groupAdmins?.value?.length > 0
  ) {
    departmentAllPositions.forEach((allPos) => {
      groupTypeStore.groupAdmins.value.forEach((admin) => {
        if (allPos.id === admin.id) {
          allPos.checkArr = [allPos.id]
        }
      })
    })
  }
  if(state?.searchText){
    const lowerCaseSearchText = state?.searchText.toLowerCase()
    departmentAllPositions = departmentAllPositions.filter((item) =>
      state?.searchText
        ? item.nickname.toLowerCase().includes(lowerCaseSearchText)
        : true,
    )
  }
  state.resultMemberList = [
    {
      key: '',
      memberList: departmentAllPositions,
    },
  ]
}

//滚动到指定的view
const scrollToView = (alphabet) => {
  state.currentAlphabet = alphabet
  state.isAssign = true
  console.log()
  zPaging.value?.scrollIntoViewById(
    alphabet,
    document.getElementById('topArea').clientHeight
      ? document.getElementById('topArea').clientHeight - 1
      : 80,
  )
}

//监听列表滚动
const onScroll = (e) => {
  if (e.detail.deltaY < 0) {
    state.scrollDirection = 'down'
  } else if (e.detail.deltaY > 0) {
    state.scrollDirection = 'up'
  } else {
    state.scrollDirection = ''
  }
}

//选中的人员改变
const checkBoxChange = (e) => {
  if (e) {
    state.selectedMembersNum += 1
  } else {
    state.selectedMembersNum -= 1
  }
}
</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;
}

.select-members {
  padding: 20rpx 32rpx;
  .search-member {
    padding: 22rpx 16rpx;
    background-color: #fff;
  }
  .member-list {
    .member-list-alphabet-anchor-point {
      position: fixed;
      right: 32rpx;
      top: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .member-list-alphabet-anchor-point-each {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 0 14rpx;
        span {
          width: 52rpx;
          text-align: center;
          line-height: 44rpx;
          color: $theme-text;
        }
      }
    }
    .member-list-alphabet {
      .member-list-alphabet-key {
        background-color: #f3f3f3;
        span {
          line-height: 44rpx;
          color: $theme-text;
        }
      }
    }
  }
}

.confirm-btn-area {
  background-color: #fff;
  padding: 14rpx 32rpx 72rpx;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  .confirm-btn-area-statistic-text {
    margin: 18rpx 0 0;
    span {
      line-height: 40rpx;
      color: $theme-text;
    }
  }

  ::v-deep .custom-btn-class {
    padding: 18rpx 104rpx !important;
  }
  ::v-deep .is-disabled {
    background-color: #e6e6e6 !important;
    color: #bebebe !important;
  }
}
</style>