<think>由于要求只修改HTML部分，不涉及JS，我将添加创建订单、产品、组件和板材的按钮和对应的模态框（弹窗）。同时，在编辑订单时，会出现一个产品下拉框，旁边有添加按钮，点击后弹出添加产品的弹窗。注意：由于现有代码中已经引用了Bootstrap，因此可以直接使用Bootstrap的模态框组件。按照要求，我们将创建以下模态框：1.创建订单的模态框2.创建产品的模态框（在订单编辑中点击添加产品时弹出）3.创建组件的模态框（可能在产品创建/编辑时使用，但根据要求，先添加）4.创建板材的模态框由于这是一个复杂的前端功能，我们只构建HTML结构，不添加JS逻辑。由于原页面中没有这些模态框，我们将在页面底部添加这些模态框的HTML。同时，在页面上添加一个“创建订单”的按钮，并放置在标题部分旁边。修改步骤：1.在标题部分添加一个“创建订单”的按钮。2.在页面底部添加四个模态框：创建订单、创建产品、创建组件、创建板材。注意：每个模态框需要有唯一的ID，并且结构符合Bootstrap的模态框结构。由于原页面中已经有一个模态框（但似乎没有内容），我们忽略它，添加新的模态框。由于要求是编辑订单时出现产品下拉框和添加按钮，但是我们没有编辑订单的模态框，因此我们将先创建“编辑订单”的模态框，并在其中添加产品下拉框和添加产品的按钮。因此，我们需要：
-编辑订单的模态框（包含产品下拉框和添加产品按钮，点击添加产品按钮弹出创建产品的模态框）
-创建订单的模态框
-创建产品的模态框
-创建组件的模态框
-创建板材的模态框但是，题目要求只添加HTML，不写JS，所以我们只构建模态框的静态结构。考虑到页面复杂度，我们不会实现完整的表单，只给出必要的输入字段。由于原页面没有编辑订单的入口，我们将在操作列中添加一个编辑按钮（但操作列目前是空的，所以需要先添加编辑按钮），点击编辑按钮弹出编辑订单模态框。但是，由于题目要求不写JS，所以我们在HTML中构建模态框，而不处理事件。因此，我们修改：1.在结果表格的操作列中，将原有的空白改为两个按钮：编辑和删除（但删除按钮不展开）。2.添加编辑订单模态框，并在其中添加产品下拉框，以及一个“添加产品”按钮，点击该按钮会弹出创建产品模态框（通过data
-bs
-target
属性连接）。由于模态框较多，我们按顺序添加。由于篇幅限制，我不会为每个模态框都写完整的表单，只给出关键部分。开始修改：</think>
# 板材库存管理系统改进方案
基于您的需求，我将添加创建订单、产品、组件和板材的模态框以及相关的HTML交互元素。以下是我的解决方案：
```html
<!DOC
TYPE 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">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0
-alpha1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap
-icons@1.8.0/font/bootstrap
-icons.
css">
<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;
}
/* 新增创建按钮样式 */
.create
-buttons {
position: fixed;
right: 30px;
bottom: 30px;
z
-index: 1000;
display: flex;
flex
-direction: column;
gap: 10px;
}
.create
-main
-btn {
width: 60px;
height: 60px;
border
-radius: 50%;
display: flex;
align
-items: center;
justify
-content: center;
font
-size: 24px;
box
-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.sub
-buttons {
display: flex;
flex
-direction: column;
gap: 10px;
transition: all 0.3s ease;
opacity: 0;
visibility:
hidden;
transform: translateY(20px);
}
.sub
-buttons.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* 模态框样式优化 */
.modal
-header {
background: linear
-gradient(to right, #1e3c72, #2a5298);
color: white;
}
.form
-section {
background
-color: #f8f9fa;
padding: 15px;
border
-radius: 8px;
margin
-bottom: 15px;
}
.form
-section
-title {
font
-weight: 600;
color: #1e3c72;
padding
-bottom: 8px;
margin
-bottom: 10px;
border
-bottom: 1px solid #dee2e6;
}
</style>
</head>
<body>
<div class="container py
-4">
<!
-- 标题部分
-->
<div class="d
-flex justify
-content
-between align
-items
-center mb
-4">
<div>
<h1 class="text
-primary"><i class="bi bi
-boxes"></i> 板材库存管理系统</h1>
<p class="text
-muted">查询订单、产品、板材及库存信息</p>
</div>
<button class="btn btn
-primary" id="launchModal">
<i class="bi bi
-plus
-lg me
-1"></i> 添加新订单
</button>
</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="thicknessBtn">
<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="searchBtn">
<i class="bi bi
-search me
-1"></i>搜索
</button>
<button class="btn btn
-outline
-secondary" id="resetBtn">
<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>
<!
-- 创建订单模态框
-->
<div class="modal fade" id="createOrderModal" tabindex="
-1" aria
-labelledby="createOrderModalLabel" aria
-hidden="true">
<div class="modal
-dialog modal
-lg">
<div class="modal
-content">
<div class="modal
-header">
<h5 class="modal
-title" id="createOrderModalLabel">添加新订单</h5>
<button
type="button" class="btn
-close btn
-close
-white" data
-bs
-dismiss="modal" aria
-label="Close"></button>
</div>
<div class="modal
-body">
<div class="form
-section">
<h6 class="form
-section
-title">订单基本信息</h6>
<div class="row g
-3">
<div class="col
-md
-6">
<label for="orderNumber" class="form
-label">订单号*</label>
<input
type="text" class="form
-control" id="orderNumber" placeholder="输入订单号" required>
</div>
<div class="col
-md
-6">
<label for="orderDate" class="form
-label">订单日期*</label>
<input
type="date" class="form
-control" id="orderDate" required>
</div>
<div class="col
-md
-12">
<label for="orderCustomer" class="form
-label">客户信息*</label>
<input
type="text" class="form
-control" id="orderCustomer" placeholder="输入客户名称">
</div>
</div>
</div>
<div class="form
-section">
<div class="d
-flex justify
-content
-between align
-items
-center mb
-3">
<h6 class="form
-section
-title mb
-0">关联产品</h6>
<button
type="button" class="btn btn
-sm btn
-outline
-primary" id="addProductBtn">
<i class="bi bi
-plus
-lg me
-1"></i>添加产品
</button>
</div>
<div class="row g
-3 mb
-3">
<div class="col
-md
-8">
<label for="productSelect" class="form
-label">选择产品</label>
<div class="input
-group">
<select class="form
-select" id="productSelect">
<option selected disabled value="">
-- 选择产品
--</option>
<option value="1">CP001
- 实木餐桌</option>
<option value="2">CP002
- 多层板柜子</option>
<option value="3">CP003
- 密度板椅子</option>
</select>
<button class="btn btn
-outline
-secondary"
type="button" id="addProduct">
<i class="bi bi
-plus
-circle"></i>
</button>
</div>
</div>
<div class="col
-md
-4">
<label for="productQuantity" class="form
-label">数量*</label>
<input
type="number" class="form
-control" id="productQuantity" value="1" min="1">
</div>
</div>
<div class="table
-responsive">
<table class="table table
-sm table
-striped">
<thead>
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>CP001</td>
<td>实木餐桌</td>
<td>2</td>
<td>
<button class="btn btn
-sm btn
-outline
-danger">
<i class="bi bi
-trash"></i>
</button>
</td>
</tr>
<tr>
<td>CP002</td>
<td>多层板柜子</td>
<td>1</td>
<td>
<button class="btn btn
-sm btn
-outline
-danger">
<i class="bi bi
-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal
-footer">
<button
type="button" class="btn btn
-secondary" data
-bs
-dismiss="modal">取消</button>
<button
type="button" class="btn btn
-primary">创建订单</button>
</div>
</div>
</div>
</div>
<!
-- 添加产品模态框
-->
<div class="modal fade" id="addProductModal" tabindex="
-1" aria
-labelledby="addProductModalLabel" aria
-hidden="true">
<div class="modal
-dialog modal
-lg">
<div class="modal
-content">
<div class="modal
-header">
<h5 class="modal
-title" id="addProductModalLabel">添加新产品</h5>
<button
type="button" class="btn
-close btn
-close
-white" data
-bs
-dismiss="modal" aria
-label="Close"></button>
</div>
<div class="modal
-body">
<div class="form
-section">
<h6 class="form
-section
-title">产品基本信息</h6>
<div class="row g
-3">
<div class="col
-md
-6">
<label for="productNumber" class="form
-label">产品编号*</label>
<input
type="text" class="form
-control" id="productNumber" placeholder="输入产品编号" required>
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
