@ebiz/designer-components 0.1.136 → 0.1.138

package/src/components/EbizTreeSelector.vue

@@ -1,470 +1,470 @@
-<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>
-    <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
-              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>
-        </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>
-      </div>
-    </EbizDialog>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref, watch } from 'vue'
-import {
-  Button as TButton,
-  Icon as TIcon,
-  Input as TInput,
-  Loading as TLoading,
-  TabPanel as TTabPanel,
-  Tabs as TTabs
-} from 'tdesign-vue-next'
-import EbizDialog from './TdesignDialog.vue'
-import EbizTree from './EbizTree.vue'
-import dataService from '../apiService/simpleDataService'
-
-const props = defineProps({
-  // 选中的数据，支持v-model
-  modelValue: {
-    type: Array,
-    default: () => []
-  },
-  // 树形数据，可以是单个数组或分类对象
-  data: {
-    type: [Array, Object],
-    default: () => []
-  },
-  // 禁用选择的节点
-  disableCheck: {
-    type: Function,
-    default: null
-  },
-  // 标题
-  title: {
-    type: String,
-    default: '选择人员/部门'
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'change'])
-
-// 弹窗显示状态
-const dialogVisible = ref(false)
-// 搜索文本
-const searchText = ref('')
-// 选中的节点
-const checkedNodes = ref([])
-const checkedUserNodes = ref([]);
-const checkedPostNodes = ref([])
-// 展开的节点
-const expandedNodes = ref([])
-// 当前活动的选项卡
-const activeTab = ref('organization')
-// 弹窗内预览的选中项
-const selectPreview = ref([])
-const selectPreviewUser = ref([])
-const selectPreviewPost = ref([])
-// 加载状态
-const loading = ref(false)
-// API返回的数据
-const organizationData = ref([])
-const employeeData = ref([])
-const postData = ref([]);
-
-const organizationTree = ref()
-const employeeTree = ref()
-const postTree = ref()
-
-// 获取API数据
-const fetchApiData = async () => {
-  loading.value = true
-  try {
-    // 加载部门
-    dataService.fetch(
-      { keyWord: activeTab.value === 'organization' ? searchText.value : '' },
-      {},
-      '/appdata/execute/plugin?key=organizational_structure'
-    ).then(res => {
-      organizationData.value = res || []
-      checkedNodes.value = props.modelValue.filter(i => i.type === 'DEPT').map((item) => item.bindid);
-      console.log("checkedNodes: {}", checkedNodes)
-    })
-
-    // 加载用户
-    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'
-      }));
-      checkedUserNodes.value = props.modelValue.filter(i => i.type === 'employee').map((item) => item.bindid);
-    })
-
-    // 加载岗位
-    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'
-      }))
-      checkedPostNodes.value = props.modelValue.filter(i => i.type === 'GW').map(item => item.bindid);
-    })
-    console.log(postData.value)
-  } catch (error) {
-  } finally {
-    loading.value = false
-  }
-}
-
-// 根据类型获取对应图标
-const getIconForType = (item) => {
-  const iconMap = {
-    GS: 'internet',
-    DEPT: 'folder',
-    GW: 'user-list',
-    employee: 'user'
-  }
-  return iconMap[item?.type] || 'user'
-}
-
-// 显示对话框
-function showDialog() {
-  // 获取API数据
-  fetchApiData()
-  // 重置选中的节点
-  // 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);
-  dialogVisible.value = true
-}
-
-// 确认选择
-function handleConfirm() {
-  const finalValue = [...selectPreview.value.map((item) => ({
-    label: item.label,
-    bindid: item.bindid,
-    type: item.type
-  })), ...selectPreviewUser.value, ...selectPreviewPost.value];
-  emit('update:modelValue', finalValue)
-  emit('change', finalValue)
-  console.log(finalValue)
-  dialogVisible.value = false
-}
-
-// 取消选择
-function handleCancel() {
-  dialogVisible.value = false
-}
-
-// 移除已选择预览中的项目
-function removePreviewItem(item) {
-  let { selects, nodes } = {
-    'DEPT': {
-      selects: selectPreview.value,
-      nodes: checkedNodes.value
-    },
-    'GW': {
-      selects: selectPreviewPost.value,
-      nodes: checkedPostNodes.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)
-}
-
-// 移除选中项
-function removeItem(index) {
-  const newValue = [...props.modelValue]
-  newValue.splice(index, 1)
-  emit('update:modelValue', newValue)
-  emit('change', newValue)
-}
-
-// 监听选中节点变化，同步到预览
-watch(
-  checkedNodes,
-  (newValues) => {
-    if (!organizationTree.value?.treeRef) return
-    console.log("部门选择变化", organizationTree.value.treeRef.getItem, newValues)
-    setTimeout(() => {
-      selectPreview.value = (newValues.map(organizationTree.value.treeRef.getItem) ?? []).map((i) => ({
-        label: i?.label,
-        type: i?.data?.type || i?.type,
-        bindid: i?.value
-      }))
-    }, 200)
-
-  },
-  { deep: true }
-)
-watch(checkedUserNodes, nVal => {
-  // 获取新选中的用户数据
-  console.log("用户选择变化")
-  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 => {
-  console.log("岗位选择变化")
-  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);
-    checkedUserNodes.value = newValue.filter(i => i.type === 'employee').map((item) => item.bindid);
-    checkedPostNodes.value = newValue.filter(i => i.type === 'GW').map(item => item.bindid);
-  },
-  { deep: true, immediate: true }
-)
-watch(activeTab, nVal => {
-  searchText.value = ''
-})
-watch(searchText, nVal => {
-  fetchApiData()
-})
-</script>
-
-<style scoped>
-.ebiz-tree-selector {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  min-height: 32px;
-}
-
-.selected-items {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.selected-item {
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.item-text {
-  margin-right: 4px;
-}
-
-.item-remove {
-  cursor: pointer;
-  color: #999;
-  font-size: 16px;
-}
-
-.item-remove:hover {
-  color: #ff4d4f;
-}
-
-.add-button {
-  display: flex;
-  align-items: center;
-}
-
-.selector-container {
-  display: flex;
-  height: 500px;
-}
-
-.left-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid #e0e0e0;
-  padding-right: 16px;
-}
-
-.right-panel {
-  width: 280px;
-  display: flex;
-  flex-direction: column;
-  padding-left: 16px;
-}
-
-.search-box {
-  margin-bottom: 12px;
-}
-
-.selector-tabs {
-  margin-bottom: 12px;
-}
-
-.tree-content {
-  flex: 1;
-  overflow: auto;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 12px;
-  position: relative;
-}
-
-.loading-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 255, 255, 0.7);
-}
-
-.selected-title {
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.selected-count {
-  color: #999;
-  font-size: 12px;
-  margin-bottom: 12px;
-}
-
-.selected-list {
-  flex: 1;
-  overflow: auto;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 8px;
-}
-
-.selected-list-item {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.selected-list-item:last-child {
-  border-bottom: none;
-}
-
-.item-icon {
-  color: #0052d9;
-  margin-right: 8px;
-}
-
-.selected-label {
-  flex: 1;
-  user-select: none;
-}
-
-.remove-icon {
-  color: #999;
-  cursor: pointer;
-}
-
-.remove-icon:hover {
-  color: #ff4d4f;
-}
-
-.no-selection {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #999;
-  gap: 8px;
-}
+<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>
+    <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
+              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>
+        </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>
+      </div>
+    </EbizDialog>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import {
+  Button as TButton,
+  Icon as TIcon,
+  Input as TInput,
+  Loading as TLoading,
+  TabPanel as TTabPanel,
+  Tabs as TTabs
+} from 'tdesign-vue-next'
+import EbizDialog from './TdesignDialog.vue'
+import EbizTree from './EbizTree.vue'
+import dataService from '../apiService/simpleDataService'
+
+const props = defineProps({
+  // 选中的数据，支持v-model
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 树形数据，可以是单个数组或分类对象
+  data: {
+    type: [Array, Object],
+    default: () => []
+  },
+  // 禁用选择的节点
+  disableCheck: {
+    type: Function,
+    default: null
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '选择人员/部门'
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// 弹窗显示状态
+const dialogVisible = ref(false)
+// 搜索文本
+const searchText = ref('')
+// 选中的节点
+const checkedNodes = ref([])
+const checkedUserNodes = ref([]);
+const checkedPostNodes = ref([])
+// 展开的节点
+const expandedNodes = ref([])
+// 当前活动的选项卡
+const activeTab = ref('organization')
+// 弹窗内预览的选中项
+const selectPreview = ref([])
+const selectPreviewUser = ref([])
+const selectPreviewPost = ref([])
+// 加载状态
+const loading = ref(false)
+// API返回的数据
+const organizationData = ref([])
+const employeeData = ref([])
+const postData = ref([]);
+
+const organizationTree = ref()
+const employeeTree = ref()
+const postTree = ref()
+
+// 获取API数据
+const fetchApiData = async () => {
+  loading.value = true
+  try {
+    // 加载部门
+    dataService.fetch(
+      { keyWord: activeTab.value === 'organization' ? searchText.value : '' },
+      {},
+      '/appdata/execute/plugin?key=organizational_structure'
+    ).then(res => {
+      organizationData.value = res || []
+      checkedNodes.value = props.modelValue.filter(i => i.type === 'DEPT').map((item) => item.bindid);
+      console.log("checkedNodes: {}", checkedNodes)
+    })
+
+    // 加载用户
+    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'
+      }));
+      checkedUserNodes.value = props.modelValue.filter(i => i.type === 'employee').map((item) => item.bindid);
+    })
+
+    // 加载岗位
+    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'
+      }))
+      checkedPostNodes.value = props.modelValue.filter(i => i.type === 'GW').map(item => item.bindid);
+    })
+    console.log(postData.value)
+  } catch (error) {
+  } finally {
+    loading.value = false
+  }
+}
+
+// 根据类型获取对应图标
+const getIconForType = (item) => {
+  const iconMap = {
+    GS: 'internet',
+    DEPT: 'folder',
+    GW: 'user-list',
+    employee: 'user'
+  }
+  return iconMap[item?.type] || 'user'
+}
+
+// 显示对话框
+function showDialog() {
+  // 获取API数据
+  fetchApiData()
+  // 重置选中的节点
+  // 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);
+  dialogVisible.value = true
+}
+
+// 确认选择
+function handleConfirm() {
+  const finalValue = [...selectPreview.value.map((item) => ({
+    label: item.label,
+    bindid: item.bindid,
+    type: item.type
+  })), ...selectPreviewUser.value, ...selectPreviewPost.value];
+  emit('update:modelValue', finalValue)
+  emit('change', finalValue)
+  console.log(finalValue)
+  dialogVisible.value = false
+}
+
+// 取消选择
+function handleCancel() {
+  dialogVisible.value = false
+}
+
+// 移除已选择预览中的项目
+function removePreviewItem(item) {
+  let { selects, nodes } = {
+    'DEPT': {
+      selects: selectPreview.value,
+      nodes: checkedNodes.value
+    },
+    'GW': {
+      selects: selectPreviewPost.value,
+      nodes: checkedPostNodes.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)
+}
+
+// 移除选中项
+function removeItem(index) {
+  const newValue = [...props.modelValue]
+  newValue.splice(index, 1)
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+
+// 监听选中节点变化，同步到预览
+watch(
+  checkedNodes,
+  (newValues) => {
+    if (!organizationTree.value?.treeRef) return
+    console.log("部门选择变化", organizationTree.value.treeRef.getItem, newValues)
+    setTimeout(() => {
+      selectPreview.value = (newValues.map(organizationTree.value.treeRef.getItem) ?? []).map((i) => ({
+        label: i?.label,
+        type: i?.data?.type || i?.type,
+        bindid: i?.value
+      }))
+    }, 200)
+
+  },
+  { deep: true }
+)
+watch(checkedUserNodes, nVal => {
+  // 获取新选中的用户数据
+  console.log("用户选择变化")
+  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 => {
+  console.log("岗位选择变化")
+  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);
+    checkedUserNodes.value = newValue.filter(i => i.type === 'employee').map((item) => item.bindid);
+    checkedPostNodes.value = newValue.filter(i => i.type === 'GW').map(item => item.bindid);
+  },
+  { deep: true, immediate: true }
+)
+watch(activeTab, nVal => {
+  searchText.value = ''
+})
+watch(searchText, nVal => {
+  fetchApiData()
+})
+</script>
+
+<style scoped>
+.ebiz-tree-selector {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+}
+
+.selected-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.selected-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.item-text {
+  margin-right: 4px;
+}
+
+.item-remove {
+  cursor: pointer;
+  color: #999;
+  font-size: 16px;
+}
+
+.item-remove:hover {
+  color: #ff4d4f;
+}
+
+.add-button {
+  display: flex;
+  align-items: center;
+}
+
+.selector-container {
+  display: flex;
+  height: 500px;
+}
+
+.left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e0e0e0;
+  padding-right: 16px;
+}
+
+.right-panel {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  padding-left: 16px;
+}
+
+.search-box {
+  margin-bottom: 12px;
+}
+
+.selector-tabs {
+  margin-bottom: 12px;
+}
+
+.tree-content {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 12px;
+  position: relative;
+}
+
+.loading-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.selected-title {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.selected-count {
+  color: #999;
+  font-size: 12px;
+  margin-bottom: 12px;
+}
+
+.selected-list {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.selected-list-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.selected-list-item:last-child {
+  border-bottom: none;
+}
+
+.item-icon {
+  color: #0052d9;
+  margin-right: 8px;
+}
+
+.selected-label {
+  flex: 1;
+  user-select: none;
+}
+
+.remove-icon {
+  color: #999;
+  cursor: pointer;
+}
+
+.remove-icon:hover {
+  color: #ff4d4f;
+}
+
+.no-selection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  gap: 8px;
+}
 </style>