@ebiz/designer-components 0.1.98 → 0.1.100

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>

package/src/components/senior/EbizSDialog/index.vue

@@ -14,7 +14,7 @@
     <t-dialog v-model:visible="dialogVisible" :header="title || computedTitle" :width="dialogWidth" :top="dialogTop"
       :attach="dialogAttach" :destroy-on-close="dialogDestroyOnClose" :mode="dialogMode" :placement="dialogPlacement"
       :show-overlay="dialogShowOverlay" :close-on-esc-keydown="dialogCloseOnEscKeydown"
-      :close-on-overlay-click="dialogCloseOnOverlayClick" :show-footer="dialogShowFooter" @close="handleDialogClose"
+      :close-on-overlay-click="dialogCloseOnOverlayClick" :confirm-btn="dialogShowFooterCompute" :cancel-btn="dialogShowFooterCompute" @close="handleDialogClose"
       @confirm="handleDialogConfirm" @cancel="handleDialogCancel">
       <template #header>
         <slot name="header">
@@ -302,6 +302,9 @@ const currentParams = ref({})
 // 本地维护一份表单数据的副本
 const initFormData = ref(props.formData ? { ...props.formData } : {})
 const localFormData = ref({ ...initFormData.value })
+const dialogShowFooterCompute = computed(() => {
+  return props.dialogShowFooter ? {} : null
+})
 
 // 监听 props.formData 的变化，同步到本地数据
 watch(() => props.formData, (newFormData) => {