123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- <script setup lang="ts">
- /**
- * @Name: index.vue
- * @Description: asinView
- * @Author: Cheney
- */
- import { Download, Refresh, Search } from '@element-plus/icons-vue';
- import { nextTick, onBeforeMount, reactive, ref, watch } from 'vue';
- import dayjs from 'dayjs';
- import { getTableData, postDownload } from './api';
- import { ElMessage } from 'element-plus';
- import { asinColumns } from './useColumns';
- import { brandColumns } from '/@/views/searchTerm/brandView/useColumns';
- const reportTypeSelect = ref('monthly');
- const searchTermInp = ref('');
- const asinInp = ref('B0');
- const tableLoading = ref(false);
- const downloadLoading = ref(false);
- const date = ref(calculateLastWeek());
- const gridOptions: any = reactive({
- height: 'auto',
- 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(date, () => {
- 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,
- // marketplace_Ids: marketplaceSelect.value,
- date_start: date.value[0],
- date_end: date.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);
- }
- /**
- * 计算上周的周日到周六的日期范围
- */
- function calculateLastWeek() {
- const today = dayjs();
- const lastDay = today.subtract(1, 'day'); // 昨天
- const firstDay = lastDay.subtract(6, 'day'); // 一周前
- return [firstDay.format('YYYY-MM-DD'), lastDay.format('YYYY-MM-DD')];
- }
- </script>
- <template>
- <div class="py-2 px-2.5" style="background-color: #f7f7f7">
- <el-card shadow="hover" class="mb-2.5" style="border: none; margin-bottom: 10px">
- <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-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" />
- </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 shadow="hover" style="border: none">
- <div style="overflow: hidden; width: 100%; height: 950px" 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>
|