ads_web/src/views/searchTerm/topSearchTermRank/index.vue

<script setup lang="ts">
/**
 * @Name: index.vue
 * @Description:
 * @Author: Cheney
 */

import { Key, PictureRounded, Refresh, Search, TopRight } from '@element-plus/icons-vue';
import { nextTick, onMounted, ref, watch } from 'vue';
import dayjs from 'dayjs';
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';

const router = useRouter();

const date = ref([dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')]);
const { tableData, total, currentPage, pageSize, handlePageChange } = usePagination(fetchTableData);
const marketplaceSelect = ref(marketplaceIdEnum[0].value); // 当前只有美国区 默认第一个为美国
const marketplaceOptions = marketplaceIdEnum;
const reportTypeSelect = ref('weekly');
const searchTermInp = ref('');
const asinInp = ref('');
const tableLoading = ref(false);

onMounted(() => {
  fetchTableData();
});

watch(date, () => {
  fetchTableData();
});

async function refreshTable() {
  currentPage.value = 1;
  pageSize.value = 10;
  asinInp.value = '';
  searchTermInp.value = '';
  reportTypeSelect.value = 'weekly';
  marketplaceSelect.value = marketplaceIdEnum[0].value;
  await fetchTableData();
}

async function fetchTableData() {
  tableLoading.value = true;
  const query = {
    page: currentPage.value,
    limit: pageSize.value,
    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],
  };
  try {
    const response = await getTopSearchTermTable(query);
    total.value = response.total;
    tableData.value = response.data;
  } catch (error) {
    console.error('==Error==:', error);
  } finally {
    tableLoading.value = false;
    await nextTick();
    // 触发窗口 resize 事件
    window.dispatchEvent(new Event('resize'));
  }
}

async function handleSelectChange() {
  await fetchTableData();
}

async function handleQueryChange() {
  if (!validateSearchTermInput(searchTermInp.value)) {
    if (searchTermInp.value.length == 0) {
      return;
    } else {
      ElMessage.warning({ message: '搜索词只能输入数字和英文字母', plain: true });
      return;
    }
  }
  if (asinInp.value.length > 0 && !validateAsinInput(asinInp.value)) {
    ElMessage.warning({ message: '不符合匹配规范', plain: true });
    return;
  }
  await fetchTableData();
}

/**
 * 校验SearchTerm输入是否合法
 * @param input 输入的字符串
 */
function validateSearchTermInput(input: string) {
  const regex = /^[a-zA-Z0-9\s]*$/;
  return regex.test(input);
}

/**
 * 校验Asin输入是否合法
 * @param input 输入的字符串
 */
function validateAsinInput(input: string) {
  const regex = /^[Bb]0[A-Za-z0-9\s]*$/i;
  return regex.test(input);
}

function handleJump() {
  router.push({ path: '/searchTerm/rootWordManage' });
}
</script>

<template>
  <div class="mx-3">
    <el-divider>
      <div class="font-bold text-xl">
        <el-icon style="top: 3px">
          <DataLine />
        </el-icon>
        Top Search Term - Rank
      </div>
    </el-divider>
  </div>
  <el-card class="mx-3" v-loading="tableLoading" style="border: none">
    <!-- table筛选栏 -->
    <div class="flex justify-between">
      <div class="flex gap-5 flex-wrap">
        <div>
          <span class="font-medium mr-0.5">市场 </span>
          <el-select v-model="marketplaceSelect" @change="handleSelectChange" style="width: 90px">
            <el-option
              v-for="item in marketplaceOptions"
              :disabled="item.disabled"
              :key="item.value"
              :value="item.value"
              :label="item.label" />
          </el-select>
        </div>
        <div>
          <span class="font-medium mr-0.5">报告类型 </span>
          <el-select v-model="reportTypeSelect" @change="handleSelectChange" style="width: 90px">
            <el-option label="周度" value="weekly" />
            <el-option label="月度" value="monthly" />
          </el-select>
        </div>
        <div>
          <span class="font-medium mr-0.5">搜索词 </span>
          <el-input
            v-model="searchTermInp"
            @keyup.enter="handleQueryChange"
            :prefix-icon="Search"
            placeholder="输入后回车查询"
            clearable
            @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"
            :popper-options="{ placement: 'bottom-end' }"
            :clearable="false"
            :disabled-date="(time: Date) => time > new Date()"
            range-separator="至" />
        </div>
      </div>
      <div class="flex">
        <el-button type="primary" plain @click="handleJump" :icon="TopRight">搜索词管理</el-button>
        <el-button @click="refreshTable" :icon="Refresh" circle></el-button>
      </div>
    </div>
    <!-- table -->
    <el-card shadow="never" class="mt-5">
      <div style="height: 795px; overflow: auto">
        <el-table :data="tableData" height="795" stripe style="width: 100%">
          <el-table-column fixed prop="searchTerm" label="搜索词" width="260">
            <template #header>
              <el-icon style="top: 2px; margin-right: 3px">
                <Key />
              </el-icon>
              <span>搜索词</span>
            </template>
            <template #default="{ row }">
              <el-link :underline="false" href="https://www.bilibili.com/" target="_blank" style="color: #0b3289">
                {{ row.searchTerm }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="rank" label="搜索词搜索排名" align="center">
            <template #header>
              <el-icon style="top: 2px; margin-right: 4px">
                <PictureRounded />
              </el-icon>
              <span>Tendency</span>
            </template>
            <template #default="{ row }">
              <ColumnChart :rowData="row" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="mt-3.5 flex justify-end">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          layout="sizes, prev, pager, next"
          :total="total"
          @change="handlePageChange" />
      </div>
    </el-card>
  </el-card>
</template>

<style scoped>
:deep(.el-divider__text.is-center.el-divider__text) {
  background-color: #f8f8f8;
}
</style>