laisiao/src/MAR/dataPanel/modules/Detail.vue

<template>
  <div class="data-detail">
    <a-card
      title="账户使用详情"
      :headStyle="[{ fontSize: '14px' }]"
      :bordered="false"
      style="width: 100%; margin-bottom: 10px"
    >
      <CustomSelect
        style="margin-bottom: 20px"
        title="类型："
        :options="typeOptions"
        v-model="param.content.usertype"
        @update:modelValue="typeChange"
      />

      <CustomSelect
        title="时间："
        :options="timeOptions"
        v-model="param.content.where.type"
        @update:modelValue="timeChange"
      >
        <template #custom>
          <a-range-picker
            :allowClear="false"
            style="width: 250px"
            v-model:value="ranges"
            value-format="YYYY-MM-DD"
            @change="dateRangeChange"
          />
        </template>
      </CustomSelect>
    </a-card>

    <normalTable
      :noQuery="true"
      @listData="handleData"
      rowKey="sat_coursewaredetailid"
      :is-select="false"
      ref="table"
      size="small"
      :columns="utils.TBLayout('panelTable')"
      :param="param"
    >
      <template #tb_cell="{ data }">
        <template v-if="data.column.dataIndex === 'attinfos'"> </template>
        <template v-else-if="data.column.dataIndex == 'operation'"> </template>
      </template>
    </normalTable>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import utils from "@/utils/utils";
import CustomSelect from "./select.vue";
import normalTable from "@/template/normalTable/index.vue";
import { useRouter } from "vue-router";
const router = useRouter();
let time = ref("近30天");
let ranges = ref([]);
let typeOptions = ref([
  { label: "公司人员", value: 1 },
  { label: "经销商", value: 21 },
  { label: "经销商员工", value: 22 },
]);
let timeOptions = ref([
  { label: "今日", value: "1" },
  { label: "昨日", value: "2" },
  { label: "近7日", value: "3" },
  { label: "近30日", value: "4" },
]);

let table = ref();
let param = ref({
  id: "2024061114184602",
  content: {
    usertype: router.currentRoute.value.query.type,
    pageNumber: 1,
    pageSize: 20,
    where: {
      type: 4, //1当日，2昨日，3近七日，4近30日
      begindate: "",
      enddate: "",
    },
  },
});

const typeChange = (value) => {
  param.value.content.pageNumber = 1;
  table.value.listData();
};
const timeChange = (value) => {
  let today = new Date();
  switch (value) {
    case "1":
      ranges.value = [calcTime(today), calcTime(today)];
      break;
    case "2":
      ranges.value = [
        calcTime(new Date(new Date().setDate(new Date().getDate() - 1))),
        calcTime(new Date(new Date().setDate(new Date().getDate() - 1))),
      ];
      break;
    case "3":
      ranges.value = [
        calcTime(new Date(new Date().setDate(new Date().getDate() - 7))),
        calcTime(new Date()),
      ];
      break;
    default:
      ranges.value = [
        calcTime(new Date(new Date().setDate(new Date().getDate() - 30))),
        calcTime(new Date()),
      ];
      break;
  }
  param.value.content.where.begindate = "";
  param.value.content.where.enddate = "";
  param.value.content.pageNumber = 1;
  table.value.listData();
};

const calcTime = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const yyyymmdd = year + "-" + month + "-" + day;
  return yyyymmdd;
};

const dateRangeChange = (time) => {
  if (time) {
    param.value.content.where.begindate = ranges.value[0];
    param.value.content.where.enddate = ranges.value[1];
    param.value.content.where.type = "";
  } else {
    param.value.content.where.begindate = "";
    param.value.content.where.enddate = "";
    param.value.content.where.type = 4;
  }
  param.value.content.pageNumber = 1;
  table.value.listData();
};

onMounted(() => {
  timeChange(4);
});
</script>

<style scoped>
/deep/.ant-card-head {
  padding: 0 10px !important;
  min-height: 48px !important;
  font-size: "14px" !important;
}
/deep/.ant-card-body {
  padding: 24px 24px 24px 10px;
}
</style>