Merge remote-tracking branch 'origin/feature/0918_账号管理新增视图_rxd' into test
# Conflicts: # src/components/common-select/index.vue # src/router/routes/modules/propertyMarketing.ts
This commit is contained in:
rd
@ -71,22 +71,26 @@ export default {
|
||||
};
|
||||
|
||||
const onSubmit = async (action) => {
|
||||
uploadLoading.value = true;
|
||||
const filteredWorks = map(works.value, (work) => omit(work, 'videoInfo'));
|
||||
const { code, data } = await postWorksBatch({ works: filteredWorks });
|
||||
if (code === 200) {
|
||||
uploadLoading.value = false;
|
||||
if (action === 'batchUpload') {
|
||||
uploadSuccessModal.value?.open(data);
|
||||
} else {
|
||||
message.success('上传成功');
|
||||
if (action === 'uploadAndCheck') {
|
||||
slsWithCatch('manuscriptCheckIds', data);
|
||||
router.push({ name: 'ManuscriptCheck' });
|
||||
try {
|
||||
uploadLoading.value = true;
|
||||
const filteredWorks = map(works.value, (work) => omit(work, 'videoInfo'));
|
||||
const { code, data } = await postWorksBatch({ works: filteredWorks });
|
||||
if (code === 200) {
|
||||
uploadLoading.value = false;
|
||||
if (action === 'batchUpload') {
|
||||
uploadSuccessModal.value?.open(data);
|
||||
} else {
|
||||
router.push({ name: 'MaterialCenterFinishedProducts' });
|
||||
message.success('上传成功');
|
||||
if (action === 'uploadAndCheck') {
|
||||
slsWithCatch('manuscriptCheckIds', data);
|
||||
router.push({ name: 'ManuscriptCheck' });
|
||||
} else {
|
||||
router.push({ name: 'MaterialCenterFinishedProducts' });
|
||||
}
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
uploadLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
@sorterChange="handleSorterChange"
|
||||
/>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<Pagination
|
||||
<Pagination
|
||||
:total="pageInfo.total"
|
||||
size="small"
|
||||
:showTotal="(total, range) => `共 ${total} 条`"
|
||||
@ -64,7 +64,7 @@ import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport }
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
|
||||
// import { downloadByUrl } from '@/utils/tools';
|
||||
import { showExportNotification } from '@/utils/arcoD';
|
||||
import { showExportNotification } from '@/utils/notification';
|
||||
|
||||
import icon1 from '@/assets/img/icon-question.png';
|
||||
|
||||
|
||||
@ -6,15 +6,15 @@
|
||||
<div class="note-table-wrap bg-#fff rounded-8px px-24px flex-1 flex flex-col">
|
||||
<div class="title-row">
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
|
||||
<span class="cts !text-18px !lh-26px mr-4px title">作品列表</span>
|
||||
<Tooltip title="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
|
||||
<icon-question-circle size="16" class="color-#737478" />
|
||||
<icon-question-circle class="color-#737478" size="14" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex my-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">笔记标题</span>
|
||||
<span class="label">作品标题</span>
|
||||
<Input v-model:value="query.title" class="!w-240px" placeholder="请搜索..." allowClear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
@ -68,18 +68,20 @@
|
||||
<template #title>
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="14" />
|
||||
</Tooltip>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
<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-if="column.dataIndex === 'title'">
|
||||
<TextoverTips :context="record.title" />
|
||||
<Tooltip placement="top" title="查看作品详情">
|
||||
<p class="cursor-pointer hover:color-#6D4CFE title" @click="() => goNoteDetail(record)">
|
||||
{{ record.title }}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<!-- <TextoverTips :context="record.title" />-->
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatTableField(column, record, true) }}
|
||||
@ -108,12 +110,13 @@
|
||||
<script setup>
|
||||
import { Button, Input, Tooltip, Table, Pagination, DatePicker } from 'ant-design-vue';
|
||||
import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';
|
||||
import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
|
||||
import TextoverTips from '@/components/text-over-tips/index.vue';
|
||||
// import TextoverTips from '@/components/text-over-tips/index.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const id = route.params.id;
|
||||
const dataSource = ref([]);
|
||||
const published_at = ref([]);
|
||||
@ -171,6 +174,12 @@ const getData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const goNoteDetail = (record) => {
|
||||
router.push({
|
||||
name: 'MediaAccountNoteDetails',
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
@ -19,4 +19,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,9 +34,10 @@ export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
|
||||
{ title: '账号ID', dataIndex: 'account_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: 'group.name', notDifferentiateDateType: true },
|
||||
{ title: '标签', dataIndex: 'tags', notDifferentiateDateType: true },
|
||||
{ title: 'AI评价', dataIndex: 'ai_evaluation', notDifferentiateDateType: true },
|
||||
{ title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。', notDifferentiateDateType: true },
|
||||
{
|
||||
title: '总赞藏数',
|
||||
@ -47,7 +48,6 @@ export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
|
||||
];
|
||||
const customFieldsWithAiEvaluation = [
|
||||
CUSTOM_FIELDS[0],
|
||||
{ title: 'AI评价', dataIndex: 'ai_evaluation', notDifferentiateDateType: true },
|
||||
...CUSTOM_FIELDS.slice(1),
|
||||
];
|
||||
const allFields = showMore ? [...baseFields, ...customFieldsWithAiEvaluation] : baseFields.slice(0, 8);
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="account-detail-wrap">
|
||||
<div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
|
||||
<icon-left size="16" />
|
||||
<spa class="cts title ml-8px">账号详情</spa>
|
||||
<span class="cts title ml-8px">账号列表</span>
|
||||
</div>
|
||||
<AccountInfo />
|
||||
<NoteTable />
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
* @Date: 2025-06-25 15:31:15
|
||||
-->
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<NoData v-if="!dataSource.length" />
|
||||
<div v-else class="card-container">
|
||||
<Spin
|
||||
v-for="(item, index) in dataSource"
|
||||
:key="index"
|
||||
@ -14,7 +15,12 @@
|
||||
<template #icon>
|
||||
<icon-sync size="24" />
|
||||
</template>
|
||||
<Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)" class="relative top--2px"></Checkbox>
|
||||
<Checkbox
|
||||
:checked="isSelected(item)"
|
||||
:value="item.id"
|
||||
class="relative top--2px"
|
||||
@change="toggleSelect(item)"
|
||||
></Checkbox>
|
||||
<div class="ml-8px flex-1">
|
||||
<Tooltip title="点击查看账号详情">
|
||||
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
|
||||
@ -67,30 +73,30 @@
|
||||
<span class="label">运营人员</span>
|
||||
<span class="cts">{{ item.operator?.name || '-' }}</span>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span class="label">所属项目</span>
|
||||
<span v-if="!item.projects.length" class="cts">-</span>
|
||||
<div v-else class="flex items-center">
|
||||
<Tooltip
|
||||
v-if="item.projects.length > 2"
|
||||
placement="bottom"
|
||||
:title="
|
||||
item.projects
|
||||
.slice(2)
|
||||
.map((v) => v.name)
|
||||
.join(',')
|
||||
"
|
||||
>
|
||||
<div class="tag-box">
|
||||
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<!-- <div class="field-row">-->
|
||||
<!-- <span class="label">所属项目</span>-->
|
||||
<!-- <span v-if="!item.projects.length" class="cts">-</span>-->
|
||||
<!-- <div v-else class="flex items-center">-->
|
||||
<!-- <Tooltip-->
|
||||
<!-- v-if="item.projects.length > 2"-->
|
||||
<!-- placement="bottom"-->
|
||||
<!-- :title="-->
|
||||
<!-- item.projects-->
|
||||
<!-- .slice(2)-->
|
||||
<!-- .map((v) => v.name)-->
|
||||
<!-- .join(',')-->
|
||||
<!-- "-->
|
||||
<!-- >-->
|
||||
<!-- <div class="tag-box">-->
|
||||
<!-- <span class="text">{{ `+${item.projects.length - 2}` }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </Tooltip>-->
|
||||
|
||||
<div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
|
||||
<span class="text">{{ project.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">-->
|
||||
<!-- <span class="text">{{ project.name }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="field-row">
|
||||
<span class="label">分组</span>
|
||||
<span class="cts">{{ item.group?.name || '-' }}</span>
|
||||
@ -143,14 +149,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
|
||||
<ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
|
||||
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, computed, inject } from 'vue';
|
||||
import { defineProps, inject } from 'vue';
|
||||
import { Checkbox, Button, Tooltip, Spin } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
|
||||
@ -161,10 +164,7 @@ import {
|
||||
EnumStatus,
|
||||
} from '@/views/property-marketing/media-account/components/status-select/status-box';
|
||||
|
||||
import PauseAccountPatchModal from './pause-account-patch';
|
||||
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
|
||||
import ReauthorizeAccountModal from '../reauthorize-account-modal';
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
import FooterBtn from './footer-btn';
|
||||
|
||||
import icon1 from '@/assets/img/platform/icon-dy.png';
|
||||
@ -184,7 +184,7 @@ const props = defineProps({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedItems: {
|
||||
selectedRows: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
@ -194,28 +194,26 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete', 'updateSyncStatus']);
|
||||
const emits = defineEmits([
|
||||
'openEdit',
|
||||
'update',
|
||||
'delete',
|
||||
'updateSyncStatus',
|
||||
'pause',
|
||||
'reauthorize',
|
||||
'select',
|
||||
'selectAll',
|
||||
]);
|
||||
const syncData = inject('handleSyncData');
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const pauseAccountPatchModalRef = ref(null);
|
||||
const reauthorizeAccountModalRef = ref(null);
|
||||
const authorizedAccountModalRef = ref(null);
|
||||
|
||||
// 判断当前 item 是否被选中
|
||||
const isSelected = (item) => {
|
||||
return props.selectedItems.some((i) => i.id === item.id);
|
||||
return props.selectedRows.some((i) => i.id === item.id);
|
||||
};
|
||||
|
||||
const toggleSelect = (item) => {
|
||||
let newSelected;
|
||||
if (isSelected(item)) {
|
||||
newSelected = props.selectedItems.filter((i) => i.id !== item.id);
|
||||
} else {
|
||||
newSelected = [...props.selectedItems, item];
|
||||
}
|
||||
emits('selectionChange', newSelected);
|
||||
emits('select', item, !isSelected(item));
|
||||
};
|
||||
|
||||
const openEdit = (item) => {
|
||||
@ -227,21 +225,11 @@ const openDelete = (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);
|
||||
}
|
||||
emits('reauthorize', item);
|
||||
};
|
||||
|
||||
const handlePause = (item) => {
|
||||
pauseAccountPatchModalRef.value?.open(item);
|
||||
};
|
||||
|
||||
const isUnauthorizedStatus = (error_status) => {
|
||||
return [EnumErrorStatus.UNAUTHORIZED].includes(error_status);
|
||||
emits('pause', item);
|
||||
};
|
||||
|
||||
const goDetail = (item) => {
|
||||
@ -293,6 +281,7 @@ const handleConfirm = (item) => {
|
||||
syncData(item);
|
||||
}
|
||||
if (error_status === EnumErrorStatus.LOGIN) {
|
||||
emits('');
|
||||
handleReauthorize(item);
|
||||
}
|
||||
};
|
||||
@ -3,9 +3,8 @@ import {
|
||||
EnumErrorStatus,
|
||||
getStatusInfo,
|
||||
} from '@/views/property-marketing/media-account/components/status-select/status-box';
|
||||
import { Dropdown, Menu } from 'ant-design-vue';
|
||||
import { Dropdown, Menu, Tooltip, Button } from 'ant-design-vue';
|
||||
const { Item: MenuItem } = Menu;
|
||||
import { Tooltip, Button } from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
name: 'FooterBtn',
|
||||
props: {
|
||||
@ -44,7 +43,7 @@ export default defineComponent({
|
||||
};
|
||||
const renderUpdateBtn = () => {
|
||||
return (
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('syncData', props.item)}>
|
||||
<Button type="primary" class="!h-24px !px-12px" ghost size="small" onClick={() => emit('syncData', props.item)}>
|
||||
更新数据
|
||||
</Button>
|
||||
);
|
||||
@ -63,7 +62,7 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
<Button type="primary" ghost class="!h-24px !px-12px mr-8px" size="small">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
@ -88,7 +87,7 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
<Button type="primary" ghost class="mr-8px !h-24px !px-12px" size="small">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
@ -100,7 +99,13 @@ export default defineComponent({
|
||||
),
|
||||
}}
|
||||
></Dropdown>
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
class="!h-24px !px-12px"
|
||||
onClick={() => emit('handleReauthorize', props.item)}
|
||||
>
|
||||
开启同步
|
||||
</Button>
|
||||
</>
|
||||
@ -118,14 +123,20 @@ export default defineComponent({
|
||||
} else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
|
||||
return (
|
||||
<Tooltip title={statusInfo.value.disabledBtnTooltip}>
|
||||
<Button type="primary" ghost size="small" disabled>
|
||||
<Button type="primary" ghost size="small" disabled class="!h-24px !px-12px">
|
||||
重新授权
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
class="!h-24px !px-12px"
|
||||
size="small"
|
||||
onClick={() => emit('handleReauthorize', props.item)}
|
||||
>
|
||||
{isUnauthorized ? '去授权' : '重新授权'}
|
||||
</Button>
|
||||
);
|
||||
@ -137,7 +148,7 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
<Button type="primary" ghost size="small" class="mr-8px !h-24px !px-12px">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
|
||||
@ -10,6 +10,15 @@
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
:deep(.status-box) {
|
||||
.label {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.card-item {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
:rowSelection="rowSelection"
|
||||
:scroll="{ x: '100%' }"
|
||||
:showSorterTooltip="false"
|
||||
bordered
|
||||
class="flex-1 w-100%"
|
||||
rowKey="id"
|
||||
:rowClassName="(record) => (isSyncing(record) || isSyncFailed(record) ? 'sync' : '')"
|
||||
>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<Column
|
||||
v-for="column in tableColumns"
|
||||
:key="column.dataIndex"
|
||||
:align="column.align"
|
||||
:dataIndex="column.dataIndex"
|
||||
:ellipsis="true"
|
||||
:fixed="column.fixed"
|
||||
:minWidth="column.minWidth"
|
||||
:sorter="column.sortable"
|
||||
:width="column.width"
|
||||
:className="column.class"
|
||||
>
|
||||
<template #title>
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'name'" #customRender="{ record }">
|
||||
<TextOverTips
|
||||
:context="record.name || '-'"
|
||||
:line="1"
|
||||
class="name cursor-pointer hover:!color-#6d4cfe"
|
||||
@click="goDetail(record)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'tags'" #customRender="{ record }">
|
||||
<div v-if="record.tags.length > 0" class="flex flex-wrap gap-4px">
|
||||
<Tag v-for="tag in record.tags" :key="tag.id" class="mr-0 rounded-4px bg-#F2F3F5 px-8px">
|
||||
<Tooltip v-if="tag.name.length > 5" :title="tag.name">
|
||||
<span class="cts !color-#55585F !lh-24px !text-14px"> {{ `${tag.name.slice(0, 5)}...` }} </span>
|
||||
</Tooltip>
|
||||
<span v-else class="cts !color-#55585F !lh-24px !text-14px"> {{ tag.name }} </span>
|
||||
</Tag>
|
||||
</div>
|
||||
<template v-else> -</template>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'status'" #customRender="{ record }">
|
||||
<StatusBox :item="record" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'platform'" #customRender="{ record }">
|
||||
<img :src="record.platform === 0 ? icon2 : icon3" alt="" height="16" width="16" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'last_synced_at'" #customRender="{ record }">
|
||||
<span class="cts num">{{ getLastSyncedAt(record) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'last_authorized_at'" #customRender="{ record }">
|
||||
<span class="cts num">{{ formatTime(record.last_authorized_at) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'sync'" #customRender="{ record }">
|
||||
<div v-if="isSyncing(record)" class="sync-col">
|
||||
<Spin tip="更新数据中..." />
|
||||
</div>
|
||||
<div v-else-if="isSyncFailed(record)" class="flex items-center">
|
||||
<div class="flex items-center box mr-16px">
|
||||
<img :src="icon4" alt="" class="mr-8px" height="16" width="16" />
|
||||
<span class="name !mb-0">{{ getErrorStatusText(record) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Button class="mr-8px !h-24px !px-12px" ghost size="small" type="primary" @click="handleCancel(record)">
|
||||
取消
|
||||
</Button>
|
||||
<Button v-if="showConfirmBtn(record)" ghost size="small" type="primary" @click="handleConfirm(record)"
|
||||
>{{ getConfirmBtnText(record) }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<FooterBtn
|
||||
:item="record"
|
||||
@handlePause="handlePause"
|
||||
@handleReauthorize="handleReauthorize"
|
||||
@openDelete="openDelete"
|
||||
@openEdit="openEdit"
|
||||
@syncData="syncData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #customRender="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</Column>
|
||||
</Table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import { Tooltip, Table, Tag, Spin, Button } from 'ant-design-vue';
|
||||
import StatusBox, {
|
||||
EnumErrorStatus,
|
||||
EnumStatus,
|
||||
errorStatusMap,
|
||||
} from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
|
||||
|
||||
const { Column } = Table;
|
||||
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
|
||||
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import FooterBtn from './footer-btn';
|
||||
|
||||
// import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
import icon2 from '@/assets/img/platform/icon-dy.png';
|
||||
import icon3 from '@/assets/img/platform/icon-xhs.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-warn.png';
|
||||
|
||||
const emits = defineEmits([
|
||||
'openEdit',
|
||||
'update',
|
||||
'selectionChange',
|
||||
'delete',
|
||||
'updateSyncStatus',
|
||||
'pause',
|
||||
'reauthorize',
|
||||
'select',
|
||||
'selectAll',
|
||||
]);
|
||||
const syncData = inject('handleSyncData');
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableColumns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedRowKeys: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
syncMediaAccounts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isLoadingTaskStatus: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
});
|
||||
|
||||
const tableRef = ref(null);
|
||||
|
||||
const goDetail = (item) => {
|
||||
router.push(`/media-account/detail/${item.id}`);
|
||||
};
|
||||
|
||||
const handlePause = (item) => {
|
||||
emits('pause', item);
|
||||
};
|
||||
const handleReauthorize = (item) => {
|
||||
emits('reauthorize', item);
|
||||
};
|
||||
const openEdit = (item) => {
|
||||
emits('openEdit', item);
|
||||
};
|
||||
const openDelete = (item) => {
|
||||
emits('delete', item);
|
||||
};
|
||||
const formatTime = (time) => {
|
||||
return exactFormatTime(time, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
};
|
||||
|
||||
const getSyncMediaAccount = (item) => {
|
||||
return props.syncMediaAccounts.find((v) => v.id === item.id);
|
||||
};
|
||||
const getLastSyncedAt = (item) => {
|
||||
const target = getSyncMediaAccount(item);
|
||||
if (props.isLoadingTaskStatus && target) {
|
||||
if (target?.status !== 0) {
|
||||
return formatTime(target.last_synced_at);
|
||||
}
|
||||
}
|
||||
return formatTime(item.last_synced_at);
|
||||
};
|
||||
|
||||
const rowSelection = {
|
||||
selectedRowKeys: computed(() => props.selectedRowKeys),
|
||||
onSelect: (record, selected) => {
|
||||
emits('select', record, selected);
|
||||
},
|
||||
onSelectAll: (selected) => {
|
||||
emits('selectAll', selected);
|
||||
},
|
||||
};
|
||||
|
||||
const isSyncing = (item) => {
|
||||
if (!props.syncMediaAccounts.length) return false;
|
||||
return getSyncMediaAccount(item)?.status === 0;
|
||||
};
|
||||
|
||||
const isSyncFailed = (item) => {
|
||||
return getSyncMediaAccount(item)?.status === 2;
|
||||
};
|
||||
const getErrorStatusText = (item) => {
|
||||
const error_status = getSyncMediaAccount(item)?.error_status;
|
||||
return `异常（${errorStatusMap.get(error_status)?.text ?? ''}）`;
|
||||
};
|
||||
const handleCancel = async (item) => {
|
||||
const error_status = getSyncMediaAccount(item)?.error_status;
|
||||
await deleteSyncStatus(item.id);
|
||||
|
||||
item.status = EnumStatus.ABNORMAL;
|
||||
item.error_status = error_status;
|
||||
|
||||
emits('updateSyncStatus', item);
|
||||
};
|
||||
const handleConfirm = (item) => {
|
||||
const error_status = getSyncMediaAccount(item)?.error_status;
|
||||
if (error_status === EnumErrorStatus.MISSING) {
|
||||
syncData(item);
|
||||
}
|
||||
if (error_status === EnumErrorStatus.LOGIN) {
|
||||
emits('');
|
||||
handleReauthorize(item);
|
||||
}
|
||||
};
|
||||
const showConfirmBtn = (item) => {
|
||||
const error_status = getSyncMediaAccount(item)?.error_status;
|
||||
return [EnumErrorStatus.MISSING, EnumErrorStatus.LOGIN].includes(error_status);
|
||||
};
|
||||
const getConfirmBtnText = (item) => {
|
||||
const error_status = getSyncMediaAccount(item)?.error_status;
|
||||
if (error_status === EnumErrorStatus.MISSING) {
|
||||
return '重新更新';
|
||||
}
|
||||
if (error_status === EnumErrorStatus.LOGIN) {
|
||||
return '重新授权';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ant-table) {
|
||||
.ant-table-tbody {
|
||||
.ant-table-row {
|
||||
&.sync {
|
||||
position: relative;
|
||||
border-bottom: none !important;
|
||||
|
||||
.sync-row {
|
||||
background-color: #fff;
|
||||
opacity: 0.9;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 22;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.sync-col {
|
||||
.ant-spin {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
|
||||
.ant-spin-dot {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -16,6 +16,7 @@ import {
|
||||
Tooltip,
|
||||
Upload,
|
||||
Switch,
|
||||
Select,
|
||||
} from 'ant-design-vue';
|
||||
const { TextArea } = Input;
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
@ -25,7 +26,7 @@ import SyncDataModal from '../sync-data-modal';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
|
||||
// import { downloadByUrl } from '@/utils/tools';
|
||||
import { showExportNotification } from '@/utils/arcoD';
|
||||
import { showExportNotification } from '@/utils/notification';
|
||||
import { genRandomId } from '@/utils/tools';
|
||||
import {
|
||||
fetchAccountTags,
|
||||
@ -36,6 +37,7 @@ import {
|
||||
getTemplateUrl,
|
||||
batchMediaAccounts,
|
||||
getProjectList,
|
||||
postAccountTags,
|
||||
} from '@/api/all/propertyMarketing';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-download.png';
|
||||
@ -278,6 +280,35 @@ export default {
|
||||
</>
|
||||
);
|
||||
};
|
||||
const handleTagChange = (value) => {
|
||||
form.value.tag_ids = value;
|
||||
};
|
||||
const handleTagInputPressEnter = async (e) => {
|
||||
const inputValue = e.target.value.trim();
|
||||
|
||||
if (!inputValue) return;
|
||||
const _target = tagOptions.value.find((item) => item.name === inputValue);
|
||||
if (_target) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { code, data } = await postAccountTags({ name: inputValue });
|
||||
|
||||
if (code === 200 && data) {
|
||||
tagOptions.value.push({
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
});
|
||||
e.target.value = '';
|
||||
|
||||
form.value.tag_ids = form.value.tag_ids.filter((item) => item !== inputValue);
|
||||
form.value.tag_ids.push(data.id);
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('添加标签失败');
|
||||
}
|
||||
};
|
||||
|
||||
expose({ open });
|
||||
|
||||
@ -430,11 +461,28 @@ export default {
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="选择标签">
|
||||
<CommonSelect
|
||||
v-model={form.value.tag_ids}
|
||||
options={tagOptions.value}
|
||||
placeholder="请选择…"
|
||||
<Select
|
||||
value={form.value.tag_ids}
|
||||
mode="tags"
|
||||
size="large"
|
||||
placeholder="请选择标签"
|
||||
allowClear
|
||||
autoClearSearchValue
|
||||
class="w-full"
|
||||
showSearch
|
||||
showArrow
|
||||
maxTagCount={5}
|
||||
optionFilterProp="name"
|
||||
options={tagOptions.value}
|
||||
field-names={{ label: 'name', value: 'id' }}
|
||||
onChange={handleTagChange}
|
||||
onInputKeyDown={(e) => {
|
||||
// 检测回车键
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleTagInputPressEnter(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
:multiple="false"
|
||||
:options="operators"
|
||||
@change="handleSearch"
|
||||
@dropdownVisibleChange="getOperators"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -54,10 +55,10 @@
|
||||
<span class="label">分组</span>
|
||||
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" class="!w-200px" />
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">所属项目</span>
|
||||
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" class="!w-200px" />
|
||||
</div>
|
||||
<!-- <div class="filter-row-item">-->
|
||||
<!-- <span class="label">所属项目</span>-->
|
||||
<!-- <CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" class="!w-200px" />-->
|
||||
<!-- </div>-->
|
||||
<div class="filter-row-item">
|
||||
<span class="label">标签</span>
|
||||
<CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" class="!w-320px" />
|
||||
@ -150,7 +151,7 @@ onMounted(() => {
|
||||
getTags();
|
||||
getGroups();
|
||||
getOperators();
|
||||
getProjects();
|
||||
// getProjects();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
|
||||
@ -28,3 +28,82 @@ export const PLATFORM_LIST = [
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const SHOW_TYPES = [
|
||||
{
|
||||
label: '卡片',
|
||||
value: 'card',
|
||||
svgName: 'svg-card',
|
||||
},
|
||||
{
|
||||
label: '列表',
|
||||
value: 'list',
|
||||
svgName: 'svg-list',
|
||||
},
|
||||
];
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '账号名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '更新状态',
|
||||
dataIndex: 'sync',
|
||||
class: 'sync-row',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '数据更新时间',
|
||||
dataIndex: 'last_synced_at',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '最后授权时间',
|
||||
dataIndex: 'last_authorized_at',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '账号ID',
|
||||
dataIndex: 'account_id',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'mobile',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '运营人员',
|
||||
dataIndex: 'operator.name',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '分组',
|
||||
dataIndex: 'group.name',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
dataIndex: 'tags',
|
||||
width: 180,
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="account-manage-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px">
|
||||
<div class="filter-wrap mb-16px bg-#fff rounded-8px">
|
||||
<div class="top flex h-64px px-24px py-10px justify-between items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
|
||||
<div class="flex items-center">
|
||||
@ -31,65 +31,74 @@
|
||||
<FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
|
||||
<!--存在异常账号-->
|
||||
<div
|
||||
v-if="dataSource.length > 0"
|
||||
class="tip-row flex justify-between items-center px-16px py-10px w-100% my-12px h-48px"
|
||||
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
|
||||
v-if="hasAbNormalStatus"
|
||||
class="tip-row flex justify-between items-center px-16px w-100% h-42px mb-16px abnormal"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<template v-if="selectedItems.length > 0">
|
||||
<Checkbox
|
||||
:checked="checkedAll"
|
||||
:indeterminate="indeterminate"
|
||||
class="mr-8px"
|
||||
@change="(e) => handleChangeAll(e.target.checked)"
|
||||
/>
|
||||
<span class="label mr-24px">
|
||||
已选
|
||||
<span class="color-#6D4CFE">{{ selectedItems.length }}</span>
|
||||
个账号
|
||||
</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>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
|
||||
<span class="label"> {{ tipLabel }} </span>
|
||||
</template>
|
||||
<img :src="icon5" class="mr-8px" height="16" width="16" />
|
||||
<span class="label"> {{ tipLabel }} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="selectedItems.length > 0">
|
||||
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
|
||||
</template>
|
||||
<div v-else>
|
||||
<Space v-if="isAbNormalStatus" class="flex items-center">
|
||||
<Button type="primary" danger size="small" @click="handleOpenAbnormalAccount">
|
||||
<template #default>查看异常账号</template>
|
||||
<Button class="!h-24px !px-12px" danger size="small" type="primary" @click="handleOpenAbnormalAccount">
|
||||
<template #default>查看异常账号</template>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!--操作行-->
|
||||
<div class="tip-row flex justify-between items-center px-16px py-10px w-100% h-44px mb-16px">
|
||||
<div class="flex items-center">
|
||||
<Checkbox
|
||||
:checked="checkedAll"
|
||||
:indeterminate="indeterminate"
|
||||
class="mr-24px"
|
||||
@change="(e) => handleSelectAll(e.target.checked)"
|
||||
>
|
||||
全选
|
||||
</Checkbox>
|
||||
|
||||
<template v-if="selectedRows.length">
|
||||
<Button :disabled="isDisabledBatchSyncData" class="!h-24px !px-12px" type="text" @click="handleBatchSyncData">
|
||||
批量更新数据
|
||||
</Button>
|
||||
</Space>
|
||||
<Button class="!h-24px !px-12px" type="text" @click="handleBatchTag"> 批量标签</Button>
|
||||
<Button class="!h-24px !px-12px" type="text" @click="handleBatchGroup"> 批量分组</Button>
|
||||
<Button class="!h-24px !px-12px" danger type="text" @click="handleBatchDelete"> 批量删除</Button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<RadioGroup v-model:value="showType">
|
||||
<RadioButton v-for="(item, index) in SHOW_TYPES" :key="index" :value="item.value">
|
||||
<div class="flex items-center">
|
||||
<SvgIcon :name="item.svgName" class="mr-4px" size="16" />
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<AccountTable
|
||||
v-if="dataSource.length > 0"
|
||||
:syncMediaAccounts="syncMediaAccounts"
|
||||
:isLoadingTaskStatus="isLoadingTaskStatus"
|
||||
<component
|
||||
:is="showType === 'card' ? Card : Table"
|
||||
:dataSource="dataSource"
|
||||
:isLoadingTaskStatus="isLoadingTaskStatus"
|
||||
:selectedItems="selectedItems"
|
||||
@selectionChange="handleSelectionChange"
|
||||
:selectedRowKeys="selectedRowKeys"
|
||||
:selectedRows="selectedRows"
|
||||
:syncMediaAccounts="syncMediaAccounts"
|
||||
:tableColumns="TABLE_COLUMNS"
|
||||
@delete="handleDelete"
|
||||
@openEdit="handleOpenEdit"
|
||||
@pause="handlePause"
|
||||
@reauthorize="handleReauthorize"
|
||||
@select="handleSelect"
|
||||
@selectAll="handleSelectAll"
|
||||
@update="getData"
|
||||
@updateSyncStatus="handleUpdateSyncStatus"
|
||||
/>
|
||||
<NoData v-else />
|
||||
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<Pagination
|
||||
@ -99,7 +108,7 @@
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
:current="pageInfo.page"
|
||||
:pageSize="pageInfo.pageSize"
|
||||
:pageSize="pageInfo.page_size"
|
||||
:pageSizeOptions="['8', '16', '20', '32', '64']"
|
||||
@change="onPageChange"
|
||||
/>
|
||||
@ -113,15 +122,24 @@
|
||||
<DeleteAccountModal ref="deleteAccountRef" @update="getData" @batchUpdate="onBatchSuccess" />
|
||||
<BatchTagModal ref="batchTagModalRef" @update="onBatchSuccess" />
|
||||
<BatchGroupModal ref="batchGroupModalRef" @update="onBatchSuccess" />
|
||||
|
||||
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="getData" />
|
||||
<ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="getData" />
|
||||
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="getData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, provide } from 'vue';
|
||||
import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
|
||||
import { Checkbox, Button, Pagination, notification, RadioButton, RadioGroup } from 'ant-design-vue';
|
||||
|
||||
import FilterBlock from './components/filter-block';
|
||||
import AccountTable from './components/account-table';
|
||||
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';
|
||||
@ -129,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 } from './constants';
|
||||
import { showImportResultNotification } from '@/utils/arcoD';
|
||||
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,
|
||||
@ -143,13 +165,28 @@ import {
|
||||
|
||||
import icon2 from '@/assets/img/media-account/icon-group.png';
|
||||
import icon3 from '@/assets/img/media-account/icon-tag.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-success.png';
|
||||
// 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';
|
||||
// import icon6 from '@/assets/img/media-account/icon-close.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);
|
||||
@ -157,25 +194,28 @@ 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([]);
|
||||
const isLoadingTaskStatus = ref(false); // 正在查询状态中
|
||||
const showType = ref('card');
|
||||
|
||||
const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
|
||||
const isDisabledBatchSyncData = computed(() => selectedItems.value.some((item) => item.status !== EnumStatus.NORMAL));
|
||||
const hasAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
|
||||
const isDisabledBatchSyncData = computed(() => selectedRows.value.some((item) => item.status !== EnumStatus.NORMAL));
|
||||
|
||||
const checkedAll = computed(() => 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(() => {
|
||||
if (!isAbNormalStatus.value) {
|
||||
if (!hasAbNormalStatus.value) {
|
||||
return '太棒啦！所有账号都在正常运行。';
|
||||
}
|
||||
|
||||
@ -214,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) {
|
||||
@ -233,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();
|
||||
};
|
||||
@ -264,24 +294,16 @@ 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) => {
|
||||
const { id, name } = item;
|
||||
deleteAccountRef.value?.open({ id, name: `"${name || '-'}"` });
|
||||
};
|
||||
const handleCloseTip = () => {
|
||||
selectedItems.value = [];
|
||||
};
|
||||
|
||||
// 先立即执行一次
|
||||
const getAsyncStatus = async () => {
|
||||
const { code, data } = await getMediaAccountSyncStatus();
|
||||
@ -323,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) {
|
||||
@ -339,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 = () => {
|
||||
@ -350,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);
|
||||
|
||||
@ -17,46 +17,52 @@
|
||||
}
|
||||
.tip-row {
|
||||
border-radius: 2px;
|
||||
background: #f0edff;
|
||||
background: #fff;
|
||||
.label {
|
||||
font-family: $font-family-medium;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&.normal {
|
||||
background: #ebf7f2;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
&.abnormal {
|
||||
background: #ffe7e4;
|
||||
background: #FFE9E7;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
.operation-btn {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--Brand-Brand-6, #6d4cfe);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
&:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&.red {
|
||||
color: #f64b31;
|
||||
}
|
||||
&.disabled {
|
||||
color: #c5b7ff;
|
||||
cursor: not-allowed;
|
||||
|
||||
:deep(.ant-checkbox) {
|
||||
+ span {
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-radio-group) {
|
||||
.ant-radio-button-wrapper {
|
||||
color: #737478;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #6D4CFE;
|
||||
border-color: #6D4CFE;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
border-color: #6D4CFE;
|
||||
background: #F0EDFF;
|
||||
color: #6D4CFE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.card-wrap {
|
||||
display: flex;
|
||||
|
||||
159
src/views/property-marketing/media-account/node-detail/index.vue
Normal file
159
src/views/property-marketing/media-account/node-detail/index.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="note-detail-wrap h-full flex flex-col">
|
||||
<div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
|
||||
<icon-left size="16" />
|
||||
<span class="cts ml-8px bold">账号详情</span>
|
||||
</div>
|
||||
|
||||
<!--作品详情-->
|
||||
<div class="bg-#fff rounded-8px px-24px pb-20px max-h-552px flex flex-col mb-16px">
|
||||
<div class="title-row">
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px bold">作品详情</span>
|
||||
<Tooltip title="展示作品的标题、图文、视频等详细内容">
|
||||
<icon-question-circle class="color-#737478" size="14" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-16px cts bold !text-24px !lh-32px">{{ dataSource.title || '-' }}</p>
|
||||
<!-- <div class="mt-16px">-->
|
||||
<!-- <ImagePreviewGroup>-->
|
||||
<!-- <Image-->
|
||||
<!-- :height="100"-->
|
||||
<!-- :width="100"-->
|
||||
<!-- class="rounded-8px mr-8px"-->
|
||||
<!-- src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"-->
|
||||
<!-- />-->
|
||||
<!-- <Image-->
|
||||
<!-- :height="100"-->
|
||||
<!-- :width="100"-->
|
||||
<!-- class="rounded-8px mr-8px"-->
|
||||
<!-- src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"-->
|
||||
<!-- />-->
|
||||
<!-- </ImagePreviewGroup>-->
|
||||
<!-- </div>-->
|
||||
<p class="mt-16px cts whitespace-pre-line">{{ dataSource.content }}</p>
|
||||
</div>
|
||||
|
||||
<!--评论列表-->
|
||||
<div class="bg-#fff rounded-8px pb-12px max-h-422px flex flex-col mb-16px">
|
||||
<div class="title-row !px-24px">
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px bold">评论列表</span>
|
||||
<Tooltip title="展示用户对作品的评论">
|
||||
<icon-question-circle class="color-#737478" size="14" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto !px-24px">
|
||||
<NoData v-if="!dataSource.comments?.length" class="!p-0" />
|
||||
<div
|
||||
v-for="(item, index) in dataSource.comments"
|
||||
v-else
|
||||
:key="index"
|
||||
class="flex items-start justify-between mb-8px"
|
||||
>
|
||||
<TextOverTips :context="item.commenter" class="cts !color-#737478 !w-120px mr-20px" />
|
||||
<div class="flex-1 flex justify-between items-start">
|
||||
<div class="flex-1 flex items-start">
|
||||
<p class="mr-4px cts">{{ item.content }}</p>
|
||||
<p class="cts !color-#737478 flex-shrink-0 num">{{ exactFormatTime(item.commented_at) }}</p>
|
||||
</div>
|
||||
<TextOverTips
|
||||
:context="`${formatNumberShow(item.like_number)}点赞 ${formatNumberShow(item.reply_number)}回复`"
|
||||
class="cts !color-#737478 ml-20px !w-fit max-w-200px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--作品数据-->
|
||||
<div class="bg-#fff rounded-8px px-24px pb-20px h-184px flex flex-col">
|
||||
<div class="title-row">
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px bold">作品数据</span>
|
||||
<Tooltip title="展示作品的曝光量、点赞量等数据指标">
|
||||
<icon-question-circle class="color-#737478" size="14" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 grid grid-cols-4 gap-24px">
|
||||
<div v-for="(item, index) in noteData" :key="index">
|
||||
<div class="flex items-center mb-4px">
|
||||
<span class="cts !color-#737478 mr-4px">{{ item.label }}</span>
|
||||
<Tooltip :title="item.tooltip">
|
||||
<icon-question-circle class="color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<span class="cts num">{{ formatNumberShow(dataSource[item.prop]) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { Image, ImagePreviewGroup, Tooltip } from 'ant-design-vue';
|
||||
import TextOverTips from '@/components/text-over-tips/index.vue';
|
||||
import { exactFormatTime, formatNumberShow } from '@/utils/tools';
|
||||
import { getMediaAccountWorkDetail } from '@/api/all/propertyMarketing';
|
||||
|
||||
const noteData = [
|
||||
{ label: '曝光量', prop: 'exposure_number', tooltip: '内容被展示给用户的总次数，不代表用户实际观看。' },
|
||||
{
|
||||
label: '观看量',
|
||||
prop: 'view_number',
|
||||
tooltip: '用户点击内容并实际观看的次数，是内容实际触达的重要指标。',
|
||||
},
|
||||
{
|
||||
label: '点赞量',
|
||||
prop: 'like_number',
|
||||
tooltip: '单篇笔记获得的点赞总数，反映用户喜好程度。',
|
||||
},
|
||||
{
|
||||
label: '收藏量',
|
||||
prop: 'collect_number',
|
||||
tooltip: '用户将内容保存到收藏夹的次数，代表内容被认可为“值得保留”。',
|
||||
},
|
||||
{
|
||||
label: '评论数',
|
||||
prop: 'comment_number',
|
||||
tooltip: '内容下方用户留言的总数，体现用户参与度与讨论热度。',
|
||||
},
|
||||
{
|
||||
label: '分享量',
|
||||
prop: 'share_number',
|
||||
tooltip: '内容被转发或分享至其他平台或私信的次数，代表外扩传播意愿。',
|
||||
},
|
||||
// {
|
||||
// label: '点击率',
|
||||
// prop: 'cover_click_rate',
|
||||
// tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
|
||||
// },
|
||||
];
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const dataSource = ref({});
|
||||
const handleBack = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { code, data } = await getMediaAccountWorkDetail(route.params.id);
|
||||
if (code === 200) {
|
||||
dataSource.value = data;
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,29 @@
|
||||
.note-detail-wrap {
|
||||
.cts {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
|
||||
&.bold {
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
|
||||
&.num {
|
||||
font-family: $font-family-manrope-regular;
|
||||
}
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-image) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
@ -67,7 +67,7 @@ import {
|
||||
postPlacementAccountDataListExport,
|
||||
} from '@/api/all/propertyMarketing';
|
||||
|
||||
import { showExportNotification } from '@/utils/arcoD';
|
||||
import { showExportNotification } from '@/utils/notification';
|
||||
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
|
||||
// import { downloadByUrl } from '@/utils/tools';
|
||||
|
||||
|
||||
@ -174,7 +174,7 @@ import CommonSelect from '@/components/common-select';
|
||||
|
||||
import { PLATFORM_LIST, ENUM_PUT_ACCOUNT_PLATFORM } from '@/utils/platform';
|
||||
|
||||
import { showExportNotification } from '@/utils/arcoD';
|
||||
import { showExportNotification } from '@/utils/notification';
|
||||
import { genRandomId } from '@/utils/tools';
|
||||
import {
|
||||
postPlacementAccounts,
|
||||
|
||||
@ -102,7 +102,7 @@ import DeleteAccountModal from './components/account-table/delete-account';
|
||||
import { INITIAL_QUERY } from './constants';
|
||||
import { getPlacementAccounts, getPlacementAccountsHealth } from '@/api/all/propertyMarketing';
|
||||
import { getTaskStatus } from '@/api/all/common';
|
||||
import { showImportResultNotification } from '@/utils/arcoD';
|
||||
import { showImportResultNotification } from '@/utils/notification';
|
||||
|
||||
import icon4 from '@/assets/img/media-account/icon-success.png';
|
||||
import icon5 from '@/assets/img/media-account/icon-warn.png';
|
||||
|
||||
@ -72,31 +72,35 @@ export default {
|
||||
};
|
||||
|
||||
const onSubmit = async (action) => {
|
||||
uploadLoading.value = true;
|
||||
const filteredWorks = map(works.value, (work) => omit(work, 'videoInfo'));
|
||||
const { code, data } = await postWorksBatchWriter({ works: filteredWorks }, writerCode.value);
|
||||
if (code === 200) {
|
||||
uploadLoading.value = false;
|
||||
if (action === 'batchUpload') {
|
||||
uploadSuccessModal.value?.open(data);
|
||||
} else {
|
||||
if (action === 'uploadAndCheck') {
|
||||
slsWithCatch('writerManuscriptCheckIds', [data]);
|
||||
router.push({
|
||||
name: 'WriterManuscriptCheck',
|
||||
params: {
|
||||
writerCode: writerCode.value,
|
||||
},
|
||||
});
|
||||
try {
|
||||
uploadLoading.value = true;
|
||||
const filteredWorks = map(works.value, (work) => omit(work, 'videoInfo'));
|
||||
const { code, data } = await postWorksBatchWriter({ works: filteredWorks }, writerCode.value);
|
||||
if (code === 200) {
|
||||
uploadLoading.value = false;
|
||||
if (action === 'batchUpload') {
|
||||
uploadSuccessModal.value?.open(data);
|
||||
} else {
|
||||
router.push({
|
||||
name: 'WriterMaterialCenterFinishedProducts',
|
||||
params: {
|
||||
writerCode: writerCode.value,
|
||||
},
|
||||
});
|
||||
if (action === 'uploadAndCheck') {
|
||||
slsWithCatch('writerManuscriptCheckIds', [data]);
|
||||
router.push({
|
||||
name: 'WriterManuscriptCheck',
|
||||
params: {
|
||||
writerCode: writerCode.value,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
router.push({
|
||||
name: 'WriterMaterialCenterFinishedProducts',
|
||||
params: {
|
||||
writerCode: writerCode.value,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
uploadLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user