widget.qw 1.0.98 → 1.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "1.0.98",
+  "version": "1.1.1",
   "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,8 +16,9 @@
         </template>
     </van-field>
 
-    <CascaderPop v-model:show="data.isShowPop" v-model="data.selectedNodeId" :placeholder="props.placeholder"
-        @select="onSelect" :keywordQueryNode="props.keywordQueryNode" :idQueryNode="props.idQueryNode" />
+    <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>
 
 <script setup>
@@ -73,7 +74,7 @@ const props = defineProps({
 const data = reactive({
     isShowPop: false,
     selectedNodes: [],
-    selectedNodeId: null
+    selectedNodeIds: null
 })
 
 // 定义emit
@@ -85,21 +86,21 @@ 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)
     }
@@ -113,30 +114,50 @@ const onDelete = (idx) => {
     }
 }
 
+const ids2nodes = async () => {
+    let ids = []
+    if(!props.multiple){
+        if(modelValue.value)
+            ids = [modelValue.value]
+    }
+    else if(modelValue.value && modelValue.value.length>0)
+        ids = modelValue.value
+
+    if (ids.length < 1)
+        return []
+
+    let promises = ids.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) => {
-    //单用户选择时，将用户id记录在selectedNodeId,用户对象存入selectedNodes的第一个元素
     if (!props.multiple) {
-        data.selectedNodeId = modelValue.value
-    } 
-    //多用户选择时，遍历回调接口获取多用户对象列表，记录在selectedNodes
+        data.selectedNodeIds = modelValue.value
+    }
     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]
-            })
-        })
+        if (modelValue.value && modelValue.value.length > 0)
+            data.selectedNodeIds = modelValue.value
+        else
+            data.selectedNodeIds = []
     }
+
+    data.selectedNodes = await ids2nodes()
 }, {
     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,14 @@ const onCancel = () => {
 }
 
 const onToggle = (node) => {
-    if (data.selectedNodeId == node.id)
-        data.selectedNodeId = ''
-    else
-        data.selectedNodeId = node.id
+    if (data.selectedNodeIds.includes(node.id))
+        data.selectedNodeIds = data.selectedNodeIds.filter(item => item != node.id)
+    else{
+        if(props.multiple)
+            data.selectedNodeIds.push(node.id)
+        else
+            data.selectedNodeIds = [node.id]
+    }
 }
 
 const onNextLevel = (node) => {
@@ -176,70 +218,33 @@ 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
+    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
+//根据id查询详情对象
+watch(() => [props.show], async (n, o) => {
+    if(!props.show)
+        return
 
-            let childNode = util.findNode(modelValue.value, data.parentNode.children)
-            emit('select', childNode)
-        })
+    if (!props.multiple) {
+        data.selectedNodeIds = [modelValue.value]
     }
-    //选中节点时
     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 (modelValue.value && modelValue.value.length > 0)
+            data.selectedNodeIds = modelValue.value
+        else
+            data.selectedNodeIds = []
     }
-}
-
-watch(() => props.show, () => {
-    if (!props.show)
-        return
-
-    query()
-}, {
-    immediate: true
-})
 
-//根据id查询详情对象
-watch(() => modelValue.value, async (n, o) => {
     query()
 }, {
     immediate: true
@@ -295,7 +300,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="data.multiple" v-model="data.userids" :auth="data.auth" />
   </div>
 </template>
 
@@ -9,8 +9,9 @@ import { reactive, onMounted } from "vue";
 import UserPicker from '../cascaderpicker/userpicker.vue'
 
 const data = reactive({
+  multiple:true,
   auth: 'require',
-  userids: ["HouMu"]
+  userids: []
 })
 
 onMounted(() => {

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>

package/src/components/UsersPicker.vue

@@ -1,118 +0,0 @@
-<template>
-  <van-field v-if="!isGone"
-    :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled" :modelValue="modelValue"
-    :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
-    label-class="label">
-    <template #input>
-      <div class="user-list">
-        <van-tag class="user-item" :closeable="!isDisabled" type="primary" plain v-for="(item, i) in data.users"
-          :key="item" @close.stop="onDelete(item)">
-          {{ item.name }}
-        </van-tag>
-      </div>
-    </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: Array,
-    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,
-  users: []
-})
-
-// 定义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) => {
-  let newAry = [...(modelValue.value || []), userId]
-  modelValue.value = util.uniq(newAry)
-}
-
-const onDelete=(user)=>{
-  modelValue.value = (modelValue.value || []).filter(item=>{
-    return item != user.userid
-  })
-}
-
-watch(() => modelValue.value, async(n, o) => {
-  if(!modelValue.value || modelValue.value.length<1){
-    data.users = []
-    return
-  }
-
-  let ary = []
-  for(var i=0;i<modelValue.value.length;i++){
-    let res = await util.get_wxuser_by_id({userId:modelValue.value[i]})
-    ary.push(res.data)
-  }
-  data.users = ary
-  emit('select', data.users)
-}, {
-  immediate: true
-})
-</script>
-
-<style scoped>
-.user-item{
-  margin:3px;
-}
-</style>