fix

src/api/deps/index.js

@@ -0,0 +1,11 @@
+import request from '@/service/index.js'
+
+// 查询用户群聊服务接口
+export const departmentV2TreeMy = (data) => {
+  return request({
+    url: '/department/v2/tree/my',
+    baseURL:import.meta.env.VITE_EPR_BASEURL,
+    method: 'POST',
+    data,
+  })
+}

src/components/checkBox/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div @click="onCheck" >
+    <tm-image :width="size" :height="size" :src="imageSrc"></tm-image>
+  </div>
+</template>
+
+<script setup>
+import { defineProps,computed,defineEmits } from "vue";
+import circle from "@/static/image/checkBox/circle@2x.png";
+import zu6039 from "@/static/image/checkBox/zu6039@2x.png";
+import zu6040 from "@/static/image/checkBox/zu6040@2x.png";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "noChecked", // noChecked, checked, halfChecked
+  },
+  size: {
+    type: Number,
+    default: 28,
+  },
+});
+
+const emit = defineEmits(['update:modelValue','change']);
+
+const imageSrc = computed(() => {
+  switch (props.modelValue) {
+    case "noChecked":
+      return circle;
+    case "checked":
+      return zu6039;
+    case "halfChecked":
+      return zu6040;
+  }
+});
+
+const onCheck = () => {
+  switch (props.modelValue) {
+    case "noChecked":
+      emit('update:modelValue', 'checked');
+      emit('change', 'checked');
+      break;
+    case "checked":
+      emit('update:modelValue', 'noChecked');
+      emit('change', 'noChecked');
+      break;
+    case "halfChecked":
+      emit('update:modelValue', 'checked');
+      emit('change', 'checked');
+      break;
+  }
+};
+
+</script>
+<style scoped lang='less'>
+</style>

src/pages.json

@@ -38,6 +38,14 @@
         "enablePullDownRefresh":false
       }
     },
