renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feature/0710_下载中心_rxd

Browse Source
This commit is contained in:
rd
2025-07-17 15:28:41 +08:00
parent d30be4dc93 817b3bd174
commit 744fbffef5
28 changed files with 857 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
View File

@ -8,14 +8,11 @@
<span class="cts !text-18px !lh-26px title">账号信息</span>
</div>
<div class="account-info-box">
<div
v-for="(row, rowIdx) in getAccountInfoFields(dateType, showMore)"
:key="rowIdx"
class="grid grid-cols-4 mb-24px"
>
<div class="grid grid-cols-4">
<div
v-for="(field, colIdx) in row"
v-for="(field, colIdx) in getAccountInfoFields(dateType, showMore)"
:key="colIdx"
class="mb-24px"
:class="field.dataIndex === 'ai_evaluation' ? 'col-span-2' : ''"
>
<template v-if="field.dataIndex === 'ai_evaluation'">
@ -62,6 +59,28 @@
}}</span>
</div>
</template>
<template v-else-if="field.dataIndex === 'tags'">
<div v-if="detailData.tags?.length" class="flex items-center">
<div v-for="(tag, index) in detailData.tags.slice(0, 2)" :key="index" class="tag-box">
<span class="text">{{ tag.name }}</span>
</div>
<a-tooltip
v-if="detailData.tags.length > 2"
position="top"
:content="
detailData.tags
.slice(2)
.map((v) => v.name)
.join(',')
"
>
<div class="tag-box">
<span class="text">{{ `+${detailData.tags.length - 2}` }}</span>
</div>
</a-tooltip>
</div>
<span class="cts" v-else>-</span>
</template>
<template v-else-if="field.dataIndex === 'like_collect_number'">
{{
formatNumberShow({
@ -72,6 +91,12 @@
})
}}
</template>
<template v-else-if="field.dataIndex === 'platform'">
<img :src="detailData.platform === 0 ? icon5 : icon6" width="16" height="16" />
</template>
<template v-else-if="field.dataIndex === 'last_synced_at'">
{{ exactFormatTime(detailData.last_synced_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss') }}
</template>
<!-- 环比字段特殊渲染 -->
<template v-else-if="field.isRateField">
<div
@ -83,6 +108,9 @@
{{ `${detailData[field.dataIndex]}%` }}
</div>
</template>
<template v-else-if="field.dataIndex === 'id'">
{{ detailData.id }}
</template>
<template v-else>
{{ formatTableField(field, detailData, true) }}
</template>
@ -108,7 +136,7 @@
<script setup>
import { useRoute } from 'vue-router';
import { formatTableField, formatNumberShow } from '@/utils/tools';
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
import { getAccountInfoFields } from '../../constants';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
@ -119,10 +147,13 @@ import icon1 from '@/assets/img/media-account/icon5.png';
import icon2 from '@/assets/img/media-account/icon-warn.png';
import icon3 from '@/assets/img/media-account/icon-warn-1.png';
import icon4 from '@/assets/img/media-account/icon-success.png';
import icon5 from '@/assets/img/media-account/icon-dy.png';
import icon6 from '@/assets/img/media-account/icon-xhs.png';
const route = useRoute();
const id = route.params.id;
const dateType = route.query.type;
const dateType = route.query.type ?? 'week';
const detailData = ref({});
const showMore = ref(false);

26
src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
View File

@ -1,4 +1,9 @@
.account-info-wrap {
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
position: relative;
.status-tag {
width: fit-content;
@ -38,4 +43,25 @@
}
}
}
.tag-box {
display: flex;
height: 20px;
padding: 0px 4px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
max-width: 100px;
.text {
@include ellipsis();
color: var(--Text-2, #3c4043);
font-family: $font-family-medium;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&:not(:last-child) {
margin-right: 4px;
}
}
}

16
src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
View File

@ -70,12 +70,12 @@ export const TABLE_COLUMNS = [
align: 'right',
},
{
title: '封面点击率',
dataIndex: 'cover_click_rate',
width: 180,
tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
align: 'right',
suffix: '%',
},
// {
// title: '封面点击率',
// dataIndex: 'cover_click_rate',
// width: 180,
// tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
// align: 'right',
// suffix: '%',
// },
];

5
src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
View File

@ -87,6 +87,9 @@
<template v-if="column.dataIndex === 'published_at'">
{{ exactFormatTime(record.published_at) }}
</template>
<template v-else-if="column.dataIndex === 'exposure_number'">
{{ formatNumberShow({ value: record.view_number * 10, showExactValue: true }) }}
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
@ -113,7 +116,7 @@
<script setup>
import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { useRoute } from 'vue-router';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';
import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
const route = useRoute();

65
src/views/property-marketing/media-account/account-detail/constants.ts
View File

@ -4,50 +4,47 @@
*/
import { CUSTOM_FIELDS, getPropPrefix } from '@/views/property-marketing/media-account/common_constants';
// 不足4个。就补两个null进去
export function groupArrayBySize<T extends { dataIndex: string; prop: string; title: string; tooltip: string }>(
fields: T[],
groupSize = 4,
dateType: string,
): T[][] {
const result: T[][] = [];
for (let i = 0; i < fields.length; i += groupSize) {
result.push(fields.slice(i, i + groupSize));
}
export function groupFieldsWithColSpan<
T extends { dataIndex: string; prop?: string; title: string; tooltip?: string; notDifferentiateDateType?: boolean },
>(fields: T[], dateType: string): (T & { colSpan: number })[] {
const labelPrefix = dateType === 'week' ? '近7天' : '近30天';
return result.map((item) => {
return item.map((item) => {
return fields.map((item) => {
const newItem = { ...item, colSpan: item.dataIndex === 'ai_evaluation' ? 2 : 1 };
if (item.notDifferentiateDateType) {
return newItem;
} else {
return {
...item,
...newItem,
dataIndex: `${getPropPrefix(dateType)}${item.dataIndex}`,
prop: `${getPropPrefix(dateType)}${item.prop}`,
title: `${labelPrefix}${item.title}`,
tooltip: `${labelPrefix}${item.tooltip}`,
tooltip: `${labelPrefix}${item.tooltip}`
};
});
}
});
}
export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
const baseFields = [
[
{ title: '账号名称', dataIndex: 'name' },
{ title: '项目分组', dataIndex: 'group.name' },
{ title: '状态', dataIndex: 'status', type: 'status' },
{ title: '运营人员', dataIndex: 'operator.name' },
],
[
{ title: 'AI评价', dataIndex: 'ai_evaluation' },
{ title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。' },
{
title: '总赞藏数',
dataIndex: 'like_collect_number',
tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
},
],
{ title: '账号名称', dataIndex: 'name', notDifferentiateDateType: true },
{ title: '数据更新时间', dataIndex: 'last_synced_at', notDifferentiateDateType: true },
{ title: '平台', dataIndex: 'platform', notDifferentiateDateType: true },
{ title: '状态', dataIndex: 'status', type: 'status', notDifferentiateDateType: true },
{ title: '账户ID', dataIndex: 'id', notDifferentiateDateType: true },
{ title: '手机号码', dataIndex: 'mobile', notDifferentiateDateType: true },
{ title: '运营人员', dataIndex: 'operator.name', notDifferentiateDateType: true },
{ title: '所属项目', dataIndex: 'group.name', notDifferentiateDateType: true },
{ title: '分组', dataIndex: 'group.name', notDifferentiateDateType: true },
{ title: '标签', dataIndex: 'tags', notDifferentiateDateType: true },
{ title: 'AI评价', dataIndex: 'ai_evaluation', notDifferentiateDateType: true },
{ title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。', notDifferentiateDateType: true },
{
title: '总赞藏数',
notDifferentiateDateType: true,
dataIndex: 'like_collect_number',
tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
},
];
const customFields = groupArrayBySize(CUSTOM_FIELDS, 4, dateType);
return showMore ? [...baseFields, ...customFields] : [...baseFields];
const allFields = showMore ? [...baseFields, ...CUSTOM_FIELDS] : baseFields.slice(0,8);
return groupFieldsWithColSpan(allFields, dateType);
};

2
src/views/property-marketing/media-account/account-detail/index.vue
View File

@ -21,7 +21,7 @@ import { useRouter } from 'vue-router';
const router = useRouter();
const handleBack = () => {
router.push('/media-account/dashboard');
router.go(-1);
};
</script>

107
src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
View File

@ -4,21 +4,34 @@
-->
<template>
<div class="card-container">
<div
<a-spin
v-for="(item, index) in dataSource"
:key="index"
:loading="isSyncing(item)"
tip="更新数据中..."
class="card-item"
:class="{
checked: isSelected(item),
}"
>
<template #icon>
<icon-sync size="24" />
</template>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<div class="ml-8px flex-1">
<p class="name">{{ item.name || '-' }}</p>
<a-tooltip content="点击查看账号详情">
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
</a-tooltip>
<div class="field-row">
<span class="label">状态</span>
<StatusBox :status="item.status" />
</div>
<div class="field-row">
<span class="label">数据更新时间</span>
<span class="cts num">{{
exactFormatTime(item.last_synced_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss')
}}</span>
</div>
<div class="field-row">
<span class="label">平台</span>
<img :src="item.platform === 0 ? icon1 : icon2" width="16" height="16" />
@ -70,6 +83,9 @@
</a-button>
<template #content>
<a-doption class="color-#211F24" @click="openEdit(item)">编辑</a-doption>
<a-doption v-if="item.status === EnumStatus.NORMAL" class="color-#211F24" @click="handleReauthorize(item)"
>重新授权</a-doption
>
<a-doption v-if="showPauseButton(item.status)" class="color-#211F24" @click="handlePause(item)"
>暂停同步</a-doption
>
@ -79,33 +95,19 @@
<template #default>{{ getBtnText(item) }}</template>
</a-button>
</a-dropdown>
<!-- <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
<a-button
v-if="showPauseButton(item.status)"
class="w-64px search-btn mr-8px"
size="mini"
@click="handlePause(item)"
>
<template #default>暂停同步</template>
</a-button>
<a-tooltip v-if="isAbnormalStatus(item.status)" :content="getTooltipText(item.status)">
<a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
<template #default>重新授权</template>
</a-button>
</a-tooltip>
<template v-else>
<a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
<template #default>{{ isUnauthorizedStatus(item.status) ? '去授权' : '重新授权' }}</template>
</a-button>
</template>
<a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
<template #default>编辑</template>
</a-button> -->
</div>
</div>
</div>
<div v-if="item.status === 2" class="mask">
<div class="flex items-center mb-16px box">
<img :src="icon3" width="16" height="16" class="mr-8px" />
<span class="name !mb-0">更新数据失败</span>
</div>
<div class="flex items-center">
<a-button class="search-btn mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
<a-button class="search-btn" size="mini" @click="syncData(item)">重新更新</a-button>
</div>
</div>
</a-spin>
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
<ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@ -113,8 +115,11 @@
</template>
<script setup>
import { defineProps, ref, computed } from 'vue';
import { defineProps, ref, computed, inject } from 'vue';
import { useRouter } from 'vue-router';
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
import PauseAccountPatchModal from './pause-account-patch';
import StatusBox from '../status-box';
@ -123,6 +128,7 @@ import AuthorizedAccountModal from '../authorized-account-modal';
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon3 from '@/assets/img/media-account/icon-warn.png';
// import icon3 from '@/assets/img/media-account/icon-delete.png';
const props = defineProps({
@ -130,6 +136,10 @@ const props = defineProps({
type: Array,
default: () => [],
},
syncMediaAccounts: {
type: Array,
default: () => [],
},
selectedItems: {
type: Array,
default: () => [],
@ -138,6 +148,8 @@ const props = defineProps({
const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
const router = useRouter();
const pauseAccountPatchModalRef = ref(null);
const reauthorizeAccountModalRef = ref(null);
const authorizedAccountModalRef = ref(null);
@ -156,6 +168,12 @@ const toggleSelect = (item) => {
}
emits('selectionChange', newSelected);
};
const isSyncing = (item) => {
if (!props.syncMediaAccounts.length) return false;
const target = props.syncMediaAccounts.find((v) => v.id === item.id);
return target?.status === 0;
};
const openEdit = (item) => {
emits('openEdit', item);
@ -166,7 +184,6 @@ const openDelete = (item) => {
};
const handleReauthorize = (item) => {
console.log({ item });
const { id, platform, status } = item;
const isUnauthorized = isUnauthorizedStatus(status);
if (isUnauthorized) {
@ -183,6 +200,9 @@ const handlePause = (item) => {
const showPauseButton = (status) => {
return ![EnumStatus.PAUSE, EnumStatus.UNAUTHORIZED].includes(status);
};
const showSyncDataButton = (status) => {
return [EnumStatus.NORMAL, EnumStatus.ABNORMAL_MISSING].includes(status);
};
const isUnauthorizedStatus = (status) => {
return [EnumStatus.UNAUTHORIZED].includes(status);
};
@ -197,17 +217,23 @@ const isAbnormalStatus = (status) => {
].includes(status);
};
const getTooltipText = (status) => {
return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
};
// const getTooltipText = (status) => {
// return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
// };
const syncData = inject('handleSyncData');
const onBtnClick = (item) => {
if (showSyncDataButton(item.status)) {
syncData(item);
return;
}
if (isUnauthorizedStatus(item.status)) {
handleReauthorize(item);
return;
}
if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
if ([EnumStatus.PAUSE].includes(item.status) || isAbnormalStatus(item.status)) {
handleReauthorize(item);
return;
}
@ -216,16 +242,29 @@ const onBtnClick = (item) => {
};
const getBtnText = (item) => {
if (showSyncDataButton(item.status)) {
return '更新数据';
}
if (isUnauthorizedStatus(item.status)) {
return '去授权';
}
if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
if ([EnumStatus.PAUSE].includes(item.status) || isAbnormalStatus(item.status)) {
return '重新授权';
}
return '暂停同步';
};
const goDetail = (item) => {
router.push(`/media-account/detail/${item.id}`);
};
const onDeleteSyncStatus = async (item) => {
await deleteSyncStatus(item.id);
item.status = 1;
};
</script>
<style scoped lang="scss">

23
src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
View File

@ -17,6 +17,7 @@
padding: 12px 16px 16px;
display: flex;
align-items: flex-start;
position: relative;
.name {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;
@ -24,6 +25,7 @@
font-style: normal;
font-weight: 400;
margin-bottom: 11px;
width: fit-content;
// line-height: 22px; /* 157.143% */
}
.label {
@ -78,6 +80,23 @@
margin-bottom: 8px;
}
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.name {
font-family: $font-family-regular;
}
}
.operate-row {
display: flex;
@ -85,8 +104,8 @@
justify-content: flex-end;
padding-top: 8px;
}
&.checked {
border: 1px solid var(--Brand-6, #6D4CFE);
&.checked {
border: 1px solid var(--Brand-6, #6d4cfe);
}
}
}

769
src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
View File

@ -2,176 +2,36 @@
* @Author: RenXiaoDong
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
:title="isEdit ? '编辑账号' : '添加账号'"
modal-class="add-account-modal"
width="500px"
:mask-closable="false"
@close="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item v-if="!isEdit" label="上传方式" required>
<a-radio-group v-model="uploadType">
<a-radio value="manual">手动添加账号</a-radio>
<a-radio value="batch">批量导入账号</a-radio>
</a-radio-group>
</a-form-item>
<!-- 批量导入账号模式下的内容 -->
<template v-if="isBatchImport">
<a-form-item label="账户文件" required>
<!-- 默认状态 -->
<div class="upload-block">
<template v-if="uploadStatus === UploadStatus.DEFAULT">
<a-upload
ref="uploadRef"
action="/"
draggable
:custom-request="handleUpload"
accept=".xlsx,.xls"
:show-file-list="false"
>
<template #upload-button>
<div class="upload-box">
<icon-plus size="14" class="mb-16px" />
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
</template>
</a-upload>
</template>
<template v-else>
<div class="flex items-center">
<div
class="flex items-center justify-between py-9px px-12px flex-1 import-row"
:class="{
error: uploadStatus === UploadStatus.ERROR,
}"
>
<div class="flex items-center">
<icon-file size="16" class="flex-shrink-0" />
<span class="name ml-8px">{{ fileName }}</span>
</div>
<span
v-if="uploadStatus === UploadStatus.ERROR"
class="upload-error flex-shrink-0"
@click="handleBatchImport"
>
点击重试
</span>
</div>
<img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
</div>
</template>
<div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
<img :src="icon1" width="16" height="16" class="mr-4px" />
<span class="dt">下载账户导入模板.xlsx</span>
</div>
</div>
</a-form-item>
</template>
<!-- 手动添加账号 -->
<template v-else>
<template v-if="isEdit">
<a-form-item label="账号名称" field="name">
<a-input v-model="form.name" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="账号ID" field="account_id">
<a-input v-model="form.account_id" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="状态" field="status">
<StatusBox :status="form.status" />
</a-form-item>
</template>
<a-form-item label="手机号码" field="mobile" required>
<a-input v-model="form.mobile" placeholder="请输入..." size="large" />
</a-form-item>
<a-form-item label="运营人员" field="operator_name" required>
<a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
</a-form-item>
<a-form-item label="运营平台" :required="!isEdit">
<img v-if="isEdit" :src="form.platform === 0 ? icon3 : icon4" width="24" height="24" />
<a-radio-group v-else v-model="form.platform">
<a-radio :value="0">抖音</a-radio>
<a-radio :value="1">小红书</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="号码持有人" field="holder_name">
<a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
</a-form-item>
<a-form-item label="选择分组">
<GroupSelect
v-model="form.group_id"
:multiple="false"
:options="groupOptions"
placeholder="请选择…"
size="large"
/>
</a-form-item>
<a-form-item label="选择标签">
<TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
</a-form-item>
<a-form-item label="笔记链接" field="end_work_link">
<template #label>
<span class="label">笔记链接</span>
<a-tooltip content="平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集">
<icon-question-circle size="14" class="ml-4px color-#737478" />
</a-tooltip>
</template>
<a-textarea
v-model="form.end_work_link"
placeholder="请输入..."
size="large"
max-length="72"
:auto-size="{ minRows: 3, maxRows: 5 }"
/>
</a-form-item>
<template v-if="!isEdit">
<a-form-item label="Cookie值">
<template #label>
<span class="label">Cookie值</span>
<a-tooltip content="开启后可直接填写 Cookie，无需扫码授权">
<icon-question-circle size="14" class="ml-4px color-#737478" />
</a-tooltip>
</template>
<a-switch v-model="isCustomCookie" size="large" />
</a-form-item>
<a-form-item v-if="isCustomCookie" label="" field="cookie">
<a-textarea
v-model="form.cookie"
placeholder="请输入..."
size="large"
max-length="72"
:auto-size="{ minRows: 3, maxRows: 5 }"
/>
</a-form-item>
</template>
</template>
</a-form>
<template #footer>
<a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">
{{ confirmBtnText }}
</a-button>
</template>
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
<ImportPromptModal ref="importPromptModalRef" />
</a-modal>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
<script lang="jsx">
import { ref, computed } from 'vue';
import {
Modal,
Form,
FormItem,
Input,
RadioGroup,
Radio,
Upload,
Button,
Switch,
Tooltip,
Notification,
Message as AMessage,
Textarea,
} from '@arco-design/web-vue';
import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
import AuthorizedAccountModal from '../authorized-account-modal';
import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '../status-box';
import SyncDataModal from '../sync-data-modal';
import icon1 from '@/assets/img/media-account/icon-download.png';
import icon2 from '@/assets/img/media-account/icon-delete.png';
import icon3 from '@/assets/img/media-account/icon-dy.png';
import icon4 from '@/assets/img/media-account/icon-xhs.png';
import icon5 from '@/assets/img/media-account/icon-warn-1.png';
import icon6 from '@/assets/img/media-account/icon-success.png';
import {
fetchAccountTags,
fetchAccountGroups,
@ -182,13 +42,6 @@ import {
batchMediaAccounts,
} from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-download.png';
import icon2 from '@/assets/img/media-account/icon-delete.png';
import icon3 from '@/assets/img/media-account/icon-dy.png';
import icon4 from '@/assets/img/media-account/icon-xhs.png';
const emits = defineEmits(['update']);
const UploadStatus = {
DEFAULT: 'default',
WAITING: 'waiting',
@ -198,201 +51,413 @@ const INITIAL_FORM = {
mobile: '',
operator_name: '',
holder_name: '',
platform: 0,
platform: 1,
group_id: undefined,
tag_ids: [],
end_work_link: undefined,
cookie: undefined,
};
const groupOptions = ref([]);
const tagOptions = ref([]);
const visible = ref(false);
const uploadType = ref('manual');
const uploadStatus = ref(UploadStatus.DEFAULT);
const id = ref('');
const isEdit = ref(false);
const fileName = ref('');
const formRef = ref();
const file = ref(null);
const authorizedAccountModalRef = ref(null);
const importPromptModalRef = ref(null);
const uploadRef = ref(null);
const isCustomCookie = ref(false);
const form = ref(cloneDeep(INITIAL_FORM));
export default {
setup(props, { emit, expose }) {
const groupOptions = ref([]);
const tagOptions = ref([]);
const visible = ref(false);
const uploadType = ref('manual');
const uploadStatus = ref(UploadStatus.DEFAULT);
const id = ref('');
const isEdit = ref(false);
const fileName = ref('');
const formRef = ref();
const file = ref(null);
const authorizedAccountModalRef = ref(null);
const importPromptModalRef = ref(null);
const uploadRef = ref(null);
const isCustomCookie = ref(false);
const form = ref({ ...INITIAL_FORM });
const syncDataModalRef = ref(null);
const importLoading = ref(false);
const CustomNotificationVisible = ref(false);
const rules = {
mobile: [
{
required: true,
message: '请填写手机号',
trigger: ['blur', 'change'],
},
{
validator: (value, callback) => {
if (!/^1[3-9]\d{9}$/.test(value)) {
callback('手机号格式不正确');
} else {
callback();
}
},
trigger: ['blur', 'change'],
},
],
operator_name: [{ required: true, message: '请输入运营人员' }],
// holder_name: [{ required: true, message: '请输入号码持有人' }],
};
const isBatchImport = computed(() => uploadType.value === 'batch');
const confirmBtnText = computed(() => {
if (isBatchImport.value) return '确定导入';
return isEdit.value ? '确定' : '生成授权码';
});
// 获取分组数据
const getGroups = async () => {
const { code, data } = await fetchAccountGroups();
if (code === 200) {
groupOptions.value = data;
}
};
// 获取标签数据
const getTags = async () => {
const { code, data } = await fetchAccountTags();
if (code === 200) {
tagOptions.value = data;
}
};
function handleUpload(option) {
const { fileItem } = option;
uploadStatus.value = UploadStatus.WAITING;
file.value = fileItem.file;
fileName.value = fileItem.name;
}
function removeFile() {
fileName.value = '';
file.value = null;
uploadStatus.value = UploadStatus.DEFAULT;
}
const reset = () => {
formRef.value.resetFields();
formRef.value.clearValidate();
form.value = cloneDeep(INITIAL_FORM);
fileName.value = '';
file.value = null;
isEdit.value = false;
isCustomCookie.value = false;
uploadStatus.value = UploadStatus.DEFAULT;
uploadType.value = 'manual';
};
const onClose = () => {
reset();
visible.value = false;
};
const open = (accountId = '') => {
id.value = accountId;
isEdit.value = !!accountId;
if (accountId) {
getAccountDetail();
}
getGroups();
getTags();
visible.value = true;
};
const getAccountDetail = async () => {
const { code, data } = await getMediaAccountsDetail(id.value);
if (code === 200) {
form.value = {
...data,
group_id: data.group_id === 0 ? undefined : data.group_id,
const rules = {
mobile: [
{
required: true,
message: '请填写手机号',
trigger: ['blur', 'change'],
},
{
validator: (value, callback) => {
if (!/^1[3-9]\d{9}$/.test(value)) {
callback('手机号格式不正确');
} else {
callback();
}
},
trigger: ['blur', 'change'],
},
],
operator_name: [{ required: true, message: '请输入运营人员' }],
};
}
};
const handleBatchImport = async () => {
try {
const formData = new FormData();
formData.append('file', file.value);
const { code } = await batchMediaAccounts(formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
const isBatchImport = computed(() => uploadType.value === 'batch');
const confirmBtnText = computed(() => {
if (isBatchImport.value) {
return importLoading.value ? '导入中' : '确定导入';
} else if (isEdit.value) {
return '确定';
} else {
return isCustomCookie.value ? '确认添加' : '生成授权码';
}
});
if (code === 200) {
AMessage.success('导入成功');
emits('update');
onClose();
importPromptModalRef.value.open();
} else {
uploadStatus.value = UploadStatus.ERROR;
const getGroups = async () => {
const { code, data } = await fetchAccountGroups();
if (code === 200) {
groupOptions.value = data;
}
};
const getTags = async () => {
const { code, data } = await fetchAccountTags();
if (code === 200) {
tagOptions.value = data;
}
};
function handleUpload(option) {
const { fileItem } = option;
uploadStatus.value = UploadStatus.WAITING;
file.value = fileItem.file;
fileName.value = fileItem.name;
}
} catch (error) {
uploadStatus.value = UploadStatus.ERROR;
}
};
const handleAddAccount = async () => {
const _isCustomCookie = isCustomCookie.value;
const { code, data } = await postMediaAccounts({
...form.value,
cookie: _isCustomCookie ? form.value.cookie : undefined,
});
if (code === 200) {
emits('update');
onClose();
const { id, platform } = data;
!_isCustomCookie && startAuthorized(id, platform);
}
};
const handleEditAccount = async () => {
const { code } = await putMediaAccounts({ id: id.value, ...form.value });
if (code === 200) {
AMessage.success('修改成功');
emits('update');
onClose();
}
};
async function onSubmit() {
if (isBatchImport.value) {
handleBatchImport();
return;
}
formRef.value.validate(async (errors) => {
if (!errors) {
isEdit.value ? handleEditAccount() : handleAddAccount();
function removeFile() {
fileName.value = '';
file.value = null;
uploadStatus.value = UploadStatus.DEFAULT;
}
});
}
const reset = () => {
formRef.value?.resetFields();
formRef.value?.clearValidate();
form.value = { ...INITIAL_FORM };
fileName.value = '';
file.value = null;
isEdit.value = false;
importLoading.value = false;
isCustomCookie.value = false;
uploadStatus.value = UploadStatus.DEFAULT;
uploadType.value = 'manual';
};
const onClose = () => {
reset();
visible.value = false;
};
const open = (accountId = '') => {
id.value = accountId;
isEdit.value = !!accountId;
if (accountId) {
getAccountDetail();
}
getGroups();
getTags();
visible.value = true;
};
const getAccountDetail = async () => {
const { code, data } = await getMediaAccountsDetail(id.value);
if (code === 200) {
form.value = {
...data,
group_id: data.group_id === 0 ? undefined : data.group_id,
};
}
};
const handleBatchImport = async () => {
try {
if (!file.value) {
AMessage.warning('请上传要导入的文件');
return;
}
importLoading.value = true;
const formData = new FormData();
formData.append('file', file.value);
const { code } = await batchMediaAccounts(formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
if (code === 200) {
AMessage.success('导入成功');
emit('update');
onClose();
const startAuthorized = (id, platform) => {
authorizedAccountModalRef.value.open(id, platform);
// const ID = 'IMPORT-ACCOUNT';
// renderNotification(ID);
importPromptModalRef.value.open();
} else {
uploadStatus.value = UploadStatus.ERROR;
}
} catch (error) {
uploadStatus.value = UploadStatus.ERROR;
}
};
const handleAddAccount = async () => {
const _isCustomCookie = isCustomCookie.value;
const { code, data } = await postMediaAccounts({
...form.value,
cookie: _isCustomCookie ? form.value.cookie : undefined,
});
if (code === 200) {
emit('update');
onClose();
const { id: _id, platform } = data;
if (_isCustomCookie) {
syncDataModalRef.value.open(_id);
} else {
startAuthorized(_id, platform);
}
}
};
const handleEditAccount = async () => {
const { code } = await putMediaAccounts({ id: id.value, ...form.value });
if (code === 200) {
AMessage.success('修改成功');
emit('update');
onClose();
}
};
async function onSubmit() {
if (isBatchImport.value) {
handleBatchImport();
return;
}
formRef.value.validate(async (errors) => {
if (!errors) {
if (isCustomCookie.value && !form.value.cookie) {
AMessage.warning('请填写Cookie值');
return;
}
isEdit.value ? handleEditAccount() : handleAddAccount();
}
});
}
const startAuthorized = (id, platform) => {
authorizedAccountModalRef.value.open(id, platform);
};
const handleDownloadTemplate = async () => {
const { code, data } = await getTemplateUrl();
if (code === 200) {
window.open(data.download_url, '_blank');
}
};
const handleDownloadError = () => {
console.log('handleDownloadError');
};
const renderLabel = (label, tooltipContent) => {
return (
<>
<span class="label">{label}</span>
<Tooltip content={tooltipContent}>
<icon-question-circle size="14" class="ml-4px color-#737478" />
</Tooltip>
</>
);
};
const renderNotification = (id, hasError) => {
Notification.warning({
id,
showIcon: false,
closable: true,
content: (
<div>
<div class="flex items-center mb-4px">
<img src={hasError ? icon5 : icon6} width="16" height="16" class="mr-8px" />
<span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
</div>
<p class="text-14px lh-22px font-400 color-#211F24">
共导入 37 个账号，导入成功 32 个{hasError ? `，失败 <span class="color-#F64B31">5</span> 个` : ''}
</p>
{hasError && (
<div class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={handleDownloadError}>
下载问题表格
</div>
)}
</div>
),
duration: 3000,
class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
});
};
expose({ open });
return () => (
<Modal
v-model:visible={visible.value}
title={isEdit.value ? '编辑账号' : '添加账号'}
modal-class="add-account-modal"
width="500px"
mask-closable={false}
onClose={onClose}
footer={null}
>
<Form ref={formRef} model={form.value} rules={rules} layout="horizontal" auto-label-width>
{!isEdit.value && (
<FormItem label="上传方式" required>
<RadioGroup v-model={uploadType.value}>
<Radio value="manual">手动添加账号</Radio>
<Radio value="batch">批量导入账号</Radio>
</RadioGroup>
</FormItem>
)}
{isBatchImport.value ? (
<FormItem label="账号文件" required>
<div class="upload-block">
{uploadStatus.value === UploadStatus.DEFAULT ? (
<Upload
ref={uploadRef}
action="/"
draggable
custom-request={handleUpload}
accept=".xlsx,.xls"
show-file-list={false}
>
{{
'upload-button': () => (
<div class="upload-box">
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
),
}}
</Upload>
) : (
<div class="flex items-center">
<div
class={[
'flex items-center justify-between py-9px px-12px flex-1 import-row',
{ error: uploadStatus.value === UploadStatus.ERROR },
]}
>
<div class="flex items-center">
<span class="name ml-8px">{fileName.value}</span>
</div>
{uploadStatus.value === UploadStatus.ERROR && (
<span class="upload-error flex-shrink-0" onClick={handleBatchImport}>
点击重试
</span>
)}
</div>
<img src={icon2} width="16" height="16" class="cursor-pointer ml-12px" onClick={removeFile} />
</div>
)}
<div class="flex items-center cursor-pointer mt-8px" onClick={handleDownloadTemplate}>
<img src={icon1} width="16" height="16" class="mr-4px" />
<span class="dt">下载账户导入模板.xlsx</span>
</div>
</div>
</FormItem>
) : (
<>
{isEdit.value && (
<>
<FormItem label="账号名称" field="name">
<Input v-model={form.value.name} placeholder="请输入..." size="large" disabled />
</FormItem>
<FormItem label="账号ID" field="account_id">
<Input v-model={form.value.account_id} placeholder="请输入..." size="large" disabled />
</FormItem>
<FormItem label="状态" field="status">
<StatusBox status={form.value.status} />
</FormItem>
</>
)}
<FormItem label="手机号码" field="mobile" required>
<Input v-model={form.value.mobile} placeholder="请输入..." size="large" />
</FormItem>
<FormItem label="运营人员" field="operator_name" required>
<Input v-model={form.value.operator_name} placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="运营平台" required={!isEdit.value}>
{isEdit.value ? (
<img src={form.value.platform === 0 ? icon3 : icon4} width="24" height="24" />
) : (
<RadioGroup v-model={form.value.platform}>
<Radio value={1}>小红书</Radio>
<Radio value={0}>抖音</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem label="号码持有人" field="holder_name">
<Input v-model={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="选择分组">
<GroupSelect
v-model={form.value.group_id}
multiple={false}
options={groupOptions.value}
placeholder="请选择…"
size="large"
/>
</FormItem>
<FormItem label="选择标签">
<TagSelect v-model={form.value.tag_ids} options={tagOptions.value} placeholder="请选择…" size="large" />
</FormItem>
<FormItem
label="笔记链接"
field="end_work_link"
v-slots={{
label: () =>
renderLabel('笔记链接', '平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集'),
}}
>
<Textarea
v-model={form.value.end_work_link}
placeholder="请输入..."
size="large"
max-length={72}
auto-size={{ minRows: 3, maxRows: 5 }}
/>
</FormItem>
{!isEdit.value && (
<>
<FormItem
label="Cookie值"
v-slots={{
label: () => renderLabel('Cookie值', 'Cookie，无需扫码授权'),
}}
>
<Switch v-model={isCustomCookie.value} size="large" />
</FormItem>
{isCustomCookie.value && (
<FormItem label="" field="cookie">
<Textarea
v-model={form.value.cookie}
placeholder="请输入..."
size="large"
max-length={72}
auto-size={{ minRows: 3, maxRows: 5 }}
/>
</FormItem>
)}
</>
)}
</>
)}
</Form>
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
<Button size="large" class="cancel-btn" onClick={onClose}>
取消
</Button>
<Button type="primary" size="large" loading={importLoading.value} onClick={onSubmit}>
{confirmBtnText.value}
</Button>
</div>
<AuthorizedAccountModal ref={authorizedAccountModalRef} onUpdate={() => emit('update')} />
<ImportPromptModal ref={importPromptModalRef} />
<SyncDataModal ref={syncDataModalRef} />
</Modal>
);
},
};
const handleDownloadTemplate = async () => {
const { code, data } = await getTemplateUrl();
if (code === 200) {
window.open(data.download_url, '_blank');
}
};
// 对外暴露打开弹窗方法
defineExpose({ open });
</script>
<style lang="scss">

13
src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -28,7 +28,7 @@
<template v-else>
<!-- 完成状态 -->
<template v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED">
<template v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)">
<img :src="modalState === MODAL_STATE.SUCCESS ? icon2 : icon3" width="80" height="80" class="mb-16px" />
<p class="s2">{{ `数据初始化${modalState === MODAL_STATE.SUCCESS ? '成功' : '失败'}。` }}</p>
<p v-if="modalState === MODAL_STATE.FAILED" class="red-text">失败原因：{{ failReason || '-' }}</p>
@ -61,10 +61,8 @@
></div>
</div>
</template>
<!-- 正常二维码 -->
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<!-- 二维码失效遮罩 -->
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
<icon-refresh size="24" class="mb-13px" />
@ -82,7 +80,7 @@
重新生成
</a-button>
<a-button
v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)"
size="large"
class="cancel-btn"
@click="close"
@ -94,12 +92,15 @@
</a-button>
</template>
</a-modal>
<SyncDataModal ref="syncDataModalRef" />
</template>
<script setup>
import { defineExpose, ref, computed } from 'vue';
import { Message as AMessage } from '@arco-design/web-vue';
import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
import SyncDataModal from '../sync-data-modal';
import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
@ -127,6 +128,7 @@ const progress = ref(0);
const id = ref('');
const platform = ref('');
const qrCodeUrl = ref('');
const syncDataModalRef = ref(null);
let progressTimer = null;
let overdueTimer = null;
@ -140,7 +142,7 @@ const confirmBtnText = computed(() => {
[MODAL_STATE.QR_READY]: '完成扫码',
[MODAL_STATE.QR_EXPIRED]: '重新生成',
[MODAL_STATE.LOADING]: '处理中...',
[MODAL_STATE.SUCCESS]: '继续添加',
[MODAL_STATE.SUCCESS]: '确认添加',
[MODAL_STATE.FAILED]: '重新扫码',
};
return btnTextMap[modalState.value] || '确定';
@ -299,6 +301,7 @@ const handleOk = () => {
// 授权成功，关闭弹窗
if (modalState.value === MODAL_STATE.SUCCESS) {
syncDataModalRef.value.open(id.value);
close();
return;
}

7
src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
View File

@ -108,12 +108,15 @@
</a-button>
</template>
</a-modal>
<SyncDataModal ref="syncDataModalRef" />
</template>
<script setup>
import { defineExpose, ref, computed } from 'vue';
import { Message as AMessage } from '@arco-design/web-vue';
import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
import SyncDataModal from '../sync-data-modal';
import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
@ -142,6 +145,7 @@ const id = ref('');
const platform = ref('');
const qrCodeUrl = ref('');
const isNicknameChanged = ref(false); // 昵称发生变化
const syncDataModalRef = ref(null);
let progressTimer = null;
let overdueTimer = null;
@ -155,7 +159,7 @@ const confirmBtnText = computed(() => {
[MODAL_STATE.QR_READY]: '完成扫码',
[MODAL_STATE.QR_EXPIRED]: '重新生成',
[MODAL_STATE.LOADING]: '处理中...',
[MODAL_STATE.SUCCESS]: isNicknameChanged.value ? '确定覆盖' : '继续添加',
[MODAL_STATE.SUCCESS]: isNicknameChanged.value ? '确定覆盖' : '确认添加',
[MODAL_STATE.FAILED]: '重新扫码',
};
return btnTextMap[modalState.value] || '确定';
@ -318,6 +322,7 @@ const handleOk = () => {
console.log('确定覆盖');
// 这里可以添加覆盖逻辑
} else {
syncDataModalRef.value.open(id.value);
close();
}
return;

58
src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue Normal file
View File

@ -0,0 +1,58 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
width="480px"
title="更新数据"
modal-class="sync-data-modal"
:mask-closable="false"
@close="close"
>
<div class="flex flex-col items-center">
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<div class="flex flex-col">
<p class="tip">为确保数据准确，建议立即同步账号数据。您也可以在账号管理列表中手动触发更新。</p>
</div>
</div>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="close">稍后再说</a-button>
<a-button type="primary" size="large" @click="handleOk"> 更新数据 </a-button>
</template>
</a-modal>
</template>
<script setup>
import { defineExpose } from 'vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const syncData = inject('handleSyncData');
const id = ref('');
const visible = ref(false);
const open = (accountId) => {
id.value = accountId;
visible.value = true;
};
const close = () => {
id.value = '';
visible.value = false;
};
const handleOk = () => {
syncData({ id: id.value });
close();
};
defineExpose({
open,
});
</script>
<style lang="scss">
@import './style.scss';
</style>

14
src/views/property-marketing/media-account/account-manage/components/sync-data-modal/style.scss Normal file
View File

@ -0,0 +1,14 @@
@import "@/views/property-marketing/component.scss";
.sync-data-modal {
border-radius: 8px;
.arco-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
}
}

2
src/views/property-marketing/media-account/account-manage/constants.ts
View File

@ -13,7 +13,7 @@ export const INITIAL_QUERY = {
export const INITIAL_PAGE_INFO = {
page: 1,
pageSize: 8,
pageSize: 20,
total: 0,
};

90
src/views/property-marketing/media-account/account-manage/index.vue
View File

@ -51,6 +51,9 @@
个账号
</span>
<span class="operation-btn" :class="{ disabled: isDisabledBatchSyncData }" @click="handleBatchSyncData"
>批量更新数据</span
>
<span class="operation-btn" @click="handleBatchTag">批量标签</span>
<span class="operation-btn" @click="handleBatchGroup">批量分组</span>
<span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
@ -76,6 +79,7 @@
<div class="card-wrap">
<AccountTable
v-if="dataSource.length > 0"
:syncMediaAccounts="syncMediaAccounts"
:dataSource="dataSource"
:selectedItems="selectedItems"
@selectionChange="handleSelectionChange"
@ -91,7 +95,8 @@
size="mini"
show-total
show-jumper
:show-page-size="false"
show-page-size
:page-size-options="[8, 16, 20, 32, 64]"
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@ -111,7 +116,7 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, provide } from 'vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
@ -121,9 +126,17 @@ import AddAccountModal from './components/add-account-modal';
import DeleteAccountModal from './components/account-table/delete-account';
import BatchTagModal from './components/batch-tag-modal';
import BatchGroupModal from './components/batch-group-modal';
import { Notification } from '@arco-design/web-vue';
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import {
getMediaAccounts,
getMediaAccountsHealth,
postSyncMediaAccountData,
postBatchSyncMediaAccountData,
getMediaAccountSyncStatus,
} from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-add.png';
import icon2 from '@/assets/img/media-account/icon-group.png';
@ -132,6 +145,8 @@ import icon4 from '@/assets/img/media-account/icon-success.png';
import icon5 from '@/assets/img/media-account/icon-warn.png';
import icon6 from '@/assets/img/media-account/icon-close.png';
let syncDataTimer = null;
const groupManageModalRef = ref(null);
const tagsManageModalRef = ref(null);
const addAccountModalRef = ref(null);
@ -145,8 +160,11 @@ const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const selectedItems = ref([]);
const healthData = ref({});
const syncMediaAccounts = ref([]);
const startSyncData = ref(false);
const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
const isDisabledBatchSyncData = computed(() => selectedItems.value.some((item) => item.status !== EnumStatus.NORMAL));
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
const indeterminate = computed(
@ -164,6 +182,7 @@ const tipLabel = computed(() => {
too_many_requests_number = 0,
account_frozen_number = 0,
miss_data_number = 0,
abnormal_number = 0,
} = healthData.value;
// 定义异常类型映射
@ -172,6 +191,7 @@ const tipLabel = computed(() => {
{ count: too_many_requests_number, label: '请求频繁' },
{ count: account_frozen_number, label: '账号被封' },
{ count: miss_data_number, label: '数据缺失' },
{ count: abnormal_number, label: '其他异常' },
];
// 过滤出有异常的项并格式化
@ -180,10 +200,6 @@ const tipLabel = computed(() => {
return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
onMounted(() => {
getData();
});
const getData = () => {
getHealthData();
getAccountData();
@ -262,10 +278,55 @@ const handleDelete = (item) => {
const handleCloseTip = () => {
selectedItems.value = [];
};
// 先立即执行一次
const getAsyncStatus = async () => {
const { code, data } = await getMediaAccountSyncStatus();
if (code === 200) {
syncMediaAccounts.value = data;
// 所有任务都结束了，才停止轮询，刷新页面
const isEnd = data.every((item) => item.status !== 0);
if (isEnd) {
clearSyncDataTimer();
startSyncData.value = false;
getData();
}
}
};
const startSyncDataPolling = () => {
startSyncData.value = true;
clearSyncDataTimer();
getAsyncStatus();
syncDataTimer = setInterval(getAsyncStatus, 3000);
};
const handleSyncData = async (item) => {
const { code } = await postSyncMediaAccountData(item.id);
if (code === 200) {
if (!startSyncData.value) {
startSyncDataPolling();
}
}
};
const handleBatchTag = () => {
batchTagModalRef.value?.open(selectedItems.value);
};
const handleBatchSyncData = async () => {
if (isDisabledBatchSyncData.value) {
return;
}
const ids = selectedItems.value.map((item) => item.id);
const { code } = await postBatchSyncMediaAccountData({ ids });
if (code === 200) {
if (!startSyncData.value) {
startSyncDataPolling();
}
}
};
const handleBatchGroup = () => {
batchGroupModalRef.value?.open(selectedItems.value);
};
@ -277,6 +338,21 @@ const handleOpenAbnormalAccount = () => {
query.value.status = 2;
reload();
};
const clearSyncDataTimer = () => {
if (syncDataTimer) {
clearInterval(syncDataTimer);
syncDataTimer = null;
}
};
onMounted(() => {
getData();
});
onUnmounted(() => {
clearSyncDataTimer();
});
provide('handleSyncData', handleSyncData);
</script>
<style scoped lang="scss">

6
src/views/property-marketing/media-account/account-manage/style.scss
View File

@ -60,7 +60,7 @@
padding: 0;
cursor: pointer;
color: var(--Brand-Brand-6, #6d4cfe);
font-family: $font-family-medium;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -71,6 +71,10 @@
&.red {
color: #F64B31;
}
&.disabled {
color: #C5B7FF;
cursor: not-allowed;
}
}
}
.card-wrap {

8
src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
View File

@ -19,6 +19,12 @@
<span class="label">状态</span>
<StatusBox :status="item.status" />
</div>
<div class="field-row">
<span class="label">数据更新时间</span>
<span class="cts num">{{
exactFormatTime(item.last_synced_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss')
}}</span>
</div>
<div class="field-row">
<span class="label">平台</span>
<img :src="PLATFORM_LIST.find((v) => v.value === item.platform)?.icon" width="14" height="14" />
@ -73,7 +79,7 @@ import { defineProps, ref, computed } from 'vue';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import { EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatNumberShow } from '@/utils/tools';
import { formatNumberShow, exactFormatTime } from '@/utils/tools';
import PauseAccountPatchModal from './pause-account-patch';
import StatusBox from '../status-box';

1
src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -250,6 +250,7 @@ const handleSyncData = () => {
if (syncType.value === INITIAL_SYNC_TYPE) {
postPlacementAccountsSync(id.value).then((res) => {
if (res.code === 200) {
update();
close();
}
});

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

@ -76,7 +76,8 @@
size="mini"
show-total
show-jumper
:show-page-size="false"
show-page-size
:page-size-options="[8, 16, 20, 32, 64]"
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@ -113,7 +114,7 @@ const deleteAccountRef = ref(null);
const pageInfo = ref({
page: 1,
pageSize: 8,
pageSize: 20,
total: 0,
});
const query = ref(cloneDeep(INITIAL_QUERY));
@ -139,6 +140,7 @@ const tipLabel = computed(() => {
too_many_requests_number = 0,
account_frozen_number = 0,
miss_data_number = 0,
abnormal_number = 0,
} = healthData.value;
// 定义异常类型映射
@ -147,6 +149,7 @@ const tipLabel = computed(() => {
{ count: too_many_requests_number, label: '请求频繁' },
{ count: account_frozen_number, label: '账号被封' },
{ count: miss_data_number, label: '数据缺失' },
{ count: abnormal_number, label: '其他异常' },
];
// 过滤出有异常的项并格式化