✨ feat: 表格合计栏, 交互全局联动, 代码优化

package-lock.json

@@ -2128,18 +2128,6 @@
 			"resolved": "https://registry.npmmirror.com/@cropper/utils/-/utils-2.0.0-beta.4.tgz",
 			"integrity": "sha512-mrUTA3LbEq1Y3nPTC5X6koTd2Dk8P+6xTuhp4P8X3mg5Z7d8AVK+0OU5kbB49OLAaEfvGEqbZJ84rLwgMy9RHw=="
 		},
-		"@css-render/plugin-bem": {
-			"version": "0.15.12",
-			"resolved": "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.12.tgz",
-			"integrity": "sha512-Lq2jSOZn+wYQtsyaFj6QRz2EzAnd3iW5fZeHO1WSXQdVYwvwGX0ZiH3X2JQgtgYLT1yeGtrwrqJdNdMEUD2xTw==",
-			"dev": true
-		},
-		"@css-render/vue3-ssr": {
-			"version": "0.15.12",
-			"resolved": "https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.12.tgz",
-			"integrity": "sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==",
-			"dev": true
-		},
 		"@ctrl/tinycolor": {
 			"version": "3.6.1",
 			"resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -2150,12 +2138,6 @@
 			"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
 			"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg=="
 		},
-		"@emotion/hash": {
-			"version": "0.8.0",
-			"resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
-			"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-			"dev": true
-		},
 		"@esbuild/android-arm": {
 			"version": "0.18.20",
 			"resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -2771,12 +2753,6 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
-		"@juggle/resize-observer": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
-			"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
-			"dev": true
-		},
 		"@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3419,12 +3395,6 @@
 			"integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
 			"dev": true
 		},
-		"@types/katex": {
-			"version": "0.16.7",
-			"resolved": "https://registry.npmmirror.com/@types/katex/-/katex-0.16.7.tgz",
-			"integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
-			"dev": true
-		},
 		"@types/lodash": {
 			"version": "4.14.202",
 			"resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.202.tgz",
@@ -4481,24 +4451,6 @@
 			"resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
 			"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
 		},
-		"css-render": {
-			"version": "0.15.12",
-			"resolved": "https://registry.npmmirror.com/css-render/-/css-render-0.15.12.tgz",
-			"integrity": "sha512-eWzS66patiGkTTik+ipO9qNGZ+uNuGyTmnz6/+EJIiFg8+3yZRpnMwgFo8YdXhQRsiePzehnusrxVvugNjXzbw==",
-			"dev": true,
-			"requires": {
-				"@emotion/hash": "~0.8.0",
-				"csstype": "~3.0.5"
-			},
-			"dependencies": {
-				"csstype": {
-					"version": "3.0.11",
-					"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz",
-					"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
-					"dev": true
-				}
-			}
-		},
 		"cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -4530,21 +4482,6 @@
 				}
 			}
 		},
-		"date-fns": {
-			"version": "2.30.0",
-			"resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
-			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.21.0"
-			}
-		},
-		"date-fns-tz": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-2.0.0.tgz",
-			"integrity": "sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==",
-			"dev": true
-		},
 		"dateformat": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmmirror.com/dateformat/-/dateformat-2.2.0.tgz",
@@ -5091,12 +5028,6 @@
 			"resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-2.0.3.tgz",
 			"integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
 		},
-		"evtd": {
-			"version": "0.2.4",
-			"resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",
-			"integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
-			"dev": true
-		},
 		"ext": {
 			"version": "1.7.0",
 			"resolved": "https://registry.npmmirror.com/ext/-/ext-1.7.0.tgz",
@@ -5473,12 +5404,6 @@
 				}
 			}
 		},
-		"highlight.js": {
-			"version": "11.9.0",
-			"resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.9.0.tgz",
-			"integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
-			"dev": true
-		},
 		"html-tags": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-3.3.1.tgz",
@@ -6149,41 +6074,6 @@
 				"thenify-all": "^1.0.0"
 			}
 		},
