✨ feat: 修改搜索词的日期选择器

src/views/searchTerm/analysisPage/IndicatorOverview.vue

@@ -92,8 +92,8 @@ watch(responseData, (newData) => {
 async function fetchIndicatorData() {
   metricLoading.value = true;
   const query = {
-    date_start: filter.value.reportDate[0],
-    date_end: filter.value.reportDate[1],
+    date_start: filter.value.reportDate.value[0],
+    date_end: filter.value.reportDate.value[1],
     layer_type: filter.value.layerType,
     search_term: filter.value.searchTerm,
     report_range: filter.value.reportType,

src/views/searchTerm/analysisPage/QueryCondition.vue

@@ -5,16 +5,34 @@
  * @Author: Cheney
  */
 import { RefreshLeft, Search } from '@element-plus/icons-vue';
-import { onMounted, ref, watch, inject, Ref } from 'vue';
+import { onBeforeMount, onMounted, ref, watch, inject, Ref } from 'vue';
 import emitter from '/@/utils/emitter';
+import WeekRangePicker from '/@/components/WeekRangePicker/index.vue';
+import MonthRangePicker from '/@/components/MonthRangePicker/index.vue';
+import dayjs from 'dayjs'
 
+const weekDate = ref([
+  dayjs().subtract(2, 'week').day(0).format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'week').day(6).format('YYYY-MM-DD'),
+]);
+const monthDate = ref([
+  dayjs().subtract(2, 'month').startOf('month').format('YYYY-MM-DD'),
+  dayjs().subtract(0, 'month').startOf('month').format('YYYY-MM-DD'),
+]);
 const defaultLabel = ref('ASIN');
 const filter = inject<Ref>('filter');
 
+onBeforeMount(() => {
+  handleDateChange();
+})
 onMounted(() => {
   handleQuery();
 });
 
+watch([weekDate, monthDate], () => {
+  handleDateChange();
+})
+
 watch(
   () => filter.value.layerType,
   (newValue) => {
@@ -40,6 +58,16 @@ function resetCondition() {
   filter.value.reportDate = '';
   filter.value.variable = '';
 }
+
+function handleDateChange() {
+  let date = [];
+  if (filter.value.reportType === 'MONTHLY') {
+    date = monthDate.value;
+  } else {
+    date = weekDate.value;
+  }
+  emitter.emit('QueryCondition-dateChange', date);
+}
 </script>
 
 <template>
@@ -54,7 +82,7 @@ function resetCondition() {
       </div>
       <div>
         <span class="font-bold mr-2" style="color: #303133">报告类型:</span>
-        <el-select v-model="filter.reportType" style="width: 100px">
+        <el-select v-model="filter.reportType" @change="handleDateChange" style="width: 100px">
           <el-option label="月度" value="MONTHLY"></el-option>
           <el-option label="周度" value="WEEKLY"></el-option>
         </el-select>
@@ -69,15 +97,8 @@ function resetCondition() {
       </div>
       <div>
         <span class="font-bold mr-2" style="color: #303133">报告日期:</span>
-        <el-date-picker
-            style="width: 280px;"
-          v-model="filter.reportDate"
-          type="daterange"
-          range-separator="To"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          value-format="YYYY-MM-DD"
-          :disabled-date="(time: Date) => time > new Date()" />
+        <MonthRangePicker v-model="monthDate" v-if="filter.reportType === 'MONTHLY'" />
+        <WeekRangePicker v-model="weekDate" v-else />
       </div>
     </div>
     <div class="flex gap-3.5">

src/views/searchTerm/analysisPage/index.vue

@@ -4,27 +4,32 @@
  * @Description: 分析页
  * @Author: Cheney
  */
-import { provide, ref } from 'vue';
+import { onBeforeUnmount, provide, ref } from 'vue';
 import QueryCondition from './QueryCondition.vue';
 import IndicatorOverview from './IndicatorOverview.vue';
 import IndicatorChart from './IndicatorChart.vue';
 import QuerySummary from './QuerySummary.vue';
-import dayjs from 'dayjs'
-import { usePublicData } from '/@/stores/publicData'
-import { storeToRefs } from 'pinia'
+import emitter from '/@/utils/emitter';
 
-const publicData = usePublicData();
-const { dateRange } = storeToRefs(publicData);
 const filter = ref({
   // 初始化 QueryCondition组件的filter
   layerType: 'asin_view',
   searchTerm: '',
   reportType: 'MONTHLY',
-  reportDate: [dateRange.value[0], dateRange.value[1]],
+  reportDate: '',
   variable: 'B00TEST0001',
   metric: 'Search_Query_Score',
 });
+
 provide('filter', filter);
+
+emitter.on('QueryCondition-dateChange', (data: any) => {
+  filter.value.reportDate = data;
+});
+
+onBeforeUnmount(() => {
+  emitter.all.clear();
+});
 </script>
 
 <template>
@@ -33,7 +38,6 @@ provide('filter', filter);
     <IndicatorOverview />
     <IndicatorChart />
     <QuerySummary />
-
   </div>
 </template>
 

src/views/searchTerm/asinView/index.vue

@@ -11,7 +11,6 @@ import dayjs from 'dayjs';
 import { getTableData } from './api';
 import { ElMessage } from 'element-plus';
 import { asinColumns } from './useColumns';
-
 import WeekRangePicker from '/@/components/WeekRangePicker/index.vue';
 import MonthRangePicker from '/@/components/MonthRangePicker/index.vue';
 
@@ -92,7 +91,6 @@ async function fetchTableData() {
     asin: asinInp.value,
     search_term: searchTermInp.value,
     report_type: reportTypeSelect.value,
-    // marketplace_Ids: marketplaceSelect.value,
     date_start: reportTypeSelect.value == 'weekly' ? weekDate.value[0] : monthDate.value[0],
     date_end: reportTypeSelect.value == 'weekly' ? weekDate.value[1] : monthDate.value[1],
   };

src/views/searchTerm/brandView/index.vue

@@ -11,17 +11,20 @@ import dayjs from 'dayjs';
 import { getTableData } from './api';
 import { ElMessage } from 'element-plus';
 import { brandColumns } from './useColumns';
-import { usePublicData } from '/@/stores/publicData';
-import { storeToRefs } from 'pinia';
-
-const publicData = usePublicData();
-const { dateRange } = storeToRefs(publicData);
+import WeekRangePicker from '/@/components/WeekRangePicker/index.vue';
+import MonthRangePicker from '/@/components/MonthRangePicker/index.vue';
+
+const weekDate = ref([
+  dayjs().subtract(2, 'week').day(0).format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'week').day(6).format('YYYY-MM-DD'),
+]);
+const monthDate = ref([
+  dayjs().subtract(2, 'month').startOf('month').format('YYYY-MM-DD'),
+  dayjs().subtract(0, 'month').startOf('month').format('YYYY-MM-DD'),
+]);
 const reportTypeSelect = ref('weekly');
 const searchTermInp = ref('zosi');
-// const asinInp = ref('B0');
 const tableLoading = ref(false);
-const downloadLoading = ref(false);
-const date = ref([dateRange.value[0], dateRange.value[1]]);
 
 const gridOptions: any = reactive({
   height: 'auto',
@@ -50,7 +53,7 @@ onBeforeMount(() => {
   fetchTableData();
 });
 
-watch(date, () => {
+watch([weekDate, monthDate], () => {
   fetchTableData();
 });
 
@@ -67,10 +70,8 @@ async function handleSelectChange() {
 async function refreshTable() {
   tablePage.currentPage = 1;
   tablePage.pageSize = 20;
-  // asinInp.value = '';
   searchTermInp.value = '';
   reportTypeSelect.value = 'weekly';
-  // marketplaceSelect.value = marketplaceIdEnum[0].value;
   await fetchTableData();
 }
 
@@ -79,12 +80,10 @@ async function fetchTableData() {
   const query = {
     page: tablePage.currentPage,
     limit: tablePage.pageSize,
-    // asin: asinInp.value,
     search_term: searchTermInp.value,
     report_type: reportTypeSelect.value,
-    // marketplace_Ids: marketplaceSelect.value,
-    date_start: date.value[0],
-    date_end: date.value[1],
+    date_start: reportTypeSelect.value == 'weekly' ? weekDate.value[0] : monthDate.value[0],
+    date_end: reportTypeSelect.value == 'weekly' ? weekDate.value[1] : monthDate.value[1],
   };
   try {
     const response = await getTableData(query);
@@ -168,40 +167,13 @@ function calculateLastWeek() {
               @clear="handleSelectChange"
               style="width: 240px" />
           </div>
-          <!--<div>-->
-          <!--  <span class="font-medium mr-0.5">ASIN </span>-->
-          <!--  <el-input-->
-          <!--      v-model="asinInp"-->
-          <!--      @keyup.enter="handleQueryChange"-->
-          <!--      :prefix-icon="Search"-->
-          <!--      placeholder="输入后回车查询"-->
-          <!--      clearable-->
-          <!--      @clear="handleSelectChange"-->
-          <!--      style="width: 180px" />-->
-          <!--</div>-->
           <div>
             <span class="font-medium mr-0.5">报告日期 </span>
-            <el-date-picker
-              v-model="date"
-              type="daterange"
-              value-format="YYYY-MM-DD"
-              range-separator="To"
-              :disabled-date="(time: Date) => time > new Date()"
-              :popper-options="{ placement: 'bottom-end' }"
-              :clearable="false" />
+            <MonthRangePicker v-model="monthDate" v-if="reportTypeSelect === 'monthly'" />
+            <WeekRangePicker v-model="weekDate" v-else />
           </div>
         </div>
         <div class="flex">
-          <!--<el-button-->
-          <!--  type="success"-->
-          <!--  plain-->
-          <!--  @click="handleDownload"-->
-          <!--  :icon="Download"-->
-          <!--  round-->
-          <!--  :loading="downloadLoading"-->
-          <!--  :disabled="!tableData.length"-->
-          <!--  >下载表格-->
-          <!--</el-button>-->
           <el-button @click="refreshTable" :icon="Refresh" circle></el-button>
         </div>
       </div>

src/views/searchTerm/topSearchTermRank/index.vue

@@ -1,26 +1,31 @@
 <script setup lang="ts">
 /**
  * @Name: index.vue
- * @Description:
+ * @Description: 搜索词-TopSearchTerm Rank
  * @Author: Cheney
  */
 
 import { Key, PictureRounded, Refresh, Search, TopRight } from '@element-plus/icons-vue';
-import { nextTick, onMounted, ref, watch } from 'vue';
+import { nextTick, onBeforeMount, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { marketplaceIdEnum } from '/@/utils/marketplaceIdEnum';
 import { usePagination } from '/@/utils/usePagination';
 import { getTopSearchTermTable } from './api';
 import { ElMessage } from 'element-plus';
 import ColumnChart from '/src/views/searchTerm/topSearchTermRank/column-chart.vue';
-import { usePublicData } from '/@/stores/publicData';
-import { storeToRefs } from 'pinia';
+import dayjs from 'dayjs';
+import WeekRangePicker from '/@/components/WeekRangePicker/index.vue';
+import MonthRangePicker from '/@/components/MonthRangePicker/index.vue';
 
-const publicData = usePublicData();
-const { dateRange } = storeToRefs(publicData);
+const weekDate = ref([
+  dayjs().subtract(2, 'week').day(0).format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'week').day(6).format('YYYY-MM-DD'),
+]);
+const monthDate = ref([
+  dayjs().subtract(2, 'month').startOf('month').format('YYYY-MM-DD'),
+  dayjs().subtract(0, 'month').startOf('month').format('YYYY-MM-DD'),
+]);
 const router = useRouter();
-
-const date = ref([dateRange.value[0], dateRange.value[1]]);
 const { tableData, total, currentPage, pageSize, handlePageChange } = usePagination(fetchTableData);
 const marketplaceSelect = ref(marketplaceIdEnum[0].value); // 当前只有美国区 默认第一个为美国
 const marketplaceOptions = marketplaceIdEnum;
@@ -29,11 +34,11 @@ const searchTermInp = ref('');
 const asinInp = ref('');
 const tableLoading = ref(false);
 
-onMounted(() => {
+onBeforeMount(() => {
   fetchTableData();
 });
 
-watch(date, () => {
+watch([weekDate, monthDate], () => {
   fetchTableData();
 });
 
@@ -56,8 +61,8 @@ async function fetchTableData() {
     search_term: searchTermInp.value,
     report_type: reportTypeSelect.value,
     marketplace_Ids: marketplaceSelect.value,
-    date_start: date.value[0],
-    date_end: date.value[1],
+    date_start: reportTypeSelect.value == 'weekly' ? weekDate.value[0] : monthDate.value[0],
+    date_end: reportTypeSelect.value == 'weekly' ? weekDate.value[1] : monthDate.value[1],
   };
   try {
     const response = await getTopSearchTermTable(query);
@@ -173,14 +178,8 @@ function handleJump() {
         </div>
         <div>
           <span class="font-medium mr-0.5">报告日期 </span>
-          <el-date-picker
-            v-model="date"
-            type="daterange"
-            value-format="YYYY-MM-DD"
-            :popper-options="{ placement: 'bottom-end' }"
-            :clearable="false"
-            :disabled-date="(time: Date) => time > new Date()"
-            range-separator="至" />
+          <MonthRangePicker v-model="monthDate" v-if="reportTypeSelect === 'monthly'" />
+          <WeekRangePicker v-model="weekDate" v-else />
         </div>
       </div>
       <div class="flex">