<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.steps-container {<!-- -->
display: flex;
flex-direction: column;
justify-content: space-between;
}
.step {<!-- -->
position: relative;
/*width: 100%;*/
padding-bottom: 20px;
padding-left: 70px; /* Spacing on the left side of the dot */
}
.step.active .step-circle {<!-- -->
background-color: teal;
color: #fff;
}
.step-line {<!-- -->
position: absolute;
top: 0;
left: 20px; /* The position on the left side of the line */
width: 2px;
height: 100%;
background-color: #ddd;
z-index: -1; /* The line is below the dot */
}
.step:last-child .step-line {<!-- -->
display: none; /* The last step does not require lines */
}
.step-circle {<!-- -->
position: absolute;
left: 0;
top: 20px;
transform: translateY(-50%);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background-color: #ddd;
text-align: center;
font-size: 14px;
color: #333;
}
.step.active .step-circle {<!-- -->
background-color: teal;
color: #fff;
}
#table1 {<!-- -->
border-collapse: collapse;
width: 90%;
margin: 0 auto;
text-align:center;
}
#table1 td {<!-- -->
border: 0px solid #ccc;
padding: 2px;
text-align: left;
}
#table2 {<!-- -->
border-collapse: collapse;
width: 90%;
margin: 0 auto;
text-align:center;
}
#table2 td {<!-- -->
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
img{<!-- -->
border-radius:50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<table id = "table1">
<tr>
<td rowspan="3"><img src="//i2.wp.com/thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5w suQ/132" width="70px" height=" 70px" ; /></td>
<td>Mongolian wedding dress Buryat style</td>
</tr>
<tr>
<td>Customer: Ulyasu</td>
</tr>
<tr>
<td>WeChat:13009502995</td>
</tr>
</table>
<table id = "table2">
<tr>
<td>Height</td>
<td>Weight</td>
<td>Weight</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
<td>Weight</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
<td ><a href="" style="color: red;">More parameters>></a></td>
</tr>
</table>
</div><!--//content-->
<br></br>
<div class="steps-container">
<div class="step">
<div class="step-line"></div>
<div class="step-circle" >1</div>
<div>
<h3 style = "color: black;"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp;Shopping guide to receive orders</h3>
<p style="font-size: 20px;">
" 20px" height="20px"/>
<input type="checkbox" name="step01" value="Guo Bingqiang" />Guo Bingqiang
" 20px" height="20px"/>
<input type="checkbox" name="step01" value="Yu Li"/>Yu Li
" 20px" height="20px"/>
<input type="checkbox" name="step01" value="Test 1"/>Test 1
</p>
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle">2</div>
<div>
<h3 style = "color: black;"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp;Cutting order</h3>
<p style="font-size: 20px;">
" 20px" height="20px"/>
<input type="checkbox" name="step01" value="Guo Bingqiang" />Guo Bingqiang
" 20px" height="20px"/>
<input type="checkbox" name="step01" value="Yu Li"/>Yu Li
" 20px" height="20px"/>
<input type="checkbox" name="step01" value="Test 1"/>Test 1
</p>
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle" style="background-color: red;">3</div>
<div>
<h3 style = "color: black;"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp;Sewing order</h3>
<p style="font-size: 20px;">
<img src="//i2.wp.com/thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height= "20px"/>
<input type="checkbox" name="step02" value="Liu Jinping" />Liu Jinping
<img src="//i2.wp.com/thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height= "20px"/>
<input type="checkbox" name="step02" value="Fu Liyun" />Fu Liyun
<img src="//i2.wp.com/thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height= "20px"/>
<input type="checkbox" name="step02" value="Hui Jianfang" />Hui Jianfang
<img src="//i2.wp.com/thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height= "20px"/>
<input type="checkbox" name="step02" value="Zhang Ailing" />Zhang Ailing
<img src="//i2.wp.com/thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height= "20px"/>
<input type="checkbox" name="step02" value="Zhang Junfang" />Zhang Junfang
<img src="//i2.wp.com/thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height= "20px"/>
<input type="checkbox" name="step02" value="Chen Runhong" />Chen Runhong
<img src="//i2.wp.com/thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height= "20px"/>
<input type="checkbox" name="step02" value="Test 2" />Test 2
</p>
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle">4</div>
<div>
<h3 class="sub-title" style = "color: black;"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp;Button dispatch</h3>
<p style="font-size: 20px;">
" 20px" height="20px"/>
<input type="checkbox" name="step03" value="Lkhagvasuren" />Lkhagvasuren
" 20px" height="20px"/>
<input type="checkbox" name="step03" value="Test 3" />Test 3
</p>
</div>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle">5</div>
<div>
<h3 class="sub-title" style = "color: black;"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp;Quality Inspection Dispatch</h3>
<p style="font-size: 20px;">
" 20px" height="20px"/>
<input type="checkbox" name="step04" value="NaRiSu" />NaRiSu
" 20px" height="20px"/>
<input type="checkbox" name="step04" value="Test 4" />Test 4
</p>
</div>
</div>
</div>
<div style="text-align: center;">
<button type="button" onclick="getCheckBox()" style="font-size: 20px; height:50px ;width: 400px; background-color: red;">Confirm dispatch</ button>
& amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp;
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
<script>
function workFlowView(){<!-- -->
window.open("http://39.104.17.29:7077/strutsJspAjax/index002.html");
}
function getCheckBox(){<!-- -->
var arr = new Array();
var arr01 = new Array();
var items = document.getElementsByName("step01");
for (i = 0; i < items.length; i + + ) {<!-- -->
if (items[i].checked) {<!-- -->
arr01.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr01.length==0){<!-- -->
alert("Please select the person in the first step");
return;
}
var arr02 = new Array();
var items = document.getElementsByName("step02");
for (i = 0; i < items.length; i + + ) {<!-- -->
if (items[i].checked) {<!-- -->
arr02.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr02.length==0){<!-- -->
alert("Please select the person in the second step");
return;
}
var arr03 = new Array();
var items = document.getElementsByName("step03");
for (i = 0; i < items.length; i + + ) {<!-- -->
if (items[i].checked) {<!-- -->
arr03.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr03.length==0){<!-- -->
alert("Please select the person in step 3");
return;
}
var arr04 = new Array();
var items = document.getElementsByName("step04");
for (i = 0; i < items.length; i + + ) {<!-- -->
if (items[i].checked) {<!-- -->
arr04.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr04.length==0){<!-- -->
alert("Please select the person in step 4");
return;
}
let that=this
let url = window.location.href
//let url = "http://www.menggu100.com:7077/strutsJspAjax/index001.html?orderIdByGrj=202308354657941354008000";
let p=url.split('?')[2]
let params=new URLSearchParams(p)
params.get('orderNo');
\t\t\t
$.ajax({<!-- -->
type:"post",
url:"SendOrderAction?method=excuteAjax & amp;personNames=" + arr.toString() + " & amp;orderNo=" + params.get('orderNo'),
data:{<!-- -->//Set data source
},
dataType:"json",//Set the data type to be returned
success:function(data){<!-- -->
var returnWebData = eval("(" + data + ")");//Convert the data into json type. You can output the data using alert() to see what kind of structure it is.
if(returnWebData.order_no=="yes"){<!-- -->
alert("The dispatch task has been issued!");
}else if(returnWebData.Warning=="insertSuccess"){<!-- -->
alert("The dispatch task was issued successfully!");
}else{<!-- -->
}
},
error:function(){<!-- -->
//alert("System exception, please try again later!");
}//Do not add "," here
});
};
layui.use(function(){<!-- -->
var layer = layui.layer;
var util = layui.util;
// event
util.on('lay-on', {<!-- -->
"test-confirm01": function(){<!-- -->
layer.confirm('Confirm that the process has been executed? It cannot be modified after clicking the OK button!', {<!-- -->icon: 3}, function(){<!-- -->
}, function(){<!-- -->
});
},
"test-confirm02": function(){<!-- -->
layer.confirm('Confirm that the process has been executed? It cannot be modified after clicking the OK button!', {<!-- -->icon: 3}, function(){<!-- -->
}, function(){<!-- -->
});
},
})
});
</script>
</body>
</html>
