|
@@ -4,7 +4,6 @@ import { getParentAsin, getSearchedItem } from '../api'
|
|
|
import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
|
|
|
import emitter from '/@/utils/emitter'
|
|
|
|
|
|
-
|
|
|
emitter.on('TopFilter', (value: any) => {
|
|
|
if (value.isVisible?.value) {
|
|
|
fetchParentAsin()
|
|
@@ -20,8 +19,12 @@ const profile = <Ref>inject('profile')
|
|
|
const parentLoading = ref(false)
|
|
|
const rightLoading = ref(false)
|
|
|
let page = 1
|
|
|
+let rightPage = 1
|
|
|
let limit = 15
|
|
|
let searchType = ''
|
|
|
+const selectedParentAsins = ref([])
|
|
|
+const singleSelect = ref([]) // 默认假设有更多数据
|
|
|
+const hasMore = ref(true)
|
|
|
|
|
|
// 父ASIN表格配置
|
|
|
const gridOptions = <any>reactive({
|
|
@@ -50,24 +53,43 @@ const gridOptionsRight = <any>reactive({
|
|
|
|
|
|
// 全选事件
|
|
|
function selectAllChangeEvent(table: any) {
|
|
|
- console.log(table.records)
|
|
|
+ console.log('多选:', table)
|
|
|
+ if (table.checked) {
|
|
|
+ fetchSearchedItem(selectedParentAsins.value)
|
|
|
+ } else {
|
|
|
+ // 如果全选被取消,清空右侧数据或执行其他逻辑
|
|
|
+ gridOptionsRight.data = []
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 单选事件
|
|
|
function selectChangeEvent(table: any) {
|
|
|
- // console.log(table.records)
|
|
|
- // 被选中的所有parentAsin组成的数组
|
|
|
- const selectedParentAsins = table.records.map((record: any) => record.parentAsin)
|
|
|
-
|
|
|
- // 保留被选中的parentAsin的对应的右侧表格数据
|
|
|
- gridOptionsRight.data = gridOptionsRight.data.filter((item: any) => selectedParentAsins.includes(item.parentAsin))
|
|
|
- // console.log(gridOptionsRight.data)
|
|
|
- // 如果勾选项的parentAsin在gridOptionsRight.data中,则发送请求获取右侧表格数据
|
|
|
- if (table.row && selectedParentAsins.includes(table.row.parentAsin)) {
|
|
|
- fetchSearchedItem([table.row.parentAsin])
|
|
|
+ if (table.checked) {
|
|
|
+ rightPage = 1 // 仅当有新的选中项时重置页码和数据
|
|
|
+ singleSelect.value.splice(0)
|
|
|
+ singleSelect.value.push(table.row.parentAsin)
|
|
|
+ gridOptionsRight.data.splice(0) // 在加载新数据之前清空现有数据
|
|
|
+ fetchSearchedItem(singleSelect.value)
|
|
|
+ } else {
|
|
|
+ // 移除singleSelect.value中对应的parentAsin
|
|
|
+ const index = singleSelect.value.indexOf(table.row.parentAsin)
|
|
|
+ if (index !== -1) {
|
|
|
+ singleSelect.value.splice(index, 1)
|
|
|
+ }
|
|
|
+ // 从gridOptionsRight.data中移除对应的项
|
|
|
+ gridOptionsRight.data = gridOptionsRight.data.filter((item: any) => item.parentAsin !== table.row.parentAsin)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 单元格点击事件处理函数
|
|
|
+function handleCellClick(table: any) {
|
|
|
+ rightPage = 1
|
|
|
+ singleSelect.value.splice(0)
|
|
|
+ singleSelect.value.push(table.row.parentAsin)
|
|
|
+ gridOptionsRight.data.splice(0)
|
|
|
+ fetchSearchedItem(singleSelect.value)
|
|
|
+}
|
|
|
+
|
|
|
async function fetchParentAsin() {
|
|
|
parentLoading.value = true
|
|
|
const body = {
|
|
@@ -92,10 +114,17 @@ async function fetchSearchedItem(parentAsin: Array<string>) {
|
|
|
profileId: profile.value.profile_id,
|
|
|
searchType: searchType,
|
|
|
parentAsin,
|
|
|
+ page: rightPage,
|
|
|
+ limit: 8,
|
|
|
}
|
|
|
try {
|
|
|
const response = await getSearchedItem(body)
|
|
|
- gridOptionsRight.data.push(...response.data)
|
|
|
+ hasMore.value = rightPage * body.limit < response.total // 计算是否还有更多数据
|
|
|
+ if (rightPage == 1 && response.data.length > 0) {
|
|
|
+ gridOptionsRight.data = response.data
|
|
|
+ } else {
|
|
|
+ gridOptionsRight.data.push(...response.data)
|
|
|
+ }
|
|
|
} catch (error) {
|
|
|
console.log('error:', error)
|
|
|
} finally {
|
|
@@ -112,6 +141,14 @@ function handleScroll(event: any) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+function handleRightScroll(event: any) {
|
|
|
+ const target = event.$event.target
|
|
|
+ if (target.scrollHeight - (target.scrollTop + target.clientHeight) < 1 && hasMore.value) {
|
|
|
+ rightPage += 1 // 准备加载下一页
|
|
|
+ fetchSearchedItem(singleSelect.value)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 切换搜索类型时,更新右侧表格字段
|
|
|
function updateGridColumnField() {
|
|
|
// 直接映射现有的columns,只修改需要改变的部分
|
|
@@ -119,11 +156,9 @@ function updateGridColumnField() {
|
|
|
if (column.field === 'sku' || column.field === 'asin') {
|
|
|
const newField = searchType === 'sku' ? 'sku' : 'asin'
|
|
|
const newTitle = searchType === 'sku' ? 'SKU' : 'ASIN'
|
|
|
-
|
|
|
- // 返回更新后的列配置
|
|
|
- return { ...column, field: newField, title: newTitle, slots: { default: `${ newField }_default` } }
|
|
|
+ return { ...column, field: newField, title: newTitle, slots: { default: `${newField}_default` } }
|
|
|
}
|
|
|
- // 对于不需要更改的列,直接返回原配置
|
|
|
+ // 不需要改变的列配置直接返回
|
|
|
return column
|
|
|
})
|
|
|
}
|
|
@@ -144,39 +179,39 @@ onBeforeUnmount(() => {
|
|
|
<template>
|
|
|
<div class="flex">
|
|
|
<vxe-grid
|
|
|
- v-loading="parentLoading"
|
|
|
- v-bind="gridOptions"
|
|
|
- :header-row-style="changeHeaderCellStyle"
|
|
|
- :header-cell-style="changeHeaderCellStyle"
|
|
|
- @checkbox-all="selectAllChangeEvent"
|
|
|
- @checkbox-change="selectChangeEvent"
|
|
|
- class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden"
|
|
|
- style="flex: 0 1 260px; overflow: auto"
|
|
|
- @scroll.native="handleScroll">
|
|
|
+ v-loading="parentLoading"
|
|
|
+ v-bind="gridOptions"
|
|
|
+ :header-row-style="changeHeaderCellStyle"
|
|
|
+ :header-cell-style="changeHeaderCellStyle"
|
|
|
+ @checkbox-all="selectAllChangeEvent"
|
|
|
+ @checkbox-change="selectChangeEvent"
|
|
|
+ @cell-click="handleCellClick"
|
|
|
+ class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden"
|
|
|
+ style="flex: 0 1 260px; overflow: auto"
|
|
|
+ @scroll.native="handleScroll">
|
|
|
<template #parentAsin_default="{ row }">
|
|
|
<div style="display: flex">
|
|
|
- <el-image class="w-14 h-14 mr-1 border rounded" v-if="row.Image" :src="row.Image" alt="" fit="contain"/>
|
|
|
+ <el-image class="w-14 h-14 mr-1 border rounded" v-if="row.Image" :src="row.Image" alt="" fit="contain" />
|
|
|
<el-image v-else class="w-12 h-12 mr-1 border rounded">
|
|
|
<template #error>
|
|
|
<div class="image-slot">
|
|
|
<el-icon>
|
|
|
- <icon-picture/>
|
|
|
+ <icon-picture />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-image>
|
|
|
-
|
|
|
<div class="flex flex-col justify-center">
|
|
|
<div class="font-medium text-black">{{ row.parentAsin }}</div>
|
|
|
<div>
|
|
|
ASIN:<span class="text-black">{{ row.asinNum }}</span>
|
|
|
<el-link
|
|
|
- :href="row.amazonUrl"
|
|
|
- target="_blank"
|
|
|
- :disabled="!row.amazonUrl"
|
|
|
- :underline="false"
|
|
|
- :icon="Connection"
|
|
|
- :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
|
|
|
+ :href="row.amazonUrl"
|
|
|
+ target="_blank"
|
|
|
+ :disabled="!row.amazonUrl"
|
|
|
+ :underline="false"
|
|
|
+ :icon="Connection"
|
|
|
+ :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
|
|
|
</el-link>
|
|
|
<span class="text-gray-300 mx-1">|</span>
|
|
|
SKU:<span class="text-black">{{ row.skuNum }}</span>
|
|
@@ -185,98 +220,101 @@ onBeforeUnmount(() => {
|
|
|
</div>
|
|
|
</template>
|
|
|
</vxe-grid>
|
|
|
-
|
|
|
+ <!-- 右侧表格 -->
|
|
|
<vxe-grid
|
|
|
- v-loading="rightLoading"
|
|
|
- v-bind="gridOptionsRight"
|
|
|
- :header-cell-style="changeHeaderCellStyle"
|
|
|
- class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden w-0"
|
|
|
- style="flex: 2 1 0">
|
|
|
+ v-loading="rightLoading"
|
|
|
+ v-bind="gridOptionsRight"
|
|
|
+ :header-cell-style="changeHeaderCellStyle"
|
|
|
+ class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden w-0"
|
|
|
+ style="flex: 2 1 0; overflow: auto"
|
|
|
+ @scroll.native="handleRightScroll">
|
|
|
<template v-if="searchType === 'sku'" #sku_default="{ row }">
|
|
|
<div style="display: flex; align-items: center">
|
|
|
- <el-image class="w-14 h-14 mr-1 border rounded" style="min-width: 56px; min-height: 56px" v-if="row.Image" :src="row.Image" alt=""
|
|
|
- fit="contain"/>
|
|
|
+ <el-image
|
|
|
+ class="w-14 h-14 mr-1 border rounded"
|
|
|
+ style="min-width: 56px; min-height: 56px"
|
|
|
+ v-if="row.Image"
|
|
|
+ :src="row.Image"
|
|
|
+ alt=""
|
|
|
+ fit="contain" />
|
|
|
<el-image v-else class="w-12 h-12 mr-1 border rounded">
|
|
|
<template #error>
|
|
|
<div class="image-slot">
|
|
|
<el-icon>
|
|
|
- <icon-picture/>
|
|
|
+ <icon-picture />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-image>
|
|
|
- <!--<div class="flex flex-col justify-center">-->
|
|
|
<div>
|
|
|
- <el-tooltip
|
|
|
- class="box-item"
|
|
|
- effect="dark"
|
|
|
- :content="row.Title"
|
|
|
- placement="top-start">
|
|
|
+ <el-tooltip class="box-item" effect="dark" :content="row.Title" placement="top-start">
|
|
|
<div class="font-medium text-black display-line">{{ row.Title }}</div>
|
|
|
</el-tooltip>
|
|
|
-
|
|
|
<div>
|
|
|
<span class="text-black font-semibold">{{ row.price }}</span>
|
|
|
<span class="text-gray-300 mx-1">|</span>
|
|
|
<span>{{ row.quantity }}</span>
|
|
|
</div>
|
|
|
- <el-tooltip
|
|
|
- offset="0"
|
|
|
- :show-arrow="false"
|
|
|
- effect="dark"
|
|
|
- :content="row.sku"
|
|
|
- placement="top-end">
|
|
|
+ <el-tooltip offset="0" :show-arrow="false" effect="dark" :content="row.sku" placement="top-end">
|
|
|
<div class="display-line">
|
|
|
-
|
|
|
ASIN:<span class="text-black">{{ row.asin }}</span>
|
|
|
<el-link
|
|
|
- :href="row.amazonUrl"
|
|
|
- target="_blank"
|
|
|
- :disabled="!row.amazonUrl"
|
|
|
- :underline="false"
|
|
|
- :icon="Connection"
|
|
|
- :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
|
|
|
+ :href="row.amazonUrl"
|
|
|
+ target="_blank"
|
|
|
+ :disabled="!row.amazonUrl"
|
|
|
+ :underline="false"
|
|
|
+ :icon="Connection"
|
|
|
+ :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
|
|
|
</el-link>
|
|
|
<span class="text-gray-300 mx-1">|</span>
|
|
|
-
|
|
|
SKU:<span class="text-black">{{ row.sku }}</span>
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
+ <!-- 表格显示ASIN相关-->
|
|
|
<template v-if="searchType === 'asin'" #asin_default="{ row }">
|
|
|
- <div style="display: flex">
|
|
|
- <el-image class="w-14 h-14 mr-1 border rounded" v-if="row.Image" :src="row.Image" alt="" fit="contain"/>
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <el-image
|
|
|
+ class="w-14 h-14 mr-1 border rounded"
|
|
|
+ style="min-width: 56px; min-height: 56px"
|
|
|
+ v-if="row.Image"
|
|
|
+ :src="row.Image"
|
|
|
+ alt=""
|
|
|
+ fit="contain" />
|
|
|
<el-image v-else class="w-12 h-12 mr-1 border rounded">
|
|
|
<template #error>
|
|
|
<div class="image-slot">
|
|
|
<el-icon>
|
|
|
- <icon-picture/>
|
|
|
+ <icon-picture />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-image>
|
|
|
- <div class="flex flex-col justify-center">
|
|
|
- <div class="font-medium text-black">{{ row.Title }}</div>
|
|
|
+ <div>
|
|
|
+ <el-tooltip class="box-item" effect="dark" :content="row.Title" placement="top-start">
|
|
|
+ <div class="font-medium text-black display-line">{{ row.Title }}</div>
|
|
|
+ </el-tooltip>
|
|
|
<div>
|
|
|
- <span>{{ row.price }}</span>
|
|
|
- <span>|</span>
|
|
|
- <span>{{ row.quantity }}</span>
|
|
|
+ <span class="text-black font-semibold">{{ row.priceMin }} ~ {{ row.priceMax }}</span>
|
|
|
+ <span class="text-gray-300 mx-1">|</span>
|
|
|
+ <span :style="{ color: row.quantity ? '#a26bf7' : '' }">
|
|
|
+ {{ row.quantity ? '有库存' : '无库存' }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div class="display-line">
|
|
|
ASIN:<span class="text-black">{{ row.asin }}</span>
|
|
|
<el-link
|
|
|
- :href="row.amazonUrl"
|
|
|
- target="_blank"
|
|
|
- :disabled="!row.amazonUrl"
|
|
|
- :underline="false"
|
|
|
- :icon="Connection"
|
|
|
- :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
|
|
|
+ :href="row.amazonUrl"
|
|
|
+ target="_blank"
|
|
|
+ :disabled="!row.amazonUrl"
|
|
|
+ :underline="false"
|
|
|
+ :icon="Connection"
|
|
|
+ :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
|
|
|
</el-link>
|
|
|
<span class="text-gray-300 mx-1">|</span>
|
|
|
- SKU:<span class="text-black">{{ row.sku }}</span>
|
|
|
+ SKU:<span class="text-black">{{ row.skuNum }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|