widget.qw 0.0.2 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "0.0.2",
+  "version": "1.0.1",
   "description": "marqstree Vue3组件库",
   "main": "build/widget.qw.es.js",
   "keywords": [

package/src/api/index.js

@@ -123,4 +123,20 @@ export const auth_get_user_info = (data) => {
     method: "POST",
     data: data,
   })
+}
+
+export const part_children = (data) => {
+  return request_json({
+    url: vm.urlCallback() + "/ac-api/part/children",
+    method: "POST",
+    data: data,
+  })
+}
+
+export const part_detail = (data) => {
+  return request_json({
+    url: vm.urlCallback() + "/ac-api/part/detail",
+    method: "POST",
+    data: data,
+  })
 }

package/src/components/CascaderPicker.vue

@@ -0,0 +1,107 @@
+<template>
+    <van-field v-if="!isGone" :label="props.label" :required="isRequired" :rules="props.rules" :disabled="isDisabled"
+        :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
+        label-class="label">
+        <template #input>
+        <van-tag class="selected-node" v-if="modelValue" :closeable="!isDisabled" type="primary" size="medium"
+          @close.stop="onDelete">
+          {{ data.selectedNode.formatLabel }}
+        </van-tag>
+        </template>
+    </van-field>
+
+    <CascaderPop v-model:show="data.isShowPop"  
+        v-model="modelValue"
+        :placeholder="props.placeholder"
+        @select="onSelect" :queryNodes="props.queryNodes" :queryNode="props.queryNode" />
+
+</template>
+<script setup>
+import { reactive, onMounted, watch } from "vue";
+import util from "@/util"
+import { useVModel } from '@vueuse/core'
+import CascaderPop from './CascaderPop.vue'
+
+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: [],
+    },
+    auth: {
+        type: String,
+        default: "",
+    },
+    queryNodes:{
+        type:Function,
+        default:()=>{}
+    },
+    queryNode:{
+        type:Function,
+        default:()=>{}
+    }
+});
+
+// 弹出层
+const data = reactive({
+    isShowPop: false,
+    selectedNode: {}
+})
+
+// 定义emit
+const emit = defineEmits(["update:modelValue", "select"]);
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
+
+//首页加载
+onMounted(() => {
+})
+
+const onSelect = (node) => {
+    data.selectedNode = node
+}
+
+const onDelete=()=>{
+    data.selectedNode={}
+    modelValue.value = null
+}
+
+watch(() => modelValue.value, async (n, o) => {
+    if (!n) {
+        data.selectedNode = {}
+        return
+    }
+
+    props.queryNode((node)=>{
+        data.selectedNode = node
+        emit('select', data.selectedNode)
+    })
+}, {
+    immediate: true
+})
+</script>
+
+<style scoped>
+.user{
+  padding:4px 8px;
+}
+</style>

package/src/components/CascaderPop.vue