-		"naive-ui": {
-			"version": "2.38.1",
-			"resolved": "https://registry.npmmirror.com/naive-ui/-/naive-ui-2.38.1.tgz",
-			"integrity": "sha512-AnU1FQ7K/CbhguAX++V4kCFjk7h7RvWt4nvZPRjORMpq+fUIlzD+EcQ5Cv1VqDloNF8+eMv4Akc2Ogacc9S+5A==",
-			"dev": true,
-			"requires": {
-				"@css-render/plugin-bem": "^0.15.12",
-				"@css-render/vue3-ssr": "^0.15.12",
-				"@types/katex": "^0.16.2",
-				"@types/lodash": "^4.14.198",
-				"@types/lodash-es": "^4.17.9",
-				"async-validator": "^4.2.5",
-				"css-render": "^0.15.12",
-				"csstype": "^3.1.3",
-				"date-fns": "^2.30.0",
-				"date-fns-tz": "^2.0.0",
-				"evtd": "^0.2.4",
-				"highlight.js": "^11.8.0",
-				"lodash": "^4.17.21",
-				"lodash-es": "^4.17.21",
-				"seemly": "^0.3.8",
-				"treemate": "^0.3.11",
-				"vdirs": "^0.1.8",
-				"vooks": "^0.2.12",
-				"vueuc": "^0.4.58"
-			},
-			"dependencies": {
-				"csstype": {
-					"version": "3.1.3",
-					"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
-					"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-					"dev": true
-				}
-			}
-		},
 		"namespace-emitter": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmmirror.com/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
@@ -6829,12 +6719,6 @@
 				"get-ready": "~1.0.0"
 			}
 		},
-		"seemly": {
-			"version": "0.3.8",
-			"resolved": "https://registry.npmmirror.com/seemly/-/seemly-0.3.8.tgz",
-			"integrity": "sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==",
-			"dev": true
-		},
 		"select": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
@@ -7235,12 +7119,6 @@
 				"is-number": "^7.0.0"
 			}
 		},
-		"treemate": {
-			"version": "0.3.11",
-			"resolved": "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz",
-			"integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==",
-			"dev": true
-		},
 		"ts-interface-checker": {
 			"version": "0.1.13",
 			"resolved": "https://registry.npmmirror.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -7644,15 +7522,6 @@
 				"@sphinxxxx/color-conversion": "^2.2.2"
 			}
 		},
-		"vdirs": {
-			"version": "0.1.8",
-			"resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz",
-			"integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==",
-			"dev": true,
-			"requires": {
-				"evtd": "^0.2.2"
-			}
-		},
 		"vite": {
 			"version": "4.4.11",
 			"resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
@@ -7734,15 +7603,6 @@
 				}
 			}
 		},
-		"vooks": {
-			"version": "0.2.12",
-			"resolved": "https://registry.npmmirror.com/vooks/-/vooks-0.2.12.tgz",
-			"integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==",
-			"dev": true,
-			"requires": {
-				"evtd": "^0.2.2"
-			}
-		},
 		"vue": {
 			"version": "3.3.4",
 			"resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz",
@@ -7888,21 +7748,6 @@
 				}
 			}
 		},
