widget.qw 1.0.83 → 1.0.84

package/src/components/CascaderPop.vue

@@ -1,372 +1,374 @@
-<template>
-    <van-popup v-model:show="show" round position="bottom" class="cascader-pop">
-        <div class="cascader-selector">
-            <div class="cascader-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="props.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="(item, i) in optionNodes" :key="i" @click="onToggle(item)">
-                        <template #title>
-                            <div class="cell-content">
-                                <div class="circle-selector" v-if="item.canCheck">
-                                    <van-icon v-if="data.selectedNodeId === item.id" name="success" size="20"
-                                        color="#409eff" />
-                                    <van-icon v-if="data.selectedNodeId != item.id" name="circle" size="20"
-                                        color="#e0e0e0" />
-                                </div>
-                                <span class="name">{{ item.label }}</span>
-                            </div>
-                        </template>
-                        <template #right-icon v-if="item.canExpand">
-                            <van-icon name="arrow" @click.stop="onNextLevel(item)" />
-                        </template>
-                    </van-cell>
-                </van-cell-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({
-    modelValue: {
-        type: String,
-        default: ''
-    },
-    show: {
-        type: Boolean,
-        default: false,
-    },
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    keywordQueryNode: {
-        type: Function,
-        default: () => { }
-    },
-    idQueryNode: {
-        type: Function,
-        default: () => { }
-    },
-});
-// 定义emit
-const emit = defineEmits(["update:modelValue", "update:show", "select"]);
-// 弹出?
-const show = useVModel(props, 'show', emit)
-const modelValue = useVModel(props, 'modelValue', emit)
-const data = reactive({
-    //当前父节点
-    parentNode: null,
-    // 搜索关键字
-    keyword: "",
-    //勾选的子节点id
-    selectedNodeId: ''
-})
-
-onMounted(() => {
-})
-
-// 待选节点列表
-const optionNodes = computed(() => {
-    return data.parentNode?.children ? data.parentNode.children : []
-})
-
-//选中节点的路径:父/子/孙
-const pathsLabel = computed(() => {
-    return data.parentNode?.path ? data.parentNode.path : ''
-})
-
-// 关键字查询节点列表
-const keywordQueryNode = () => {
-    props.keywordQueryNode({ keyword: data.keyword, isReturnParent: true }, (node) => {
-        data.parentNode = node
-    })
-}
-
-// 关键字查询
-const onSearch = () => {
-    keywordQueryNode()
-}
-
-// 返回上一级
-const onBack = () => {
-    let parentId = ''
-    if (data.parentNode)
-        parentId = data.parentNode.parentId
-
-    let isReturnParent = false
-    if (!parentId)
-        isReturnParent = true
-
-    data.keyword = ""
-    props.idQueryNode({ id: parentId, isReturnParent: isReturnParent, hasChildren: false }, (node) => {
-        data.parentNode = node
-    })
-}
-
-const onClear = () => {
-    data.keyword = ''
-}
-
-// 清除掉选中节点
-const reset = () => {
-    // 搜索关键字
-    data.keyword = ""
-}
-
-// 确认按钮
-const onSubmit = () => {
-    if (!data.selectedNodeId) {
-        util.warnToast("请选择")
-        return
-    }
-
-    modelValue.value = data.selectedNodeId
-    show.value = false
-
-    reset()
-}
-
-// 取消按钮
-const onCancel = () => {
-    show.value = false
-    reset()
-}
-
-const onToggle = (node) => {
-    if (data.selectedNodeId == node.id)
-        data.selectedNodeId = ''
-    else
-        data.selectedNodeId = node.id
-}
-
-const onNextLevel = (node) => {
-    props.idQueryNode({ id: node.id, isReturnParent: false, hasChildren: true }, (node) => {
-        data.parentNode = node
-    })
-}
-
-const query = async () => {
-    data.selectedNodeId = modelValue.value
-    //空id时，查带子节点的虚拟根节点
-    if (!modelValue.value) {
-        let params = {}
-        params.isReturnParent = true
-        params.hasChildren = true
-        params.hasPaths = true
-
-        await props.idQueryNode(params, (node) => {
-            data.parentNode = node
-
-            if (!modelValue.value)
-                return
-
-            let childNode = util.findNode(modelValue.value, data.parentNode.children)
-            emit('select', childNode)
-        })
-    } 
-    //选中节点时
-    else {
-        //未显示底部弹窗时，只查节点本身
-        if (!props.show) {
-            let params = {}
-            params.id = modelValue.value
-            params.isReturnParent = false
-            params.hasChildren = false
-            params.hasPaths = true
-
-            await props.idQueryNode(params, (node) => {
-                data.parentNode = {}
-                emit('select', node)
-            })
-        }
-        //显示底部弹窗时，查询带子节点的父节点
-        else{
-            let params = {}
-            params.id = modelValue.value
-            params.isReturnParent = true
-            params.hasChildren = true
-            params.hasPaths = true
-
-            await props.idQueryNode(params, (node) => {
-                data.parentNode = node
-                if (!modelValue.value)
-                    return
-                let childNode = util.findNode(modelValue.value, data.parentNode.children)
-                emit('select', childNode)
-            })
-        }
-    }
-}
-
-watch(() => props.show, () => {
-    if (!props.show)
-        return
-
-    query()
-}, {
-    immediate: true
-})
-
-watch(() => modelValue.value, async (n, o) => {
-    query()
-}, {
-    immediate: true
-})
-</script>
-
-<style scoped>
-.cascader-pop {
-    width: 100%;
-    overflow: hidden;
-}
-
-.cascader-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;
-}
-
-.cascader-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;
-}
-
-
-.cell-content {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.circle-selector {
-    width: 20px;
-    height: 20px;
-    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;
-    /* 防止压缩 */
-}
+<template>
+    <van-popup v-model:show="show" round position="bottom" class="cascader-pop">
+        <div class="cascader-selector">
+            <div class="cascader-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="props.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="(item, i) in optionNodes" :key="i">
+                        <template #title>
+                            <div class="cell-content">
+                                <div class="circle-selector" v-if="item.canCheck" @click.stop="onToggle(item)">
+                                    <van-icon v-if="data.selectedNodeId === item.id" name="success" size="20"
+                                        color="#409eff" />
+                                    <van-icon v-if="data.selectedNodeId != item.id" name="circle" size="20"
+                                        color="#e0e0e0" />
+                                </div>
+                                <span class="name">{{ item.label }}</span>
+                            </div>
+                        </template>
+                        <template #right-icon v-if="item.canExpand">
+                            <van-icon name="arrow" @click.stop="onNextLevel(item)" />
+                        </template>
+                    </van-cell>
+                </van-cell-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({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    keywordQueryNode: {
+        type: Function,
+        default: () => { }
+    },
+    idQueryNode: {
+        type: Function,
+        default: () => { }
+    },
+});
+// 定义emit
+const emit = defineEmits(["update:modelValue", "update:show", "select"]);
+// 弹出?
+const show = useVModel(props, 'show', emit)
+const modelValue = useVModel(props, 'modelValue', emit)
+const data = reactive({
+    //当前父节点
+    parentNode: null,
+    // 搜索关键字
+    keyword: "",
+    //勾选的子节点id
+    selectedNodeId: ''
+})
+
+onMounted(() => {
+})
+
+// 待选节点列表
+const optionNodes = computed(() => {
+    return data.parentNode?.children ? data.parentNode.children : []
+})
+
+//选中节点的路径:父/子/孙
+const pathsLabel = computed(() => {
+    return data.parentNode?.path ? data.parentNode.path : ''
+})
+
+// 关键字查询节点列表
+const keywordQueryNode = () => {
+    props.keywordQueryNode({ keyword: data.keyword, isReturnParent: true }, (node) => {
+        data.parentNode = node
+    })
+}
+
+// 关键字查询
+const onSearch = () => {
+    keywordQueryNode()
+}
+
+// 返回上一级
+const onBack = () => {
+    let parentId = ''
+    if (data.parentNode)
+        parentId = data.parentNode.parentId
+
+    let isReturnParent = false
+    if (!parentId)
+        isReturnParent = true
+
+    data.keyword = ""
+    //查询父节点
+    //父节点一定有子节点
+    props.idQueryNode({ id: parentId, isReturnParent: isReturnParent, hasChildren: true }, (node) => {
+        data.parentNode = node
+    })
+}
+
+const onClear = () => {
+    data.keyword = ''
+}
+
+// 清除掉选中节点
+const reset = () => {
+    // 搜索关键字
+    data.keyword = ""
+}
+
+// 确认按钮
+const onSubmit = () => {
+    if (!data.selectedNodeId) {
+        util.warnToast("请选择")
+        return
+    }
+
+    modelValue.value = data.selectedNodeId
+    show.value = false
+
+    reset()
+}
+
+// 取消按钮
+const onCancel = () => {
+    show.value = false
+    reset()
+}
+
+const onToggle = (node) => {
+    if (data.selectedNodeId == node.id)
+        data.selectedNodeId = ''
+    else
+        data.selectedNodeId = node.id
+}
+
+const onNextLevel = (node) => {
+    props.idQueryNode({ id: node.id, isReturnParent: false, hasChildren: true }, (node) => {
+        data.parentNode = node
+    })
+}
+
+const query = async () => {
+    data.selectedNodeId = modelValue.value
+    //空id时，查带子节点的虚拟根节点
+    if (!modelValue.value) {
+        let params = {}
+        params.isReturnParent = true
+        params.hasChildren = true
+        params.hasPaths = true
+
+        await props.idQueryNode(params, (node) => {
+            data.parentNode = node
+
+            if (!modelValue.value)
+                return
+
+            let childNode = util.findNode(modelValue.value, data.parentNode.children)
+            emit('select', childNode)
+        })
+    } 
+    //选中节点时
+    else {
+        //未显示底部弹窗时，只查节点本身
+        if (!props.show) {
+            let params = {}
+            params.id = modelValue.value
+            params.isReturnParent = false
+            params.hasChildren = false
+            params.hasPaths = true
+
+            await props.idQueryNode(params, (node) => {
+                data.parentNode = {}
+                emit('select', node)
+            })
+        }
+        //显示底部弹窗时，查询带子节点的父节点
+        else{
+            let params = {}
+            params.id = modelValue.value
+            params.isReturnParent = true
+            params.hasChildren = true
+            params.hasPaths = true
+
+            await props.idQueryNode(params, (node) => {
+                data.parentNode = node
+                if (!modelValue.value)
+                    return
+                let childNode = util.findNode(modelValue.value, data.parentNode.children)
+                emit('select', childNode)
+            })
+        }
+    }
+}
+
+watch(() => props.show, () => {
+    if (!props.show)
+        return
+
+    query()
+}, {
+    immediate: true
+})
+
+watch(() => modelValue.value, async (n, o) => {
+    query()
+}, {
+    immediate: true
+})
+</script>
+
+<style scoped>
+.cascader-pop {
+    width: 100%;
+    overflow: hidden;
+}
+
+.cascader-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;
+}
+
+.cascader-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;
+}
+
+
+.cell-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.circle-selector {
+    width: 20px;
+    height: 20px;
+    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>