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 border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
      <a-tabs v-model="activeTab" @tab-click="handleTabClick">
        <a-tab-pane :key="1" title="账户"></a-tab-pane>
        <a-tab-pane :key="2" title="项目"></a-tab-pane>
        <template v-if="!isAccountTab" #extra>
          <a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
            <template #icon>
              <img :src="icon2" width="16" height="16" />
            </template>
            <template #default>分组管理</template>
          </a-button>
        </template>
      </a-tabs>
      <FilterBlock ref="filterBlockRef" 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"
        :isAccountTab="isAccountTab"
        :dataSource="dataSource"
        @export="handleExport"
        @sorterChange="handleSorterChange"
        @selectionChange="handleSelectionChange"
      />
      <div class="pagination-box">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
          show-total
          show-jumper
          show-page-size
          :current="pageInfo.page"
          :page-size="pageInfo.pageSize"
          @change="onPageChange"
          @page-size-change="onPageSizeChange"
        />
      </div>
    </div>

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

<script setup>
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
import GroupManageModal from './components/group-manage-modal';
import { INITIAL_QUERY } from './constants';

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

const query = ref({});
const dataSource = ref([]);
const pageInfo = reactive({
  page: 1,
  pageSize: 20,
  total: 100,
});
const selectedRowKeys = ref([]);
const activeTab = ref(1);
const accountTableRef = ref(null);
const groupManageModalRef = ref(null);
const filterBlockRef = ref(null);

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

const mockData = [
  {
    id: 1,
    name: '抖音官方账号',
    mobile: '13800138001',
    account_id: 'douyin_001',
    holder_name: '张三',
    operator_id: 1,
    platform: 0,
    group_id: 1,
    status: 1,
    is_pause: 0,
    fans_number: 1250000,
    like_number: 890000,
    collect_number: 45000,
    view_number: 5600000,
    view_chain: 12.5,
    like_chain: 8.3,
    total_consumption: 1000000,
    balance: 1000000,
    roi: 1.2,
    roi_chain: -32.5,
    cpa: 1.2,
    cpa_chain: -32.5,
    conversion_number: 10000,
    conversion_chain: 12.5,
    conversion_rate: 1.2,
    conversion_rate_chain: -2.5,
    ai_evaluation: {
      status: 1,
      text: '表现优质 | 建议保持',
      look_chain: 12.5,
      like_chain: 8.3,
    },
    operator: {
      id: 1,
      name: '李运营',
    },
    group: {
      id: 1,
      name: '抖音组',
    },
  },
  {
    id: 2,
    name: '小红书美妆号',
    mobile: '13800138002',
    account_id: 'xhs_001',
    holder_name: '李四',
    operator_id: 2,
    platform: 1,
    group_id: 2,
    status: 1,
    is_pause: 1,
    fans_number: 890000,
    like_number: 670000,
    collect_number: 89000,
    view_number: 3200000,
    view_chain: -5.2,
    like_chain: 15.7,
    total_consumption: 1000000,
    balance: 1000000,
    roi: 1.2,
    roi_chain: 12.5,
    cpa: 1.2,
    cpa_chain: 22.5,
    conversion_number: 10000,
    conversion_chain: 12.5,
    conversion_rate: 1.2,
    conversion_rate_chain: -2.5,
    ai_evaluation: {
      status: 2,
      text: '表现中等 | 建议优化',
      look_chain: -12.5,
      like_chain: 8.3,
    },
    operator: {
      id: 2,
      name: '王运营',
    },
    group: {
      id: 2,
      name: '小红书组',
    },
  },
  {
    id: 3,
    name: '抖音美食号',
    mobile: '13800138003',
    account_id: 'douyin_002',
    holder_name: '王五',
    operator_id: 1,
    platform: 0,
    group_id: 1,
    status: 0,
    is_pause: 0,
    fans_number: 0,
    like_number: 0,
    collect_number: 0,
    view_number: 0,
    view_chain: 0,
    like_chain: 0,
    total_consumption: 1000000,
    balance: 1000000,
    roi: 32898,
    roi_chain: 12.5,
    cpa: 1.2,
    cpa_chain: -32.5,
    conversion_number: 10000,
    conversion_chain: 12.5,
    conversion_rate: 1.2,
    conversion_rate_chain: -2.5,
    ai_evaluation: {
      status: 3,
      text: '表现较差 | 建议整改',
      look_chain: -12.5,
      like_chain: -8.3,
    },
    operator: {
      id: 1,
      name: '李运营',
    },
    group: {
      id: 1,
      name: '抖音组',
    },
  },
];

const getData = () => {
  dataSource.value = mockData;
  pageInfo.total = mockData.length;
};

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

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

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

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

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

const handleSorterChange = (column, order) => {
  query.value.column = column;
  query.value.order = order;
  reload();
};
const handleSelectionChange = (selectedRows) => {
  selectedRowKeys.value = selectedRows;
  console.log('选中的账号:', selectedRowKeys.value);
};

const handleTabClick = (tab) => {
  activeTab.value = tab.key;
  handleReset();
};

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

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

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