widget.qw 1.0.24 → 1.0.25

package/src/components/user_selector.vue

@@ -1,639 +1,639 @@
-<template>
-  <div class="user-selector">
-    <van-field
-      v-if="!isGone"
-      :model-value="selectedUserInfo"
-      clickable
-      :label="props.label"
-      :placeholder="props.placeholder"
-      readonly
-      @click="showPicker = !props.readonly"
-      :right-icon="props.readonly ? '' : 'arrow'"
-      :required="props.required"
-      :rules="props.rules"
-    />
-
-    <van-popup v-model:show="showPicker" position="bottom" class="user-popup">
-      <div class="popup-container">
-        <div class="picker-header">
-          <div class="header-left">
-            <van-button
-              v-if="currentLevel > 0"
-              @click="goBack"
-              icon="arrow-left"
-              size="small"
-              class="back-button"
-            />
-          </div>
-
-          <!-- 移除header-center包装，直接使用current-path -->
-          <div class="current-path">{{ currentPath }}</div>
-
-          <div class="header-right">
-            <van-button size="small" @click="handleClear" class="cancel-btn"
-              >清空</van-button
-            >
-            <van-button
-              type="primary"
-              size="small"
-              @click="confirmSelection"
-              class="confirm-btn"
-              >确定</van-button
-            >
-          </div>
-        </div>
-
-        <div v-if="mode === 'multiple'" class="select-all-container">
-          <van-checkbox
-            shape="square"
-            v-model="isAllChecked"
-            @click="toggleAllSelect"
-            label-position="left"
-          >
-            全选
-          </van-checkbox>
-        </div>
-        <div class="search-container">
-          <van-search
-            v-model="searchInput"
-            placeholder="输入工号查询"
-            clearable
-            @clear="handleClearSearch"
-          />
-          <van-button
-            size="small"
-            type="primary"
-            @click="searchUserById"
-            class="search-btn"
-            >搜索</van-button
-          >
-        </div>
-        <div class="scroll-container">
-          <van-cell-group v-if="!searchUserId && currentDepartments.length > 0">
-            <van-cell
-              v-for="dept in currentDepartments"
-              :key="dept.id"
-              :title="dept.name"
-              clickable
-              @click="selectDepartment(dept)"
-            >
-              <template #right-icon>
-                <van-icon v-if="dept.subDepartments?.length" name="arrow" />
-              </template>
-            </van-cell>
-          </van-cell-group>
-
-          <van-checkbox-group
-            v-model="tempSelectedUsers"
-            v-if="mode === 'multiple'"
-          >
-            <van-cell-group>
-              <van-cell
-                v-for="user in userData.users"
-                :key="user.userid"
-                :title="user.name"
-                clickable
-                @click="toggleUserSelect(user.userid)"
-              >
-                <template #right-icon>
-                  <van-checkbox
-                    :name="user.userid"
-                    shape="square"
-                    @click.stop
-                  />
-                  <van-loading v-if="userData.loading" size="20px" />
-                </template>
-              </van-cell>
-            </van-cell-group>
-          </van-checkbox-group>
-
-          <van-radio-group v-model="tempSelectedUser" v-else>
-            <van-cell-group>
-              <van-cell
-                v-for="user in userData.users"
-                :key="user.userid"
-                :title="user.name"
-                clickable
-                @click="tempSelectedUser = user.userid"
-              >
-                <template #right-icon>
-                  <van-radio :name="user.userid" />
-                  <van-loading v-if="userData.loading" size="20px" />
-                </template>
-              </van-cell>
-            </van-cell-group>
-          </van-radio-group>
-        </div>
-      </div>
-    </van-popup>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch } from "vue";
-import util from "../util";
-
-const props = defineProps({
-  modelValue: [Array, String, Number],
-  label: {
-    type: String,
-    default: "选择人员",
-  },
-  placeholder: {
-    type: String,
-    default: "请选择人员",
-  },
-  mode: {
-    type: String,
-    default: "single",
-    validator: (v) => ["single", "multiple"].includes(v),
-  },
-  required: {
-    type: Boolean,
-    default: true,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  rules: {
-    type: Array,
-    default: () => [],
-  },
-  currentDept: {
-    // 新增 currentDept 参数
-    type: String,
-    default: "",
-  },
-});
-
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
-
-// 用户加载逻辑
-const userData = ref({
-  users: [],
-  loading: false,
-  error: null,
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-// 状态管理
-const departmentTree = ref([]);
-const currentDepartments = ref([]);
-const selectionPath = ref([]);
-const searchInput = ref("");
-const searchUserId = ref("");
-const showPicker = ref(false);
-const selectedUsers = ref([]);
-
-// 临时选择状态
-const tempSelectedUser = ref(null);
-const tempSelectedUsers = ref([]);
-const isAllChecked = ref(false);
-const isInternalChange = ref(false); // 标志位，用于区分是内部选择还是外部修改
-
-const onShow = () => {
-  if (isReadonly.value) return;
-
-  showPicker.value = true;
-};
-
-// 修复返回功能的核心修改点
-const getCurrentDepartments = () => {
-  if (selectionPath.value.length === 0) return departmentTree.value;
-  let current = departmentTree.value;
-  for (const dept of selectionPath.value) {
-    const found = current.find((d) => d.id === dept.id);
-    current = found?.subDepartments || [];
-  }
-  return current;
-};
-
-const goBack = () => {
-  if (currentLevel.value === 0) return;
-  selectionPath.value.pop();
-  currentDepartments.value = getCurrentDepartments();
-  // 修复：返回时加载对应部门的用户
-  const targetDeptId =
-    selectionPath.value.slice(-1)[0]?.id || departmentTree.value[0]?.id;
-  if (targetDeptId) loadUsers(targetDeptId);
-};
-
-// 初始化方法
-const initTempSelection = () => {
-  if (props.mode === "multiple") {
-    tempSelectedUsers.value = Array.isArray(props.modelValue)
-      ? [...props.modelValue]
-      : [];
-  } else {
-    tempSelectedUser.value = props.modelValue || null;
-  }
-};
-
-// 添加模块级缓存对象
-// 在模块顶部添加全局缓存
-const departmentCache = ref(null); // 模块级缓存
-const userCache = new Map();
-const pendingPromises = new Map(); // 进行中的请求
-
-// 部门树加载（添加共享缓存）
-const fetchAllDepartments = async () => {
-  console.log("---------departmentCache---------", departmentCache);
-  if (departmentCache.value) {
-    departmentTree.value = departmentCache.value;
-    currentDepartments.value = departmentCache.value;
-    return;
-  }
-
-  try {
-    const response = await util.get_subdepartments({ departmentId: 1 });
-    // console.log('---------------userSelector:get_subdepartments--------------------------',response);
-    if (response.code === 200) {
-      departmentCache.value = response.data.subDepartments || [];
-      departmentTree.value = departmentCache.value;
-      currentDepartments.value = departmentTree.value;
-      //   console.log('---------departmentCache2---------',departmentCache);
-    }
-  } catch (error) {
-    console.error("初始化部门数据失败:", error);
-  }
-};
-
-// 用户加载逻辑（优化缓存处理）
-const loadUsers = async (departmentId) => {
-  console.log("---------userCache---------", userCache);
-  if (userCache.has(departmentId)) {
-    console.log("---------userCacheHasDepartmentId---------", userCache);
-    userData.value.users = userCache.get(departmentId);
-    updateAllCheckedState();
-    return;
-  }
-
-  // 防止重复请求
-  if (pendingPromises.has(departmentId)) {
-    await pendingPromises.get(departmentId);
-    return;
-  }
-
-  try {
-    // 删除 departmentCache 的声明
-    // const departmentCache = ref(null);
-
-    const fetchAllDepartments = async () => {
-      try {
-        const response = await util.get_subdepartments({ departmentId: 1 });
-        if (response.code === 200) {
-          departmentTree.value = response.data.subDepartments || [];
-          currentDepartments.value = departmentTree.value;
-        }
-      } catch (error) {
-        console.error("初始化部门数据失败:", error);
-      }
-    };
-    userData.value.loading = true;
-    const promise = util.get_subdepartments_users({ departmentId });
-    pendingPromises.set(departmentId, promise);
-
-    const response = await promise;
-    console.log(
-      "---------------userSelector:get_subdepartments_users--------------------------",
-      response
-    );
-    if (response.code === 200) {
-      const users = response.data.users || [];
-      userCache.set(departmentId, users);
-      userData.value.users = users;
-      updateAllCheckedState();
-    }
-  } catch (error) {
-    userData.value.error = error;
-  } finally {
-    userData.value.loading = false;
-    pendingPromises.delete(departmentId);
-  }
-};
-
-// 部门选择处理
-const selectDepartment = (dept) => {
-  selectionPath.value.push(dept);
-  currentDepartments.value = dept.subDepartments || [];
-  loadUsers(dept.id);
-};
-
-// 计算属性
-const currentPath = computed(
-  () => selectionPath.value.map((d) => d.name).join(" / ") || "请选择部门"
-);
-
-const currentLevel = computed(() => selectionPath.value.length);
-
-const selectedUserInfo = computed(() => {
-  if (props.mode === "multiple") {
-    return selectedUsers.value.length > 0
-      ? `${selectedUsers.value.map((u) => u.name).join(", ")}`
-      : "";
-  }
-  return selectedUsers.value[0] ? `${selectedUsers.value[0].name}` : "";
-});
-
-// 全选逻辑
-const toggleAllSelect = () => {
-  if (isAllChecked.value) {
-    tempSelectedUsers.value = userData.value.users.map((u) => u.userid);
-  } else {
-    tempSelectedUsers.value = [];
-  }
-};
-
-const updateAllCheckedState = () => {
-  const currentUserIds = userData.value.users.map((u) => u.userid);
-  isAllChecked.value =
-    currentUserIds.length > 0 &&
-    currentUserIds.every((id) => tempSelectedUsers.value.includes(id));
-};
-
-// 用户选择切换
-const toggleUserSelect = (userId) => {
-  const index = tempSelectedUsers.value.indexOf(userId);
-  if (index > -1) {
-    tempSelectedUsers.value.splice(index, 1);
-  } else {
-    tempSelectedUsers.value.push(userId);
-  }
-  updateAllCheckedState();
-};
-
-// 确认选择
-const confirmSelection = () => {
-  isInternalChange.value = true; // 标记为内部选择
-  if (props.mode === "multiple") {
-    // 合并当前选择的用户与已存在的selectedUsers
-    const currentSelected = userData.value.users.filter((u) =>
-      tempSelectedUsers.value.includes(u.userid)
-    );
-
-    // 使用Set去重
-    const uniqueUsers = new Set([...selectedUsers.value, ...currentSelected]);
-    selectedUsers.value = Array.from(uniqueUsers);
-
-    // 提取所有用户ID并emit
-    const allUserIds = selectedUsers.value.map((u) => u.userid);
-    emit("update:modelValue", allUserIds);
-  } else {
-    const selected = userData.value.users.find(
-      (u) => u.userid === tempSelectedUser.value
-    );
-    selectedUsers.value = selected ? [selected] : [];
-    emit("update:modelValue", tempSelectedUser.value);
-  }
-  showPicker.value = false;
-};
-
-const handleClear = () => {
-  tempSelectedUsers.value = [""];
-  selectedUsers.value = [""];
-  isAllChecked.value = false;
-  emit("update:modelValue", null);
-  showPicker.value = false;
-};
-
-// 添加部门路径查找方法
-function findDeptPath(deptId, tree, path = []) {
-  for (const dept of tree) {
-    if (dept.id === deptId) {
-      return [...path, dept];
-    }
-    if (dept.subDepartments?.length) {
-      const found = findDeptPath(deptId, dept.subDepartments, [...path, dept]);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-// 添加当前部门处理逻辑
-const handleCurrentDeptChange = async (deptId) => {
-  const path = findDeptPath(deptId, departmentTree.value);
-  if (path) {
-    selectionPath.value = path;
-    currentDepartments.value = getCurrentDepartments();
-    loadUsers(deptId);
-  }
-};
-
-// 添加重置到根部门方法
-const resetToRootDepartment = () => {
-  selectionPath.value = [];
-  currentDepartments.value = departmentTree.value;
-  loadUsers(1); // 假设根部门ID为1
-};
-
-// 监听currentDept变化
-watch(
-  () => props.currentDept,
-  async (newVal) => {
-    if (!departmentCache.value) await fetchAllDepartments();
-
-    if (newVal) {
-      await handleCurrentDeptChange(newVal);
-    } else {
-      resetToRootDepartment();
-    }
-  },
-  { immediate: true }
-);
-
-// 监听弹窗显示状态
-watch(showPicker, (val) => {
-  if (val) {
-    initTempSelection();
-    if (props.mode === "multiple") {
-      updateAllCheckedState();
-    }
-  }
-});
-
-// 监听 modelValue 变化
-watch(
-  () => props.modelValue,
-  async (newVal, oldVal) => {
-    // console.log('watchModelValue',isInternalChange);
-    if (newVal !== oldVal && !isInternalChange.value) {
-      if (props.mode === "multiple") {
-        console.log(
-          "-----------------------watchModelValue-------------------",
-          newVal
-        );
-        // 初始化时转换数组为部门分组格式
-        const initValues = Array.isArray(newVal) ? newVal : [];
-        tempSelectedUsers.value = initValues.reduce((acc, userId) => {
-          const deptId = selectedUsers.value.find(
-            (u) => u.userid === userId
-          )?.mainDepartment;
-          if (deptId) {
-            acc[deptId] = [...(acc[deptId] || []), userId];
-          }
-          return acc;
-        }, {});
-        // 获取所有用户信息
-        if (Array.isArray(newVal) && newVal.length > 0) {
-          const users = [];
-          for (const userId of newVal) {
-            console.log(
-              "-----------------------watchModelValue:userid-------------------",
-              userId,
-              newVal
-            );
-            const user = await getUserInfoById(userId);
-            if (user) users.push(user);
-          }
-          selectedUsers.value = users;
-        }
-      } else {
-        tempSelectedUser.value = newVal || null;
-        // 获取单个用户信息
-        if (newVal) {
-          const user = await getUserInfoById(newVal);
-          if (user) selectedUsers.value = [user];
-        }
-      }
-    }
-
-    // 重置标志位
-    if (isInternalChange.value) {
-      isInternalChange.value = false;
-    }
-  }
-);
-
-// 获取用户信息
-const getUserInfoById = async (userId) => {
-  try {
-    const response = await util.get_wxuser_by_id({ userId });
-    if (response.code === 200) {
-      return response.data;
-    }
-  } catch (error) {
-    console.error("获取用户信息失败:", error);
-  }
-  return null;
-};
-
-const searchUserById = async () => {
-  searchUserId.value = searchInput.value;
-  if (!searchUserId.value) return;
-
-  try {
-    userData.value.loading = true;
-    const user = await getUserInfoById(searchUserId.value);
-    if (user) {
-      userData.value.users = [user];
-      // 更新currentPath显示用户部门
-      console.log("=========", user);
-
-      const deptPath = await findDeptPath(
-        user.mainDepartment,
-        departmentTree.value
-      );
-      if (deptPath) {
-        selectionPath.value = deptPath;
-      }
-      // 设置标志位，查询后只显示人员列表
-      currentDepartments.value = [];
-    } else {
-      userData.value.users = [];
-    }
-  } catch (error) {
-    console.error("查询用户失败:", error);
-  } finally {
-    userData.value.loading = false;
-  }
-};
-
-const handleClearSearch = () => {
-  searchUserId.value = "";
-  if (selectionPath.value.length > 0) {
-    loadUsers(selectionPath.value.slice(-1)[0].id);
-  } else {
-    loadUsers(departmentTree.value[0]?.id || 1);
-  }
-};
-</script>
-
-<style scoped>
-.user-popup {
-  height: 60vh;
-  width: 100%;
-}
-
-.picker-header {
-  padding: 10px;
-  border-bottom: 1px solid #ebedf0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.scroll-container {
-  height: calc(80vh - 150px);
-  overflow-y: auto;
-}
-
-.search-container {
-  padding: 10px;
-  background: #fff;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-:deep(.search-container .van-search) {
-  flex: 1;
-}
-
-.search-btn {
-  flex-shrink: 0;
-}
-
-.select-all-container {
-  font-size: 14px;
-  padding: 0 16px;
-  margin: 10px 0;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-:deep(.van-checkbox__icon--square) {
-  border-radius: 4px;
-}
-
-:deep(.van-checkbox__label) {
-  margin-left: 8px;
-}
-
-:deep(.van-radio-group) .van-cell,
-:deep(.van-checkbox-group) .van-cell {
-  align-items: center;
-}
-
-.current-path {
-  flex: 1;
-  font-size: 14px;
-  color: #323233;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.header-right {
-  display: flex;
-  gap: 8px;
-  margin-left: auto;
-}
-
-.cancel-btn {
-  color: #969799;
-  margin-right: 5px;
-}
-</style>
+<template>
+  <div class="user-selector">
+    <van-field
+      v-if="!isGone"
+      :model-value="selectedUserInfo"
+      clickable
+      :label="props.label"
+      :placeholder="props.placeholder"
+      readonly
+      @click="showPicker = !props.readonly"
+      :right-icon="props.readonly ? '' : 'arrow'"
+      :required="props.required"
+      :rules="props.rules"
+    />
+
+    <van-popup v-model:show="showPicker" position="bottom" class="user-popup">
+      <div class="popup-container">
+        <div class="picker-header">
+          <div class="header-left">
+            <van-button
+              v-if="currentLevel > 0"
+              @click="goBack"
+              icon="arrow-left"
+              size="small"
+              class="back-button"
+            />
+          </div>
+
+          <!-- 移除header-center包装，直接使用current-path -->
+          <div class="current-path">{{ currentPath }}</div>
+
+          <div class="header-right">
+            <van-button size="small" @click="handleClear" class="cancel-btn"
+              >清空</van-button
+            >
+            <van-button
+              type="primary"
+              size="small"
+              @click="confirmSelection"
+              class="confirm-btn"
+              >确定</van-button
+            >
+          </div>
+        </div>
+
+        <div v-if="mode === 'multiple'" class="select-all-container">
+          <van-checkbox
+            shape="square"
+            v-model="isAllChecked"
+            @click="toggleAllSelect"
+            label-position="left"
+          >
+            全选
+          </van-checkbox>
+        </div>
+        <div class="search-container">
+          <van-search
+            v-model="searchInput"
+            placeholder="输入工号查询"
+            clearable
+            @clear="handleClearSearch"
+          />
+          <van-button
+            size="small"
+            type="primary"
+            @click="searchUserById"
+            class="search-btn"
+            >搜索</van-button
+          >
+        </div>
+        <div class="scroll-container">
+          <van-cell-group v-if="!searchUserId && currentDepartments.length > 0">
+            <van-cell
+              v-for="dept in currentDepartments"
+              :key="dept.id"
+              :title="dept.name"
+              clickable
+              @click="selectDepartment(dept)"
+            >
+              <template #right-icon>
+                <van-icon v-if="dept.subDepartments?.length" name="arrow" />
+              </template>
+            </van-cell>
+          </van-cell-group>
+
+          <van-checkbox-group
+            v-model="tempSelectedUsers"
+            v-if="mode === 'multiple'"
+          >
+            <van-cell-group>
+              <van-cell
+                v-for="user in userData.users"
+                :key="user.userid"
+                :title="user.name"
+                clickable
+                @click="toggleUserSelect(user.userid)"
+              >
+                <template #right-icon>
+                  <van-checkbox
+                    :name="user.userid"
+                    shape="square"
+                    @click.stop
+                  />
+                  <van-loading v-if="userData.loading" size="20px" />
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-checkbox-group>
+
+          <van-radio-group v-model="tempSelectedUser" v-else>
+            <van-cell-group>
+              <van-cell
+                v-for="user in userData.users"
+                :key="user.userid"
+                :title="user.name"
+                clickable
+                @click="tempSelectedUser = user.userid"
+              >
+                <template #right-icon>
+                  <van-radio :name="user.userid" />
+                  <van-loading v-if="userData.loading" size="20px" />
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-radio-group>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from "vue";
+import util from "../util";
+
+const props = defineProps({
+  modelValue: [Array, String, Number],
+  label: {
+    type: String,
+    default: "选择人员",
+  },
+  placeholder: {
+    type: String,
+    default: "请选择人员",
+  },
+  mode: {
+    type: String,
+    default: "single",
+    validator: (v) => ["single", "multiple"].includes(v),
+  },
+  required: {
+    type: Boolean,
+    default: true,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  rules: {
+    type: Array,
+    default: () => [],
+  },
+  currentDept: {
+    // 新增 currentDept 参数
+    type: String,
+    default: "",
+  },
+});
+
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
+
+// 用户加载逻辑
+const userData = ref({
+  users: [],
+  loading: false,
+  error: null,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// 状态管理
+const departmentTree = ref([]);
+const currentDepartments = ref([]);
+const selectionPath = ref([]);
+const searchInput = ref("");
+const searchUserId = ref("");
+const showPicker = ref(false);
+const selectedUsers = ref([]);
+
+// 临时选择状态
+const tempSelectedUser = ref(null);
+const tempSelectedUsers = ref([]);
+const isAllChecked = ref(false);
+const isInternalChange = ref(false); // 标志位，用于区分是内部选择还是外部修改
+
+const onShow = () => {
+  if (isReadonly.value) return;
+
+  showPicker.value = true;
+};
+
+// 修复返回功能的核心修改点
+const getCurrentDepartments = () => {
+  if (selectionPath.value.length === 0) return departmentTree.value;
+  let current = departmentTree.value;
+  for (const dept of selectionPath.value) {
+    const found = current.find((d) => d.id === dept.id);
+    current = found?.subDepartments || [];
+  }
+  return current;
+};
+
+const goBack = () => {
+  if (currentLevel.value === 0) return;
+  selectionPath.value.pop();
+  currentDepartments.value = getCurrentDepartments();
+  // 修复：返回时加载对应部门的用户
+  const targetDeptId =
+    selectionPath.value.slice(-1)[0]?.id || departmentTree.value[0]?.id;
+  if (targetDeptId) loadUsers(targetDeptId);
+};
+
+// 初始化方法
+const initTempSelection = () => {
+  if (props.mode === "multiple") {
+    tempSelectedUsers.value = Array.isArray(props.modelValue)
+      ? [...props.modelValue]
+      : [];
+  } else {
+    tempSelectedUser.value = props.modelValue || null;
+  }
+};
+
+// 添加模块级缓存对象
+// 在模块顶部添加全局缓存
+const departmentCache = ref(null); // 模块级缓存
+const userCache = new Map();
+const pendingPromises = new Map(); // 进行中的请求
+
+// 部门树加载（添加共享缓存）
+const fetchAllDepartments = async () => {
+  console.log("---------departmentCache---------", departmentCache);
+  if (departmentCache.value) {
+    departmentTree.value = departmentCache.value;
+    currentDepartments.value = departmentCache.value;
+    return;
+  }
+
+  try {
+    const response = await util.get_subdepartments({ departmentId: 1 });
+    // console.log('---------------userSelector:get_subdepartments--------------------------',response);
+    if (response.code === 200) {
+      departmentCache.value = response.data.subDepartments || [];
+      departmentTree.value = departmentCache.value;
+      currentDepartments.value = departmentTree.value;
+      //   console.log('---------departmentCache2---------',departmentCache);
+    }
+  } catch (error) {
+    console.error("初始化部门数据失败:", error);
+  }
+};
+
+// 用户加载逻辑（优化缓存处理）
+const loadUsers = async (departmentId) => {
+  console.log("---------userCache---------", userCache);
+  if (userCache.has(departmentId)) {
+    console.log("---------userCacheHasDepartmentId---------", userCache);
+    userData.value.users = userCache.get(departmentId);
+    updateAllCheckedState();
+    return;
+  }
+
+  // 防止重复请求
+  if (pendingPromises.has(departmentId)) {
+    await pendingPromises.get(departmentId);
+    return;
+  }
+
+  try {
+    // 删除 departmentCache 的声明
+    // const departmentCache = ref(null);
+
+    const fetchAllDepartments = async () => {
+      try {
+        const response = await util.get_subdepartments({ departmentId: 1 });
+        if (response.code === 200) {
+          departmentTree.value = response.data.subDepartments || [];
+          currentDepartments.value = departmentTree.value;
+        }
+      } catch (error) {
+        console.error("初始化部门数据失败:", error);
+      }
+    };
+    userData.value.loading = true;
+    const promise = util.get_subdepartments_users({ departmentId });
+    pendingPromises.set(departmentId, promise);
+
+    const response = await promise;
+    console.log(
+      "---------------userSelector:get_subdepartments_users--------------------------",
+      response
+    );
+    if (response.code === 200) {
+      const users = response.data.users || [];
+      userCache.set(departmentId, users);
+      userData.value.users = users;
+      updateAllCheckedState();
+    }
+  } catch (error) {
+    userData.value.error = error;
+  } finally {
+    userData.value.loading = false;
+    pendingPromises.delete(departmentId);
+  }
+};
+
+// 部门选择处理
+const selectDepartment = (dept) => {
+  selectionPath.value.push(dept);
+  currentDepartments.value = dept.subDepartments || [];
+  loadUsers(dept.id);
+};
+
+// 计算属性
+const currentPath = computed(
+  () => selectionPath.value.map((d) => d.name).join(" / ") || "请选择部门"
+);
+
+const currentLevel = computed(() => selectionPath.value.length);
+
+const selectedUserInfo = computed(() => {
+  if (props.mode === "multiple") {
+    return selectedUsers.value.length > 0
+      ? `${selectedUsers.value.map((u) => u.name).join(", ")}`
+      : "";
+  }
+  return selectedUsers.value[0] ? `${selectedUsers.value[0].name}` : "";
+});
+
+// 全选逻辑
+const toggleAllSelect = () => {
+  if (isAllChecked.value) {
+    tempSelectedUsers.value = userData.value.users.map((u) => u.userid);
+  } else {
+    tempSelectedUsers.value = [];
+  }
+};
+
+const updateAllCheckedState = () => {
+  const currentUserIds = userData.value.users.map((u) => u.userid);
+  isAllChecked.value =
+    currentUserIds.length > 0 &&
+    currentUserIds.every((id) => tempSelectedUsers.value.includes(id));
+};
+
+// 用户选择切换
+const toggleUserSelect = (userId) => {
+  const index = tempSelectedUsers.value.indexOf(userId);
+  if (index > -1) {
+    tempSelectedUsers.value.splice(index, 1);
+  } else {
+    tempSelectedUsers.value.push(userId);
+  }
+  updateAllCheckedState();
+};
+
+// 确认选择
+const confirmSelection = () => {
+  isInternalChange.value = true; // 标记为内部选择
+  if (props.mode === "multiple") {
+    // 合并当前选择的用户与已存在的selectedUsers
+    const currentSelected = userData.value.users.filter((u) =>
+      tempSelectedUsers.value.includes(u.userid)
+    );
+
+    // 使用Set去重
+    const uniqueUsers = new Set([...selectedUsers.value, ...currentSelected]);
+    selectedUsers.value = Array.from(uniqueUsers);
+
+    // 提取所有用户ID并emit
+    const allUserIds = selectedUsers.value.map((u) => u.userid);
+    emit("update:modelValue", allUserIds);
+  } else {
+    const selected = userData.value.users.find(
+      (u) => u.userid === tempSelectedUser.value
+    );
+    selectedUsers.value = selected ? [selected] : [];
+    emit("update:modelValue", tempSelectedUser.value);
+  }
+  showPicker.value = false;
+};
+
+const handleClear = () => {
+  tempSelectedUsers.value = [""];
+  selectedUsers.value = [""];
+  isAllChecked.value = false;
+  emit("update:modelValue", null);
+  showPicker.value = false;
+};
+
+// 添加部门路径查找方法
+function findDeptPath(deptId, tree, path = []) {
+  for (const dept of tree) {
+    if (dept.id === deptId) {
+      return [...path, dept];
+    }
+    if (dept.subDepartments?.length) {
+      const found = findDeptPath(deptId, dept.subDepartments, [...path, dept]);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+// 添加当前部门处理逻辑
+const handleCurrentDeptChange = async (deptId) => {
+  const path = findDeptPath(deptId, departmentTree.value);
+  if (path) {
+    selectionPath.value = path;
+    currentDepartments.value = getCurrentDepartments();
+    loadUsers(deptId);
+  }
+};
+
+// 添加重置到根部门方法
+const resetToRootDepartment = () => {
+  selectionPath.value = [];
+  currentDepartments.value = departmentTree.value;
+  loadUsers(1); // 假设根部门ID为1
+};
+
+// 监听currentDept变化
+watch(
+  () => props.currentDept,
+  async (newVal) => {
+    if (!departmentCache.value) await fetchAllDepartments();
+
+    if (newVal) {
+      await handleCurrentDeptChange(newVal);
+    } else {
+      resetToRootDepartment();
+    }
+  },
+  { immediate: true }
+);
+
+// 监听弹窗显示状态
+watch(showPicker, (val) => {
+  if (val) {
+    initTempSelection();
+    if (props.mode === "multiple") {
+      updateAllCheckedState();
+    }
+  }
+});
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  async (newVal, oldVal) => {
+    // console.log('watchModelValue',isInternalChange);
+    if (newVal !== oldVal && !isInternalChange.value) {
+      if (props.mode === "multiple") {
+        console.log(
+          "-----------------------watchModelValue-------------------",
+          newVal
+        );
+        // 初始化时转换数组为部门分组格式
+        const initValues = Array.isArray(newVal) ? newVal : [];
+        tempSelectedUsers.value = initValues.reduce((acc, userId) => {
+          const deptId = selectedUsers.value.find(
+            (u) => u.userid === userId
+          )?.mainDepartment;
+          if (deptId) {
+            acc[deptId] = [...(acc[deptId] || []), userId];
+          }
+          return acc;
+        }, {});
+        // 获取所有用户信息
+        if (Array.isArray(newVal) && newVal.length > 0) {
+          const users = [];
+          for (const userId of newVal) {
+            console.log(
+              "-----------------------watchModelValue:userid-------------------",
+              userId,
+              newVal
+            );
+            const user = await getUserInfoById(userId);
+            if (user) users.push(user);
+          }
+          selectedUsers.value = users;
+        }
+      } else {
+        tempSelectedUser.value = newVal || null;
+        // 获取单个用户信息
+        if (newVal) {
+          const user = await getUserInfoById(newVal);
+          if (user) selectedUsers.value = [user];
+        }
+      }
+    }
+
+    // 重置标志位
+    if (isInternalChange.value) {
+      isInternalChange.value = false;
+    }
+  }
+);
+
+// 获取用户信息
+const getUserInfoById = async (userId) => {
+  try {
+    const response = await util.get_wxuser_by_id({ userId });
+    if (response.code === 200) {
+      return response.data;
+    }
+  } catch (error) {
+    console.error("获取用户信息失败:", error);
+  }
+  return null;
+};
+
+const searchUserById = async () => {
+  searchUserId.value = searchInput.value;
+  if (!searchUserId.value) return;
+
+  try {
+    userData.value.loading = true;
+    const user = await getUserInfoById(searchUserId.value);
+    if (user) {
+      userData.value.users = [user];
+      // 更新currentPath显示用户部门
+      console.log("=========", user);
+
+      const deptPath = await findDeptPath(
+        user.mainDepartment,
+        departmentTree.value
+      );
+      if (deptPath) {
+        selectionPath.value = deptPath;
+      }
+      // 设置标志位，查询后只显示人员列表
+      currentDepartments.value = [];
+    } else {
+      userData.value.users = [];
+    }
+  } catch (error) {
+    console.error("查询用户失败:", error);
+  } finally {
+    userData.value.loading = false;
+  }
+};
+
+const handleClearSearch = () => {
+  searchUserId.value = "";
+  if (selectionPath.value.length > 0) {
+    loadUsers(selectionPath.value.slice(-1)[0].id);
+  } else {
+    loadUsers(departmentTree.value[0]?.id || 1);
+  }
+};
+</script>
+
+<style scoped>
+.user-popup {
+  height: 60vh;
+  width: 100%;
+}
+
+.picker-header {
+  padding: 10px;
+  border-bottom: 1px solid #ebedf0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.scroll-container {
+  height: calc(80vh - 150px);
+  overflow-y: auto;
+}
+
+.search-container {
+  padding: 10px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+:deep(.search-container .van-search) {
+  flex: 1;
+}
+
+.search-btn {
+  flex-shrink: 0;
+}
+
+.select-all-container {
+  font-size: 14px;
+  padding: 0 16px;
+  margin: 10px 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+:deep(.van-checkbox__icon--square) {
+  border-radius: 4px;
+}
+
+:deep(.van-checkbox__label) {
+  margin-left: 8px;
+}
+
+:deep(.van-radio-group) .van-cell,
+:deep(.van-checkbox-group) .van-cell {
+  align-items: center;
+}
+
+.current-path {
+  flex: 1;
+  font-size: 14px;
+  color: #323233;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-right {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.cancel-btn {
+  color: #969799;
+  margin-right: 5px;
+}
+</style>