widget.qw 1.0.83 → 1.0.84

package/src/components/SingleUserSelector.vue

@@ -1,425 +1,425 @@
-<template>
-  <van-field v-if="!isGone" :is-link="isReadonly ? false : true" readonly :label="props.label"
-    :placeholder="props.placeholder" @click="show = !isReadonly" :model-value="selectedUserInfo" :required="isRequired"
-    :rules="props.rules" input-align="center" />
-  <van-popup v-model:show="show" round position="bottom" class="user-popup">
-    <div class="department-selector">
-      <div class="picker-header">
-        <div class="header-left">
-          <van-button @click="goBack" icon="arrow-left" size="small" v-show="currentPath !== '请选择部门'" />
-        </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>
-
-      <!-- 搜索框 -->
-      <van-search v-model="searchValue" placeholder="输入工号查询" @clear="clearSearch" @search="handleSearch"
-        @cancel="clearSearch" show-action>
-        <template #action>
-          <div @click="handleSearch">搜索</div>
-        </template>
-      </van-search>
-
-      <div class="scroll-container">
-        <!-- 遍历部门列表 -->
-        <van-cell-group>
-          <van-cell v-for="department in departments" :key="department.id" :title="department.name" is-link
-            @click="toggleDepartment(department)" />
-        </van-cell-group>
-
-        <!-- 遍历人员列表 -->
-        <van-radio-group v-model="tempSelectedUser">
-          <van-cell-group>
-            <van-cell v-for="user in userlist" :key="user.id" :title="user.name">
-              <template #right-icon>
-                <van-radio :name="user.userid" />
-              </template>
-            </van-cell>
-          </van-cell-group>
-        </van-radio-group>
-      </div>
-    </div>
-  </van-popup>
-</template>
-<script setup>
-import { ref, onMounted, watch } from "vue";
-import util from "../util"
-import { useVModel } from '@vueuse/core'
-
-// 弹出层
-const show = ref(false);
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "",
-  },
-  label: {
-    type: String,
-    default: "选择人员",
-  },
-  placeholder: {
-    type: String,
-    default: "请选择人员",
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  rules: {
-    type: Array,
-    default: () => [],
-  },
-  // 默认查询所有组织机构
-  currentDeptId: {
-    type: String,
-    default: "1", //组织机构id
-  },
-  // 二级部门取值范围字典id
-  // 取dictionary库.dict的配置id
-  deptRangeId: {
-    type: String,
-    default: ''
-  },
-  auth: {
-    type: String,
-    default: "",
-  },
-});
-// 定义emit
-const emit = defineEmits(["update:modelValue", "select"]);
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
-
-// 部门列表
-let departments = ref([]);
-let departmentFulls = ref([])
-const searchValue = ref("");
-const currentPath = ref("请选择部门");
-// 定义用户
-const userlist = ref([]);
-// 定义选择单选按钮的值
-const tempSelectedUser = ref(null);
-// 定义展示表单展示区的值
-const selectedUserInfo = ref([]);
-
-// 获得部门列表
-const fetchAllDepartments = async () => {
-  // 查询所有部门
-  const response = await util.get_subdepartments({ departmentId: props.currentDeptId })
-  let level2Depts = response.data.subDepartments
-
-  // 取配置的二级部门取值范围
-  let level2DeptIds = []
-  if (props.deptRangeId) {
-    let res = await util.dictionary_dict({ id: props.deptRangeId })
-    if (res.data.parseValue && res.data.parseValue.length>0) {
-      level2DeptIds = res.data.parseValue
-    }
-
-    // 当前用户所在二级部门列表
-    const user = await getUserInfoById(props.modelValue)
-    if (user && user.department.id) {
-      level2DeptIds = [...level2DeptIds, user.department.id]
-    }
-  }
-
-  // 只保留指定二级部门列表、当前用户的二级部门
-  if (props.deptRangeId) {
-    if (level2DeptIds && level2DeptIds.length > 0) {
-      level2Depts = level2Depts.filter(item => {
-        return level2DeptIds.includes(item.id)
-      })
-    }
-  }
-
-  //departments
-  departments.value = getCurrentDepartments(level2Depts || [])
-  departmentFulls.value = departments.value;
-};
-
-//嵌套处理获得树形结构
-const getCurrentDepartments = (data) => {
-  let result = data.map((item) => {
-    return {
-      id: item.id,
-      name: item.name,
-      subDepartments: getCurrentDepartments(item.subDepartments || []),
-    };
-  });
-  return result;
-};
-// 添加部门路径查找方法
-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 && found.length>0) return found;
-    }
-  }
-  return [];
-}
-
-// 获得人员列表
-const fetchAllUsers = async (departmentId) => {
-  const response = await util.get_subdepartments_users({ departmentId });
-  return response.data.users || [];
-};
-
-// 通过id获得人员信息
-const getUserInfoById = async (userId) => {
-  const response = await util.get_wxuser_by_id({ userId });
-  return response.data;
-};
-
-// 清空搜索
-const clearSearch = () => {
-  searchValue.value = ""; // 清空搜索框
-  // 部门列表赋初始值
-  departments.value = departmentFulls.value;
-};
-
-// 搜索人员
-const handleSearch = () => {
-  // 在这里可以处理搜索逻辑
-  if (searchValue.value) {
-    departments.value = []; // 清空部门列表
-    // 搜索用户
-    getUserInfoById(searchValue.value).then((user) => {
-      if (user) {
-        userlist.value = [user];
-        //更新currentPath显示用户部门
-        const path = findDeptPath(user.mainDepartment, departmentFulls.value);
-        console.log("path", path);
-        currentPath.value = "";
-        path.forEach((dept) => {
-          currentPath.value += dept.name + "/";
-        });
-      } else {
-        userlist.value = []; // 清空人员列表
-      }
-    });
-  }
-};
-
-// 切换部门
-const toggleDepartment = (department) => {
-  console.log("选择了部门:", department.subDepartments);
-  departments.value = department.subDepartments;
-  // 在这里可以处理部门选择逻辑
-  console.log("选择的部门:", departments);
-  // 更新当前路径
-  if (currentPath.value === "请选择部门") {
-    currentPath.value = "";
-  }
-  currentPath.value += department.name + "/";
-  // 请求加载人员
-  fetchAllUsers(department.id).then((users) => {
-    // 在这里可以处理人员列表逻辑
-    userlist.value = users;
-  })
-};
-
-// 返回上一级部门
-const goBack = () => {
-  searchValue.value = ""; // 清空搜索框
-  if (currentPath.value === "请选择部门") return;
-  currentPath.value = currentPath.value.replace(/\/+$/, "");
-  currentPath.value = currentPath.value.substring(
-    0,
-    currentPath.value.lastIndexOf("/")
-  );
-
-  if (currentPath.value !== "") {
-    // 加载当前路径的部门列表
-    const departmentlist = departmentFulls.value.find(
-      (dept) => dept.name === currentPath.value.split("/")[0]
-    );
-    departments.value = departmentlist.subDepartments;
-    // 加载当前路径的人员列表
-    fetchAllUsers(departmentlist.id).then((users) => {
-      userlist.value = users;
-    });
-  } else {
-    currentPath.value = "请选择部门";
-    departments.value = departmentFulls.value;
-  }
-};
-
-// 确认按钮
-const confirmSelection = () => {
-  modelValue.value = tempSelectedUser.value
-  //对应的人员信息
-  const selectedUser = userlist.value.find(
-    (user) => user.userid === tempSelectedUser.value
-  );
-
-  selectedUserInfo.value = selectedUser.name;
-
-  emit('select', selectedUser)
-
-  show.value = false;
-};
-// 清空按钮
-const handleClear = () => {
-  tempSelectedUser.value = null;
-  selectedUserInfo.value = null;
-  // 清空人员列表
-  userlist.value = [];
-  show.value = false;
-  currentPath.value = "请选择部门";
-  departments.value = departmentFulls.value;
-  modelValue.value = tempSelectedUser.value
-};
-
-//首页加载
-onMounted(async () => {
-  await fetchAllDepartments();
-  await initDepartment();
-});
-
-// 人员初始化
-const initUser = async () => {
-  console.log('initUser', props.modelValue, departmentFulls.value)
-  if (!props.modelValue || !departmentFulls.value || departmentFulls.value.length < 1)
-    return
-
-  const user = await getUserInfoById(props.modelValue);
-  if (user) {
-    //更新currentPath显示用户部门
-    const path = findDeptPath(user.mainDepartment, departmentFulls.value);
-    currentPath.value = "";
-    path.forEach((dept) => {
-      currentPath.value += dept.name + "/";
-    });
-    // 清空部门列表
-    departments.value = []; // 清空部门列表
-    // 加载当前路径的人员列表
-    fetchAllUsers(user.mainDepartment).then((users) => {
-      userlist.value = users;
-      // 选中当前用户
-      tempSelectedUser.value = user.userid;
-      selectedUserInfo.value = user.name;
-    });
-  } else {
-    userlist.value = []; // 清空人员列表
-  }
-};
-// 部门初始化
-const initDepartment = async () => {
-      //更新currentPath显示用户部门
-      const path = findDeptPath(props.currentDeptId, departmentFulls.value);
-      currentPath.value = "";
-      path.forEach((dept) => {
-        currentPath.value += dept.name + "/";
-      });
-      // 更新部门列表
-      departments.value = departmentFulls.value; // 重置部门列表
-};
-
-//监听searchValue变化
-watch(searchValue, (newValue, oldValue) => {
-  if (newValue.length === 0) {
-    // 重新加载部门列表
-    departments.value = departmentFulls.value;
-    // 清空人员列表
-    userlist.value = [];
-  }
-});
-watch(() => modelValue.value, (n, o) => {
-  initUser()
-}, {
-  immediate: true
-})
-watch(() => departmentFulls.value, (n, o) => {
-  initUser()
-}, {
-  immediate: true
-})
-</script>
-
-<style scoped>
-.user-popup {
-  width: 100%;
-  overflow: hidden;
-}
-
-.department-selector {
-  padding: 10px;
-}
-
-.search-buttons {
-  display: flex;
-  gap: 10px;
-}
-
-.clear-btn {
-  background-color: #f2f3f5;
-  border: none;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 14px;
-}
-
-.confirm-btn {
-  background-color: #1989fa;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 14px;
-}
-
-.no-results {
-  text-align: center;
-  padding: 20px;
-  color: #969799;
-}
-
-.picker-header {
-  padding: 10px;
-  border-bottom: 1px solid #ebedf0;
-  display: flex;
-  justify-content: space-between;
-  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;
-}
-
-.scroll-container {
-  height: calc(80vh - 150px);
-  overflow-y: auto;
-}
-</style>
+<template>
+  <van-field v-if="!isGone" :is-link="isReadonly ? false : true" readonly :label="props.label"
+    :placeholder="props.placeholder" @click="show = !isReadonly" :model-value="selectedUserInfo" :required="isRequired"
+    :rules="props.rules" input-align="center" />
+  <van-popup v-model:show="show" round position="bottom" class="user-popup">
+    <div class="department-selector">
+      <div class="picker-header">
+        <div class="header-left">
+          <van-button @click="goBack" icon="arrow-left" size="small" v-show="currentPath !== '请选择部门'" />
+        </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>
+
+      <!-- 搜索框 -->
+      <van-search v-model="searchValue" placeholder="输入工号查询" @clear="clearSearch" @search="handleSearch"
+        @cancel="clearSearch" show-action>
+        <template #action>
+          <div @click="handleSearch">搜索</div>
+        </template>
+      </van-search>
+
+      <div class="scroll-container">
+        <!-- 遍历部门列表 -->
+        <van-cell-group>
+          <van-cell v-for="department in departments" :key="department.id" :title="department.name" is-link
+            @click="toggleDepartment(department)" />
+        </van-cell-group>
+
+        <!-- 遍历人员列表 -->
+        <van-radio-group v-model="tempSelectedUser">
+          <van-cell-group>
+            <van-cell v-for="user in userlist" :key="user.id" :title="user.name">
+              <template #right-icon>
+                <van-radio :name="user.userid" />
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+      </div>
+    </div>
+  </van-popup>
+</template>
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import util from "../util"
+import { useVModel } from '@vueuse/core'
+
+// 弹出层
+const show = ref(false);
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "选择人员",
+  },
+  placeholder: {
+    type: String,
+    default: "请选择人员",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  rules: {
+    type: Array,
+    default: () => [],
+  },
+  // 默认查询所有组织机构
+  currentDeptId: {
+    type: String,
+    default: "1", //组织机构id
+  },
+  // 二级部门取值范围字典id
+  // 取dictionary库.dict的配置id
+  deptRangeId: {
+    type: String,
+    default: ''
+  },
+  auth: {
+    type: String,
+    default: "",
+  },
+});
+// 定义emit
+const emit = defineEmits(["update:modelValue", "select"]);
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
+
+// 部门列表
+let departments = ref([]);
+let departmentFulls = ref([])
+const searchValue = ref("");
+const currentPath = ref("请选择部门");
+// 定义用户
+const userlist = ref([]);
+// 定义选择单选按钮的值
+const tempSelectedUser = ref(null);
+// 定义展示表单展示区的值
+const selectedUserInfo = ref([]);
+
+// 获得部门列表
+const fetchAllDepartments = async () => {
+  // 查询所有部门
+  const response = await util.get_subdepartments({ departmentId: props.currentDeptId })
+  let level2Depts = response.data.subDepartments
+
+  // 取配置的二级部门取值范围
+  let level2DeptIds = []
+  if (props.deptRangeId) {
+    let res = await util.dictionary_dict({ id: props.deptRangeId })
+    if (res.data.parseValue && res.data.parseValue.length>0) {
+      level2DeptIds = res.data.parseValue
+    }
+
+    // 当前用户所在二级部门列表
+    const user = await getUserInfoById(props.modelValue)
+    if (user && user.department.id) {
+      level2DeptIds = [...level2DeptIds, user.department.id]
+    }
+  }
+
+  // 只保留指定二级部门列表、当前用户的二级部门
+  if (props.deptRangeId) {
+    if (level2DeptIds && level2DeptIds.length > 0) {
+      level2Depts = level2Depts.filter(item => {
+        return level2DeptIds.includes(item.id)
+      })
+    }
+  }
+
+  //departments
+  departments.value = getCurrentDepartments(level2Depts || [])
+  departmentFulls.value = departments.value;
+};
+
+//嵌套处理获得树形结构
+const getCurrentDepartments = (data) => {
+  let result = data.map((item) => {
+    return {
+      id: item.id,
+      name: item.name,
+      subDepartments: getCurrentDepartments(item.subDepartments || []),
+    };
+  });
+  return result;
+};
+// 添加部门路径查找方法
+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 && found.length>0) return found;
+    }
+  }
+  return [];
+}
+
+// 获得人员列表
+const fetchAllUsers = async (departmentId) => {
+  const response = await util.get_subdepartments_users({ departmentId });
+  return response.data.users || [];
+};
+
+// 通过id获得人员信息
+const getUserInfoById = async (userId) => {
+  const response = await util.get_wxuser_by_id({ userId });
+  return response.data;
+};
+
+// 清空搜索
+const clearSearch = () => {
+  searchValue.value = ""; // 清空搜索框
+  // 部门列表赋初始值
+  departments.value = departmentFulls.value;
+};
+
+// 搜索人员
+const handleSearch = () => {
+  // 在这里可以处理搜索逻辑
+  if (searchValue.value) {
+    departments.value = []; // 清空部门列表
+    // 搜索用户
+    getUserInfoById(searchValue.value).then((user) => {
+      if (user) {
+        userlist.value = [user];
+        //更新currentPath显示用户部门
+        const path = findDeptPath(user.mainDepartment, departmentFulls.value);
+        console.log("path", path);
+        currentPath.value = "";
+        path.forEach((dept) => {
+          currentPath.value += dept.name + "/";
+        });
+      } else {
+        userlist.value = []; // 清空人员列表
+      }
+    });
+  }
+};
+
+// 切换部门
+const toggleDepartment = (department) => {
+  console.log("选择了部门:", department.subDepartments);
+  departments.value = department.subDepartments;
+  // 在这里可以处理部门选择逻辑
+  console.log("选择的部门:", departments);
+  // 更新当前路径
+  if (currentPath.value === "请选择部门") {
+    currentPath.value = "";
+  }
+  currentPath.value += department.name + "/";
+  // 请求加载人员
+  fetchAllUsers(department.id).then((users) => {
+    // 在这里可以处理人员列表逻辑
+    userlist.value = users;
+  })
+};
+
+// 返回上一级部门
+const goBack = () => {
+  searchValue.value = ""; // 清空搜索框
+  if (currentPath.value === "请选择部门") return;
+  currentPath.value = currentPath.value.replace(/\/+$/, "");
+  currentPath.value = currentPath.value.substring(
+    0,
+    currentPath.value.lastIndexOf("/")
+  );
+
+  if (currentPath.value !== "") {
+    // 加载当前路径的部门列表
+    const departmentlist = departmentFulls.value.find(
+      (dept) => dept.name === currentPath.value.split("/")[0]
+    );
+    departments.value = departmentlist.subDepartments;
+    // 加载当前路径的人员列表
+    fetchAllUsers(departmentlist.id).then((users) => {
+      userlist.value = users;
+    });
+  } else {
+    currentPath.value = "请选择部门";
+    departments.value = departmentFulls.value;
+  }
+};
+
+// 确认按钮
+const confirmSelection = () => {
+  modelValue.value = tempSelectedUser.value
+  //对应的人员信息
+  const selectedUser = userlist.value.find(
+    (user) => user.userid === tempSelectedUser.value
+  );
+
+  selectedUserInfo.value = selectedUser.name;
+
+  emit('select', selectedUser)
+
+  show.value = false;
+};
+// 清空按钮
+const handleClear = () => {
+  tempSelectedUser.value = null;
+  selectedUserInfo.value = null;
+  // 清空人员列表
+  userlist.value = [];
+  show.value = false;
+  currentPath.value = "请选择部门";
+  departments.value = departmentFulls.value;
+  modelValue.value = tempSelectedUser.value
+};
+
+//首页加载
+onMounted(async () => {
+  await fetchAllDepartments();
+  await initDepartment();
+});
+
+// 人员初始化
+const initUser = async () => {
+  console.log('initUser', props.modelValue, departmentFulls.value)
+  if (!props.modelValue || !departmentFulls.value || departmentFulls.value.length < 1)
+    return
+
+  const user = await getUserInfoById(props.modelValue);
+  if (user) {
+    //更新currentPath显示用户部门
+    const path = findDeptPath(user.mainDepartment, departmentFulls.value);
+    currentPath.value = "";
+    path.forEach((dept) => {
+      currentPath.value += dept.name + "/";
+    });
+    // 清空部门列表
+    departments.value = []; // 清空部门列表
+    // 加载当前路径的人员列表
+    fetchAllUsers(user.mainDepartment).then((users) => {
+      userlist.value = users;
+      // 选中当前用户
+      tempSelectedUser.value = user.userid;
+      selectedUserInfo.value = user.name;
+    });
+  } else {
+    userlist.value = []; // 清空人员列表
+  }
+};
+// 部门初始化
+const initDepartment = async () => {
+      //更新currentPath显示用户部门
+      const path = findDeptPath(props.currentDeptId, departmentFulls.value);
+      currentPath.value = "";
+      path.forEach((dept) => {
+        currentPath.value += dept.name + "/";
+      });
+      // 更新部门列表
+      departments.value = departmentFulls.value; // 重置部门列表
+};
+
+//监听searchValue变化
+watch(searchValue, (newValue, oldValue) => {
+  if (newValue.length === 0) {
+    // 重新加载部门列表
+    departments.value = departmentFulls.value;
+    // 清空人员列表
+    userlist.value = [];
+  }
+});
+watch(() => modelValue.value, (n, o) => {
+  initUser()
+}, {
+  immediate: true
+})
+watch(() => departmentFulls.value, (n, o) => {
+  initUser()
+}, {
+  immediate: true
+})
+</script>
+
+<style scoped>
+.user-popup {
+  width: 100%;
+  overflow: hidden;
+}
+
+.department-selector {
+  padding: 10px;
+}
+
+.search-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.clear-btn {
+  background-color: #f2f3f5;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+}
+
+.confirm-btn {
+  background-color: #1989fa;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+}
+
+.no-results {
+  text-align: center;
+  padding: 20px;
+  color: #969799;
+}
+
+.picker-header {
+  padding: 10px;
+  border-bottom: 1px solid #ebedf0;
+  display: flex;
+  justify-content: space-between;
+  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;
+}
+
+.scroll-container {
+  height: calc(80vh - 150px);
+  overflow-y: auto;
+}
+</style>