<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>板材库存查询系统</title>
<script src="https://code.jquery.com/jquery
-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/
bootstrap@5.3.0
-alpha1/dist/
css/
bootstrap.min.
css" rel="stylesheet">
<!
-- 引入 Popper.js 和
Bootstrap JS
-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/
[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
bootstrap@5.3.0
-alpha1/dist/js/
bootstrap.min.js"></script>
<script src="../js/main.js"></script>
<style>
.card
-header {
background: linear
-gradient(to right, #1e3c72, #2a5298);
color: white;
}
.search
-section {
box
-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border
-radius: 10px;
}
.result
-section {
max
-height: 70vh;
overflow: auto;
border
-left: 3px solid #1e3c72;
}
.table
-hover tbody tr:hover {
background
-color: rgba(42, 82, 152, 0.05);
}
.material
-kucun {
font
-weight: 700;
color: #1e3c72;
}
.material
-kucun
-low {
color: #dc3545 !important;
}
.no
-results {
min
-height: 200px;
display: flex;
align
-items: center;
justify
-content: center;
}
.stats
-card {
border
-radius: 8px;
box
-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
body {
background
-color: #f8f9fa;
padding
-bottom: 2rem;
}
.search
-control {
position: relative;
}
.search
-icon {
position: absolute;
left: 12px;
top: 12px;
color: #6c757d;
}
.form
-control.with
-icon {
padding
-left: 35px;
}
.highlight {
background
-color: rgba(255, 255, 0, 0.3) !important;
}
.info
-badge {
font
-size: 0.8rem;
font
-weight: normal;
}
</style>
</head>
<body>
<div
class="container py
-4">
<!
-- 标题部分
-->
<div
class="text
-center mb
-4">
<h1
class="text
-primary"><i
class="bi bi
-boxes"></i> 板材库存管理系统</h1>
<p
class="text
-muted">查询订单、产品、板材及库存信息</p>
</div>
<!
-- 统计卡片
-->
<div
class="row mb
-4">
<div
class="col
-md
-3">
<div
class="card stats
-card border
-primary">
<div
class="card
-body">
<h5
class="card
-title">订单总数</h5>
<p
class="card
-text fs
-3 text
-primary" id="orderCount">0</p>
</div>
</div>
</div>
<div
class="col
-md
-3">
<div
class="card stats
-card border
-info">
<div
class="card
-body">
<h5
class="card
-title">产品种类</h5>
<p
class="card
-text fs
-3 text
-info" id="productCount">0</p>
</div>
</div>
</div>
<div
class="col
-md
-3">
<div
class="card stats
-card border
-success">
<div
class="card
-body">
<h5
class="card
-title">板材库存</h5>
<p
class="card
-text fs
-3 text
-success" id="materialCount">0</p>
</div>
</div>
</div>
<div
class="col
-md
-3">
<div
class="card stats
-card border
-warning">
<div
class="card
-body">
<h5
class="card
-title">库存总量</h5>
<p
class="card
-text fs
-3 text
-warning" id="totalStock">0</p>
</div>
</div>
</div>
</div>
<!
-- 搜索区域
-->
<div
class="card search
-section mb
-4">
<div
class="card
-header">
<h5
class="mb
-0"><i
class="bi bi
-search me
-2"></i>高级搜索</h5>
</div>
<div
class="card
-body">
<div
class="row g
-3">
<!
-- 订单搜索
-->
<div
class="col
-md
-6">
<div
class="search
-control">
<i
class="bi bi
-clipboard
-search search
-icon"></i>
<input type="text"
class="form
-control with
-icon" id="orderSearch" placeholder="搜索订单号..." aria
-label="订单号搜索">
</div>
</div>
<!
-- 产品搜索
-->
<div
class="col
-md
-6">
<div
class="search
-control">
<i
class="bi bi
-grid search
-icon"></i>
<input type="text"
class="form
-control with
-icon" id="productSearch" placeholder="搜索产品编号..." aria
-label="产品编号搜索">
</div>
</div>
<!
-- 板材搜索
-->
<div
class="col
-md
-4">
<div
class="search
-control">
<i
class="bi bi
-box search
-icon"></i>
<input type="text"
class="form
-control with
-icon" id="materialSearch" placeholder="搜索板材ID或材质..." aria
-label="板材搜索">
</div>
</div>
<!
-- 木皮搜索
-->
<div
class="col
-md
-4">
<div
class="search
-control">
<i
class="bi bi
-tree search
-icon"></i>
<input type="text"
class="form
-control with
-icon" id="woodSearch" placeholder="搜索木皮名称..." aria
-label="木皮搜索">
</div>
</div>
<!
-- 厚度范围
-->
<div
class="col
-md
-4">
<div
class="input
-group">
<span
class="input
-group
-text"><i
class="bi bi
-arrows
-vertical"></i></span>
<input type="number"
class="form
-control" id="minThickness" placeholder="最小厚度(mm)" min="0" step="0.1">
<span
class="input
-group
-text">~</span>
<input type="number"
class="form
-control" id="maxThickness" placeholder="最大厚度(mm)" min="0" step="0.1">
<button
class="
btn btn-primary" type="button" id="thickness
Btn">
<i
class="bi bi
-arrow
-right"></i>
</button>
</div>
</div>
<!
-- 库存阈值
-->
<div
class="col
-md
-12">
<div
class="d
-flex align
-items
-center">
<span
class="me
-2">库存阈值:</span>
<div
class="form
-check form
-check
-inline">
<input
class="form
-check
-input" type="checkbox" id="lowStockCheck" checked>
<label
class="form
-check
-label" for="lowStockCheck">显示低库存<small
class="text
-danger ms
-1"><i
class="bi bi
-exclamation
-triangle"></i></small></label>
</div>
<div
class="form
-check form
-check
-inline">
<input
class="form
-check
-input" type="checkbox" id="normalStockCheck" checked>
<label
class="form
-check
-label" for="normalStockCheck">显示正常库存</label>
</div>
<div
class="ms
-auto">
<button
class="
btn btn-primary me
-2" id="search
Btn">
<i
class="bi bi
-search me
-1"></i>搜索
</button>
<button
class="
btn btn-outline
-secondary" id="reset
Btn">
<i
class="bi bi
-arrow
-counterclockwise me
-1"></i>重置
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!
-- 结果区域
-->
<div
class="card">
<div
class="card
-header d
-flex justify
-content
-between align
-items
-center">
<h5
class="mb
-0"><i
class="bi bi
-table me
-2"></i>查询结果</h5>
<div
class="text
-secondary">
<span id="resultCount">0</span> 条记录
<span
class="ms
-2"><i
class="bi bi
-info
-circle"></i> <small>实时数据更新时间: <span id="lastUpdate">
--:
--:
--</span></small></span>
</div>
</div>
<div
class="card
-body result
-section">
<div
class="table
-responsive">
<table
class="table table
-hover" id="resultTable">
<thead
class="table
-light sticky
-top">
<tr>
<th>订单号</th>
<th>产品信息</th>
<th>板材</th>
<th>材质</th>
<th>木皮1</th>
<th>木皮2</th>
<th>厚度(mm)</th>
<th>库存</th>
<th>操作</th>
</tr>
</thead>
<tbody id="resultBody">
<!
-- 数据加载中
-->
<tr id="loadingRow">
<td colspan="9"
class="text
-center py
-5">
<div
class="d
-flex align
-items
-center justify
-content
-center">
<div
class="spinner
-border text
-primary" role="status">
<span
class="visually
-hidden">加载中...</span>
</div>
<div
class="ms
-3">正在加载数据，请稍候...</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!
-- 空结果提示
-->
<div id="noResults"
class="no
-results text
-center py
-5" style="display: none;">
<div>
<i
class="bi bi
-inboxes text
-muted" style="font
-size: 3rem;"></i>
<h4
class="mt
-3 text
-muted">没有找到匹配的记录</h4>
<p
class="text
-muted">请尝试调整您的搜索条件</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
const modal = new
bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false // 配置选项
});
// 手动触发 Modal
document.getElementById('launchModal').addEventListener('click', function () {
modal.show();
});
});
</script>
<script src="../js/test.js?222"></script>
添加分别创建订单产品组件板材
按钮弹窗，编辑订单时出现产品下拉框，下拉框旁边有添加
按钮，点下弹出添加产品弹窗 以此类推 不需要js部分
这篇博客详细介绍了Bootstrap框架为组件提供的5种预设颜色样式，包括btn-primary（重点蓝）、btn-success（成功绿）、btn-info（信息蓝）、btn-warning（警告橙）和btn-danger（危险红），并展示了这些颜色在实际应用中的效果。
扫一扫
1230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
