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

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

import { Refresh, Search } from '@element-plus/icons-vue';
import { reactive, ref, watch, onBeforeMount } from 'vue';
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';

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('');
const asinInp = ref('B0');
const tableLoading = ref(false);

const gridOptions: any = reactive({
  height: '100%',
  border: false,
  round: true,
  columnConfig: {
    resizable: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  columns: asinColumns,
  data: [],
});

const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 20,
});

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

watch([weekDate, monthDate], () => {
  fetchTableData();
});

async function handlePageChange({ currentPage, pageSize }) {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  await fetchTableData();
}

async function handleSelectChange() {
  if (!asinInp.value) {
    ElMessage.warning({ message: '请输入ASIN', plain: true });
    return;
  } else {
    await fetchTableData();
  }
}

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

async function fetchTableData() {
  tableLoading.value = true;
  const query = {
    page: tablePage.currentPage,
    limit: tablePage.pageSize,
    asin: asinInp.value,
    search_term: searchTermInp.value,
    report_type: reportTypeSelect.value,
    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);
    tablePage.total = response.total;
    gridOptions.data = response.data;
  } catch (error) {
    console.error('==Error==:', error);
  } finally {
    tableLoading.value = false;
  }
}

/**
 * 输入框按下回车后触发
 */
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);
}
</script>

<template>
  <div class="py-2 px-2.5 flex" style="background-color: #f7f7f7">
    <el-card shadow="hover" class="mb-2.5" style="border: none; margin-bottom: 10px">
      <div ref="queryContainer" class="flex justify-between">
        <div class="flex gap-5 flex-wrap">
          <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>
            <MonthRangePicker v-model="monthDate" v-if="reportTypeSelect === 'monthly'" />
            <WeekRangePicker v-model="weekDate" v-else />
          </div>
        </div>
        <div class="flex">
          <el-button @click="refreshTable" :icon="Refresh" circle></el-button>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover" style="border: none; flex: 1 1 auto; height: calc(100vh - 154px)">
      <div style="overflow: hidden; width: 100%; height: calc(100vh - 174px)" v-loading="tableLoading">
        <vxe-grid v-bind="gridOptions">
          <template #toolbar_buttons></template>
          <template v-for="col in asinColumns" #[`${col.field}_default`]="{ row }">
            <div v-if="col.field === 'clickedItemName'">
              <el-tooltip effect="dark" :content="row.clickedItemName" placement="top" :show-after="300">
                <div class="line-text font-medium">
                  {{ row.clickedItemName }}
                </div>
              </el-tooltip>
            </div>
            <div v-else class="font-medium">
              {{ row[col.field] ? row[col.field] : '-' }}
            </div>
          </template>
          <template #pager>
            <vxe-pager
              :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
              v-model:current-page="tablePage.currentPage"
              v-model:page-size="tablePage.pageSize"
              :total="tablePage.total"
              @page-change="handlePageChange">
            </vxe-pager>
          </template>
        </vxe-grid>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.line-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>