-
查看更多产品卡片
- - 当前查看商品：{{ currentProductName || currentProductCode }} - -
时间区间
@@ -193,44 +187,42 @@
-
-
-
-
+
{{ opt.label }}
@@ -261,39 +253,83 @@
- ![]()
+ ![]()
{{ item.name }}
- ¥{{ item.sellingPrice ?? 0 }}
- ¥{{ item.purchasePrice ?? 0 }}
- 毛利 {{ formatGrossMarginPct(item.grossMargin, item.purchasePrice != null && item.sellingPrice != null ? (1 - item.purchasePrice / item.sellingPrice) * 100 : undefined) }}%
+
+ ¥{{ formatNumber(item.sellingPrice) }}
+ -
+
+
+ ¥{{ formatNumber(item.purchasePrice) }}
+ -
+
+
+
+ 毛利 {{ formatGrossMarginPct(item.grossMargin, item.purchasePrice != null && item.sellingPrice != null ? (1 - item.purchasePrice / item.sellingPrice) * 100 : undefined) }}%
+
+ -
+
-
-
总销量
- {{ item.salesCount ?? 0 }}件
-
@@ -329,36 +365,88 @@
-
-
-
+
+
+
+
+ {{ row.name || '-' }}
+
+
+
+
+
+ {{ row.code || '-' }}
+
+
+
+
+
+
+ {{ row.barcode || '-' }}
+
+
+
+
+
+ {{ row.color || '-' }}
+
+
+
+
+ ¥{{ formatNumber(row.purchasePrice) }}
+ -
+
+
+
+
+ ¥{{ formatNumber(row.sellingPrice) }}
+ -
+
+
+
+
+
+
+
([
- {
- name: 'GZ6596Z 法式收腰连衣裙',
- code: '54000008',
- color: '黑色',
- season: '25春 一波段',
- category: '女装 / 连衣裙',
- daysOnMarket: 35,
- salesAmount: 85200,
- salesCount: 320,
- inventoryCount: 120,
- turnoverText: '周转: 15天 (极快)',
- turnoverStatus: 'success',
- selloutRate: 78,
- selloutRateStatus: 'danger',
- discount: '9.5折',
- discountStatus: 'info',
- sizes: [
- { label: 'S', status: 'out', title: 'S码 缺货', stock: 0 },
- { label: 'M', status: 'out', title: 'M码 缺货', stock: 0 },
- { label: 'L', status: 'low', title: 'L码 紧张', stock: 8 },
- { label: 'XL', status: 'ok', title: 'XL码 充足', stock: 45 }
- ],
- sizeStatusText: '缺核心码',
- sizeStatusStatus: 'danger',
- lifecycle: '爆发成长期',
- lifecycleType: 'success',
- barcode: '6901234567890',
- purchasePrice: 168,
- sellingPrice: 399,
- imageUrl: 'https://img.alicdn.com/imgextra/i1/2215397650053/O1CN01kQKs0S1COq3OWK7Wb_!!2215397650053.jpg',
- supplierName: '杭州女装供应链有限公司'
- },
- {
- name: '7537X 双面呢大衣',
- code: '54000321',
- color: '驼色',
- season: '24冬 三波段',
- category: '女装 / 外套',
- daysOnMarket: 120,
- salesAmount: 22000,
- salesCount: 18,
- inventoryCount: 850,
- turnoverText: '周转: 280天 (滞销)',
- turnoverStatus: 'info',
- selloutRate: 15,
- selloutRateStatus: 'warning',
- discount: '6.0折',
- discountStatus: 'danger',
- sizes: [
- { label: 'S', status: 'ok', title: 'S码 充足', stock: 210 },
- { label: 'M', status: 'ok', title: 'M码 充足', stock: 220 },
- { label: 'L', status: 'ok', title: 'L码 充足', stock: 215 },
- { label: 'XL', status: 'ok', title: 'XL码 充足', stock: 205 }
- ],
- sizeStatusText: '库存齐色齐码',
- sizeStatusStatus: 'info',
- lifecycle: '严重滞销',
- lifecycleType: 'danger',
- barcode: '6901234567891',
- purchasePrice: 580,
- sellingPrice: 1299,
- imageUrl: 'https://img.alicdn.com/imgextra/i2/2215397650053/O1CN01kQKs0S1COq3OWK7Wb_!!2215397650053.jpg',
- supplierName: '上海大衣制造厂'
- },
- {
- name: 'C01J 圆领针织衫',
- code: '54000159',
- color: '米白',
- season: '25春 二波段',
- category: '女装 / 毛衫',
- daysOnMarket: 25,
- salesAmount: 45000,
- salesCount: 120,
- inventoryCount: 450,
- turnoverText: '周转: 45天 (健康)',
- turnoverStatus: 'success',
- selloutRate: 35,
- selloutRateStatus: 'info',
- discount: '9.0折',
- discountStatus: 'info',
- sizes: [
- { label: 'S', status: 'ok', title: 'S码 充足', stock: 120 },
- { label: 'M', status: 'warn', title: 'M码 紧张', stock: 25 },
- { label: 'L', status: 'ok', title: 'L码 充足', stock: 150 },
- { label: 'XL', status: 'ok', title: 'XL码 充足', stock: 155 }
- ],
- sizeStatusText: '',
- sizeStatusStatus: 'info',
- lifecycle: '正常销售',
- lifecycleType: 'info',
- barcode: '6901234567892',
- purchasePrice: 128,
- sellingPrice: 299,
- imageUrl: 'https://img.alicdn.com/imgextra/i3/2215397650053/O1CN01kQKs0S1COq3OWK7Wb_!!2215397650053.jpg',
- supplierName: '广州针织品有限公司'
- },
- {
- name: 'LK2025 春季休闲裤',
- code: '54000245',
- color: '卡其色',
- season: '25春 一波段',
- category: '女装 / 休闲裤',
- daysOnMarket: 28,
- salesAmount: 125000,
- salesCount: 450,
- inventoryCount: 280,
- turnoverText: '周转: 38天 (健康)',
- turnoverStatus: 'success',
- selloutRate: 62,
- selloutRateStatus: 'success',
- discount: '8.5折',
- discountStatus: 'info',
- sizes: [
- { label: 'S', status: 'ok', title: 'S码 充足', stock: 45 },
- { label: 'M', status: 'warn', title: 'M码 紧张', stock: 8 },
- { label: 'L', status: 'ok', title: 'L码 充足', stock: 52 },
- { label: 'XL', status: 'ok', title: 'XL码 充足', stock: 38 }
- ],
- sizeStatusText: 'M码需补货',
- sizeStatusStatus: 'warning',
- lifecycle: '稳定销售期',
- lifecycleType: 'info',
- barcode: '6901234567893',
- purchasePrice: 158,
- sellingPrice: 369,
- imageUrl: 'https://img.alicdn.com/imgextra/i4/2215397650053/O1CN01kQKs0S1COq3OWK7Wb_!!2215397650053.jpg',
- supplierName: '深圳休闲服饰有限公司'
- },
- {
- name: 'FW2024 冬季羽绒服',
- code: '54000188',
- color: '黑色',
- season: '24冬 二波段',
- category: '女装 / 外套',
- daysOnMarket: 95,
- salesAmount: 185000,
- salesCount: 95,
- inventoryCount: 520,
- turnoverText: '周转: 210天 (滞销)',
- turnoverStatus: 'danger',
- selloutRate: 18,
- selloutRateStatus: 'danger',
- discount: '5.5折',
- discountStatus: 'danger',
- sizes: [
- { label: 'S', status: 'ok', title: 'S码 充足', stock: 120 },
- { label: 'M', status: 'ok', title: 'M码 充足', stock: 135 },
- { label: 'L', status: 'ok', title: 'L码 充足', stock: 145 },
- { label: 'XL', status: 'ok', title: 'XL码 充足', stock: 120 }
- ],
- sizeStatusText: '库存积压严重',
- sizeStatusStatus: 'danger',
- lifecycle: '衰退期',
- lifecycleType: 'danger',
- barcode: '6901234567894',
- purchasePrice: 680,
- sellingPrice: 1599,
- imageUrl: 'https://img.alicdn.com/imgextra/i1/2215397650053/O1CN01kQKs0S1COq3OWK7Wb_!!2215397650053.jpg',
- supplierName: '江苏羽绒制品厂'
- },
- {
- name: 'TS2025 春季新品T恤',
- code: '54000356',
- color: '白色',
- season: '25春 一波段',
- category: '女装 / T恤',
- daysOnMarket: 15,
- salesAmount: 98000,
- salesCount: 680,
- inventoryCount: 320,
- turnoverText: '周转: 12天 (极快)',
- turnoverStatus: 'success',
- selloutRate: 68,
- selloutRateStatus: 'success',
- discount: '9.8折',
- discountStatus: 'info',
- sizes: [
- { label: 'S', status: 'out', title: 'S码 缺货', stock: 0 },
- { label: 'M', status: 'out', title: 'M码 缺货', stock: 2 },
- { label: 'L', status: 'low', title: 'L码 紧张', stock: 15 },
- { label: 'XL', status: 'ok', title: 'XL码 充足', stock: 48 }
- ],
- sizeStatusText: '核心码缺货，需紧急补货',
- sizeStatusStatus: 'danger',
- lifecycle: '爆发成长期',
- lifecycleType: 'success',
- barcode: '6901234567895',
- purchasePrice: 68,
- sellingPrice: 159,
- imageUrl: 'https://img.alicdn.com/imgextra/i2/2215397650053/O1CN01kQKs0S1COq3OWK7Wb_!!2215397650053.jpg',
- supplierName: '浙江T恤代工厂'
- },
- {
- name: 'CS2025 春季衬衫',
- code: '54000378',
- color: '蓝色',
- season: '25春 二波段',
- category: '女装 / 衬衫',
- daysOnMarket: 20,
- salesAmount: 156000,
- salesCount: 520,
- inventoryCount: 480,
- turnoverText: '周转: 25天 (快速)',
- turnoverStatus: 'success',
- selloutRate: 52,
- selloutRateStatus: 'success',
- discount: '9.2折',
- discountStatus: 'info',
- sizes: [
- { label: 'S', status: 'ok', title: 'S码 充足', stock: 95 },
- { label: 'M', status: 'warn', title: 'M码 紧张', stock: 12 },
- { label: 'L', status: 'ok', title: 'L码 充足', stock: 88 },
- { label: 'XL', status: 'ok', title: 'XL码 充足', stock: 76 }
- ],
- sizeStatusText: 'M码需补货',
- sizeStatusStatus: 'warning',
- lifecycle: '成长期',
- lifecycleType: 'success',
- barcode: '6901234567896',
- purchasePrice: 138,
- sellingPrice: 329,
- imageUrl: 'https://img.alicdn.com/imgextra/i3/2215397650053/O1CN01kQKs0S1COq3OWK7Wb_!!2215397650053.jpg',
- supplierName: '杭州衬衫供应链'
- }
-])
+const productList = ref([])
/** 表格行：在 ProductCardItem 基础上补充列表列所需字段（与 index 商品明细一致） */
type TableRow = ProductCardItem & {
@@ -853,16 +725,16 @@ const visibleProductList = computed(() => {
return productList.value.filter((item) => productMatchesLabelFilter(item, filter))
})
-/** 将 visibleProductList 转为表格行（缺的 Raw 用派生值或 '-'） */
+/** 将 visibleProductList 转为表格行（Raw 字段直接用于展示，缺失时用 '-'） */
const tableList = computed(() =>
visibleProductList.value.map((item) => ({
...item,
- lsRaw: item.salesCount != null || item.salesAmount != null ? `${item.salesCount ?? 0}件/${item.salesAmount ?? 0}元` : '-',
- j7slRaw: '-',
- kcslRaw: item.inventoryCount != null ? `${item.inventoryCount}件` : '-',
- zksqlRaw: item.discount != null && item.selloutRate != null ? `${item.discount},${item.selloutRate}%` : '-',
- shdxdRaw: '-',
- wsdpRaw: '-',
+ lsRaw: item.salesAmount != null || item.salesCount != null ? `${item.salesCount ?? ''}${item.salesCount != null ? '件/' : ''}${item.salesAmount ?? ''}${item.salesAmount != null ? '元' : ''}` : undefined,
+ j7slRaw: undefined,
+ kcslRaw: item.inventoryCount != null ? `${item.inventoryCount}件` : undefined,
+ zksqlRaw: item.discount != null || item.selloutRate != null ? `${item.discount ?? ''}${item.discount && item.selloutRate != null ? ',' : ''}${item.selloutRate != null ? item.selloutRate + '%' : ''}` : undefined,
+ shdxdRaw: undefined,
+ wsdpRaw: undefined,
actionText: '分析',
actionType: 'default' as const
}))
@@ -880,18 +752,47 @@ function handleProductRowClick(row: TableRow) {
}
function handleProductCodeClick(row: TableRow) {
- router.push({
- path: '/reports/lijun/reportpage6/detail',
- query: { spdm: row.code || '' }
- }).catch(() => {
- ElMessage.warning('路由未配置或详情页不存在')
- })
+ const spdm = row.code || ''
+ router
+ .push({
+ path: '/reports/lijun/reportpage6/detail',
+ query: {
+ // 关键商品编码
+ spdm,
+ // 透传当前大盘的所有查询条件，便于明细页还原筛选环境
+ rq: queryParams.rq,
+ rq2: queryParams.rq2,
+ ckdm: queryParams.ckdm.join(','),
+ pp: queryParams.pp.join(','),
+ season: queryParams.season.join(','),
+ zgj: queryParams.zgj.join(','),
+ category: queryParams.category.join(','),
+ line: queryParams.line.join(',')
+ }
+ })
+ .catch(() => {
+ ElMessage.warning('路由未配置或详情页不存在')
+ })
}
function handleTableAction(row: TableRow) {
ElMessage.info(`执行操作: ${row.actionText}`)
}
+async function copyCellText(val?: string) {
+ const text = (val ?? '').toString().trim()
+ if (!text) {
+ ElMessage.warning('无可复制内容')
+ return
+ }
+ try {
+ await navigator.clipboard.writeText(text)
+ ElMessage.success('已复制到剪贴板')
+ } catch {
+ ElMessage.error('复制失败，请手动选择复制')
+ }
+}
+
function arrToArray(val: unknown): string[] {
if (Array.isArray(val)) return val.filter((v) => typeof v === 'string')
if (val === undefined || val === null) return []
@@ -913,6 +814,46 @@ function applyQueryFromRoute() {
currentProductCode.value = (q.productCode && typeof q.productCode === 'string') ? q.productCode : ''
currentProductName.value = (q.productName && typeof q.productName === 'string') ? q.productName : ''
dateRange.value = [queryParams.rq, queryParams.rq2]
+
+ // 根据路由传入的时间区间反推当前快捷按钮（与详情页/供应商/品类诊断一致）
+ try {
+ const rq = queryParams.rq
+ const rq2 = queryParams.rq2
+ const today = dayjs().format('YYYY-MM-DD')
+
+ // 仅在 rq2 为今天时才尝试匹配 week7/day15/day30 或年份
+ if (rq && rq2 && rq2 === today) {
+ const diff = dayjs(today).diff(dayjs(rq), 'day')
+ if (diff === 6) {
+ activeTimeRange.value = 'week7'
+ return
+ }
+ if (diff === 14) {
+ activeTimeRange.value = 'day15'
+ return
+ }
+ if (diff === 29) {
+ activeTimeRange.value = 'day30'
+ return
+ }
+ }
+
+ // 尝试匹配全年快捷：从某年1月1日到该年末或今天
+ if (rq && rq2) {
+ const startYear = dayjs(rq).year()
+ const yearStart = dayjs(`${startYear}-01-01`).format('YYYY-MM-DD')
+ const yearEnd = startYear === dayjs().year() ? today : dayjs(`${startYear}-12-31`).format('YYYY-MM-DD')
+ if (rq === yearStart && rq2 === yearEnd) {
+ activeTimeRange.value = `year${startYear}`
+ return
+ }
+ }
+
+ // 其余情况，不高亮任何快捷按钮
+ activeTimeRange.value = ''
+ } catch {
+ activeTimeRange.value = ''
+ }
}
function disabledDate(time: Date) {
@@ -975,12 +916,158 @@ function handleReset() {
handleQuery()
}
-function handleQuery() {
+function arrToQuery(arr: string[]): string {
+ return Array.isArray(arr) && arr.length > 0 ? arr.join(',') : ''
+}
+
+async function handleQuery() {
loading.value = true
- setTimeout(() => {
- loading.value = false
+ try {
+ const baseParams = {
+ reportId: REPORT_ID,
+ rq_s: queryParams.rq,
+ rq_e: queryParams.rq2,
+ ckdm: arrToQuery(queryParams.ckdm),
+ pp: arrToQuery(queryParams.pp),
+ dalei: arrToQuery(queryParams.category),
+ jj: arrToQuery(queryParams.season),
+ p: '123',
+ username: username.value
+ }
+
+ const res: any = await ReportApi.executeProcedureWithData({
+ ...baseParams,
+ name: 'YDY_AI_GET_SPXQ'
+ } as any)
+
+ // 兼容多种返回结构：数组 / { data: [] } / { code, data: [] }
+ let data: any[] | null = null
+ if (Array.isArray(res)) {
+ data = res
+ } else if (res && Array.isArray(res.data)) {
+ data = res.data
+ } else if (res && res.code != null && Array.isArray(res.data)) {
+ data = res.data
+ }
+
+ if (data && data.length > 0) {
+ productList.value = data.map((row: any) => {
+ // 映射存储过程字段 → 页面字段
+ // jj: 季节代码，例如 "20"
+ // jijie: 季节名称，例如 "春"
+ const seasonName = row.jijie ?? ''
+ const seasonCode = row.jj ?? ''
+ const season = seasonName || seasonCode ? `${seasonName || ''}${seasonCode ? `(${seasonCode})` : ''}` : '-'
+
+ // kcsl: 库存数量（字符串），直接转数值
+ const inventoryCount = Number(row.kcsl ?? 0) || 0
+
+ // lssl: 零售数量，如 "2726件/" → 2726
+ const salesCount = (() => {
+ const raw = String(row.lssl ?? '').split('件')[0].trim()
+ const n = Number(raw)
+ return isNaN(n) ? 0 : n
+ })()
+
+ // lsje: 零售金额，如 "79051元" → 79051
+ const salesAmount = (() => {
+ const raw = String(row.lsje ?? '').replace('元', '').trim()
+ const n = Number(raw)
+ return isNaN(n) ? 0 : n
+ })()
+
+ // zksql: 售罄率，如 "60.96%" → 60.96
+ const selloutRate = (() => {
+ const raw = String(row.zksql ?? '').replace('%', '').trim()
+ const n = Number(raw)
+ return isNaN(n) ? 0 : n
+ })()
+
+ // pjz: 平均折，例如 "1.00" → "1.00折"
+ const discount = row.pjz != null ? `${row.pjz}折` : row.discount ?? '-'
+
+ // 进售价：sj=售价，jj=进价
+ const purchasePrice = Number(row.jj ?? row.purchasePrice ?? 0) || 0
+ const sellingPrice = Number(row.sj ?? row.sellingPrice ?? 0) || 0
+ const grossMargin =
+ row.grossMargin != null
+ ? Number(row.grossMargin)
+ : sellingPrice > 0
+ ? (sellingPrice - purchasePrice) / sellingPrice
+ : 0
+
+ return {
+ // 商品名称：spmc
+ name: row.spmc ?? row.name ?? row.spdm ?? '-',
+ // 款号：spdm
+ code: String(row.spdm ?? row.code ?? ''),
+ // 颜色：ysmc
+ color: row.ysmc ?? row.color ?? '-',
+ // 季节：jijie + jj
+ season,
+ // 类目：大类/中类/小类 dl / zl / xl
+ category: row.dl || row.zl || row.xl || '-',
+ // 上市天数：根据上市日期 ssrq 粗略计算
+ daysOnMarket: row.ssrq ? dayjs().diff(dayjs(row.ssrq), 'day') : Number(row.daysOnMarket ?? 0),
+ salesAmount,
+ salesCount,
+ inventoryCount,
+ turnoverText: row.turnoverText ?? '',
+ turnoverStatus: (row.turnoverStatus as UiStatus) ?? 'info',
+ // 售罄率：zksql
+ selloutRate,
+ selloutRateStatus: (row.selloutRateStatus as UiStatus) ?? 'info',
+ // 平均折：pjz
+ discount,
+ discountStatus: (row.discountStatus as UiStatus) ?? 'info',
+ // 尺码明细：cmjs "M,488,red;L,718,red;XL,540,yellow"
+ sizes: Array.isArray(row.sizes)
+ ? (row.sizes as ProductSizeStatus[])
+ : String(row.cmjs ?? '')
+ .split(';')
+ .map((seg: string) => seg.trim())
+ .filter(Boolean)
+ .map((seg: string) => {
+ const [label, stockStr, color] = seg.split(',').map((s) => s.trim())
+ const stock = Number(stockStr ?? 0) || 0
+ let status: ProductSizeStatus['status'] = 'ok'
+ if (color === 'red') status = 'low'
+ else if (color === 'yellow') status = 'warn'
+ return {
+ label: label || '',
+ status,
+ title: `${label || ''}码`,
+ stock,
+ sales: undefined
+ } as ProductSizeStatus
+ }),
+ sizeStatusText: row.sizeStatusText ?? '',
+ sizeStatusStatus: (row.sizeStatusStatus as UiStatus) ?? 'info',
+ // 类型/生命周期标签：优先 type，其次 cz
+ lifecycle: row.lifecycle ?? '',
+ lifecycleType: (row.lifecycleType as any) ?? 'info',
+ imageUrl: row.imageUrl ?? row.pic ?? undefined,
+ type: row.type ?? row.cz ?? row.lx ?? undefined,
+ supplierName: row.supplierName ?? row.ghs ?? undefined,
+ productId: row.productId ?? undefined,
+ barcode: row.barcode ?? row.sptm ?? undefined,
+ purchasePrice,
+ sellingPrice,
+ grossMargin
+ }
+ })
+ } else {
+ productList.value = []
+ }
+
ElMessage.success('查询成功')
- }, 300)
+ } catch (e) {
+ console.error(e)
+ ElMessage.error('查询失败，请稍后重试')
+ productList.value = []
+ } finally {
+ loading.value = false
+ }
}
async function fetchBrandOptions() {
@@ -1045,6 +1132,8 @@ onMounted(async () => {
if (queryParams.ckdm.length === 0 && storeOptions.value.length > 0) {
queryParams.ckdm = storeOptions.value.map((o) => o.value)
}
+ // 进入页面后直接按当前查询条件拉取商品数据
+ await handleQuery()
})
watch(() => route.query, () => applyQueryFromRoute(), { deep: true })
@@ -1052,7 +1141,6 @@ watch(() => route.query, () => applyQueryFromRoute(), { deep: true })
+ :data="filteredTableList"
+ v-loading="loading"
+ border
+ stripe
+ style="width: 100%"
+ row-class-name="product-list-row-clickable"
+ @row-click="handleProductRowClick"
+ >
+
+
-
-
- ![商品图片]()
+ ![商品图片]()
-
-
- 款号: {{ row.code || '-' }}
- 条码: {{ row.barcode || '-' }}
- 颜色: {{ row.color }}
- 进价: ¥{{ formatNumber(row.purchasePrice || 0) }}
- 售价: ¥{{ formatNumber(row.sellingPrice || 0) }}
- {{ row.category }}
{{ row.lsRaw || '-' }}
@@ -438,6 +526,7 @@ import dayjs from 'dayjs'
import { Picture, Grid, List, Search } from '@element-plus/icons-vue'
import { ReportApi } from '@/api/ydoyun/report/reportpage'
import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/store/modules/user'
const REPORT_ID = 6
@@ -485,11 +574,20 @@ interface ProductCardItem {
grossMargin?: number
}
+function productTagClass(tag: string): string {
+ if (!tag) return ''
+ if (tag.includes('慢') || tag.includes('低') || tag.includes('预警')) return 'kb22-tag-warn'
+ if (tag.includes('滞后') || tag.includes('高')) return 'kb22-tag-danger'
+ return 'kb22-tag-success'
+}
+
defineOptions({ name: 'ProductCardsPage' })
const route = useRoute()
const router = useRouter()
const loading = ref(false)
+const userStore = useUserStore()
+const username = computed(() => userStore.user?.username || '')
/** 展示形式：卡片 | 列表（与 ProductDashboard 商品明细表格一致） */
const displayMode = ref<'card' | 'table'>('card')
@@ -589,233 +687,7 @@ function hasOutOfStockSize(sizes: ProductSizeStatus[]): boolean {
return Array.isArray(sizes) && sizes.some((s) => s.status === 'out' || s.stock === 0)
}
-// Mock：与列表页一致的全量数据（7 条）
-const productList = ref