lingji-work-fe/src/views/property-marketing/media-account/account-dashboard/index.vue

<!--
 * @Author: RenXiaoDong
 * @Date: 2025-06-25 10:02:20
-->

<template>
  <div class="account-dashboard-wrap">
    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px pb-20px mb-16px">
      <div class="top flex h-64px py-10px justify-between items-center">
        <div class="flex items-center">
          <p class="text-18px font-400 lh-26px color-#211F24 mr-4px title">数据总览</p>
          <a-tooltip content="展示所筛选的账号的信息汇总">
            <icon-question-circle size="16" class="color-#737478" />
          </a-tooltip>
        </div>
      </div>
      <div class="overview-row flex">
        <div v-for="item in CARD_FIELDS" :key="item.prop" class="overview-item flex-1">
          <div class="flex items-center mb-8px">
            <img :src="item.icon" width="20" height="20" class="mr-8px" />
            <p class="label color-#211F24">{{ item.label }}</p>
            <a-tooltip v-if="item.tooltip" :content="item.tooltip">
              <img :src="icon1" width="14" height="14" class="ml-4px" />
            </a-tooltip>
          </div>
          <span class="value color-#211F24 ml-32px">{{ formatNumberShow(overviewData[item.prop]) }}</span>
        </div>
      </div>
    </div>
    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px mb-16px">
      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
    </div>
    <div
      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
    >
      <AccountTable
        ref="accountTableRef"
        :dataSource="dataSource"
        :query="query"
        @selectionChange="handleSelectionChange"
        @export="handleExport"
        @sorterChange="handleSorterChange"
      />
      <div v-if="pageInfo.total > 0" class="pagination-box">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
          show-total
          show-jumper
          show-page-size
          :current="pageInfo.page"
          :page-size="pageInfo.page_size"
          @change="onPageChange"
          @page-size-change="onPageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';

import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
import { formatNumberShow } from '@/utils/tools';
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
import { downloadByUrl } from '@/utils/tools';

import icon1 from '@/assets/img/icon-question.png';

const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const overviewData = ref({});
const selectedRowKeys = ref([]);
const accountTableRef = ref(null);
const pageInfo = ref({
  page: 1,
  page_size: 20,
  total: 0,
});

const getOverviewData = async () => {
  const { code, data } = await getAccountBoardOverview();
  if (code === 200) {
    overviewData.value = data;
  }
};

const getData = async () => {
  const { page, page_size } = pageInfo.value;
  const { code, data } = await getAccountBoardList({
    ...query.value,
    page,
    page_size,
  });
  if (code === 200) {
    dataSource.value = data?.data ?? [];
    pageInfo.value.total = data.total;
  }
};

const onPageChange = (current) => {
  pageInfo.value.page = current;
  getData();
};

const onPageSizeChange = (pageSize) => {
  pageInfo.value.page_size = pageSize;
  reload();
};

const handleSearch = () => {
  reload();
};

const reload = () => {
  pageInfo.value.page = 1;
  getData();
};

const handleReset = () => {
  selectedRowKeys.value = [];
  pageInfo.value.page = 1;
  pageInfo.value.page_size = 20;
  pageInfo.value.total = 0;
  query.value = cloneDeep(INITIAL_QUERY);
  accountTableRef.value?.resetTable();
  reload();
};

const handleSelectionChange = (selectedRows) => {
  selectedRowKeys.value = selectedRows;
};

const handleExport = () => {
  postAccountBoardExport({
    ...query.value,
  }).then((res) => {
    const { code, data } = res;
    if (code === 200) {
      downloadByUrl(data.download_url);
    }
  });
};

const handleSorterChange = (column, order) => {
  query.value.column = column;
  query.value.order = order;
  reload();
};

onMounted(() => {
  getOverviewData();
  getData();
});
</script>

<style scoped lang="scss">
@import './style.scss';
</style>