widget.qw 1.0.98 → 1.1.0

package/package.json

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

package/src/components/CascaderPicker.vue

@@ -1,6 +1,6 @@
 <template>
-    <van-field v-if="!isGone" :label="props.label" :modelValue="modelValue" readonly :required="isRequired" :rules="rules"
-        :disabled="isDisabled" :placeholder="props.placeholder" :is-link="isReadonly ? false : true"
+    <van-field v-if="!isGone" :label="props.label" :modelValue="modelValue" readonly :required="isRequired"
+        :rules="rules" :disabled="isDisabled" :placeholder="props.placeholder" :is-link="isReadonly ? false : true"
         @click="data.isShowPop = !isReadonly" label-class="label">
         <template #input v-if="modelValue">
             <div style="display: flex; align-items: center; flex-wrap: wrap;">
@@ -16,7 +16,7 @@
         </template>
     </van-field>
 
-    <CascaderPop v-model:show="data.isShowPop" v-model="data.selectedNodeId" :placeholder="props.placeholder"
+    <CascaderPop :multiple="props.multiple" v-model:show="data.isShowPop" v-model="data.selectedNodeIds" :placeholder="props.placeholder"
         @select="onSelect" :keywordQueryNode="props.keywordQueryNode" :idQueryNode="props.idQueryNode" />
 </template>
 
