widget.qw 0.0.1

package/src/components/subdepartment_selector.vue

@@ -0,0 +1,481 @@
+<template>
+    <div class="department-selector">
+        <van-field v-if="!isGone" :model-value="selectedDepartmentPath" readonly clickable :label="props.label"
+            :placeholder="props.placeholder" @click="onShow" :right-icon="isReadonly ? '' : 'arrow'"
+            :required="isRequired" :rules="props.rules" type="textarea" autosize="true" rows="1"/>
+
+        <van-popup v-model:show="showPicker" position="bottom" class="department-popup">
+            <div class="popup-container">
+                <div class="picker-header">
+                    <van-button v-if="currentLevel > 0" @click="goBack" icon="arrow-left" size="small"
+                        class="back-button" />
+                    <div class="current-path">{{ currentPath }}</div>
+                    <div class="action-buttons">
+                        <van-button size="small" @click="handleCancel" class="cancel-btn">
+                            取消
+                        </van-button>
+                        <van-button type="primary" size="small" @click="confirmSelection"
+                            :disabled="!tempSelectedDepartment" class="confirm-btn">
+                            确定
+                        </van-button>
+                    </div>
+                </div>
+
+                <van-field left-icon="search" v-model.trim="searchKeyword" clearable placeholder="请输入部门名称搜索"
+                    class="search-field" />
+                <div class="scroll-container">
+                    <van-cell-group>
+                        <van-cell v-for="(item, index) in filteredDepartments" :key="index" clickable
+                            @click="handleCellClick(item)">
+                            <template #title>
+                                <div class="cell-content">
+                                    <div class="circle-selector"
+                                        :class="{ 'selected': tempSelectedDepartment?.id === item.id }"
+                                        @click.stop="toggleSelection(item)">
+                                        <van-icon v-if="tempSelectedDepartment?.id === item.id" name="success" />
+                                    </div>
+                                    <span class="name">{{ item.fullPath || item.name }}</span>
+                                </div>
+                            </template>
+                            <template #right-icon>
+                                <van-icon v-if="item.subDepartments?.length" name="arrow" />
+                            </template>
+                        </van-cell>
+                    </van-cell-group>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import util from '../util'
+
+const props = defineProps({
+    modelValue: [String, Number],
+    label: {
+        type: String,
+        default: '选择部门'
+    },
+    placeholder: {
+        type: String,
+        default: '请选择部门'
+    },
+    required: {
+        type: Boolean,
+        default: true
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    auth: {
+        type: String,
+        default: ''
+    },
+    // 查询多少层组织机构
+    level: {
+        type: Number,
+        // 默认查所有
+        default: 999
+    },
+    // 二级部门取值范围字典id
+    // 取dictionary库.dict的配置id
+    deptRangeId: {
+        type: String,
+        default: ''
+    }
+})
+
+const emit = defineEmits(['update:modelValue', 'select'])
+const { isRequired, isGone, isDisabled, isReadonly } = util.props2auth(props)
+
+// 部门数据相关状态
+const departmentTree = ref([])
+const currentDepartments = ref([])
+const selectedDepartmentPath = ref('')
+const selectionPath = ref([])
+const showPicker = ref(false)
+const tempSelectedDepartment = ref(null)
+
+// 在脚本部分添加搜索相关逻辑（约第60行）
+// 添加搜索关键词响应式变量
+const searchKeyword = ref('')
+
+// 计算属性
+const currentPath = computed(() => {
+    return selectionPath.value
+        .filter(d => d.id !== '1') // 过滤一级部门
+        .map(d => d.name)
+        .join(' / ') || '请选择部门'
+})
+
+const currentLevel = computed(() => selectionPath.value.length)
+
+// 部门数据缓存
+const departmentCache = {
+    data: ref([]),
+    loading: ref(false),
+    error: ref(null)
+}
+
+// 修改过滤后的部门列表计算属性
+// 修改过滤逻辑（约第80行）
+// 修改搜索结果的路径生成逻辑（约第89行）
+const filteredDepartments = computed(() => {
+    if (!searchKeyword.value) return currentDepartments.value;
+
+    // 递归搜索整个部门树
+    const searchTree = (depts, keyword, path = []) => {
+        return depts.flatMap(dept => {
+            const currentPath = [...path, dept];
+            const matches = [];
+
+            if (dept.name.toLowerCase().includes(keyword.toLowerCase())) {
+                matches.push({
+                    ...dept,
+                    // 过滤掉一级部门（假设一级部门id为1）
+                    fullPath: currentPath
+                        .filter(d => d.id !== '1')
+                        .map(d => d.name)
+                        .join(' / ')
+                });
+            }
+
+            if (dept.subDepartments?.length) {
+                matches.push(...searchTree(dept.subDepartments, keyword, currentPath));
+            }
+
+            return matches;
+        });
+    };
+
+    return searchTree(departmentTree.value, searchKeyword.value);
+});
+
+const onShow = () => {
+    if (isDisabled.value)
+        return
+
+    showPicker.value = true
+}
+
+// 修改单元格点击处理
+const handleCellClick = (department) => {
+    // 如果是叶子节点直接选中
+    if (!department.subDepartments?.length) {
+        toggleSelection(department)
+        return
+    }
+
+    // 非叶子节点才展开层级
+    selectionPath.value.push(department)
+    currentDepartments.value = department.subDepartments
+    tempSelectedDepartment.value = null
+}
+
+// 监听搜索关键词变化
+watch(searchKeyword, (newVal) => {
+    if (newVal) {
+        // 可根据需要添加搜索建议逻辑
+    }
+})
+
+// 在工具函数部分新增以下方法
+const findDepartmentById = (departments, targetId) => {
+    for (const dept of departments) {
+        if (dept.id === targetId) return dept
+        if (dept.subDepartments?.length) {
+            const found = findDepartmentById(dept.subDepartments, targetId)
+            if (found) return found
+        }
+    }
+    return null
+}
+
+// 修改路径构建方法
+const buildDepartmentPath = (department) => {
+    const path = []
+    let current = department.parent
+    while (current) {
+        if (current.id !== '1') {  // 不插入一级部门
+            path.unshift(current.name)
+        }
+        current = current.parent
+    }
+    // 添加当前选中部门（最后一级）
+    path.push(department.name)
+    return path.join(' / ')
+}
+
+// 修改部门数据加载方法
+const loadDepartments = async () => {
+    try {
+        if (departmentCache.data.value.length > 0) return
+
+        departmentCache.loading.value = true
+        const response = await util.get_subdepartments({ level: props.level })
+        console.log('-------subdepartment---------', response)
+        if (response.code === 200) {
+            // 添加parent引用
+            const addParentRef = (depts, parent) => {
+                depts.forEach(d => {
+                    d.parent = parent
+                    if (d.subDepartments) addParentRef(d.subDepartments, d)
+                })
+            }
+
+            // 取配置的二级部门取值范围
+            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) {
+                    response.data.subDepartments = response.data.subDepartments.filter(item => {
+                        return level2DeptIds.includes(item.id)
+                    })
+                }
+            }
+
+            departmentCache.data.value = [response.data]
+            addParentRef(departmentCache.data.value, null)
+            departmentTree.value = departmentCache.data.value
+            currentDepartments.value = response.data.subDepartments || []
+            // 存储到sessionStorage中
+            //   sessionStorage.setItem('departmentTree', JSON.stringify(departmentTree.value))
+            //   sessionStorage.setItem('currentDepartments', JSON.stringify(currentDepartments.value))
+        }
+    } catch (error) {
+        console.error('加载部门数据失败:', error)
+    } finally {
+        departmentCache.loading.value = false
+    }
+}
+
+// const handleCellClick = (department) => {
+//     if (department.subDepartments?.length) {
+//         selectionPath.value.push(department)
+//         currentDepartments.value = department.subDepartments
+//         tempSelectedDepartment.value = null
+//     } else {
+//         toggleSelection(department)
+//     }
+// }
+
+const toggleSelection = (department) => {
+    tempSelectedDepartment.value =
+        tempSelectedDepartment.value?.id === department.id
+            ? null
+            : department
+}
+
+const confirmSelection = () => {
+    if (!tempSelectedDepartment.value) return
+
+    const selectedPath = [...selectionPath.value, tempSelectedDepartment.value]
+    selectedDepartmentPath.value = selectedPath.map(d => d.name).join(' / ')
+    emit('update:modelValue', tempSelectedDepartment.value.id)
+    emit('select', tempSelectedDepartment.value)
+    showPicker.value = false
+    resetSelectionState()
+}
+
+const handleCancel = () => {
+    // emit('update:modelValue', null)
+    // selectedDepartmentPath.value = ''
+    showPicker.value = false
+    // resetSelectionState()
+}
+
+const resetSelectionState = () => {
+    selectionPath.value = []
+    currentDepartments.value = departmentTree.value[0]?.subDepartments || []
+    tempSelectedDepartment.value = null
+}
+
+const goBack = () => {
+    selectionPath.value.pop()
+    currentDepartments.value = selectionPath.value.length
+        ? selectionPath.value[selectionPath.value.length - 1].subDepartments
+        : departmentTree.value[0]?.subDepartments || []
+    tempSelectedDepartment.value = null
+}
+
+watch(showPicker, (newVal) => {
+    if (!newVal) {
+        resetSelectionState()
+    }
+})
+
+onMounted(async () => {
+    if (departmentCache.data.value.length === 0) {
+        await loadDepartments()
+    } else {
+        departmentTree.value = departmentCache.data.value
+        currentDepartments.value = departmentCache.data.value[0]?.subDepartments || []
+    }
+})
+
+// 修改后的watch监听（补充路径空值处理）
+watch(() => props.modelValue, async (newVal) => {
+    if (newVal) {
+        await loadDepartments()
+        const targetDept = findDepartmentById(departmentCache.data.value, newVal)
+        if (targetDept) {
+            // 当部门为一级时显示空路径
+            selectedDepartmentPath.value = targetDept.parent
+                ? buildDepartmentPath(targetDept)
+                : ''
+        }
+    }
+}, { immediate: true })
+
+// 方法定义
+// 在watch部分新增以下代码
+watch(() => props.modelValue, async (newVal) => {
+    if (newVal) {
+        await loadDepartments()
+        const targetDept = findDepartmentById(departmentCache.data.value, newVal)
+        if (targetDept) {
+            selectedDepartmentPath.value = buildDepartmentPath(targetDept)
+        }
+    }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.department-popup {
+    width: 100%;
+    height: 60vh;
+    border-radius: 16px 16px 0 0;
+}
+
+.popup-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+
+.picker-header {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 1px solid #ebedf0;
+    gap: 8px;
+    background: #fff;
+    /* flex-shrink: 0; */
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    height: 56px;
+    /* 固定头部高度 */
+    flex-shrink: 0;
+    /* 防止头部被压缩 */
+}
+
+.scroll-container {
+    flex: 1;
+    height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* height: calc(80vh - 170px); */
+    /* 计算方式：总高度(80vh) - 头部高度(56px) - 搜索框高度(52px) */
+    position: relative;
+    top: -1px;
+}
+
+.back-button {
+    margin-right: 8px;
+}
+
+.current-path {
+    flex: 1;
+    font-size: 14px;
+    color: #323233;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 8px;
+    margin-left: auto;
+}
+
+/* .scroll-container {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+} */
+
+.cell-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.circle-selector {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #ebedf0;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+}
+
+.circle-selector.selected {
+    background-color: #1989fa;
+    border-color: #1989fa;
+}
+
+.circle-selector.selected .van-icon {
+    color: white;
+    font-size: 14px;
+}
+
+.van-cell__right-icon {
+    color: #969799;
+    font-size: 16px;
+    margin-left: 8px;
+}
+
+.name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.cancel-btn {
+    color: #969799;
+}
+
+.search-field {
+    background: #fff;
+    padding: 10px 16px;
+    border-bottom: 1px solid #ebedf0;
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    margin-bottom: 10px;
+    flex-shrink: 0;
+    /* 防止压缩 */
+}
+</style>