Skip to content

Commit 07dc725

Browse files
cooling-jasoncooling-jason
committed
整合仿钉钉流程设计器 https://github.com/StavinLi/Workflow-Vue3 
1 parent d16194b commit 07dc725

File tree

6 files changed

+2330
-0
lines changed

6 files changed

+2330
-0
lines changed

‎src/components/SimpleProcessDesigner/src/addNode.vue

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
/* stylelint-disable order/properties-order */
2+
<template>
3+
<div class="add-node-btn-box">
4+
<div class="add-node-btn">
5+
<el-popover placement="right-start" v-model="visible" width="auto">
6+
<div class="add-node-popover-body">
7+
<a class="add-node-popover-item approver" @click="addType(1)">
8+
<div class="item-wrapper">
9+
<span class="iconfont"></span>
10+
</div>
11+
<p>审批人</p>
12+
</a>
13+
<a class="add-node-popover-item notifier" @click="addType(2)">
14+
<div class="item-wrapper">
15+
<span class="iconfont"></span>
16+
</div>
17+
<p>抄送人</p>
18+
</a>
19+
<a class="add-node-popover-item condition" @click="addType(4)">
20+
<div class="item-wrapper">
21+
<span class="iconfont"></span>
22+
</div>
23+
<p>条件分支</p>
24+
</a>
25+
</div>
26+
<template #reference>
27+
<button class="btn" type="button">
28+
<span class="iconfont"></span>
29+
</button>
30+
</template>
31+
</el-popover>
32+
</div>
33+
</div>
34+
</template>
35+
<script setup>
36+
import { ref } from 'vue'
37+
let props = defineProps({
38+
childNodeP: {
39+
type: Object,
40+
default: () => ({})
41+
}
42+
})
43+
let emits = defineEmits(['update:childNodeP'])
44+
let visible = ref(false)
45+
const addType = (type) => {
46+
visible.value = false
47+
if (type != 4) {
48+
var data
49+
if (type == 1) {
50+
data = {
51+
nodeName: '审核人',
52+
error: true,
53+
type: 1,
54+
settype: 1,
55+
selectMode: 0,
56+
selectRange: 0,
57+
directorLevel: 1,
58+
examineMode: 1,
59+
noHanderAction: 1,
60+
examineEndDirectorLevel: 0,
61+
childNode: props.childNodeP,
62+
nodeUserList: []
63+
}
64+
} else if (type == 2) {
65+
data = {
66+
nodeName: '抄送人',
67+
type: 2,
68+
ccSelfSelectFlag: 1,
69+
childNode: props.childNodeP,
70+
nodeUserList: []
71+
}
72+
}
73+
emits('update:childNodeP', data)
74+
} else {
75+
emits('update:childNodeP', {
76+
nodeName: '路由',
77+
type: 4,
78+
childNode: null,
79+
conditionNodes: [
80+
{
81+
nodeName: '条件1',
82+
error: true,
83+
type: 3,
84+
priorityLevel: 1,
85+
conditionList: [],
86+
nodeUserList: [],
87+
childNode: props.childNodeP
88+
},
89+
{
90+
nodeName: '条件2',
91+
type: 3,
92+
priorityLevel: 2,
93+
conditionList: [],
94+
nodeUserList: [],
95+
childNode: null
96+
}
97+
]
98+
})
99+
}
100+
}
101+
</script>
102+
<style scoped lang="scss">
103+
.add-node-btn-box {
104+
width: 240px;
105+
display: inline-flex;
106+
-ms-flex-negative: 0;
107+
flex-shrink: 0;
108+
-webkit-box-flex: 1;
109+
-ms-flex-positive: 1;
110+
position: relative;
111+
112+
&:before {
113+
content: '';
114+
position: absolute;
115+
top: 0;
116+
left: 0;
117+
right: 0;
118+
bottom: 0;
119+
z-index: -1;
120+
margin: auto;
121+
width: 2px;
122+
height: 100%;
123+
background-color: #cacaca;
124+
}
125+
126+
.add-node-btn {
127+
user-select: none;
128+
width: 240px;
129+
padding: 20px 0 32px;
130+
display: flex;
131+
-webkit-box-pack: center;
132+
justify-content: center;
133+
flex-shrink: 0;
134+
-webkit-box-flex: 1;
135+
flex-grow: 1;
136+
137+
.btn {
138+
outline: none;
139+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
140+
width: 30px;
141+
height: 30px;
142+
background: #3296fa;
143+
border-radius: 50%;
144+
position: relative;
145+
border: none;
146+
line-height: 30px;
147+
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
148+
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
149+
150+
.iconfont {
151+
color: #fff;
152+
font-size: 16px;
153+
}
154+
155+
&:hover {
156+
transform: scale(1.3);
157+
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
158+
}
159+
160+
&:active {
161+
transform: none;
162+
background: #1e83e9;
163+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
164+
}
165+
}
166+
}
167+
}
168+
169+
.add-node-popover-body {
170+
display: flex;
171+
172+
.add-node-popover-item {
173+
margin-right: 10px;
174+
cursor: pointer;
175+
text-align: center;
176+
flex: 1;
177+
color: #191f25 !important;
178+
179+
.item-wrapper {
180+
user-select: none;
181+
display: inline-block;
182+
width: 80px;
183+
height: 80px;
184+
margin-bottom: 5px;
185+
background: #fff;
186+
border: 1px solid #e2e2e2;
187+
border-radius: 50%;
188+
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
189+
190+
.iconfont {
191+
font-size: 35px;
192+
line-height: 80px;
193+
}
194+
}
195+
196+
&.approver {
197+
.item-wrapper {
198+
color: #ff943e;
199+
}
200+
}
201+
202+
&.notifier {
203+
.item-wrapper {
204+
color: #3296fa;
205+
}
206+
}
207+
208+
&.condition {
209+
.item-wrapper {
210+
color: #15bc83;
211+
}
212+
}
213+
214+
&:hover {
215+
.item-wrapper {
216+
background: #3296fa;
217+
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4);
218+
}
219+
220+
.iconfont {
221+
color: #fff;
222+
}
223+
}
224+
225+
&:active {
226+
.item-wrapper {
227+
box-shadow: none;
228+
background: #eaeaea;
229+
}
230+
231+
.iconfont {
232+
color: inherit;
233+
}
234+
}
235+
}
236+
}
237+
</style>

0 commit comments

Comments
 (0)