@@ -0,0 +1,313 @@
+<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" @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.hasChildren" >
+                            <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: ''
+    },
+    queryNodes: {
+        type: Function,
+        default: () => { }
+    },
+    queryNode: {
+        type: Function,
+        default: () => { }
+    }
+});
+// 定义emit
+const emit = defineEmits(["update:show", "select"]);
+// 弹出?
+const show = useVModel(props, 'show', emit)
+const modelValue = useVModel(props, 'modelValue', emit)
+const data = reactive({
+    // 所有节点
+    totalNodes: [],
+    // 搜索关键字
+    keyword: "",
+    //关键字搜索到的节点列表
+    searchNodes: [],
+    //当前节点
+    currentNode: null,
+    //勾选的节点id
+    selectedNodeId: ''
+})
+
+// 待选节点列表
+const optionNodes = computed(() => {
+    if (data.keyword)
+        return data.searchNodes
+    else if (data.currentNode)
+        return data.currentNode?.children ? data.currentNode.children : []
+    else
+        return data.totalNodes ? data.totalNodes : []
+})
+
+//选中节点的路径:父/子/孙
+const pathsLabel = computed(() => {
+    if (!data.currentNode || !data.currentNode.id)
+        return ''
+
+    let paths = util.findPaths(data.currentNode.id, data.totalNodes)
+    console.log("paths", paths);
+    let res = paths.map(item => item.label).join('/')
+    return res
+})
+
+// 查询树状节点列表
+const queryTotalNodes = async () => {
+    await props.queryNodes({keyword:data.keyword,parentId:''}, (nodes) => {
+        data.totalNodes = nodes
+    })
+}
+
+// 关键字查询
+const onSearch = async () => {
+    await util.queryNodes({keyword:data.keyword,parentId:''}, (nodes) => {
+        data.searchNodes = nodes
+    })
+}
+
+// 返回上一级
+const onBack = () => {
+    if (!data.currentNode || !data.currentNode.id)
+        return
+
+    data.keyword = ""
+    data.currentNode = util.findParent(data.currentNode.id, data.totalNodes)
+}
+
+const onClear=()=>{
+    data.keyword = ''
+    data.searchNodes = []
+}
+
+// 清除掉选中节点
+const reset = () => {
+    // 当前节点
+    data.currentNode = null
+    // 搜索关键字
+    data.keyword = ""
+}
+
+// 确认按钮
+const onSubmit = () => {
+    if (!data.selectedNodeId) {
+        util.warnToast("请选择")
+        return
+    }
+
+    let selectedNode = util.findNode(data.selectedNodeId, data.totalNodes)
+    modelValue.value = selectedNode.id
+    emit('select', selectedNode)
+    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.queryNodes({ keyword: data.keyword, parentId: node.id }, (nodes) => {
+        node.children = nodes
+        data.currentNode = node
+    })
+}
+
+//首页加载
+onMounted(async () => {
+    await queryTotalNodes()
+})
+
+watch(() => props.modelValue, () => {
+    // 初始化当前节点
+    data.currentNode = util.findParent(props.modelValue, data.totalNodes)
+}, { 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;
+}
+</style>

package/src/components/index.js

@@ -27,6 +27,8 @@ import ProjectDropdown from "./ProjectDropdown.vue";
 import Switch from './Switch.vue'
 import Sheet from './Sheet.vue'
 import TreePicker from './TreePicker.vue'
+import CascaderPop from './CascaderPop.vue'
+import CascaderPicker from './CascaderPicker.vue'
 
 const components = [
   {
@@ -136,6 +138,14 @@ const components = [
   {
     name: 'WidgetQwTreePicker',
     widget: TreePicker
+  },
+  {
+    name: 'WidgetQwCascaderPop',
+    widget: CascaderPop
+  },
+  {
+    name: 'WidgetQwCascaderPicker',
+    widget: CascaderPicker
   }
 ];
 // 导出组件

package/src/router/index.ts

@@ -149,6 +149,16 @@ const routes: Array<RouteRecordRaw> = [
     path: "/treepicker",
     name: "treepicker",
     component: () => import("../views/treepicker/index.vue"),
+  },
+  {
+    path: "/cascaderpop",
+    name: "cascaderpop",
+    component: () => import("../views/cascaderpop/index.vue"),
+  },
+  {
+    path: "/cascaderpicker",
+    name: "cascaderpicker",
+    component: () => import("../views/cascaderpicker/index.vue"),
   }
 ];
 

package/src/util/tree_util.js

@@ -41,6 +41,40 @@ export const findNode = (id, nodes) => {
     return res[res.length - 1]
 }
 
+// 查找节点路径列表
+// 返回:[父,子，孙]
+export const findPaths =(targetId, nodes, path = [])=> {
+    if (!nodes || nodes.length < 1 || !targetId)
+        return []
+
+    for (const node of nodes) {
+        if (node.id === targetId) {
+            return [...path, node];
+        }
+        if (node.children?.length) {
+            const founds = findPaths(targetId, node.children, [...path, node]);
+            if (founds && founds.length > 0) return founds;
+        }
+    }
+
+    return []
+}
+
+//查找父节点
+export const findParent = (id, nodes) => {
+    if (!nodes || !id) {
+        return null
+    }
+
+    let paths = findPaths(id, nodes)
+
+    if (!paths || paths.length < 2) {
+        return null
+    }
+
+    return paths[paths.length-2]
+}
+
 // id列表转为节点对象列表
 export const ids2nodes=(ids,totalNodes)=>{
     if(!totalNodes || totalNodes.length<1 || !ids || ids.length<1)

package/src/views/cascaderpicker/index.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="page">
+        <widget-qw-cascader-picker v-model="data.id" label="零件" placeholder="请选择零件" 
+            :queryNodes="queryNodes" 
+            :queryNode="queryNode"
+            :auth="data.auth" />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, watch } from "vue";
+import util from '@/util'
+
+const data = reactive({
+    auth: 'require',
+    id: '',
+    projectId:'GnsMl3mO'
+})
+
+const queryNodes = async (params,setNodes) => {
+    if (!data.projectId)
+        return
+
+    let p = {
+        projectId: data.projectId,
+        hasChildren: false
+    }
+
+    if(params.keyword)
+        p.keyword = params.keyword
+
+    if(params.parentId)
+        p.parentId = params.parentId
+
+    let res = await util.part_children(p)
+    if (res.code != 200)
+        return
+
+    let formatNodes = res.data.map(item=>{
+        return {
+            id:item.id,
+            label: item.formatName,
+            formatLabel: item.path,
+            hasChildren: item.hasChildren,
+            data: item
+        }
+    })
+    setNodes(formatNodes)
+}
+
+const queryNode=async(setNode)=>{
+    let params={
+        id:data.id
+    }
+    let res = await util.part_detail(params)
+    if(res.code!=200)
+        return
+    
+    let formatNode = {
+        id:res.data.id,
+        label: res.data.formatName,
+        formatLabel: item.path,
+        hasChildren: res.data.hasChildren,
+        data:res.data
+    }
+    setNode(formatNode)
+}
+
+watch(() => data.id, (newVal, oldVal) => {
+    console.log(newVal, oldVal)
+})
+</script>
+
+<style lang="scss" scoped>
+.page {
+    height: 100vh;
+    background: #fff;
+    text-align: center;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 80px 15px 0 15px;
+    box-sizing: border-box;
+}
+</style>

package/src/views/cascaderpop/index.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="page">
+        <van-button @click="data.isShow=true">弹出</van-button>
+        <widget-qw-cascader-pop v-model="data.id" v-model:show="data.isShow" 
+            label="零件" placeholder="请选择零件"
+            :queryNodes="queryNodes" :queryNode="queryNode" @select="onSelect" />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, watch } from "vue";
+import util from '@/util'
+
+const data = reactive({
+    auth: 'require',
+    id: '',
+    isShow: false,
+    projectId: 'GnsMl3mO'
+})
+
+const queryNodes = async (params, setNodes) => {
+    if (!data.projectId)
+        return
+
+    let p = {
+        projectId: data.projectId,
+        hasChildren: false
+    }
+
+    if (params.keyword)
+        p.keyword = params.keyword
+
+    if (params.parentId)
+        p.parentId = params.parentId
+
+    let res = await util.part_children(p)
+    if (res.code != 200)
+        return
+
+    let formatNodes = res.data.map(item => {
+        return {
+            id: item.id,
+            label: item.formatName,
+            formatLabel: item.path,
+            hasChildren: item.hasChildren,
+            data: item
+        }
+    })
+    setNodes(formatNodes)
+}
+
+const queryNode = async (setNode) => {
+    let params = {
+        id: data.id
+    }
+    let res = await util.part_detail(params)
+    if (res.code != 200)
+        return
+
+    let formatNode = {
+        id: res.data.id,
+        label: res.data.formatName,
+        formatLabel: item.path,
+        hasChildren: res.data.hasChildren,
+        data: res.data
+    }
+    setNode(formatNode)
+}
+
+const onSelect=(node)=>{
+    console.log('onSelect',node)
+}
+
+watch(() => data.id, (newVal, oldVal) => {
+    console.log(newVal, oldVal)
+})
+</script>
+
+<style lang="scss" scoped>
+.page {
+    height: 100vh;
+    background: #fff;
+    text-align: center;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 80px 15px 0 15px;
+    box-sizing: border-box;
+}
+</style>