-
-
-
-
+
@@ -127,7 +134,12 @@ import { ref, provide } from 'vue';
import { Checkbox, Button, Pagination, notification, RadioButton, RadioGroup } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
-import AccountTable from './components/account-table/card.vue';
+import Card from './components/account-table/card.vue';
+import Table from './components/account-table/table.vue';
+import PauseAccountPatchModal from './components/account-table/pause-account-patch.vue';
+import AuthorizedAccountModal from './components/authorized-account-modal';
+import ReauthorizeAccountModal from './components/reauthorize-account-modal';
+
import GroupManageModal from './components/group-manage-modal';
import TagsManageModal from './components/tags-manage-modal';
import AddAccountModal from './components/add-account-modal';
@@ -135,10 +147,14 @@ import DeleteAccountModal from './components/account-table/delete-account';
import BatchTagModal from './components/batch-tag-modal';
import BatchGroupModal from './components/batch-group-modal';
-import { INITIAL_QUERY, INITIAL_PAGE_INFO, SHOW_TYPES } from './constants';
+import { INITIAL_QUERY, SHOW_TYPES, TABLE_COLUMNS } from './constants';
import { showImportResultNotification } from '@/utils/notification';
import { getTaskStatus } from '@/api/all/common';
-import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import {
+ EnumErrorStatus,
+ EnumStatus,
+} from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
import {
getMediaAccounts,
getMediaAccountsHealth,
@@ -156,6 +172,21 @@ import icon5 from '@/assets/img/media-account/icon-warn.png';
let syncDataTimer = null;
let queryTaskTimer = null;
+const {
+ selectedRowKeys,
+ selectedRows,
+ dataSource,
+ pageInfo,
+ DEFAULT_PAGE_INFO,
+ onPageChange,
+ handleSelect,
+ handleSelectAll,
+} = useTableSelectionWithPagination({
+ onPageChange: () => {
+ getData();
+ },
+});
+
const groupManageModalRef = ref(null);
const tagsManageModalRef = ref(null);
const addAccountModalRef = ref(null);
@@ -163,10 +194,12 @@ const deleteAccountRef = ref(null);
const batchTagModalRef = ref(null);
const batchGroupModalRef = ref(null);
const filterBlockRef = ref(null);
+const pauseAccountPatchModalRef = ref(null);
+const reauthorizeAccountModalRef = ref(null);
+const authorizedAccountModalRef = ref(null);
-const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const query = ref(cloneDeep(INITIAL_QUERY));
-const dataSource = ref([]);
+// const dataSource = ref([]);
const selectedItems = ref([]);
const healthData = ref({});
const syncMediaAccounts = ref([]);
@@ -174,13 +207,11 @@ const isLoadingTaskStatus = ref(false); // 正在查询状态中
const showType = ref('card');
const hasAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
-const isDisabledBatchSyncData = computed(() => selectedItems.value.some((item) => item.status !== EnumStatus.NORMAL));
+const isDisabledBatchSyncData = computed(() => selectedRows.value.some((item) => item.status !== EnumStatus.NORMAL));
-const checkedAll = computed(
- () => dataSource.value.length > 0 && selectedItems.value.length === dataSource.value.length,
-);
+const checkedAll = computed(() => dataSource.value.length > 0 && selectedRows.value.length === dataSource.value.length);
const indeterminate = computed(
- () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
+ () => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
);
const tipLabel = computed(() => {
@@ -223,10 +254,10 @@ const getHealthData = async () => {
}
};
const getAccountData = async () => {
- const { page, pageSize } = pageInfo.value;
+ const { page, page_size } = pageInfo.value;
const { code, data } = await getMediaAccounts({
page,
- page_size: pageSize,
+ page_size,
...query.value,
});
if (code === 200) {
@@ -242,23 +273,13 @@ const handleSearch = () => {
reload();
};
const handleReset = () => {
- pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
- selectedItems.value = [];
+ pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
+ selectedRows.value = [];
+ selectedRowKeys.value = [];
query.value = cloneDeep(INITIAL_QUERY);
reload();
};
-const onPageChange = (current, pageSize) => {
- pageInfo.value.page = current;
- pageInfo.value.pageSize = pageSize;
-
- getData();
-};
-const onPageSizeChange = (pageSize) => {
- pageInfo.value.pageSize = pageSize;
- reload();
-};
-
const handleOpenGroupModal = () => {
groupManageModalRef.value?.open();
};
@@ -273,15 +294,9 @@ const handleOpenEdit = (item) => {
addAccountModalRef.value?.open(item.id);
};
-const handleSelectionChange = (val) => {
- selectedItems.value = val;
-};
-const handleChangeAll = (checked) => {
- selectedItems.value = checked ? cloneDeep(dataSource.value) : [];
-};
const handleBatchDelete = () => {
- const ids = selectedItems.value.map((item) => item.id);
- const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
+ const ids = selectedRows.value.map((item) => item.id);
+ const names = selectedRows.value.map((item) => `"${item.name || '-'}"`).join('，');
deleteAccountRef.value?.open({ id: ids, name: names });
};
const handleDelete = (item) => {
@@ -330,14 +345,14 @@ const handleSyncData = async (item) => {
};
const handleBatchTag = () => {
- batchTagModalRef.value?.open(selectedItems.value);
+ batchTagModalRef.value?.open(selectedRows.value);
};
const handleBatchSyncData = async () => {
if (isDisabledBatchSyncData.value) {
return;
}
- const ids = selectedItems.value.map((item) => item.id);
+ const ids = selectedRows.value.map((item) => item.id);
const { code } = await postBatchSyncMediaAccountData({ ids });
if (code === 200) {
if (!isLoadingTaskStatus.value) {
@@ -346,10 +361,11 @@ const handleBatchSyncData = async () => {
}
};
const handleBatchGroup = () => {
- batchGroupModalRef.value?.open(selectedItems.value);
+ batchGroupModalRef.value?.open(selectedRows.value);
};
const onBatchSuccess = () => {
- selectedItems.value = [];
+ selectedRowKeys.value = [];
+ selectedRows.value = [];
getData();
};
const handleOpenAbnormalAccount = () => {
@@ -357,6 +373,23 @@ const handleOpenAbnormalAccount = () => {
reload();
};
+const isUnauthorizedStatus = (error_status) => {
+ return [EnumErrorStatus.UNAUTHORIZED].includes(error_status);
+};
+
+const handlePause = (item) => {
+ pauseAccountPatchModalRef.value?.open(item);
+};
+const handleReauthorize = (item) => {
+ const { id, platform, error_status } = item;
+ const isUnauthorized = isUnauthorizedStatus(error_status);
+ if (isUnauthorized) {
+ authorizedAccountModalRef.value?.open(id, platform);
+ } else {
+ reauthorizeAccountModalRef.value?.open(id, platform);
+ }
+};
+
// 查询导入账号任务状态
const getSyncTaskStatus = async (id, notificationId) => {
const { code, data } = await getTaskStatus(id);