✨ feat: 商品中心: 商品列表中表格可以跟随页面loading

src/views/adManage/portfolios/index.vue

@@ -1,51 +1,3 @@
-<template>
-  <div class="asj-container">
-    <fs-page class="fs-page-custom">
-      <fs-crud ref="crudRef" v-bind="crudBinding">
-        <template #search-left>
-          <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" style="margin-right: 15px"></DateRangePicker>
-        </template>
-        <template #header-middle>
-          <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
-            <el-tab-pane label="数据趋势" name="dataTendency">
-              <DataTendencyChart
-                v-if="tabActiveName === 'dataTendency'"
-                :query="queryParams"
-                :fetch-card="getCardData"
-                :fetch-line="getLineData"
-                :fetch-line-month="getLineMonthData"
-                :fetch-line-week="getLineWeekData">
-              </DataTendencyChart>
-            </el-tab-pane>
-            <el-tab-pane label="广告结构" name="adStruct">
-              <!-- <AdStructChart v-if="tabActiveName === 'adStruct'"/> -->
-            </el-tab-pane>
-            <el-tab-pane label="散点视图" name="scatterView">
-              <div v-if="tabActiveName === 'scatterView'">散点视图</div>
-            </el-tab-pane>
-          </el-tabs>
-        </template>
-
-        <template v-for="field of Object.keys(SdBaseColumn)" #[`cell_${field}`]="scope">
-          <DataCompare
-            :field="field"
-            :value="scope.row[field]"
-            :prev-val="scope.row[`prev${field}`]"
-            :gap-val="scope.row[`gap${field}`]"
-            :date-range="dateRange"
-            :show-compare="showCompare" />
-        </template>
-        <template #toolbar-left>
-          <div class="compare-switch">
-            <span>数据对比 </span>
-            <el-switch v-model="showCompare" size="small" />
-          </div>
-        </template>
-      </fs-crud>
-    </fs-page>
-  </div>
-</template>
-
 <script lang="ts" setup name="Portfolios">
 import { useFs } from '@fast-crud/fast-crud'
 import { ElMessage } from 'element-plus'
@@ -55,11 +7,11 @@ import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './a
 import DataTendencyChart from './chartComponents/dataTendency.vue'
 import { createCrudOptions } from './crud'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
+import DataCompare from '/@/components/dataCompare/index.vue'
 import { usePublicData } from '/@/stores/publicData'
 import { useShopInfo } from '/@/stores/shopInfo'
 import emitter from '/@/utils/emitter'
 import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
-import DataCompare from '/@/components/dataCompare/index.vue'
 
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
@@ -103,6 +55,54 @@ onBeforeUnmount(() => {
 })
 </script>
 
+<template>
+  <div class="asj-container">
+    <fs-page class="fs-page-custom">
+      <fs-crud ref="crudRef" v-bind="crudBinding">
+        <template #search-left>
+          <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" style="margin-right: 15px"></DateRangePicker>
+        </template>
+        <template #header-middle>
+          <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
+            <el-tab-pane label="数据趋势" name="dataTendency">
+              <DataTendencyChart
+                v-if="tabActiveName === 'dataTendency'"
+                :query="queryParams"
+                :fetch-card="getCardData"
+                :fetch-line="getLineData"
+                :fetch-line-month="getLineMonthData"
+                :fetch-line-week="getLineWeekData">
+              </DataTendencyChart>
+            </el-tab-pane>
+            <el-tab-pane label="广告结构" name="adStruct">
+              <!-- <AdStructChart v-if="tabActiveName === 'adStruct'"/> -->
+            </el-tab-pane>
+            <el-tab-pane label="散点视图" name="scatterView">
+              <div v-if="tabActiveName === 'scatterView'">散点视图</div>
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+
+        <template v-for="field of Object.keys(SdBaseColumn)" #[`cell_${field}`]="scope">
+          <DataCompare
+            :field="field"
+            :value="scope.row[field]"
+            :prev-val="scope.row[`prev${field}`]"
+            :gap-val="scope.row[`gap${field}`]"
+            :date-range="dateRange"
+            :show-compare="showCompare" />
+        </template>
+        <template #toolbar-left>
+          <div class="compare-switch">
+            <span>数据对比 </span>
+            <el-switch v-model="showCompare" size="small" />
+          </div>
+        </template>
+      </fs-crud>
+    </fs-page>
+  </div>
+</template>
+
 <style scoped>
 .public-search {
   display: flex;

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

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { inject, onMounted, reactive, ref, watch } from 'vue'
+import { inject, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { getListData } from '../../api'
 import { universalColumns } from '../../utils/columns'
+import emitter from '/@/utils/emitter';
 
 const profile = <any>inject('profile')
 const dateRange = <any>inject('dateRange')
 const tableData = <any>inject('tableData')
 
+emitter.on('DateTendency-changeStatDim', () => {
+  tableLoading.value = true
+})
 const tableLoading = ref(false)
 
 const gridOptions = reactive({
@@ -45,11 +49,16 @@ async function fetchListData() {
 
 watch(tableData, () => {
   gridOptions.data = tableData.value
+  tableLoading.value = false
 })
 
 onMounted(() => {
   fetchListData()
 })
+
+onBeforeUnmount(() => {
+  emitter.all.clear()
+})
 </script>
 
 <template>

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

@@ -18,6 +18,7 @@ import { productListMetricsEnum } from '/@/views/productCenter/productList/utils
 import MetricsCards from '../MetricsCards/index.vue'
 import XEUtils from 'xe-utils'
 import { buildChartOpt, parseQueryParams } from '/@/views/adManage/utils/tools.js'
+import emitter from '/@/utils/emitter'
 
 
 defineOptions({
@@ -280,22 +281,24 @@ const changeMetric = () => {
 
 const emit = defineEmits(['changeStatDim'])
 const changeStatDim = async () => {
+  emitter.emit('DateTendency-changeStatDim')  // 触发DataTable的loading
   loading.value = true
   let source = await getDataset()
   if (source.length > 0) {
     chartObj.setOption({ dataset: { source: source } })
   }
   loading.value = false
-  emit('changeStatDim', source)
+  emit('changeStatDim', source)  // 向父组件传递数据后再传递给DataTable
 }
 
 
 watch(props.query, async () => {
   // console.log("------watch-----queryParams", props.query)
+  emitter.emit('DateTendency-changeStatDim')  // 触发DataTable的loading
   loading.value = true
   await getMetricsItems()
   const items = await getDataset()
-  emit('changeStatDim', items)
+  emit('changeStatDim', items)  // 向父组件传递数据后再传递给DataTable
   const opt = { dataset: { source: items } }
   chartObj.setOption(opt)
   loading.value = false