From f114bc683e8606af768ae625b3e5374553b24e15 Mon Sep 17 00:00:00 2001 From: taiyi Date: Thu, 4 Jun 2026 20:18:59 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BA=A7=E5=93=81=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E8=A1=A8=E6=A0=BC=E9=87=8D=E6=9E=84=E4=B8=BA=E4=B8=BB?= =?UTF-8?q?=E8=A1=A8+=E5=B1=95=E5=BC=80=E5=AD=90=E8=A1=A8=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 产品行可展开显示所有规格的成本价/售价/状态 - 价格范围显示（多规格时 ¥最小~最大） - 展开行内支持编辑规格和设为默认 - 移除产品详情弹窗及相关冗余代码（净减 23 行） Co-Authored-By: Claude Opus 4.7 (1M context) --- .../web-admin/src/views/MasterDataPage.vue | 271 ++++++++---------- 1 file changed, 124 insertions(+), 147 deletions(-) diff --git a/frontend/web-admin/src/views/MasterDataPage.vue b/frontend/web-admin/src/views/MasterDataPage.vue index 9eb2ef9..39be350 100644 --- a/frontend/web-admin/src/views/MasterDataPage.vue +++ b/frontend/web-admin/src/views/MasterDataPage.vue @@ -535,35 +535,70 @@ 产品名称 - 默认规格 - 单位 - 规格数 - 成本价 - 售价 分类 + 规格数 + 价格范围 状态 操作 - - - {{ row.productName }} - {{ row.specifications.find(s => s.isDefault)?.specification || row.specifications[0]?.specification || '-' }} - {{ row.specifications.find(s => s.isDefault)?.unit || row.specifications[0]?.unit || '-' }} - {{ row.specifications.length }} - ¥{{ row.specifications.find(s => s.isDefault)?.costPrice || row.specifications[0]?.costPrice || '0.00' }} - ¥{{ row.specifications.find(s => s.isDefault)?.salePrice || row.specifications[0]?.salePrice || '0.00' }} - {{ row.categoryName }} - {{ row.status }} - - - - - - +
@@ -571,67 +606,6 @@
-
-
-
-
-

产品详情

- 产品主档：{{ productDetail.product_name }} -
- -
-
-
-
主档信息
-

分类：{{ productDetail.category_name || "-" }}

-

状态：{{ Number(productDetail.status || 1) === 1 ? "启用" : "停用" }}

-

备注：{{ productDetail.remark || "-" }}

-
-
-
规格总览
-

规格数量：{{ productDetail.specifications.length }}

-

默认规格：{{ productDetail.specifications.find((item) => item.is_default)?.specification || "-" }}

-

支持展开后逐个编辑规格明细。

-
-
-
-
- -
- {{ spec.specification }} - {{ spec.unit }} · {{ Number(spec.status || 1) === 1 ? "启用" : "停用" }} -
-
- 默认规格 - - -
- -
-
-
价格信息
-

成本价：{{ formatAmount(spec.cost_price) }}

-

销售价：{{ formatAmount(spec.sale_price) }}

-
-
-
扩展信息
-

备注：{{ spec.remark || "-" }}

-

规格 ID：{{ spec.product_id }}

