cd-personselector 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -23
- package/dist/index.js +1 -1
- package/dist/index.mjs +247 -250
- package/dist/src/PersonSelector.vue.d.ts +2 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/PersonSelector.vue +40 -27
package/README.md
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
# cd-personselector
|
|
2
|
-
|
|
3
2
|
基于 Vue 3 + TDesign 的人员选择器组件,支持多 Tab、树形结构、搜索、懒加载等功能。
|
|
4
|
-
|
|
5
3
|
## 安装
|
|
6
|
-
|
|
7
4
|
```bash
|
|
8
5
|
npm install cd-personselector
|
|
9
6
|
```
|
|
10
|
-
|
|
11
7
|
## 使用
|
|
12
|
-
|
|
13
8
|
```vue
|
|
14
9
|
<template>
|
|
15
10
|
<PersonSelector
|
|
@@ -21,17 +16,15 @@ npm install cd-personselector
|
|
|
21
16
|
@confirm="handleConfirm"
|
|
22
17
|
@load-users="handleLoadUsers"
|
|
23
18
|
@search="handleSearch"
|
|
19
|
+
@org-change="handleOrgChange"
|
|
24
20
|
/>
|
|
25
21
|
</template>
|
|
26
|
-
|
|
27
22
|
<script setup>
|
|
28
23
|
import { ref } from 'vue'
|
|
29
24
|
import PersonSelector from 'cd-personselector'
|
|
30
25
|
import 'cd-personselector/style.css'
|
|
31
|
-
|
|
32
26
|
const showSelector = ref(false)
|
|
33
27
|
const selectedIds = ref([])
|
|
34
|
-
|
|
35
28
|
const tabs = ref([
|
|
36
29
|
{
|
|
37
30
|
key: 'department',
|
|
@@ -51,29 +44,29 @@ const tabs = ref([
|
|
|
51
44
|
]
|
|
52
45
|
}
|
|
53
46
|
])
|
|
54
|
-
|
|
55
47
|
const organizations = ref([
|
|
56
48
|
{ id: 'org-1', name: '总公司' }
|
|
57
49
|
])
|
|
58
|
-
|
|
59
50
|
function handleConfirm(items) {
|
|
60
51
|
console.log('选中项:', items)
|
|
61
52
|
}
|
|
62
|
-
|
|
63
53
|
function handleLoadUsers({ tabKey, nodeId, callback }) {
|
|
64
54
|
// 异步加载用户数据
|
|
65
55
|
fetchUsers(nodeId).then(users => callback(users))
|
|
66
56
|
}
|
|
67
|
-
|
|
68
57
|
function handleSearch({ keyword, orgId, callback }) {
|
|
69
58
|
// 搜索用户
|
|
70
59
|
searchUsers(keyword).then(users => callback(users))
|
|
71
60
|
}
|
|
61
|
+
function handleOrgChange(orgId) {
|
|
62
|
+
// 切换组织时重新加载 tabs 数据
|
|
63
|
+
loadTabsByOrg(orgId).then(data => {
|
|
64
|
+
tabs.value = data
|
|
65
|
+
})
|
|
66
|
+
}
|
|
72
67
|
</script>
|
|
73
68
|
```
|
|
74
|
-
|
|
75
69
|
## Props
|
|
76
|
-
|
|
77
70
|
| 属性 | 类型 | 默认值 | 说明 |
|
|
78
71
|
|------|------|--------|------|
|
|
79
72
|
| visible | boolean | false | 控制弹窗显示 |
|
|
@@ -83,17 +76,14 @@ function handleSearch({ keyword, orgId, callback }) {
|
|
|
83
76
|
| dialogWidth | string | '900px' | 弹窗宽度 |
|
|
84
77
|
| tips | string | '' | 顶部提示文字 |
|
|
85
78
|
| showSearch | boolean | true | 是否显示搜索 |
|
|
86
|
-
|
|
87
79
|
## Events
|
|
88
|
-
|
|
89
80
|
| 事件 | 参数 | 说明 |
|
|
90
81
|
|------|------|------|
|
|
91
|
-
| confirm | items: any[] |
|
|
82
|
+
| confirm | items: any[] | 确认选择时触发,每项包含 orgId |
|
|
92
83
|
| load-users | { tabKey, nodeId, callback } | 点击"显示人员"时触发 |
|
|
93
84
|
| search | { keyword, orgId, callback } | 搜索时触发 |
|
|
94
|
-
|
|
85
|
+
| org-change | orgId: string\|number | 切换组织时触发,用于重新加载 tabs 数据 |
|
|
95
86
|
## 类型定义
|
|
96
|
-
|
|
97
87
|
```typescript
|
|
98
88
|
interface TabConfig {
|
|
99
89
|
key: string
|
|
@@ -101,7 +91,6 @@ interface TabConfig {
|
|
|
101
91
|
icon?: string
|
|
102
92
|
tree: TreeNode[]
|
|
103
93
|
}
|
|
104
|
-
|
|
105
94
|
interface TreeNode {
|
|
106
95
|
id: number | string
|
|
107
96
|
name: string
|
|
@@ -109,7 +98,6 @@ interface TreeNode {
|
|
|
109
98
|
userCount?: number
|
|
110
99
|
isUser?: boolean
|
|
111
100
|
}
|
|
112
|
-
|
|
113
101
|
interface User {
|
|
114
102
|
id: number | string
|
|
115
103
|
name: string
|
|
@@ -119,8 +107,6 @@ interface User {
|
|
|
119
107
|
department?: string
|
|
120
108
|
}
|
|
121
109
|
```
|
|
122
|
-
|
|
123
110
|
## 依赖
|
|
124
|
-
|
|
125
111
|
- vue >= 3.0.0
|
|
126
112
|
- tdesign-vue-next >= 1.0.0
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.CdPersonSelector={},f.Vue))})(this,function(f,e){"use strict";const q={class:"cd-ps-container"},A={key:0,class:"cd-ps-tips"},G={key:1,class:"cd-ps-search"},H={key:0,class:"cd-ps-org-select"},Q={class:"cd-ps-search-input"},X={class:"cd-ps-content"},Y={class:"cd-ps-left"},Z={key:0,class:"cd-ps-search-results"},K={class:"cd-ps-search-header"},v={key:0,class:"cd-ps-loading"},ee={key:1,class:"cd-ps-empty"},te={key:2,class:"cd-ps-result-list"},oe=["onClick"],le={class:"cd-ps-avatar"},ne={class:"cd-ps-info"},se={class:"cd-ps-name"},ae={class:"cd-ps-meta"},ce={key:0},de={key:1},re={key:2},ie={class:"cd-ps-tree"},pe={key:0,class:"cd-ps-count"},me={key:1,class:"cd-ps-empty"},fe={class:"cd-ps-right"},ke={class:"cd-ps-right-header"},he={class:"cd-ps-num"},_e={class:"cd-ps-right-list"},ye={key:0,class:"cd-ps-empty"},Ne={key:1,class:"cd-ps-selected-list"},Ve={class:"cd-ps-item-info"},Ce={class:"cd-ps-info"},Be={class:"cd-ps-name"},ue={class:"cd-ps-meta"},ge={key:0},Ee={key:1},Se={key:2},xe={key:3},R=((y,w)=>{const x=y.__vccOpts||y;for(const[d,k]of w)x[d]=k;return x})(e.defineComponent({__name:"PersonSelector",props:{visible:{type:Boolean,default:!1},tabs:{default:()=>[]},organizations:{default:()=>[]},modelValue:{default:()=>[]},dialogWidth:{default:"900px"},tips:{default:""},showSearch:{type:Boolean,default:!0}},emits:["update:visible","update:modelValue","confirm","load-users","search"],setup(y,{expose:w,emit:x}){var $,j;const d=y,k=x,N=e.ref(d.visible),V=e.ref(((j=($=d.tabs)==null?void 0:$[0])==null?void 0:j.key)||""),g=e.ref(null),C=e.ref(""),a=e.ref([]),D=e.ref({}),T=e.ref(!1),b=e.ref(!1),B=e.ref([]),Ue=e.computed(()=>d.tabs||[]),L=e.computed(()=>d.organizations||[]),M=e.computed(()=>d.tips||""),we=e.computed(()=>d.showSearch),De=e.computed(()=>d.dialogWidth),h=e.ref({});e.watch(()=>d.tabs,n=>{if(n&&n.length>0){const t={};n.forEach(l=>{t[l.key]=JSON.parse(JSON.stringify(l.tree))}),h.value=t,(!V.value||!n.find(l=>l.key===V.value))&&(V.value=n[0].key)}},{immediate:!0,deep:!0}),e.watch(()=>d.visible,n=>{N.value=n,n&&(a.value=d.modelValue?[...d.modelValue]:[],d.organizations.length>0&&!g.value&&(g.value=d.organizations[0].id))}),e.watch(N,n=>{k("update:visible",n)});function Te(n,t){t&&(D.value[n]=t)}function z(n,t){for(const l of n){if(l.id===t)return l;if(l.children){const s=z(l.children,t);if(s)return s}}return null}const E=e.computed(()=>{const n=[];return a.value.forEach(t=>{const l=B.value.find(s=>s.id===t);if(l){n.push({...l,typeName:"搜索结果"});return}for(const s of d.tabs){const i=h.value[s.key]||[],p=z(i,t);if(p){const c=s.name.replace(/^按/,"");n.push({...p,typeName:c});break}}}),n}),ze=()=>{C.value=""},Ie=()=>{};let u=null;const Pe=()=>{if(u&&clearTimeout(u),!C.value.trim()){I();return}T.value=!0,b.value=!0,u=setTimeout(()=>Oe(),300)},Oe=()=>{B.value=[];const n=t=>{B.value=t.map(l=>({...l,isUser:!0})),b.value=!1};k("search",{keyword:C.value,orgId:g.value||void 0,callback:n})},I=()=>{u&&(clearTimeout(u),u=null),T.value=!1,C.value="",B.value=[],b.value=!1},Re=n=>{const t=a.value.indexOf(n.id);t>-1?a.value.splice(t,1):a.value.push(n.id)};function Le(n){const t=[],l=s=>{for(const i of s)t.push(i.id),i.children&&l(i.children)};return l(n),t}const Me=(n,t)=>{var c;const l=t==null?void 0:t.node;if(l){const r=l.value??((c=l.data)==null?void 0:c.id);if(r!==void 0){l.checked?a.value.includes(r)||(a.value=[...a.value,r]):a.value=a.value.filter(S=>S!==r);return}}const s=h.value[V.value]||[],i=Le(s),p=a.value.filter(r=>!i.includes(r));a.value=[...p,...n]};function F(n,t,l){for(const s of n){if(s.id===t)return s.children=s.children||[],s.children.push(...l),s.loaded=!0,!0;if(s.children&&F(s.children,t,l))return!0}return!1}async function Fe(n,t){const l=n.value,s=D.value[t];k("load-users",{tabKey:t,nodeId:l,node:n,callback:async p=>{if(p.length>0){const c=p.map(_=>{const{id:S,name:P,...O}=_;return{...O,id:S,name:_.displayName||P,isUser:!0}}),r=h.value[t];if(r&&F(r,l,c),s){s.appendTo(l,c),n.data.loaded=!0,await e.nextTick();try{s.setItem(l,{expanded:!0})}catch{}}}else{n.data.loaded=!0;const c=h.value[t];if(c){const r=z(c,l);r&&(r.loaded=!0)}}}})}const We=n=>{a.value=a.value.filter(t=>t!==n)},W=()=>{a.value=[]},$e=()=>{k("update:modelValue",a.value),k("confirm",E.value),N.value=!1},je=()=>{N.value=!1};return w({clearSelection:W,appendUsers:(n,t,l)=>{const s=D.value[n];if(s&&l.length>0){const i=l.map(p=>{const{id:c,name:r,..._}=p;return{..._,id:c,name:p.displayName||r,isUser:!0}});s.appendTo(t,i)}}}),(n,t)=>{const l=e.resolveComponent("t-icon"),s=e.resolveComponent("t-option"),i=e.resolveComponent("t-select"),p=e.resolveComponent("t-input"),c=e.resolveComponent("t-button"),r=e.resolveComponent("t-loading"),_=e.resolveComponent("t-checkbox"),S=e.resolveComponent("t-tree"),P=e.resolveComponent("t-tab-panel"),O=e.resolveComponent("t-tabs"),Je=e.resolveComponent("t-dialog");return e.openBlock(),e.createBlock(Je,{visible:N.value,"onUpdate:visible":t[4]||(t[4]=o=>N.value=o),header:"选择人员",width:De.value,footer:!0,placement:"center","destroy-on-close":"",onConfirm:$e,onClose:je},{default:e.withCtx(()=>[e.createElementVNode("div",q,[M.value?(e.openBlock(),e.createElementBlock("div",A,[e.createVNode(l,{name:"info-circle"}),e.createElementVNode("span",null,e.toDisplayString(M.value),1)])):e.createCommentVNode("",!0),we.value?(e.openBlock(),e.createElementBlock("div",G,[L.value.length>0?(e.openBlock(),e.createElementBlock("div",H,[e.createVNode(i,{modelValue:g.value,"onUpdate:modelValue":t[0]||(t[0]=o=>g.value=o),placeholder:"选择组织",style:{width:"200px"},onChange:Ie},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.value,o=>(e.openBlock(),e.createBlock(s,{key:o.id,value:o.id,label:o.displayName||o.name},null,8,["value","label"]))),128))]),_:1},8,["modelValue"])])):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[e.createVNode(p,{modelValue:C.value,"onUpdate:modelValue":t[1]||(t[1]=o=>C.value=o),placeholder:"搜索",clearable:"",onInput:Pe,onClear:I},{"prefix-icon":e.withCtx(()=>[e.createVNode(l,{name:"search"})]),_:1},8,["modelValue"])])])):e.createCommentVNode("",!0),e.createElementVNode("div",X,[e.createElementVNode("div",Y,[T.value?(e.openBlock(),e.createElementBlock("div",Z,[e.createElementVNode("div",K,[t[6]||(t[6]=e.createElementVNode("span",null,"搜索结果",-1)),e.createVNode(c,{size:"small",variant:"text",onClick:I},{default:e.withCtx(()=>[...t[5]||(t[5]=[e.createTextVNode("返回",-1)])]),_:1})]),b.value?(e.openBlock(),e.createElementBlock("div",v,[e.createVNode(r),t[7]||(t[7]=e.createElementVNode("span",null,"搜索中...",-1))])):B.value.length===0?(e.openBlock(),e.createElementBlock("div",ee,[e.createVNode(l,{name:"search",size:"48px",style:{color:"#ddd"}}),t[8]||(t[8]=e.createElementVNode("p",null,"未找到匹配的人员",-1))])):(e.openBlock(),e.createElementBlock("div",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B.value,o=>(e.openBlock(),e.createElementBlock("div",{key:o.id,class:e.normalizeClass(["cd-ps-result-item",{"cd-ps-selected":a.value.includes(o.id)}]),onClick:U=>Re(o)},[e.createVNode(_,{checked:a.value.includes(o.id),onClick:t[2]||(t[2]=e.withModifiers(()=>{},["stop"]))},null,8,["checked"]),e.createElementVNode("div",le,[e.createVNode(l,{name:"user"})]),e.createElementVNode("div",ne,[e.createElementVNode("div",se,e.toDisplayString(o.displayName||o.name),1),e.createElementVNode("div",ae,[o.position?(e.openBlock(),e.createElementBlock("span",ce,e.toDisplayString(o.position),1)):e.createCommentVNode("",!0),o.department?(e.openBlock(),e.createElementBlock("span",de,e.toDisplayString(o.department),1)):e.createCommentVNode("",!0),o.phone?(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(o.phone),1)):e.createCommentVNode("",!0)])])],10,oe))),128))]))])):(e.openBlock(),e.createBlock(O,{key:1,modelValue:V.value,"onUpdate:modelValue":t[3]||(t[3]=o=>V.value=o),onChange:ze},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ue.value,o=>(e.openBlock(),e.createBlock(P,{key:o.key,value:o.key,label:o.name},{default:e.withCtx(()=>{var U;return[e.createElementVNode("div",ie,[((U=h.value[o.key])==null?void 0:U.length)>0?(e.openBlock(),e.createBlock(S,{key:0,ref_for:!0,ref:m=>Te(o.key,m),data:h.value[o.key],keys:{value:"id",label:"name",children:"children"},hover:"",checkable:"","expand-all":!1,value:a.value,onChange:Me},{label:e.withCtx(({node:m})=>{var J;return[e.createElementVNode("div",{class:e.normalizeClass(["cd-ps-node",{"cd-ps-node-user":m.data.isUser}])},[e.createVNode(l,{name:m.data.isUser?"user":o.icon||"folder"},null,8,["name"]),e.createElementVNode("span",null,e.toDisplayString(m.label),1),m.data.userCount&&!m.data.isUser?(e.openBlock(),e.createElementBlock("span",pe,"("+e.toDisplayString(m.data.userCount)+")",1)):e.createCommentVNode("",!0),!m.data.isUser&&!((J=m.data.children)!=null&&J.length)&&!m.data.loaded?(e.openBlock(),e.createBlock(c,{key:1,size:"small",variant:"text",class:"cd-ps-load-btn",onClick:e.withModifiers(Ge=>Fe(m,o.key),["stop"])},{default:e.withCtx(()=>[...t[9]||(t[9]=[e.createTextVNode("显示人员",-1)])]),_:1},8,["onClick"])):e.createCommentVNode("",!0)],2)]}),_:2},1032,["data","value"])):(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(l,{name:o.icon||"folder-open",size:"48px",style:{color:"#ddd"}},null,8,["name"]),t[10]||(t[10]=e.createElementVNode("p",null,"暂无数据",-1))]))])]}),_:2},1032,["value","label"]))),128))]),_:1},8,["modelValue"]))]),e.createElementVNode("div",fe,[e.createElementVNode("div",ke,[t[12]||(t[12]=e.createElementVNode("span",{class:"cd-ps-title"},"已选择",-1)),e.createElementVNode("span",he,e.toDisplayString(E.value.length)+" 项",1),E.value.length>0?(e.openBlock(),e.createBlock(c,{key:0,size:"small",variant:"text",onClick:W},{default:e.withCtx(()=>[...t[11]||(t[11]=[e.createTextVNode("清空",-1)])]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",_e,[E.value.length===0?(e.openBlock(),e.createElementBlock("div",ye,[e.createVNode(l,{name:"user-checked",size:"64px",style:{color:"#ddd"}}),t[13]||(t[13]=e.createElementVNode("p",null,"暂无选择",-1))])):(e.openBlock(),e.createElementBlock("div",Ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(E.value,o=>(e.openBlock(),e.createElementBlock("div",{key:o.id,class:e.normalizeClass(["cd-ps-selected-item",{"cd-ps-dept-item":!o.isUser}])},[e.createElementVNode("div",Ve,[e.createElementVNode("div",{class:e.normalizeClass(["cd-ps-avatar",{"cd-ps-avatar-dept":!o.isUser}])},[e.createVNode(l,{name:o.isUser?"user":"folder"},null,8,["name"])],2),e.createElementVNode("div",Ce,[e.createElementVNode("div",Be,e.toDisplayString(o.displayName||o.name),1),e.createElementVNode("div",ue,[o.isUser&&o.position?(e.openBlock(),e.createElementBlock("span",ge,e.toDisplayString(o.position),1)):e.createCommentVNode("",!0),o.isUser&&o.department?(e.openBlock(),e.createElementBlock("span",Ee,e.toDisplayString(o.department),1)):e.createCommentVNode("",!0),o.isUser?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",Se,e.toDisplayString(o.typeName||"部门"),1)),!o.isUser&&o.userCount?(e.openBlock(),e.createElementBlock("span",xe,e.toDisplayString(o.userCount)+"人",1)):e.createCommentVNode("",!0)])])]),e.createVNode(c,{size:"small",variant:"text",shape:"circle",onClick:U=>We(o.id)},{icon:e.withCtx(()=>[e.createVNode(l,{name:"close"})]),_:1},8,["onClick"])],2))),128))]))])])])])]),_:1},8,["visible","width"])}}}),[["__scopeId","data-v-08dddd5b"]]),be={install(y){y.component("PersonSelector",R)}};f.PersonSelector=R,f.default=be,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.CdPersonSelector={},f.Vue))})(this,function(f,e){"use strict";const H={class:"cd-ps-container"},Q={key:0,class:"cd-ps-tips"},X={key:1,class:"cd-ps-search"},Y={key:0,class:"cd-ps-org-select"},Z={class:"cd-ps-search-input"},K={class:"cd-ps-content"},v={class:"cd-ps-left"},ee={key:0,class:"cd-ps-search-results"},te={class:"cd-ps-search-header"},oe={key:0,class:"cd-ps-loading"},le={key:1,class:"cd-ps-empty"},ne={key:2,class:"cd-ps-result-list"},ae=["onClick"],se={class:"cd-ps-avatar"},ce={class:"cd-ps-info"},de={class:"cd-ps-name"},re={class:"cd-ps-meta"},ie={key:0},pe={key:1},me={key:2},fe={class:"cd-ps-tree"},ke={key:0,class:"cd-ps-count"},he={key:1,class:"cd-ps-empty"},_e={class:"cd-ps-right"},ye={class:"cd-ps-right-header"},Ne={class:"cd-ps-num"},Ve={class:"cd-ps-right-list"},ge={key:0,class:"cd-ps-empty"},Ce={key:1,class:"cd-ps-selected-list"},Be={class:"cd-ps-item-info"},ue={class:"cd-ps-info"},Ee={class:"cd-ps-name"},Se={class:"cd-ps-meta"},xe={key:0},be={key:1},we={key:2},Ue={key:3},R=((V,T)=>{const U=V.__vccOpts||V;for(const[s,k]of T)U[s]=k;return U})(e.defineComponent({__name:"PersonSelector",props:{visible:{type:Boolean,default:!1},tabs:{default:()=>[]},organizations:{default:()=>[]},modelValue:{default:()=>[]},dialogWidth:{default:"900px"},tips:{default:""},showSearch:{type:Boolean,default:!0}},emits:["update:visible","update:modelValue","confirm","load-users","search","org-change"],setup(V,{expose:T,emit:U}){var q,A;const s=V,k=U,g=e.ref(s.visible),h=e.ref(((A=(q=s.tabs)==null?void 0:q[0])==null?void 0:A.key)||""),_=e.ref(null),C=e.ref(""),r=e.ref([]),E=e.ref(new Map),z=e.ref({}),P=e.ref(!1),D=e.ref(!1),S=e.ref([]),Ie=e.computed(()=>s.tabs||[]),L=e.computed(()=>s.organizations||[]),F=e.computed(()=>s.tips||""),Te=e.computed(()=>s.showSearch),ze=e.computed(()=>s.dialogWidth),y=e.ref({});e.watch(()=>s.tabs,l=>{if(l&&l.length>0){const t={};l.forEach(n=>{t[n.key]=JSON.parse(JSON.stringify(n.tree))}),y.value=t,(!h.value||!l.find(n=>n.key===h.value))&&(h.value=l[0].key)}},{immediate:!0,deep:!0}),e.watch(()=>s.visible,l=>{g.value=l,l&&(r.value=s.modelValue?[...s.modelValue]:[],E.value.clear(),s.organizations.length>0&&!_.value&&(_.value=s.organizations[0].id))}),e.watch(g,l=>{k("update:visible",l)});function Pe(l,t){t&&(z.value[l]=t)}function W(l,t){for(const n of l){if(n.id===t)return n;if(n.children){const a=W(n.children,t);if(a)return a}}return null}const x=e.computed(()=>r.value.map(l=>E.value.get(l)).filter(Boolean));function $(l,t){r.value.includes(l)||r.value.push(l),E.value.set(l,t)}function M(l){r.value=r.value.filter(t=>t!==l),E.value.delete(l)}const Me=()=>{C.value=""},Oe=l=>{const t={};s.tabs.forEach(n=>{t[n.key]=[]}),y.value=t,k("org-change",l)};let B=null;const Re=()=>{if(B&&clearTimeout(B),!C.value.trim()){O();return}P.value=!0,D.value=!0,B=setTimeout(()=>Le(),300)},Le=()=>{S.value=[];const l=t=>{S.value=t.map(n=>({...n,isUser:!0})),D.value=!1};k("search",{keyword:C.value,orgId:_.value||void 0,callback:l})},O=()=>{B&&(clearTimeout(B),B=null),P.value=!1,C.value="",S.value=[],D.value=!1},Fe=l=>{r.value.indexOf(l.id)>-1?M(l.id):$(l.id,{...l,isUser:!0,typeName:"搜索结果",orgId:_.value})};function We(l){const t=[],n=a=>{for(const p of a)t.push(p.id),p.children&&n(p.children)};return n(l),t}const $e=(l,t)=>{var c;const n=t==null?void 0:t.node;if(n){const d=n.value??((c=n.data)==null?void 0:c.id);if(d!==void 0){if(n.checked){const u=s.tabs.find(w=>w.key===h.value),b=u?u.name.replace(/^按/,""):"";$(d,{...n.data,typeName:b,orgId:_.value})}else M(d);return}}const a=y.value[h.value]||[],p=We(a),m=r.value.filter(d=>!p.includes(d));r.value=[...m,...l]};function j(l,t,n){for(const a of l){if(a.id===t)return a.children=a.children||[],a.children.push(...n),a.loaded=!0,!0;if(a.children&&j(a.children,t,n))return!0}return!1}async function je(l,t){const n=l.value,a=z.value[t];k("load-users",{tabKey:t,nodeId:n,node:l,callback:async m=>{if(m.length>0){const c=m.map(N=>{const{id:u,name:b,...w}=N;return{...w,id:u,name:N.displayName||b,isUser:!0}}),d=y.value[t];if(d&&j(d,n,c),a){a.appendTo(n,c),l.data.loaded=!0,await e.nextTick();try{a.setItem(n,{expanded:!0})}catch{}}}else{l.data.loaded=!0;const c=y.value[t];if(c){const d=W(c,n);d&&(d.loaded=!0)}}}})}const Je=l=>{M(l)},J=()=>{r.value=[],E.value.clear()},qe=()=>{k("update:modelValue",r.value),k("confirm",x.value),g.value=!1},Ae=()=>{g.value=!1};return T({clearSelection:J,appendUsers:(l,t,n)=>{const a=z.value[l];if(a&&n.length>0){const p=n.map(m=>{const{id:c,name:d,...N}=m;return{...N,id:c,name:m.displayName||d,isUser:!0}});a.appendTo(t,p)}}}),(l,t)=>{const n=e.resolveComponent("t-icon"),a=e.resolveComponent("t-option"),p=e.resolveComponent("t-select"),m=e.resolveComponent("t-input"),c=e.resolveComponent("t-button"),d=e.resolveComponent("t-loading"),N=e.resolveComponent("t-checkbox"),u=e.resolveComponent("t-tree"),b=e.resolveComponent("t-tab-panel"),w=e.resolveComponent("t-tabs"),Ge=e.resolveComponent("t-dialog");return e.openBlock(),e.createBlock(Ge,{visible:g.value,"onUpdate:visible":t[4]||(t[4]=o=>g.value=o),header:"选择人员",width:ze.value,footer:!0,placement:"center","destroy-on-close":"",onConfirm:qe,onClose:Ae},{default:e.withCtx(()=>[e.createElementVNode("div",H,[F.value?(e.openBlock(),e.createElementBlock("div",Q,[e.createVNode(n,{name:"info-circle"}),e.createElementVNode("span",null,e.toDisplayString(F.value),1)])):e.createCommentVNode("",!0),Te.value?(e.openBlock(),e.createElementBlock("div",X,[L.value.length>0?(e.openBlock(),e.createElementBlock("div",Y,[e.createVNode(p,{modelValue:_.value,"onUpdate:modelValue":t[0]||(t[0]=o=>_.value=o),placeholder:"选择组织",style:{width:"200px"},onChange:Oe},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.value,o=>(e.openBlock(),e.createBlock(a,{key:o.id,value:o.id,label:o.displayName||o.name},null,8,["value","label"]))),128))]),_:1},8,["modelValue"])])):e.createCommentVNode("",!0),e.createElementVNode("div",Z,[e.createVNode(m,{modelValue:C.value,"onUpdate:modelValue":t[1]||(t[1]=o=>C.value=o),placeholder:"输入手机号/工号/姓名/部门/职位搜索",clearable:"",onInput:Re,onClear:O},{"prefix-icon":e.withCtx(()=>[e.createVNode(n,{name:"search"})]),_:1},8,["modelValue"])])])):e.createCommentVNode("",!0),e.createElementVNode("div",K,[e.createElementVNode("div",v,[P.value?(e.openBlock(),e.createElementBlock("div",ee,[e.createElementVNode("div",te,[t[6]||(t[6]=e.createElementVNode("span",null,"搜索结果",-1)),e.createVNode(c,{size:"small",variant:"text",onClick:O},{default:e.withCtx(()=>[...t[5]||(t[5]=[e.createTextVNode("返回",-1)])]),_:1})]),D.value?(e.openBlock(),e.createElementBlock("div",oe,[e.createVNode(d),t[7]||(t[7]=e.createElementVNode("span",null,"搜索中...",-1))])):S.value.length===0?(e.openBlock(),e.createElementBlock("div",le,[e.createVNode(n,{name:"search",size:"48px",style:{color:"#ddd"}}),t[8]||(t[8]=e.createElementVNode("p",null,"未找到匹配的人员",-1))])):(e.openBlock(),e.createElementBlock("div",ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,o=>(e.openBlock(),e.createElementBlock("div",{key:o.id,class:e.normalizeClass(["cd-ps-result-item",{"cd-ps-selected":r.value.includes(o.id)}]),onClick:I=>Fe(o)},[e.createVNode(N,{checked:r.value.includes(o.id),onClick:t[2]||(t[2]=e.withModifiers(()=>{},["stop"]))},null,8,["checked"]),e.createElementVNode("div",se,[e.createVNode(n,{name:"user"})]),e.createElementVNode("div",ce,[e.createElementVNode("div",de,e.toDisplayString(o.displayName||o.name),1),e.createElementVNode("div",re,[o.position?(e.openBlock(),e.createElementBlock("span",ie,e.toDisplayString(o.position),1)):e.createCommentVNode("",!0),o.department?(e.openBlock(),e.createElementBlock("span",pe,e.toDisplayString(o.department),1)):e.createCommentVNode("",!0),o.phone?(e.openBlock(),e.createElementBlock("span",me,e.toDisplayString(o.phone),1)):e.createCommentVNode("",!0)])])],10,ae))),128))]))])):(e.openBlock(),e.createBlock(w,{key:1,modelValue:h.value,"onUpdate:modelValue":t[3]||(t[3]=o=>h.value=o),onChange:Me},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ie.value,o=>(e.openBlock(),e.createBlock(b,{key:o.key,value:o.key,label:o.name},{default:e.withCtx(()=>{var I;return[e.createElementVNode("div",fe,[((I=y.value[o.key])==null?void 0:I.length)>0?(e.openBlock(),e.createBlock(u,{key:0,ref_for:!0,ref:i=>Pe(o.key,i),data:y.value[o.key],keys:{value:"id",label:"name",children:"children"},hover:"",checkable:"","expand-all":!1,value:r.value,onChange:$e},{label:e.withCtx(({node:i})=>{var G;return[e.createElementVNode("div",{class:e.normalizeClass(["cd-ps-node",{"cd-ps-node-user":i.data.isUser}])},[e.createVNode(n,{name:i.data.isUser?"user":o.icon||"folder"},null,8,["name"]),e.createElementVNode("span",null,e.toDisplayString(i.label),1),i.data.userCount&&!i.data.isUser?(e.openBlock(),e.createElementBlock("span",ke,"("+e.toDisplayString(i.data.userCount)+")",1)):e.createCommentVNode("",!0),!i.data.isUser&&!((G=i.data.children)!=null&&G.length)&&!i.data.loaded?(e.openBlock(),e.createBlock(c,{key:1,size:"small",variant:"text",class:"cd-ps-load-btn",onClick:e.withModifiers(Xe=>je(i,o.key),["stop"])},{default:e.withCtx(()=>[...t[9]||(t[9]=[e.createTextVNode("显示人员",-1)])]),_:1},8,["onClick"])):e.createCommentVNode("",!0)],2)]}),_:2},1032,["data","value"])):(e.openBlock(),e.createElementBlock("div",he,[e.createVNode(n,{name:o.icon||"folder-open",size:"48px",style:{color:"#ddd"}},null,8,["name"]),t[10]||(t[10]=e.createElementVNode("p",null,"暂无数据",-1))]))])]}),_:2},1032,["value","label"]))),128))]),_:1},8,["modelValue"]))]),e.createElementVNode("div",_e,[e.createElementVNode("div",ye,[t[12]||(t[12]=e.createElementVNode("span",{class:"cd-ps-title"},"已选择",-1)),e.createElementVNode("span",Ne,e.toDisplayString(x.value.length)+" 项",1),x.value.length>0?(e.openBlock(),e.createBlock(c,{key:0,size:"small",variant:"text",onClick:J},{default:e.withCtx(()=>[...t[11]||(t[11]=[e.createTextVNode("清空",-1)])]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",Ve,[x.value.length===0?(e.openBlock(),e.createElementBlock("div",ge,[e.createVNode(n,{name:"user-checked",size:"64px",style:{color:"#ddd"}}),t[13]||(t[13]=e.createElementVNode("p",null,"暂无选择",-1))])):(e.openBlock(),e.createElementBlock("div",Ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,o=>(e.openBlock(),e.createElementBlock("div",{key:o.id,class:e.normalizeClass(["cd-ps-selected-item",{"cd-ps-dept-item":!o.isUser}])},[e.createElementVNode("div",Be,[e.createElementVNode("div",{class:e.normalizeClass(["cd-ps-avatar",{"cd-ps-avatar-dept":!o.isUser}])},[e.createVNode(n,{name:o.isUser?"user":"folder"},null,8,["name"])],2),e.createElementVNode("div",ue,[e.createElementVNode("div",Ee,e.toDisplayString(o.displayName||o.name),1),e.createElementVNode("div",Se,[o.isUser&&o.position?(e.openBlock(),e.createElementBlock("span",xe,e.toDisplayString(o.position),1)):e.createCommentVNode("",!0),o.isUser&&o.department?(e.openBlock(),e.createElementBlock("span",be,e.toDisplayString(o.department),1)):e.createCommentVNode("",!0),o.isUser?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",we,e.toDisplayString(o.typeName||"部门"),1)),!o.isUser&&o.userCount?(e.openBlock(),e.createElementBlock("span",Ue,e.toDisplayString(o.userCount)+"人",1)):e.createCommentVNode("",!0)])])]),e.createVNode(c,{size:"small",variant:"text",shape:"circle",onClick:I=>Je(o.id)},{icon:e.withCtx(()=>[e.createVNode(n,{name:"close"})]),_:1},8,["onClick"])],2))),128))]))])])])])]),_:1},8,["visible","width"])}}}),[["__scopeId","data-v-0a6760cf"]]),De={install(V){V.component("PersonSelector",R)}};f.PersonSelector=R,f.default=De,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/index.mjs
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as Ne, ref as _, computed as B, watch as Q, resolveComponent as m, createBlock as S, openBlock as a, withCtx as y, createElementVNode as n, createElementBlock as o, createCommentVNode as v, createVNode as u, toDisplayString as h, Fragment as $, renderList as J, createTextVNode as X, normalizeClass as A, withModifiers as oe, nextTick as Ue } from "vue";
|
|
2
|
+
const xe = { class: "cd-ps-container" }, Se = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "cd-ps-tips"
|
|
5
|
-
},
|
|
5
|
+
}, Ie = {
|
|
6
6
|
key: 1,
|
|
7
7
|
class: "cd-ps-search"
|
|
8
|
-
},
|
|
8
|
+
}, Ve = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "cd-ps-org-select"
|
|
11
|
-
},
|
|
11
|
+
}, ze = { class: "cd-ps-search-input" }, Te = { class: "cd-ps-content" }, we = { class: "cd-ps-left" }, Be = {
|
|
12
12
|
key: 0,
|
|
13
13
|
class: "cd-ps-search-results"
|
|
14
|
-
},
|
|
14
|
+
}, De = { class: "cd-ps-search-header" }, Re = {
|
|
15
15
|
key: 0,
|
|
16
16
|
class: "cd-ps-loading"
|
|
17
|
-
},
|
|
17
|
+
}, Oe = {
|
|
18
18
|
key: 1,
|
|
19
19
|
class: "cd-ps-empty"
|
|
20
|
-
},
|
|
20
|
+
}, Pe = {
|
|
21
21
|
key: 2,
|
|
22
22
|
class: "cd-ps-result-list"
|
|
23
|
-
},
|
|
23
|
+
}, Ee = ["onClick"], Me = { class: "cd-ps-avatar" }, Le = { class: "cd-ps-info" }, We = { class: "cd-ps-name" }, $e = { class: "cd-ps-meta" }, Je = { key: 0 }, Ae = { key: 1 }, Fe = { key: 2 }, je = { class: "cd-ps-tree" }, qe = {
|
|
24
24
|
key: 0,
|
|
25
25
|
class: "cd-ps-count"
|
|
26
|
-
},
|
|
26
|
+
}, Ge = {
|
|
27
27
|
key: 1,
|
|
28
28
|
class: "cd-ps-empty"
|
|
29
|
-
},
|
|
29
|
+
}, He = { class: "cd-ps-right" }, Qe = { class: "cd-ps-right-header" }, Xe = { class: "cd-ps-num" }, Ye = { class: "cd-ps-right-list" }, Ze = {
|
|
30
30
|
key: 0,
|
|
31
31
|
class: "cd-ps-empty"
|
|
32
|
-
},
|
|
32
|
+
}, Ke = {
|
|
33
33
|
key: 1,
|
|
34
34
|
class: "cd-ps-selected-list"
|
|
35
|
-
},
|
|
35
|
+
}, et = { class: "cd-ps-item-info" }, tt = { class: "cd-ps-info" }, st = { class: "cd-ps-name" }, lt = { class: "cd-ps-meta" }, at = { key: 0 }, nt = { key: 1 }, ot = { key: 2 }, dt = { key: 3 }, ct = /* @__PURE__ */ Ne({
|
|
36
36
|
__name: "PersonSelector",
|
|
37
37
|
props: {
|
|
38
38
|
visible: { type: Boolean, default: !1 },
|
|
@@ -43,180 +43,177 @@ const be = { class: "cd-ps-container" }, Ne = {
|
|
|
43
43
|
tips: { default: "" },
|
|
44
44
|
showSearch: { type: Boolean, default: !0 }
|
|
45
45
|
},
|
|
46
|
-
emits: ["update:visible", "update:modelValue", "confirm", "load-users", "search"],
|
|
47
|
-
setup(
|
|
48
|
-
var
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
if (
|
|
46
|
+
emits: ["update:visible", "update:modelValue", "confirm", "load-users", "search", "org-change"],
|
|
47
|
+
setup(I, { expose: F, emit: M }) {
|
|
48
|
+
var le, ae;
|
|
49
|
+
const c = I, C = M, V = _(c.visible), b = _(((ae = (le = c.tabs) == null ? void 0 : le[0]) == null ? void 0 : ae.key) || ""), N = _(null), z = _(""), p = _([]), D = _(/* @__PURE__ */ new Map()), j = _({}), q = _(!1), L = _(!1), R = _([]), de = B(() => c.tabs || []), Y = B(() => c.organizations || []), Z = B(() => c.tips || ""), ce = B(() => c.showSearch), ie = B(() => c.dialogWidth), U = _({});
|
|
50
|
+
Q(() => c.tabs, (s) => {
|
|
51
|
+
if (s && s.length > 0) {
|
|
52
52
|
const e = {};
|
|
53
|
-
|
|
54
|
-
e[
|
|
55
|
-
}),
|
|
53
|
+
s.forEach((l) => {
|
|
54
|
+
e[l.key] = JSON.parse(JSON.stringify(l.tree));
|
|
55
|
+
}), U.value = e, (!b.value || !s.find((l) => l.key === b.value)) && (b.value = s[0].key);
|
|
56
56
|
}
|
|
57
|
-
}, { immediate: !0, deep: !0 }),
|
|
58
|
-
|
|
59
|
-
}),
|
|
60
|
-
C("update:visible",
|
|
57
|
+
}, { immediate: !0, deep: !0 }), Q(() => c.visible, (s) => {
|
|
58
|
+
V.value = s, s && (p.value = c.modelValue ? [...c.modelValue] : [], D.value.clear(), c.organizations.length > 0 && !N.value && (N.value = c.organizations[0].id));
|
|
59
|
+
}), Q(V, (s) => {
|
|
60
|
+
C("update:visible", s);
|
|
61
61
|
});
|
|
62
|
-
function
|
|
63
|
-
e && (
|
|
62
|
+
function re(s, e) {
|
|
63
|
+
e && (j.value[s] = e);
|
|
64
64
|
}
|
|
65
|
-
function
|
|
66
|
-
for (const
|
|
67
|
-
if (
|
|
68
|
-
if (
|
|
69
|
-
const
|
|
70
|
-
if (
|
|
65
|
+
function K(s, e) {
|
|
66
|
+
for (const l of s) {
|
|
67
|
+
if (l.id === e) return l;
|
|
68
|
+
if (l.children) {
|
|
69
|
+
const d = K(l.children, e);
|
|
70
|
+
if (d) return d;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
return null;
|
|
74
74
|
}
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}), l;
|
|
92
|
-
}), ie = () => {
|
|
93
|
-
I.value = "";
|
|
94
|
-
}, ce = () => {
|
|
75
|
+
const O = B(() => p.value.map((s) => D.value.get(s)).filter(Boolean));
|
|
76
|
+
function ee(s, e) {
|
|
77
|
+
p.value.includes(s) || p.value.push(s), D.value.set(s, e);
|
|
78
|
+
}
|
|
79
|
+
function G(s) {
|
|
80
|
+
p.value = p.value.filter((e) => e !== s), D.value.delete(s);
|
|
81
|
+
}
|
|
82
|
+
const ue = () => {
|
|
83
|
+
z.value = "";
|
|
84
|
+
}, pe = (s) => {
|
|
85
|
+
const e = {};
|
|
86
|
+
c.tabs.forEach((l) => {
|
|
87
|
+
e[l.key] = [];
|
|
88
|
+
}), U.value = e, C("org-change", s);
|
|
95
89
|
};
|
|
96
90
|
let T = null;
|
|
97
|
-
const
|
|
98
|
-
if (T && clearTimeout(T), !
|
|
99
|
-
|
|
91
|
+
const ve = () => {
|
|
92
|
+
if (T && clearTimeout(T), !z.value.trim()) {
|
|
93
|
+
H();
|
|
100
94
|
return;
|
|
101
95
|
}
|
|
102
|
-
|
|
103
|
-
},
|
|
104
|
-
|
|
105
|
-
const
|
|
106
|
-
|
|
96
|
+
q.value = !0, L.value = !0, T = setTimeout(() => he(), 300);
|
|
97
|
+
}, he = () => {
|
|
98
|
+
R.value = [];
|
|
99
|
+
const s = (e) => {
|
|
100
|
+
R.value = e.map((l) => ({ ...l, isUser: !0 })), L.value = !1;
|
|
107
101
|
};
|
|
108
|
-
C("search", { keyword:
|
|
109
|
-
},
|
|
110
|
-
T && (clearTimeout(T), T = null),
|
|
111
|
-
},
|
|
112
|
-
|
|
113
|
-
e > -1 ? i.value.splice(e, 1) : i.value.push(l.id);
|
|
102
|
+
C("search", { keyword: z.value, orgId: N.value || void 0, callback: s });
|
|
103
|
+
}, H = () => {
|
|
104
|
+
T && (clearTimeout(T), T = null), q.value = !1, z.value = "", R.value = [], L.value = !1;
|
|
105
|
+
}, fe = (s) => {
|
|
106
|
+
p.value.indexOf(s.id) > -1 ? G(s.id) : ee(s.id, { ...s, isUser: !0, typeName: "搜索结果", orgId: N.value });
|
|
114
107
|
};
|
|
115
|
-
function
|
|
116
|
-
const e = [],
|
|
117
|
-
for (const
|
|
118
|
-
e.push(
|
|
108
|
+
function _e(s) {
|
|
109
|
+
const e = [], l = (d) => {
|
|
110
|
+
for (const k of d)
|
|
111
|
+
e.push(k.id), k.children && l(k.children);
|
|
119
112
|
};
|
|
120
|
-
return s
|
|
113
|
+
return l(s), e;
|
|
121
114
|
}
|
|
122
|
-
const
|
|
123
|
-
var
|
|
124
|
-
const
|
|
125
|
-
if (
|
|
126
|
-
const
|
|
127
|
-
if (
|
|
128
|
-
|
|
115
|
+
const me = (s, e) => {
|
|
116
|
+
var i;
|
|
117
|
+
const l = e == null ? void 0 : e.node;
|
|
118
|
+
if (l) {
|
|
119
|
+
const r = l.value ?? ((i = l.data) == null ? void 0 : i.id);
|
|
120
|
+
if (r !== void 0) {
|
|
121
|
+
if (l.checked) {
|
|
122
|
+
const w = c.tabs.find((E) => E.key === b.value), P = w ? w.name.replace(/^按/, "") : "";
|
|
123
|
+
ee(r, { ...l.data, typeName: P, orgId: N.value });
|
|
124
|
+
} else
|
|
125
|
+
G(r);
|
|
129
126
|
return;
|
|
130
127
|
}
|
|
131
128
|
}
|
|
132
|
-
const
|
|
133
|
-
|
|
129
|
+
const d = U.value[b.value] || [], k = _e(d), g = p.value.filter((r) => !k.includes(r));
|
|
130
|
+
p.value = [...g, ...s];
|
|
134
131
|
};
|
|
135
|
-
function
|
|
136
|
-
for (const
|
|
137
|
-
if (
|
|
138
|
-
return
|
|
139
|
-
if (
|
|
132
|
+
function te(s, e, l) {
|
|
133
|
+
for (const d of s) {
|
|
134
|
+
if (d.id === e)
|
|
135
|
+
return d.children = d.children || [], d.children.push(...l), d.loaded = !0, !0;
|
|
136
|
+
if (d.children && te(d.children, e, l))
|
|
140
137
|
return !0;
|
|
141
138
|
}
|
|
142
139
|
return !1;
|
|
143
140
|
}
|
|
144
|
-
async function
|
|
145
|
-
const
|
|
146
|
-
C("load-users", { tabKey: e, nodeId:
|
|
147
|
-
if (
|
|
148
|
-
const
|
|
149
|
-
const { id:
|
|
150
|
-
return { ...
|
|
151
|
-
}),
|
|
152
|
-
if (
|
|
153
|
-
|
|
141
|
+
async function ke(s, e) {
|
|
142
|
+
const l = s.value, d = j.value[e];
|
|
143
|
+
C("load-users", { tabKey: e, nodeId: l, node: s, callback: async (g) => {
|
|
144
|
+
if (g.length > 0) {
|
|
145
|
+
const i = g.map((x) => {
|
|
146
|
+
const { id: w, name: P, ...E } = x;
|
|
147
|
+
return { ...E, id: w, name: x.displayName || P, isUser: !0 };
|
|
148
|
+
}), r = U.value[e];
|
|
149
|
+
if (r && te(r, l, i), d) {
|
|
150
|
+
d.appendTo(l, i), s.data.loaded = !0, await Ue();
|
|
154
151
|
try {
|
|
155
|
-
|
|
152
|
+
d.setItem(l, { expanded: !0 });
|
|
156
153
|
} catch {
|
|
157
154
|
}
|
|
158
155
|
}
|
|
159
156
|
} else {
|
|
160
|
-
|
|
161
|
-
const
|
|
162
|
-
if (
|
|
163
|
-
const
|
|
164
|
-
|
|
157
|
+
s.data.loaded = !0;
|
|
158
|
+
const i = U.value[e];
|
|
159
|
+
if (i) {
|
|
160
|
+
const r = K(i, l);
|
|
161
|
+
r && (r.loaded = !0);
|
|
165
162
|
}
|
|
166
163
|
}
|
|
167
164
|
} });
|
|
168
165
|
}
|
|
169
|
-
const
|
|
170
|
-
|
|
171
|
-
},
|
|
172
|
-
|
|
173
|
-
},
|
|
174
|
-
C("update:modelValue",
|
|
175
|
-
},
|
|
176
|
-
|
|
166
|
+
const ye = (s) => {
|
|
167
|
+
G(s);
|
|
168
|
+
}, se = () => {
|
|
169
|
+
p.value = [], D.value.clear();
|
|
170
|
+
}, ge = () => {
|
|
171
|
+
C("update:modelValue", p.value), C("confirm", O.value), V.value = !1;
|
|
172
|
+
}, Ce = () => {
|
|
173
|
+
V.value = !1;
|
|
177
174
|
};
|
|
178
|
-
return
|
|
179
|
-
clearSelection:
|
|
180
|
-
appendUsers: (
|
|
181
|
-
const
|
|
182
|
-
if (
|
|
183
|
-
const
|
|
184
|
-
const { id:
|
|
185
|
-
return { ...
|
|
175
|
+
return F({
|
|
176
|
+
clearSelection: se,
|
|
177
|
+
appendUsers: (s, e, l) => {
|
|
178
|
+
const d = j.value[s];
|
|
179
|
+
if (d && l.length > 0) {
|
|
180
|
+
const k = l.map((g) => {
|
|
181
|
+
const { id: i, name: r, ...x } = g;
|
|
182
|
+
return { ...x, id: i, name: g.displayName || r, isUser: !0 };
|
|
186
183
|
});
|
|
187
|
-
|
|
184
|
+
d.appendTo(e, k);
|
|
188
185
|
}
|
|
189
186
|
}
|
|
190
|
-
}), (
|
|
191
|
-
const
|
|
192
|
-
return a(),
|
|
193
|
-
visible:
|
|
194
|
-
"onUpdate:visible": e[4] || (e[4] = (t) =>
|
|
187
|
+
}), (s, e) => {
|
|
188
|
+
const l = m("t-icon"), d = m("t-option"), k = m("t-select"), g = m("t-input"), i = m("t-button"), r = m("t-loading"), x = m("t-checkbox"), w = m("t-tree"), P = m("t-tab-panel"), E = m("t-tabs"), be = m("t-dialog");
|
|
189
|
+
return a(), S(be, {
|
|
190
|
+
visible: V.value,
|
|
191
|
+
"onUpdate:visible": e[4] || (e[4] = (t) => V.value = t),
|
|
195
192
|
header: "选择人员",
|
|
196
|
-
width:
|
|
193
|
+
width: ie.value,
|
|
197
194
|
footer: !0,
|
|
198
195
|
placement: "center",
|
|
199
196
|
"destroy-on-close": "",
|
|
200
|
-
onConfirm:
|
|
201
|
-
onClose:
|
|
197
|
+
onConfirm: ge,
|
|
198
|
+
onClose: Ce
|
|
202
199
|
}, {
|
|
203
|
-
default:
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
200
|
+
default: y(() => [
|
|
201
|
+
n("div", xe, [
|
|
202
|
+
Z.value ? (a(), o("div", Se, [
|
|
203
|
+
u(l, { name: "info-circle" }),
|
|
204
|
+
n("span", null, h(Z.value), 1)
|
|
208
205
|
])) : v("", !0),
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
modelValue:
|
|
213
|
-
"onUpdate:modelValue": e[0] || (e[0] = (t) =>
|
|
206
|
+
ce.value ? (a(), o("div", Ie, [
|
|
207
|
+
Y.value.length > 0 ? (a(), o("div", Ve, [
|
|
208
|
+
u(k, {
|
|
209
|
+
modelValue: N.value,
|
|
210
|
+
"onUpdate:modelValue": e[0] || (e[0] = (t) => N.value = t),
|
|
214
211
|
placeholder: "选择组织",
|
|
215
212
|
style: { width: "200px" },
|
|
216
|
-
onChange:
|
|
213
|
+
onChange: pe
|
|
217
214
|
}, {
|
|
218
|
-
default:
|
|
219
|
-
(a(!0),
|
|
215
|
+
default: y(() => [
|
|
216
|
+
(a(!0), o($, null, J(Y.value, (t) => (a(), S(d, {
|
|
220
217
|
key: t.id,
|
|
221
218
|
value: t.id,
|
|
222
219
|
label: t.displayName || t.name
|
|
@@ -225,120 +222,120 @@ const be = { class: "cd-ps-container" }, Ne = {
|
|
|
225
222
|
_: 1
|
|
226
223
|
}, 8, ["modelValue"])
|
|
227
224
|
])) : v("", !0),
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
modelValue:
|
|
231
|
-
"onUpdate:modelValue": e[1] || (e[1] = (t) =>
|
|
232
|
-
placeholder: "
|
|
225
|
+
n("div", ze, [
|
|
226
|
+
u(g, {
|
|
227
|
+
modelValue: z.value,
|
|
228
|
+
"onUpdate:modelValue": e[1] || (e[1] = (t) => z.value = t),
|
|
229
|
+
placeholder: "输入手机号/工号/姓名/部门/职位搜索",
|
|
233
230
|
clearable: "",
|
|
234
|
-
onInput:
|
|
235
|
-
onClear:
|
|
231
|
+
onInput: ve,
|
|
232
|
+
onClear: H
|
|
236
233
|
}, {
|
|
237
|
-
"prefix-icon":
|
|
238
|
-
|
|
234
|
+
"prefix-icon": y(() => [
|
|
235
|
+
u(l, { name: "search" })
|
|
239
236
|
]),
|
|
240
237
|
_: 1
|
|
241
238
|
}, 8, ["modelValue"])
|
|
242
239
|
])
|
|
243
240
|
])) : v("", !0),
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
e[6] || (e[6] =
|
|
249
|
-
|
|
241
|
+
n("div", Te, [
|
|
242
|
+
n("div", we, [
|
|
243
|
+
q.value ? (a(), o("div", Be, [
|
|
244
|
+
n("div", De, [
|
|
245
|
+
e[6] || (e[6] = n("span", null, "搜索结果", -1)),
|
|
246
|
+
u(i, {
|
|
250
247
|
size: "small",
|
|
251
248
|
variant: "text",
|
|
252
|
-
onClick:
|
|
249
|
+
onClick: H
|
|
253
250
|
}, {
|
|
254
|
-
default:
|
|
255
|
-
|
|
251
|
+
default: y(() => [...e[5] || (e[5] = [
|
|
252
|
+
X("返回", -1)
|
|
256
253
|
])]),
|
|
257
254
|
_: 1
|
|
258
255
|
})
|
|
259
256
|
]),
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
e[7] || (e[7] =
|
|
263
|
-
])) :
|
|
264
|
-
|
|
257
|
+
L.value ? (a(), o("div", Re, [
|
|
258
|
+
u(r),
|
|
259
|
+
e[7] || (e[7] = n("span", null, "搜索中...", -1))
|
|
260
|
+
])) : R.value.length === 0 ? (a(), o("div", Oe, [
|
|
261
|
+
u(l, {
|
|
265
262
|
name: "search",
|
|
266
263
|
size: "48px",
|
|
267
264
|
style: { color: "#ddd" }
|
|
268
265
|
}),
|
|
269
|
-
e[8] || (e[8] =
|
|
270
|
-
])) : (a(),
|
|
271
|
-
(a(!0),
|
|
266
|
+
e[8] || (e[8] = n("p", null, "未找到匹配的人员", -1))
|
|
267
|
+
])) : (a(), o("div", Pe, [
|
|
268
|
+
(a(!0), o($, null, J(R.value, (t) => (a(), o("div", {
|
|
272
269
|
key: t.id,
|
|
273
|
-
class:
|
|
274
|
-
onClick: (
|
|
270
|
+
class: A(["cd-ps-result-item", { "cd-ps-selected": p.value.includes(t.id) }]),
|
|
271
|
+
onClick: (W) => fe(t)
|
|
275
272
|
}, [
|
|
276
|
-
|
|
277
|
-
checked:
|
|
278
|
-
onClick: e[2] || (e[2] =
|
|
273
|
+
u(x, {
|
|
274
|
+
checked: p.value.includes(t.id),
|
|
275
|
+
onClick: e[2] || (e[2] = oe(() => {
|
|
279
276
|
}, ["stop"]))
|
|
280
277
|
}, null, 8, ["checked"]),
|
|
281
|
-
|
|
282
|
-
|
|
278
|
+
n("div", Me, [
|
|
279
|
+
u(l, { name: "user" })
|
|
283
280
|
]),
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
t.position ? (a(),
|
|
288
|
-
t.department ? (a(),
|
|
289
|
-
t.phone ? (a(),
|
|
281
|
+
n("div", Le, [
|
|
282
|
+
n("div", We, h(t.displayName || t.name), 1),
|
|
283
|
+
n("div", $e, [
|
|
284
|
+
t.position ? (a(), o("span", Je, h(t.position), 1)) : v("", !0),
|
|
285
|
+
t.department ? (a(), o("span", Ae, h(t.department), 1)) : v("", !0),
|
|
286
|
+
t.phone ? (a(), o("span", Fe, h(t.phone), 1)) : v("", !0)
|
|
290
287
|
])
|
|
291
288
|
])
|
|
292
|
-
], 10,
|
|
289
|
+
], 10, Ee))), 128))
|
|
293
290
|
]))
|
|
294
|
-
])) : (a(),
|
|
291
|
+
])) : (a(), S(E, {
|
|
295
292
|
key: 1,
|
|
296
|
-
modelValue:
|
|
297
|
-
"onUpdate:modelValue": e[3] || (e[3] = (t) =>
|
|
298
|
-
onChange:
|
|
293
|
+
modelValue: b.value,
|
|
294
|
+
"onUpdate:modelValue": e[3] || (e[3] = (t) => b.value = t),
|
|
295
|
+
onChange: ue
|
|
299
296
|
}, {
|
|
300
|
-
default:
|
|
301
|
-
(a(!0),
|
|
297
|
+
default: y(() => [
|
|
298
|
+
(a(!0), o($, null, J(de.value, (t) => (a(), S(P, {
|
|
302
299
|
key: t.key,
|
|
303
300
|
value: t.key,
|
|
304
301
|
label: t.name
|
|
305
302
|
}, {
|
|
306
|
-
default:
|
|
307
|
-
var
|
|
303
|
+
default: y(() => {
|
|
304
|
+
var W;
|
|
308
305
|
return [
|
|
309
|
-
|
|
310
|
-
((
|
|
306
|
+
n("div", je, [
|
|
307
|
+
((W = U.value[t.key]) == null ? void 0 : W.length) > 0 ? (a(), S(w, {
|
|
311
308
|
key: 0,
|
|
312
309
|
ref_for: !0,
|
|
313
|
-
ref: (
|
|
314
|
-
data:
|
|
310
|
+
ref: (f) => re(t.key, f),
|
|
311
|
+
data: U.value[t.key],
|
|
315
312
|
keys: { value: "id", label: "name", children: "children" },
|
|
316
313
|
hover: "",
|
|
317
314
|
checkable: "",
|
|
318
315
|
"expand-all": !1,
|
|
319
|
-
value:
|
|
320
|
-
onChange:
|
|
316
|
+
value: p.value,
|
|
317
|
+
onChange: me
|
|
321
318
|
}, {
|
|
322
|
-
label:
|
|
323
|
-
var
|
|
319
|
+
label: y(({ node: f }) => {
|
|
320
|
+
var ne;
|
|
324
321
|
return [
|
|
325
|
-
|
|
326
|
-
class:
|
|
322
|
+
n("div", {
|
|
323
|
+
class: A(["cd-ps-node", { "cd-ps-node-user": f.data.isUser }])
|
|
327
324
|
}, [
|
|
328
|
-
|
|
329
|
-
name:
|
|
325
|
+
u(l, {
|
|
326
|
+
name: f.data.isUser ? "user" : t.icon || "folder"
|
|
330
327
|
}, null, 8, ["name"]),
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
!
|
|
328
|
+
n("span", null, h(f.label), 1),
|
|
329
|
+
f.data.userCount && !f.data.isUser ? (a(), o("span", qe, "(" + h(f.data.userCount) + ")", 1)) : v("", !0),
|
|
330
|
+
!f.data.isUser && !((ne = f.data.children) != null && ne.length) && !f.data.loaded ? (a(), S(i, {
|
|
334
331
|
key: 1,
|
|
335
332
|
size: "small",
|
|
336
333
|
variant: "text",
|
|
337
334
|
class: "cd-ps-load-btn",
|
|
338
|
-
onClick:
|
|
335
|
+
onClick: oe((ut) => ke(f, t.key), ["stop"])
|
|
339
336
|
}, {
|
|
340
|
-
default:
|
|
341
|
-
|
|
337
|
+
default: y(() => [...e[9] || (e[9] = [
|
|
338
|
+
X("显示人员", -1)
|
|
342
339
|
])]),
|
|
343
340
|
_: 1
|
|
344
341
|
}, 8, ["onClick"])) : v("", !0)
|
|
@@ -346,13 +343,13 @@ const be = { class: "cd-ps-container" }, Ne = {
|
|
|
346
343
|
];
|
|
347
344
|
}),
|
|
348
345
|
_: 2
|
|
349
|
-
}, 1032, ["data", "value"])) : (a(),
|
|
350
|
-
|
|
346
|
+
}, 1032, ["data", "value"])) : (a(), o("div", Ge, [
|
|
347
|
+
u(l, {
|
|
351
348
|
name: t.icon || "folder-open",
|
|
352
349
|
size: "48px",
|
|
353
350
|
style: { color: "#ddd" }
|
|
354
351
|
}, null, 8, ["name"]),
|
|
355
|
-
e[10] || (e[10] =
|
|
352
|
+
e[10] || (e[10] = n("p", null, "暂无数据", -1))
|
|
356
353
|
]))
|
|
357
354
|
])
|
|
358
355
|
];
|
|
@@ -363,61 +360,61 @@ const be = { class: "cd-ps-container" }, Ne = {
|
|
|
363
360
|
_: 1
|
|
364
361
|
}, 8, ["modelValue"]))
|
|
365
362
|
]),
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
e[12] || (e[12] =
|
|
369
|
-
|
|
370
|
-
|
|
363
|
+
n("div", He, [
|
|
364
|
+
n("div", Qe, [
|
|
365
|
+
e[12] || (e[12] = n("span", { class: "cd-ps-title" }, "已选择", -1)),
|
|
366
|
+
n("span", Xe, h(O.value.length) + " 项", 1),
|
|
367
|
+
O.value.length > 0 ? (a(), S(i, {
|
|
371
368
|
key: 0,
|
|
372
369
|
size: "small",
|
|
373
370
|
variant: "text",
|
|
374
|
-
onClick:
|
|
371
|
+
onClick: se
|
|
375
372
|
}, {
|
|
376
|
-
default:
|
|
377
|
-
|
|
373
|
+
default: y(() => [...e[11] || (e[11] = [
|
|
374
|
+
X("清空", -1)
|
|
378
375
|
])]),
|
|
379
376
|
_: 1
|
|
380
377
|
})) : v("", !0)
|
|
381
378
|
]),
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
379
|
+
n("div", Ye, [
|
|
380
|
+
O.value.length === 0 ? (a(), o("div", Ze, [
|
|
381
|
+
u(l, {
|
|
385
382
|
name: "user-checked",
|
|
386
383
|
size: "64px",
|
|
387
384
|
style: { color: "#ddd" }
|
|
388
385
|
}),
|
|
389
|
-
e[13] || (e[13] =
|
|
390
|
-
])) : (a(),
|
|
391
|
-
(a(!0),
|
|
386
|
+
e[13] || (e[13] = n("p", null, "暂无选择", -1))
|
|
387
|
+
])) : (a(), o("div", Ke, [
|
|
388
|
+
(a(!0), o($, null, J(O.value, (t) => (a(), o("div", {
|
|
392
389
|
key: t.id,
|
|
393
|
-
class:
|
|
390
|
+
class: A(["cd-ps-selected-item", { "cd-ps-dept-item": !t.isUser }])
|
|
394
391
|
}, [
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
class:
|
|
392
|
+
n("div", et, [
|
|
393
|
+
n("div", {
|
|
394
|
+
class: A(["cd-ps-avatar", { "cd-ps-avatar-dept": !t.isUser }])
|
|
398
395
|
}, [
|
|
399
|
-
|
|
396
|
+
u(l, {
|
|
400
397
|
name: t.isUser ? "user" : "folder"
|
|
401
398
|
}, null, 8, ["name"])
|
|
402
399
|
], 2),
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
t.isUser && t.position ? (a(),
|
|
407
|
-
t.isUser && t.department ? (a(),
|
|
408
|
-
t.isUser ? v("", !0) : (a(),
|
|
409
|
-
!t.isUser && t.userCount ? (a(),
|
|
400
|
+
n("div", tt, [
|
|
401
|
+
n("div", st, h(t.displayName || t.name), 1),
|
|
402
|
+
n("div", lt, [
|
|
403
|
+
t.isUser && t.position ? (a(), o("span", at, h(t.position), 1)) : v("", !0),
|
|
404
|
+
t.isUser && t.department ? (a(), o("span", nt, h(t.department), 1)) : v("", !0),
|
|
405
|
+
t.isUser ? v("", !0) : (a(), o("span", ot, h(t.typeName || "部门"), 1)),
|
|
406
|
+
!t.isUser && t.userCount ? (a(), o("span", dt, h(t.userCount) + "人", 1)) : v("", !0)
|
|
410
407
|
])
|
|
411
408
|
])
|
|
412
409
|
]),
|
|
413
|
-
|
|
410
|
+
u(i, {
|
|
414
411
|
size: "small",
|
|
415
412
|
variant: "text",
|
|
416
413
|
shape: "circle",
|
|
417
|
-
onClick: (
|
|
414
|
+
onClick: (W) => ye(t.id)
|
|
418
415
|
}, {
|
|
419
|
-
icon:
|
|
420
|
-
|
|
416
|
+
icon: y(() => [
|
|
417
|
+
u(l, { name: "close" })
|
|
421
418
|
]),
|
|
422
419
|
_: 1
|
|
423
420
|
}, 8, ["onClick"])
|
|
@@ -432,17 +429,17 @@ const be = { class: "cd-ps-container" }, Ne = {
|
|
|
432
429
|
}, 8, ["visible", "width"]);
|
|
433
430
|
};
|
|
434
431
|
}
|
|
435
|
-
}),
|
|
436
|
-
const
|
|
437
|
-
for (const [
|
|
438
|
-
|
|
439
|
-
return
|
|
440
|
-
},
|
|
441
|
-
install(
|
|
442
|
-
|
|
432
|
+
}), it = (I, F) => {
|
|
433
|
+
const M = I.__vccOpts || I;
|
|
434
|
+
for (const [c, C] of F)
|
|
435
|
+
M[c] = C;
|
|
436
|
+
return M;
|
|
437
|
+
}, rt = /* @__PURE__ */ it(ct, [["__scopeId", "data-v-0a6760cf"]]), vt = {
|
|
438
|
+
install(I) {
|
|
439
|
+
I.component("PersonSelector", rt);
|
|
443
440
|
}
|
|
444
441
|
};
|
|
445
442
|
export {
|
|
446
|
-
|
|
447
|
-
|
|
443
|
+
rt as PersonSelector,
|
|
444
|
+
vt as default
|
|
448
445
|
};
|
|
@@ -64,6 +64,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
64
64
|
orgId?: number | string;
|
|
65
65
|
callback: (users: User[]) => void;
|
|
66
66
|
}) => void;
|
|
67
|
+
"org-change": (orgId: string | number) => void;
|
|
67
68
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
68
69
|
visible: boolean;
|
|
69
70
|
tabs: () => never[];
|
|
@@ -87,6 +88,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
87
88
|
orgId?: number | string;
|
|
88
89
|
callback: (users: User[]) => void;
|
|
89
90
|
}) => any) | undefined;
|
|
91
|
+
"onOrg-change"?: ((orgId: string | number) => any) | undefined;
|
|
90
92
|
}>, {
|
|
91
93
|
visible: boolean;
|
|
92
94
|
tabs: TabConfig[];
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.cd-ps-container[data-v-
|
|
1
|
+
.cd-ps-container[data-v-0a6760cf]{display:flex;flex-direction:column;gap:16px;min-height:500px}.cd-ps-tips[data-v-0a6760cf]{display:flex;align-items:center;gap:8px;padding:12px;background-color:#e8f4ff;border-radius:4px;font-size:13px;color:#0052d9}.cd-ps-search[data-v-0a6760cf]{display:flex;gap:12px;align-items:center}.cd-ps-org-select[data-v-0a6760cf]{flex-shrink:0}.cd-ps-search-input[data-v-0a6760cf]{flex:1}.cd-ps-content[data-v-0a6760cf]{display:flex;gap:0;height:450px;border:1px solid #dfe1e6;border-radius:4px;overflow:hidden}.cd-ps-left[data-v-0a6760cf]{width:480px;flex-shrink:0;border-right:1px solid #dfe1e6;display:flex;flex-direction:column;background-color:#fafafa}.cd-ps-left[data-v-0a6760cf] .t-tabs__nav-container{padding:0 8px;background-color:#fff}.cd-ps-left[data-v-0a6760cf] .t-tabs__content{flex:1;overflow:hidden}.cd-ps-tree[data-v-0a6760cf]{height:100%;overflow-y:auto;padding:8px}.cd-ps-tree[data-v-0a6760cf]::-webkit-scrollbar{width:6px}.cd-ps-tree[data-v-0a6760cf]::-webkit-scrollbar-track{background:#f1f1f1}.cd-ps-tree[data-v-0a6760cf]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.cd-ps-node[data-v-0a6760cf]{display:flex;align-items:center;gap:6px;font-size:14px;width:100%}[data-v-0a6760cf] .t-tree__label{flex:1}[data-v-0a6760cf] .t-checkbox__label{width:100%}.cd-ps-node-user[data-v-0a6760cf]{font-size:13px;color:#666}.cd-ps-count[data-v-0a6760cf]{color:#999;font-size:12px}.cd-ps-load-btn[data-v-0a6760cf]{margin-left:auto;color:#0052d9;font-size:12px;flex-shrink:0}.cd-ps-empty[data-v-0a6760cf]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#999}.cd-ps-empty p[data-v-0a6760cf]{margin-top:16px;font-size:14px}.cd-ps-search-results[data-v-0a6760cf]{display:flex;flex-direction:column;height:100%}.cd-ps-search-header[data-v-0a6760cf]{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #dfe1e6;font-weight:500}.cd-ps-loading[data-v-0a6760cf]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px;color:#999}.cd-ps-result-list[data-v-0a6760cf]{flex:1;overflow-y:auto;padding:8px}.cd-ps-result-item[data-v-0a6760cf]{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-radius:4px;border:1px solid #e5e7eb;margin-bottom:8px;cursor:pointer;transition:all .2s}.cd-ps-result-item[data-v-0a6760cf]:hover{border-color:#0052d9;background:#f0f5ff}.cd-ps-result-item.cd-ps-selected[data-v-0a6760cf]{border-color:#0052d9;background:#e8f4ff}.cd-ps-avatar[data-v-0a6760cf]{width:32px;height:32px;border-radius:50%;background:#667eea;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}.cd-ps-result-item .cd-ps-avatar[data-v-0a6760cf]{width:36px;height:36px}.cd-ps-avatar-dept[data-v-0a6760cf]{background:linear-gradient(135deg,#f5af19,#f12711)}.cd-ps-info[data-v-0a6760cf]{flex:1;min-width:0}.cd-ps-name[data-v-0a6760cf]{font-size:13px;font-weight:500;color:#333;margin-bottom:4px}.cd-ps-result-item .cd-ps-name[data-v-0a6760cf]{font-size:14px}.cd-ps-meta[data-v-0a6760cf]{display:flex;flex-wrap:wrap;gap:6px;font-size:11px;color:#999}.cd-ps-result-item .cd-ps-meta[data-v-0a6760cf]{font-size:12px}.cd-ps-meta span[data-v-0a6760cf]:before{content:"•";margin-right:4px}.cd-ps-meta span[data-v-0a6760cf]:first-child:before{display:none}.cd-ps-right[data-v-0a6760cf]{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:#fafafa}.cd-ps-right-header[data-v-0a6760cf]{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #dfe1e6;background-color:#fff}.cd-ps-title[data-v-0a6760cf]{font-weight:500;font-size:14px;color:#333}.cd-ps-num[data-v-0a6760cf]{font-size:13px;color:#0052d9;font-weight:600;margin-left:8px;flex:1}.cd-ps-right-list[data-v-0a6760cf]{flex:1;overflow-y:auto;padding:8px}.cd-ps-right-list[data-v-0a6760cf]::-webkit-scrollbar{width:6px}.cd-ps-right-list[data-v-0a6760cf]::-webkit-scrollbar-track{background:#f1f1f1}.cd-ps-right-list[data-v-0a6760cf]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.cd-ps-selected-list[data-v-0a6760cf]{display:flex;flex-direction:column;gap:8px}.cd-ps-selected-item[data-v-0a6760cf]{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#fff;border-radius:4px;border:1px solid #e5e7eb;transition:all .2s}.cd-ps-selected-item[data-v-0a6760cf]:hover{border-color:#0052d9;box-shadow:0 2px 4px #0052d91a}.cd-ps-dept-item[data-v-0a6760cf]{border-color:#f5af19}.cd-ps-item-info[data-v-0a6760cf]{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
|
package/package.json
CHANGED
package/src/PersonSelector.vue
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
</t-select>
|
|
22
22
|
</div>
|
|
23
23
|
<div class="cd-ps-search-input">
|
|
24
|
-
<t-input v-model="searchKeyword" placeholder="
|
|
24
|
+
<t-input v-model="searchKeyword" placeholder="输入手机号/工号/姓名/部门/职位搜索" clearable @input="handleSearchInput" @clear="clearSearch">
|
|
25
25
|
<template #prefix-icon><t-icon name="search" /></template>
|
|
26
26
|
</t-input>
|
|
27
27
|
</div>
|
|
@@ -174,12 +174,14 @@ const emit = defineEmits<{
|
|
|
174
174
|
'confirm': [items: any[]];
|
|
175
175
|
'load-users': [params: { tabKey: string; nodeId: number | string; node: any; callback: (users: User[]) => void }];
|
|
176
176
|
'search': [params: { keyword: string; orgId?: number | string; callback: (users: User[]) => void }];
|
|
177
|
+
'org-change': [orgId: number | string];
|
|
177
178
|
}>();
|
|
178
179
|
const dialogVisible = ref(props.visible);
|
|
179
180
|
const activeTab = ref(props.tabs?.[0]?.key || '');
|
|
180
181
|
const selectedOrgId = ref<number | string | null>(null);
|
|
181
182
|
const searchKeyword = ref('');
|
|
182
183
|
const selectedIds = ref<(number | string)[]>([]);
|
|
184
|
+
const selectedItemsMap = ref<Map<number | string, any>>(new Map()); // 缓存已选中项的完整信息
|
|
183
185
|
const treeRefs = ref<Record<string, any>>({});
|
|
184
186
|
const isSearchMode = ref(false);
|
|
185
187
|
const searchLoading = ref(false);
|
|
@@ -204,6 +206,8 @@ watch(() => props.visible, (newVal) => {
|
|
|
204
206
|
dialogVisible.value = newVal;
|
|
205
207
|
if (newVal) {
|
|
206
208
|
selectedIds.value = props.modelValue ? [...props.modelValue] : [];
|
|
209
|
+
// 清空缓存,重新初始化
|
|
210
|
+
selectedItemsMap.value.clear();
|
|
207
211
|
if (props.organizations.length > 0 && !selectedOrgId.value) {
|
|
208
212
|
selectedOrgId.value = props.organizations[0].id;
|
|
209
213
|
}
|
|
@@ -219,25 +223,31 @@ function findNodeById(tree: TreeNode[], id: number | string): TreeNode | null {
|
|
|
219
223
|
return null;
|
|
220
224
|
}
|
|
221
225
|
const selectedItems = computed(() => {
|
|
222
|
-
|
|
223
|
-
selectedIds.value.forEach(id => {
|
|
224
|
-
const searchUser = searchResults.value.find(u => u.id === id);
|
|
225
|
-
if (searchUser) { items.push({ ...searchUser, typeName: '搜索结果' }); return; }
|
|
226
|
-
for (const tab of props.tabs) {
|
|
227
|
-
const treeData = internalTreeData.value[tab.key] || [];
|
|
228
|
-
const node = findNodeById(treeData, id);
|
|
229
|
-
if (node) {
|
|
230
|
-
// 去掉 tab.name 开头的"按"字
|
|
231
|
-
const typeName = tab.name.replace(/^按/, '');
|
|
232
|
-
items.push({ ...node, typeName });
|
|
233
|
-
break;
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
});
|
|
237
|
-
return items;
|
|
226
|
+
return selectedIds.value.map(id => selectedItemsMap.value.get(id)).filter(Boolean);
|
|
238
227
|
});
|
|
228
|
+
|
|
229
|
+
// 添加选中项到缓存
|
|
230
|
+
function addSelectedItem(id: number | string, item: any) {
|
|
231
|
+
if (!selectedIds.value.includes(id)) {
|
|
232
|
+
selectedIds.value.push(id);
|
|
233
|
+
}
|
|
234
|
+
selectedItemsMap.value.set(id, item);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// 从缓存移除选中项
|
|
238
|
+
function removeSelectedItem(id: number | string) {
|
|
239
|
+
selectedIds.value = selectedIds.value.filter(i => i !== id);
|
|
240
|
+
selectedItemsMap.value.delete(id);
|
|
241
|
+
}
|
|
239
242
|
const handleTabChange = () => { searchKeyword.value = ''; };
|
|
240
|
-
const handleOrgChange = () => {
|
|
243
|
+
const handleOrgChange = (orgId: number | string) => {
|
|
244
|
+
// 清空左侧树数据,等待父组件重新传入
|
|
245
|
+
const newData: Record<string, TreeNode[]> = {};
|
|
246
|
+
props.tabs.forEach((tab) => { newData[tab.key] = []; });
|
|
247
|
+
internalTreeData.value = newData;
|
|
248
|
+
// 触发事件,让父组件重新加载数据
|
|
249
|
+
emit('org-change', orgId);
|
|
250
|
+
};
|
|
241
251
|
let searchTimer: ReturnType<typeof setTimeout> | null = null;
|
|
242
252
|
const handleSearchInput = () => {
|
|
243
253
|
if (searchTimer) clearTimeout(searchTimer);
|
|
@@ -263,8 +273,11 @@ const clearSearch = () => {
|
|
|
263
273
|
};
|
|
264
274
|
const toggleSearchResultSelect = (user: User) => {
|
|
265
275
|
const idx = selectedIds.value.indexOf(user.id);
|
|
266
|
-
if (idx > -1)
|
|
267
|
-
|
|
276
|
+
if (idx > -1) {
|
|
277
|
+
removeSelectedItem(user.id);
|
|
278
|
+
} else {
|
|
279
|
+
addSelectedItem(user.id, { ...user, isUser: true, typeName: '搜索结果', orgId: selectedOrgId.value });
|
|
280
|
+
}
|
|
268
281
|
};
|
|
269
282
|
function getAllNodeIds(tree: TreeNode[]): (number | string)[] {
|
|
270
283
|
const ids: (number | string)[] = [];
|
|
@@ -279,14 +292,14 @@ const handleTreeCheck = (checkedIds: (number | string)[], context: any) => {
|
|
|
279
292
|
if (node) {
|
|
280
293
|
const nodeId = node.value ?? node.data?.id;
|
|
281
294
|
if (nodeId !== undefined) {
|
|
282
|
-
// 检查节点当前是否被选中(通过 node.checked 属性)
|
|
283
295
|
const isChecked = node.checked;
|
|
284
296
|
if (isChecked) {
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
297
|
+
// 获取当前 tab 信息
|
|
298
|
+
const currentTab = props.tabs.find(t => t.key === activeTab.value);
|
|
299
|
+
const typeName = currentTab ? currentTab.name.replace(/^按/, '') : '';
|
|
300
|
+
addSelectedItem(nodeId, { ...node.data, typeName, orgId: selectedOrgId.value });
|
|
288
301
|
} else {
|
|
289
|
-
|
|
302
|
+
removeSelectedItem(nodeId);
|
|
290
303
|
}
|
|
291
304
|
return;
|
|
292
305
|
}
|
|
@@ -345,8 +358,8 @@ async function handleLoadUsers(node: any, tabKey: string) {
|
|
|
345
358
|
};
|
|
346
359
|
emit('load-users', { tabKey, nodeId, node, callback });
|
|
347
360
|
}
|
|
348
|
-
const handleRemoveItem = (id: number | string) => {
|
|
349
|
-
const clearSelection = () => { selectedIds.value = []; };
|
|
361
|
+
const handleRemoveItem = (id: number | string) => { removeSelectedItem(id); };
|
|
362
|
+
const clearSelection = () => { selectedIds.value = []; selectedItemsMap.value.clear(); };
|
|
350
363
|
const handleConfirm = () => {
|
|
351
364
|
emit('update:modelValue', selectedIds.value);
|
|
352
365
|
emit('confirm', selectedItems.value);
|