-		"vueuc": {
-			"version": "0.4.58",
-			"resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.58.tgz",
-			"integrity": "sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==",
-			"dev": true,
-			"requires": {
-				"@css-render/vue3-ssr": "^0.15.10",
-				"@juggle/resize-observer": "^3.3.1",
-				"css-render": "^0.15.10",
-				"evtd": "^0.2.4",
-				"seemly": "^0.3.6",
-				"vdirs": "^0.1.4",
-				"vooks": "^0.2.4"
-			}
-		},
 		"vxe-table": {
 			"version": "4.5.20",
 			"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.5.20.tgz",

package.json

@@ -66,7 +66,6 @@
 		"@vue/compiler-sfc": "^3.2.45",
 		"eslint": "^8.29.0",
 		"eslint-plugin-vue": "^9.8.0",
-		"naive-ui": "^2.38.1",
 		"prettier": "^2.8.1",
 		"sass": "^1.56.2",
 		"typescript": "^4.9.4",

src/main.ts

@@ -27,7 +27,6 @@ import iconfont from '/@/assets/iconfont/iconfont.json' //引入json文件
 import '/@/assets/iconfont/iconfont.css' //引入css
 // 自动注册插件
 import { scanAndInstallPlugins } from '/@/views/plugins/index'
-import naive from 'naive-ui'
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 
@@ -39,12 +38,7 @@ import UTC from 'dayjs/plugin/utc'
 import Timezon from 'dayjs/plugin/timezone'
 import IsSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import 'dayjs/locale/zh-cn'
-import {
-  // create naive ui
-  create,
-  // component
-  NButton,
-} from 'naive-ui'
+
 
 dayjs.extend(UTC)
 dayjs.extend(Timezon)
@@ -56,9 +50,6 @@ iconList.addIcon(forIconfont.list) // 添加iconfont dvadmin3的icon
 iconList.addIcon(elementPlus) // 添加element plus的图标
 iconList.addIcon(fontAwesome470) // 添加fontAwesome 470版本的图标
 
-// const naive = create({
-//   components: [NButton],
-// })
 
 let app = createApp(App)
 
@@ -74,7 +65,7 @@ pinia.use(piniaPersist)
 directive(app)
 other.elSvg(app)
 
-app.use(naive)
+
 app.use(VXETable)
 app.use(permission)
 app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).use(fastCrud).mount('#app')

src/views/productCenter/productList/api.ts

@@ -95,3 +95,17 @@ export function getTableDataForProductLine(query) {
     params: query,
   })
 }
+export function getTableDataForFaASIN(query) {
+  return request({
+    url: '/api/sellers/home/productline/list/',
+    method: 'GET',
+    params: query,
+  })
+}
+export function getTableDataForASIN(query) {
+  return request({
+    url: '/api/sellers/home/productline/list/',
+    method: 'GET',
+    params: query,
+  })
+}

src/views/productCenter/productList/components/DataTable/index.vue

@@ -13,26 +13,55 @@
       <template #sex_default="{ row }">
         <span>{{ formatSex(row) }}</span>
       </template>
+      <vxe-grid v-bind="gridOptions">
+        <template #num_footer="{ items, _columnIndex }">
+          <span>￥{{ items[_columnIndex] }}</span>
+        </template>
+      </vxe-grid>
+      <template #pager>
+        <vxe-pager
+          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
+          v-model:current-page="tablePage.currentPage"
+          v-model:page-size="tablePage.pageSize"
+          :total="tablePage.total"
+          @page-change="handlePageChange">
+        </vxe-pager>
+      </template>
     </vxe-grid>
   </div>
 </template>
 
-<script setup>
-import { reactive, ref, inject, onBeforeUnmount, onMounted,watch } from 'vue'
+<script setup lang="ts">
+import { reactive, ref, inject, watch } from 'vue'
 import { VXETable } from 'vxe-table'
-import { getTableDataForSKU, getTableDataForProductLine } from '/@/views/productCenter/productList/api'
+import { getTableDataForSKU, getTableDataForProductLine, getTableDataForFaASIN, getTableDataForASIN } from '/@/views/productCenter/productList/api'
 import emitter from '/@/utils/emitter'
-import { skuColumns, productLineColumns } from '/@/views/productCenter/productList/utils/index'
+import { skuColumns, productLineColumns } from '/@/views/productCenter/productList/utils/columns'
+import useProductlineId from '/@/views/productCenter/productList/hooks/useProductlineId'
+import useTableColumns from '../../hooks/useTableColumns'
 
-const profile = inject('profile')
-const dateRange = inject('dateRange')
+const profile = <any>inject('profile')
+const dateRange = <any>inject('dateRange')
+const activeButton = <any>inject('activeButton')
 
+const isCompare = ref(false)
 const tableLoading = ref(false)
 
