@sy-common/organize-select-help 1.0.0-beta.6 → 1.0.0-beta.7
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 +118 -115
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,90 @@
|
|
|
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="
|
|
60
|
+
<Button type="primary" icon="md-add" @click="addPostList">添加节点</Button>
|
|
35
61
|
</div>
|
|
36
62
|
</div>
|
|
37
|
-
</
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<div class="
|
|
44
|
-
<
|
|
45
|
-
<div class="
|
|
46
|
-
<
|
|
47
|
-
<
|
|
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>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
</TabPane>
|
|
65
|
-
<TabPane label="直接选择人员" name="name3">
|
|
66
|
-
<div class="tab">
|
|
67
|
-
<Input v-model="staffSearch" @on-blur="queryAllStaffList" placeholder="搜索组织节点"/>
|
|
68
|
-
<div class="tree staff-content">
|
|
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>
|
|
74
|
-
</div>
|
|
75
|
-
<div class="checked-icon" v-show="item.checked">✔</div>
|
|
63
|
+
</div>
|
|
64
|
+
</TabPane>
|
|
65
|
+
<TabPane label="选择人员" name="staff">
|
|
66
|
+
<div class="tab">
|
|
67
|
+
<Input v-model="staffSearch" @on-blur="queryAllStaffList" placeholder="搜索组织节点"/>
|
|
68
|
+
<div class="tree staff-content">
|
|
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
|
-
<div class="bottom-select">
|
|
79
|
-
<div>当前已选择 <span class="num">{{getCheckedStaff}}</span>人</div>
|
|
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>
|
|
94
77
|
</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>
|
|
78
|
+
<div class="bottom-select">
|
|
79
|
+
<div>当前已选择 <span class="num">{{getCheckedStaff}}</span>人</div>
|
|
80
|
+
<Button type="primary" icon="md-add" @click="addStaffList">添加人员</Button>
|
|
101
81
|
</div>
|
|
102
82
|
</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>
|
|
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>
|
|
116
94
|
</div>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
95
|
+
<div class="group-list-content">
|
|
96
|
+
<p class="list-item flex-r-bt" v-for="(item,index) in orgList" :ket="index">
|
|
97
|
+
<span>{{ item.title }}</span>
|
|
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>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
<!-- 组织节点+岗位条件：//-->
|
|
104
|
+
<div>
|
|
105
|
+
<div class="group-box flex-r-bt">
|
|
106
|
+
<div>岗位条件+组织节点：</div>
|
|
107
|
+
<div class="clear-btn" @click="clearPost">清除全部</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="group-list-content">
|
|
110
|
+
<p class="list-item flex-r-bt" v-for="(item,index) in postList">
|
|
111
|
+
<span>{{item.positionName}}-{{item.title}}</span>
|
|
112
|
+
<img class="clear-icon" src="./assets/delete.png" alt="" @click="clearPostByIndex(index)">
|
|
113
|
+
</p>
|
|
114
|
+
<p style="color:#CCCCCC" class="list-item" v-if="!postList.length">未选择岗位条件+组织节点</p>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
<!-- 直接选择人员：-->
|
|
118
|
+
<div>
|
|
119
|
+
<div class="group-box flex-r-bt">
|
|
120
|
+
<div>直接选择人员：</div>
|
|
121
|
+
<div class="clear-btn" @click="clearStaff">清除全部</div>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="group-list-content">
|
|
124
|
+
<p class="list-item flex-r-bt" v-for="(item,index) in staffList" :key="item.id">
|
|
125
|
+
<span>{{item.name}}</span>
|
|
126
|
+
<img class="clear-icon" src="./assets/delete.png" alt="" @click="clearStaffByIndex(index)">
|
|
127
|
+
</p>
|
|
128
|
+
<p style="color:#CCCCCC" class="list-item" v-if="!staffList.length">未选择直接选择人员</p>
|
|
130
129
|
</div>
|
|
131
130
|
</div>
|
|
132
131
|
</div>
|
|
133
132
|
</div>
|
|
134
133
|
</div>
|
|
135
|
-
</
|
|
134
|
+
</div>
|
|
135
|
+
</Modal>
|
|
136
136
|
</template>
|
|
137
137
|
<script>
|
|
138
138
|
import organizeTree from './organize-tree.vue'
|
|
@@ -148,12 +148,16 @@ export default {
|
|
|
148
148
|
data:{
|
|
149
149
|
type:Object,
|
|
150
150
|
default:{}
|
|
151
|
+
},
|
|
152
|
+
name:{
|
|
153
|
+
value:String,
|
|
154
|
+
default:"org"
|
|
151
155
|
}
|
|
152
156
|
},
|
|
153
157
|
data(){
|
|
154
158
|
return {
|
|
159
|
+
tabName:this.name,
|
|
155
160
|
modal:false,
|
|
156
|
-
name:'name1',
|
|
157
161
|
dialogOpen:false,
|
|
158
162
|
orgSearch:'',
|
|
159
163
|
//组织--right-form
|
|
@@ -294,11 +298,12 @@ export default {
|
|
|
294
298
|
this.staffList.splice(index,1)
|
|
295
299
|
},
|
|
296
300
|
confirm(){
|
|
297
|
-
|
|
301
|
+
const v = {
|
|
298
302
|
orgList:this.orgList,
|
|
299
303
|
postList:this.postList,
|
|
300
304
|
staffList:this.staffList
|
|
301
|
-
}
|
|
305
|
+
}
|
|
306
|
+
this.$emit('confirm',deepCopy(v))
|
|
302
307
|
},
|
|
303
308
|
visibleChange(val){
|
|
304
309
|
this.$emit('input',val);
|
|
@@ -352,7 +357,7 @@ export default {
|
|
|
352
357
|
.icon-tip{
|
|
353
358
|
width: 16px;
|
|
354
359
|
height: 16px;
|
|
355
|
-
background:
|
|
360
|
+
background: var(--primary-color);
|
|
356
361
|
border-radius: 50%;
|
|
357
362
|
color: #fff;
|
|
358
363
|
line-height: 16px;
|
|
@@ -420,7 +425,7 @@ export default {
|
|
|
420
425
|
margin-left:10px;
|
|
421
426
|
font-weight: bold;
|
|
422
427
|
&.active{
|
|
423
|
-
background:
|
|
428
|
+
background: var(--primary-color);
|
|
424
429
|
border-radius: 4px;
|
|
425
430
|
color: #fff;
|
|
426
431
|
}
|
|
@@ -483,7 +488,7 @@ export default {
|
|
|
483
488
|
}
|
|
484
489
|
.checked-icon{
|
|
485
490
|
margin-left:auto;
|
|
486
|
-
color
|
|
491
|
+
color:var(--primary-color);
|
|
487
492
|
font-size:18px;
|
|
488
493
|
}
|
|
489
494
|
}
|
|
@@ -559,7 +564,5 @@ export default {
|
|
|
559
564
|
justify-content: space-between;
|
|
560
565
|
}
|
|
561
566
|
}
|
|
562
|
-
/deep/.ivu-modal-body-no-scrollbar-width :not([class^="ivu-table"])::-webkit-scrollbar{
|
|
563
|
-
}
|
|
564
567
|
}
|
|
565
568
|
</style>
|