🦄 refactor: 文件夹重构

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

@@ -15,7 +15,7 @@ import { ref, onMounted, onBeforeUnmount, Ref, unref, watch, computed } from 'vu
 import * as echarts from 'echarts'
 import { productListMetricsEnum } from '/@/views/productCenter/utils/enum'
 // import MetricsCards from '/@/components/MetricsCards/index.vue'
-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'
 

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

@@ -25,7 +25,8 @@
                     <el-checkbox v-model="item.checked" @click.stop="" @change="checkAll(item, item.checked)">
                       {{ item.parentAsin }}
                     </el-checkbox>
-                    <el-tag style="margin-left: 8px" effect="plain" size="small" round>{{ item.num }}
+                    <el-tag style="margin-left: 8px" effect="plain" size="small" round
+                      >{{ item.num }}
                       <span v-if="item.num == '1'">ASIN</span>
                       <span v-else>ASINs</span>
                     </el-tag>
@@ -54,7 +55,7 @@
           </ul>
         </el-tab-pane>
         <el-tab-pane label="输入" name="input">
-          <div style="padding: 15px 20px">
+          <div class="textarea-part">
             <el-input
               disabled="true"
               v-model="textarea"
@@ -62,7 +63,7 @@
               :rows="15"
               type="textarea"
               placeholder="请输入ASIN, 多个ASIN使用逗号、空格或换行符分隔" />
-            <div style="display: flex; flex-direction: row-reverse">
+            <div class="custom-button">
               <el-button :disabled="!textarea" type="primary" text bg>添加</el-button>
             </div>
           </div>
@@ -119,7 +120,7 @@
 
 <script setup lang="ts">
 import { computed, inject, onBeforeUnmount, onMounted, ref } from 'vue'
-import { getAllProduct } from '../api'
+import { getAllProduct } from '/@/views/productCenter/productList/api'
 import emitter from '/@/utils/emitter'
 
 const profile = <any>inject('profile')
@@ -133,7 +134,7 @@ const data = ref([])
 const selectedData = ref([])
 const activeNames = ref([])
 const infiniteLoad = ref(false)
-let currentPage = 57
+let currentPage = 1
 let total = 0
 let limit = 10
 
