lingji-work-fe/src/views/property-marketing/put-account/account-data/index.vue

<!--
 * @Author: RenXiaoDong
 * @Date: 2025-06-28 14:13:42
-->
<template>
  <div class="account-data-wrap">
    <div class="filter-wrap bg-#fff rounded-8px mb-16px">
      <Tabs v-model:activeKey="activeTab" @change="handleTabClick" size="large">
        <TabPane key="1" tab="账户"></TabPane>
        <TabPane key="2" tab="计划">
          <template v-if="!isAccountTab" #tab>
            计划
            <Button type="primary" ghost class="mr-12px flex items-center" @click="handleOpenGroupModal">
              <template #icon>
                <img :src="icon2" width="16" height="16" class="mr-8px" />
              </template>
              <template #default>分组管理</template>
            </Button>
          </template>
        </TabPane>
      </Tabs>
      <FilterBlock
        ref="filterBlockRef"
        v-model:query="query"
        :isAccountTab="isAccountTab"
        @onSearch="getData"
        @onReset="init"
      />
    </div>
    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
      <component
        :is="isAccountTab ? BoardTable : PlanTable"
        ref="accountTableRef"
        :dataSource="dataSource"
        @export="handleExport"
        @sorterChange="handleSorterChange"
        @selectionChange="handleSelectionChange"
      />
      <div v-if="pageInfo.total > 0" class="pagination-row">
        <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>

    <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
  </div>
</template>

<script setup>
import { Button, Tabs } from 'ant-design-vue';
const { TabPane } = Tabs;
import FilterBlock from './components/filter-block';
import BoardTable from './components/board-table';
import PlanTable from './components/plan-table';
import GroupManageModal from './components/group-manage-modal';

import {
  getPlacementAccountData,
  postPlacementAccountDataExport,
  getPlacementAccountDataList,
  postPlacementAccountDataListExport,
} from '@/api/all/propertyMarketing';

import { showExportNotification } from '@/utils/arcoD';
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
// import { downloadByUrl } from '@/utils/tools';

import icon2 from '@/assets/img/media-account/icon-group.png';

const selectedRowKeys = ref([]);
const activeTab = ref('1');
const accountTableRef = ref(null);
const groupManageModalRef = ref(null);
const filterBlockRef = ref(null);
const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));

const isAccountTab = computed(() => activeTab.value === '1');

const init = () => {
  query.value = cloneDeep(INITIAL_QUERY);
  dataSource.value = [];
  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
  selectedRowKeys.value = [];
  accountTableRef.value?.resetTable();

  const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
  const data_time = [yesterday, yesterday];
  query.value.data_time = data_time;

  getData();
};

const getData = async () => {
  const _fn = isAccountTab.value ? getPlacementAccountData : getPlacementAccountDataList;
  const { page, page_size } = pageInfo.value;
  const { code, data } = await _fn({
    ...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 reload = () => {
  pageInfo.value.page = 1;
  getData();
};

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

const handleTabClick = (key) => {
  dataSource.value = [];
  selectedRowKeys.value = [];
  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
  activeTab.value = key;
  getData();
};

const handleExport = () => {
  const _fn = isAccountTab.value ? postPlacementAccountDataExport : postPlacementAccountDataListExport;
  _fn({
    ...query.value,
  }).then((res) => {
    const { code, data } = res;
    if (code === 200) {
      showExportNotification(`正在下载“${data.name}”，请稍后...`);
    }
  });
};

const handleOpenGroupModal = () => {
  groupManageModalRef.value?.open();
};

onMounted(() => {
  init();
});
</script>

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