效果
index.php(数据库连接部分不写)
<!DOCTYPE html>
<html>
<head>
<style>
.tab_pos {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
/* 设置标签页外层容器样式 */
.tab-container {
width: 90%;
background-color: #fff;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 设置标签页选项卡的样式 */
.tab {
float: left;
width: 150px;
padding: 8px 16px;
background-color: #ddd;
cursor: pointer;
}
/* 设置选中的标签页样式 */
.active {
background-color: #409eff;
color: #fff;
}
/* 设置标签页内容的样式 */
.tab-content {
clear: both;
display: none;
padding: 16px;
background-color: #fff;
}
/* 切换页表格 */
.tab_tab {
border-collapse: collapse;
border: 1px solid #ddd;
}
.tab_tab th {
background-color: #ddd;
height: 35px;
line-height: 35px;
border: none;
}
.tab_tab td {
background-color: #fff;
height: 35px;
line-height: 35px;
border-bottom: 1px solid #ddd;
}
/* 无数据 */
.none_data {
text-align: center;
color: gray;
}
</style>
</head>
<body>
<div class="tab_pos">
<div class="tab-container">
<!-- 标签页选项卡 -->
<div class="tab active" onclick="openTab(event,'tab1')">供应商对应料号</div>
<div class="tab" onclick="openTab(event,'tab2')">供应商对应采购单</div>
<!-- 标签页内容 -->
<div id="tab1" class="tab-content" style="display:block;">
<table class="tab_tab">
<tr>
<th>供应商简称</th>
<th>料号</th>
<th>料号名称</th>
<th>规格型号</th>
<th>建立人</th>
<th>建立日期</th>
</tr>
<?php
//查询该供应商料号信息
$sql_selVI = "select a.*,c.item_name,c.item_desc
from vendors_itemno a,sf_item_no c
where a.vendor_code = '" . $_GET['UpdatevendorCode'] . "'
and a.item_no = c.item_no
";
$res_selVI = DB_query($sql_selVI, $db);
// echo $res_selVI;
if (DB_num_rows($res_selVI) > 0) {
while ($myrow = DB_fetch_array($res_selVI)) {
?>
<tr>
<td><?php echo $myrow['vendor_code'] ?></td>
<td><?php echo $myrow['item_no'] ?></td>
<td><?php echo $myrow['item_name'] ?></td>
<td><?php echo $myrow['item_desc'] ?></td>
<td><?php echo $myrow['created_by'] ?></td>
<td><?php echo date('Y-m-d H:i:s', $myrow['creation_date']) ?></td>
</tr>
<?php }
} else { ?>
<tr>
<td colspan="6" class="none_data">暂无数据</td>
</tr>
<?php } ?>
</table>
</div>
<div id="tab2" class="tab-content">
<table class="tab_tab">
<tr>
<th>采购单号</th>
<th>状态</th>
<th>备注</th>
<th>采购日期</th>
<th>需求日</th>
<th>下单日期</th>
<th>下单人</th>
</tr>
<?php
//查询该供应商料号信息
$sql_selPO = "SELECT DISTINCT
pha.po_num,
pha.status,
pha.note,
pha.creation_date,
pha.order_date,
pha.need_date,
pha.created_by
FROM po_headers_all pha,
po_lines_all pla,
vendors v
WHERE pla.po_num = pha.po_num
AND v.vendor_code = pha.vendor_code
AND v.vendor_code = '" . $_GET['UpdatevendorCode'] . "'
";
$res_selPO = DB_query($sql_selPO, $db);
// echo $res_selVI;
if (DB_num_rows($res_selPO) > 0) {
while ($myrowPO = DB_fetch_array($res_selPO)) {
?>
<tr>
<td><a href="<?php echo $RootPath ?>/SearchPO2.php?Updatepo_num=<?php echo $myrowPO['po_num'] ?>" target="_blank"><?php echo $myrowPO['po_num'] ?></a></td>
<td><?php echo $myrowPO['status'] ?></td>
<td><?php echo $myrowPO['note'] ?></td>
<td><?php echo date('Y-m-d', $myrowPO['order_date']) ?></td>
<td><?php echo date('Y-m-d', $myrowPO['need_date']) ?></td>
<td><?php echo date('Y-m-d H:i:s', $myrowPO['creation_date']) ?></td>
<td><?php echo $myrowPO['created_by'] ?></td>
</tr>
<?php }
} else { ?>
<tr>
<td colspan="7" class="none_data">暂无数据</td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
<script>
function openTab(event, tabName) {
// 获取所有标签页内容元素
var tabContent = document.getElementsByClassName("tab-content");
// 隐藏所有标签页内容
for (var i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
// 移除所有标签页选项卡的 active 类
var tabs = document.getElementsByClassName("tab");
for (var i = 0; i < tabs.length; i++) {
tabs[i].className = tabs[i].className.replace(" active", "");
}
// 显示当前选中标签页内容
document.getElementById(tabName).style.display = "block";
// 添加 active 类到当前选中标签页选项卡
event.currentTarget.className += " active";
}
</script>
</body>
</html>
