From b2bbbf8c44f20f124180d7f4e25678e1ef9169d8 Mon Sep 17 00:00:00 2001 From: qiube <18969599531@163.com> Date: Thu, 25 Dec 2025 17:11:48 +0800 Subject: [PATCH] =?UTF-8?q?feat(product):=20=E6=B7=BB=E5=8A=A0=E5=95=86?= =?UTF-8?q?=E5=93=81=E7=AE=A1=E7=90=86=E5=88=86=E9=A1=B5=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=B9=B6=E6=94=AF=E6=8C=81=E5=AE=8C=E6=95=B4=E9=93=BE=E6=8E=A5?= =?UTF-8?q?=E6=9F=A5=E8=AF=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加分页组件支持，包括页码、页面大小切换功能 - 实现从完整URL中自动提取链接码的功能 - 更新查询表单提示文本为"请输入链接码或完整链接" - 添加分页数据响应处理，显示总记录数和当前页码信息 - 增加分页相关的CSS样式适配移动端显示 - 重置查询时同步重置分页参数到默认值 --- src/views/ProductManage.vue | 135 ++++++++++++++++++++++++++++++++++-- 1 file changed, 129 insertions(+), 6 deletions(-) diff --git a/src/views/ProductManage.vue b/src/views/ProductManage.vue index c6b0259..ca766a6 100644 --- a/src/views/ProductManage.vue +++ b/src/views/ProductManage.vue @@ -32,7 +32,7 @@ + + +
+ +
@@ -212,7 +225,16 @@ const queryForm = ref({ name: '', linkCode: '', status: '', - salesRegion: '' + salesRegion: '', + pageNum: 1, + pageSize: 10 +}) + +// 分页信息 +const pagination = ref({ + pageNum: 1, + pageSize: 10, + total: 0 }) // 跳转到新增商品页面 @@ -268,6 +290,55 @@ const getSalesRegions = (row) => { return regions } +// 从完整URL中提取链接码 +const extractLinkCodeFromUrl = (input) => { + if (!input || !input.trim()) { + return input + } + + const trimmed = input.trim() + + // 如果包含 "/product/"，说明是完整URL，提取链接码 + const productIndex = trimmed.indexOf('/product/') + if (productIndex >= 0) { + let linkCode = trimmed.substring(productIndex + '/product/'.length) + // 移除可能的查询参数和锚点 + const queryIndex = linkCode.indexOf('?') + if (queryIndex >= 0) { + linkCode = linkCode.substring(0, queryIndex) + } + const hashIndex = linkCode.indexOf('#') + if (hashIndex >= 0) { + linkCode = linkCode.substring(0, hashIndex) + } + // 移除尾部斜杠 + linkCode = linkCode.replace(/\/$/, '') + return linkCode.trim() + } + + // 如果不包含 "/product/"，可能是直接输入的链接码，直接返回 + // 但也可能是其他格式的URL，尝试提取最后一段作为链接码 + if (trimmed.includes('/')) { + const parts = trimmed.split('/') + if (parts.length > 0) { + let lastPart = parts[parts.length - 1] + // 移除查询参数和锚点 + const queryIndex = lastPart.indexOf('?') + if (queryIndex >= 0) { + lastPart = lastPart.substring(0, queryIndex) + } + const hashIndex = lastPart.indexOf('#') + if (hashIndex >= 0) { + lastPart = lastPart.substring(0, hashIndex) + } + return lastPart.trim() + } + } + + // 直接返回（可能是纯链接码） + return trimmed +} + // 加载商品列表（无查询条件） const loadProductList = async () => { loading.value = true @@ -299,7 +370,9 @@ const handleQuery = async () => { query.name = queryForm.value.name.trim() } if (queryForm.value.linkCode && queryForm.value.linkCode.trim()) { - query.linkCode = queryForm.value.linkCode.trim() + // 自动从完整URL中提取链接码 + const extractedLinkCode = extractLinkCodeFromUrl(queryForm.value.linkCode.trim()) + query.linkCode = extractedLinkCode } if (queryForm.value.status) { query.status = queryForm.value.status @@ -308,17 +381,29 @@ const handleQuery = async () => { query.salesRegion = queryForm.value.salesRegion } + // 添加分页参数 + query.pageNum = pagination.value.pageNum + query.pageSize = pagination.value.pageSize + const response = await queryProducts(query) if (response.code === '0000' && response.data) { - productList.value = response.data + const pageResult = response.data + productList.value = pageResult.records || [] + + // 更新分页信息 + pagination.value.total = pageResult.total || 0 + pagination.value.pageNum = pageResult.current || 1 + pagination.value.pageSize = pageResult.size || 10 + if (productList.value.length === 0) { ElMessage.info('未找到符合条件的商品') } else { - ElMessage.success(`查询到 ${productList.value.length} 条商品`) + ElMessage.success(`查询到 ${pagination.value.total} 条商品，当前第 ${pagination.value.pageNum} 页`) } } else { ElMessage.error(response.message || '查询商品列表失败') productList.value = [] + pagination.value.total = 0 } } catch (error) { console.error('查询商品列表失败:', error) @@ -335,11 +420,31 @@ const handleReset = () => { name: '', linkCode: '', status: '', - salesRegion: '' + salesRegion: '', + pageNum: 1, + pageSize: 10 + } + pagination.value = { + pageNum: 1, + pageSize: 10, + total: 0 } loadProductList() } +// 分页大小改变 +const handleSizeChange = (size) => { + pagination.value.pageSize = size + pagination.value.pageNum = 1 // 重置到第一页 + handleQuery() +} + +// 页码改变 +const handlePageChange = (page) => { + pagination.value.pageNum = page + handleQuery() +} + // 编辑商品 const editProduct = (id) => { // TODO: 实现编辑功能，跳转到编辑页面 @@ -502,6 +607,24 @@ onMounted(() => { font-size: 12px; } +/* 分页容器 */ +.pagination-container { + margin-top: 20px; + display: flex; + justify-content: flex-end; + padding: 20px 0; +} + +@media (max-width: 768px) { + .pagination-container { + justify-content: center; + } + + .pagination-container :deep(.el-pagination) { + flex-wrap: wrap; + } +} + /* 查询表单 */ .search-card { margin-bottom: 20px;