@ebiz/designer-components 0.0.19-beta.1 → 0.0.19-beta.2
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/package.json
CHANGED
|
@@ -1,46 +1,47 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ebiz-tree-selector">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
<div class="selected-items" v-if="modelValue && modelValue.length">
|
|
4
|
+
<div v-for="(item, index) in modelValue" :key="index" class="selected-item">
|
|
5
|
+
<span class="item-text">{{ item.label }}</span>
|
|
6
|
+
<span class="item-remove" @click="removeItem(index)">×</span>
|
|
7
|
+
</div>
|
|
7
8
|
</div>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
<!-- 选项卡 -->
|
|
26
|
-
<t-tabs v-model="activeTab" class="selector-tabs">
|
|
27
|
-
<t-tab-panel value="organization" label="组织架构" :destroyOnHide="false">
|
|
28
|
-
|
|
29
|
-
</t-tab-panel>
|
|
30
|
-
<!-- <t-tab-panel value="department" label="部门"></t-tab-panel> -->
|
|
31
|
-
<!-- <t-tab-panel value="position" label="岗位"></t-tab-panel> -->
|
|
32
|
-
<t-tab-panel value="employee" label="员工"></t-tab-panel>
|
|
33
|
-
</t-tabs>
|
|
34
|
-
|
|
35
|
-
<!-- 树形结构区域 -->
|
|
36
|
-
<div class="tree-content">
|
|
37
|
-
<div v-if="loading" class="loading-container">
|
|
38
|
-
<t-loading />
|
|
9
|
+
<t-button @click="showDialog" variant="text" theme="primary" size="small"> 添加 </t-button>
|
|
10
|
+
|
|
11
|
+
<EbizDialog attach="body" :zIndex="10000" v-model:visible="dialogVisible" header="选择人员/部门" width="800px"
|
|
12
|
+
placement="center" confirmBtn="确定" cancelBtn="取消" @confirm="handleConfirm" @cancel="handleCancel"
|
|
13
|
+
@close="handleCancel">
|
|
14
|
+
<div class="selector-container">
|
|
15
|
+
<!-- 左侧选择区域 -->
|
|
16
|
+
<div class="left-panel">
|
|
17
|
+
<!-- 顶部搜索区域 -->
|
|
18
|
+
<div class="search-box">
|
|
19
|
+
<t-input v-model="searchText" placeholder="搜索成员、部门或标签" clearable>
|
|
20
|
+
<template #suffix-icon>
|
|
21
|
+
<t-icon name="search"></t-icon>
|
|
22
|
+
</template>
|
|
23
|
+
</t-input>
|
|
39
24
|
</div>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
25
|
+
|
|
26
|
+
<!-- 选项卡 -->
|
|
27
|
+
<t-tabs v-model="activeTab" class="selector-tabs">
|
|
28
|
+
<t-tab-panel value="organization" label="组织架构" :destroyOnHide="false">
|
|
29
|
+
|
|
30
|
+
</t-tab-panel>
|
|
31
|
+
<!-- <t-tab-panel value="department" label="部门"></t-tab-panel> -->
|
|
32
|
+
<!-- <t-tab-panel value="position" label="岗位"></t-tab-panel> -->
|
|
33
|
+
<t-tab-panel value="employee" label="员工"></t-tab-panel>
|
|
34
|
+
</t-tabs>
|
|
35
|
+
|
|
36
|
+
<!-- 树形结构区域 -->
|
|
37
|
+
<div class="tree-content">
|
|
38
|
+
<div v-if="loading" class="loading-container">
|
|
39
|
+
<t-loading />
|
|
40
|
+
</div>
|
|
41
|
+
<EbizTree ref="organizationTree" v-show="activeTab === 'organization'" checkable :items="organizationData"
|
|
42
|
+
v-model="checkedNodes" v-model:expanded="expandedNodes" :disable-check="disableCheck"
|
|
43
|
+
:keys="{ label: 'name', value: 'id', children: 'childs' }" />
|
|
44
|
+
<!-- <EbizTree
|
|
44
45
|
v-else-if="activeTab === 'department'"
|
|
45
46
|
checkable
|
|
46
47
|
:items="filteredData."
|
|
@@ -54,31 +55,31 @@
|
|
|
54
55
|
v-model="checkedNodes"
|
|
55
56
|
:disable-check="disableCheck"
|
|
56
57
|
/> -->
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
<EbizTree ref="employeeTree" v-show="activeTab === 'employee'" checkable :items="employeeData"
|
|
59
|
+
:keys="{ label: 'label', value: 'bindid', children: 'childs' }" v-model="checkedUserNodes"
|
|
60
|
+
:disable-check="disableCheck" />
|
|
61
|
+
</div>
|
|
60
62
|
</div>
|
|
61
|
-
</div>
|
|
62
63
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
64
|
+
<!-- 右侧已选区域 -->
|
|
65
|
+
<div class="right-panel">
|
|
66
|
+
<div class="selected-title">已选择的部门、成员</div>
|
|
67
|
+
<div class="selected-count">共 {{ [...selectPreview, ...selectPreviewUser].length }} 项</div>
|
|
68
|
+
<div class="selected-list">
|
|
69
|
+
<div v-for="(item, index) in [...selectPreview,...selectPreviewUser]" :key="index"
|
|
70
|
+
class="selected-list-item">
|
|
71
|
+
<t-icon :name="getIconForType(item)" class="item-icon" />
|
|
72
|
+
<span class="selected-label">{{ item.label }}</span>
|
|
73
|
+
<t-icon name="close-circle" class="remove-icon" @click="removePreviewItem(item)" />
|
|
74
|
+
</div>
|
|
75
|
+
<div v-if="[...selectPreview, ...selectPreviewUser].length === 0" class="no-selection">
|
|
76
|
+
<t-icon name="info-circle" />
|
|
77
|
+
<span style="user-select: none">请在左侧选择部门或成员</span>
|
|
78
|
+
</div>
|
|
77
79
|
</div>
|
|
78
80
|
</div>
|
|
79
81
|
</div>
|
|
80
|
-
</
|
|
81
|
-
</EbizDialog>
|
|
82
|
+
</EbizDialog>
|
|
82
83
|
</div>
|
|
83
84
|
</template>
|
|
84
85
|
|