2 <div class="row" style="border: 1px solid #cec8c8">
3 <div class="col-md-12" style="padding: 10px 0 5px;">
4 <div class="form-group">
5 <label class="col-md-2 control-label" style="font-size: 22px;">flowName</label>
7 <input v-if="flowName != 'main'" type="text" class="form-control" v-model="flowName" v-on:input='$emit("editFlowName", $event.target.value)' placeholder="please input flow name." />
8 <p style="font-size: 22px;" v-else>{{flowName}}</p>
12 <div class="col-md-12">
14 <div class="ibox-title">
15 <h5 class="text-success">Order</h5>
16 <div class="ibox-tools">
17 <a class="collapse-link">
18 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
22 <div class="ibox-content">
24 <button class="btn btn-success" type="button" id="new-order" v-on:click='addOrder'> <span class="bold">ADD ORDER</span></button>
25 <div class="col-md-3">
26 <span class="select-box" >
27 <select id="orderSelect" class="select form-control" v-model='orderSelected' >
28 <option value="1">Normal</option>
29 <option value="2">Switch</option>
30 <option value="3">Parallel</option>
36 <div id="normal-panel" v-show='orderSelected == 1'>
37 <div class="col-lg-11" id="normalform">
40 <div class="ibox border-ibox">
41 <div class="ibox-title">
43 <div class="ibox-tools">
44 <a class="collapse-link" >
45 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
49 <div class="ibox-content">
50 <!-- <div class="form-group">
51 <div class="col-lg-6 row"><label>name</label><input id="NName" type="name" placeholder="name" class="form-control"></div>
53 <div class="form-group">
54 <label class='headmsg control-label'>Step</label>
55 <div class='col-md-4'>
56 <select class="chooseStep form-control" id="NStep" v-model='normalStep'>
58 <option v-for='stepRef in stepsRefs' v-bind:value='stepRef'>{{ stepRef }}</option>
68 <div id="switch-panel" v-show='orderSelected == 2'>
71 <div class="col-lg-11">
72 <div class="ibox border-ibox float-e-margins">
73 <div class="ibox-title">
75 <div class="ibox-tools">
76 <button class="btn btn-success " type="button" id="new-case" v-on:click='addNewCase'> <span class="bold">New Case</span></button>
77 <a class="collapse-link" >
78 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
82 <div class="ibox-content">
85 <div class="form-group">
86 <label class="headmsg control-label">Value:</label>
87 <div class="col-md-5"><input type="text" class="case form-control" v-model='switchValue'></div>
91 <label class="headmsg control-label">Cases:</label>
92 <div class='col-md-12 row'>
93 <div class='col-md-offset-1' v-for='switchCase in switchCases' style='border-left-style: solid; border-left-color: gray; margin-bottom: 30px;'>
95 <div class="form-group">
96 <label class="headmsg control-label">CaseValue:</label>
97 <div class="col-md-5"><input type="text" class="case form-control" v-model='switchCase.value'></div>
101 <label class="headmsg control-label">Case:</label>
102 <div class="col-md-3">
103 <select class="myselect chooseStep form-control" v-model='switchCase.orderType'>
105 <option v-for='orderType in ["step", "flow"]' v-bind:value='orderType'>{{ orderType }}</option>
108 <div class="col-md-4">
109 <select class="myselect chooseStep form-control" v-model='switchCase.orderValue'>
111 <option v-if='switchCase.orderType == "step"' v-for='stepRef in stepsRefs' v-bind:value='stepRef'>{{ stepRef }}</option>
112 <option v-if='switchCase.orderType == "flow"' v-for='flowRef in filtedFlowsRefs' v-bind:value='flowRef'>{{ flowRef }}</option>
126 <div id="parallel-panel" v-show='orderSelected == 3'>
129 <div class="col-lg-11">
130 <div class="ibox border-ibox float-e-margins">
131 <div class="ibox-title">
133 <div class="ibox-tools">
134 <button class="btn btn-success " type="button" id="para-step" v-on:click='addNewBranch'> <span class="bold"><i class='fa fa-plus-square-o'></i> Branch</span></button>
135 <a class="collapse-link" >
136 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
141 <div class="ibox-content">
143 <div class='row'><label class="headmsg control-label">Branches:</label></div>
145 <div class='col-md-offset-1'>
146 <div v-for='branch in parallelBranches' class="row" style='border-left-style: solid; border-left-color: gray; margin-bottom: 20px; padding-top: 7px; padding-bottom: 7px;'>
147 <label class="headmsg control-label">Branch:</label>
148 <div class="col-md-3">
149 <select class="myselect chooseStep form-control" v-model='branch.orderType'>
151 <option v-for='orderType in ["step", "flow"]' v-bind:value='orderType'>{{ orderType }}</option>
154 <div class="col-md-4">
155 <select class="myselect chooseStep form-control" v-model='branch.orderValue'>
157 <option v-if='branch.orderType == "step"' v-for='stepRef in stepsRefs' v-bind:value='stepRef'>{{ stepRef }}</option>
158 <option v-if='branch.orderType == "flow"' v-for='flowRef in filtedFlowsRefs' v-bind:value='flowRef'>{{ flowRef }}</option>
175 <div class="ibox-title">
176 <h5 class="text-success">OrderList</h5>
177 <div class="ibox-tools">
178 <a class="collapse-link" >
179 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
183 <div class="ibox-content" id="order-list">
184 <div v-for='(order, index) in orderList' class='ibox float-e-margins' style='margin-bottom: 0;'>
185 <div class="ibox-title step">
186 <h5>Order #{{index+1}} <strong style='margin-left: 20px;'>{{['normal', 'switch', 'parallel'][order.type - 1]}}</strong> </h5>
187 <div class="ibox-tools">
188 <a class="collapse-link" >
189 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
191 <a class="close-link" v-on:click='removeOrder'>
192 <i class="fa fa-times"></i>
196 <div class="ibox-content">
197 <div v-if='order.type == 1' class="row">
198 <label class="control-label" style='padding-right: 20px;'> step: </label>
199 <label class="control-label"> {{ order.step }}</label>
201 <div v-if='order.type == 2' class="row">
203 <label class="control-label" style='padding-right: 20px;'> value: </label>
204 <label class="control-label"> {{order.value}} </label>
206 <div><label class="control-label"> cases: </label></div>
207 <div v-for='sCase in order.cases' class="row">
208 <label class="control-label col-md-offset-1"> -- <b>{{ sCase.value }}</b> : </label>
209 <label class='coltrol-label' style='margin-left: 20px;'>{{ sCase.orderValue }} [{{ sCase.orderType }}]</label>
212 <div v-if='order.type == 3' class="row">
213 <div><label class="control-label"> </label></div>
214 <div v-for='branch in order.branches' class="row">
215 <label class="control-label col-md-offset-1" style='padding-right: 20px;'> -- branch: </label>
216 <label class="control-label"> {{ branch.orderValue }} [{{ branch.orderType }}]</label>
229 props: ['stepsRefs', 'flowsRefs', 'flowName', 'orderList'],
232 event: 'editFlowName'
238 switchCases: [{'value': '', 'orderType': '', 'orderValue': ''}],
239 parallelBranches: [{'orderType': '', 'orderValue': ''}],
244 // this.selectPluginUpdate();
247 // this.selectPluginUpdate();
250 addOrder: function(){
251 var select = this.orderSelected;
253 if(this.normalStep == ""){
254 alert("Not completed!!!");
257 var temp = {type:1,step:this.normalStep};
258 this.orderList.push(temp);
259 this.normalStep = '';
263 for(var i=0; i<this.switchCases.length; ++i){
264 var caseValue = this.switchCases[i].value;
266 alert("Not completed!!!");
269 var caseOrderType = this.switchCases[i].orderType;
270 if(caseOrderType == ""){
271 alert("Not completed!!!");
274 var caseOrderValue = this.switchCases[i].orderValue;
275 if(caseOrderValue == ""){
276 alert("Not completed!!!");
279 caseList.push({value: caseValue, orderType: caseOrderType, orderValue: caseOrderValue});
281 temp = {type:2, value: this.switchValue, cases:caseList};
282 this.orderList.push(temp);
283 this.switchValue = '';
284 this.switchCases = [{value: '', orderType: '', orderValue: ''}];
288 var allStep = $('#parallel .chooseStep');
289 for(var i=0; i<this.parallelBranches.length; ++i){
290 var branchOrderType = this.parallelBranches[i].orderType;
291 if(branchOrderType == ""){
292 alert("Not completed!!!");
295 var branchOrderValue = this.parallelBranches[i].orderValue;
296 if(branchOrderValue == ""){
297 alert("Not completed!!!");
300 branchList.push({orderType: branchOrderType, orderValue: branchOrderValue});
302 temp = {type:3,branches:branchList};
303 this.orderList.push(temp);
304 this.parallelBranches = [{orderType: '', orderValue: ''}];
306 this.$emit("orderList", this.orderList);
308 removeOrder: function(index){
309 this.orderList.splice(index, 1);
311 addNewCase: function() {
312 this.switchCases.push({value: '', orderType: '', orderValue: ''});
314 addNewBranch: function() {
315 this.parallelBranches.push({step: ''});
317 collapseBox: function(event) {
318 console.log("collapse");
319 var ele = event.target;
322 var ibox = $(ele).closest('div.ibox');
323 var content = ibox.children('.ibox-content');
324 content.slideToggle(200);
325 $(ele).toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
329 filtedFlowsRefs: function() {
330 var subflowNameArr = [];
331 for(var i = 0; i < this.flowsRefs.length; i++) {
332 if(this.flowsRefs[i] != this.flowName) {
333 subflowNameArr.push(this.flowsRefs[i]);
336 return subflowNameArr;