feat: 投放账户数据

src/views/property-marketing/put-account/account-data/components/board-table/index.vue

@@ -4,9 +4,17 @@
 -->
 <template>
   <div class="action-row mb-12px flex justify-between">
-    <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
-      >全选</a-checkbox
-    >
+    <div>
+      <a-checkbox
+        v-if="dataSource.length > 0"
+        :model-value="checkedAll"
+        :indeterminate="indeterminate"
+        class="!pl-13px"
+        @change="handleSelectAll"
+        >全选</a-checkbox
+      >
+    </div>
+
     <div class="flex items-center">
       <a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
         <template #icon> <icon-download /> </template>
@@ -35,6 +43,9 @@
     @select="handleSelect"
     @select-all="handleSelectAll"
   >
+    <template #empty>
+      <NoData />
+    </template>
     <template #columns>
       <a-table-column
         v-for="column in getColumns()"
@@ -77,7 +88,7 @@
               class="mr-8px icon"
             />
             <div>
-              <p class="cts">{{ record.ai_evaluation?.text }}</p>
+              <p class="cts">{{ record.ai_evaluation?.text || '-' }}</p>
               <p class="cts text-12px lh-20px !color-#939499">
                 {{ `ROI: ${record.ai_evaluation?.look_chain}%  CVR: ${record.ai_evaluation?.like_chain}%` }}
               </p>
@@ -119,7 +130,7 @@
     </template>
   </a-table>
 
-  <CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
+  <CustomTableColumnModal ref="modalRef" type="placement_account" @success="onCustomColumnSuccess" />
 </template>
 
 <script setup>
