@ebiz/designer-components 0.1.99 → 0.1.100

package/dist/index.mjs

@@ -57242,7 +57242,8 @@ const GU = /* @__PURE__ */ bt(e8e, [["render", t8e], ["__scopeId", "data-v-d22af
       },
       { deep: !0 }
     ), ge(l, (j) => {
-      f.value = h.value.filter((B) => j.includes(B.bindid));
+      const B = h.value.filter((D) => j.includes(D.bindid)), T = f.value.map((D) => D.bindid), _ = B.filter((D) => !T.includes(D.bindid));
+      f.value = [...f.value, ..._];
     }, { deep: !0 }), ge(u, (j) => {
       v.value = y.value.filter((B) => j.includes(B.bindid));
     }, { deep: !0 }), ge(
@@ -57377,7 +57378,7 @@ const GU = /* @__PURE__ */ bt(e8e, [["render", t8e], ["__scopeId", "data-v-d22af
             ]),
             Q("div", LBe, [
               B[9] || (B[9] = Q("div", { class: "selected-title" }, "已选择的部门、成员", -1)),
-              Q("div", VBe, "共 " + Ee([...d.value, ...v.value, ...f.value].length) + " 项", 1),
+              Q("div", VBe, "共 " + Ee([...d.value, ...v.value, ...f.value].length) + " 项 ", 1),
               Q("div", zBe, [
                 (te(!0), se(dt, null, on([...d.value, ...v.value, ...f.value], (T, _) => (te(), se("div", {
                   key: _,
@@ -57406,7 +57407,7 @@ const GU = /* @__PURE__ */ bt(e8e, [["render", t8e], ["__scopeId", "data-v-d22af
       }, 8, ["visible"])
     ]));
   }
-}, Ext = /* @__PURE__ */ bt(KBe, [["__scopeId", "data-v-af328766"]]), kxt = {
+}, Ext = /* @__PURE__ */ bt(KBe, [["__scopeId", "data-v-0b2bac44"]]), kxt = {
   __name: "EbizTimePicker",
   props: {
     // 选中值

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.99",
+  "version": "0.1.100",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizTreeSelector.vue

@@ -1,85 +1,80 @@
 <template>
   <div class="ebiz-tree-selector">
-      <div class="selected-items" v-if="modelValue && modelValue.length">
-        <div v-for="(item, index) in modelValue" :key="index" class="selected-item">
-          <span class="item-text">{{ item.label }}</span>
-          <span class="item-remove" @click="removeItem(index)">×</span>
-        </div>
+    <div class="selected-items" v-if="modelValue && modelValue.length">
+      <div v-for="(item, index) in modelValue" :key="index" class="selected-item">
+        <span class="item-text">{{ item.label }}</span>
+        <span class="item-remove" @click="removeItem(index)">×</span>
       </div>
-      <t-button @click="showDialog" variant="text" theme="primary" size="small"> 添加 </t-button>
-
-      <EbizDialog attach="body" :zIndex="10000" v-model:visible="dialogVisible" header="选择人员/部门" width="800px"
-        placement="center" confirmBtn="确定" cancelBtn="取消" @confirm="handleConfirm" @cancel="handleCancel"
-        @close="handleCancel">
-        <div class="selector-container">
-          <!-- 左侧选择区域 -->
-          <div class="left-panel">
-            <!-- 顶部搜索区域 -->
-            <div class="search-box">
-              <t-input v-model="searchText" placeholder="搜索成员、部门或标签" clearable>
-                <template #suffix-icon>
-                  <t-icon name="search"></t-icon>
-                </template>
-              </t-input>
-            </div>
+    </div>
+    <t-button @click="showDialog" variant="text" theme="primary" size="small"> 添加 </t-button>
+
+    <EbizDialog attach="body" :zIndex="10000" v-model:visible="dialogVisible" header="选择人员/部门" width="800px"
+      placement="center" confirmBtn="确定" cancelBtn="取消" @confirm="handleConfirm" @cancel="handleCancel"
+      @close="handleCancel">
+      <div class="selector-container">
+        <!-- 左侧选择区域 -->
+        <div class="left-panel">
+          <!-- 顶部搜索区域 -->
+          <div class="search-box">
+            <t-input v-model="searchText" placeholder="搜索成员、部门或标签" clearable>
+              <template #suffix-icon>
+                <t-icon name="search"></t-icon>
+              </template>
+            </t-input>
+          </div>
 
-            <!-- 选项卡 -->
-            <t-tabs v-model="activeTab" class="selector-tabs">
-              <t-tab-panel value="organization" label="组织架构"></t-tab-panel>
-              <!-- <t-tab-panel value="department" label="部门"></t-tab-panel> -->
-               <t-tab-panel value="GW" label="岗位"></t-tab-panel>
-              <t-tab-panel value="employee" label="员工"></t-tab-panel>
-            </t-tabs>
-
-            <!-- 树形结构区域 -->
-            <div class="tree-content">
-              <div v-if="loading" class="loading-container">
-                <t-loading />
-              </div>
-              <EbizTree ref="organizationTree" v-show="activeTab === 'organization'" checkable :items="organizationData"
-                v-model="checkedNodes" v-model:expanded="expandedNodes" :disable-check="disableCheck"
-                :keys="{ label: 'name', value: 'id', children: 'childs' }" />
-              <!-- <EbizTree
+          <!-- 选项卡 -->
+          <t-tabs v-model="activeTab" class="selector-tabs">
+            <t-tab-panel value="organization" label="组织架构"></t-tab-panel>
+            <!-- <t-tab-panel value="department" label="部门"></t-tab-panel> -->
+            <t-tab-panel value="GW" label="岗位"></t-tab-panel>
+            <t-tab-panel value="employee" label="员工"></t-tab-panel>
+          </t-tabs>
+
+          <!-- 树形结构区域 -->
+          <div class="tree-content">
+            <div v-if="loading" class="loading-container">
+              <t-loading />
+            </div>
+            <EbizTree ref="organizationTree" v-show="activeTab === 'organization'" checkable :items="organizationData"
+              v-model="checkedNodes" v-model:expanded="expandedNodes" :disable-check="disableCheck"
+              :keys="{ label: 'name', value: 'id', children: 'childs' }" />
+            <!-- <EbizTree
               v-else-if="activeTab === 'department'"
               checkable
               :items="filteredData."
               v-model="checkedNodes"
               :disable-check="disableCheck"
             /> -->
-            <EbizTree
-              ref="postTree"
-              v-show="activeTab === 'GW'"
-              checkable
-              :items="postData"
-              :keys="{ label: 'label', value: 'bindid', children: 'childs' }"
-              v-model="checkedPostNodes"
-              :disable-check="disableCheck"
-            />
-              <EbizTree ref="employeeTree" v-show="activeTab === 'employee'" checkable :items="employeeData"
-                :keys="{ label: 'label', value: 'bindid', children: 'childs' }" v-model="checkedUserNodes"
-                :disable-check="disableCheck" />
-            </div>
+            <EbizTree ref="postTree" v-show="activeTab === 'GW'" checkable :items="postData"
+              :keys="{ label: 'label', value: 'bindid', children: 'childs' }" v-model="checkedPostNodes"
+              :disable-check="disableCheck" />
+            <EbizTree ref="employeeTree" v-show="activeTab === 'employee'" checkable :items="employeeData"
+              :keys="{ label: 'label', value: 'bindid', children: 'childs' }" v-model="checkedUserNodes"
+              :disable-check="disableCheck" />
           </div>
+        </div>
 
-          <!-- 右侧已选区域 -->
-          <div class="right-panel">
-            <div class="selected-title">已选择的部门、成员</div>
-            <div class="selected-count">共 {{ [...selectPreview, ...selectPreviewPost,...selectPreviewUser].length }} 项</div>
-            <div class="selected-list">
-              <div v-for="(item, index) in [...selectPreview,...selectPreviewPost,...selectPreviewUser]" :key="index"
-                class="selected-list-item">
-                <t-icon :name="getIconForType(item)" class="item-icon" />
-                <span class="selected-label">{{ item.label }}</span>
-                <t-icon name="close-circle" class="remove-icon" @click="removePreviewItem(item)" />
-              </div>
-              <div v-if="[...selectPreview,...selectPreviewPost, ...selectPreviewUser].length === 0" class="no-selection">
-                <t-icon name="info-circle" />
-                <span style="user-select: none">请在左侧选择部门或成员</span>
-              </div>
+        <!-- 右侧已选区域 -->
+        <div class="right-panel">
+          <div class="selected-title">已选择的部门、成员</div>
+          <div class="selected-count">共 {{ [...selectPreview, ...selectPreviewPost, ...selectPreviewUser].length }} 项
+          </div>
+          <div class="selected-list">
+            <div v-for="(item, index) in [...selectPreview, ...selectPreviewPost, ...selectPreviewUser]" :key="index"
+              class="selected-list-item">
+              <t-icon :name="getIconForType(item)" class="item-icon" />
+              <span class="selected-label">{{ item.label }}</span>
+              <t-icon name="close-circle" class="remove-icon" @click="removePreviewItem(item)" />
+            </div>
+            <div v-if="[...selectPreview, ...selectPreviewPost, ...selectPreviewUser].length === 0" class="no-selection">
+              <t-icon name="info-circle" />
+              <span style="user-select: none">请在左侧选择部门或成员</span>
             </div>
           </div>
         </div>
-      </EbizDialog>
+      </div>
+    </EbizDialog>
   </div>
 </template>
 
@@ -128,7 +123,7 @@ const dialogVisible = ref(false)
 const searchText = ref('')
 // 选中的节点
 const checkedNodes = ref([])
-const  checkedUserNodes = ref([]);
+const checkedUserNodes = ref([]);
 const checkedPostNodes = ref([])
 // 展开的节点
 const expandedNodes = ref([])
@@ -153,36 +148,36 @@ const postTree = ref()
 const fetchApiData = async () => {
   loading.value = true
   try {
-     dataService.fetch(
+    dataService.fetch(
       { keyWord: activeTab.value === 'organization' ? searchText.value : '' },
       {},
       '/appdata/execute/plugin?key=organizational_structure'
-    ).then(res=>{
-       organizationData.value = res || []
+    ).then(res => {
+      organizationData.value = res || []
     })
-     dataService.fetch(
-      {postEnable:true, keyWord:activeTab.value === 'employee' ? searchText.value : ''},
+    dataService.fetch(
+      { postEnable: true, keyWord: activeTab.value === 'employee' ? searchText.value : '' },
       {},
       "/appdata/execute/plugin?key=all_active_employesse"
-    ).then(res=>{
-      employeeData.value = (res || []).map(i=>({
-        label:i.name,
-        bindid:i.id,
-        type:'employee'
+    ).then(res => {
+      employeeData.value = (res || []).map(i => ({
+        label: i.name,
+        bindid: i.id,
+        type: 'employee'
       }));
     })
     dataService.fetch({
-      apiKey:'all_active_post',
-      queryParams:{
-       name:searchText.value,
-       status:true
-     }
-    },{
-    },'/appdata/process?key=all_active_post').then(res=>{
-      postData.value = (res?.data || []).map(i=>({
-        label:i.name,
-        bindid:i.id,
-        type:'GW'
+      apiKey: 'all_active_post',
+      queryParams: {
+        name: searchText.value,
+        status: true
+      }
+    }, {
+    }, '/appdata/process?key=all_active_post').then(res => {
+      postData.value = (res?.data || []).map(i => ({
+        label: i.name,
+        bindid: i.id,
+        type: 'GW'
       }))
     })
     console.log(postData.value)
@@ -210,7 +205,7 @@ function showDialog() {
   // 重置选中的节点
   checkedNodes.value = props.modelValue.filter(i => i.type === 'DEPT').map((item) => item.bindid);
   checkedUserNodes.value = props.modelValue.filter(i => i.type === 'employee').map((item) => item.bindid);
-  checkedPostNodes.value = props.modelValue.filter(i=>i.type === 'GW').map(item=>item.bindid);
+  checkedPostNodes.value = props.modelValue.filter(i => i.type === 'GW').map(item => item.bindid);
   dialogVisible.value = true
 }
 
@@ -220,7 +215,7 @@ function handleConfirm() {
     label: item.label,
     bindid: item.bindid,
     type: item.type
-  })), ...selectPreviewUser.value,...selectPreviewPost.value];
+  })), ...selectPreviewUser.value, ...selectPreviewPost.value];
   emit('update:modelValue', finalValue)
   emit('change', finalValue)
   console.log(finalValue)
@@ -234,24 +229,24 @@ function handleCancel() {
 
 // 移除已选择预览中的项目
 function removePreviewItem(item) {
-  let {selects,nodes} = {
-    'DEPT':{
-      selects:selectPreview.value,
-      nodes:checkedNodes.value
+  let { selects, nodes } = {
+    'DEPT': {
+      selects: selectPreview.value,
+      nodes: checkedNodes.value
     },
-    'GW':{
-      selects:selectPreviewPost.value,
-      nodes:checkedPostNodes.value
+    'GW': {
+      selects: selectPreviewPost.value,
+      nodes: checkedPostNodes.value
     },
-    'employee':{
-      selects:selectPreviewUser.value,
-      nodes:checkedUserNodes.value
+    'employee': {
+      selects: selectPreviewUser.value,
+      nodes: checkedUserNodes.value
     }
   }[item.type]
-    let index = selects.value.findIndex(i=>i.bindid === item.bindid);
-    const removedUser = selects.value[index];
-    selects.value.splice(index,1);
-    nodes.value = nodes.value.filter((value) => value !== removedUser.bindid)
+  let index = selects.value.findIndex(i => i.bindid === item.bindid);
+  const removedUser = selects.value[index];
+  selects.value.splice(index, 1);
+  nodes.value = nodes.value.filter((value) => value !== removedUser.bindid)
 }
 
 // 移除选中项
@@ -275,26 +270,33 @@ watch(
   },
   { deep: true }
 )
-watch(checkedUserNodes,nVal=>{
-  selectPreviewUser.value = employeeData.value.filter(i=>nVal.includes(i.bindid))
-},{deep:true})
-watch(checkedPostNodes,nVal=>{
-  selectPreviewPost.value = postData.value.filter(i=>nVal.includes(i.bindid))
-},{deep:true})
+watch(checkedUserNodes, nVal => {
+  // 获取新选中的用户数据
+  const newSelectedUsers = employeeData.value.filter(i => nVal.includes(i.bindid))
+  // 获取现有用户的bindid列表，避免重复添加
+  const existingBindIds = selectPreviewUser.value.map(user => user.bindid)
+  // 过滤出真正新增的用户（不在现有列表中的）
+  const usersToAdd = newSelectedUsers.filter(user => !existingBindIds.includes(user.bindid))
+  // 增量添加新用户到现有列表中
+  selectPreviewUser.value = [...selectPreviewUser.value, ...usersToAdd]
+}, { deep: true })
+watch(checkedPostNodes, nVal => {
+  selectPreviewPost.value = postData.value.filter(i => nVal.includes(i.bindid))
+}, { deep: true })
 // 监听modelValue变化，同步到选中节点
 watch(
   () => props.modelValue,
   (newValue) => {
-    checkedNodes.value = newValue.filter(i=>i.type === 'DEPT').map((item) => item.bindid);
+    checkedNodes.value = newValue.filter(i => i.type === 'DEPT').map((item) => item.bindid);
     checkedUserNodes.value = newValue.filter(i => i.type === 'employee').map((item) => item.bindid);
-    checkedPostNodes.value = newValue.filter(i=>i.type === 'GW').map(item=>item.bindid);
+    checkedPostNodes.value = newValue.filter(i => i.type === 'GW').map(item => item.bindid);
   },
-  { deep: true ,immediate:true}
+  { deep: true, immediate: true }
 )
-watch(activeTab,nVal=>{
+watch(activeTab, nVal => {
   searchText.value = ''
 })
-watch(searchText,nVal=>{
+watch(searchText, nVal => {
   fetchApiData()
 })
 </script>