From 690ee2c81d4dd7c53309de5decc5a651e260759a Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Fri, 18 Sep 2026 14:31:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(purchase):=20=E6=96=B0=E5=A2=9E=E3=80=8C?=
 =?UTF-8?q?=E5=BE=85=E9=87=87=E8=B4=AD=E6=B8=85=E5=8D=95=E3=80=8D=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

路由 router/index.ts：
  /purchase 下新增子路由 pending（name: PurchasePendingPool）。
  ★ 父路由刻意不加 permissions —— 加了会让没有 pending_pool 权限的用户
    整个「采购管理」模块从侧边栏消失。

页面 views/purchase/PendingPool.vue：
  筛选栏 + 表格 + 分页，列含产品图、规格、当前库存、在途、有效供给、
  预警、建议采购量（tooltip 展示完整算式）、参考单价、采购链接、操作。
  采购链接渲染走 safeHref 白名单，非法地址不渲染成可点击链接。

api/purchase.ts：
  新增 getPendingPurchasePool 与 PendingPoolItem 类型。

★ 需告知业务方的可见变化：「采购管理」从扁平单项变为可展开子菜单
  （Sidebar 在子路由只有 1 个时渲染 el-menu-item，2 个时渲染 el-sub-menu）。
---
 inventory-web/src/api/purchase.ts             |  43 ++
 inventory-web/src/router/index.ts             |   8 +
 .../src/views/purchase/PendingPool.vue        | 458 ++++++++++++++++++
 3 files changed, 509 insertions(+)
 create mode 100644 inventory-web/src/views/purchase/PendingPool.vue

diff --git a/inventory-web/src/api/purchase.ts b/inventory-web/src/api/purchase.ts
index cb47a7d..7e854e3 100644
--- a/inventory-web/src/api/purchase.ts
+++ b/inventory-web/src/api/purchase.ts
@@ -163,3 +163,46 @@ export function getApprovedUnstockedRequests(params: {
     params
   })
 }
+
+// 待采购池的单条物料（防重复采购）
+export interface PendingPoolItem {
+  material_id: number
+  name: string
+  spec_model: string
+  unit: string
+  category: string
+  material_type: string
+  company_name: string
+  image: string
+  purchase_link: string
+  reference_price: number | null
+  inventory_count: number
+  available_count: number
+  // 在途量 = 该物料所有活跃采购单的剩余待入库量之和
+  in_transit_qty: number
+  // 有效供给 = 库存 + 在途。判缺货与算建议量都基于它
+  effective_supply: number
+  warning_status: number   // 0=正常 1=黄色 2=红色（进池的必然非 0）
+  warning_red: number | null
+  warning_yellow: number | null
+  target_threshold: number | null
+  suggested_qty: number | null
+  is_ordered: boolean
+}
+
+// 待采购清单：库存已触及预警线、且没有活跃采购单的物料。
+// 物料一旦有在途采购单（待审批/已通过/部分到货未齐）就会从这里消失。
+export function getPendingPurchasePool(params: {
+  page?: number
+  limit?: number
+  keyword?: string
+  category?: string
+  type?: string
+  warning_status?: number
+}) {
+  return request({
+    url: '/purchase/pending-pool',
+    method: 'get',
+    params
+  })
+}
diff --git a/inventory-web/src/router/index.ts b/inventory-web/src/router/index.ts
index 38d9fd7..4a98540 100644
--- a/inventory-web/src/router/index.ts
+++ b/inventory-web/src/router/index.ts
@@ -213,6 +213,8 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/purchase',
         component: Layout,
+        // ★ 父路由**不加** permissions：加了会让没有 pending_pool 权限的用户
+        //   整个「采购管理」模块从侧边栏消失。
         meta: { title: '采购管理', icon: 'ShoppingCart' },
         children: [
             {
@@ -220,6 +222,12 @@ const routes: Array<RouteRecordRaw> = [
                 name: 'PurchaseList',
                 component: () => import('@/views/purchase/index.vue'),
                 meta: { title: '采购申请' }
+            },
+            {
+                path: 'pending',
+                name: 'PurchasePendingPool',
+                component: () => import('@/views/purchase/PendingPool.vue'),
+                meta: { title: '待采购清单', permissions: ['inbound_purchase:pending_pool'] }
             }
         ]
     },
