ads_web/src/views/reportManage/dataCenter/components/EntryDetail.vue

<script setup lang="ts">
import { reactive } from 'vue'
import { VxeGridProps } from 'vxe-table'
import DateRangePicker from "/@/components/DateRangePicker/index.vue";
import dayjs from 'dayjs';

const DailyEntryTime = ref(dayjs().format('YYYY-MM-DD')); // 使用dayjs获取当前日期并格式化为'YYYY-MM-DD'

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
];

//表格
const tableColumns = [
  { type: 'seq', title: 'ID', width: 50 },
  { field: 'Name', title: '平台名称' },
  { field: 'Country', title: '国家' },
  { field: 'Brand', title: '品牌' },
  { field: 'Sales', title: '销售额' },
  { field: 'TotalAdSales', title: '广告销售额' },
  { field: 'AdSpend', title: '广告花费' },
]

const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  height: 300,
  align: null,
  columnConfig: {
    resizable: true,
  },

  columns: tableColumns,
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  data: [{ Name: 10001, Country: 'Test1', Brand: 'T1', Sales: 'Develop', TotalAdSales: 11, AdSpend: 28 }],
})
</script>

<template>
  <div>
    <div class="demo-date-picker">
      <div class="block">
        <span class="demonstration">日录入数据时间:</span>
        <el-date-picker
            v-model="DailyEntryTime"
            type="Date"
            :size="size"
        />
      </div>
      <div class="block">
        <span class="demonstration">销售额数据时间:</span>
        <el-date-picker
            v-model="SalesDataTime"
            type="Date"
            :size="size"
        />
      </div>
      <div class="block">
        <span class="demonstration">广告数据时间:</span>
        <el-date-picker
            v-model="AdDataTime"
            type="Date"
            :size="size"
        />
      </div>
    </div>
    <vxe-grid v-bind="gridOptions">
      <template #toolbar_buttons></template>
    </vxe-grid>
  </div>
</template>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  /*margin-bottom: 20px;*/
  margin:10px;
}
</style>