|
@@ -0,0 +1,266 @@
|
|
|
+<script setup lang="ts">
|
|
|
+/**
|
|
|
+ * @Name: index.vue
|
|
|
+ * @Description: asinView
|
|
|
+ * @Author: Cheney
|
|
|
+ */
|
|
|
+
|
|
|
+import { Download, Refresh, Search } from '@element-plus/icons-vue';
|
|
|
+import enLocale from 'element-plus/es/locale/lang/en';
|
|
|
+import { usePagination } from '/@/utils/usePagination';
|
|
|
+import { nextTick, ref } from 'vue';
|
|
|
+import { marketplaceIdEnum } from '/@/utils/marketplaceIdEnum';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { getTopSearchTermTable, postDownload } from '/@/views/searchTerm/topSearchTermTable/api';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+
|
|
|
+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);
|
|
|
+const downloadLoading = ref(false);
|
|
|
+const date = ref(calculateLastWeek()); // 设置默认日期为上周的周日到周六
|
|
|
+const dateDimension = ref(date.value[0]);
|
|
|
+
|
|
|
+/**
|
|
|
+ * 判断当前时间维度 并 计算起始和结束日期
|
|
|
+ */
|
|
|
+function calculateDate() {
|
|
|
+ if (reportTypeSelect.value === 'weekly') {
|
|
|
+ date.value[0] = dateDimension.value;
|
|
|
+ date.value[1] = calculateEndDate(dateDimension.value);
|
|
|
+ } else if (reportTypeSelect.value === 'monthly') {
|
|
|
+ const selectedMonth = dayjs(dateDimension.value);
|
|
|
+ date.value[0] = selectedMonth.startOf('month').format('YYYY-MM-DD');
|
|
|
+ date.value[1] = selectedMonth.endOf('month').format('YYYY-MM-DD');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 计算上周的周日到周六的日期范围
|
|
|
+ */
|
|
|
+function calculateLastWeek() {
|
|
|
+ const today = dayjs();
|
|
|
+ const lastSaturday = today.subtract(today.day() + 1, 'day'); // 上周六
|
|
|
+ const lastSunday = lastSaturday.subtract(6, 'day'); // 上周日
|
|
|
+ return [lastSunday.format('YYYY-MM-DD'), lastSaturday.format('YYYY-MM-DD')];
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 计算结束日期
|
|
|
+ * @param startDate el-date-picker组件的value
|
|
|
+ */
|
|
|
+function calculateEndDate(startDate: string) {
|
|
|
+ return dayjs(startDate).add(6, 'day').format('YYYY-MM-DD');
|
|
|
+}
|
|
|
+
|
|
|
+async function refreshTable() {
|
|
|
+ currentPage.value = 1;
|
|
|
+ pageSize.value = 20;
|
|
|
+ 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() {
|
|
|
+ calculateDate();
|
|
|
+ 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);
|
|
|
+}
|
|
|
+
|
|
|
+async function handleDownload() {
|
|
|
+ downloadLoading.value = true;
|
|
|
+ try {
|
|
|
+ const body = {
|
|
|
+ asin: asinInp.value,
|
|
|
+ date_start: date.value[0],
|
|
|
+ date_end: date.value[1],
|
|
|
+ search_term: searchTermInp.value,
|
|
|
+ marketplace_Ids: marketplaceSelect.value,
|
|
|
+ report_type: reportTypeSelect.value,
|
|
|
+ };
|
|
|
+
|
|
|
+ const response = await postDownload(body);
|
|
|
+
|
|
|
+ const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
|
|
+
|
|
|
+ // 创建一个临时 URL
|
|
|
+ const url = window.URL.createObjectURL(blob);
|
|
|
+
|
|
|
+ // 创建一个临时的 <a> 元素并触发下载
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = url;
|
|
|
+
|
|
|
+ // 设置文件名
|
|
|
+ const currentTime = dayjs().format('YYYY-MM-DD_HH_mm_ss');
|
|
|
+ const filename = `TopSearchTerm_${currentTime}.xlsx`;
|
|
|
+
|
|
|
+ link.setAttribute('download', filename);
|
|
|
+
|
|
|
+ // 添加到 body, 触发点击, 然后移除
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+
|
|
|
+ // 释放 URL 对象
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+
|
|
|
+ ElMessage.success('文件下载成功');
|
|
|
+ } catch (error) {
|
|
|
+ console.error('==Error==:', error);
|
|
|
+ ElMessage.error('文件下载失败,请重试');
|
|
|
+ } finally {
|
|
|
+ downloadLoading.value = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="py-2 px-2.5">
|
|
|
+ <el-card class="mb-2.5">
|
|
|
+ <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="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-config-provider :locale="enLocale">
|
|
|
+ <el-date-picker
|
|
|
+ v-if="reportTypeSelect === 'weekly'"
|
|
|
+ v-model="dateDimension"
|
|
|
+ type="week"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ :format="`${date[0]} To ${date[1]}`"
|
|
|
+ :popper-options="{ placement: 'bottom-end' }"
|
|
|
+ :disabled-date="(time: Date) => time > new Date()"
|
|
|
+ :clearable="false" />
|
|
|
+ <el-date-picker
|
|
|
+ v-else
|
|
|
+ v-model="dateDimension"
|
|
|
+ type="month"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ :format="`${date[0]} To ${date[1]}`"
|
|
|
+ :popper-options="{ placement: 'bottom-end' }"
|
|
|
+ :disabled-date="(time: Date) => time > new Date()"
|
|
|
+ :clearable="false">
|
|
|
+ <template #default> 123</template>
|
|
|
+ </el-date-picker>
|
|
|
+ </el-config-provider>
|
|
|
+ </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>
|
|
|
+ </el-card>
|
|
|
+ <el-card>
|
|
|
+ <el-table></el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped></style>
|