鞍钢鲅鱼圈能源管控系统前端代码
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-12-26 cb6cd26221d8bb2c4b1dca44a87332e9fe6f56ab
提交 | 用户 | 时间
cb6cd2 1 /* stylelint-disable order/properties-order */
H 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>