diff --git a/inventory-web/src/views/purchase/PendingPool.vue b/inventory-web/src/views/purchase/PendingPool.vue
new file mode 100644
index 0000000..97d9c53
--- /dev/null
+++ b/inventory-web/src/views/purchase/PendingPool.vue
@@ -0,0 +1,458 @@
+<template>
+  <div class="app-container">
+
+    <el-alert
+        type="info"
+        :closable="false"
+        show-icon
+        style="margin-bottom: 14px;"
+    >
+      <template #title>
+        按<b>有效供给</b>（当前库存 + 在途量）判断：只有「有效供给仍低于预警线」的物料才会出现在这里。
+        在途量取该物料所有活跃采购单（待审批 / 已通过 / 部分到货未齐）的<b>剩余待入库量之和</b>，
+        所以已经买过一部分的物料不会消失 —— 它会继续留在清单里，建议采购量只补剩下的缺口。
+      </template>
+    </el-alert>
+
+    <!-- 顶部筛选 -->
+    <el-form :inline="true" class="filter-form" @submit.prevent>
+      <el-form-item label="搜索">
+        <el-input
+            v-model="filters.keyword"
+            placeholder="物料名称 / 规格型号 / 公司"
+            style="width: 240px"
+            clearable
+            @keyup.enter="handleQuery"
+            @clear="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="类别">
+        <el-input
+            v-model="filters.category"
+            placeholder="类别前缀"
+            style="width: 180px"
+            clearable
+            @keyup.enter="handleQuery"
+            @clear="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="类型">
+        <el-input
+            v-model="filters.type"
+            placeholder="物料类型"
+            style="width: 150px"
+            clearable
+            @keyup.enter="handleQuery"
+            @clear="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="预警等级">
+        <el-radio-group v-model="filters.warningStatus" @change="handleQuery">
+          <el-radio-button label="">全部</el-radio-button>
+          <el-radio-button :label="2">红色</el-radio-button>
+          <el-radio-button :label="1">黄色</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" :icon="Refresh" @click="handleQuery">查询</el-button>
+        <el-button @click="resetFilter">重置</el-button>
+        <el-button
+            v-if="userStore.hasPermission('inbound_purchase:operation')"
+            type="success"
+            :icon="ShoppingCart"
+            :disabled="selectedRows.length === 0"
+            @click="handleBatchGenerate"
+        >批量生成采购申请{{ selectedRows.length ? `（${selectedRows.length}）` : '' }}</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+        v-loading="loading"
+        :data="list"
+        border
+        stripe
+        fit
+        style="width: 100%; margin-top: 16px;"
+        row-key="material_id"
+        empty-text="暂无待采购物料（所有缺货物料都已有在途采购单）"
+        @selection-change="handleSelectionChange"
+    >
+      <!-- ★ 刻意不加 reserve-selection：它会让勾选跨页保留，但按钮上的数量
+           与实际可见的勾选状态可能不一致（甚至保留已离开池子的物料），
+           用户看到「已选 5 项」而屏幕上一个勾都没有。待采购池是小工作台，
+           跨页批量的收益远小于这种静默不一致的代价。 -->
+      <el-table-column type="selection" width="46" align="center" />
+
+      <el-table-column label="产品图" width="90" align="center">
+        <template #default="{ row }">
+          <el-image
+              v-if="row.image"
+              :src="getImageUrl(row.image)"
+              :preview-src-list="[getImageUrl(row.image)]"
+              preview-teleported
+              fit="cover"
+              style="width: 56px; height: 56px; border-radius: 4px;"
+          >
+            <template #error>
+              <div class="img-fallback">无图</div>
+            </template>
+          </el-image>
+          <span v-else style="color: #c0c4cc; font-size: 12px;">无图</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="name" label="物料名称" min-width="220" show-overflow-tooltip />
+
+      <el-table-column prop="spec_model" label="规格型号" min-width="160" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span v-if="row.spec_model">{{ row.spec_model }}</span>
+          <span v-else style="color: #c0c4cc;">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="unit" label="单位" width="80" align="center">
+        <template #default="{ row }">{{ row.unit || '-' }}</template>
+      </el-table-column>
+
+      <el-table-column prop="category" label="类别" min-width="170" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.category || '-' }}</template>
+      </el-table-column>
+
+      <el-table-column label="当前库存" width="100" align="right">
+        <template #default="{ row }">
+          <span class="money-text">{{ row.inventory_count }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="在途" width="100" align="right">
+        <template #default="{ row }">
+          <el-tooltip
+              v-if="row.in_transit_qty > 0"
+              content="该物料所有活跃采购单的剩余待入库量之和"
+              placement="top"
+          >
+            <span class="in-transit">+{{ row.in_transit_qty }}</span>
+          </el-tooltip>
+          <span v-else style="color: #c0c4cc;">0</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="有效供给" width="110" align="right">
+        <template #default="{ row }">
+          <el-tooltip
+              :content="`库存 ${row.inventory_count} + 在途 ${row.in_transit_qty} = ${row.effective_supply}（判缺货用的就是它）`"
+              placement="top"
+          >
+            <span class="effective">{{ row.effective_supply }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="可用库存" width="100" align="right">
+        <template #default="{ row }">
+          <span :class="{ 'avail-warn': row.available_count <= 0 }">
+            {{ row.available_count }}
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="预警" width="110" align="center">
+        <template #default="{ row }">
+          <el-tag v-if="row.warning_status === 2" type="danger" size="small">红色预警</el-tag>
+          <el-tag v-else-if="row.warning_status === 1" type="warning" size="small">黄色预警</el-tag>
+          <span v-else style="color: #c0c4cc;">-</span>
+          <div style="font-size: 11px; color: #909399; margin-top: 2px;">
+            红 {{ fmt(row.warning_red) }} / 黄 {{ fmt(row.warning_yellow) }}
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="建议采购量" width="120" align="center">
+        <template #default="{ row }">
+          <el-tooltip
+              v-if="row.suggested_qty != null"
+              :content="suggestedTip(row)"
+              placement="top"
+          >
+            <span class="suggested">{{ row.suggested_qty }}</span>
+          </el-tooltip>
+          <span v-else style="color: #c0c4cc;">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="参考单价" width="110" align="right">
+        <template #default="{ row }">
+          <span v-if="row.reference_price != null">{{ row.reference_price.toFixed(2) }}</span>
+          <span v-else style="color: #c0c4cc;">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="采购链接" width="120" align="center">
+        <template #default="{ row }">
+          <!-- ★ 必须过 safeHref 白名单：地址由用户自由填写，直接绑 href 会让
+               javascript: 之类的伪协议被当成可点击链接执行 -->
+          <el-link
+              v-if="safeHref(row.purchase_link)"
+              type="primary"
+              :href="safeHref(row.purchase_link)"
+              target="_blank"
+              rel="noopener noreferrer"
+          >🔗 前往采购</el-link>
+          <span v-else-if="row.purchase_link" style="color: #909399;" :title="row.purchase_link">格式无效</span>
+          <span v-else style="color: #c0c4cc;">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" width="150" fixed="right" align="center">
+        <template #default="{ row }">
+          <el-button
+              v-if="userStore.hasPermission('inbound_purchase:operation')"
+              type="primary"
+              size="small"
+              @click="handleGenerate(row)"
+          >生成采购申请</el-button>
+          <span v-else style="color: #c0c4cc; font-size: 12px;">无建单权限</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination-container">
+      <el-pagination
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          :page-sizes="[20, 50, 100]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Refresh, ShoppingCart } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/user'
+import { getPendingPurchasePool, type PendingPoolItem } from '@/api/purchase'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+const loading = ref(false)
+const list = ref<PendingPoolItem[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+const selectedRows = ref<PendingPoolItem[]>([])
+
+/**
+ * 批量交接数据走 localStorage，而不是 URL query。
+ *
+ * 原因：批量可能勾选十几个物料，每个还带商家链接（material_base.purchase_link
+ * 是 Text，实测单条已 516 字符）。塞进 URL 会撞上长度上限并被**静默截断** ——
+ * 前端拿到半截 JSON 只会报解析失败，排查成本很高。localStorage 没有这个上限。
+ * query 里只传一个一次性 key，取完即删。
+ */
+const BATCH_KEY_PREFIX = 'MOM_PURCHASE_BATCH_'
+
+const filters = reactive({
+  keyword: '',
+  category: '',
+  type: '',
+  warningStatus: '' as '' | 1 | 2
+})
+
+const fmt = (v: number | null) => (v == null ? '-' : v)
+
+/**
+ * 建议采购量的说明文案。
+ *
+ * ★ 为什么要分两种：有效供给**恰好等于**阈值时，`阈值 - 有效供给` 是 0，
+ *   但后端有 `max(1, ...)` 保底，结果是 1。若直接套「阈值 − 有效供给 = 建议量」
+ *   的模板，页面上会出现「4 − 4 = 1」这种**算不对的式子** —— 采购员一旦发现
+ *   算式不成立，就不会再信这个数字。所以到线的情况单独讲清楚。
+ *
+ * 等于阈值仍算不足，是与物料列表预警、预警邮件一致的口径（见后端
+ * purchase_service.get_pending_purchase_pool 的说明）。
+ */
+const suggestedTip = (row: PendingPoolItem) => {
+  const target = row.target_threshold
+  const eff = row.effective_supply
+  if (target != null && target - eff >= 1) {
+    return `补至 ${target}：目标阈值 ${target} − 有效供给 ${eff} = ${row.suggested_qty}（在途已计入，不会重复买）`
+  }
+  return `有效供给 ${eff} 已达阈值线 ${target}，建议补 ${row.suggested_qty} 个作缓冲。` +
+      `（等于阈值仍算不足 —— 与物料列表的预警口径一致）`
+}
+
+const getImageUrl = (url: string) => (!url ? '' : url)
+
+/** 采购链接白名单：只放行 http/https，其余一律不渲染成链接 */
+const safeHref = (url: any): string | null => {
+  const s = String(url || '').trim()
+  return /^https?:\/\//i.test(s) ? s : null
+}
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const params: any = {
+      page: page.value,
+      limit: pageSize.value
+    }
+    if (filters.keyword) params.keyword = filters.keyword
+    if (filters.category) params.category = filters.category
+    if (filters.type) params.type = filters.type
+    if (filters.warningStatus !== '') params.warning_status = filters.warningStatus
+
+    const res: any = await getPendingPurchasePool(params)
+    const data = res?.data ?? {}
+    list.value = data.items || []
+    total.value = data.total || 0
+  } catch (e: any) {
+    ElMessage.error(e?.msg || '加载待采购清单失败')
+    list.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  page.value = 1
+  fetchData()
+}
+
+const resetFilter = () => {
+  filters.keyword = ''
+  filters.category = ''
+  filters.type = ''
+  filters.warningStatus = ''
+  page.value = 1
+  fetchData()
+}
+
+const handlePageChange = (p: number) => { page.value = p; fetchData() }
+const handleSizeChange = (s: number) => { pageSize.value = s; page.value = 1; fetchData() }
+
+/**
+ * 生成采购申请：新标签页打开采购申请页并自动回填。
+ *
+ * 用 window.open 而非 router.push 是刻意的 —— 待采购清单的工作流是**连续建单**，
+ * 同标签跳转会卸载本页，采购员每开一单都要点回来重新筛选、丢失页码；
+ * 新标签页保留列表状态。这与「基础信息」页既有的跳转方式也保持一致。
+ */
+const handleSelectionChange = (rows: PendingPoolItem[]) => {
+  selectedRows.value = rows || []
+}
+
+/** 把池中一行整理成弹窗明细行的预填数据（单行与批量共用同一套字段映射） */
+const toPrefillItem = (row: PendingPoolItem) => ({
+  materialId: row.material_id,
+  name: row.name || '',
+  spec: row.spec_model || '',
+  // 建议采购量作为默认数量带入
+  quantity: row.suggested_qty != null && row.suggested_qty > 0 ? row.suggested_qty : undefined,
+  // 供应商链接（基础表的采购链接）带入，采购员无需再去查
+  supplierLink: String(row.purchase_link || '').trim() || undefined
+})
+
+/**
+ * 把预填数据交给采购申请页，开新标签页。
+ *
+ * ★ 单行与批量都走这里、都经 localStorage 中转 —— 曾经单行走 URL query，
+ *   而 material_base.purchase_link 是 text（实测已有 516 字符的真实链接），
+ *   URL 长度受限会逼出一个「多长就不带」的硬编码阈值，导致同一个物料
+ *   单行跳转带链接、批量跳转不带，行为不一致。现在两条路径统一，无长度上限。
+ *
+ * 开新标签页是刻意的：待采购清单的工作流是连续建单，同标签跳转会卸载本页、
+ * 丢失筛选与勾选状态。
+ */
+const openPurchaseWithItems = (items: ReturnType<typeof toPrefillItem>[]) => {
+  const key = BATCH_KEY_PREFIX + Date.now()
+  try {
+    localStorage.setItem(key, JSON.stringify(items))
+  } catch (e) {
+    ElMessage.error('暂存待建单数据失败，请重试')
+    return
+  }
+  const routeUrl = router.resolve({ path: '/purchase', query: { batch_key: key } })
+  window.open(routeUrl.href, '_blank')
+}
+
+/** 单行：生成采购申请 */
+const handleGenerate = (row: PendingPoolItem) => {
+  openPurchaseWithItems([toPrefillItem(row)])
+}
+
+/** 批量：勾选 N 个物料 → 一次性铺成 N 行，一单多品合并采购 */
+const handleBatchGenerate = () => {
+  if (selectedRows.value.length === 0) return
+  openPurchaseWithItems(selectedRows.value.map(toPrefillItem))
+}
+
+onMounted(fetchData)
+</script>
+
+<style scoped>
+.app-container { padding: 20px; }
+
+/* 搜索区版式：与采购申请 / 出库记录 / 报废记录保持一致 */
+.filter-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.filter-form :deep(.el-form-item) {
+  margin-bottom: 0;
+  margin-right: 12px;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.suggested {
+  font-weight: 600;
+  color: #409eff;
+}
+
+/* 在途量与有效供给：本次改造新增的核心数字，用不同色区分于纯库存 */
+.in-transit {
+  color: #e6a23c;
+  font-weight: 600;
+}
+
+.effective {
+  font-weight: 600;
+  border-bottom: 1px dashed #c0c4cc;
+  cursor: help;
+}
+
+.avail-warn {
+  color: #f56c6c;
+  font-weight: 600;
+}
+
+.img-fallback {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
+  color: #c0c4cc;
+  font-size: 12px;
+  border-radius: 4px;
+}
+</style>