cd-personselector 1.0.9 → 1.1.0
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/dist/index.js +1 -1
- package/dist/index.mjs +250 -240
- package/dist/src/PersonSelector.vue.d.ts +4 -0
- package/dist/style.css +1 -1
- package/package.json +47 -48
- package/src/PersonSelector.vue +38 -22
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 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"},he={key:0,class:"cd-ps-count"},ke={key:1,class:"cd-ps-empty"},_e={class:"cd-ps-right"},ye={class:"cd-ps-right-header"},Ve={class:"cd-ps-num"},Ne={class:"cd-ps-right-list"},ue={key:0,class:"cd-ps-empty"},ge={key:1,class:"cd-ps-selected-list"},Ce={class:"cd-ps-item-info"},Be={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=((u,T)=>{const U=u.__vccOpts||u;for(const[s,h]of T)U[s]=h;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(u,{expose:T,emit:U}){var q,A;const s=u,h=U,g=e.ref(s.visible),_=e.ref(((A=(q=s.tabs)==null?void 0:q[0])==null?void 0:A.key)||""),y=e.ref(null),C=e.ref(""),c=e.ref([]),k=e.ref(new Map),z=e.ref({}),P=e.ref(!1),I=e.ref(!1),S=e.ref([]),De=e.computed(()=>s.tabs||[]),L=e.computed(()=>s.organizations||[]),F=e.computed(()=>s.tips||""),Te=e.computed(()=>s.showSearch),ze=e.computed(()=>s.dialogWidth),V=e.ref({});e.watch(()=>s.tabs,n=>{if(n&&n.length>0){const t={};n.forEach(l=>{t[l.key]=JSON.parse(JSON.stringify(l.tree))}),V.value=t,(!_.value||!n.find(l=>l.key===_.value))&&(_.value=n[0].key)}},{immediate:!0,deep:!0}),e.watch(()=>s.visible,n=>{if(g.value=n,n){if(s.modelValue&&s.modelValue.length>0){const t=s.modelValue[0];typeof t=="object"&&t!==null&&"id"in t?(c.value=s.modelValue.map(l=>l.id),k.value.clear(),s.modelValue.forEach(l=>{k.value.set(l.id,l)})):(c.value=[...s.modelValue],k.value.clear())}else c.value=[],k.value.clear();s.organizations.length>0&&!y.value&&(y.value=s.organizations[0].id)}}),e.watch(g,n=>{h("update:visible",n)});function Pe(n,t){t&&(z.value[n]=t)}function j(n,t){for(const l of n){if(l.id===t)return l;if(l.children){const a=j(l.children,t);if(a)return a}}return null}const x=e.computed(()=>c.value.map(n=>k.value.get(n)).filter(Boolean));function W(n,t){c.value.includes(n)||c.value.push(n),k.value.set(n,t)}function M(n){c.value=c.value.filter(t=>t!==n),k.value.delete(n)}const Me=()=>{C.value=""},Oe=n=>{const t={};s.tabs.forEach(l=>{t[l.key]=[]}),V.value=t,h("org-change",n)};let B=null;const Re=()=>{if(B&&clearTimeout(B),!C.value.trim()){O();return}P.value=!0,I.value=!0,B=setTimeout(()=>Le(),300)},Le=()=>{S.value=[];const n=t=>{S.value=t.map(l=>({...l,isUser:!0})),I.value=!1};h("search",{keyword:C.value,orgId:y.value||void 0,callback:n})},O=()=>{B&&(clearTimeout(B),B=null),P.value=!1,C.value="",S.value=[],I.value=!1},Fe=n=>{c.value.indexOf(n.id)>-1?M(n.id):W(n.id,{...n,isUser:!0,typeName:"搜索结果",orgId:y.value})};function je(n){const t=[],l=a=>{for(const p of a)t.push(p.id),p.children&&l(p.children)};return l(n),t}const We=(n,t)=>{var d;const l=t==null?void 0:t.node;if(l){const r=l.value??((d=l.data)==null?void 0:d.id);if(r!==void 0){if(l.checked){const E=s.tabs.find(w=>w.key===_.value),b=E?E.name.replace(/^按/,""):"";W(r,{...l.data,typeName:b,orgId:y.value})}else M(r);return}}const a=V.value[_.value]||[],p=je(a),m=c.value.filter(r=>!p.includes(r));c.value=[...m,...n]};function $(n,t,l){for(const a of n){if(a.id===t)return a.children=a.children||[],a.children.push(...l),a.loaded=!0,!0;if(a.children&&$(a.children,t,l))return!0}return!1}async function $e(n,t){const l=n.value,a=z.value[t];h("load-users",{tabKey:t,nodeId:l,node:n,callback:async m=>{if(m.length>0){const d=m.map(N=>{const{id:E,name:b,...w}=N;return{...w,id:E,name:N.displayName||b,isUser:!0}}),r=V.value[t];if(r&&$(r,l,d),a){a.appendTo(l,d),n.data.loaded=!0,await e.nextTick();try{a.setItem(l,{expanded:!0})}catch{}}}else{n.data.loaded=!0;const d=V.value[t];if(d){const r=j(d,l);r&&(r.loaded=!0)}}}})}const Je=n=>{M(n)},J=()=>{c.value=[],k.value.clear()},qe=()=>{h("update:modelValue",c.value),h("confirm",x.value),g.value=!1},Ae=()=>{g.value=!1};return T({clearSelection:J,appendUsers:(n,t,l)=>{const a=z.value[n];if(a&&l.length>0){const p=l.map(m=>{const{id:d,name:r,...N}=m;return{...N,id:d,name:m.displayName||r,isUser:!0}});a.appendTo(t,p)}}}),(n,t)=>{const l=e.resolveComponent("t-icon"),a=e.resolveComponent("t-option"),p=e.resolveComponent("t-select"),m=e.resolveComponent("t-input"),d=e.resolveComponent("t-button"),r=e.resolveComponent("t-loading"),N=e.resolveComponent("t-checkbox"),E=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(l,{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:y.value,"onUpdate:modelValue":t[0]||(t[0]=o=>y.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(l,{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(d,{size:"small",variant:"text",onClick:O},{default:e.withCtx(()=>[...t[5]||(t[5]=[e.createTextVNode("返回",-1)])]),_:1})]),I.value?(e.openBlock(),e.createElementBlock("div",oe,[e.createVNode(r),t[7]||(t[7]=e.createElementVNode("span",null,"搜索中...",-1))])):S.value.length===0?(e.openBlock(),e.createElementBlock("div",le,[e.createVNode(l,{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":c.value.includes(o.id)}]),onClick:D=>Fe(o)},[e.createVNode(N,{checked:c.value.includes(o.id),onClick:t[2]||(t[2]=e.withModifiers(()=>{},["stop"]))},null,8,["checked"]),e.createElementVNode("div",se,[e.createVNode(l,{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:_.value,"onUpdate:modelValue":t[3]||(t[3]=o=>_.value=o),onChange:Me},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(De.value,o=>(e.openBlock(),e.createBlock(b,{key:o.key,value:o.key,label:o.name},{default:e.withCtx(()=>{var D;return[e.createElementVNode("div",fe,[((D=V.value[o.key])==null?void 0:D.length)>0?(e.openBlock(),e.createBlock(E,{key:0,ref_for:!0,ref:i=>Pe(o.key,i),data:V.value[o.key],keys:{value:"id",label:"name",children:"children"},hover:"",checkable:"","expand-all":!1,value:c.value,onChange:We},{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(l,{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",he,"("+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(d,{key:1,size:"small",variant:"text",class:"cd-ps-load-btn",onClick:e.withModifiers(Xe=>$e(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",ke,[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",_e,[e.createElementVNode("div",ye,[t[12]||(t[12]=e.createElementVNode("span",{class:"cd-ps-title"},"已选择",-1)),e.createElementVNode("span",Ve,e.toDisplayString(x.value.length)+" 项",1),x.value.length>0?(e.openBlock(),e.createBlock(d,{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",Ne,[x.value.length===0?(e.openBlock(),e.createElementBlock("div",ue,[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",ge,[(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",Ce,[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",Be,[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(d,{size:"small",variant:"text",shape:"circle",onClick:D=>Je(o.id)},{icon:e.withCtx(()=>[e.createVNode(l,{name:"close"})]),_:1},8,["onClick"])],2))),128))]))])])])])]),_:1},8,["visible","width"])}}}),[["__scopeId","data-v-e9913ad1"]]),Ie={install(u){u.component("PersonSelector",R)}};f.PersonSelector=R,f.default=Ie,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 Q={class:"cd-ps-container"},X={key:0,class:"cd-ps-tips"},Y={key:1,class:"cd-ps-search"},Z={key:0,class:"cd-ps-org-select"},K={class:"cd-ps-search-input"},v={class:"cd-ps-content"},ee={class:"cd-ps-left"},te={key:0,class:"cd-ps-search-results"},oe={class:"cd-ps-search-header"},le={key:0,class:"cd-ps-loading"},ne={key:1,class:"cd-ps-empty"},ae={key:2,class:"cd-ps-result-list"},se=["onClick"],ce={class:"cd-ps-avatar"},de={class:"cd-ps-info"},re={class:"cd-ps-name"},ie={class:"cd-ps-meta"},pe={key:0},me={key:1},fe={key:2},he={class:"cd-ps-tree"},ke={class:"cd-ps-node-name"},_e={key:0,class:"cd-ps-position"},ye={key:0,class:"cd-ps-count"},Ve={key:1,class:"cd-ps-empty"},Ne={class:"cd-ps-right"},ue={class:"cd-ps-right-header"},ge={class:"cd-ps-num"},Be={class:"cd-ps-right-list"},Ce={key:0,class:"cd-ps-empty"},Ee={key:1,class:"cd-ps-selected-list"},Se={class:"cd-ps-item-info"},xe={class:"cd-ps-info"},be={class:"cd-ps-name"},we={class:"cd-ps-meta"},Ue={key:0},De={key:1},Ie={key:2},Te={key:3},R=((g,T)=>{const U=g.__vccOpts||g;for(const[a,h]of T)U[a]=h;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},showOrg:{type:Boolean,default:!0}},emits:["update:visible","update:modelValue","confirm","load-users","search","org-change"],setup(g,{expose:T,emit:U}){var A,G;const a=g,h=U,k=e.ref(a.visible),_=e.ref(((G=(A=a.tabs)==null?void 0:A[0])==null?void 0:G.key)||""),y=e.ref(null),B=e.ref(""),c=e.ref([]),V=e.ref(new Map),z=e.ref({}),O=e.ref(!1),D=e.ref(!1),S=e.ref([]),Oe=e.computed(()=>a.tabs||[]),L=e.computed(()=>a.organizations||[]),F=e.computed(()=>a.tips||""),Me=e.computed(()=>a.showSearch),Pe=e.computed(()=>a.showOrg),Re=e.computed(()=>a.dialogWidth),N=e.ref({});e.watch(()=>a.tabs,o=>{if(o&&o.length>0){const t={};o.forEach(n=>{t[n.key]=JSON.parse(JSON.stringify(n.tree))}),N.value=t,(!_.value||!o.find(n=>n.key===_.value))&&(_.value=o[0].key)}},{immediate:!0,deep:!0});function j(){if(a.modelValue&&a.modelValue.length>0){const o=a.modelValue[0];typeof o=="object"&&o!==null&&"id"in o?(c.value=a.modelValue.map(t=>t.id),V.value.clear(),a.modelValue.forEach(t=>{V.value.set(t.id,t)})):c.value=[...a.modelValue]}else c.value=[],V.value.clear()}e.watch(()=>a.modelValue,o=>{k.value&&o&&j()},{deep:!0}),e.watch(()=>a.visible,o=>{k.value=o,o&&(j(),a.organizations.length>0&&!y.value&&(y.value=a.organizations[0].id))}),e.watch(k,o=>{h("update:visible",o)});function Le(o,t){t&&(z.value[o]=t)}function W(o,t){for(const n of o){if(n.id===t)return n;if(n.children){const s=W(n.children,t);if(s)return s}}return null}const x=e.computed(()=>c.value.map(o=>V.value.get(o)).filter(Boolean));function $(o,t){c.value.includes(o)||c.value.push(o),V.value.set(o,t)}function M(o){c.value=c.value.filter(t=>t!==o),V.value.delete(o)}const Fe=()=>{B.value=""},je=o=>{const t={};a.tabs.forEach(n=>{t[n.key]=[]}),N.value=t,h("org-change",o)};let C=null;const We=()=>{if(C&&clearTimeout(C),!B.value.trim()){P();return}O.value=!0,D.value=!0,C=setTimeout(()=>$e(),300)},$e=()=>{S.value=[];const o=t=>{S.value=t.map(n=>({...n,isUser:!0})),D.value=!1};h("search",{keyword:B.value,orgId:y.value||void 0,callback:o})},P=()=>{C&&(clearTimeout(C),C=null),O.value=!1,B.value="",S.value=[],D.value=!1},Je=o=>{c.value.indexOf(o.id)>-1?M(o.id):$(o.id,{...o,isUser:!0,typeName:"搜索结果",orgId:y.value})};function qe(o){const t=[],n=s=>{for(const p of s)t.push(p.id),p.children&&n(p.children)};return n(o),t}const Ae=(o,t)=>{var d;const n=t==null?void 0:t.node;if(n){const r=n.value??((d=n.data)==null?void 0:d.id);if(r!==void 0){if(n.checked){const E=a.tabs.find(w=>w.key===_.value),b=E?E.name.replace(/^按/,""):"";$(r,{...n.data,typeName:b,orgId:y.value})}else M(r);return}}const s=N.value[_.value]||[],p=qe(s),m=c.value.filter(r=>!p.includes(r));c.value=[...m,...o]};function J(o,t,n){for(const s of o){if(s.id===t)return s.children=s.children||[],s.children.push(...n),s.loaded=!0,!0;if(s.children&&J(s.children,t,n))return!0}return!1}async function Ge(o,t){const n=o.value,s=z.value[t];h("load-users",{tabKey:t,nodeId:n,node:o,callback:async m=>{if(m.length>0){const d=m.map(u=>{const{id:E,name:b,...w}=u;return{...w,id:E,name:u.displayName||b,isUser:!0}}),r=N.value[t];if(r&&J(r,n,d),s){s.appendTo(n,d),o.data.loaded=!0,await e.nextTick();try{s.setItem(n,{expanded:!0})}catch{}}}else{o.data.loaded=!0;const d=N.value[t];if(d){const r=W(d,n);r&&(r.loaded=!0)}}}})}const He=o=>{M(o)},q=()=>{c.value=[],V.value.clear()},Qe=()=>{h("update:modelValue",c.value),h("confirm",x.value),k.value=!1},Xe=()=>{k.value=!1};return T({clearSelection:q,appendUsers:(o,t,n)=>{const s=z.value[o];if(s&&n.length>0){const p=n.map(m=>{const{id:d,name:r,...u}=m;return{...u,id:d,name:m.displayName||r,isUser:!0}});s.appendTo(t,p)}}}),(o,t)=>{const n=e.resolveComponent("t-icon"),s=e.resolveComponent("t-option"),p=e.resolveComponent("t-select"),m=e.resolveComponent("t-input"),d=e.resolveComponent("t-button"),r=e.resolveComponent("t-loading"),u=e.resolveComponent("t-checkbox"),E=e.resolveComponent("t-tree"),b=e.resolveComponent("t-tab-panel"),w=e.resolveComponent("t-tabs"),Ye=e.resolveComponent("t-dialog");return e.openBlock(),e.createBlock(Ye,{visible:k.value,"onUpdate:visible":t[4]||(t[4]=l=>k.value=l),header:"选择人员",width:Re.value,footer:!0,placement:"center","destroy-on-close":"",onConfirm:Qe,onClose:Xe},{default:e.withCtx(()=>[e.createElementVNode("div",Q,[F.value?(e.openBlock(),e.createElementBlock("div",X,[e.createVNode(n,{name:"info-circle"}),e.createElementVNode("span",null,e.toDisplayString(F.value),1)])):e.createCommentVNode("",!0),Me.value?(e.openBlock(),e.createElementBlock("div",Y,[Pe.value&&L.value.length>0?(e.openBlock(),e.createElementBlock("div",Z,[e.createVNode(p,{modelValue:y.value,"onUpdate:modelValue":t[0]||(t[0]=l=>y.value=l),placeholder:"选择组织",style:{width:"200px"},onChange:je},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.value,l=>(e.openBlock(),e.createBlock(s,{key:l.id,value:l.id,label:l.displayName||l.name},null,8,["value","label"]))),128))]),_:1},8,["modelValue"])])):e.createCommentVNode("",!0),e.createElementVNode("div",K,[e.createVNode(m,{modelValue:B.value,"onUpdate:modelValue":t[1]||(t[1]=l=>B.value=l),placeholder:"输入手机号/工号/姓名/部门/职位搜索",clearable:"",onInput:We,onClear:P},{"prefix-icon":e.withCtx(()=>[e.createVNode(n,{name:"search"})]),_:1},8,["modelValue"])])])):e.createCommentVNode("",!0),e.createElementVNode("div",v,[e.createElementVNode("div",ee,[O.value?(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("div",oe,[t[6]||(t[6]=e.createElementVNode("span",null,"搜索结果",-1)),e.createVNode(d,{size:"small",variant:"text",onClick:P},{default:e.withCtx(()=>[...t[5]||(t[5]=[e.createTextVNode("返回",-1)])]),_:1})]),D.value?(e.openBlock(),e.createElementBlock("div",le,[e.createVNode(r),t[7]||(t[7]=e.createElementVNode("span",null,"搜索中...",-1))])):S.value.length===0?(e.openBlock(),e.createElementBlock("div",ne,[e.createVNode(n,{name:"search",size:"48px",style:{color:"#ddd"}}),t[8]||(t[8]=e.createElementVNode("p",null,"未找到匹配的人员",-1))])):(e.openBlock(),e.createElementBlock("div",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,l=>(e.openBlock(),e.createElementBlock("div",{key:l.id,class:e.normalizeClass(["cd-ps-result-item",{"cd-ps-selected":c.value.includes(l.id)}]),onClick:I=>Je(l)},[e.createVNode(u,{checked:c.value.includes(l.id),onClick:t[2]||(t[2]=e.withModifiers(()=>{},["stop"]))},null,8,["checked"]),e.createElementVNode("div",ce,[e.createVNode(n,{name:"user"})]),e.createElementVNode("div",de,[e.createElementVNode("div",re,e.toDisplayString(l.displayName||l.name),1),e.createElementVNode("div",ie,[l.position?(e.openBlock(),e.createElementBlock("span",pe,e.toDisplayString(l.position),1)):e.createCommentVNode("",!0),l.department?(e.openBlock(),e.createElementBlock("span",me,e.toDisplayString(l.department),1)):e.createCommentVNode("",!0),l.phone?(e.openBlock(),e.createElementBlock("span",fe,e.toDisplayString(l.phone),1)):e.createCommentVNode("",!0)])])],10,se))),128))]))])):(e.openBlock(),e.createBlock(w,{key:1,modelValue:_.value,"onUpdate:modelValue":t[3]||(t[3]=l=>_.value=l),onChange:Fe},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Oe.value,l=>(e.openBlock(),e.createBlock(b,{key:l.key,value:l.key,label:l.name},{default:e.withCtx(()=>{var I;return[e.createElementVNode("div",he,[((I=N.value[l.key])==null?void 0:I.length)>0?(e.openBlock(),e.createBlock(E,{key:0,ref_for:!0,ref:i=>Le(l.key,i),data:N.value[l.key],keys:{value:"id",label:"name",children:"children"},hover:"",checkable:"","expand-all":!1,value:c.value,onChange:Ae},{label:e.withCtx(({node:i})=>{var H;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":l.icon||"folder"},null,8,["name"]),e.createElementVNode("span",ke,[e.createTextVNode(e.toDisplayString(i.label)+" ",1),i.data.isUser&&i.data.position?(e.openBlock(),e.createElementBlock("span",_e,e.toDisplayString(i.data.position),1)):e.createCommentVNode("",!0)]),i.data.userCount&&!i.data.isUser?(e.openBlock(),e.createElementBlock("span",ye,"("+e.toDisplayString(i.data.userCount)+")",1)):e.createCommentVNode("",!0),!i.data.isUser&&!((H=i.data.children)!=null&&H.length)&&!i.data.loaded?(e.openBlock(),e.createBlock(d,{key:1,size:"small",variant:"text",class:"cd-ps-load-btn",onClick:e.withModifiers(ve=>Ge(i,l.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",Ve,[e.createVNode(n,{name:l.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",Ne,[e.createElementVNode("div",ue,[t[12]||(t[12]=e.createElementVNode("span",{class:"cd-ps-title"},"已选择",-1)),e.createElementVNode("span",ge,e.toDisplayString(x.value.length)+" 项",1),x.value.length>0?(e.openBlock(),e.createBlock(d,{key:0,size:"small",variant:"text",onClick:q},{default:e.withCtx(()=>[...t[11]||(t[11]=[e.createTextVNode("清空",-1)])]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",Be,[x.value.length===0?(e.openBlock(),e.createElementBlock("div",Ce,[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",Ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,l=>(e.openBlock(),e.createElementBlock("div",{key:l.id,class:e.normalizeClass(["cd-ps-selected-item",{"cd-ps-dept-item":!l.isUser}])},[e.createElementVNode("div",Se,[e.createElementVNode("div",{class:e.normalizeClass(["cd-ps-avatar",{"cd-ps-avatar-dept":!l.isUser}])},[e.createVNode(n,{name:l.isUser?"user":"folder"},null,8,["name"])],2),e.createElementVNode("div",xe,[e.createElementVNode("div",be,e.toDisplayString(l.displayName||l.name),1),e.createElementVNode("div",we,[l.isUser&&l.position?(e.openBlock(),e.createElementBlock("span",Ue,e.toDisplayString(l.position),1)):e.createCommentVNode("",!0),l.isUser&&l.department?(e.openBlock(),e.createElementBlock("span",De,e.toDisplayString(l.department),1)):e.createCommentVNode("",!0),l.isUser?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",Ie,e.toDisplayString(l.typeName||"部门"),1)),!l.isUser&&l.userCount?(e.openBlock(),e.createElementBlock("span",Te,e.toDisplayString(l.userCount)+"人",1)):e.createCommentVNode("",!0)])])]),e.createVNode(d,{size:"small",variant:"text",shape:"circle",onClick:I=>He(l.id)},{icon:e.withCtx(()=>[e.createVNode(n,{name:"close"})]),_:1},8,["onClick"])],2))),128))]))])])])])]),_:1},8,["visible","width"])}}}),[["__scopeId","data-v-a0450286"]]),ze={install(g){g.component("PersonSelector",R)}};f.PersonSelector=R,f.default=ze,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/index.mjs
CHANGED
|
@@ -1,38 +1,41 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as Ne, ref as _, computed as S, watch as $, resolveComponent as m, createBlock as w, openBlock as a, withCtx as y, createElementVNode as n, createElementBlock as o, createCommentVNode as h, createVNode as v, toDisplayString as f, Fragment as J, renderList as j, createTextVNode as A, normalizeClass as F, withModifiers as de, nextTick as xe } from "vue";
|
|
2
|
+
const Ie = { class: "cd-ps-container" }, Se = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "cd-ps-tips"
|
|
5
|
-
},
|
|
5
|
+
}, we = {
|
|
6
6
|
key: 1,
|
|
7
7
|
class: "cd-ps-search"
|
|
8
|
-
},
|
|
8
|
+
}, ze = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "cd-ps-org-select"
|
|
11
|
-
},
|
|
11
|
+
}, Te = { class: "cd-ps-search-input" }, Oe = { class: "cd-ps-content" }, Be = { class: "cd-ps-left" }, De = {
|
|
12
12
|
key: 0,
|
|
13
13
|
class: "cd-ps-search-results"
|
|
14
|
-
},
|
|
14
|
+
}, Re = { class: "cd-ps-search-header" }, Ee = {
|
|
15
15
|
key: 0,
|
|
16
16
|
class: "cd-ps-loading"
|
|
17
|
-
},
|
|
17
|
+
}, Me = {
|
|
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
|
+
}, Le = ["onClick"], We = { class: "cd-ps-avatar" }, $e = { class: "cd-ps-info" }, Je = { class: "cd-ps-name" }, je = { class: "cd-ps-meta" }, Ae = { key: 0 }, Fe = { key: 1 }, qe = { key: 2 }, Ge = { class: "cd-ps-tree" }, He = { class: "cd-ps-node-name" }, Qe = {
|
|
24
|
+
key: 0,
|
|
25
|
+
class: "cd-ps-position"
|
|
26
|
+
}, Xe = {
|
|
24
27
|
key: 0,
|
|
25
28
|
class: "cd-ps-count"
|
|
26
|
-
},
|
|
29
|
+
}, Ye = {
|
|
27
30
|
key: 1,
|
|
28
31
|
class: "cd-ps-empty"
|
|
29
|
-
},
|
|
32
|
+
}, Ze = { class: "cd-ps-right" }, Ke = { class: "cd-ps-right-header" }, et = { class: "cd-ps-num" }, tt = { class: "cd-ps-right-list" }, st = {
|
|
30
33
|
key: 0,
|
|
31
34
|
class: "cd-ps-empty"
|
|
32
|
-
},
|
|
35
|
+
}, lt = {
|
|
33
36
|
key: 1,
|
|
34
37
|
class: "cd-ps-selected-list"
|
|
35
|
-
},
|
|
38
|
+
}, at = { class: "cd-ps-item-info" }, nt = { class: "cd-ps-info" }, ot = { class: "cd-ps-name" }, dt = { class: "cd-ps-meta" }, ct = { key: 0 }, it = { key: 1 }, rt = { key: 2 }, ut = { key: 3 }, pt = /* @__PURE__ */ Ne({
|
|
36
39
|
__name: "PersonSelector",
|
|
37
40
|
props: {
|
|
38
41
|
visible: { type: Boolean, default: !1 },
|
|
@@ -41,320 +44,327 @@ const Ue = { class: "cd-ps-container" }, xe = {
|
|
|
41
44
|
modelValue: { default: () => [] },
|
|
42
45
|
dialogWidth: { default: "900px" },
|
|
43
46
|
tips: { default: "" },
|
|
44
|
-
showSearch: { type: Boolean, default: !0 }
|
|
47
|
+
showSearch: { type: Boolean, default: !0 },
|
|
48
|
+
showOrg: { type: Boolean, default: !0 }
|
|
45
49
|
},
|
|
46
50
|
emits: ["update:visible", "update:modelValue", "confirm", "load-users", "search", "org-change"],
|
|
47
|
-
setup(
|
|
48
|
-
var
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
if (
|
|
51
|
+
setup(z, { expose: q, emit: P }) {
|
|
52
|
+
var ae, ne;
|
|
53
|
+
const d = z, C = P, b = _(d.visible), V = _(((ne = (ae = d.tabs) == null ? void 0 : ae[0]) == null ? void 0 : ne.key) || ""), U = _(null), T = _(""), i = _([]), N = _(/* @__PURE__ */ new Map()), G = _({}), H = _(!1), L = _(!1), D = _([]), ce = S(() => d.tabs || []), Y = S(() => d.organizations || []), Z = S(() => d.tips || ""), ie = S(() => d.showSearch), re = S(() => d.showOrg), ue = S(() => d.dialogWidth), x = _({});
|
|
54
|
+
$(() => d.tabs, (t) => {
|
|
55
|
+
if (t && t.length > 0) {
|
|
52
56
|
const e = {};
|
|
53
|
-
|
|
54
|
-
e[
|
|
55
|
-
}),
|
|
56
|
-
}
|
|
57
|
-
}, { immediate: !0, deep: !0 }), Q(() => c.visible, (l) => {
|
|
58
|
-
if (z.value = l, l) {
|
|
59
|
-
if (c.modelValue && c.modelValue.length > 0) {
|
|
60
|
-
const e = c.modelValue[0];
|
|
61
|
-
typeof e == "object" && e !== null && "id" in e ? (i.value = c.modelValue.map((s) => s.id), b.value.clear(), c.modelValue.forEach((s) => {
|
|
62
|
-
b.value.set(s.id, s);
|
|
63
|
-
})) : (i.value = [...c.modelValue], b.value.clear());
|
|
64
|
-
} else
|
|
65
|
-
i.value = [], b.value.clear();
|
|
66
|
-
c.organizations.length > 0 && !N.value && (N.value = c.organizations[0].id);
|
|
57
|
+
t.forEach((l) => {
|
|
58
|
+
e[l.key] = JSON.parse(JSON.stringify(l.tree));
|
|
59
|
+
}), x.value = e, (!V.value || !t.find((l) => l.key === V.value)) && (V.value = t[0].key);
|
|
67
60
|
}
|
|
68
|
-
}
|
|
69
|
-
|
|
61
|
+
}, { immediate: !0, deep: !0 });
|
|
62
|
+
function K() {
|
|
63
|
+
if (d.modelValue && d.modelValue.length > 0) {
|
|
64
|
+
const t = d.modelValue[0];
|
|
65
|
+
typeof t == "object" && t !== null && "id" in t ? (i.value = d.modelValue.map((e) => e.id), N.value.clear(), d.modelValue.forEach((e) => {
|
|
66
|
+
N.value.set(e.id, e);
|
|
67
|
+
})) : i.value = [...d.modelValue];
|
|
68
|
+
} else
|
|
69
|
+
i.value = [], N.value.clear();
|
|
70
|
+
}
|
|
71
|
+
$(() => d.modelValue, (t) => {
|
|
72
|
+
b.value && t && K();
|
|
73
|
+
}, { deep: !0 }), $(() => d.visible, (t) => {
|
|
74
|
+
b.value = t, t && (K(), d.organizations.length > 0 && !U.value && (U.value = d.organizations[0].id));
|
|
75
|
+
}), $(b, (t) => {
|
|
76
|
+
C("update:visible", t);
|
|
70
77
|
});
|
|
71
|
-
function
|
|
72
|
-
e && (
|
|
78
|
+
function pe(t, e) {
|
|
79
|
+
e && (G.value[t] = e);
|
|
73
80
|
}
|
|
74
|
-
function
|
|
75
|
-
for (const
|
|
76
|
-
if (
|
|
77
|
-
if (
|
|
78
|
-
const
|
|
79
|
-
if (
|
|
81
|
+
function ee(t, e) {
|
|
82
|
+
for (const l of t) {
|
|
83
|
+
if (l.id === e) return l;
|
|
84
|
+
if (l.children) {
|
|
85
|
+
const c = ee(l.children, e);
|
|
86
|
+
if (c) return c;
|
|
80
87
|
}
|
|
81
88
|
}
|
|
82
89
|
return null;
|
|
83
90
|
}
|
|
84
|
-
const
|
|
85
|
-
function
|
|
86
|
-
i.value.includes(
|
|
91
|
+
const R = S(() => i.value.map((t) => N.value.get(t)).filter(Boolean));
|
|
92
|
+
function te(t, e) {
|
|
93
|
+
i.value.includes(t) || i.value.push(t), N.value.set(t, e);
|
|
87
94
|
}
|
|
88
|
-
function
|
|
89
|
-
i.value = i.value.filter((e) => e !==
|
|
95
|
+
function Q(t) {
|
|
96
|
+
i.value = i.value.filter((e) => e !== t), N.value.delete(t);
|
|
90
97
|
}
|
|
91
|
-
const
|
|
98
|
+
const ve = () => {
|
|
92
99
|
T.value = "";
|
|
93
|
-
},
|
|
100
|
+
}, he = (t) => {
|
|
94
101
|
const e = {};
|
|
95
|
-
|
|
96
|
-
e[
|
|
97
|
-
}),
|
|
102
|
+
d.tabs.forEach((l) => {
|
|
103
|
+
e[l.key] = [];
|
|
104
|
+
}), x.value = e, C("org-change", t);
|
|
98
105
|
};
|
|
99
|
-
let
|
|
100
|
-
const
|
|
101
|
-
if (
|
|
102
|
-
|
|
106
|
+
let O = null;
|
|
107
|
+
const fe = () => {
|
|
108
|
+
if (O && clearTimeout(O), !T.value.trim()) {
|
|
109
|
+
X();
|
|
103
110
|
return;
|
|
104
111
|
}
|
|
105
|
-
|
|
106
|
-
},
|
|
107
|
-
|
|
108
|
-
const
|
|
109
|
-
|
|
112
|
+
H.value = !0, L.value = !0, O = setTimeout(() => _e(), 300);
|
|
113
|
+
}, _e = () => {
|
|
114
|
+
D.value = [];
|
|
115
|
+
const t = (e) => {
|
|
116
|
+
D.value = e.map((l) => ({ ...l, isUser: !0 })), L.value = !1;
|
|
110
117
|
};
|
|
111
|
-
C("search", { keyword: T.value, orgId:
|
|
112
|
-
},
|
|
113
|
-
|
|
114
|
-
},
|
|
115
|
-
i.value.indexOf(
|
|
118
|
+
C("search", { keyword: T.value, orgId: U.value || void 0, callback: t });
|
|
119
|
+
}, X = () => {
|
|
120
|
+
O && (clearTimeout(O), O = null), H.value = !1, T.value = "", D.value = [], L.value = !1;
|
|
121
|
+
}, me = (t) => {
|
|
122
|
+
i.value.indexOf(t.id) > -1 ? Q(t.id) : te(t.id, { ...t, isUser: !0, typeName: "搜索结果", orgId: U.value });
|
|
116
123
|
};
|
|
117
|
-
function
|
|
118
|
-
const e = [],
|
|
119
|
-
for (const k of
|
|
120
|
-
e.push(k.id), k.children &&
|
|
124
|
+
function ke(t) {
|
|
125
|
+
const e = [], l = (c) => {
|
|
126
|
+
for (const k of c)
|
|
127
|
+
e.push(k.id), k.children && l(k.children);
|
|
121
128
|
};
|
|
122
|
-
return
|
|
129
|
+
return l(t), e;
|
|
123
130
|
}
|
|
124
|
-
const
|
|
131
|
+
const ye = (t, e) => {
|
|
125
132
|
var r;
|
|
126
|
-
const
|
|
127
|
-
if (
|
|
128
|
-
const u =
|
|
133
|
+
const l = e == null ? void 0 : e.node;
|
|
134
|
+
if (l) {
|
|
135
|
+
const u = l.value ?? ((r = l.data) == null ? void 0 : r.id);
|
|
129
136
|
if (u !== void 0) {
|
|
130
|
-
if (
|
|
131
|
-
const B =
|
|
132
|
-
|
|
137
|
+
if (l.checked) {
|
|
138
|
+
const B = d.tabs.find((M) => M.key === V.value), E = B ? B.name.replace(/^按/, "") : "";
|
|
139
|
+
te(u, { ...l.data, typeName: E, orgId: U.value });
|
|
133
140
|
} else
|
|
134
|
-
|
|
141
|
+
Q(u);
|
|
135
142
|
return;
|
|
136
143
|
}
|
|
137
144
|
}
|
|
138
|
-
const
|
|
139
|
-
i.value = [...g, ...
|
|
145
|
+
const c = x.value[V.value] || [], k = ke(c), g = i.value.filter((u) => !k.includes(u));
|
|
146
|
+
i.value = [...g, ...t];
|
|
140
147
|
};
|
|
141
|
-
function
|
|
142
|
-
for (const
|
|
143
|
-
if (
|
|
144
|
-
return
|
|
145
|
-
if (
|
|
148
|
+
function se(t, e, l) {
|
|
149
|
+
for (const c of t) {
|
|
150
|
+
if (c.id === e)
|
|
151
|
+
return c.children = c.children || [], c.children.push(...l), c.loaded = !0, !0;
|
|
152
|
+
if (c.children && se(c.children, e, l))
|
|
146
153
|
return !0;
|
|
147
154
|
}
|
|
148
155
|
return !1;
|
|
149
156
|
}
|
|
150
|
-
async function
|
|
151
|
-
const
|
|
152
|
-
C("load-users", { tabKey: e, nodeId:
|
|
157
|
+
async function ge(t, e) {
|
|
158
|
+
const l = t.value, c = G.value[e];
|
|
159
|
+
C("load-users", { tabKey: e, nodeId: l, node: t, callback: async (g) => {
|
|
153
160
|
if (g.length > 0) {
|
|
154
|
-
const r = g.map((
|
|
155
|
-
const { id: B, name: E, ...
|
|
156
|
-
return { ...
|
|
157
|
-
}), u =
|
|
158
|
-
if (u &&
|
|
159
|
-
|
|
161
|
+
const r = g.map((I) => {
|
|
162
|
+
const { id: B, name: E, ...M } = I;
|
|
163
|
+
return { ...M, id: B, name: I.displayName || E, isUser: !0 };
|
|
164
|
+
}), u = x.value[e];
|
|
165
|
+
if (u && se(u, l, r), c) {
|
|
166
|
+
c.appendTo(l, r), t.data.loaded = !0, await xe();
|
|
160
167
|
try {
|
|
161
|
-
|
|
168
|
+
c.setItem(l, { expanded: !0 });
|
|
162
169
|
} catch {
|
|
163
170
|
}
|
|
164
171
|
}
|
|
165
172
|
} else {
|
|
166
|
-
|
|
167
|
-
const r =
|
|
173
|
+
t.data.loaded = !0;
|
|
174
|
+
const r = x.value[e];
|
|
168
175
|
if (r) {
|
|
169
|
-
const u =
|
|
176
|
+
const u = ee(r, l);
|
|
170
177
|
u && (u.loaded = !0);
|
|
171
178
|
}
|
|
172
179
|
}
|
|
173
180
|
} });
|
|
174
181
|
}
|
|
175
|
-
const
|
|
176
|
-
|
|
177
|
-
},
|
|
178
|
-
i.value = [],
|
|
179
|
-
},
|
|
180
|
-
C("update:modelValue", i.value), C("confirm",
|
|
181
|
-
},
|
|
182
|
-
|
|
182
|
+
const Ce = (t) => {
|
|
183
|
+
Q(t);
|
|
184
|
+
}, le = () => {
|
|
185
|
+
i.value = [], N.value.clear();
|
|
186
|
+
}, be = () => {
|
|
187
|
+
C("update:modelValue", i.value), C("confirm", R.value), b.value = !1;
|
|
188
|
+
}, Ve = () => {
|
|
189
|
+
b.value = !1;
|
|
183
190
|
};
|
|
184
|
-
return
|
|
185
|
-
clearSelection:
|
|
186
|
-
appendUsers: (
|
|
187
|
-
const
|
|
188
|
-
if (
|
|
189
|
-
const k =
|
|
190
|
-
const { id: r, name: u, ...
|
|
191
|
-
return { ...
|
|
191
|
+
return q({
|
|
192
|
+
clearSelection: le,
|
|
193
|
+
appendUsers: (t, e, l) => {
|
|
194
|
+
const c = G.value[t];
|
|
195
|
+
if (c && l.length > 0) {
|
|
196
|
+
const k = l.map((g) => {
|
|
197
|
+
const { id: r, name: u, ...I } = g;
|
|
198
|
+
return { ...I, id: r, name: g.displayName || u, isUser: !0 };
|
|
192
199
|
});
|
|
193
|
-
|
|
200
|
+
c.appendTo(e, k);
|
|
194
201
|
}
|
|
195
202
|
}
|
|
196
|
-
}), (
|
|
197
|
-
const
|
|
198
|
-
return a(),
|
|
199
|
-
visible:
|
|
200
|
-
"onUpdate:visible": e[4] || (e[4] = (
|
|
203
|
+
}), (t, e) => {
|
|
204
|
+
const l = m("t-icon"), c = m("t-option"), k = m("t-select"), g = m("t-input"), r = m("t-button"), u = m("t-loading"), I = m("t-checkbox"), B = m("t-tree"), E = m("t-tab-panel"), M = m("t-tabs"), Ue = m("t-dialog");
|
|
205
|
+
return a(), w(Ue, {
|
|
206
|
+
visible: b.value,
|
|
207
|
+
"onUpdate:visible": e[4] || (e[4] = (s) => b.value = s),
|
|
201
208
|
header: "选择人员",
|
|
202
|
-
width:
|
|
209
|
+
width: ue.value,
|
|
203
210
|
footer: !0,
|
|
204
211
|
placement: "center",
|
|
205
212
|
"destroy-on-close": "",
|
|
206
|
-
onConfirm:
|
|
207
|
-
onClose:
|
|
213
|
+
onConfirm: be,
|
|
214
|
+
onClose: Ve
|
|
208
215
|
}, {
|
|
209
216
|
default: y(() => [
|
|
210
|
-
n("div",
|
|
211
|
-
Z.value ? (a(), o("div",
|
|
212
|
-
|
|
213
|
-
n("span", null,
|
|
214
|
-
])) :
|
|
215
|
-
|
|
216
|
-
Y.value.length > 0 ? (a(), o("div",
|
|
217
|
-
|
|
218
|
-
modelValue:
|
|
219
|
-
"onUpdate:modelValue": e[0] || (e[0] = (
|
|
217
|
+
n("div", Ie, [
|
|
218
|
+
Z.value ? (a(), o("div", Se, [
|
|
219
|
+
v(l, { name: "info-circle" }),
|
|
220
|
+
n("span", null, f(Z.value), 1)
|
|
221
|
+
])) : h("", !0),
|
|
222
|
+
ie.value ? (a(), o("div", we, [
|
|
223
|
+
re.value && Y.value.length > 0 ? (a(), o("div", ze, [
|
|
224
|
+
v(k, {
|
|
225
|
+
modelValue: U.value,
|
|
226
|
+
"onUpdate:modelValue": e[0] || (e[0] = (s) => U.value = s),
|
|
220
227
|
placeholder: "选择组织",
|
|
221
228
|
style: { width: "200px" },
|
|
222
|
-
onChange:
|
|
229
|
+
onChange: he
|
|
223
230
|
}, {
|
|
224
231
|
default: y(() => [
|
|
225
|
-
(a(!0), o(
|
|
226
|
-
key:
|
|
227
|
-
value:
|
|
228
|
-
label:
|
|
232
|
+
(a(!0), o(J, null, j(Y.value, (s) => (a(), w(c, {
|
|
233
|
+
key: s.id,
|
|
234
|
+
value: s.id,
|
|
235
|
+
label: s.displayName || s.name
|
|
229
236
|
}, null, 8, ["value", "label"]))), 128))
|
|
230
237
|
]),
|
|
231
238
|
_: 1
|
|
232
239
|
}, 8, ["modelValue"])
|
|
233
|
-
])) :
|
|
234
|
-
n("div",
|
|
235
|
-
|
|
240
|
+
])) : h("", !0),
|
|
241
|
+
n("div", Te, [
|
|
242
|
+
v(g, {
|
|
236
243
|
modelValue: T.value,
|
|
237
|
-
"onUpdate:modelValue": e[1] || (e[1] = (
|
|
244
|
+
"onUpdate:modelValue": e[1] || (e[1] = (s) => T.value = s),
|
|
238
245
|
placeholder: "输入手机号/工号/姓名/部门/职位搜索",
|
|
239
246
|
clearable: "",
|
|
240
|
-
onInput:
|
|
241
|
-
onClear:
|
|
247
|
+
onInput: fe,
|
|
248
|
+
onClear: X
|
|
242
249
|
}, {
|
|
243
250
|
"prefix-icon": y(() => [
|
|
244
|
-
|
|
251
|
+
v(l, { name: "search" })
|
|
245
252
|
]),
|
|
246
253
|
_: 1
|
|
247
254
|
}, 8, ["modelValue"])
|
|
248
255
|
])
|
|
249
|
-
])) :
|
|
250
|
-
n("div",
|
|
251
|
-
n("div",
|
|
252
|
-
|
|
253
|
-
n("div",
|
|
256
|
+
])) : h("", !0),
|
|
257
|
+
n("div", Oe, [
|
|
258
|
+
n("div", Be, [
|
|
259
|
+
H.value ? (a(), o("div", De, [
|
|
260
|
+
n("div", Re, [
|
|
254
261
|
e[6] || (e[6] = n("span", null, "搜索结果", -1)),
|
|
255
|
-
|
|
262
|
+
v(r, {
|
|
256
263
|
size: "small",
|
|
257
264
|
variant: "text",
|
|
258
|
-
onClick:
|
|
265
|
+
onClick: X
|
|
259
266
|
}, {
|
|
260
267
|
default: y(() => [...e[5] || (e[5] = [
|
|
261
|
-
|
|
268
|
+
A("返回", -1)
|
|
262
269
|
])]),
|
|
263
270
|
_: 1
|
|
264
271
|
})
|
|
265
272
|
]),
|
|
266
|
-
L.value ? (a(), o("div",
|
|
267
|
-
|
|
273
|
+
L.value ? (a(), o("div", Ee, [
|
|
274
|
+
v(u),
|
|
268
275
|
e[7] || (e[7] = n("span", null, "搜索中...", -1))
|
|
269
|
-
])) :
|
|
270
|
-
|
|
276
|
+
])) : D.value.length === 0 ? (a(), o("div", Me, [
|
|
277
|
+
v(l, {
|
|
271
278
|
name: "search",
|
|
272
279
|
size: "48px",
|
|
273
280
|
style: { color: "#ddd" }
|
|
274
281
|
}),
|
|
275
282
|
e[8] || (e[8] = n("p", null, "未找到匹配的人员", -1))
|
|
276
|
-
])) : (a(), o("div",
|
|
277
|
-
(a(!0), o(
|
|
278
|
-
key:
|
|
279
|
-
class:
|
|
280
|
-
onClick: (W) =>
|
|
283
|
+
])) : (a(), o("div", Pe, [
|
|
284
|
+
(a(!0), o(J, null, j(D.value, (s) => (a(), o("div", {
|
|
285
|
+
key: s.id,
|
|
286
|
+
class: F(["cd-ps-result-item", { "cd-ps-selected": i.value.includes(s.id) }]),
|
|
287
|
+
onClick: (W) => me(s)
|
|
281
288
|
}, [
|
|
282
|
-
|
|
283
|
-
checked: i.value.includes(
|
|
284
|
-
onClick: e[2] || (e[2] =
|
|
289
|
+
v(I, {
|
|
290
|
+
checked: i.value.includes(s.id),
|
|
291
|
+
onClick: e[2] || (e[2] = de(() => {
|
|
285
292
|
}, ["stop"]))
|
|
286
293
|
}, null, 8, ["checked"]),
|
|
287
|
-
n("div",
|
|
288
|
-
|
|
294
|
+
n("div", We, [
|
|
295
|
+
v(l, { name: "user" })
|
|
289
296
|
]),
|
|
290
|
-
n("div",
|
|
291
|
-
n("div",
|
|
292
|
-
n("div",
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
297
|
+
n("div", $e, [
|
|
298
|
+
n("div", Je, f(s.displayName || s.name), 1),
|
|
299
|
+
n("div", je, [
|
|
300
|
+
s.position ? (a(), o("span", Ae, f(s.position), 1)) : h("", !0),
|
|
301
|
+
s.department ? (a(), o("span", Fe, f(s.department), 1)) : h("", !0),
|
|
302
|
+
s.phone ? (a(), o("span", qe, f(s.phone), 1)) : h("", !0)
|
|
296
303
|
])
|
|
297
304
|
])
|
|
298
|
-
], 10,
|
|
305
|
+
], 10, Le))), 128))
|
|
299
306
|
]))
|
|
300
|
-
])) : (a(),
|
|
307
|
+
])) : (a(), w(M, {
|
|
301
308
|
key: 1,
|
|
302
309
|
modelValue: V.value,
|
|
303
|
-
"onUpdate:modelValue": e[3] || (e[3] = (
|
|
304
|
-
onChange:
|
|
310
|
+
"onUpdate:modelValue": e[3] || (e[3] = (s) => V.value = s),
|
|
311
|
+
onChange: ve
|
|
305
312
|
}, {
|
|
306
313
|
default: y(() => [
|
|
307
|
-
(a(!0), o(
|
|
308
|
-
key:
|
|
309
|
-
value:
|
|
310
|
-
label:
|
|
314
|
+
(a(!0), o(J, null, j(ce.value, (s) => (a(), w(E, {
|
|
315
|
+
key: s.key,
|
|
316
|
+
value: s.key,
|
|
317
|
+
label: s.name
|
|
311
318
|
}, {
|
|
312
319
|
default: y(() => {
|
|
313
320
|
var W;
|
|
314
321
|
return [
|
|
315
|
-
n("div",
|
|
316
|
-
((W =
|
|
322
|
+
n("div", Ge, [
|
|
323
|
+
((W = x.value[s.key]) == null ? void 0 : W.length) > 0 ? (a(), w(B, {
|
|
317
324
|
key: 0,
|
|
318
325
|
ref_for: !0,
|
|
319
|
-
ref: (
|
|
320
|
-
data:
|
|
326
|
+
ref: (p) => pe(s.key, p),
|
|
327
|
+
data: x.value[s.key],
|
|
321
328
|
keys: { value: "id", label: "name", children: "children" },
|
|
322
329
|
hover: "",
|
|
323
330
|
checkable: "",
|
|
324
331
|
"expand-all": !1,
|
|
325
332
|
value: i.value,
|
|
326
|
-
onChange:
|
|
333
|
+
onChange: ye
|
|
327
334
|
}, {
|
|
328
|
-
label: y(({ node:
|
|
329
|
-
var
|
|
335
|
+
label: y(({ node: p }) => {
|
|
336
|
+
var oe;
|
|
330
337
|
return [
|
|
331
338
|
n("div", {
|
|
332
|
-
class:
|
|
339
|
+
class: F(["cd-ps-node", { "cd-ps-node-user": p.data.isUser }])
|
|
333
340
|
}, [
|
|
334
|
-
|
|
335
|
-
name:
|
|
341
|
+
v(l, {
|
|
342
|
+
name: p.data.isUser ? "user" : s.icon || "folder"
|
|
336
343
|
}, null, 8, ["name"]),
|
|
337
|
-
n("span",
|
|
338
|
-
|
|
339
|
-
|
|
344
|
+
n("span", He, [
|
|
345
|
+
A(f(p.label) + " ", 1),
|
|
346
|
+
p.data.isUser && p.data.position ? (a(), o("span", Qe, f(p.data.position), 1)) : h("", !0)
|
|
347
|
+
]),
|
|
348
|
+
p.data.userCount && !p.data.isUser ? (a(), o("span", Xe, "(" + f(p.data.userCount) + ")", 1)) : h("", !0),
|
|
349
|
+
!p.data.isUser && !((oe = p.data.children) != null && oe.length) && !p.data.loaded ? (a(), w(r, {
|
|
340
350
|
key: 1,
|
|
341
351
|
size: "small",
|
|
342
352
|
variant: "text",
|
|
343
353
|
class: "cd-ps-load-btn",
|
|
344
|
-
onClick:
|
|
354
|
+
onClick: de((ft) => ge(p, s.key), ["stop"])
|
|
345
355
|
}, {
|
|
346
356
|
default: y(() => [...e[9] || (e[9] = [
|
|
347
|
-
|
|
357
|
+
A("显示人员", -1)
|
|
348
358
|
])]),
|
|
349
359
|
_: 1
|
|
350
|
-
}, 8, ["onClick"])) :
|
|
360
|
+
}, 8, ["onClick"])) : h("", !0)
|
|
351
361
|
], 2)
|
|
352
362
|
];
|
|
353
363
|
}),
|
|
354
364
|
_: 2
|
|
355
|
-
}, 1032, ["data", "value"])) : (a(), o("div",
|
|
356
|
-
|
|
357
|
-
name:
|
|
365
|
+
}, 1032, ["data", "value"])) : (a(), o("div", Ye, [
|
|
366
|
+
v(l, {
|
|
367
|
+
name: s.icon || "folder-open",
|
|
358
368
|
size: "48px",
|
|
359
369
|
style: { color: "#ddd" }
|
|
360
370
|
}, null, 8, ["name"]),
|
|
@@ -369,61 +379,61 @@ const Ue = { class: "cd-ps-container" }, xe = {
|
|
|
369
379
|
_: 1
|
|
370
380
|
}, 8, ["modelValue"]))
|
|
371
381
|
]),
|
|
372
|
-
n("div",
|
|
373
|
-
n("div",
|
|
382
|
+
n("div", Ze, [
|
|
383
|
+
n("div", Ke, [
|
|
374
384
|
e[12] || (e[12] = n("span", { class: "cd-ps-title" }, "已选择", -1)),
|
|
375
|
-
n("span",
|
|
376
|
-
|
|
385
|
+
n("span", et, f(R.value.length) + " 项", 1),
|
|
386
|
+
R.value.length > 0 ? (a(), w(r, {
|
|
377
387
|
key: 0,
|
|
378
388
|
size: "small",
|
|
379
389
|
variant: "text",
|
|
380
|
-
onClick:
|
|
390
|
+
onClick: le
|
|
381
391
|
}, {
|
|
382
392
|
default: y(() => [...e[11] || (e[11] = [
|
|
383
|
-
|
|
393
|
+
A("清空", -1)
|
|
384
394
|
])]),
|
|
385
395
|
_: 1
|
|
386
|
-
})) :
|
|
396
|
+
})) : h("", !0)
|
|
387
397
|
]),
|
|
388
|
-
n("div",
|
|
389
|
-
|
|
390
|
-
|
|
398
|
+
n("div", tt, [
|
|
399
|
+
R.value.length === 0 ? (a(), o("div", st, [
|
|
400
|
+
v(l, {
|
|
391
401
|
name: "user-checked",
|
|
392
402
|
size: "64px",
|
|
393
403
|
style: { color: "#ddd" }
|
|
394
404
|
}),
|
|
395
405
|
e[13] || (e[13] = n("p", null, "暂无选择", -1))
|
|
396
|
-
])) : (a(), o("div",
|
|
397
|
-
(a(!0), o(
|
|
398
|
-
key:
|
|
399
|
-
class:
|
|
406
|
+
])) : (a(), o("div", lt, [
|
|
407
|
+
(a(!0), o(J, null, j(R.value, (s) => (a(), o("div", {
|
|
408
|
+
key: s.id,
|
|
409
|
+
class: F(["cd-ps-selected-item", { "cd-ps-dept-item": !s.isUser }])
|
|
400
410
|
}, [
|
|
401
|
-
n("div",
|
|
411
|
+
n("div", at, [
|
|
402
412
|
n("div", {
|
|
403
|
-
class:
|
|
413
|
+
class: F(["cd-ps-avatar", { "cd-ps-avatar-dept": !s.isUser }])
|
|
404
414
|
}, [
|
|
405
|
-
|
|
406
|
-
name:
|
|
415
|
+
v(l, {
|
|
416
|
+
name: s.isUser ? "user" : "folder"
|
|
407
417
|
}, null, 8, ["name"])
|
|
408
418
|
], 2),
|
|
409
|
-
n("div",
|
|
410
|
-
n("div",
|
|
411
|
-
n("div",
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
!
|
|
419
|
+
n("div", nt, [
|
|
420
|
+
n("div", ot, f(s.displayName || s.name), 1),
|
|
421
|
+
n("div", dt, [
|
|
422
|
+
s.isUser && s.position ? (a(), o("span", ct, f(s.position), 1)) : h("", !0),
|
|
423
|
+
s.isUser && s.department ? (a(), o("span", it, f(s.department), 1)) : h("", !0),
|
|
424
|
+
s.isUser ? h("", !0) : (a(), o("span", rt, f(s.typeName || "部门"), 1)),
|
|
425
|
+
!s.isUser && s.userCount ? (a(), o("span", ut, f(s.userCount) + "人", 1)) : h("", !0)
|
|
416
426
|
])
|
|
417
427
|
])
|
|
418
428
|
]),
|
|
419
|
-
|
|
429
|
+
v(r, {
|
|
420
430
|
size: "small",
|
|
421
431
|
variant: "text",
|
|
422
432
|
shape: "circle",
|
|
423
|
-
onClick: (W) =>
|
|
433
|
+
onClick: (W) => Ce(s.id)
|
|
424
434
|
}, {
|
|
425
435
|
icon: y(() => [
|
|
426
|
-
|
|
436
|
+
v(l, { name: "close" })
|
|
427
437
|
]),
|
|
428
438
|
_: 1
|
|
429
439
|
}, 8, ["onClick"])
|
|
@@ -438,17 +448,17 @@ const Ue = { class: "cd-ps-container" }, xe = {
|
|
|
438
448
|
}, 8, ["visible", "width"]);
|
|
439
449
|
};
|
|
440
450
|
}
|
|
441
|
-
}),
|
|
442
|
-
const
|
|
443
|
-
for (const [
|
|
444
|
-
|
|
445
|
-
return
|
|
446
|
-
},
|
|
447
|
-
install(
|
|
448
|
-
|
|
451
|
+
}), vt = (z, q) => {
|
|
452
|
+
const P = z.__vccOpts || z;
|
|
453
|
+
for (const [d, C] of q)
|
|
454
|
+
P[d] = C;
|
|
455
|
+
return P;
|
|
456
|
+
}, ht = /* @__PURE__ */ vt(pt, [["__scopeId", "data-v-a0450286"]]), mt = {
|
|
457
|
+
install(z) {
|
|
458
|
+
z.component("PersonSelector", ht);
|
|
449
459
|
}
|
|
450
460
|
};
|
|
451
461
|
export {
|
|
452
|
-
|
|
453
|
-
|
|
462
|
+
ht as PersonSelector,
|
|
463
|
+
mt as default
|
|
454
464
|
};
|
|
@@ -37,6 +37,7 @@ interface Props {
|
|
|
37
37
|
dialogWidth?: string;
|
|
38
38
|
tips?: string;
|
|
39
39
|
showSearch?: boolean;
|
|
40
|
+
showOrg?: boolean;
|
|
40
41
|
}
|
|
41
42
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
42
43
|
visible: boolean;
|
|
@@ -46,6 +47,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
46
47
|
dialogWidth: string;
|
|
47
48
|
tips: string;
|
|
48
49
|
showSearch: boolean;
|
|
50
|
+
showOrg: boolean;
|
|
49
51
|
}>>, {
|
|
50
52
|
clearSelection: () => void;
|
|
51
53
|
appendUsers: (tabKey: string, nodeId: number | string, users: User[]) => void;
|
|
@@ -73,6 +75,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
73
75
|
dialogWidth: string;
|
|
74
76
|
tips: string;
|
|
75
77
|
showSearch: boolean;
|
|
78
|
+
showOrg: boolean;
|
|
76
79
|
}>>> & Readonly<{
|
|
77
80
|
"onUpdate:visible"?: ((value: boolean) => any) | undefined;
|
|
78
81
|
"onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
|
|
@@ -97,6 +100,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
97
100
|
dialogWidth: string;
|
|
98
101
|
tips: string;
|
|
99
102
|
showSearch: boolean;
|
|
103
|
+
showOrg: boolean;
|
|
100
104
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
101
105
|
export default _default;
|
|
102
106
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.cd-ps-container[data-v-
|
|
1
|
+
.cd-ps-container[data-v-a0450286]{display:flex;flex-direction:column;gap:16px;min-height:500px}.cd-ps-tips[data-v-a0450286]{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-a0450286]{display:flex;gap:12px;align-items:center}.cd-ps-org-select[data-v-a0450286]{flex-shrink:0}.cd-ps-search-input[data-v-a0450286]{flex:1}.cd-ps-content[data-v-a0450286]{display:flex;gap:0;height:450px;border:1px solid #dfe1e6;border-radius:4px;overflow:hidden}.cd-ps-left[data-v-a0450286]{width:480px;flex-shrink:0;border-right:1px solid #dfe1e6;display:flex;flex-direction:column;background-color:#fafafa}.cd-ps-left[data-v-a0450286] .t-tabs__nav-container{padding:0 8px;background-color:#fff}.cd-ps-left[data-v-a0450286] .t-tabs__content{flex:1;overflow:hidden}.cd-ps-tree[data-v-a0450286]{height:100%;overflow-y:auto;padding:8px}.cd-ps-tree[data-v-a0450286]::-webkit-scrollbar{width:6px}.cd-ps-tree[data-v-a0450286]::-webkit-scrollbar-track{background:#f1f1f1}.cd-ps-tree[data-v-a0450286]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.cd-ps-node[data-v-a0450286]{display:flex;align-items:center;gap:6px;font-size:14px;width:100%}.cd-ps-node-name[data-v-a0450286]{flex:1;min-width:0;display:flex;align-items:center;gap:6px}.cd-ps-position[data-v-a0450286]{color:#0052d9;font-size:12px;padding:2px 8px;background:#e8f4ff;border-radius:4px;white-space:nowrap;flex-shrink:0}[data-v-a0450286] .t-tree__label{flex:1}[data-v-a0450286] .t-checkbox__label{width:100%}.cd-ps-node-user[data-v-a0450286]{font-size:13px;color:#666}.cd-ps-count[data-v-a0450286]{color:#999;font-size:12px}.cd-ps-load-btn[data-v-a0450286]{margin-left:auto;color:#0052d9;font-size:12px;flex-shrink:0}.cd-ps-empty[data-v-a0450286]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#999}.cd-ps-empty p[data-v-a0450286]{margin-top:16px;font-size:14px}.cd-ps-search-results[data-v-a0450286]{display:flex;flex-direction:column;height:100%}.cd-ps-search-header[data-v-a0450286]{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-a0450286]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px;color:#999}.cd-ps-result-list[data-v-a0450286]{flex:1;overflow-y:auto;padding:8px}.cd-ps-result-item[data-v-a0450286]{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-a0450286]:hover{border-color:#0052d9;background:#f0f5ff}.cd-ps-result-item.cd-ps-selected[data-v-a0450286]{border-color:#0052d9;background:#e8f4ff}.cd-ps-avatar[data-v-a0450286]{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-a0450286]{width:36px;height:36px}.cd-ps-avatar-dept[data-v-a0450286]{background:linear-gradient(135deg,#f5af19,#f12711)}.cd-ps-info[data-v-a0450286]{flex:1;min-width:0}.cd-ps-name[data-v-a0450286]{font-size:13px;font-weight:500;color:#333;margin-bottom:4px}.cd-ps-result-item .cd-ps-name[data-v-a0450286]{font-size:14px}.cd-ps-meta[data-v-a0450286]{display:flex;flex-wrap:wrap;gap:6px;font-size:11px;color:#999}.cd-ps-result-item .cd-ps-meta[data-v-a0450286]{font-size:12px}.cd-ps-meta span[data-v-a0450286]:before{content:"•";margin-right:4px}.cd-ps-meta span[data-v-a0450286]:first-child:before{display:none}.cd-ps-right[data-v-a0450286]{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:#fafafa}.cd-ps-right-header[data-v-a0450286]{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #dfe1e6;background-color:#fff}.cd-ps-title[data-v-a0450286]{font-weight:500;font-size:14px;color:#333}.cd-ps-num[data-v-a0450286]{font-size:13px;color:#0052d9;font-weight:600;margin-left:8px;flex:1}.cd-ps-right-list[data-v-a0450286]{flex:1;overflow-y:auto;padding:8px}.cd-ps-right-list[data-v-a0450286]::-webkit-scrollbar{width:6px}.cd-ps-right-list[data-v-a0450286]::-webkit-scrollbar-track{background:#f1f1f1}.cd-ps-right-list[data-v-a0450286]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.cd-ps-selected-list[data-v-a0450286]{display:flex;flex-direction:column;gap:8px}.cd-ps-selected-item[data-v-a0450286]{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-a0450286]:hover{border-color:#0052d9;box-shadow:0 2px 4px #0052d91a}.cd-ps-dept-item[data-v-a0450286]{border-color:#f5af19}.cd-ps-item-info[data-v-a0450286]{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
|
package/package.json
CHANGED
|
@@ -1,48 +1,47 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "cd-personselector",
|
|
3
|
-
"version": "1.0
|
|
4
|
-
"description": "人员选择器组件 - 支持多Tab、树形结构、搜索、懒加载",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.mjs",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
8
|
-
"type": "module",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"import": "./dist/index.mjs",
|
|
12
|
-
"require": "./dist/index.js",
|
|
13
|
-
"types": "./dist/index.d.ts"
|
|
14
|
-
},
|
|
15
|
-
"./style.css": "./dist/style.css"
|
|
16
|
-
},
|
|
17
|
-
"files": [
|
|
18
|
-
"dist",
|
|
19
|
-
"src"
|
|
20
|
-
],
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
"vue": "^
|
|
37
|
-
"tdesign-vue-next": "^1.
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "cd-personselector",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "人员选择器组件 - 支持多Tab、树形结构、搜索、懒加载",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
},
|
|
15
|
+
"./style.css": "./dist/style.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"src"
|
|
20
|
+
],
|
|
21
|
+
"keywords": [
|
|
22
|
+
"vue",
|
|
23
|
+
"vue3",
|
|
24
|
+
"person-selector",
|
|
25
|
+
"tdesign",
|
|
26
|
+
"组织架构",
|
|
27
|
+
"人员选择"
|
|
28
|
+
],
|
|
29
|
+
"author": "",
|
|
30
|
+
"license": "MIT",
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"vue": "^3.0.0",
|
|
33
|
+
"tdesign-vue-next": "^1.0.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
37
|
+
"tdesign-vue-next": "^1.9.0",
|
|
38
|
+
"typescript": "^5.0.0",
|
|
39
|
+
"vite": "^5.0.0",
|
|
40
|
+
"vite-plugin-dts": "^3.0.0",
|
|
41
|
+
"vue": "^3.4.0",
|
|
42
|
+
"vue-tsc": "^2.0.0"
|
|
43
|
+
},
|
|
44
|
+
"scripts": {
|
|
45
|
+
"build": "vite build"
|
|
46
|
+
}
|
|
47
|
+
}
|
package/src/PersonSelector.vue
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<span>{{ tips }}</span>
|
|
16
16
|
</div>
|
|
17
17
|
<div v-if="showSearch" class="cd-ps-search">
|
|
18
|
-
<div v-if="organizations.length > 0" class="cd-ps-org-select">
|
|
18
|
+
<div v-if="showOrg && organizations.length > 0" class="cd-ps-org-select">
|
|
19
19
|
<t-select v-model="selectedOrgId" placeholder="选择组织" style="width: 200px" @change="handleOrgChange">
|
|
20
20
|
<t-option v-for="org in organizations" :key="org.id" :value="org.id" :label="org.displayName || org.name" />
|
|
21
21
|
</t-select>
|
|
@@ -67,7 +67,10 @@
|
|
|
67
67
|
<template #label="{ node }">
|
|
68
68
|
<div class="cd-ps-node" :class="{ 'cd-ps-node-user': node.data.isUser }">
|
|
69
69
|
<t-icon :name="node.data.isUser ? 'user' : (tab.icon || 'folder')" />
|
|
70
|
-
<span
|
|
70
|
+
<span class="cd-ps-node-name">
|
|
71
|
+
{{ node.label }}
|
|
72
|
+
<span v-if="node.data.isUser && node.data.position" class="cd-ps-position">{{ node.data.position }}</span>
|
|
73
|
+
</span>
|
|
71
74
|
<span v-if="node.data.userCount && !node.data.isUser" class="cd-ps-count">({{ node.data.userCount }})</span>
|
|
72
75
|
<t-button v-if="!node.data.isUser && !node.data.children?.length && !node.data.loaded" size="small" variant="text" class="cd-ps-load-btn" @click.stop="handleLoadUsers(node, tab.key)">显示人员</t-button>
|
|
73
76
|
</div>
|
|
@@ -158,6 +161,7 @@ interface Props {
|
|
|
158
161
|
dialogWidth?: string;
|
|
159
162
|
tips?: string;
|
|
160
163
|
showSearch?: boolean;
|
|
164
|
+
showOrg?: boolean;
|
|
161
165
|
}
|
|
162
166
|
const props = withDefaults(defineProps<Props>(), {
|
|
163
167
|
visible: false,
|
|
@@ -167,6 +171,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
167
171
|
dialogWidth: '900px',
|
|
168
172
|
tips: '',
|
|
169
173
|
showSearch: true,
|
|
174
|
+
showOrg: true,
|
|
170
175
|
});
|
|
171
176
|
const emit = defineEmits<{
|
|
172
177
|
'update:visible': [value: boolean];
|
|
@@ -190,6 +195,7 @@ const tabs = computed(() => props.tabs || []);
|
|
|
190
195
|
const organizations = computed(() => props.organizations || []);
|
|
191
196
|
const tips = computed(() => props.tips || '');
|
|
192
197
|
const showSearch = computed(() => props.showSearch);
|
|
198
|
+
const showOrg = computed(() => props.showOrg);
|
|
193
199
|
const dialogWidth = computed(() => props.dialogWidth);
|
|
194
200
|
const internalTreeData = ref<Record<string, TreeNode[]>>({});
|
|
195
201
|
watch(() => props.tabs, (newTabs) => {
|
|
@@ -202,30 +208,40 @@ watch(() => props.tabs, (newTabs) => {
|
|
|
202
208
|
}
|
|
203
209
|
}
|
|
204
210
|
}, { immediate: true, deep: true });
|
|
211
|
+
// 处理 modelValue 变化的通用函数
|
|
212
|
+
function syncModelValue() {
|
|
213
|
+
if (props.modelValue && props.modelValue.length > 0) {
|
|
214
|
+
const firstItem = props.modelValue[0];
|
|
215
|
+
if (typeof firstItem === 'object' && firstItem !== null && 'id' in firstItem) {
|
|
216
|
+
// 对象数组格式,提取 ID 并缓存完整信息
|
|
217
|
+
selectedIds.value = props.modelValue.map((item: any) => item.id);
|
|
218
|
+
selectedItemsMap.value.clear();
|
|
219
|
+
props.modelValue.forEach((item: any) => {
|
|
220
|
+
selectedItemsMap.value.set(item.id, item);
|
|
221
|
+
});
|
|
222
|
+
} else {
|
|
223
|
+
// ID 数组格式
|
|
224
|
+
selectedIds.value = [...props.modelValue] as (number | string)[];
|
|
225
|
+
// 不清空 selectedItemsMap,保留已有的缓存
|
|
226
|
+
}
|
|
227
|
+
} else {
|
|
228
|
+
selectedIds.value = [];
|
|
229
|
+
selectedItemsMap.value.clear();
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
// 监听 modelValue 变化(支持外部动态更新已选项)
|
|
233
|
+
watch(() => props.modelValue, (newVal) => {
|
|
234
|
+
if (dialogVisible.value && newVal) {
|
|
235
|
+
syncModelValue();
|
|
236
|
+
}
|
|
237
|
+
}, { deep: true });
|
|
205
238
|
watch(() => props.visible, (newVal) => {
|
|
206
239
|
dialogVisible.value = newVal;
|
|
207
240
|
if (newVal) {
|
|
208
241
|
// 支持两种格式的 modelValue:
|
|
209
242
|
// 1. ID 数组:[1, 2, 3]
|
|
210
243
|
// 2. 对象数组:[{ id: 1, name: 'xxx', ... }, ...]
|
|
211
|
-
|
|
212
|
-
const firstItem = props.modelValue[0];
|
|
213
|
-
if (typeof firstItem === 'object' && firstItem !== null && 'id' in firstItem) {
|
|
214
|
-
// 对象数组格式,提取 ID 并缓存完整信息
|
|
215
|
-
selectedIds.value = props.modelValue.map((item: any) => item.id);
|
|
216
|
-
selectedItemsMap.value.clear();
|
|
217
|
-
props.modelValue.forEach((item: any) => {
|
|
218
|
-
selectedItemsMap.value.set(item.id, item);
|
|
219
|
-
});
|
|
220
|
-
} else {
|
|
221
|
-
// ID 数组格式
|
|
222
|
-
selectedIds.value = [...props.modelValue] as (number | string)[];
|
|
223
|
-
selectedItemsMap.value.clear();
|
|
224
|
-
}
|
|
225
|
-
} else {
|
|
226
|
-
selectedIds.value = [];
|
|
227
|
-
selectedItemsMap.value.clear();
|
|
228
|
-
}
|
|
244
|
+
syncModelValue();
|
|
229
245
|
if (props.organizations.length > 0 && !selectedOrgId.value) {
|
|
230
246
|
selectedOrgId.value = props.organizations[0].id;
|
|
231
247
|
}
|
|
@@ -243,7 +259,6 @@ function findNodeById(tree: TreeNode[], id: number | string): TreeNode | null {
|
|
|
243
259
|
const selectedItems = computed(() => {
|
|
244
260
|
return selectedIds.value.map(id => selectedItemsMap.value.get(id)).filter(Boolean);
|
|
245
261
|
});
|
|
246
|
-
|
|
247
262
|
// 添加选中项到缓存
|
|
248
263
|
function addSelectedItem(id: number | string, item: any) {
|
|
249
264
|
if (!selectedIds.value.includes(id)) {
|
|
@@ -251,7 +266,6 @@ function addSelectedItem(id: number | string, item: any) {
|
|
|
251
266
|
}
|
|
252
267
|
selectedItemsMap.value.set(id, item);
|
|
253
268
|
}
|
|
254
|
-
|
|
255
269
|
// 从缓存移除选中项
|
|
256
270
|
function removeSelectedItem(id: number | string) {
|
|
257
271
|
selectedIds.value = selectedIds.value.filter(i => i !== id);
|
|
@@ -413,6 +427,8 @@ defineExpose({
|
|
|
413
427
|
.cd-ps-tree::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
414
428
|
.cd-ps-tree::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
|
|
415
429
|
.cd-ps-node { display: flex; align-items: center; gap: 6px; font-size: 14px; width: 100%; }
|
|
430
|
+
.cd-ps-node-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
|
|
431
|
+
.cd-ps-position { color: #0052d9; font-size: 12px; padding: 2px 8px; background: #e8f4ff; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
|
|
416
432
|
:deep(.t-tree__label) { flex: 1; }
|
|
417
433
|
:deep(.t-checkbox__label) { width: 100%; }
|
|
418
434
|
.cd-ps-node-user { font-size: 13px; color: #666; }
|