feat: 绿色种采模块全面重构——采供管理整页重构、采收入库/供应商/监控多页面优化
- 采供管理(farm-purchase)整页重构：采购单维度主表+可展开子表，5种订单状态联动操作按钮（接单/配送/收货/取消），新建弹窗联系人回显，详情抽屉按状态动态展示配送/取消信息 - 采收入库(farm-harvest)：详情改为右侧抽屉，新增来源类型/产地筛选，表格增加种养殖批次和采收单位列，新增养殖出栏数据 - 供应商管理(farm-supplier)：自供基地表格新增产能/订单列，外部供应商新增联系人/资质证书/合作状态列，新增多选下拉和图片上传组件 - 种植监控/养殖监控：筛选栏优化（下拉选择替代文本输入） - 功能说明文档9.4绿色种采章节同步更新调整记录 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
@@ -1357,4 +1357,47 @@
|
||||
|
||||
##### 3. farm-monitor-livestock.html（养殖监控）
|
||||
- 养殖批次详情从居中弹窗重构为右侧抽屉（宽度 480px），带滑入动画
|
||||
- 详情内容从 div.detail-grid 改为 ul.detail-list（BEM 命名规范）
|
||||
- 详情内容从 div.detail-grid 改为 ul.detail-list（BEM 命名规范）
|
||||
- 筛选栏「养殖区」下拉位置前移至「批次号/品种」前
|
||||
- 弹窗中「养殖区/舍」字段从文本输入改为下拉选择
|
||||
|
||||
##### 4. farm-monitor-crop.html（种植监控）
|
||||
- 筛选栏「地块名称」从文本输入改为下拉选择（A/B/C/D/E 区基地选项）
|
||||
- 筛选栏新增「种植批次号」文本输入框
|
||||
|
||||
##### 5. farm-harvest.html（采收入库）
|
||||
- 详情从居中弹窗重构为右侧抽屉（480px），CSS 滑入动画 + 遮罩层
|
||||
- 统计卡片重构：「本月入库总量」「A级占比」「今日入库批次」改为「种植采收批次」「养殖出栏批次」「A级占比」
|
||||
- 筛选栏新增「来源类型」下拉（种植采收/养殖出栏）、「产地/养殖区」下拉
|
||||
- 筛选栏「批次号/作物名」改为「批次号/食材名」；「入库日期范围」改为日期范围双输入框（起止日期）
|
||||
- 表格新增「种养殖批次」列、「采收单位」列；「入库数量(kg)」改为「采收数量」
|
||||
- 新增 2 条养殖出栏示例数据（猪肉白条、整鸡），数据行从 4 条扩展为 6 条
|
||||
- 弹窗表单新增「种养殖批次」字段；「入库数量(kg)」改为「采收数量」+ 独立「采收单位」下拉（公斤/头/只/箱/桶）
|
||||
|
||||
##### 6. farm-supplier.html（供应商管理）
|
||||
- 自供基地 Tab：表格新增「负责人电话」「年均产能」「产能单位」「累计订单」列；「当前产能(kg/月)」移除
|
||||
- 自供基地 Tab：地块/养殖区列改为多行展示（含地块编号+名称），基地名称更贴近业务（「A1-猪舍」→「生猪养殖基地」等）
|
||||
- 外部供应商 Tab：表格新增「联系人」「资质证书」（缩略图+数量）「合作期限」「合作状态」列；移除「资质状态」「最近评价」列；移除「评价供应商」按钮
|
||||
- 外部供应商 Tab：筛选「资质状态」改为「合作状态」（正常/即将到期/合同终止/黑名单）
|
||||
- 新增多选下拉组件样式（multi-select），用于弹窗中地块/养殖区多选
|
||||
- 新增图片上传区域样式（upload-area/upload-preview/upload-btn），用于资质证书上传
|
||||
- 新增只读字段样式（form-readonly），用于弹窗中自动生成的编号展示
|
||||
|
||||
##### 7. farm-purchase.html（采供管理）— 整页重构
|
||||
- **页面结构重构**：从食材明细维度的平铺表格，重构为采购单维度的主表 + 可展开食材明细子表（手风琴模式）
|
||||
- **主表列**：展开、采购单号、采购食堂、供应商、食材种类、采购总金额、下单日期、预计到货、采购单来源、订单状态、操作
|
||||
- **展开子表列**：溯源码、食材名称、食材分类、采购数量、规格（手动输入，如 25kg/件、散装(kg)、5L/桶）、单价、小计金额、备注
|
||||
- **订单状态体系**：待接单（橙）、待发货（蓝）、待收货（橙）、已完成（绿）、已取消（红），5 条示例数据各覆盖一种状态
|
||||
- **操作按钮按状态动态显示**：
|
||||
- 待接单：详情、编辑、立即接单、取消订单
|
||||
- 待发货：详情、编辑、开始配送、取消订单
|
||||
- 待收货：详情、确认收货
|
||||
- 已完成：详情、删除
|
||||
- 已取消：详情、删除
|
||||
- **新建/编辑采购单弹窗**（960px）：选择食堂/供应商后下方回显联系人和电话；食材明细动态行（添加/删除/自动小计）；食材名称为下拉选择；去掉底部备注和保存草稿按钮
|
||||
- **详情抽屉**（640px）：订单信息、采购食堂信息（含联系人/电话）、供应商信息（含联系人/电话）、食材明细表；按状态动态显示「配送信息」区块（待收货/已完成）或「取消信息」区块（已取消，红色高亮）
|
||||
- **立即接单**：页面顶部绿色 toast 浮窗提示
|
||||
- **取消订单弹窗**：二次确认 + 手动输入取消原因（textarea 必填）
|
||||
- **开始配送弹窗**（480px）：填写配送方式（下拉）、配送人姓名、配送人电话（必填）、预计送达时间
|
||||
- **确认收货弹窗**：二次确认，确认后 toast 提示
|
||||
- **其他**：导出按钮统一为 SVG 图标样式；删除确认弹窗保留
|
||||
@@ -114,13 +114,19 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 详情弹窗 */
|
||||
.detail-modal{width:720px;}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.detail-item{display:flex;padding:12px 16px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-item.full{grid-column:1/-1;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;display:none;}
|
||||
.drawer{position:fixed;top:0;right:-480px;width:480px;height:100%;background:#fff;z-index:1001;box-shadow:-4px 0 16px rgba(0,0,0,0.12);transition:right .3s ease;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e8e8e8;flex-shrink:0;}
|
||||
.drawer-title{font-size:16px;font-weight:600;color:#262626;}
|
||||
.drawer-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}.drawer-close:hover{color:#262626;}
|
||||
.drawer-body{flex:1;overflow-y:auto;padding:0;}
|
||||
.drawer-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e8e8e8;flex-shrink:0;}
|
||||
.detail-grid{display:flex;flex-direction:column;}
|
||||
.detail-item{display:flex;padding:14px 24px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -176,24 +182,32 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="stat-card__info"><div class="stat-card__value">186</div><div class="stat-card__label">入库批次总数</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">✅</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">930 kg</div><div class="stat-card__label">本月入库总量</div></div>
|
||||
<div class="stat-card__icon green">🌱</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">142</div><div class="stat-card__label">种植采收批次</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">⭐</div>
|
||||
<div class="stat-card__icon orange">🐄</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">44</div><div class="stat-card__label">养殖出栏批次</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">✅</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">78%</div><div class="stat-card__label">A级占比</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🌱</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">4</div><div class="stat-card__label">今日入库批次</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>批次号/作物名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入批次号或作物名">
|
||||
<label>来源类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>种植采收</option>
|
||||
<option>养殖出栏</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>批次号/食材名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入批次号或食材名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>品质等级</label>
|
||||
@@ -205,8 +219,24 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>入库日期范围</label>
|
||||
<input class="filter-input" type="date">
|
||||
<label>产地/养殖区</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A区蔬菜基地</option>
|
||||
<option>B区根茎基地</option>
|
||||
<option>C区菌菇大棚</option>
|
||||
<option>D区豆类基地</option>
|
||||
<option>A1-猪舍</option>
|
||||
<option>B3-鸡舍</option>
|
||||
<option>C2-鸭舍</option>
|
||||
<option>D1-羊舍</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>入库日期</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
@@ -228,12 +258,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>采收批次号</th>
|
||||
<th>溯源码</th>
|
||||
<th>食材名称</th>
|
||||
<th>品种</th>
|
||||
<th>种养殖批次</th>
|
||||
<th>产地/地块</th>
|
||||
<th>采收/出栏日期</th>
|
||||
<th>入库数量(kg)</th>
|
||||
<th>采收数量</th>
|
||||
<th>采收单位</th>
|
||||
<th>品质等级</th>
|
||||
<th>入库日期</th>
|
||||
<th>经办人员</th>
|
||||
@@ -243,12 +276,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>HC-20260415-001</td>
|
||||
<td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td>
|
||||
<td>菠菜</td>
|
||||
<td>尖叶菠菜</td>
|
||||
<td>ZZ-A01-2026-003</td>
|
||||
<td>A区蔬菜基地</td>
|
||||
<td>2026-04-15</td>
|
||||
<td>286</td>
|
||||
<td>公斤</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-15</td>
|
||||
<td>李采收</td>
|
||||
@@ -256,12 +292,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260415-002</td>
|
||||
<td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td>
|
||||
<td>胡萝卜</td>
|
||||
<td>红芯胡萝卜</td>
|
||||
<td>ZZ-B01-2026-007</td>
|
||||
<td>B区根茎基地</td>
|
||||
<td>2026-04-15</td>
|
||||
<td>420</td>
|
||||
<td>公斤</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-15</td>
|
||||
<td>王采收</td>
|
||||
@@ -269,12 +308,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260414-003</td>
|
||||
<td>ST-FH-FC01-VG-XGUO-068K-20260414-003</td>
|
||||
<td>香菇</td>
|
||||
<td>808香菇</td>
|
||||
<td>ZZ-C01-2026-012</td>
|
||||
<td>C区菌菇大棚</td>
|
||||
<td>2026-04-14</td>
|
||||
<td>68</td>
|
||||
<td>公斤</td>
|
||||
<td><span class="tag tag-orange">B级</span></td>
|
||||
<td>2026-04-14</td>
|
||||
<td>李采收</td>
|
||||
@@ -282,24 +324,59 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260414-004</td>
|
||||
<td>ST-FH-FD01-VG-SJJD-156K-20260414-004</td>
|
||||
<td>四季豆</td>
|
||||
<td>架豆王</td>
|
||||
<td>ZZ-D01-2026-005</td>
|
||||
<td>D区豆类基地</td>
|
||||
<td>2026-04-14</td>
|
||||
<td>156</td>
|
||||
<td>公斤</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-14</td>
|
||||
<td>张采收</td>
|
||||
<td>RPT-20260414-004</td>
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260416-005</td>
|
||||
<td>ST-FH-A1ZS-LS-DLKZ-320T-20260416-005</td>
|
||||
<td>猪肉（白条）</td>
|
||||
<td>杜洛克</td>
|
||||
<td>LS-2604-001</td>
|
||||
<td>A1-猪舍</td>
|
||||
<td>2026-04-16</td>
|
||||
<td>50</td>
|
||||
<td>头</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-16</td>
|
||||
<td>陈大勇</td>
|
||||
<td>RPT-20260416-005</td>
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260416-006</td>
|
||||
<td>ST-FH-B3JS-LS-HYJJ-200Z-20260416-006</td>
|
||||
<td>鸡（整只）</td>
|
||||
<td>黄羽鸡</td>
|
||||
<td>LS-2603-002</td>
|
||||
<td>B3-鸡舍</td>
|
||||
<td>2026-04-16</td>
|
||||
<td>200</td>
|
||||
<td>只</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-16</td>
|
||||
<td>刘芳</td>
|
||||
<td>RPT-20260416-006</td>
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 186 条</span>
|
||||
<span>显示 6 条，共 186 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
@@ -355,6 +432,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<label>品种<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入品种">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>种养殖批次</label>
|
||||
<input type="text" placeholder="请输入种养殖批次号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>来源地块/养殖区</label>
|
||||
<select><option>请选择</option><option>A区蔬菜基地</option><option>B区根茎基地</option><option>C区菌菇大棚</option><option>D区豆类基地</option><option>A1-猪舍</option><option>B3-鸡舍</option></select>
|
||||
@@ -364,8 +445,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入库数量(kg)<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入入库数量">
|
||||
<label>采收数量<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入采收数量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>采收单位<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>公斤</option><option>吨</option><option>头</option><option>条</option><option>只</option><option>尾</option><option>个</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>品质等级</label>
|
||||
@@ -392,19 +477,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-overlay" id="detailModal" style="display:none;">
|
||||
<div class="modal detail-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">收成入库详情</span>
|
||||
<span class="modal-close" onclick="closeDetailModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;">
|
||||
<div class="detail-grid" id="detailGrid"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailModal()">关闭</button>
|
||||
</div>
|
||||
<!-- 右侧详情抽屉 -->
|
||||
<div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="detailDrawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">收成入库详情</span>
|
||||
<span class="drawer-close" onclick="closeDrawer()">×</span>
|
||||
</div>
|
||||
<div class="drawer-body">
|
||||
<div class="detail-grid" id="detailGrid"></div>
|
||||
</div>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -422,7 +506,7 @@ document.getElementById('modalOverlay').addEventListener('click',function(e){if(
|
||||
function openVideoModal(){document.getElementById('videoModal').style.display='flex';}
|
||||
function closeVideoModal(){document.getElementById('videoModal').style.display='none';}
|
||||
document.getElementById('videoModal').addEventListener('click',function(e){if(e.target===this)closeVideoModal();});
|
||||
// 详情弹窗
|
||||
// 详情抽屉
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
@@ -435,10 +519,13 @@ function showDetail(el){
|
||||
div.innerHTML='<div class="detail-label">'+ths[i].textContent+'</div><div class="detail-value">'+tds[i].innerHTML+'</div>';
|
||||
grid.appendChild(div);
|
||||
}
|
||||
document.getElementById('detailModal').style.display='flex';
|
||||
document.getElementById('drawerOverlay').style.display='block';
|
||||
document.getElementById('detailDrawer').classList.add('open');
|
||||
}
|
||||
function closeDrawer(){
|
||||
document.getElementById('drawerOverlay').style.display='none';
|
||||
document.getElementById('detailDrawer').classList.remove('open');
|
||||
}
|
||||
function closeDetailModal(){document.getElementById('detailModal').style.display='none';}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeDetailModal();});
|
||||
// 切换二级菜单分组的展开/收起
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若激活项位于子分组内，则自动展开
|
||||
|
||||
@@ -230,7 +230,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>地块名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入地块名称">
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A区蔬菜基地</option>
|
||||
<option>B区根茎基地</option>
|
||||
<option>C区菌菇大棚</option>
|
||||
<option>D区豆类基地</option>
|
||||
<option>E区叶菜基地</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>作物类型</label>
|
||||
@@ -244,6 +251,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<option>生菜</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>种植批次号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入种植批次号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>种植状态</label>
|
||||
<select class="filter-select">
|
||||
|
||||
@@ -225,6 +225,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>养殖区</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A1-猪舍</option>
|
||||
<option>B3-鸡舍</option>
|
||||
<option>C2-鸭舍</option>
|
||||
<option>D1-羊舍</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>养殖批次号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入养殖批次号">
|
||||
@@ -248,16 +258,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<option>轻微异常</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>养殖区</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A1-猪舍</option>
|
||||
<option>B3-鸡舍</option>
|
||||
<option>C2-鸭舍</option>
|
||||
<option>D1-羊舍</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>入栏时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
@@ -405,7 +405,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>养殖区/舍编号<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入养殖区/舍编号">
|
||||
<select><option>请选择</option><option>A1-猪舍</option><option>B3-鸡舍</option><option>C2-鸭舍</option><option>D1-羊舍</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入栏数量(头/只)<span class="required">*</span></label>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -118,8 +118,35 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.form-item textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
.form-item select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;padding-right:28px;}
|
||||
/* 评分星星 */
|
||||
.star-rating{display:flex;gap:4px;font-size:24px;cursor:pointer;}
|
||||
.star-rating .star{color:#ddd;transition:color .2s;}.star-rating .star.active{color:#FAAD14;}
|
||||
/* 地块多行展示 */
|
||||
.td-land{white-space:normal !important;line-height:1.8;min-width:180px;}
|
||||
/* 多选下拉模拟 */
|
||||
.multi-select{position:relative;}
|
||||
.multi-select__trigger{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 28px 4px 8px;font-size:var(--font-sm);cursor:pointer;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.multi-select__trigger:focus{border-color:var(--primary);outline:none;}
|
||||
.multi-select__tag{display:inline-flex;align-items:center;gap:2px;background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:3px;font-size:11px;}
|
||||
.multi-select__tag .remove{cursor:pointer;font-size:14px;line-height:1;}
|
||||
.multi-select__placeholder{color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.multi-select__dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:10;max-height:200px;overflow-y:auto;display:none;}
|
||||
.multi-select.open .multi-select__dropdown{display:block;}
|
||||
.multi-select__option{padding:8px 12px;font-size:var(--font-sm);cursor:pointer;display:flex;align-items:center;gap:8px;}
|
||||
.multi-select__option:hover{background:#F5F7FA;}
|
||||
.multi-select__option input{margin:0;}
|
||||
/* 只读字段 */
|
||||
.form-readonly{height:36px;line-height:36px;padding:0 12px;background:#F5F7FA;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
/* 资质证书缩略图（表格内） */
|
||||
.td-cert{white-space:nowrap !important;}
|
||||
.cert-thumb{display:inline-block;width:32px;height:32px;border-radius:4px;background:#E6F7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='12' rx='1.5' fill='none' stroke='%231890FF' stroke-width='1.2'/%3E%3Ccircle cx='5' cy='7' r='1.5' fill='%231890FF'/%3E%3Cpath d='M3 12l3-3 2 1.5L11 7l2 3' stroke='%231890FF' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;vertical-align:middle;margin-right:4px;border:1px solid #BAE7FF;}
|
||||
.cert-count{font-size:11px;color:var(--text-secondary);vertical-align:middle;}
|
||||
/* 图片上传区域（弹窗内） */
|
||||
.upload-area{display:flex;flex-wrap:wrap;gap:8px;}
|
||||
.upload-preview{position:relative;width:80px;height:80px;border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden;}
|
||||
.upload-img{width:100%;height:100%;background:#E6F7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='2' y='4' width='28' height='24' rx='3' fill='none' stroke='%231890FF' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='14' r='3' fill='%231890FF'/%3E%3Cpath d='M5 24l7-7 4 3L22 13l5 7' stroke='%231890FF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;}
|
||||
.upload-del{position:absolute;top:2px;right:2px;width:18px;height:18px;background:rgba(0,0,0,.45);color:#fff;border-radius:50%;font-size:12px;line-height:18px;text-align:center;cursor:pointer;display:none;}
|
||||
.upload-preview:hover .upload-del{display:block;}
|
||||
.upload-btn{width:80px;height:80px;border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:2px;color:#999;font-size:12px;transition:border-color .2s;}
|
||||
.upload-btn:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.upload-hint{font-size:11px;color:var(--text-placeholder);margin-top:4px;width:100%;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -244,17 +271,17 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编号</th><th>基地/场所名称</th><th>供应类别</th><th>负责人</th>
|
||||
<th>地块/养殖区</th><th>当前产能(kg/月)</th><th>运营状态</th><th>最近供货</th><th>操作</th>
|
||||
<th>编号</th><th>基地/场所名称</th><th>供应类别</th><th>负责人</th><th>负责人电话</th>
|
||||
<th>地块/养殖区</th><th>年均产能</th><th>产能单位</th><th>累计订单</th><th>运营状态</th><th>最近供货</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>SUP-IN-001</td><td>A区蔬菜基地</td><td>蔬菜</td><td>李负责人</td><td>LAND-001/LAND-002</td><td>2,400</td><td><span class="tag tag-green">运营中</span></td><td>今日</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-001','A区蔬菜基地','蔬菜','李负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-002</td><td>B区根茎基地</td><td>蔬菜</td><td>王负责人</td><td>LAND-002</td><td>1,200</td><td><span class="tag tag-green">运营中</span></td><td>今日</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-002','B区根茎基地','蔬菜','王负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-003</td><td>C区菌菇大棚</td><td>蔬菜</td><td>张负责人</td><td>LAND-003</td><td>480</td><td><span class="tag tag-green">运营中</span></td><td>昨日</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-003','C区菌菇大棚','蔬菜','张负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-004</td><td>D区豆类基地</td><td>蔬菜</td><td>李负责人</td><td>LAND-004</td><td>860</td><td><span class="tag tag-gray">休耕中</span></td><td>3天前</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-004','D区豆类基地','蔬菜','李负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-005</td><td>A1-猪舍</td><td>肉禽</td><td>赵负责人</td><td>BREED-A1</td><td>3,200</td><td><span class="tag tag-green">运营中</span></td><td>本周</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-005','A1-猪舍','肉禽','赵负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-006</td><td>B3-鸡舍</td><td>肉禽</td><td>陈负责人</td><td>BREED-B3</td><td>1,800</td><td><span class="tag tag-green">运营中</span></td><td>本周</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-006','B3-鸡舍','肉禽','陈负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-001</td><td>A区蔬菜基地</td><td>蔬菜</td><td>李负责人</td><td>138****6601</td><td class="td-land">LAND-001【一号菠菜大棚】<br>LAND-002【二号叶菜大棚】</td><td>28,800</td><td>公斤</td><td>86</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-002</td><td>B区根茎基地</td><td>蔬菜</td><td>王负责人</td><td>139****7702</td><td class="td-land">LAND-003【根茎种植区】<br>LAND-004【萝卜专区】</td><td>14,400</td><td>公斤</td><td>62</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-003</td><td>C区菌菇大棚</td><td>蔬菜</td><td>张负责人</td><td>137****3303</td><td class="td-land">LAND-005【菌菇培育棚】</td><td>5,760</td><td>公斤</td><td>41</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-21</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-004</td><td>D区豆类基地</td><td>蔬菜</td><td>李负责人</td><td>138****6601</td><td class="td-land">LAND-006【豆类种植区】<br>LAND-007【豆类育苗棚】</td><td>10,320</td><td>公斤</td><td>38</td><td><span class="tag tag-gray">休耕中</span></td><td>2026-05-19</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-005</td><td>生猪养殖基地</td><td>肉禽</td><td>赵负责人</td><td>136****5505</td><td class="td-land">BREED-A1【生猪养殖一区】<br>BREED-A2【生猪养殖二区】</td><td>380</td><td>头</td><td>24</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-20</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-006</td><td>土鸡养殖基地</td><td>肉禽</td><td>陈负责人</td><td>135****4406</td><td class="td-land">BREED-B3【散养鸡舍】</td><td>6,000</td><td>只</td><td>18</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-20</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -282,9 +309,9 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>资质状态</label>
|
||||
<label>合作状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option><option>正常</option><option>即将到期</option>
|
||||
<option>全部</option><option>正常</option><option>即将到期</option><option>合同终止</option><option>黑名单</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -293,7 +320,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openExternalModal('add')">➕ 新增外部供应商</button>
|
||||
<button class="btn btn-default" onclick="openRateModal()">⭐ 评价供应商</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
@@ -306,16 +332,17 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>供应商名称</th><th>供应类别</th><th>联系电话</th><th>地址</th>
|
||||
<th>资质状态</th><th>综合评分</th><th>合作年限</th><th>累计订单</th>
|
||||
<th>上次供货</th><th>最近评价</th><th>操作</th>
|
||||
<th>供应商名称</th><th>供应类别</th><th>联系人</th><th>联系电话</th><th>地址</th>
|
||||
<th>资质证书</th><th>综合评分</th><th>合作期限</th><th>合作状态</th><th>累计订单</th>
|
||||
<th>上次供货</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>绿源蔬菜配送</td><td>蔬菜</td><td>138-0001-0001</td><td>本市郊区蔬菜基地</td><td><span class="tag tag-green">正常</span></td><td>4.6</td><td>3年</td><td>128单</td><td>今日</td><td>质量优/准时</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit','绿源蔬菜配送','蔬菜','138-0001-0001','本市郊区蔬菜基地')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>鲜肉直供公司</td><td>肉类</td><td>139-0002-0002</td><td>本市农贸市场A区</td><td><span class="tag tag-green">正常</span></td><td>4.4</td><td>2年</td><td>96单</td><td>今日</td><td>质量良/准时</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit','鲜肉直供公司','肉类','139-0002-0002','本市农贸市场A区')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>海鲜水产配送</td><td>水产</td><td>136-0003-0003</td><td>滨海水产批发市场</td><td><span class="tag tag-orange">即将到期</span></td><td>4.1</td><td>1年</td><td>48单</td><td>昨日</td><td>质量良/延迟</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit','海鲜水产配送','水产','136-0003-0003','滨海水产批发市场')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>粮油批发商行</td><td>粮油</td><td>135-0004-0004</td><td>本市粮油批发中心</td><td><span class="tag tag-green">正常</span></td><td>4.5</td><td>4年</td><td>156单</td><td>3天前</td><td>质量优/准时</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit','粮油批发商行','粮油','135-0004-0004','本市粮油批发中心')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>中粮</td><td>粮油</td><td>陈经理</td><td>138-0001-0001</td><td>西安运营中心</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-count"></span></td><td>4.6</td><td>2023-03-01至2026-12-31</td><td><span class="tag tag-green">正常</span></td><td>128</td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>绿源蔬菜配送</td><td>蔬菜</td><td>张经理</td><td>138-0001-0001</td><td>本市郊区蔬菜基地</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-count"></span></td><td>4.6</td><td>2023-03-01至2026-12-31</td><td><span class="tag tag-green">正常</span></td><td>128</td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>鲜肉直供公司</td><td>肉类</td><td>李总</td><td>139-0002-0002</td><td>本市农贸市场A区</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-count"></span></td><td>4.4</td><td>2024-01-15至2025-12-31</td><td><span class="tag tag-gray">合同终止</span></td><td>96</td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>海鲜水产配送</td><td>水产</td><td>王经理</td><td>136-0003-0003</td><td>滨海水产批发市场</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-count"></span></td><td>4.1</td><td>2025-06-01至2026-05-31</td><td><span class="tag tag-orange">即将到期</span></td><td>48</td><td>2026-05-21</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>粮油批发商行</td><td>粮油</td><td>赵主管</td><td>135-0004-0004</td><td>本市粮油批发中心</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-count"></span></td><td>1.5</td><td>2022-01-01至2026-12-31</td><td><span class="tag tag-red">黑名单</span></td><td>36</td><td>2025-05-19</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -341,10 +368,31 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="form-item"><label>基地/场所名称<span class="required">*</span></label><input id="int_name" placeholder="请输入基地或场所名称"></div>
|
||||
<div class="form-item"><label>供应类别<span class="required">*</span></label><select id="int_category"><option value="">请选择</option><option>蔬菜</option><option>肉禽</option><option>水产</option><option>粮油</option></select></div>
|
||||
<div class="form-item"><label>负责人<span class="required">*</span></label><input id="int_manager" placeholder="请输入负责人姓名"></div>
|
||||
<div class="form-item"><label>关联地块/养殖区</label><input placeholder="如 LAND-001"></div>
|
||||
<div class="form-item"><label>当前产能(kg/月)</label><input type="number" placeholder="请输入数字"></div>
|
||||
<div class="form-item"><label>负责人电话<span class="required">*</span></label><input placeholder="请输入联系电话"></div>
|
||||
<div class="form-item full"><label>关联地块/养殖区<span class="required">*</span></label>
|
||||
<div class="multi-select" id="landMultiSelect" onclick="toggleMultiSelect(event)">
|
||||
<div class="multi-select__trigger" tabindex="0">
|
||||
<span class="multi-select__tag">LAND-001【一号菠菜大棚】<span class="remove" onclick="removeTag(event,this)">×</span></span>
|
||||
<span class="multi-select__tag">LAND-002【二号叶菜大棚】<span class="remove" onclick="removeTag(event,this)">×</span></span>
|
||||
</div>
|
||||
<div class="multi-select__dropdown">
|
||||
<label class="multi-select__option"><input type="checkbox" checked> LAND-001【一号菠菜大棚】</label>
|
||||
<label class="multi-select__option"><input type="checkbox" checked> LAND-002【二号叶菜大棚】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-003【根茎种植区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-004【萝卜专区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-005【菌菇培育棚】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-006【豆类种植区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-007【豆类育苗棚】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> BREED-A1【生猪养殖一区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> BREED-A2【生猪养殖二区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> BREED-B3【散养鸡舍】</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item"><label>年均产能<span class="required">*</span></label><input type="number" placeholder="请输入年均产能数值"></div>
|
||||
<div class="form-item"><label>产能单位<span class="required">*</span></label><select><option value="">请选择</option><option>公斤</option><option>吨</option><option>头</option><option>条</option><option>只</option><option>尾</option><option>个</option></select></div>
|
||||
<div class="form-item"><label>累计订单</label><div class="form-readonly">86（系统自动统计）</div></div>
|
||||
<div class="form-item"><label>运营状态<span class="required">*</span></label><select><option>运营中</option><option>休耕中</option></select></div>
|
||||
<div class="form-item"><label>联系电话</label><input placeholder="请输入联系电话"></div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -360,11 +408,25 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>供应商名称<span class="required">*</span></label><input id="ext_name" placeholder="请输入供应商名称"></div>
|
||||
<div class="form-item"><label>供应类别<span class="required">*</span></label><select id="ext_category"><option value="">请选择</option><option>蔬菜</option><option>肉类</option><option>水产</option><option>粮油</option></select></div>
|
||||
<div class="form-item"><label>联系人<span class="required">*</span></label><input id="ext_contact" placeholder="请输入联系人姓名"></div>
|
||||
<div class="form-item"><label>联系电话<span class="required">*</span></label><input id="ext_phone" placeholder="请输入联系电话"></div>
|
||||
<div class="form-item"><label>地址<span class="required">*</span></label><input id="ext_address" placeholder="请输入地址"></div>
|
||||
<div class="form-item full"><label>地址<span class="required">*</span></label><input id="ext_address" placeholder="请输入地址"></div>
|
||||
<div class="form-item full"><label>资质证书</label>
|
||||
<div class="upload-area">
|
||||
<div class="upload-preview"><div class="upload-img"></div><span class="upload-del" title="删除">×</span></div>
|
||||
<div class="upload-preview"><div class="upload-img"></div><span class="upload-del" title="删除">×</span></div>
|
||||
<div class="upload-btn">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<span>上传图片</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-hint">支持 JPG、PNG 格式，单张不超过 5MB，最多上传 5 张</div>
|
||||
</div>
|
||||
<div class="form-item"><label>资质到期日期</label><input type="date"></div>
|
||||
<div class="form-item"><label>营业执照编号</label><input placeholder="请输入营业执照编号"></div>
|
||||
<div class="form-item"><label>综合评分</label><input type="number" min="0" max="5" step="0.1" placeholder="0~5 分"></div>
|
||||
<div class="form-item"><label>合作开始日期</label><input type="date"></div>
|
||||
<div class="form-item"><label>合作结束日期</label><input type="date"></div>
|
||||
<div class="form-item"><label>合作状态<span class="required">*</span></label><select><option>正常</option><option>即将到期</option><option>合同终止</option><option>黑名单</option></select></div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -372,21 +434,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗：评价供应商 -->
|
||||
<div class="modal-overlay" id="rateModal" onclick="if(event.target===this)closeRateModal()">
|
||||
<div class="modal" style="width:520px;">
|
||||
<div class="modal-header"><span class="modal-title">评价供应商</span><span class="modal-close" onclick="closeRateModal()">×</span></div>
|
||||
<div class="modal-body">
|
||||
<div class="form-grid" style="grid-template-columns:1fr;">
|
||||
<div class="form-item"><label>选择供应商<span class="required">*</span></label><select><option value="">请选择供应商</option><option>绿源蔬菜配送</option><option>鲜肉直供公司</option><option>海鲜水产配送</option><option>粮油批发商行</option></select></div>
|
||||
<div class="form-item"><label>质量评分<span class="required">*</span></label><div class="star-rating" data-field="quality"><span class="star" data-v="1">★</span><span class="star" data-v="2">★</span><span class="star" data-v="3">★</span><span class="star" data-v="4">★</span><span class="star" data-v="5">★</span></div></div>
|
||||
<div class="form-item"><label>时效评分<span class="required">*</span></label><div class="star-rating" data-field="timeliness"><span class="star" data-v="1">★</span><span class="star" data-v="2">★</span><span class="star" data-v="3">★</span><span class="star" data-v="4">★</span><span class="star" data-v="5">★</span></div></div>
|
||||
<div class="form-item"><label>评价内容</label><textarea placeholder="请输入评价内容"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer"><button class="btn btn-default" onclick="closeRateModal()">取消</button><button class="btn btn-primary">提交评价</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 页签切换
|
||||
@@ -400,14 +447,10 @@ function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
|
||||
// 弹窗控制 - 内部供应商
|
||||
function openInternalModal(mode, id, name, category, manager){
|
||||
function openInternalModal(mode){
|
||||
var m=document.getElementById('internalModal');
|
||||
document.getElementById('internalModalTitle').textContent=mode==='edit'?'编辑内部供应商':'新增内部供应商';
|
||||
if(mode==='edit'){
|
||||
document.getElementById('int_name').value=name||'';
|
||||
document.getElementById('int_category').value=category||'';
|
||||
document.getElementById('int_manager').value=manager||'';
|
||||
}else{
|
||||
if(mode!=='edit'){
|
||||
m.querySelectorAll('input,textarea').forEach(function(el){el.value='';});
|
||||
m.querySelectorAll('select').forEach(function(el){el.selectedIndex=0;});
|
||||
}
|
||||
@@ -415,16 +458,24 @@ function openInternalModal(mode, id, name, category, manager){
|
||||
}
|
||||
function closeInternalModal(){document.getElementById('internalModal').style.display='none';}
|
||||
|
||||
// 多选下拉交互
|
||||
function toggleMultiSelect(e){
|
||||
if(e.target.closest('.remove'))return;
|
||||
var ms=e.currentTarget;
|
||||
ms.classList.toggle('open');
|
||||
}
|
||||
function removeTag(e,el){e.stopPropagation();el.parentElement.remove();}
|
||||
document.addEventListener('click',function(e){
|
||||
document.querySelectorAll('.multi-select.open').forEach(function(ms){
|
||||
if(!ms.contains(e.target))ms.classList.remove('open');
|
||||
});
|
||||
});
|
||||
|
||||
// 弹窗控制 - 外部供应商
|
||||
function openExternalModal(mode, name, category, phone, address){
|
||||
function openExternalModal(mode){
|
||||
var m=document.getElementById('externalModal');
|
||||
document.getElementById('externalModalTitle').textContent=mode==='edit'?'编辑外部供应商':'新增外部供应商';
|
||||
if(mode==='edit'){
|
||||
document.getElementById('ext_name').value=name||'';
|
||||
document.getElementById('ext_category').value=category||'';
|
||||
document.getElementById('ext_phone').value=phone||'';
|
||||
document.getElementById('ext_address').value=address||'';
|
||||
}else{
|
||||
if(mode!=='edit'){
|
||||
m.querySelectorAll('input,textarea').forEach(function(el){el.value='';});
|
||||
m.querySelectorAll('select').forEach(function(el){el.selectedIndex=0;});
|
||||
}
|
||||
@@ -432,27 +483,6 @@ function openExternalModal(mode, name, category, phone, address){
|
||||
}
|
||||
function closeExternalModal(){document.getElementById('externalModal').style.display='none';}
|
||||
|
||||
// 弹窗控制 - 评价供应商
|
||||
function openRateModal(){
|
||||
var m=document.getElementById('rateModal');
|
||||
m.querySelectorAll('.star').forEach(function(s){s.classList.remove('active');});
|
||||
m.querySelectorAll('select').forEach(function(el){el.selectedIndex=0;});
|
||||
m.querySelectorAll('textarea').forEach(function(el){el.value='';});
|
||||
m.style.display='flex';
|
||||
}
|
||||
function closeRateModal(){document.getElementById('rateModal').style.display='none';}
|
||||
|
||||
// 星星评分交互
|
||||
document.querySelectorAll('.star-rating').forEach(function(rating){
|
||||
rating.addEventListener('click',function(e){
|
||||
var star=e.target.closest('.star');
|
||||
if(!star)return;
|
||||
var val=parseInt(star.dataset.v);
|
||||
rating.querySelectorAll('.star').forEach(function(s){
|
||||
s.classList.toggle('active',parseInt(s.dataset.v)<=val);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user