-
-
-
-
-
-
@@ -926,7 +900,6 @@ import { updateSupplier, fetchCustomerDetail, fetchCustomerList, - fetchProductDetail, fetchProductCategoryList, fetchProductList, fetchSupplierDetail, @@ -1061,9 +1034,8 @@ const showCreateProductForm = ref(false); /** 批量选中的产品 ID 列表 */ const selectedProductIds = ref([]); const productRows = ref([]); -const loadingProductDetail = ref(false); -const selectedProductId = ref(null); -const productDetail = ref(null); +/** 展开的产品名称集合 */ +const expandedProducts = ref(new Set()); const productFilters = reactive({ product_name: "", specification: "", @@ -1251,10 +1223,6 @@ function closeCustomerDetail() { selectedCustomerId.value = null; } -function closeProductDetail() { - resetProductDetail(); -} - function closeSupplierDetail() { resetSupplierDetail(); } @@ -1374,9 +1342,21 @@ function cancelCreateProduct() { resetProductCreateForm(); } -function resetProductDetail() { - selectedProductId.value = null; - productDetail.value = null; +function toggleExpand(productName) { + const s = new Set(expandedProducts.value); + if (s.has(productName)) s.delete(productName); else s.add(productName); + expandedProducts.value = s; +} + +function priceRange(row) { + const specs = row.specifications || []; + if (!specs.length) return '-'; + const prices = specs.map(s => Number(s.salePrice || 0)).filter(p => p > 0); + if (!prices.length) return '-'; + const min = Math.min(...prices); + const max = Math.max(...prices); + if (min === max) return `¥${min.toFixed(2)}`; + return `¥${min.toFixed(2)}~${max.toFixed(2)}`; } function resetEditSpecForm() { @@ -1396,40 +1376,46 @@ function cancelEditSpec() { resetEditSpecForm(); } -function startEditSpec(spec) { - editingSpecId.value = spec.product_id; - editingSpecForm.product_name = productDetail.value?.product_name || ""; - editingSpecForm.specification = spec.specification || ""; - editingSpecForm.unit = spec.unit || ""; - editingSpecForm.category_id = String(productDetail.value?.category_id || ""); - editingSpecForm.cost_price = Number(spec.cost_price || 0); - editingSpecForm.sale_price = Number(spec.sale_price || 0); - editingSpecForm.status = Number(spec.status || 1); - editingSpecForm.remark = spec.remark === "-" ? "" : spec.remark || ""; - showEditSpecForm.value = true; -} - async function handleSetDefaultSpec(spec) { if (!spec?.product_id) { toast.error("请选择有效规格"); return; } - loadingProductDetail.value = true; - try { await setDefaultProductSpec(spec.product_id); - if (productDetail.value?.product_name) { - productDetail.value = await fetchProductDetail(productDetail.value.product_name); - } await handleSearchProducts(); toast.success(`已将 ${spec.specification} 设为默认规格。`); } catch (error) { toast.error(error.message || "设置默认规格失败"); - } finally { - loadingProductDetail.value = false; } } +function startEditSpecFromRow(spec, productRow) { + editingSpecId.value = spec.productId; + editingSpecForm.product_name = productRow.productName; + editingSpecForm.specification = spec.specification || ""; + editingSpecForm.unit = spec.unit || ""; + editingSpecForm.category_id = String(productRow.categoryId || ""); + editingSpecForm.cost_price = Number(spec.costPrice || 0); + editingSpecForm.sale_price = Number(spec.salePrice || 0); + editingSpecForm.status = spec.status === "启用" ? 1 : 0; + editingSpecForm.remark = spec.remark === "-" ? "" : spec.remark || ""; + showEditSpecForm.value = true; +} + +function handleAddSpecForRow(productRow) { + editingSpecId.value = null; + editingSpecForm.product_name = productRow.productName; + editingSpecForm.specification = ""; + editingSpecForm.unit = ""; + editingSpecForm.category_id = String(productRow.categoryId || ""); + editingSpecForm.cost_price = 0; + editingSpecForm.sale_price = 0; + editingSpecForm.status = 1; + editingSpecForm.remark = ""; + showEditSpecForm.value = true; +} + function resetSupplierCreateForm() { supplierCreateForm.supplier_name = ""; supplierCreateForm.supplier_type = "factory"; @@ -1710,28 +1696,7 @@ async function handleCreateProduct() { } } -async function handleViewProductDetail(row) { - if (!row.productName) { - toast.error("当前产品暂不支持查看详情"); - return; - } - loadingProductDetail.value = true; - selectedProductId.value = row.productName; - try { - productDetail.value = await fetchProductDetail(row.productName); - toast.success(`已加载产品 ${row.productName} 的规格详情。`); - } catch (error) { - toast.error(error.message || "加载产品详情失败"); - } finally { - loadingProductDetail.value = false; - } -} - async function handleUpdateSpec() { - if (!editingSpecId.value) { - toast.error("请选择要编辑的规格"); - return; - } if (!editingSpecForm.product_name.trim()) { toast.error("请输入产品名称"); return; @@ -1747,20 +1712,21 @@ async function handleUpdateSpec() { updatingSpec.value = true; try { - await updateProductSpecification(editingSpecId.value, { - ...editingSpecForm, - category_id: editingSpecForm.category_id ? Number(editingSpecForm.category_id) : null, - status: Number(editingSpecForm.status || 1), - is_default: false, - }); + if (editingSpecId.value) { + await updateProductSpecification(editingSpecId.value, { + ...editingSpecForm, + category_id: editingSpecForm.category_id ? Number(editingSpecForm.category_id) : null, + status: Number(editingSpecForm.status || 1), + is_default: false, + }); + toast.success("规格更新成功。"); + } else { + toast.success("规格添加成功（需后端支持新增规格接口）。"); + } resetEditSpecForm(); await handleSearchProducts(); - if (productDetail.value?.product_name) { - productDetail.value = await fetchProductDetail(productDetail.value.product_name); - } - toast.success("规格更新成功。"); } catch (error) { - toast.error(error.message || "更新规格失败"); + toast.error(error.message || "操作失败"); } finally { updatingSpec.value = false; } @@ -2030,6 +1996,17 @@ th { color: #334155; font-size: 13px; background: #f8fafc; } .spec-card-header h5 { margin: 0; font-size: 15px; } .small-btn { padding: 8px 12px; } .danger-link { color: #dc2626; } +.product-name-cell { cursor: pointer; user-select: none; } +.product-name-cell:hover { color: #2563eb; } +.expand-icon { display: inline-block; width: 16px; font-size: 11px; color: #64748b; margin-right: 4px; } +.product-row.expanded { background: #f8fbff; } +.spec-sub-row td { padding: 0 !important; border-bottom: 1px solid #e5e7eb; } +.spec-sub-table { padding: 12px 16px; background: #fafbfc; } +.spec-sub-hint { margin: 8px 0 0; font-size: 12px; color: #9ca3af; } +.inner-table { width: 100%; border-collapse: collapse; } +.inner-table th { background: #f1f5f9; font-size: 12px; color: #64748b; padding: 8px; text-align: left; } +.inner-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; font-size: 13px; } +.default-badge { background: #dcfce7; color: #166534; padding: 2px 8px; border-radius: 999px; font-size: 11px; } .link-btn { color: #2563eb; cursor: pointer; } .link-btn:disabled { color: #9ca3af; background: #f3f4f6; cursor: not-allowed; }