@@ -428,4 +429,11 @@ onBeforeUnmount(() => {
 ::v-deep(.el-collapse-item__content) {
   padding-bottom: 0;
 }
+.textarea-part {
+  padding: 15px 20px;
+}
+.custom-button {
+  display: flex;
+  flex-direction: row-reverse;
+}
 </style>

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

@@ -37,8 +37,8 @@
 import { onBeforeUnmount, reactive, ref, inject } from 'vue'
 import emitter from '/@/utils/emitter'
 import type { FormInstance, FormRules } from 'element-plus'
-import ProductList from '../components/ProductList.vue'
-import { postCreateProductLine, getProductDetail, postUpdateProductLine } from '../api'
+import ProductList from '../ProductDialog/ProductList.vue'
+import { postCreateProductLine, getProductDetail, postUpdateProductLine } from '/@/views/productCenter/productList/api'
 import { ElMessage } from 'element-plus'
 
 const profile = <any>inject('profile')

src/views/productCenter/productList/components/ProductTab.vue → src/views/productCenter/productList/components/ProductSelectCard/index.vue

@@ -10,13 +10,13 @@
           :class="{ selected: selectedCardIndex === index }"
           @click="selectCard(index, item)">
           <div class="pct-chart" :id="`chart${index}-${item.productlineId}`"></div>
-          <el-popover placement="bottom" :width="150" trigger="click" >
+          <el-popover placement="bottom" :width="150" trigger="click">
             <template #reference>
               <el-icon class="custom-icon" @click.stop=""><MoreFilled /></el-icon>
             </template>
             <div class="custom-popoer">
               <el-button :icon="Edit" text size="small" @click="editCard(item)">编辑</el-button>
-              <el-button :icon="Delete" text size="small" style="margin-left: 0;">删除</el-button>
+              <el-button :icon="Delete" text size="small" style="margin-left: 0">删除</el-button>
             </div>
           </el-popover>
           <div style="padding: 10px; position: relative">
@@ -35,10 +35,10 @@
 
 <script setup lang="ts">
 import { onMounted, inject, ref } from 'vue'
-import { getProductCardData } from '../api'
+import { getProductCardData } from '/@/views/productCenter/productList/api'
 import * as echarts from 'echarts'
 import { Edit, Delete } from '@element-plus/icons-vue'
-import emitter from '/@/utils/emitter';
+import emitter from '/@/utils/emitter'
 
 const profile = <any>inject('profile')
 
@@ -58,9 +58,8 @@ async function fetchProductCardData() {
 
 function initChart() {
   cardData.value.forEach((item, index) => {
-  const chartId = `chart${index}-${item.productlineId}`
+    const chartId = `chart${index}-${item.productlineId}`
     const el = document.getElementById(chartId)
-    // const el:any = document.querySelector('#' + chartId)
     if (el) {
       const pieChart = echarts.init(el)
       const option = {
@@ -119,7 +118,7 @@ function selectCard(index: number, item: any) {
 }
 
 function editCard(item) {
-  emitter.emit('ProductTab-editProductCard', {isVisible: true, data: item })
+  emitter.emit('ProductTab-editProductCard', { isVisible: true, data: item })
 }
 
 onMounted(async () => {

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

@@ -12,8 +12,7 @@
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
 import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
-import { useShopInfo } from '/@/stores/shopInfo'
-import {getProductLineSelect} from '../api'
+import { getProductLineSelect } from '/@/views/productCenter/productList/api'
 import { inject, onMounted, ref } from 'vue'
 
 const publicData = usePublicData()
@@ -24,15 +23,15 @@ const value = ref('')
 const options = ref([])
 
 async function fetchProductLine() {
-  try { 
-    const resp = await getProductLineSelect({profileId: profile.value.profile_id})
+  try {
+    const resp = await getProductLineSelect({ profileId: profile.value.profile_id })
     options.value = resp.data
   } catch (error) {
     console.log('error:', error)
   }
 }
 
-onMounted(()=>{
+onMounted(() => {
   fetchProductLine()
 })
 </script>

src/views/productCenter/productList/index.vue

@@ -3,7 +3,7 @@
     <TopFilters></TopFilters>
     <div class="table-tips">
       <el-icon><Warning /></el-icon>
-      <p style="margin-left: 3px">商品中心广告数据统计不包含SB广告</p>
+      <p style="margin-left: 3px;">商品中心广告数据统计不包含SB广告</p>
     </div>
     <el-card>
       <DataTendencyChart
@@ -16,7 +16,7 @@
       </DataTendencyChart>
     </el-card>
   </div>
-  <ProductTab></ProductTab>
+  <ProductSelectCard></ProductSelectCard>
   <div class="pl-and-asin-tables">
     <div class="asin-table-container">
       <vxe-button class="custom-button" type="text" status="primary" content="创建产品线" icon="vxe-icon-add" @click="handleProductlog"></vxe-button>
@@ -34,21 +34,21 @@
         </el-button-group>
       </div>
       
-      <AsinTable></AsinTable>
+      <DataTable></DataTable>
     </div>
   </div>
   <ProductLineDialog></ProductLineDialog>
 </template>
 
 <script setup>
-import ProductTab from './components/ProductTab.vue'
-import ProductLineDialog from './components/ProductLineDialog.vue'
-import TopFilters from './components/TopFilters.vue'
-import AsinTable from './components/AsinTable.vue'
+import ProductSelectCard from './components/ProductSelectCard/index.vue'
+import ProductLineDialog from './components/ProductDialog/index.vue'
+import TopFilters from './components/TopFilters/index.vue'
+import DataTable from './components/DataTable/index.vue'
 import { ref, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import { usePublicData } from '/@/stores/publicData'
-import DataTendencyChart from './components/DataTendency.vue'
+import DataTendencyChart from './components/DateTendency/index.vue'
 import { useShopInfo } from '/@/stores/shopInfo'
 import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
 import { productListMetricsEnum } from '../utils/enum'