widget.qw 1.0.21 → 1.0.24

package/src/components/widget/UserPop.vue

@@ -1,347 +1,347 @@
-<template>
-  <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="onBack" icon="arrow-left" size="small" />
-        </div>
-
-        <!-- 移除header-center包装，直接使用current-path -->
-        <div class="current-path">{{ pathsLabel }}</div>
-
-        <div class="header-right">
-          <van-button size="small" @click="onCancel" class="cancel-btn">取消</van-button>
-
-          <van-button type="primary" size="small" @click="onSubmit" class="confirm-btn">确定</van-button>
-        </div>
-      </div>
-
-      <!-- 搜索框 -->
-      <van-search v-model="data.keyword" placeholder="输入工号查询" @clear="onClear" @search="onSearch" @cancel="onClear"
-        show-action>
-        <template #action>
-          <div @click="onSearch">搜索</div>
-        </template>
-      </van-search>
-
-      <div class="scroll-container">
-        <!-- 遍历部门列表 -->
-        <van-cell-group>
-          <van-cell v-for="dept in subDepts" :key="dept.id" :title="dept.name" is-link @click="onSelectDept(dept)" />
-        </van-cell-group>
-
-        <!-- 遍历人员列表 -->
-        <van-radio-group v-model="data.selectedUser">
-          <van-cell-group>
-            <van-cell v-for="user in subUsers" :key="user.id" :title="`${user.userid}  ${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, reactive, computed } from "vue";
-import util from "../../util"
-import { useVModel } from '@vueuse/core'
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  // 默认查询所有组织机构
-  rootDeptId: {
-    type: String,
-    default: "1", //组织机构id
-  },
-  // 二级部门取值范围字典id
-  // 取dictionary库.dict的配置id
-  deptRangeId: {
-    type: String,
-    default: ''
-  }
-});
-// 定义emit
-const emit = defineEmits(["update:show", "select"]);
-// 弹出?
-const show = useVModel(props, 'show', emit)
-const data = reactive({
-  // 当前选中的机构
-  selectedDeptId: '',
-  // 所有的部门
-  totalDepts: [],
-  // 搜索关键字
-  keyword: "",
-  searchUsers: [],
-  selectedUser: null
-})
-
-
-// 查找部门路径列表
-function findDeptPaths(targetDept, tree, path = []) {
-  if (!tree || tree.length < 1 || !targetDept || !targetDept.id)
-    return []
-
-  for (const dept of tree) {
-    if (dept.id === targetDept.id) {
-      return [...path, dept];
-    }
-    if (dept.subDepartments?.length) {
-      const found = findDeptPaths(targetDept, dept.subDepartments, [...path, dept]);
-      if (found && found.length > 0) return found;
-    }
-  }
-
-  return []
-}
-
-// 选中的部门
-const selectedDept = computed(()=>{
-  if(!data.selectedDeptId)
-    return null
-
-  let targetDept = findDept(data.selectedDeptId,data.totalDepts)
-  return targetDept
-})
-
-//选中部门的路径:部门/科室
-const pathsLabel = computed(() => {
-  let paths = findDeptPaths(selectedDept.value, data.totalDepts)
-  console.log("paths", paths);
-  let res = ''
-  paths.forEach((dept) => {
-    res += dept.name + "/";
-  })
-  return res
-})
-
-const subDepts = computed(() => {
-  if (data.keyword)
-    return []
-  else if (selectedDept.value)
-    return selectedDept.value.subDepartments
-  else
-    return data.totalDepts
-})
-
-const subUsers = computed(() => {
-  if (data.keyword)
-    return data.searchUsers
-  else if (selectedDept.value)
-    return selectedDept.value.users
-  else
-    return []
-})
-
-// 获得部门列表
-const queryTotalDepts = async () => {
-  // 查询所有部门
-  const response = await util.get_subdepartments_users({ departmentId: props.rootDeptId, hasGrandson:false })
-  let level2Depts = []
-  if(response.data)
-    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
-    }
-  }
-
-  // 只保留指定二级部门列表
-  if (props.deptRangeId) {
-    if (level2DeptIds && level2DeptIds.length > 0) {
-      level2Depts = level2Depts.filter(item => {
-        return level2DeptIds.includes(item.id)
-      })
-    }
-  }
-
-  data.totalDepts = level2Depts || []
-}
-
-// 查找机构
-function findDept(deptId, tree) {
-  if (!tree || tree.length < 1)
-    return null
-
-  for (const dept of tree) {
-    if (dept.id === deptId) {
-      return dept
-    }
-
-    const found = findDept(deptId, dept.subDepartments);
-    if (found) return found
-  }
-
-  return null
-}
-
-// 查找父机构
-function findParentDept(deptId, tree) {
-  if (!tree || tree.length < 1)
-    return null
-
-  for (const dept of tree) {
-    if (!dept.subDepartments || dept.subDepartments.length < 1)
-      continue
-
-    let ary = dept.subDepartments.filter(item => item.id == deptId)
-    if (ary && ary.length > 0)
-      return dept
-
-    const found = findParentDept(deptId, dept.subDepartments);
-    if (found) return found
-  }
-
-  return null
-}
-
-// 搜索人员
-const onSearch = async () => {
-  if (!data.keyword)
-    return
-
-  // 搜索用户
-  const res = await util.wx_user_list({ keyword: data.keyword, page: 1, limit: 10000 })
-  data.searchUsers = res.data.list
-}
-
-// 切换部门
-const onSelectDept = async(department) => {
-  const res = await util.get_subdepartments_users({ departmentId: department.id, hasGrandson:false })
-  let targetDept = findDept(department.id, data.totalDepts)
-  targetDept.subDepartments = res.data.subDepartments
-  targetDept.users = res.data.users
-  data.selectedDeptId = department.id
-}
-
-// 返回上一级部门
-const onBack = () => {
-  data.keyword = ""
-
-  let paths = findDeptPaths(selectedDept.value, data.totalDepts)
-  console.log('22222222', paths)
-  if (!paths || paths.length <= 1){
-    data.selectedDeptId = ''
-    return
-  }
-
-  data.selectedDeptId = paths[paths.length - 2].id
-}
-
-// 清除掉选中部门及人
-const reset = () => {
-  // 当前选中的机构
-  data.selectedDeptId = ''
-  // 搜索关键字
-  data.keyword = ""
-  data.searchUsers = []
-  data.selectedUser = {}
-}
-
-// 确认按钮
-const onSubmit = () => {
-  if (!data.selectedUser) {
-    util.warnToast("请选择用户")
-    return
-  }
-
-  emit('select', data.selectedUser)
-  show.value = false
-
-  reset()
-}
-
-// 取消按钮
-const onCancel = () => {
-  show.value = false
-  reset()
-};
-
-//首页加载
-onMounted(async () => {
-  await queryTotalDepts()
-  // 初始化当前父部门
-  data.selectedDept = findDept(props.rootDeptId, data.totalDepts)
-})
-</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-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="onBack" icon="arrow-left" size="small" />
+        </div>
+
+        <!-- 移除header-center包装，直接使用current-path -->
+        <div class="current-path">{{ pathsLabel }}</div>
+
+        <div class="header-right">
+          <van-button size="small" @click="onCancel" class="cancel-btn">取消</van-button>
+
+          <van-button type="primary" size="small" @click="onSubmit" class="confirm-btn">确定</van-button>
+        </div>
+      </div>
+
+      <!-- 搜索框 -->
+      <van-search v-model="data.keyword" placeholder="输入工号查询" @clear="onClear" @search="onSearch" @cancel="onClear"
+        show-action>
+        <template #action>
+          <div @click="onSearch">搜索</div>
+        </template>
+      </van-search>
+
+      <div class="scroll-container">
+        <!-- 遍历部门列表 -->
+        <van-cell-group>
+          <van-cell v-for="dept in subDepts" :key="dept.id" :title="dept.name" is-link @click="onSelectDept(dept)" />
+        </van-cell-group>
+
+        <!-- 遍历人员列表 -->
+        <van-radio-group v-model="data.selectedUser">
+          <van-cell-group>
+            <van-cell v-for="user in subUsers" :key="user.id" :title="`${user.userid}  ${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, reactive, computed } from "vue";
+import util from "../../util"
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  // 默认查询所有组织机构
+  rootDeptId: {
+    type: String,
+    default: "1", //组织机构id
+  },
+  // 二级部门取值范围字典id
+  // 取dictionary库.dict的配置id
+  deptRangeId: {
+    type: String,
+    default: ''
+  }
+});
+// 定义emit
+const emit = defineEmits(["update:show", "select"]);
+// 弹出?
+const show = useVModel(props, 'show', emit)
+const data = reactive({
+  // 当前选中的机构
+  selectedDeptId: '',
+  // 所有的部门
+  totalDepts: [],
+  // 搜索关键字
+  keyword: "",
+  searchUsers: [],
+  selectedUser: null
+})
+
+
+// 查找部门路径列表
+function findDeptPaths(targetDept, tree, path = []) {
+  if (!tree || tree.length < 1 || !targetDept || !targetDept.id)
+    return []
+
+  for (const dept of tree) {
+    if (dept.id === targetDept.id) {
+      return [...path, dept];
+    }
+    if (dept.subDepartments?.length) {
+      const found = findDeptPaths(targetDept, dept.subDepartments, [...path, dept]);
+      if (found && found.length > 0) return found;
+    }
+  }
+
+  return []
+}
+
+// 选中的部门
+const selectedDept = computed(()=>{
+  if(!data.selectedDeptId)
+    return null
+
+  let targetDept = findDept(data.selectedDeptId,data.totalDepts)
+  return targetDept
+})
+
+//选中部门的路径:部门/科室
+const pathsLabel = computed(() => {
+  let paths = findDeptPaths(selectedDept.value, data.totalDepts)
+  console.log("paths", paths);
+  let res = ''
+  paths.forEach((dept) => {
+    res += dept.name + "/";
+  })
+  return res
+})
+
+const subDepts = computed(() => {
+  if (data.keyword)
+    return []
+  else if (selectedDept.value)
+    return selectedDept.value.subDepartments
+  else
+    return data.totalDepts
+})
+
+const subUsers = computed(() => {
+  if (data.keyword)
+    return data.searchUsers
+  else if (selectedDept.value)
+    return selectedDept.value.users
+  else
+    return []
+})
+
+// 获得部门列表
+const queryTotalDepts = async () => {
+  // 查询所有部门
+  const response = await util.get_subdepartments_users({ departmentId: props.rootDeptId, hasGrandson:false })
+  let level2Depts = []
+  if(response.data)
+    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
+    }
+  }
+
+  // 只保留指定二级部门列表
+  if (props.deptRangeId) {
+    if (level2DeptIds && level2DeptIds.length > 0) {
+      level2Depts = level2Depts.filter(item => {
+        return level2DeptIds.includes(item.id)
+      })
+    }
+  }
+
+  data.totalDepts = level2Depts || []
+}
+
+// 查找机构
+function findDept(deptId, tree) {
+  if (!tree || tree.length < 1)
+    return null
+
+  for (const dept of tree) {
+    if (dept.id === deptId) {
+      return dept
+    }
+
+    const found = findDept(deptId, dept.subDepartments);
+    if (found) return found
+  }
+
+  return null
+}
+
+// 查找父机构
+function findParentDept(deptId, tree) {
+  if (!tree || tree.length < 1)
+    return null
+
+  for (const dept of tree) {
+    if (!dept.subDepartments || dept.subDepartments.length < 1)
+      continue
+
+    let ary = dept.subDepartments.filter(item => item.id == deptId)
+    if (ary && ary.length > 0)
+      return dept
+
+    const found = findParentDept(deptId, dept.subDepartments);
+    if (found) return found
+  }
+
+  return null
+}
+
+// 搜索人员
+const onSearch = async () => {
+  if (!data.keyword)
+    return
+
+  // 搜索用户
+  const res = await util.wx_user_list({ keyword: data.keyword, page: 1, limit: 10000 })
+  data.searchUsers = res.data.list
+}
+
+// 切换部门
+const onSelectDept = async(department) => {
+  const res = await util.get_subdepartments_users({ departmentId: department.id, hasGrandson:false })
+  let targetDept = findDept(department.id, data.totalDepts)
+  targetDept.subDepartments = res.data.subDepartments
+  targetDept.users = res.data.users
+  data.selectedDeptId = department.id
+}
+
+// 返回上一级部门
+const onBack = () => {
+  data.keyword = ""
+
+  let paths = findDeptPaths(selectedDept.value, data.totalDepts)
+  console.log('22222222', paths)
+  if (!paths || paths.length <= 1){
+    data.selectedDeptId = ''
+    return
+  }
+
+  data.selectedDeptId = paths[paths.length - 2].id
+}
+
+// 清除掉选中部门及人
+const reset = () => {
+  // 当前选中的机构
+  data.selectedDeptId = ''
+  // 搜索关键字
+  data.keyword = ""
+  data.searchUsers = []
+  data.selectedUser = {}
+}
+
+// 确认按钮
+const onSubmit = () => {
+  if (!data.selectedUser) {
+    util.warnToast("请选择用户")
+    return
+  }
+
+  emit('select', data.selectedUser)
+  show.value = false
+
+  reset()
+}
+
+// 取消按钮
+const onCancel = () => {
+  show.value = false
+  reset()
+};
+
+//首页加载
+onMounted(async () => {
+  await queryTotalDepts()
+  // 初始化当前父部门
+  data.selectedDept = findDept(props.rootDeptId, data.totalDepts)
+})
+</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>