@@ -73,7 +73,7 @@ const props = defineProps({
 const data = reactive({
     isShowPop: false,
     selectedNodes: [],
-    selectedNodeId: null
+    selectedNodeIds: null
 })
 
 // 定义emit
@@ -85,23 +85,29 @@ const { isRequired, isReadonly, isGone, isDisabled, rules } = util.props2auth(pr
 onMounted(() => {
 })
 
-const onSelect = (node) => {
-    if(!node){
+const onSelect = (nodes) => {
+    if (!nodes) {
         emit('select', null)
         return
     }
 
+    //单选
     if (!props.multiple) {
-        data.selectedNodes = [node]
+        data.selectedNodes = nodes
         emit('select', data.selectedNodes[0])
-        modelValue.value = node.id
+        modelValue.value = data.selectedNodes[0].id
     }
+    //多选
     else {
-        let one = data.selectedNodes.find(item => item.id === node.id)
-        if (!one)
-            data.selectedNodes = [...data.selectedNodes, node]
+        data.selectedNodes = nodes
         emit('select', data.selectedNodes)
         modelValue.value = data.selectedNodes.map(item => item.id)
+
+        // let one = data.selectedNodes.find(item => item.id === node.id)
+        // if (!one)
+        //     data.selectedNodes = [...data.selectedNodes, node]
+        // emit('select', data.selectedNodes)
+        // modelValue.value = data.selectedNodes.map(item => item.id)
     }
 }
 
@@ -113,29 +119,41 @@ const onDelete = (idx) => {
     }
 }
 
-watch(() => JSON.stringify(modelValue.value), async (n, o) => {
-    //单用户选择时，将用户id记录在selectedNodeId,用户对象存入selectedNodes的第一个元素
+const ids2nodes = async() => {
+    if(!data.selectedNodeIds || data.selectedNodeIds.length<1)
+        return []
+
+    let promises = data.selectedNodeIds.map(async(nodeId) => {
+        let params = {}
+        params.id = nodeId
+        params.isReturnParent = true
+        params.hasChildren = false
+        params.hasPaths = true
+
+        let selectNode = null
+        await props.idQueryNode(params, (node) => {
+            data.parentNode = node
+            selectNode = util.findNode(nodeId, data.parentNode.children)
+        })
+        return selectNode
+    })
+    
+    let selectNodes = await Promise.all(promises)
+
+    return selectNodes
+}
+
+watch(() => JSON.stringify(modelValue.value), async(n, o) => {
+    data.selectedNodeIds = modelValue.value
+    data.selectedNodes = await ids2nodes()
+    
+    //单用户选择时，将用户id记录在selectedNodeIds,用户对象存入selectedNodes的第一个元素
     if (!props.multiple) {
-        data.selectedNodeId = modelValue.value
-    } 
+        data.selectedNodeIds = modelValue.value
+    }
     //多用户选择时，遍历回调接口获取多用户对象列表，记录在selectedNodes
     else {
-        data.selectedNodes = []
-        let ids = modelValue.value || []
-        ids.forEach(async (id) => {
-            let params = {}
-            params.id = id
-            params.isReturnParent = false
-            params.hasChildren = false
-            params.hasPaths= true
-            await props.idQueryNode(params, (node) => {
-                //在部门的children中查找id对应的用户
-                //部门的children中既有子部门又有部门的员工
-                let selectNode = util.findNode(id, node.children)
-                //将用户对象放入选中用户列表中
-                data.selectedNodes = [...data.selectedNodes, selectNode]
-            })
-        })
+        data.selectedNodeIds = modelValue.value
     }
 }, {
     immediate: true

package/src/components/CascaderPop.vue

@@ -31,9 +31,9 @@
                         <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"
+                                    <van-icon v-if="data.selectedNodeIds.includes(item.id)" name="success" size="20"
                                         color="#409eff" />
-                                    <van-icon v-if="data.selectedNodeId != item.id" name="circle" size="20"
+                                    <van-icon v-if="!data.selectedNodeIds.includes(item.id)" name="circle" size="20"
                                         color="#e0e0e0" />
                                 </div>
                                 <span class="name">{{ item.label }}</span>
@@ -56,8 +56,12 @@ import { useVModel } from '@vueuse/core'
 
 const props = defineProps({
     modelValue: {
-        type: String,
-        default: ''
+        type: [String, Array, Number],
+        default: null,
+    },
+    multiple: {
+        type: Boolean,
+        default: false
     },
     show: {
         type: Boolean,
@@ -86,8 +90,8 @@ const data = reactive({
     parentNode: null,
     // 搜索关键字
     keyword: "",
-    //勾选的子节点id
-    selectedNodeId: ''
+    //记录临时勾选的子节点id
+    selectedNodeIds: []
 })
 
 onMounted(() => {
@@ -141,16 +145,50 @@ const onClear = () => {
 const reset = () => {
     // 搜索关键字
     data.keyword = ""
+    data.selectedNodeIds = []
+}
+
+const ids2nodes = async() => {
+    if(!data.selectedNodeIds || data.selectedNodeIds.length<1)
+        return []
+
+    let promises = data.selectedNodeIds.map(async(nodeId) => {
+        let params = {}
+        params.id = nodeId
+        params.isReturnParent = true
+        params.hasChildren = false
+        params.hasPaths = true
+
+        let selectNode = null
+        await props.idQueryNode(params, (node) => {
+            data.parentNode = node
+            selectNode = util.findNode(nodeId, data.parentNode.children)
+        })
+        return selectNode
+    })
+    
+    let selectNodes = await Promise.all(promises)
+
+    return selectNodes
 }
 
 // 确认按钮
-const onSubmit = () => {
-    if (!data.selectedNodeId) {
+const onSubmit = async() => {
+    if (!data.selectedNodeIds || data.selectedNodeIds.length < 1) {
         util.warnToast("请选择")
         return
     }
 
-    modelValue.value = data.selectedNodeId
+    let selectNodes = await ids2nodes()
+    emit('select', selectNodes)
+
+    if (!props.multiple) {
+        modelValue.value = data.selectedNodeIds[0]
+    }
+    else {
+        modelValue.value = data.selectedNodeIds
+    }
+
     show.value = false
 
     reset()
@@ -163,10 +201,10 @@ const onCancel = () => {
 }
 
 const onToggle = (node) => {
-    if (data.selectedNodeId == node.id)
-        data.selectedNodeId = ''
+    if (data.selectedNodeIds.includes(node.id))
+        data.selectedNodeIds = data.selectedNodeIds.filter(item => item != node.id)
     else
-        data.selectedNodeId = node.id
+        data.selectedNodeIds.push(node.id)
 }
 
 const onNextLevel = (node) => {
@@ -176,74 +214,153 @@ const onNextLevel = (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 (!props.multiple)
+        if (modelValue.value)
+            data.selectedNodeIds = [modelValue.value]
+        else
+            data.selectedNodeIds = []
+    else
+        if (modelValue.value && modelValue.value.length > 0)
+            data.selectedNodeIds = modelValue.value
+        else
+            data.selectedNodeIds = []
+
+    let params = {}
+    if (data.selectedNodeIds.length > 0)
+        params.id = data.selectedNodeIds[0]
+    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 = true
-            params.hasChildren = false
-            params.hasPaths = true
-
-            await props.idQueryNode(params, (node) => {
-                data.parentNode = node
-                let childNode = util.findNode(modelValue.value, data.parentNode.children)
-                emit('select', childNode)
-            })
-        }
-        //显示底部弹窗时，查询带子节点的父节点
-        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)
-            })
-        }
-    }
+    // if (!props.multiple) {
+    //     //空id时，查带子节点的虚拟根节点
+    //     if (!data.selectedNodeIds) {
+    //         let params = {}
+    //         params.isReturnParent = true
+    //         params.hasChildren = true
+    //         params.hasPaths = true
+
+    //         await props.idQueryNode(params, (node) => {
+    //             data.parentNode = node
+
+    //             // if (!data.selectedNodeIds)
+    //             //     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 = true
+    //             params.hasChildren = false
+    //             params.hasPaths = true
+
+    //             await props.idQueryNode(params, (node) => {
+    //                 data.parentNode = node
+    //                 let childNode = util.findNode(modelValue.value, data.parentNode.children)
+    //                 emit('select', childNode)
+    //             })
+    //         }
+    //         //显示底部弹窗时，查询带子节点的父节点
+    //         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)
+    //             })
+    //         }
+    //     }
+    // } else {
+    //     //空数组时，查带子节点的虚拟根节点
+    //     if (!data.selectedNodeIds || data.selectedNodeIds.length < 1) {
+    //         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 selectNodes = data.selectedNodeIds.map(async(nodeId) => {
+    //                 let params = {}
+    //                 params.id = nodeId
+    //                 params.isReturnParent = true
+    //                 params.hasChildren = false
+    //                 params.hasPaths = true
+
+    //                 let selectNode = await props.idQueryNode(params, (node) => {
+    //                     data.parentNode = node
+    //                     let childNode = util.findNode(nodeId, data.parentNode.children)
+    //                     return childNode
+    //                 })
+    //                 return selectNode
+    //             })
+    //             // emit('select', selectNodes)
+    //         }
+    //         //显示底部弹窗时，查询第一个选中节点的的父节点
+    //         else {
+    //             let params = {}
+    //             params.id = data.selectedNodeIds[0]
+    //             params.isReturnParent = true
+    //             params.hasChildren = true
+    //             params.hasPaths = true
+
+    //             await props.idQueryNode(params, (node) => {
+    //                 data.parentNode = node
+    //                 if (!data.selectedNodeIds[0])
+    //                     return
+    //                 let childNode = util.findNode(data.selectedNodeIds[0], data.parentNode.children)
+    //                 // emit('select', childNode)
+    //             })
+    //         }
+    //     }
+    // }
 }
 
-watch(() => props.show, () => {
-    if (!props.show)
-        return
-
-    query()
-}, {
-    immediate: true
-})
-
 //根据id查询详情对象
-watch(() => modelValue.value, async (n, o) => {
+watch(() => [modelValue.value, props.show], async (n, o) => {
     query()
 }, {
     immediate: true
 })
+
+// watch(() => props.show, () => {
+//     if (!props.show)
+//         return
+
+//     query()
+// }, {
+//     immediate: true
+// })
 </script>
 
 <style scoped>
@@ -295,7 +412,7 @@ watch(() => modelValue.value, async (n, o) => {
 .current-path {
     flex: 1;
     font-size: 14px;
-    margin-left:5px;
+    margin-left: 5px;
     color: #323233;
     white-space: nowrap;
     overflow: hidden;

package/src/components/index.js

@@ -16,8 +16,6 @@ import ImagePicker from "./image_picker.vue";
 import ImagesPicker from "./images_picker.vue";
 import FilePicker from "./FilePicker.vue";
 import SingleUserSelector from "./SingleUserSelector.vue";
-import UsersPicker from "./UsersPicker.vue"
-import UserPicker from "./UserPicker.vue"
 import UserProfile from "./UserProfile.vue"
 import BillCard from './BillCard.vue'
 import YearDropdown from "./YearDropdown.vue";
@@ -100,14 +98,6 @@ const components = [
     name: 'WidgetQwUserSelector',
     widget: UserSelector
   },
-  {
-    name: 'WidgetQwUsersPicker',
-    widget: UsersPicker
-  },
-  {
-    name: 'WidgetQwUserPicker',
-    widget: UserPicker
-  },
   {
     name: 'WidgetQwUserProfile',
     widget: UserProfile

package/src/router/index.ts

@@ -100,11 +100,6 @@ const routes: Array<RouteRecordRaw> = [
     name: "billcard",
     component: () => import("../views/billcard/index.vue"),
   },
-  {
-    path: "/userspicker",
-    name: "userspicker",
-    component: () => import("../views/userspicker/index.vue"),
-  },
   {
     path: "/userpicker",
     name: "userpicker",

package/src/views/cascaderpicker/userpicker.vue

@@ -13,8 +13,8 @@ import { useVModel } from "@vueuse/core"
 
 const props = defineProps({
     modelValue: {
-        type: String,
-        default: ''
+        type: [String, Array, Number],
+        default: null,
     },
     multiple: {
         type: Boolean,

package/src/views/userpicker/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <UserPicker label="项目经理" multiple v-model="data.userids" />
+    <UserPicker label="项目经理" multiple v-model="data.userids" :auth="data.auth" />
   </div>
 </template>
 
@@ -9,7 +9,7 @@ import { reactive, onMounted } from "vue";
 import UserPicker from '../cascaderpicker/userpicker.vue'
 
 const data = reactive({
-  auth: 'require',
+  auth: 'readonly',
   userids: ["HouMu"]
 })
 

package/src/components/UserPicker.vue

@@ -1,107 +0,0 @@
-<template>
-    <van-field v-if="!isGone" :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled"
-        :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
-        label-class="label" :modelValue="modelValue">
-        <template #input>
-        <van-tag class="user" v-if="modelValue" :closeable="!isDisabled" type="primary" plain
-          @close.stop="onDelete">
-          {{ data.user.name }}
-        </van-tag>
-        </template>
-    </van-field>
-
-    <UserPop v-model:show="data.isShowPop" :rootDeptId="props.rootDeptId" :deptRangeId="props.deptRangeId"
-        @select="onSelectUser" />
-
-</template>
-<script setup>
-import { reactive, onMounted, watch } from "vue";
-import util from "../util"
-import { useVModel } from '@vueuse/core'
-import UserPop from './widget/UserPop.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: [],
-    },
-    // 默认查询所有组织机构
-    rootDeptId: {
-        type: String,
-        default: "1", //组织机构id
-    },
-    // 二级部门取值范围字典id
-    // 取dictionary库.dict的配置id
-    deptRangeId: {
-        type: String,
-        default: ''
-    },
-    auth: {
-        type: String,
-        default: "",
-    },
-});
-
-// 弹出层
-const data = reactive({
-    isShowPop: false,
-    user: {}
-})
-
-// 定义emit
-const emit = defineEmits(["update:modelValue", "select"]);
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled, rules } = util.props2auth(props);
-
-//首页加载
-onMounted(() => {
-})
-
-const onSelectUser = (userId) => {
-    modelValue.value = userId
-}
-
-const onDelete=()=>{
-    data.user={}
-    modelValue.value = null
-}
-
-watch(() => modelValue.value, async (n, o) => {
-    if (!n) {
-        data.user = {}
-        return
-    }
-
-    let res = await util.get_wxuser_by_id({ userId: n })
-    data.user = res.data
-    emit('select', data.user)
-}, {
-    immediate: true
-})
-</script>
-
-<style scoped>
-.user{
-  padding:4px 8px;
-}
-</style>