二期需求完成
rdpnr_hemingxia
parent
a118d193a6
commit
083ddd344d
|
|
@ -1,28 +1,165 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||||
<head>
|
<head>
|
||||||
<th:block th:include="include :: header('关联合同')" />
|
<th:block th:include="include :: header('维保查询')" />
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
/*width: 100%;*/
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px 0;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 30px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #e74c3c;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.tableBOx{
|
||||||
|
width:70vw;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
width: 80px;
|
||||||
|
|
||||||
|
}
|
||||||
|
input[type="text"] {
|
||||||
|
width: 100%;
|
||||||
|
padding:5px 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width:100px;
|
||||||
|
padding:0;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #e74c3c;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: #c0392b;
|
||||||
|
}
|
||||||
|
.topBox{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.topBox .title{
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped {
|
||||||
|
display: flex;justify-content: flex-start;flex-direction: column;align-items: center
|
||||||
|
}
|
||||||
|
.table-striped thead{
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
.table-striped thead th{
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.table-striped tbody td{
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.tabBtn{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="gray-bg">
|
<body class="gray-bg">
|
||||||
<div class="col-sm-12 select-table table-striped" >
|
<div class="col-sm-12 select-table table-striped" >
|
||||||
|
<div class="topBox">
|
||||||
|
<div class="title">单条查询</div>
|
||||||
|
<div style="color: #dd242a">H3C产品保修条款</div>
|
||||||
|
</div>
|
||||||
|
<p>(不支持第三方信息查询)</p>
|
||||||
|
<div class="container">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="serialNumber">序列号</label>
|
||||||
|
<input type="text" id="serialNumber" placeholder="请输入序列号">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="productCode">产品号</label>
|
||||||
|
<input type="text" id="productCode" placeholder="请输入产品号">
|
||||||
|
</div>
|
||||||
|
<button type="button" onclick="getData()">查询</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
<h2>查询结果</h2>
|
<h2>查询结果</h2>
|
||||||
<h4 style="margin-top: 40px;">产品信息</h4>
|
<h4 style="margin-top: 20px;">产品信息</h4>
|
||||||
<table>
|
<table class="tableBOx" id="tableBOx">
|
||||||
<tr>
|
<thead>
|
||||||
<th>硬件序列号</th>
|
<tr>
|
||||||
<th>产品号</th>
|
<th>硬件序列号</th>
|
||||||
<th>产品描述</th>
|
<th>产品号</th>
|
||||||
<th>产品线描述</th>
|
<th>产品描述</th>
|
||||||
<th>区域</th>
|
<th>产品线描述</th>
|
||||||
</tr>
|
<th>区域</th>
|
||||||
<tr>
|
</tr>
|
||||||
<td>2131340A.CZ02300002M</td>
|
</thead>
|
||||||
<td>313048.C</td>
|
<tbody>
|
||||||
<td>H3C Workspace 云桌面许可证</td>
|
</tbody>
|
||||||
<td>云产品</td>
|
|
||||||
<td>CN</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
</table>
|
||||||
|
<div >
|
||||||
|
<div style="margin: 20px 0;">
|
||||||
|
<span id="btn1" class="tabBtn" onclick="changeTab(0)" style="background: #dd242a;color: #fff">合同</span>
|
||||||
|
<!-- <span id="btn2" class="tabBtn" onclick="changeTab(1)">标准保修</span>-->
|
||||||
|
</div>
|
||||||
|
<table class="tableBOx" id="tableBOx2">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>服务项目识别号</th>
|
||||||
|
<th>合同类型</th>
|
||||||
|
<th>服务级别</th>
|
||||||
|
<th>服务级别描述</th>
|
||||||
|
<th>服务项</th>
|
||||||
|
<th>服务项描述</th>
|
||||||
|
<th>开始时间</th>
|
||||||
|
<th>结束时间</th>
|
||||||
|
<th>状态</th>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<table class="tableBOx" id="tableBOx3" style="display: none">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>硬件序列号</th>
|
||||||
|
<th>产品号</th>
|
||||||
|
<th>产品描述</th>
|
||||||
|
<th>产品线描述</th>
|
||||||
|
<th>区域</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<th:block th:include="include :: footer" />
|
<th:block th:include="include :: footer" />
|
||||||
|
|
||||||
|
|
@ -32,10 +169,63 @@
|
||||||
getData()
|
getData()
|
||||||
});
|
});
|
||||||
function getData() {
|
function getData() {
|
||||||
|
let serialNumber=$('#serialNumber').val()
|
||||||
|
let productCode=$('#productCode').val()
|
||||||
|
|
||||||
$.operate.get("/system/product/query",{isTable:0}, function (res){
|
$.operate.get(`/system/product/query?productCode=${productCode}&serialNumber=${serialNumber}`, function (res){
|
||||||
|
let str=`<tr><td colspan="5" style="text-align: center">暂无数据</td></tr>`
|
||||||
|
if(res.data.length){
|
||||||
|
str=``
|
||||||
|
res.data.forEach((ele)=>{
|
||||||
|
str+=`<tr>
|
||||||
|
<td>${ele.serialNumber}</td>
|
||||||
|
<td>${ele.model}</td>
|
||||||
|
<td>${ele.description}</td>
|
||||||
|
<td>${ele.productName}</td>
|
||||||
|
<td>${ele.model}</td>
|
||||||
|
</tr>`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$('#tableBOx tbody').html(str)
|
||||||
})
|
})
|
||||||
|
$.operate.get(`/manage/order/query?productCode=${productCode}&serialNumber=${serialNumber}`, function (res){
|
||||||
|
let str=`<tr><td colspan="9" style="text-align: center">暂无数据</td></tr>`
|
||||||
|
if(res.data.length){
|
||||||
|
str=``
|
||||||
|
res.data.forEach((ele)=>{
|
||||||
|
str+=`<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>${ele.orderType=='zq'?'直签合同':'代理合同'}</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td>${ele.createdAt}</td>
|
||||||
|
<td></td>
|
||||||
|
|
||||||
|
<td>${ele.statua==0?'有效':'无效'}</td>
|
||||||
|
|
||||||
|
</tr>`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$('#tableBOx2 tbody').html(str)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function changeTab(show) {
|
||||||
|
if(!show){
|
||||||
|
$('#btn1').css({'background': '#dd242a','color':'#fff'})
|
||||||
|
$('#btn2').css({'background': '#fff','color':'#333'})
|
||||||
|
|
||||||
|
$('#tableBOx2').show()
|
||||||
|
$('#tableBOx3').hide()
|
||||||
|
}else{
|
||||||
|
$('#tableBOx3').show()
|
||||||
|
$('#tableBOx2').hide()
|
||||||
|
$('#btn2').css({'background': '#dd242a','color':'#fff'})
|
||||||
|
$('#btn1').css({'background': '#fff','color':'#333'})
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue