79 lines
4.3 KiB
HTML
79 lines
4.3 KiB
HTML
<!-- 产品基础表 - 页面内嵌组件模板 -->
|
|
<!-- 本页面通过 app.js 中的 loadProductsPage() 动态构建，此文件用作模板参考 -->
|
|
|
|
<div class="page-header">
|
|
<h1>产品基础表</h1>
|
|
<p class="page-desc">查询和管理产品基础信息</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="filter-bar">
|
|
<input type="text" id="prodSearch" class="form-input" style="width:200px" placeholder="搜索货品名称/编码/编号">
|
|
<select id="prodBrandFilter" class="form-input" style="width:140px">
|
|
<option value="">全部品牌</option>
|
|
</select>
|
|
<select id="prodCategoryFilter" class="form-input" style="width:140px">
|
|
<option value="">全部类目</option>
|
|
</select>
|
|
<button class="btn btn-primary" onclick="searchProducts()">查询</button>
|
|
<button class="btn" onclick="resetProductFilters()">重置</button>
|
|
<span class="data-count" id="prodCount"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="margin-top:15px">
|
|
<div class="card-header">
|
|
<h3>产品列表</h3>
|
|
<div class="sort-info" style="font-size:12px;color:var(--text-secondary)">
|
|
<span>点击表头排序</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body" style="padding:0;overflow-x:auto">
|
|
<table class="data-table" id="productsTable">
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="goods_code" class="sortable">商家编码 <span class="sort-arrow"></span></th>
|
|
<th data-sort="product_code" class="sortable">货品编号 <span class="sort-arrow"></span></th>
|
|
<th data-sort="product_name" class="sortable">货品名称 <span class="sort-arrow"></span></th>
|
|
<th data-sort="brand" class="sortable">品牌 <span class="sort-arrow"></span></th>
|
|
<th data-sort="cost_price" class="sortable">成本价 <span class="sort-arrow"></span></th>
|
|
<th data-sort="category1" class="sortable">一级类目 <span class="sort-arrow"></span></th>
|
|
<th data-sort="created_at" class="sortable">单品创建时间 <span class="sort-arrow"></span></th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="prodTbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagination" id="prodPagination"></div>
|
|
|
|
<!-- 产品详情弹窗 - 科技风格 -->
|
|
<div class="modal-overlay" id="prodDetailModal" style="display:none">
|
|
<div class="modal modal-tech product-detail-modal">
|
|
<div class="modal-tech-header">
|
|
<div class="modal-tech-title">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
<span>产品详情</span>
|
|
<span class="modal-tech-id" id="detailModalId"></span>
|
|
</div>
|
|
<button class="modal-tech-close" onclick="closeProdDetail()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-tech-body" id="prodDetailBody">
|
|
<div class="detail-loading">
|
|
<div class="loading-spinner"></div>
|
|
<span>加载产品数据...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|