+    {
+      "path": "pages/chooseDeps/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh":false
+      }
+    },
     {
       "path": "pages/chooseChat/index",
       "type": "page",

src/pages/chooseDeps/index.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="outer-layer">
+    <div>
+      <tm-navbar :hideBack="false" hideHome title="选择群类型"> </tm-navbar>
+    </div>
+    <div class="root">
+      <div
+        class="w-full h-[1134rpx] mb-[20rpx] pl-[32rpx] pr-[32rpx] pb-[20rpx] overflow-y-auto"
+      >
+        <div class="pl-[16rpx] pr-[16rpx] pt-[22rpx] pb-[24rpx] bg-[#FFFFFF]">
+          <tm-input
+            placeholder="请输入…"
+            color="#F9F9FD"
+            :round="1"
+            prefix="tmicon-search"
+            prefixColor="#46299D"
+            searchBgColor="#F9F9FD"
+            focusColor="#F9F9FD"
+            v-model="searchVal"
+          ></tm-input>
+          <div
+            v-if="crumbs.length"
+            class="w-full overflow-x-auto mt-[22rpx] leading-[48rpx] text-[#2F2F2F] flex items-center no-scrollbar"
+            ref="crumbsContainer"
+            >
+            <div
+              v-for="(item, index) in crumbs"
+              class="flex items-center text-[28rpx] leading-[48rpx] whitespace-nowrap"
+              :class="[
+                index === crumbsIndex ? 'text-[#747474]' : 'text-[#46299D]',
+                index === 0 ? '' : 'ml-[12rpx]',
+              ]"
+              @click="handleCrumbsClick(index)"
+            >
+              <div>{{ item.name }}</div>
+              <div
+                v-if="index !== crumbs.length - 1"
+                class="ml-[20rpx] flex items-center mb-[2rpx]"
+              >
+                <tm-icon
+                  name="tmicon-angle-right"
+                  :font-size="20"
+                  :color="index !== crumbs.length - 1 ? '#7A58DE' : '#C1B4EA'"
+                ></tm-icon>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
+          @click="()=>allCheck(currentCrumbs.checkStatus)"
+        >
+          <div>
+            <checkBox
+              :disabled="currentCrumbs?.sons?.length === 0"
+              :modelValue="currentCrumbs.checkStatus"
+            ></checkBox>
+          </div>
+          <div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
+            全选
+          </div>
+        </div>
+        <div
+          v-if="currentCrumbs?.sons?.length"
+          v-for="item in currentCrumbs?.sons"
+          class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
+        >
+          <div class="w-full flex items-center justify-between">
+            <div
+              class="flex items-center"
+            >
+              <div>
+                <checkBox
+                  :disabled="!item?.sons?.length"
+                  v-model="item.checkStatus"
+                  @change="(val) => checkItemChange(item, val)"
+                ></checkBox>
+              </div>
+              <div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
+                {{ item.name }}
+              </div>
+            </div>
+            <div v-if="item.sons?.length" class="flex items-center mr-[32rpx]">
+              <div class="vDivider mr-[32rpx]"></div>
+              <div @click="() => toNextLevel(item)" class="flex items-center">
+                <div class="mr-[12rpx]">
+                  <tm-image
+                    :width="26"
+                    :height="26"
+                    :src="item.checkStatus !== 'checked' ? downDep : downDepDis"
+                  ></tm-image>
+                </div>
+                <div
+                  class="text-[28rpx] leading-[54rpx] font-bold"
+                  :class="
+                    item.checkStatus !== 'checked'
+                      ? 'text-[#46299D]'
+                      : 'text-[#C1B4EA]'
+                  "
+                >
+                  下级
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="h-[162rpx] flex justify-center bg-[#FFFFFF]">
+        <div class="mt-[14rpx] btnBox">
+          <tm-button
+            color="#46299D"
+            disabled="true"
+            disabledColor="#E6E6E6"
+            :margin="[0]"
+            :shadow="0"
+            :width="426"
+            :height="76"
+            size="large"
+            label="确定"
+          >
+          </tm-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, computed, onMounted,nextTick } from "vue";
+import { onShow, onLoad } from "@dcloudio/uni-app";
+import { useChatList } from "@/store/chatList/index.js";
+import { useAuth } from "@/store/auth";
+import { useTalkStore, useUserStore } from "@/store";
+import { useGroupTypeStore } from "@/store/groupType";
+import downDep from "@/static/image/chatList/downDep.png";
+import downDepDis from "@/static/image/chatList/downDepDis.png";
+import checkBox from "@/components/checkBox/index.vue";
+import lodash from 'lodash'
+
+const {
+  groupActiveIndex,
+  getDepsTreeMy,
+  depTreeMyList,
+  crumbs,
+  crumbsIndex,
+  onChoosenDeps,
+} = useGroupTypeStore();
+
+const searchVal = ref("");
+const crumbsContainer = ref(null);
+
+const currentCrumbs = computed(() => {
+  if (crumbs.value[crumbsIndex.value] ) {
+    if (searchVal.value && searchVal.value !== "") {
+      let filterSons = crumbs.value[crumbsIndex.value].sons.filter((item) =>
+        item.name.includes(searchVal.value)
+      );
+        return {
+          ...crumbs.value[crumbsIndex.value],
+          sons: filterSons,
+        };
+    }
+    return crumbs.value[crumbsIndex.value];
+  }
+  return {}
+});
+
+const findNodeById = (node, targetId) => {
+  if (node.ID === targetId) {
+    return node;
+  }
+  if (node.sons && Array.isArray(node.sons)) {
+    for (const son of node.sons) {
+      const found = findNodeById(son, targetId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+const findParentNode = (node, targetId) => {
+  if (!node.sons || !Array.isArray(node.sons)) return null;
+  for (const son of node.sons) {
+    if (son.ID === targetId) {
+      return node;
+    }
+    const parent = findParentNode(son, targetId);
+    if (parent) {
+      return parent;
+    }
+  }
+  return null;
+};
+
+// 检查并更新父节点的状态
+const updateParentStatus = (node) => {
+  const parent = findParentNode(depTreeMyList.value[0], node.ID);
+  if (!parent) return;
+  const allChecked =
+    parent.sons &&
+    Array.isArray(parent.sons) &&
+    parent.sons.every((son) => son.checkStatus === "checked");
+  const someChecked =
+    parent.sons &&
+    Array.isArray(parent.sons) &&
+    parent.sons.some(
+      (son) =>
+        son.checkStatus === "checked" || son.checkStatus === "halfChecked"
+    );
+
+  if (allChecked) {
+    parent.checkStatus = "checked";
+  } else if (someChecked) {
+    parent.checkStatus = "halfChecked";
+  } else {
+    parent.checkStatus = "noChecked";
+  }
+
+  updateParentStatus(parent);
+};
+
+// 更新当前节点及其所有子节点的状态
+const updateCheckStatus = (node, status) => {
+  node.checkStatus = status;
+  if (node.sons && Array.isArray(node.sons) && node.sons.length > 0) {
+    node.sons.forEach((son) => updateCheckStatus(son, status));
+  }
+};
+
+const checkItemChange = (item, val) => {
+  // 更新当前节点及其子节点的状态
+  updateCheckStatus(item, val);
+
+  // 更新父节点的状态
+  updateParentStatus(item);
+};
+
+const toNextLevel = async (item) => {
+  if (item.checkStatus !== "checked") {
+    crumbs.value.push(item);
+    crumbsIndex.value++;
+    await nextTick(); 
+    if (crumbsContainer.value) {
+      crumbsContainer.value.scrollLeft = crumbsContainer.value.scrollWidth;
+    }
+  }
+};
+
+const handleCrumbsClick = (index) => {
+  crumbsIndex.value = index;
+  crumbs.value = crumbs.value.slice(0, index + 1);
+};
+
+const allCheck = (status) => {
+  let statusT = 'noChecked';
+  if (status === "checked") {
+    statusT = "noChecked";
+  } else {
+    statusT = "checked";
+  }
+  if (searchVal.value && searchVal.value !== "") {
+    currentCrumbs.value.sons.forEach((item) => {
+      const itemT = findNodeById(depTreeMyList.value[0], item.ID)
+      if (!itemT) return;
+      checkItemChange(itemT, statusT);
+    });
+  } else {    
+    if (crumbs.value[crumbsIndex.value] && crumbs.value[crumbsIndex.value].sons?.length) {
+      const parent = findParentNode(depTreeMyList.value[0], crumbs.value[crumbsIndex.value].sons[0].ID);
+      if (!parent) return;
+      checkItemChange(parent, statusT ==='checked' ? "checked":"noChecked");
+    }
+  }
+};
+
+watch(() => depTreeMyList.value, (newValue, oldValue) => {
+  console.log("depTreeMyList", newValue);
+  
+}, { deep: true });
+
+watch(() => searchVal.value, (newValue, oldValue) => {
+  console.log("searchVal", newValue);
+});
+
+const init = async () => {
+  crumbsIndex.value = 0;
+  await getDepsTreeMy();
+  crumbs.value = depTreeMyList.value.length ? [depTreeMyList.value[0]] : [];
+};
+
+onMounted(() => {
+  init();
+});
+</script>
+<style scoped lang="scss">
+uni-page-body,
+page {
+  height: 100%;
+}
+.outer-layer {
+  overflow-y: auto;
+  flex: 1;
+  background-image: url("@/static/image/clockIn/z3280@3x.png");
+  background-size: cover;
+  padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
+}
+.root {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 18rpx;
+  overflow: hidden;
+}
+.divider {
+  height: 1rpx;
+  background-color: #7c7c7c;
+  opacity: 0.6;
+}
+.vDivider {
+  width: 1rpx;
+  height: 48rpx;
+  background-color: #b4b4b4;
+}
+
+.avatar-placeholder {
+  width: 192rpx;
+  height: 192rpx;
+  background-color: #e0e0e0;
+  border-radius: 50%;
+  margin-bottom: 40rpx;
+}
+.groupCard {
+  height: 272rpx;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 12rpx;
+  &.firstPanel {
+    background-image: url("@/static/image/chatList/zu6033@2x.png");
+  }
+  &.secondPanel {
+    background-image: url("@/static/image/chatList/zu6031@2x.png");
+    margin-top: 28rpx;
+    margin-bottom: 28rpx;
+  }
+  &.thirdPanel {
+    background-image: url("@/static/image/chatList/zu6032@2x.png");
+  }
+  &.activePanel {
+    box-shadow: 0 0 0 3rpx #46299d;
+  }
+}
+.btnBox {
+  :deep(uni-button[disabled="true"]) {
+    color: #bebebe !important;
+  }
+}
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;  /* Chrome, Safari, and Opera */
+}
+</style>

src/pages/chooseGroupType/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="outer-layer">
     <div>
-      <tm-navbar :hideBack="false" hideHome title="选择群类型" :leftWidth="320">
+      <tm-navbar :hideBack="false" hideHome title="选择群类型">
       </tm-navbar>
     </div>
     <div class="root">
-      <div class="w-full pl-[32rpx] pr-[32rpx] overflow-y-auto" >
+      <div class="w-full h-[1134rpx] mb-[20rpx] pl-[32rpx] pr-[32rpx] overflow-y-auto" >
-        <div class=" pl-[32rpx] pr-[32rpx] pt-[44rpx] bg-[#FFFFFF]" >
+        <div class=" pl-[32rpx] pr-[32rpx] pt-[44rpx] pb-[42rpx] bg-[#FFFFFF]" >
           <div class="text-[40rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
             群类型保存后将不可修改
           </div>
@@ -14,14 +14,50 @@
             请创建过程中正确选择
           </div>
           <div class="mt-[54rpx] w-full h-[872rpx]" >
-            <div class="groupCard">
+            <div @click="groupActiveIndex = 0" class="groupCard firstPanel" :class="groupActiveIndex === 0?'activePanel':''">
-
+              <div class="w-full h-full pt-[64rpx] pl-[36rpx]">
+                <div class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
+                  普通群
+                </div>
+                <div class="text-[24rpx] leading-[36rpx] text-[#939393] w-[216rpx]" >
+                  员工线上沟通专用群
+                  离职后自动退群
+                </div>
+              </div>
+            </div>
+            <div @click="groupActiveIndex = 1" class="groupCard secondPanel" :class="groupActiveIndex === 1?'activePanel':''">
+              <div class="w-full h-full pt-[48rpx] pr-[36rpx] flex flex-col items-end">
+                <div class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
+                  部门群
+                </div>
+                <div class="text-[24rpx] leading-[36rpx] text-[#939393] w-[288rpx] text-end" >
+                  指定部门员工入职自动进群
+                  离职后自动退群
+                </div>
+                <div @click="chooseDep" class="text-[24rpx] leading-[36rpx] text-[#C1B4EA] flex items-center mt-[16rpx]" >
+                  <div :class="groupActiveIndex === 1?'text-[#7A58DE]':'text-[#C1B4EA]'" >选择部门</div>
+                  <div class="ml-[20rpx]">
+                    <tm-icon name="tmicon-angle-right" :font-size="18" :color="groupActiveIndex === 1?'#7A58DE':'#C1B4EA'"></tm-icon>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div @click="groupActiveIndex = 2" class="groupCard thirdPanel" :class="groupActiveIndex === 2?'activePanel':''">
+              <div class="w-full h-full pt-[64rpx] pl-[36rpx]">
+                <div class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
+                  项目群
+                </div>
+                <div class="text-[24rpx] leading-[36rpx] text-[#939393] w-[216rpx]" >
+                  项目成员沟通专用群
+                  离职后自动退群
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
       <div class="h-[162rpx] flex justify-center bg-[#FFFFFF]">
-        <div class="mt-[14rpx]" >
+        <div class="mt-[14rpx] btnBox" >
           <tm-button 
             color="#46299D" 
             disabled="true"
@@ -31,7 +67,7 @@
             :width="426"
             :height="76"
             size="large" 
-            label="按钮"
+            label="确定"
           >
           </tm-button>
         </div>
@@ -45,18 +81,16 @@ import { onShow, onLoad } from "@dcloudio/uni-app";
 import { useChatList } from "@/store/chatList/index.js";
 import { useAuth } from "@/store/auth";
 import { useTalkStore, useUserStore } from "@/store";
-import addCircle from "@/static/image/chatList/addCircle.png";
+import { useGroupTypeStore } from "@/store/groupType";
-import cahtPopover from "@/static/image/chatList/cahtPopover.png";
-import zu4992 from "@/static/image/chatList/zu4992@2x.png";
-import zu4991 from "@/static/image/chatList/zu4991@2x.png";
-import zu4989 from "@/static/image/chatList/zu4989@2x.png";
 
-const talkStore = useTalkStore();
+const { groupActiveIndex } = useGroupTypeStore();
-const userStore = useUserStore();
-const { userInfo } = useAuth();
 
-const groupChatName = ref("");
+
-const groupChatType = ref('');
+const chooseDep = () => {
+  uni.navigateTo({
+    url: '/pages/chooseDeps/index'
+  });
+};
 
 </script>
 <style scoped lang="scss">
@@ -94,7 +128,31 @@ page {
   margin-bottom: 40rpx;
 }
 .groupCard {
-  display: block;
+  height: 272rpx;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 12rpx;
+  &.firstPanel {
+    background-image: url("@/static/image/chatList/zu6033@2x.png");
+  }
+  &.secondPanel {
+    background-image: url("@/static/image/chatList/zu6031@2x.png");
+    margin-top: 28rpx;
+    margin-bottom: 28rpx;
+  }
+  &.thirdPanel {
+    background-image: url("@/static/image/chatList/zu6032@2x.png");
+  }
+  &.activePanel {
+    box-shadow: 0 0 0 3rpx #46299D;
+  }
+}
+.btnBox {
+  :deep(uni-button[disabled="true"]){
+    color: #BEBEBE !important;
+  }
 }
 
 </style>

src/pages/index/index.vue

@@ -16,7 +16,7 @@
           </div>
         </template>
         <template v-slot:right>
-          <div class="mr-[48rpx]">
+          <div class="mr-[48rpx] popoverBox">
             <tm-popover position="br" color="#333333" :width="260">
               <tm-image
                 :width="41"
@@ -154,4 +154,9 @@ page {
   background-color: #7C7C7C;
   opacity: 0.6;
 }
+.popoverBox {
+  :deep(.popover-bcc){
+    transform:translateX(20rpx) translateY(40rpx);
+  }
+}
 </style>

src/store/auth/index.js

@@ -4,7 +4,7 @@ import {uniStorage} from "@/utils/uniStorage.js"
 import {ref} from 'vue'
 export const useAuth = createGlobalState(() => {
   // const token = useStorage('token', '', uniStorage)
-  const token = ref('79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941ca1430937103230a1e32a1715f569f3efdbe6f8cb8b7b8642bd679668081b9b08f693d1b5be6002d936ec51e1e3e0c4927de9e32ac99a109b326e5d2bda27ec87624bb416ec70d2a95a2e190feeba9f0d6bae8571b3dfe89c824712344759a8f2bff9d70747c52525cf6a5614f9c770bca461a9b9c247b6dca97bcf83bbaf99bb726752c4fe1e9a4aa7de5c4cf3e88a3e480801280d45cdc124f9d8221105d8529c7c268c1251c3477bff5c051043bf980d1ae32bb67035d540ba9325759be69093c01497a2ece6c54d7ba2c2ccd07bb67242ccd7b216049b2afefd767f7269fa45ebb81dff8bec485f539e91611a2908af4407a64e67e6a1cb533d30ae71e630f')
+  const token = ref('79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941ca1430937103230a1e32a1715f569f3efdbe6f8cb8b7b8642bd679668081b9b08f693d1b5be6002d936ec51e1e3e0c4927de9e32ac99a109b326e5d2bda27ec87624bb416ec70d2a95a2e190feeba9f0d6bae8571b3dfe89c824712344759a8f2bff9d70747c52525cf6a5614f9c770bca461a9b9c247b6dca97bcf83bbaf99bb726752c4fe1e9a4aa7de5c4cf3e88a3e480801280d45cdc124f9d8221105d8529c7c268c1251c3477bff5c051043bf980aeac85434ccb1cebe1e9f4e069aeab4e7218dd08b25d2c7a248688eacf5337b097fe8e841ea8fa3ac1563adc6d41200a4ab1d210a428141915919cd9d74796e80000b9d024850015b8f7defce2919e15')
   const refreshToken = useStorage('refreshToken', '', uniStorage)
   const userInfo = useStorage('userInfo', {}, uniStorage)
   const leaderList = useStorage('leaderList', [], uniStorage)

src/store/groupType/index.js

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { useDialogueStore } from '@/store'
+import lodash from 'lodash'
+
+import {ref} from 'vue'
+import {createGlobalState,useStorage} from '@vueuse/core'
+import {uniStorage} from "@/utils/uniStorage.js"
+import {departmentV2TreeMy} from '@/api/deps/index.js'
+
+export const useGroupTypeStore = createGlobalState(() => {
+  const depTreeMyList = ref([])
+  const crumbs = ref([])
+  const crumbsIndex = ref(0)
+  const onChoosenDeps = ref([])
+  // const checkedKeys = ref([])
+  // const halfCheckedKeys = ref([])
+
+  const getDepsTreeMy= async()=>{
+    const res = await departmentV2TreeMy()
+    if(res.status===0){
+      depTreeMyList.value = res.data.nodes
+    }
+  }
+
+
+
+  return {
+    depTreeMyList,
+    getDepsTreeMy,
+    crumbs,
+    crumbsIndex,
+    onChoosenDeps
+  }
+})

src/uni_modules/tmui/components/tm-popover/tm-popover.vue

@@ -32,7 +32,8 @@
 				:class="[
 					isNvue ? 'fixed' : 'absolute',
 					props.position == 'tc' || props.position == 'tl' || props.position == 'tr' ? 'popover-tcc' : '',
-					props.position == 'bc' || props.position == 'bl' || props.position == 'br' ? 'popover-bcc' : ''
+					props.position == 'bc' || props.position == 'bl' || props.position == 'br' ? 'popover-bcc' : '',
+					
 				]"
 				:style="[
 					isNvue && props.position == 'tc'