@sy-common/organize-select-help 1.0.0-beta.6 → 1.0.0-beta.9
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 +1 -1
- package/src/index.vue +174 -122
package/package.json
CHANGED
package/src/index.vue
CHANGED
|
@@ -1,20 +1,46 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
<Modal
|
|
3
|
+
title=""
|
|
4
|
+
v-model="modal"
|
|
5
|
+
@on-ok="confirm"
|
|
6
|
+
@on-visible-change="visibleChange "
|
|
7
|
+
width="1180"
|
|
8
|
+
:mask-closable="false"
|
|
9
|
+
class="modal-tree"
|
|
10
|
+
>
|
|
11
|
+
<div slot="header" class="header-text"><Icon type="md-information" class="icon-tip" />人员选择</div>
|
|
12
|
+
<div class="content-container">
|
|
13
|
+
<div class="tree-orig">
|
|
14
|
+
<div class="tab-content">
|
|
15
|
+
<Tabs :value="tabName">
|
|
16
|
+
<TabPane label="选择组织节点" name="org">
|
|
17
|
+
<div class="tab">
|
|
18
|
+
<Input v-model="orgSearch" placeholder="搜索组织节点"/>
|
|
19
|
+
<div class="tag-content">
|
|
20
|
+
<span>快捷选择：</span>
|
|
21
|
+
<div class="tag-list">
|
|
22
|
+
<span class="tag" v-for="item in tagList" :key="item.key">{{item.v}}</span>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="tree">
|
|
26
|
+
<organizeTree @handleChange="getOrgList" ref="organizeTree"></organizeTree>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="bottom-select">
|
|
29
|
+
<CheckboxGroup v-model="includeLevelOrg">
|
|
30
|
+
<Checkbox label="01">
|
|
31
|
+
<span>包含下级组织节点</span>
|
|
32
|
+
</Checkbox>
|
|
33
|
+
</CheckboxGroup>
|
|
34
|
+
<Button type="primary" icon="md-add" @click="addOrgList">添加节点</Button>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</TabPane>
|
|
38
|
+
<TabPane label="选择岗位" name="post">
|
|
39
|
+
<div class="tab post">
|
|
40
|
+
<div class="left">
|
|
41
|
+
<div v-for="item in positiontList" :class="[item.checked&&'active']" :key="item.positionId" @click="getPosionId(item)">{{ item.positionName }}</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="right">
|
|
18
44
|
<Input v-model="orgSearch" placeholder="搜索组织节点"/>
|
|
19
45
|
<div class="tag-content">
|
|
20
46
|
<span>快捷选择：</span>
|
|
@@ -23,116 +49,92 @@
|
|
|
23
49
|
</div>
|
|
24
50
|
</div>
|
|
25
51
|
<div class="tree">
|
|
26
|
-
<organizeTree @handleChange="
|
|
52
|
+
<organizeTree @handleChange="getPostList" ref="postTree"></organizeTree>
|
|
27
53
|
</div>
|
|
28
54
|
<div class="bottom-select">
|
|
29
|
-
<CheckboxGroup v-model="
|
|
55
|
+
<CheckboxGroup v-model="includeLevelPost">
|
|
30
56
|
<Checkbox label="01">
|
|
31
57
|
<span>包含下级组织节点</span>
|
|
32
58
|
</Checkbox>
|
|
33
59
|
</CheckboxGroup>
|
|
34
|
-
<Button type="primary" icon="md-add" @click="
|
|
35
|
-
</div>
|
|
36
|
-
</div>
|
|
37
|
-
</TabPane>
|
|
38
|
-
<TabPane label="选择组织节点和岗位" name="name2">
|
|
39
|
-
<div class="tab post">
|
|
40
|
-
<div class="left">
|
|
41
|
-
<div v-for="item in positiontList" :class="[item.checked&&'active']" :key="item.positionId" @click="getPosionId(item)">{{ item.positionName }}</div>
|
|
42
|
-
</div>
|
|
43
|
-
<div class="right">
|
|
44
|
-
<Input v-model="orgSearch" placeholder="搜索组织节点"/>
|
|
45
|
-
<div class="tag-content">
|
|
46
|
-
<span>快捷选择：</span>
|
|
47
|
-
<div class="tag-list">
|
|
48
|
-
<span class="tag" v-for="item in tagList" :key="item.key">{{item.v}}</span>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="tree">
|
|
52
|
-
<organizeTree @handleChange="getPostList" ref="postTree"></organizeTree>
|
|
53
|
-
</div>
|
|
54
|
-
<div class="bottom-select">
|
|
55
|
-
<CheckboxGroup v-model="includeLevelPost">
|
|
56
|
-
<Checkbox label="01">
|
|
57
|
-
<span>包含下级组织节点</span>
|
|
58
|
-
</Checkbox>
|
|
59
|
-
</CheckboxGroup>
|
|
60
|
-
<Button type="primary" icon="md-add" @click="addPostList">添加节点</Button>
|
|
61
|
-
</div>
|
|
60
|
+
<Button type="primary" icon="md-add" @click="addPostList">添加节点</Button>
|
|
62
61
|
</div>
|
|
63
62
|
</div>
|
|
64
|
-
</
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
</
|
|
75
|
-
<div class="checked-icon" v-show="item.checked">✔</div>
|
|
63
|
+
</div>
|
|
64
|
+
</TabPane>
|
|
65
|
+
<TabPane label="选择人员" name="staff">
|
|
66
|
+
<div class="tab" style="position:relative;">
|
|
67
|
+
<Input v-model="staffSearch" @on-blur="searchStaff" @on-enter="searchStaff" placeholder="搜索人员"/>
|
|
68
|
+
<div class="tree staff-content" @scroll="handleScroll">
|
|
69
|
+
<div :class="['gust-item',item.checked && 'staff-active']" v-for="item in staffAllList" :key="item.id" @click="handlestaff(item)">
|
|
70
|
+
<div class="left-panel">{{item.name && item.name.slice(0,1) || ''}}</div>
|
|
71
|
+
<div class="right-panel">
|
|
72
|
+
<p>{{item.name}}</p>
|
|
73
|
+
<p>{{item.orgNodeName}}</p>
|
|
76
74
|
</div>
|
|
75
|
+
<div class="checked-icon" v-show="item.checked">✔</div>
|
|
77
76
|
</div>
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
<Button type="primary" icon="md-add" @click="addStaffList">添加人员</Button>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
</TabPane>
|
|
84
|
-
</Tabs>
|
|
85
|
-
</div>
|
|
86
|
-
<div class="form-content">
|
|
87
|
-
<p>已选择条件 <span class="num">（{{getCheckTypenum}}）</span></p>
|
|
88
|
-
<div class="node-list">
|
|
89
|
-
<!-- 组织节点条件：-->
|
|
90
|
-
<div>
|
|
91
|
-
<div class="group-box flex-r-bt">
|
|
92
|
-
<div>组织节点条件：</div>
|
|
93
|
-
<div class="clear-btn" @click="clearGroup">清除全部</div>
|
|
77
|
+
<p v-if="staffEnding" style="color:#CCCCCC;text-align: center">---我也是有底线的---</p>
|
|
78
|
+
<Spin v-if="loadingStaff" size="large" fix />
|
|
94
79
|
</div>
|
|
95
|
-
<div class="
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
<img class="clear-icon" src="./assets/delete.png" alt="" @click="clearOrgByIndex(index)">
|
|
99
|
-
</p>
|
|
100
|
-
<p style="color:#CCCCCC" class="list-item" v-if="!orgList.length">未选择组织节点</p>
|
|
80
|
+
<div class="bottom-select">
|
|
81
|
+
<div>当前已选择 <span class="num">{{getCheckedStaff}}</span>人</div>
|
|
82
|
+
<Button type="primary" icon="md-add" @click="addStaffList">添加人员</Button>
|
|
101
83
|
</div>
|
|
102
84
|
</div>
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<p style="color:#CCCCCC" class="list-item" v-if="!postList.length">未选择组织节点+岗位条件</p>
|
|
115
|
-
</div>
|
|
85
|
+
</TabPane>
|
|
86
|
+
</Tabs>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="form-content">
|
|
89
|
+
<p>已选择条件 <span class="num">（{{getCheckTypenum}}）</span></p>
|
|
90
|
+
<div class="node-list">
|
|
91
|
+
<!-- 组织节点条件：-->
|
|
92
|
+
<div>
|
|
93
|
+
<div class="group-box flex-r-bt">
|
|
94
|
+
<div>组织节点条件：</div>
|
|
95
|
+
<div class="clear-btn" @click="clearGroup">清除全部</div>
|
|
116
96
|
</div>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
97
|
+
<div class="group-list-content">
|
|
98
|
+
<p class="list-item flex-r-bt" v-for="(item,index) in orgList" :ket="index">
|
|
99
|
+
<span>{{ item.title }}</span>
|
|
100
|
+
<img class="clear-icon" src="./assets/delete.png" alt="" @click="clearOrgByIndex(index)">
|
|
101
|
+
</p>
|
|
102
|
+
<p style="color:#CCCCCC" class="list-item" v-if="!orgList.length">未选择组织节点</p>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<!-- 组织节点+岗位条件：//-->
|
|
106
|
+
<div>
|
|
107
|
+
<div class="group-box flex-r-bt">
|
|
108
|
+
<div>岗位条件+组织节点：</div>
|
|
109
|
+
<div class="clear-btn" @click="clearPost">清除全部</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="group-list-content">
|
|
112
|
+
<p class="list-item flex-r-bt" v-for="(item,index) in postList">
|
|
113
|
+
<span>{{item.positionName}}-{{item.title}}</span>
|
|
114
|
+
<img class="clear-icon" src="./assets/delete.png" alt="" @click="clearPostByIndex(index)">
|
|
115
|
+
</p>
|
|
116
|
+
<p style="color:#CCCCCC" class="list-item" v-if="!postList.length">未选择岗位条件+组织节点</p>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
<!-- 直接选择人员：-->
|
|
120
|
+
<div>
|
|
121
|
+
<div class="group-box flex-r-bt">
|
|
122
|
+
<div>直接选择人员：</div>
|
|
123
|
+
<div class="clear-btn" @click="clearStaff">清除全部</div>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="group-list-content">
|
|
126
|
+
<p class="list-item flex-r-bt" v-for="(item,index) in staffList" :key="item.id">
|
|
127
|
+
<span>{{item.name}}</span>
|
|
128
|
+
<img class="clear-icon" src="./assets/delete.png" alt="" @click="clearStaffByIndex(index)">
|
|
129
|
+
</p>
|
|
130
|
+
<p style="color:#CCCCCC" class="list-item" v-if="!staffList.length">未选择直接选择人员</p>
|
|
130
131
|
</div>
|
|
131
132
|
</div>
|
|
132
133
|
</div>
|
|
133
134
|
</div>
|
|
134
135
|
</div>
|
|
135
|
-
</
|
|
136
|
+
</div>
|
|
137
|
+
</Modal>
|
|
136
138
|
</template>
|
|
137
139
|
<script>
|
|
138
140
|
import organizeTree from './organize-tree.vue'
|
|
@@ -148,12 +150,16 @@ export default {
|
|
|
148
150
|
data:{
|
|
149
151
|
type:Object,
|
|
150
152
|
default:{}
|
|
153
|
+
},
|
|
154
|
+
name:{
|
|
155
|
+
value:String,
|
|
156
|
+
default:"org"
|
|
151
157
|
}
|
|
152
158
|
},
|
|
153
159
|
data(){
|
|
154
160
|
return {
|
|
161
|
+
tabName:this.name,
|
|
155
162
|
modal:false,
|
|
156
|
-
name:'name1',
|
|
157
163
|
dialogOpen:false,
|
|
158
164
|
orgSearch:'',
|
|
159
165
|
//组织--right-form
|
|
@@ -169,6 +175,10 @@ export default {
|
|
|
169
175
|
staffSearch:'',
|
|
170
176
|
staffAllList:[],
|
|
171
177
|
staffList:[],
|
|
178
|
+
loadingStaff:false,
|
|
179
|
+
lastLoadingTime:0,
|
|
180
|
+
offset:0,
|
|
181
|
+
staffEnding:false,
|
|
172
182
|
tagList:[{
|
|
173
183
|
v:'所选市公司所有部门',
|
|
174
184
|
on:false,
|
|
@@ -182,7 +192,7 @@ export default {
|
|
|
182
192
|
},
|
|
183
193
|
mounted() {
|
|
184
194
|
this.queryPositionList()
|
|
185
|
-
this.
|
|
195
|
+
this.loadMore()
|
|
186
196
|
},
|
|
187
197
|
methods:{
|
|
188
198
|
queryPositionList(){
|
|
@@ -194,15 +204,58 @@ export default {
|
|
|
194
204
|
}
|
|
195
205
|
})
|
|
196
206
|
},
|
|
207
|
+
searchStaff(){
|
|
208
|
+
this.staffEnding = false;
|
|
209
|
+
this.offset = 0
|
|
210
|
+
this.staffAllList = []
|
|
211
|
+
this.loadMore()
|
|
212
|
+
},
|
|
197
213
|
queryAllStaffList(){
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
214
|
+
return new Promise((resolve,reject)=>{
|
|
215
|
+
ajax.get('/pub-manage-server/pub/personHelpBox/q/queryAllStaffList',{
|
|
216
|
+
params:{
|
|
217
|
+
search:this.staffSearch,
|
|
218
|
+
offset:this.offset,
|
|
219
|
+
limit:10,
|
|
220
|
+
}
|
|
221
|
+
}).then((res)=>{
|
|
222
|
+
if(res.data.code === 1){
|
|
223
|
+
let resp = res.data.data
|
|
224
|
+
resolve(resp)
|
|
225
|
+
}else{
|
|
226
|
+
reject(false)
|
|
227
|
+
}
|
|
228
|
+
})
|
|
204
229
|
})
|
|
205
230
|
},
|
|
231
|
+
handleScroll(e){
|
|
232
|
+
const { scrollTop, clientHeight, scrollHeight } = e.target;
|
|
233
|
+
if (scrollHeight - (scrollTop + clientHeight) < 50) {
|
|
234
|
+
this.loadMore();
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
async loadMore(){
|
|
238
|
+
let nowTime = Date.now()
|
|
239
|
+
if (this.loadingStaff || this.staffEnding || (nowTime - this.lastLoadingTime < 1000)) return
|
|
240
|
+
this.loadingStaff = true
|
|
241
|
+
try {
|
|
242
|
+
console.log("--触底加载---")
|
|
243
|
+
let res = await this.queryAllStaffList()
|
|
244
|
+
let list = res.rows;
|
|
245
|
+
list.map((item)=>item.checked=false)
|
|
246
|
+
this.staffAllList = this.staffAllList.concat(list)
|
|
247
|
+
this.offset += 10;
|
|
248
|
+
this.loadingStaff = false
|
|
249
|
+
this.lastLoadingTime = Date.now()
|
|
250
|
+
if(res.total===this.staffAllList.length){
|
|
251
|
+
this.staffEnding = true
|
|
252
|
+
}
|
|
253
|
+
}catch (e){
|
|
254
|
+
this.loadingStaff = false
|
|
255
|
+
this.lastLoadingTime = Date.now()
|
|
256
|
+
console.log(e)
|
|
257
|
+
}
|
|
258
|
+
},
|
|
206
259
|
getOrgList(data){
|
|
207
260
|
this.proOrgList = data
|
|
208
261
|
},
|
|
@@ -294,11 +347,12 @@ export default {
|
|
|
294
347
|
this.staffList.splice(index,1)
|
|
295
348
|
},
|
|
296
349
|
confirm(){
|
|
297
|
-
|
|
350
|
+
const v = {
|
|
298
351
|
orgList:this.orgList,
|
|
299
352
|
postList:this.postList,
|
|
300
353
|
staffList:this.staffList
|
|
301
|
-
}
|
|
354
|
+
}
|
|
355
|
+
this.$emit('confirm',deepCopy(v))
|
|
302
356
|
},
|
|
303
357
|
visibleChange(val){
|
|
304
358
|
this.$emit('input',val);
|
|
@@ -352,7 +406,7 @@ export default {
|
|
|
352
406
|
.icon-tip{
|
|
353
407
|
width: 16px;
|
|
354
408
|
height: 16px;
|
|
355
|
-
background:
|
|
409
|
+
background: var(--primary-color);
|
|
356
410
|
border-radius: 50%;
|
|
357
411
|
color: #fff;
|
|
358
412
|
line-height: 16px;
|
|
@@ -420,7 +474,7 @@ export default {
|
|
|
420
474
|
margin-left:10px;
|
|
421
475
|
font-weight: bold;
|
|
422
476
|
&.active{
|
|
423
|
-
background:
|
|
477
|
+
background: var(--primary-color);
|
|
424
478
|
border-radius: 4px;
|
|
425
479
|
color: #fff;
|
|
426
480
|
}
|
|
@@ -483,7 +537,7 @@ export default {
|
|
|
483
537
|
}
|
|
484
538
|
.checked-icon{
|
|
485
539
|
margin-left:auto;
|
|
486
|
-
color
|
|
540
|
+
color:var(--primary-color);
|
|
487
541
|
font-size:18px;
|
|
488
542
|
}
|
|
489
543
|
}
|
|
@@ -559,7 +613,5 @@ export default {
|
|
|
559
613
|
justify-content: space-between;
|
|
560
614
|
}
|
|
561
615
|
}
|
|
562
|
-
/deep/.ivu-modal-body-no-scrollbar-width :not([class^="ivu-table"])::-webkit-scrollbar{
|
|
563
|
-
}
|
|
564
616
|
}
|
|
565
617
|
</style>
|