+const { productlineId } = useProductlineId()
+const { totalSummary, summaryFormats } = useTableColumns()
+
+const tablePage = reactive({
+  total: 0,
+  currentPage: 1,
+  pageSize: 10,
+})
+
 const gridOptions = reactive({
   height: 'auto',
   border: false,
   round: true,
+  showFooter: true,
+
   columnConfig: {
     resizable: true,
   },
@@ -43,87 +72,49 @@ const gridOptions = reactive({
     },
   },
   columns: [],
-  data: [
-    // { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, num: 234, address: 'test abc' },
-    // { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, num: 34, address: 'Guangzhou' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-    // { id: 10003, name: 'TestLast', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
-  ],
-})
-
-function formatSex(row) {
-  return row.sex === '1' ? '男' : '女'
-}
-
-function openDetail(row) {
-  VXETable.modal.message({
-    status: 'success',
-    content: `点击了${row.name}`,
-  })
-}
-
-const activeButton = inject('activeButton')
-
-watch(activeButton, () => {
-  console.log('value', activeButton.value)
-  switch (activeButton.value) {
-    case '产品线':
-      fetchTableDataForProductLine()
-      break
-    case '父ASIN':
-      console.log('case:父ASIN')
-      break
-    case 'ASIN':
-      console.log('case:ASIN')
-      break
-    case 'SKU':
-      fetchTableDataForSKU()
-      break
-
-    default:
-      break
-  }
+  data: [],
+  footerMethod({ columns }) {
+    return [
+      columns.map((column) => {
+        if (column.field === 'productlineName') return '合计'
+        if (summaryFormats[column.field]) return summaryFormats[column.field](totalSummary[column.field])
+        return '-'
+      }),
+    ]
+  },
 })
 
