ads_web/src/views/featureWord/queryPage/index.vue

<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: 特征词查询页
 * @Author: Cheney
 */

import { Download, Search } from '@element-plus/icons-vue';
import WeightTable from './WeightTable.vue';
import emitter from '/@/utils/emitter';
import { onMounted, provide, ref } from 'vue';
import dayjs from 'dayjs';
import _ from 'lodash';
import enLocale from 'element-plus/es/locale/lang/en';
import FeatureWordTable from '/@/views/featureWord/queryPage/FeatureWordTable.vue';


const date = ref(calculateLastMonthFirstWeek());
const dateRange = ref(date.value[0]);

const filter = ref({
  searchTerm: 'zosi',
  marketIds: 'ATVPDKIKX0DER',
  reportType: 'WEEKLY',
  reportDate: date
});

provide('filter', filter);

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

/**
 * 计算上个月第一周的日期
 */
function calculateLastMonthFirstWeek() {
  const lastMonth = dayjs().subtract(1, 'month');
  const firstDayOfLastMonth = lastMonth.startOf('month');
  const firstSundayOfLastMonth = firstDayOfLastMonth.day(0); // 获取上个月第一个星期日
  const firstSaturdayOfLastMonth = firstSundayOfLastMonth.add(6, 'day'); // 获取对应的星期六

  return [
    firstSundayOfLastMonth.format('YYYY-MM-DD'),
    firstSaturdayOfLastMonth.format('YYYY-MM-DD')
  ];
}

/**
 * 判断当前日期类型 并 计算起始和结束日期
 */
function calculateDate() {
  if (filter.value.reportType === 'WEEKLY') {
    date.value[0] = dateRange.value;
    date.value[1] = dayjs(dateRange.value).add(6, 'day').format('YYYY-MM-DD');
  } else if (filter.value.reportType === 'MONTHLY') {
    const selectedMonth = dayjs(dateRange.value);
    date.value[0] = selectedMonth.startOf('month').format('YYYY-MM-DD');
    date.value[1] = selectedMonth.endOf('month').format('YYYY-MM-DD');
  }
}

const throttledEmit = _.throttle(() => {
  emitter.emit('QueryPage-query');
}, 3000);

function handleQuery() {
  throttledEmit();
}

function handleDownload() {

}


</script>

<template>
  <div class="py-2 px-2.5">
    <el-card body-class="flex justify-between gap-3.5" shadow="hover" style="border: none; margin-bottom: 10px">
      <div class="flex flex-wrap gap-7">
        <div>
          <span class="font-bold mr-2" style="color: #303133">关键词:</span>
          <el-input v-model="filter.searchTerm" style="width: 180px"></el-input>
        </div>
        <div>
          <span class="font-bold mr-2" style="color: #303133">市场ID:</span>
          <el-input v-model="filter.marketIds" style="width: 180px"></el-input>
        </div>
        <div>
          <span class="font-bold mr-2" style="color: #303133">报告类型:</span>
          <el-select v-model="filter.reportType" style="width: 100px" @change="calculateDate">
            <el-option label="月度" value="MONTHLY"></el-option>
            <el-option label="周度" value="WEEKLY"></el-option>
          </el-select>
        </div>
        <div>
          <span class="font-bold mr-2" style="color: #303133">报告日期:</span>
          <el-config-provider v-if="filter.reportType === 'WEEKLY'" :locale="enLocale">
            <el-date-picker
                v-model="dateRange"
                :clearable="false"
                :disabled-date="(time: Date) => time > new Date()"
                :format="`${date[0]} To ${date[1]}`"
                type="week"
                value-format="YYYY-MM-DD"
                @change="calculateDate"
            />
          </el-config-provider>
          <el-date-picker
              v-else
              v-model="dateRange"
              :clearable="false"
              :disabled-date="(time: Date) => time > new Date()"
              :format="`${date[0]} To ${date[1]}`"
              type="month"
              value-format="YYYY-MM-DD"
              @change="calculateDate"
          />
        </div>
      </div>
      <div class="flex gap-3.5">
        <el-button :icon="Search" plain type="primary" @click="handleQuery">查询</el-button>
        <el-button :icon="Download" plain round type="success" @click="handleDownload">下载管理</el-button>
      </div>
    </el-card>
    <WeightTable/>
    <FeatureWordTable/>
  </div>
</template>

<style scoped></style>