<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>工单申请</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<link href="./css/mui.min.css" rel="stylesheet" />
|
<link href="./css/mui.picker.min.css" rel="stylesheet" />
|
<link href="./css/mui.poppicker.css" rel="stylesheet" />
|
<style>
|
.mui-bar-nav {
|
background: #245ca7;
|
}
|
.mui-title {
|
color: #FFFFFF;
|
}
|
.mui-icon-back:before, .mui-icon-left-nav:before {
|
color: #FFFFFF;
|
}
|
.mui-content{
|
margin: 0 5px;
|
}
|
.mui-input-row label {
|
width: 45%;
|
text-align: right;
|
padding: 16px 15px;
|
}
|
.mui-input-group .mui-input-row {
|
height: 50px;
|
}
|
.mui-input-row label~input{
|
width: 55%;
|
float: left;
|
text-align: right;
|
height: 50px;
|
}
|
.mui-input-group {
|
margin: 25px 0;
|
border-radius: 10px;
|
position: unset;
|
}
|
.mui-btn-block {
|
font-size: 18px;
|
display: block;
|
width: 100%;
|
margin-bottom: 10px;
|
padding: 10px 0;
|
}
|
</style>
|
</head>
|
<body>
|
<header class="mui-bar mui-bar-nav">
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
<h1 class="mui-title">工单申请</h1>
|
</header>
|
<div class="mui-content">
|
<form class="mui-input-group">
|
<div class="mui-input-row" style="display: none;">
|
<label>业务类型:</label>
|
<input id="type" type="text">
|
</div>
|
<div class="mui-input-row" style="display: none;">
|
<label>所属分库:</label>
|
<input id="deptId" type="text">
|
</div>
|
<div class="mui-input-row" style="display: none;">
|
<label>关联仓库:</label>
|
<input id="depotId" type="text">
|
</div>
|
<div class="mui-input-row">
|
<label>业务类型:</label>
|
<input id="typeName" type="text" readonly="readonly" onclick="searchType()" placeholder="请选择 >">
|
</div>
|
<div class="mui-input-row">
|
<label>所属分库:</label>
|
<input id="deptName" type="text" readonly="readonly" onclick="searchDept()" placeholder="请选择 >">
|
</div>
|
<div class="mui-input-row">
|
<label>关联仓库:</label>
|
<input id="depotName" type="text" readonly="readonly" onclick="searchDepot()" placeholder="请选择 >">
|
</div>
|
<div class="mui-input-row">
|
<label>有效开始时间:</label>
|
<input id="start" type="text" readonly="readonly" onclick="searchTime('start')" placeholder="请选择 >">
|
</div>
|
<div class="mui-input-row">
|
<label>有效截止时间:</label>
|
<input id="end" type="text" readonly="readonly" onclick="searchTime('end')" placeholder="请选择 >">
|
</div>
|
</form>
|
<div style="padding: 10px;">
|
<button class="mui-btn mui-btn-block mui-btn-green" onclick="applyOrder()">提交</button>
|
</div>
|
</div>
|
<script src="./js/mui.js"></script>
|
<script src="./js/jquery.min.js"></script>
|
<script src="./js/echarts.min.js"></script>
|
<script src="./js/mui.picker.min.js"></script>
|
<script src="./js/mui.poppicker.js"></script>
|
<script type="text/javascript" charset="utf-8">
|
mui.init();
|
var url; //接口路径
|
var deptList = null; //分库集合
|
var typeList = null; //类型集合
|
var depotList = null; //仓库集合
|
var deptTag = null
|
//获取分库、仓库、类型列表参数
|
var data1 = {
|
"interfaceId": "5701",
|
"sign": "10701",
|
"outId": "10701",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"type": "ORDER_TYPE",
|
}
|
};
|
//申请参数
|
var data2 = {
|
"interfaceId": "5702",
|
"sign": "10702",
|
"outId": "10702",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"type": "",
|
"deptId": "",
|
"depotId": "",
|
"start": "",
|
"end": "",
|
}
|
};
|
mui.plusReady(function() {
|
var user = JSON.parse(localStorage.getItem('user'));
|
data1.tokenAuth = user.tokenAuth;
|
data2.tokenAuth = user.tokenAuth;
|
url = user.url + "/api-phone/gateway";
|
getList();
|
})
|
|
//获取分库列表和类型列表
|
function getList() {
|
//发送请求获取分库列表和类型列表
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data1),
|
success: function(result) {
|
if (result.code == "0000") {
|
deptList = result.data.deptList;
|
typeList = result.data.typeList;
|
}
|
}
|
})
|
}
|
|
//工单申请
|
function applyOrder() {
|
data2.data.type = mui("#type")[0].value;
|
data2.data.deptId = mui("#deptId")[0].value;
|
data2.data.depotId = mui("#depotId")[0].value;
|
data2.data.start = mui("#start")[0].value;
|
data2.data.end = mui("#end")[0].value;
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data2),
|
success: function(result) {
|
if (result.code == "0000") {
|
mui.toast("申请成功！");
|
location.reload();
|
}
|
}
|
})
|
}
|
|
//业务类型选择
|
function searchType() {
|
if(typeList != null && typeList.length >0){
|
var arr = [];
|
$.each(typeList, function(index, item) {
|
arr.push({
|
value: item.code,
|
text: item.name
|
})
|
|
})
|
var typePicker = new mui.PopPicker();
|
typePicker.setData(arr);
|
|
typePicker.show(function(items) {
|
$("#type").val(items[0].value);
|
$("#typeName").val(items[0].text);
|
});
|
}else{
|
mui.toast("未获取到业务类型！")
|
}
|
}
|
|
//分库选择
|
function searchDept() {
|
if(deptList != null && deptList.length >0){
|
var arr = [];
|
$.each(deptList, function(index, item) {
|
arr.push({
|
value: item.id,
|
text: item.name
|
})
|
})
|
var deptPicker = new mui.PopPicker();
|
deptPicker.setData(arr);
|
|
deptPicker.show(function(items) {
|
$("#deptId").val(items[0].value);
|
$("#deptName").val(items[0].text);
|
deptTag = items[0].value;
|
});
|
}else{
|
mui.toast("未获取到分库列表！")
|
}
|
}
|
|
//仓库选择
|
function searchDepot() {
|
if(deptTag != null){
|
$.each(deptList, function(index, item) {
|
if(deptTag == item.id){
|
depotList = item.depotList;
|
}
|
})
|
if(depotList != null && depotList.length >0){
|
var arr = [];
|
$.each(depotList, function(index, item) {
|
arr.push({
|
value: item.depotId,
|
text: item.depotName
|
})
|
})
|
var depotPicker = new mui.PopPicker();
|
depotPicker.setData(arr);
|
depotPicker.show(function(items) {
|
$("#depotId").val(items[0].value);
|
$("#depotName").val(items[0].text);
|
});
|
}else{
|
mui.toast("该分库下无仓库列表！")
|
}
|
}else{
|
mui.toast("请先选择分库！")
|
}
|
}
|
|
//监听时间选择
|
function searchTime(tag) {
|
var dtPicker = new mui.DtPicker({
|
type: 'datetime',
|
beginDate: new Date(2010, 00, 01), //起始日期
|
value: getCurTime() //默认当前时间
|
});
|
dtPicker.show(function(selectItems) {
|
var y = selectItems.y.text; //获取选择的年
|
var m = selectItems.m.text; //获取选择的月
|
var d = selectItems.d.text; //获取选择的日
|
var h = selectItems.h.text; //获取选择的时
|
var i = selectItems.i.text; //获取选择的分
|
var dateTime = y + "-" + m + "-" + d + " " + h + ":" + i;
|
$("#" + tag).val(dateTime);
|
})
|
}
|
|
//获取当前时间(格式：yyyy-MM-dd HH:mm)
|
function getCurTime() {
|
var date = new Date();
|
var year = date.getFullYear();
|
var month, day, hour, min;
|
month = date.getMonth() + 1;
|
if (month >= 1 && month <= 9) {
|
month = "0" + month;
|
}
|
day = date.getDate();
|
if (day >= 1 && day <= 9) {
|
day = "0" + day;
|
}
|
hour = date.getHours();
|
if (hour >= 1 && hour <= 9) {
|
hour = "0" + hour;
|
}
|
min = date.getMinutes();
|
if (min >= 1 && min <= 9) {
|
min = "0" + min;
|
}
|
return year + "-" + month + "-" + day + " " + hour + ":" + min;
|
}
|
</script>
|
</body>
|
</html>
|