-async function fetchTableDataForProductLine() {
+async function fetchTableData(type) {
   tableLoading.value = true
   const query = {
     startDate: dateRange.value[0],
     endDate: dateRange.value[1],
     profileId: profile.value.profile_id,
+    productlineId: productlineId.value,
+    page: tablePage.currentPage,
+    limit: tablePage.pageSize,
   }
-  gridOptions.columns = productLineColumns
-  try {
-    const response = await getTableDataForProductLine(query)
-    gridOptions.data = response.data
-  } catch (error) {
-    console.log('error:', error)
-  } finally {
-    tableLoading.value = false
-  }
-}
 
-async function fetchTableDataForSKU() {
-  tableLoading.value = true
-  const query = {
-    startDate: dateRange.value[0],
-    endDate: dateRange.value[1],
-    profileId: profile.value.profile_id,
+  const typeToApiAndColumns = {
+    '产品线': { api: getTableDataForProductLine, columns: productLineColumns },
+    'SKU': { api: getTableDataForSKU, columns: skuColumns },
+    '父ASIN': { api: getTableDataForFaASIN, columns: skuColumns },
+    'ASIN': { api: getTableDataForASIN, columns: skuColumns },
   }
-  gridOptions.columns = skuColumns
+  // 根据类型获取对应的API函数和列配置
+  const { api: apiFunction, columns } = typeToApiAndColumns[type] || {}
+
+  // 确保apiFunction和columns都存在，否则直接返回
+  if (!apiFunction || !columns) return
+
   try {
-    const response = await getTableDataForSKU(query)
-    gridOptions.data = response.data
+    const response = await apiFunction(query)
+    Object.keys(summaryFormats).forEach((field) => {
+      totalSummary[field] = response.data.sum[0][field]
+    })
+    tablePage.total = response.total
+    gridOptions.data = response.data.list
+    gridOptions.columns = columns
   } catch (error) {
     console.log('error:', error)
   } finally {
@@ -131,18 +122,27 @@ async function fetchTableDataForSKU() {
   }
 }
 
-const isCompare = ref(false)
+function handlePageChange({ currentPage, pageSize }) {
+  tablePage.currentPage = currentPage
+  tablePage.pageSize = pageSize
+  fetchTableData(activeButton.value)
+}
 
-onMounted(() => {
-  fetchTableDataForProductLine()
+watch([activeButton, productlineId, dateRange], () => {
+  tablePage.currentPage = 1
+  fetchTableData(activeButton.value)
 })
 
-// onUnBeforeMount(() => {
-//   emitter.all.clear()
-// })
-onBeforeUnmount(() => {
-  emitter.all.clear()
-})
+function formatSex(row) {
+  return row.sex === '1' ? '男' : '女'
+}
+
+function openDetail(row) {
+  VXETable.modal.message({
+    status: 'success',
+    content: `点击了${row.name}`,
+  })
+}
 
 </script>
 

src/views/productCenter/productList/components/DateTendency/index.vue

@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount, Ref, unref, watch, computed } from 'vue'
 import * as echarts from 'echarts'
-import { productListMetricsEnum } from '/@/views/productCenter/utils/enum'
+import { productListMetricsEnum } from '/@/views/productCenter/productList/utils/enum'
 // import MetricsCards from '/@/components/MetricsCards/index.vue'
 import MetricsCards from '../MetricsCards/index.vue'
 import XEUtils from 'xe-utils'

src/views/productCenter/productList/components/TopFilters/index.vue

@@ -37,10 +37,15 @@ emitter.on('ProductSelectCard-cardId', (value: any) => {
   selectValue.value = value.productlineId
 })
 
+emitter.on('ProductLineDialog-reloading', (value: any) => {
+  if (value.reloading) {
+    fetchProductLine()
+  }
+})
+
 watch(selectValue, () => {
   emitter.emit('TopFilters-selectValue', { selectValue: selectValue.value })
-  // getCardData({ productlineId: selectValue.value, profileId: profile.value.profile_id, startDate: dateRange.value[0], endDate: dateRange.value[1] })
-  console.log('selectValue.value', selectValue.value)
+  // console.log('selectValue.value', selectValue.value)
 })
 
 onMounted(() => {

src/views/productCenter/productList/hooks/useProductlineId.ts

@@ -0,0 +1,19 @@
+import { ref, onBeforeUnmount } from 'vue'
+import emitter from '/@/utils/emitter'
+
+export default function useProductlineId() {
+  const productlineId = ref('')
+  emitter.on('ProductSelectCard-cardId', (value: any) => {
+    productlineId.value = value.productlineId
+  })
+  emitter.on('TopFilters-selectValue', (value: any) => {
+    productlineId.value = value.selectValue
+  })
+
+  onBeforeUnmount(() => {
+    emitter.all.clear()
+    console.log('cleared')
+  })
+  return { productlineId }
+}
+

src/views/productCenter/productList/hooks/useTableColumns.ts

@@ -1,48 +1,41 @@
-import { onMounted } from "vue"
+import { onMounted, reactive } from 'vue'
 
-export default function() {
-  const columns = [
-    { field: 'name', title: '产品线', align: "left", fixed: 'left', width: 180, sortable: true },
-    { field: 'sex', title: '总销售额', align: "right", width: 130, sortable: true },
-    { field: 'age', title: '总订单数', align: "right", width: 130, sortable: true },
-    { field: 'time', title: '总销量',  align: "right",width: 130, sortable: true },
-    { field: 'address', title: '单均价', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '广告销售额', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '本商品广告销售额', align: "right", width: 180, sortable: true },
-    { field: 'address', title: '广告订单数', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '本商品广告订单数', align: "right", width: 180, sortable: true },
-    { field: 'address', title: '广告销量', align: "right",width: 130, sortable: true },
-    { field: 'address', title: '本商品广告销量', align: "right", width: 180, sortable: true },
-    { field: 'address', title: '花费', align: "right", width: 130, sortable: true, showOverflow: true },
-    { field: 'address', title: 'ACOS', align: "right", width: 130, sortable: true },
-    { field: 'address', title: 'ROAS', align: "right", width: 130, sortable: true },
-    { field: 'address', title: 'TACOS', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '转化率', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '点击率', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '点击成本', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '总订单成本', align: "right", width: 150, sortable: true },
-    { field: 'address', title: '广告订单成本', align: "right", width: 180, sortable: true },
-    { field: 'address', title: '曝光量', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '点击量', align: "right", width: 130, sortable: true },
-    { field: 'address', title: '会话次数', align: "right", width: 150, sortable: true },
-    { field: 'address', title: '商品会话百分比', align: "right", width: 150, sortable: true, formatter: formatTalk },
-    { field: 'address', title: '页面浏览量', align: "right", width: 180, sortable: true },
-    { field: 'address', title: '推荐报价（购买按钮）百分比', align: "right", width: 180, sortable: true, showHeaderOverflow: true, formatter: formatPrice },
-    { field: 'address', title: 'FBA库存', align: "right", width: 130, sortable: true },
-    { field: 'address', title: 'FBM库存', align: "right", width: 130, sortable: true, showHeaderOverflow: true },
-  ]
-  function formatTalk({ cellValue }) {
-    const item = cellValue + "万"
-    return item
-  }
-  function formatPrice({ cellValue }) {
-    const item = cellValue + "%"
-    return item
-  }
-
-  onMounted(()=>{
-    console.log('这是useTable的onMounted')
+export default function () {
+  const totalSummary = reactive({
+    TotalSales: 0,
+    // 其他需要显示的合计数据
   })
-  return {columns,formatTalk,formatPrice}
-} 
 
+  // 定义合计数据的对象，键是字段名，值是处理逻辑
+  const summaryFormats = {
+    TotalSales: (value) => `$${value}`, // 格式化为货币格式
+    TotalOrderItems: (value) => `${value}`,
+    TotalUnitOrdered: (value) => `${value}`,
+    SAP: (value) => `${value}`,
+    TotalAdSales: (value) => `${value}`,
+    TotalAdSalesSameSKU: (value) => `${value}`,
+    TotalAdPurchases: (value) => `${value}`,
+    TotalAdPurchasesSameSKU: (value) => `${value}`,
+    TotalAdUnitOrdered: (value) => `${value}`,
+    TotalAdUnitOrderedSameSKU: (value) => `${value}`,
+    Spend: (value) => `${value}`,
+    ACOS: (value) => `${value}`,
+    ROAS: (value) => `${value}`,
+    TACOS: (value) => `${value}`,
+    CR: (value) => `${value}`,
+    CTR: (value) => `${value}`,
+    CPC: (value) => `${value}`,
+    CPO: (value) => `${value}`,
+    CPA: (value) => `${value}`,
+    Impression: (value) => `${value}`,
+    Click: (value) => `${value}`,
+    ProductCr: (value) => `${value}`,
+    BuyBoxPercentage: (value) => `${value}`,
+    Sessions: (value) => `${value}`,
+    PageViews: (value) => `${value}`,
+    // FBAQuantity: (value) => `${value}`,
+    // FBMQuantity: (value) => `${value}`,
+  }
+
+  return { totalSummary, summaryFormats }
+}

src/views/productCenter/productList/index.vue

@@ -39,23 +39,24 @@
   <ProductLineDialog></ProductLineDialog>
 </template>
 
-<script setup>
-import ProductSelectCard from './components/ProductSelectCard/index.vue'
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { onBeforeUnmount, provide, ref } from 'vue'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
+import DataTable from './components/DataTable/index.vue'
+import DataTendencyChart from './components/DateTendency/index.vue'
 import ProductLineDialog from './components/ProductDialog/index.vue'
+import ProductSelectCard from './components/ProductSelectCard/index.vue'
 import TopFilters from './components/TopFilters/index.vue'
-import DataTable from './components/DataTable/index.vue'
-import { ref, provide, watch } from 'vue'
-import { storeToRefs } from 'pinia'
+import useButtonGroup from './hooks/useButton'
+import { productListMetricsEnum } from './utils/enum'
 import { usePublicData } from '/@/stores/publicData'
-import DataTendencyChart from './components/DateTendency/index.vue'
 import { useShopInfo } from '/@/stores/shopInfo'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
-import { productListMetricsEnum } from '../utils/enum'
-import useButtonGroup from './hooks/useButton'
 import emitter from '/@/utils/emitter'
 
+// 接收下拉框选中的值MetricsCards组件的queryParams
 const productlineId = ref('ALL')
-emitter.on('TopFilters-selectValue', (value) => {
+emitter.on('TopFilters-selectValue', (value: any) => {
   // console.log('value', value.selectValue)
   productlineId.value = value.selectValue
 })
@@ -79,11 +80,14 @@ provide('profile', profile)
 const { buttons, activeButton, activeStyle, handleClickBtn } = useButtonGroup()
 provide('activeButton', activeButton)
 
-
 // 控制创建产品线弹窗
 function handleProductlog() {
   emitter.emit('open-productLine-dialog', { isVisible: true })
 }
+
+onBeforeUnmount(() => {
+  emitter.all.clear()
+})
 </script>
 
 <style scoped>

src/views/productCenter/productList/utils/index.ts → src/views/productCenter/productList/utils/columns.ts

@@ -1,34 +1,34 @@
 export const productLineColumns = [
   // { field: 'name', title: 'Name', align: 'center', width: 130, slots: { default: 'name_default' } },
   //   { field: 'sex', title: 'Sex', align: 'center', width: 80, slots: { default: 'sex_default' } },
-    { field: 'productlineName', title: '产品线', align: 'left', fixed: 'left', width: 180, sortable: true },
-    { field: 'sex', title: '总销售额', align: 'right', width: 130, sortable: true },
-    { field: 'age', title: '总订单数', align: 'right', width: 130, sortable: true },
-    { field: 'time', title: '总销量', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '单均价', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '广告销售额', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '本商品广告销售额', align: 'right', width: 180, sortable: true },
-    { field: 'address', title: '广告订单数', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '本商品广告订单数', align: 'right', width: 180, sortable: true },
-    { field: 'address', title: '广告销量', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '本商品广告销量', align: 'right', width: 180, sortable: true },
-    { field: 'address', title: '花费', align: 'right', width: 130, sortable: true, showOverflow: true },
-    { field: 'ACOS', title: 'ACOS', align: 'right', width: 130, sortable: true },
-    { field: 'ROAS', title: 'ROAS', align: 'right', width: 130, sortable: true },
-    { field: 'TACOS', title: 'TACOS', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '转化率', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '点击率', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '点击成本', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '总订单成本', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '广告订单成本', align: 'right', width: 180, sortable: true },
-    { field: 'address', title: '曝光量', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '点击量', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '会话次数', align: 'right', width: 150, sortable: true },
-    { field: 'address', title: '商品会话百分比', align: 'right', width: 150, sortable: true },
-    { field: 'address', title: '页面浏览量', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: '推荐报价（购买按钮）百分比', align: 'right', width: 180, sortable: true, showHeaderOverflow: true },
-    { field: 'address', title: 'FBA库存', align: 'right', width: 130, sortable: true },
-    { field: 'address', title: 'FBM库存', align: 'right', width: 130, sortable: true, showHeaderOverflow: true }
+  { field: 'productlineName', title: '产品线', align: 'left', fixed: 'left', width: 180, sortable: true },
+  { field: 'TotalSales', title: '总销售额', align: 'right', width: 130, sortable: true },
+  { field: 'TotalOrderItems', title: '总订单数', align: 'right', width: 130, sortable: true },
+  { field: 'TotalUnitOrdered', title: '总销量', align: 'right', width: 130, sortable: true },
+  { field: 'SAP', title: '单均价', align: 'right', width: 130, sortable: true },
+  { field: 'TotalAdSales', title: '广告销售额', align: 'right', width: 130, sortable: true },
+  { field: 'TotalAdSalesSameSKU', title: '本商品广告销售额', align: 'right', width: 180, sortable: true },
+  { field: 'TotalAdPurchases', title: '广告订单数', align: 'right', width: 130, sortable: true },
+  { field: 'TotalAdPurchasesSameSKU', title: '本商品广告订单数', align: 'right', width: 180, sortable: true },
+  { field: 'TotalAdUnitOrdered', title: '广告销量', align: 'right', width: 130, sortable: true },
+  { field: 'TotalAdUnitOrderedSameSKU', title: '本商品广告销量', align: 'right', width: 180, sortable: true },
+  { field: 'Spend', title: '花费', align: 'right', width: 130, sortable: true, showOverflow: true },
+  { field: 'ACOS', title: 'ACOS', align: 'right', width: 130, sortable: true },
+  { field: 'ROAS', title: 'ROAS', align: 'right', width: 130, sortable: true },
+  { field: 'TACOS', title: 'TACOS', align: 'right', width: 130, sortable: true },
+  { field: 'CR', title: '转化率', align: 'right', width: 130, sortable: true },
+  { field: 'CTR', title: '点击率', align: 'right', width: 130, sortable: true },
+  { field: 'CPC', title: '点击成本', align: 'right', width: 130, sortable: true },
+  { field: 'CPO', title: '总订单成本', align: 'right', width: 130, sortable: true },
+  { field: 'CPA', title: '广告订单成本', align: 'right', width: 180, sortable: true },
+  { field: 'Impression', title: '曝光量', align: 'right', width: 130, sortable: true },
+  { field: 'Click', title: '点击量', align: 'right', width: 130, sortable: true },
+  { field: 'ProductCr', title: '会话次数', align: 'right', width: 150, sortable: true },
+  { field: 'BuyBoxPercentage', title: '商品会话百分比', align: 'right', width: 150, sortable: true },
+  { field: 'Sessions', title: '页面浏览量', align: 'right', width: 130, sortable: true },
+  { field: 'PageViews', title: '推荐报价（购买按钮）百分比', align: 'right', width: 180, sortable: true, showHeaderOverflow: true },
+  { field: 'FBAQuantity', title: 'FBA库存', align: 'right', width: 130, sortable: true },
+  { field: 'FBMQuantity', title: 'FBM库存', align: 'right', width: 130, sortable: true, showHeaderOverflow: true },
 ]
 
 export const skuColumns = [
@@ -58,10 +58,10 @@ export const skuColumns = [
   { field: 'address', title: '点击成本', align: 'right', width: 130, sortable: true },
   { field: 'address', title: '总订单成本', align: 'right', width: 130, sortable: true },
   { field: 'address', title: '广告订单成本', align: 'right', width: 180, sortable: true },
-  { field: 'address', title: '曝光量', align: 'right', width: 130, sortable: true },
-  { field: 'address', title: '点击量', align: 'right', width: 130, sortable: true },
-  { field: 'address', title: '预警TACOS', align: 'right', width: 130 },
-  { field: 'address', title: '会话次数', align: 'right', width: 150, sortable: true },
+  { field: 'Impression', title: '曝光量', align: 'right', width: 130, sortable: true },
+  { field: 'Click', title: '点击量', align: 'right', width: 130, sortable: true },
+  { field: 'TACOS', title: '预警TACOS', align: 'right', width: 130 },
+  { field: 'Sessions', title: '会话次数', align: 'right', width: 150, sortable: true },
   { field: 'address', title: '商品会话百分比', align: 'right', width: 150, sortable: true },
   { field: 'address', title: '页面浏览量', align: 'right', width: 130, sortable: true },
   { field: 'address', title: '推荐报价（购买按钮）百分比', align: 'right', width: 180, sortable: true, showHeaderOverflow: true },

src/views/productCenter/utils/enum.ts → src/views/productCenter/productList/utils/enum.ts

@@ -2,22 +2,22 @@ export const productListMetricsEnum = [
   {label: '曝光量', value: 'Impression'},
   {label: '点击量', value: 'Click'},
   {label: '花费', value: 'Spend'},
-  {label: '总订单数', value: 'TotalUnitOrdered'},
+  {label: '总订单数', value: 'TotalOrderItems'},
   {label: '总销售额', value: 'TotalSales'},
-  {label: '单均价', value: 'TotalOrderItems'},
+  {label: '单均价', value: 'SAP'},
   {label: '广告订单数', value: 'TotalAdPurchases'},
   {label: '广告销售额', value: 'TotalAdSales'},
   {label: '广告销量', value: 'TotalAdUnitOrdered'},
   {label: '本商品广告销售额', value: 'TotalAdSalesSameSKU'},
   {label: '本商品广告订单数', value: 'TotalAdPurchasesSameSKU'},
   {label: '本商品广告销量', value: 'TotalAdUnitOrderedSameSKU'},
-  {label: 'SAP', value: 'SAP'},
+  // {label: 'SAP', value: 'SAP'},
   {label: 'ACOS', value: 'ACOS'},
   {label: 'ROAS', value: 'ROAS'},
   {label: 'TACOS', value: 'TACOS'},
   {label: '转化率', value: 'CR'},
   {label: '点击率', value: 'CTR'},
-  {label: 'CPC', value: 'CPC'},
-  {label: 'CPO', value: 'CPO'},
-  {label: 'CPA', value: 'CPA'},
+  {label: '点击成本', value: 'CPC'},
+  {label: '总订单成本', value: 'CPO'},
+  {label: '广告订单成本', value: 'CPA'},
 ]