243 lines
7.6 KiB
HTML
243 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
|
<head>
|
|
<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: 10px 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;
|
|
font-weight: 600;
|
|
|
|
}
|
|
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: 30px 0 10px;
|
|
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: #f5f5f5 !important;
|
|
}
|
|
.table-striped thead th{
|
|
padding: 10px;
|
|
}
|
|
.table-striped tbody td{
|
|
padding: 10px;
|
|
}
|
|
.tabBtn{
|
|
display: inline-block;
|
|
padding:8px 10px;
|
|
cursor: pointer;
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="gray-bg">
|
|
<div class="col-sm-12 select-table table-striped" >
|
|
<div class="topBox">
|
|
<div class="title">产品维保查询 <span>(不支持第三方信息查询)</span></div>
|
|
<!-- <div style="color: #dd242a">H3C产品保修条款</div>-->
|
|
</div>
|
|
<div class="container">
|
|
<div class="form-group">
|
|
<label for="serialNumber">序列号</label>
|
|
<input type="text" id="serialNumber" placeholder="请输入产品序列号">
|
|
</div>
|
|
<button type="button" onclick="getData()">查询</button>
|
|
|
|
</div>
|
|
<div style="font-size: 20px;text-align: left;width: 70vw;margin: 10px 0">查询结果</div>
|
|
<div style="font-size: 16px;text-align: left;width: 70vw;font-weight: 600;"><blockquote style="border-left-color: #dd242a">产品信息</blockquote> </div>
|
|
<table class="tableBOx" id="tableBOx">
|
|
<thead>
|
|
<tr>
|
|
<th>序列号</th>
|
|
<th>产品编码</th>
|
|
<th>产品描述</th>
|
|
<th>产品名称</th>
|
|
<th>区域</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
<div >
|
|
<div style="margin: 20px 0;">
|
|
<span id="tab1" class="tabBtn" onclick="changeTab(0)" style="background: #dd242a;color: #fff">相关合同</span>
|
|
<span id="tab2" 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>
|
|
<th:block th:include="include :: footer" />
|
|
|
|
|
|
<script>
|
|
$(function() {
|
|
});
|
|
|
|
function getData() {
|
|
let serialNumber=$('#serialNumber').val()
|
|
$.operate.get(`/manage/service/product?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>CN</td>
|
|
</tr>`
|
|
})
|
|
}
|
|
$('#tableBOx tbody').html(str)
|
|
})
|
|
$.operate.get(`/manage/service/order?serialNumber=${serialNumber}`, function (res){
|
|
let str=`<tr><td colspan="9" style="text-align: center">暂无数据</td></tr>`
|
|
if(res.data && res.data.length){
|
|
str=``
|
|
res.data.forEach((ele)=>{
|
|
str+=`<tr>
|
|
<td>${ele.orderCode}</td>
|
|
<td>${ele.versionCode}</td>
|
|
<td>${ele.orderName}</td>
|
|
<td>${ele.saleName}</td>
|
|
<td>${ele.saleEmail}</td>
|
|
<td>${ele.customerName}</td>
|
|
<td>${ele.contactPerson}</td>
|
|
<td>${ele.contactPhone}</td>
|
|
<td>${ele.contactEmail}</td>
|
|
</tr>`
|
|
})
|
|
}
|
|
$('#tableBOx2 tbody').html(str)
|
|
})
|
|
$.operate.get(`/manage/service/query?serialNumber=${serialNumber}`, function (res){
|
|
let str=`<tr><td colspan="9" style="text-align: center">暂无数据</td></tr>`
|
|
if(res.data && res.data.length){
|
|
str=``
|
|
res.data.forEach((ele)=>{
|
|
str+=`<tr>
|
|
<td>${ele.serviceLevel}</td>
|
|
<td>${ele.serviceDescribe}</td>
|
|
<td>${ele.serviceStartTime}</td>
|
|
<td>${ele.serviceEndTime}</td>
|
|
<td>有效</td>
|
|
</tr>`
|
|
})
|
|
}
|
|
$('#tableBOx3 tbody').html(str)
|
|
})
|
|
}
|
|
function changeTab(show) {
|
|
if(!show){
|
|
$('#tab1').css({'background': '#dd242a','color':'#fff'})
|
|
$('#tab2').css({'background': '#fff','color':'#333'})
|
|
|
|
$('#tableBOx2').show()
|
|
$('#tableBOx3').hide()
|
|
}else{
|
|
$('#tableBOx3').show()
|
|
$('#tableBOx2').hide()
|
|
$('#tab2').css({'background': '#dd242a','color':'#fff'})
|
|
$('#tab1').css({'background': '#fff','color':'#333'})
|
|
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |