✨ feat: 商品中心<商品分析>: 销售概览会根据时间重新发送请求; 重构代码结构;

src/views/adManage/sp/TopFilter/components/PopoverFilter/index.vue → src/views/adManage/sp/components/PopoverFilter.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue'
 import { Ref, inject, onMounted, ref } from 'vue'
-import { getProductline } from '../../api'
-import InfinityList from './InfinityList/index.vue'
+import { getProductline } from '../api'
+import PopoverFilterTable from './PopoverFilterTable.vue'
 
 const profile = <Ref>inject('profile')
 
@@ -38,7 +38,7 @@ onMounted(() => {
             </el-select>
             <el-select></el-select>
           </div>
-          <InfinityList></InfinityList>
+          <PopoverFilterTable></PopoverFilterTable>
         </el-tab-pane>
         <el-tab-pane label="输入" name="input" class="w-full p-2">
           <el-input v-model="textarea" :autosize="{ minRows: 10, maxRows: 100 }" type="textarea" placeholder="Please input" />

src/views/adManage/sp/TopFilter/components/PopoverFilterParent/index.vue → src/views/adManage/sp/components/PopoverFilterParent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue'
 import { Ref, inject, onMounted, ref } from 'vue'
-import { getProductline } from '../../api'
+import { getProductline } from '../api'
 // import InfinityList from './InfinityList/index.vue'
 
 const profile = <Ref>inject('profile')

src/views/adManage/sp/TopFilter/components/PopoverFilter/InfinityList/index.vue → src/views/adManage/sp/components/PopoverFilterTable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Ref, inject, onMounted, reactive } from 'vue'
-import { getParentAsin } from '/@/views/adManage/sp/TopFilter/api'
+import { getParentAsin } from '../api'
 import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
 
 const profile = <Ref>inject('profile')

src/views/adManage/sp/TopFilter/index.vue → src/views/adManage/sp/components/TopFilter.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { CloseBold } from '@element-plus/icons-vue'
 import { computed, onMounted, ref } from 'vue'
-import PopoverFilter from './components/PopoverFilter/index.vue'
-import PopoverFilterParent from './components/PopoverFilterParent/index.vue'
-import { getProductSelect } from './api'
-
+import PopoverFilter from './PopoverFilter.vue'
+import PopoverFilterParent from './PopoverFilterParent.vue'
+import { getProductSelect } from '../api'
 
 const isVisible = ref(false)
 
@@ -46,7 +45,7 @@ onMounted(() => {
         <el-input v-model="productFilterInput" @click="isVisible = true" style="width: 350px" placeholder="请选择推广商品">
           <template #prepend>
             <el-select v-model="productFilterSelect" placeholder="Select" style="width: 100px">
-              <el-option v-for="item in productFilterOptions" :key="item.value" :label="item.label" :value="item.value"/>
+              <el-option v-for="item in productFilterOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </template>
         </el-input>
@@ -54,7 +53,7 @@ onMounted(() => {
       <div class="flex justify-between">
         <div class="pb-3 font-bold text-slate-950 text-base">搜索</div>
         <el-icon class="cursor-pointer" @click="isVisible = false">
-          <CloseBold/>
+          <CloseBold />
         </el-icon>
       </div>
       <component :is="currentComponent"></component>

src/views/adManage/sp/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 import { Ref, onBeforeMount, provide, ref } from 'vue'
-import TopFilter from './TopFilter/index.vue'
+import TopFilter from './components/TopFilter.vue'
 import AdvertisedProducts from './advertisedProducts/index.vue'
 import Campaigns from './campaigns/index.vue'
 import Keywords from './keywords/index.vue'

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { inject, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import { getListData } from '../../api'
-import { universalColumns } from '../../utils/columns'
-import emitter from '/@/utils/emitter';
+import { getListData } from '../api'
+import { universalColumns } from '../utils/columns'
+import emitter from '/@/utils/emitter'
 
 const profile = <any>inject('profile')
 const dateRange = <any>inject('dateRange')

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

@@ -11,15 +11,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, Ref, unref, watch, computed } from 'vue'
 import * as echarts from 'echarts'
+import { Ref, computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 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'
-import { buildChartOpt, parseQueryParams } from '/@/views/adManage/utils/tools.js'
+import MetricsCards from '../MetricsCards/index.vue'
 import emitter from '/@/utils/emitter'
-
+import { buildChartOpt, parseQueryParams } from '/@/views/adManage/utils/tools.js'
 
 defineOptions({
   name: 'DataTendencyChart',
@@ -281,24 +280,23 @@ const changeMetric = () => {
 
 const emit = defineEmits(['changeStatDim'])
 const changeStatDim = async () => {
-  emitter.emit('DateTendency-changeStatDim')  // 触发DataTable的loading
+  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)  // 向父组件传递数据后再传递给DataTable
+  emit('changeStatDim', source) // 向父组件传递数据后再传递给DataTable
 }
 
-
 watch(props.query, async () => {
   // console.log("------watch-----queryParams", props.query)
-  emitter.emit('DateTendency-changeStatDim')  // 触发DataTable的loading
+  emitter.emit('DateTendency-changeStatDim') // 触发DataTable的loading
   loading.value = true
   await getMetricsItems()
   const items = await getDataset()
-  emit('changeStatDim', items)  // 向父组件传递数据后再传递给DataTable
+  emit('changeStatDim', items) // 向父组件传递数据后再传递给DataTable
   const opt = { dataset: { source: items } }
   chartObj.setOption(opt)
   loading.value = false

src/views/productCenter/productAnalysis/components/TopParentAsin/ExchangeProduct.vue → src/views/productCenter/productAnalysis/components/ExchangeProduct.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue'
 import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { getProductLineSelect, getProduct } from '../../api'
+import { getProduct, getProductLineSelect } from '../api'
+import useInfiniteScroll from '../hooks/useInfiniteScroll'
+import useSelectItem from '../hooks/useSelectItem'
 import emitter from '/@/utils/emitter'
-import useSelectItem from '../../hooks/useSelectItem'
-import useInfiniteScroll from '../../hooks/useInfiniteScroll'
 
 const profile = <any>inject('profile')
 const { allData, parentloading, currentPage, load, fetchProduct } = useInfiniteScroll()

src/views/productCenter/productAnalysis/components/SalesOverview/index.vue → src/views/productCenter/productAnalysis/components/SalesOverview.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Picture as IconPicture } from '@element-plus/icons-vue'
-import { inject, onMounted, reactive, ref } from 'vue'
-import { getSalesListData } from '../../api'
-import { salesColumns } from '../../utils/columns'
+import { inject, onMounted, reactive, ref, watch } from 'vue'
+import { getSalesListData } from '../api'
+import { salesColumns } from '../utils/columns'
 import emitter from '/@/utils/emitter'
 
 const profile = <any>inject('profile')
@@ -75,6 +75,10 @@ async function fetchListData() {
   }
 }
 
+watch(dateRange, () => {
+  fetchListData()
+})
+
 // watch(tableData, () => {
 //   // console.log('tableData.value', tableData.value)
 //   gridOptions.data = tableData.value

src/views/productCenter/productAnalysis/components/TopParentAsin/index.vue → src/views/productCenter/productAnalysis/components/TopParentAsin.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { Picture as IconPicture } from '@element-plus/icons-vue'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { getDetail } from '../../api'
+import { getDetail } from '../api'
 import ExchangeProduct from './ExchangeProduct.vue'
 import emitter from '/@/utils/emitter'
 
-
 const profile = <any>inject('profile')
 const dateRange = <any>inject('dateRange')
 const topCardloading = ref(false)
@@ -128,7 +127,12 @@ onMounted(() => {
         </div>
         <div class="product-stars">
           <div class="product-price__label">星级评分</div>
-          <el-rate v-model="dataSet.allScore" disabled show-score text-color="#1d2129" :score-template="`${dataSet.allScore ? dataSet.allScore : '0.0'}`" />
+          <el-rate
+            v-model="dataSet.allScore"
+            disabled
+            show-score
+            text-color="#1d2129"
+            :score-template="`${dataSet.allScore ? dataSet.allScore : '0.0'}`" />
         </div>
       </div>
     </el-card>

src/views/productCenter/productAnalysis/components/TrendOverview/index.vue → src/views/productCenter/productAnalysis/components/TrendOverview.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { onBeforeUnmount, provide, ref, inject } from 'vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '../../api'
-import DataTendencyChart from '/@/views/productCenter/productAnalysis/components/DateTendency/index.vue'
-import { productListMetricsEnum } from '../../utils/enum'
+import { inject, onBeforeUnmount, ref } from 'vue'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '../api'
+import { productListMetricsEnum } from '../utils/enum'
 import { usePublicData } from '/@/stores/publicData'
 import emitter from '/@/utils/emitter'
+import DataTendencyChart from '/@/views/productCenter/productAnalysis/components/DateTendency/index.vue'
 
 const profile = <any>inject('profile')
 

src/views/productCenter/productAnalysis/index.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { provide, ref } from 'vue'
-import DataTable from '/@/views/productCenter/productAnalysis/components/DataTable/index.vue'
-import TopParentAsin from './components/TopParentAsin/index.vue'
-import TrendOverview from './components/TrendOverview/index.vue'
-import SalesOverview from './components/SalesOverview/index.vue'
-// import CpRecommendations from './components/CpRecommendations/index.vue'
+import DataTable from './components/DataTable.vue'
+import SalesOverview from './components/SalesOverview.vue'
+import TopParentAsin from './components/TopParentAsin.vue'
+import TrendOverview from './components/TrendOverview.vue'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
 import { usePublicData } from '/@/stores/publicData'
 import { useShopInfo } from '/@/stores/shopInfo'
@@ -21,6 +20,7 @@ provide('dateRange', dateRange)
 provide('profile', profile)
 
 const activeName = ref('trendOverview')
+provide('activeName', activeName)
 // const filter1 = ref('')
 // const options1 = [
 //   {

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

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { inject, reactive, ref, watch } from 'vue'
-import CustomCell from '../CustomCell/index.vue'
-import CustomFooterCell from '../CustomFooterCell/index.vue'
+import DataTableCell from './DataTableCell.vue'
+import DataTableCellFooter from './DataTableCellFooter.vue'
 import emitter from '/@/utils/emitter'
-import { getTableDataForASIN, getTableDataForParentASIN, getTableDataForProductLine, getTableDataForSKU } from '/@/views/productCenter/productList/api'
+import {
+  getTableDataForASIN,
+  getTableDataForParentASIN,
+  getTableDataForProductLine,
+  getTableDataForSKU,
+} from '/@/views/productCenter/productList/api'
 import useProductlineId from '/@/views/productCenter/productList/hooks/useProductlineId'
 import useTableColumns from '/@/views/productCenter/productList/hooks/useTableColumns'
 import { asinColumns, parentAsinColumns, productLineColumns, skuColumns } from '/@/views/productCenter/productList/utils/columns'
@@ -48,7 +53,7 @@ const gridOptions = reactive({
   },
   columns: [],
   data: [],
-  
+
   footerMethod({ columns }) {
     // return [
     //   columns.map((column, columnIndex) => {
@@ -139,10 +144,10 @@ watch([activeButton, productlineId, dateRange, searchItem], () => {
         </span>
       </template>
       <template v-for="col in dynamicCols" #[`${col.field}_default`]="{ row }">
-        <CustomCell :value="row[col.field]" :field="col.field" :row="row" :isCompare="isCompare" />
+        <DataTableCell :value="row[col.field]" :field="col.field" :row="row" :isCompare="isCompare" />
       </template>
       <template v-for="col in dynamicCols" #[`${col.field}_footer`]="{ items, _columnIndex }">
-        <CustomFooterCell
+        <DataTableCellFooter
           :totalValue="items[_columnIndex].totalValue"
           :gapValue="items[_columnIndex].gapValue"
           :isCompare="isCompare"

src/views/productCenter/productList/components/ProductDialog/index.vue → src/views/productCenter/productList/components/ProductDialog.vue

@@ -2,7 +2,7 @@
 import { onBeforeUnmount, reactive, ref, inject } from 'vue'
 import emitter from '/@/utils/emitter'
 import type { FormInstance, FormRules } from 'element-plus'
-import ProductList from '../ProductDialog/ProductList.vue'
+import ProductDialogList from './ProductDialogList.vue'
 import { postCreateProductLine, getProductDetail, postUpdateProductLine } from '/@/views/productCenter/productList/api'
 import { ElMessage } from 'element-plus'
 
@@ -158,18 +158,18 @@ onBeforeUnmount(() => {
         <template #label>
           <span class="form-label"> 产品线名称: </span>
         </template>
-        <el-input v-model="ruleForm.productLineName" show-word-limit placeholder="请输入产品线名称" maxlength="150" style="width: 500px;" />
+        <el-input v-model="ruleForm.productLineName" show-word-limit placeholder="请输入产品线名称" maxlength="150" style="width: 500px" />
       </el-form-item>
       <el-form-item required>
         <template #label>
           <span class="form-label"> 商品: </span>
         </template>
-        <ProductList></ProductList>
+        <ProductDialogList></ProductDialogList>
       </el-form-item>
       <el-form-item>
         <div style="display: flex; flex-direction: row-reverse">
-          <el-button v-if="!isUpdate" style="margin-left: 10px;" color="#3c59b0" @click="submitForm(ruleFormRef)"> 创建 </el-button>
-          <el-button v-if="isUpdate" style="margin-left: 10px;" color="#3c59b0" @click="updateForm(ruleFormRef)"> 确定 </el-button>
+          <el-button v-if="!isUpdate" style="margin-left: 10px" color="#3c59b0" @click="submitForm(ruleFormRef)"> 创建 </el-button>
+          <el-button v-if="isUpdate" style="margin-left: 10px" color="#3c59b0" @click="updateForm(ruleFormRef)"> 确定 </el-button>
           <el-button plain @click="createProductDialog = false">取消</el-button>
         </div>
       </el-form-item>

src/views/productCenter/productList/index.vue

@@ -2,11 +2,11 @@
 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 DataTable from './components/DataTable.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 ProductLineDialog from './components/ProductDialog.vue'
+import ProductSelectCard from './components/ProductSelectCard.vue'
+import TopFilters from './components/TopFilter.vue'
 import useButtonGroup from './hooks/useButton'
 import { productListMetricsEnum } from './utils/enum'
 import { usePublicData } from '/@/stores/publicData'
@@ -36,7 +36,7 @@ const queryParams = ref({
   profileId: profile.value.profile_id,
   dateRange,
   productlineId,
-  searchItem
+  searchItem,
 })
 
 provide('dateRange', dateRange)