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