@@ -141,10 +152,6 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  isAccountTab: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
@@ -195,16 +202,12 @@ const handleExport = () => {
 };
 const getColumns = () => {
   const columns = cloneDeep(TABLE_COLUMNS);
-  // if (!props.isAccountTab) {
-  //   const _target = columns.find((item) => item.dataIndex === 'name');
-  //   _target.title = '项目名称';
-  // }
   return columns;
 };
 
 const resetTable = () => {
   selectedItems.value = [];
-  tableRef.value?.clearSorters();
+  // tableRef.value?.clearSorters();
 };
 
 const openCustomColumn = () => {

src/views/property-marketing/put-account/account-data/components/filter-block/index.vue

@@ -100,6 +100,7 @@ const handleReset = () => {
 };
 
 const getGroups = async () => {
+  console.log('getGroups');
   const { code, data } = await getPlacementAccountProjectGroupsList();
   if (code === 200) {
     groups.value = data;

src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue

@@ -81,8 +81,8 @@
       </div>
     </template>
 
-    <AddGroup ref="addGroupRef" @success="getData" />
-    <DeleteGroup ref="deleteGroupRef" @success="getData" />
+    <AddGroup ref="addGroupRef" @success="update" />
+    <DeleteGroup ref="deleteGroupRef" @success="update" />
   </a-modal>
 </template>
 
@@ -98,6 +98,7 @@ import icon1 from '@/assets/img/media-account/icon-delete.png';
 import icon2 from '@/assets/img/media-account/icon-empty.png';
 import icon3 from '@/assets/img/media-account/icon-add.png';
 
+const emit = defineEmits(['update']);
 const visible = ref(false);
 const addGroupRef = ref(null);
 const deleteGroupRef = ref(null);
@@ -133,7 +134,10 @@ const columns = [
   },
   { title: '操作', slotName: 'action', align: 'center', width: 120 },
 ];
-
+const update = () => {
+  getData();
+  emit('update');
+};
 function open() {
   visible.value = true;
   getData();

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

@@ -6,8 +6,8 @@
   <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>
+        <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>
@@ -17,20 +17,19 @@
           </a-button>
         </template>
       </a-tabs>
-      <FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
+      <FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="getData" @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
+      <BoardTable
         ref="accountTableRef"
-        :isAccountTab="isAccountTab"
         :dataSource="dataSource"
         @export="handleExport"
         @sorterChange="handleSorterChange"
         @selectionChange="handleSelectionChange"
       />
-      <div class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-box">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -45,190 +44,69 @@
       </div>
     </div>
 
-    <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups()" />
+    <GroupManageModal ref="groupManageModalRef" @update="() => filterBlockRef?.getGroups()" />
   </div>
 </template>
 
 <script setup>
 import FilterBlock from './components/filter-block';
-import AccountTable from './components/account-table';
+import BoardTable from './components/board-table';
 import GroupManageModal from './components/group-manage-modal';
+
+import {
+  getPlacementAccountData,
+  postPlacementAccountDataExport,
+  getPlacementAccountDataList,
+  postPlacementAccountDataListExport,
+} from '@/api/all/propertyMarketing';
+
 import { INITIAL_QUERY } from './constants';
 
 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({});
 const dataSource = ref([]);
-const pageInfo = reactive({
+const pageInfo = ref({
   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 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 getData = async () => {
+  const _fn = isAccountTab.value ? getPlacementAccountData : getPlacementAccountDataList;
+  const { code, data } = await _fn(query.value);
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data.total;
+  }
 };
 
 const onPageChange = (current) => {
-  pageInfo.page = current;
+  pageInfo.value.page = current;
   getData();
 };
 
 const onPageSizeChange = (pageSize) => {
-  pageInfo.pageSize = pageSize;
+  pageInfo.value.pageSize = pageSize;
   reload();
 };
 
-const handleSearch = () => {
-  getData();
-};
-
 const reload = () => {
-  pageInfo.page = 1;
+  pageInfo.value.page = 1;
   getData();
 };
 
 const handleReset = () => {
-  pageInfo.page = 1;
-  pageInfo.pageSize = 20;
-  pageInfo.total = 0;
+  pageInfo.value.page = 1;
+  pageInfo.value.pageSize = 20;
+  pageInfo.value.total = 0;
   selectedRowKeys.value = [];
   accountTableRef.value?.resetTable();
   query.value = cloneDeep(INITIAL_QUERY);
@@ -242,14 +120,25 @@ const handleSorterChange = (column, order) => {
 };
 const handleSelectionChange = (selectedRows) => {
   selectedRowKeys.value = selectedRows;
-  console.log('选中的账号:', selectedRowKeys.value);
 };
 
-const handleTabClick = (tab) => {
-  activeTab.value = tab.key;
+const handleTabClick = (key) => {
+  activeTab.value = key;
   handleReset();
 };
 
+const handleExport = () => {
+  const _fn = isAccountTab.value ? postPlacementAccountDataExport : postPlacementAccountDataListExport;
+  _fn({
+    ...query.value,
+  }).then((res) => {
+    const { code, data } = res;
+    if (code === 200) {
+      window.open(data.download_url, '_blank');
+    }
+  });
+};
+
 const handleOpenGroupModal = () => {
   groupManageModalRef.value?.open();
 };

src/views/property-marketing/put-account/account-manage/index.vue

@@ -105,7 +105,7 @@ const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
 const deleteAccountRef = ref(null);
 
-const pageInfo = reactive({
+const pageInfo = ref({
   page: 1,
   pageSize: 8,
   total: 0,
@@ -124,7 +124,7 @@ onMounted(() => {
 });
 
 const getData = async () => {
-  const { page, pageSize } = pageInfo;
+  const { page, pageSize } = pageInfo.value;
   const { code, data, total } = await getPlacementAccounts({
     page,
     page_size: pageSize,
@@ -132,31 +132,31 @@ const getData = async () => {
   });
   if (code === 200) {
     dataSource.value = data?.data ?? [];
-    pageInfo.total = data?.total ?? 0;
+    pageInfo.value.total = data?.total ?? 0;
   }
 };
 const reload = () => {
-  pageInfo.page = 1;
+  pageInfo.value.page = 1;
   getData();
 };
 const handleSearch = () => {
   getData();
 };
 const handleReset = () => {
-  pageInfo.page = 1;
-  pageInfo.pageSize = 20;
-  pageInfo.total = 0;
+  pageInfo.value.page = 1;
+  pageInfo.value.pageSize = 20;
+  pageInfo.value.total = 0;
   selectedItems.value = [];
   query.value = cloneDeep(INITIAL_QUERY);
   reload();
 };
 
 const onPageChange = (current) => {
-  pageInfo.page = current;
+  pageInfo.value.page = current;
   getData();
 };
 const onPageSizeChange = (pageSize) => {
-  pageInfo.pageSize = pageSize;
+  pageInfo.value.pageSize = pageSize;
   reload();
 };