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/v1.3_营销资产中台

Browse Source
This commit is contained in:
rd
2025-08-13 16:49:10 +08:00
parent 4e6ba3fb7d 8eaa85ef49
commit b18591e446
177 changed files with 6173 additions and 1721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/components/dataEngine/hotTranslation.vue
View File

@ -133,7 +133,7 @@
</a-space>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
<a-button size="large" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
</template>
</a-modal>
@ -397,14 +397,6 @@ const handleOk = () => {
justify-content: flex-end;
align-items: center;
border-top: 1px solid var(--Border-1, #d7d7d9);
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
}
}
</style>

10
src/views/components/dataEngine/keyWord.vue
View File

@ -260,7 +260,7 @@
</a-space>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
<a-button size="large" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
</template>
</a-modal>
@ -713,14 +713,6 @@ onMounted(() => {
justify-content: flex-end;
align-items: center;
border-top: 1px solid var(--Border-1, #d7d7d9);
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
}
}
</style>

10
src/views/components/dataEngine/userPainPoints.vue
View File

@ -110,7 +110,7 @@
</a-space>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
<a-button size="large" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
</template>
</a-modal>
@ -318,14 +318,6 @@ const search = () => {
justify-content: flex-end;
align-items: center;
border-top: 1px solid var(--Border-1, #d7d7d9);
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
}
}
</style>

13
src/views/components/dataEngine/userPersona.vue
View File

@ -18,16 +18,16 @@
<a-space>
<span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
<span>女性</span>
<span v-if="genderData.length > 0" style="width: 40px">{{ genderData[0].rate * 100 }}%</span>
<span>{{ (girlData.rate * 100).toFixed(2) }}%</span>
<span>TGI</span>
<span v-if="genderData.length > 0">{{ genderData[0].tgi }}</span>
<span>{{ girlData.tgi }}</span>
</a-space>
<a-space>
<span style="width: 8px; height: 8px; background-color: #2a59f3; border-radius: 50%"></span>
<span>男性</span>
<span v-if="genderData.length > 1" style="width: 40px">{{ genderData[1].rate * 100 }}%</span>
<span>{{ (boyData.rate * 100).toFixed(2) }}%</span>
<span>TGI</span>
<span v-if="genderData.length > 1">{{ genderData[1].tgi }}</span>
<span>{{ boyData.tgi }}</span>
</a-space>
</a-space>
</a-space>
@ -145,10 +145,13 @@ const topHeaderRef = ref();
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
const genderData = ref([]);
const genderValueData = ref([]);
const ageValueData = ref([]);
const geoList = ref([]);
const boyData = computed(() => genderData.value.find( v => v.gender === 1) ?? {})
const girlData = computed(() => genderData.value.find( v => v.gender === 2) ?? {})
// 监听筛选条件变化
watch([selectedIndustry, selectedTimePeriod, selectedSubCategory], () => {
getAgeDistributionsList();
@ -233,7 +236,7 @@ const getGenderDistributionsList = async () => {
await nextTick();
genderValueData.value = data.map((item) => ({
value: item.rate * 100,
value: (item.rate * 100).toFixed(2),
tgi: item.tgi,
name: item.gender === 1 ? '女性' : '男性',
}));

22
src/views/components/login/index.vue
View File

@ -54,16 +54,15 @@
</div>
</a-form-item>
<a-form-item hide-label class="mt-68px mb-16px">
<div
<a-button
type="primary"
class="w-480 h-48 text-16px rounded-8px text-center text-white leading-48px"
class="w-480 h-48 !text-16px !rounded-8px"
:class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
:style="{ backgroundColor: disabledSubmitBtn ? '#C5B7FF' : '#6D4CFE' }"
:disabled="disabledSubmitBtn"
@click="handleSubmit"
>
{{ isLogin ? '登录' : '注册并开通企业账号' }}
</div>
</a-button>
</a-form-item>
</a-form>
<a-space class="text-12px color-#737478 justify-start items-center">
@ -126,13 +125,16 @@
<script setup lang="ts">
import PuzzleVerification from './components/PuzzleVerification.vue';
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
import { joinEnterpriseByInviteCode } from '@/api/all';
import { ref, reactive, onUnmounted, computed } from 'vue';
import { useUserStore } from '@/stores';
import { useEnterpriseStore } from '@/stores/modules/enterprise';
import { handleUserLogin } from '@/utils/user';
import router from '@/router';
import { useRoute } from 'vue-router';
const formRef = ref();
const route = useRoute();
const userStore = useUserStore();
const enterpriseStore = useEnterpriseStore();
const countdown = ref(0);
@ -145,7 +147,6 @@ const submitting = ref(false);
const hasCheck = ref(false);
const mobileNumber = ref('');
const selectedAccountIndex = ref(0);
const accounts = ref([]);
const loginForm = reactive({
@ -267,9 +268,9 @@ const getProfileInfo = async () => {
let enterprises = data['enterprises'];
mobileNumber.value = data['mobile'];
accounts.value = enterprises;
enterpriseStore.setEnterpriseInfo(data);
if (enterprises.length > 0) {
enterpriseStore.setEnterpriseInfo(data.enterprises[0]);
if (enterprises.length === 1) {
handleUserLogin();
} else {
@ -300,6 +301,15 @@ const handleSubmit = async () => {
// 处理登录成功逻辑
AMessage.success(isLogin.value ? '登录成功' : '注册成功');
userStore.setToken(data.access_token);
const { invite_code } = route.query;
if (invite_code) {
const { code } = await joinEnterpriseByInviteCode(invite_code as string);
if (code === 200) {
AMessage.success('加入企业成功');
}
}
getProfileInfo();
}
} catch (error) {

18
src/views/components/management/account/index.vue
View File

@ -6,7 +6,7 @@
</div>
<a-table
:columns="columns"
:data="data"
:data="dataSource"
:pagination="pagination"
class="mt-8px h-540px"
@page-change="handlePageChange"
@ -79,7 +79,7 @@ const columns = [
slotName: 'action',
},
];
const data = ref([]);
const dataSource = ref([]);
const pagination = reactive({
total: 0,
showPageSize: true,
@ -99,7 +99,9 @@ const addAccountVisible = ref(false);
const deleteVisible = ref(false);
const deleteTitle = ref('');
const enterpriseInfo = store.enterpriseInfo;
const enterpriseInfo = computed(() => {
return store.enterpriseInfo ?? {};
});
const okText = computed(() => {
if (!canAddAccount.value) {
@ -109,9 +111,9 @@ const okText = computed(() => {
});
const customerServiceVisible = ref(false);
const canAddAccount = computed(() => {
if (!enterpriseInfo) return false;
if (!enterpriseInfo.value) return false;
return enterpriseInfo.sub_account_quota > enterpriseInfo.used_sub_account_count;
return enterpriseInfo.value.sub_account_quota > enterpriseInfo.value.used_sub_account_count;
});
const currentSelectAccount = ref();
@ -130,10 +132,10 @@ function handlePageSizeChange(pageSize: number) {
async function getSubAccount() {
const res = await fetchSubAccountPage(params);
const { data, total, code } = res.data;
const { data, code } = res;
if (code === 200) {
pagination.total = total;
data.value = data;
pagination.total = data.total;
dataSource.value = data?.data ?? [];
}
}
async function handleAddAccount() {

14
src/views/components/management/enterprise/index.vue
View File

@ -48,7 +48,9 @@ const form = reactive({
name: '',
});
const enterpriseInfo = store.enterpriseInfo;
const enterpriseInfo = computed(() => {
return store.enterpriseInfo ?? {};
});
const columns = [
{
@ -65,11 +67,13 @@ const infoVisible = ref(false);
const customerServiceVisible = ref(false);
const dataSource = computed(() => {
return enterpriseInfo ? [enterpriseInfo] : [];
return enterpriseInfo.value ? [enterpriseInfo.value] : [];
});
console.log({ dataSource });
const canUpdate = computed(() => {
if (!enterpriseInfo) return false;
return enterpriseInfo.update_name_quota > enterpriseInfo.used_update_name_count;
if (!enterpriseInfo.value) return false;
return enterpriseInfo.value.update_name_quota > enterpriseInfo.value.used_update_name_count;
});
const okText = computed(() => {
@ -81,7 +85,7 @@ const okText = computed(() => {
function handleUpdate() {
if (!canUpdate.value) {
form.name = enterpriseInfo!.name;
form.name = enterpriseInfo.value?.name;
}
infoVisible.value = true;
}

8
src/views/components/management/person/index.vue
View File

@ -27,7 +27,7 @@
:wrapper-col-props="{ span: 21, offset: 0 }"
>
<a-form-item field="head_image" label="头像">
<div class="flex item-center">
<div class="flex items-center">
<a-avatar :image-url="userInfoForm.file_url" :size="48" />
<span class="upload-button" @click="triggerFileInput">
<input
@ -91,7 +91,9 @@ import axios from 'axios';
import { useUserStore } from '@/stores';
const store = useUserStore();
const userInfo = store.userInfo;
const userInfo = computed(() => {
return store.userInfo ?? {};
});
const columns = [
{
@ -115,7 +117,7 @@ const isSendCaptcha = ref(false);
const uploadInputRef = ref();
const dataSource = computed(() => {
return userInfo ? [userInfo] : [];
return userInfo.value ? [userInfo.value] : [];
});
// 表单校验规则

4
src/views/property-marketing/brands/brand-materials/index.vue
View File

@ -21,13 +21,13 @@
</a-space>
</div>
<div class="filter-row flex">
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

12
src/views/property-marketing/brands/brand-materials/style.scss
View File

@ -3,23 +3,11 @@
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.edit-btn) {
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.table-wrap {
width: 100%;

25
src/views/property-marketing/component.scss
View File

@ -1,29 +1,4 @@
.arco-input-wrapper,
.arco-select-view-single,
.arco-textarea-wrapper,
.arco-picker,
.arco-select-view-multiple {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus,
&.arco-textarea-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.arco-modal {
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
.arco-modal-body {
.arco-form-item {
margin-bottom: 16px;

4
src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
View File

@ -25,13 +25,13 @@
</div>
<div class="filter-row flex">
<a-button class="w-84px search-btn mr-12px" size="medium">
<a-button type="outline" class="mr-12px" size="medium">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium">
<a-button size="medium">
<template #icon>
<icon-refresh />
</template>

4
src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
View File

@ -25,13 +25,13 @@
</div>
<div class="filter-row flex">
<a-button class="w-84px search-btn mr-12px" size="medium">
<a-button type="outline" class="mr-12px" size="medium">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium">
<a-button size="medium">
<template #icon>
<icon-refresh />
</template>

16
src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
View File

@ -15,11 +15,11 @@
>
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<a-button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<template #default>导出数据</template>
</a-button>
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
<a-button type="outline" class="w-110px" size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
</template>
@ -77,11 +77,7 @@
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span>
</div>
<StatusBox :item="record" class="w-fit h-28px" />
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
@ -119,7 +115,7 @@
}}
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
@ -148,7 +144,7 @@
</a-table-column>
<a-table-column data-index="operation" fixed="right" width="100" title="操作">
<template #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
</a-table-column>
</template>
@ -167,7 +163,7 @@ import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getCustomColumns } from '@/api/all/common';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
import { getDefaultColumns, getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
import CustomTableColumnModal from '../custom-column-modal';

41
src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
View File

@ -15,42 +15,11 @@
font-weight: 400;
line-height: 22px;
}
.status-tag {
width: fit-content;
display: flex;
height: 28px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: #f2f3f5;
.status-tag-text {
color: var(--BG-700, #737478);
}
&-1 {
background: #ebf7f2;
.status-tag-text {
color: #25c883;
}
}
&-2,
&-4,
&-5,
&-6,
&-7 {
background: #ffe7e4;
.status-tag-text {
color: #f64b31;
}
}
&-3 {
background: #fff7e5;
color: #ffae00;
.status-tag-text {
color: #ffae00;
}
:deep(.status-box) {
.label {
font-family: $font-family-medium;
font-size: 14px;
line-height: 22px;
}
}
.ai-evaluation-row {

2
src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue
View File

@ -65,7 +65,7 @@
<template #footer>
<div style="text-align: right">
<a-button class="mr-8px cancel-btn" size="medium" @click="close">取消</a-button>
<a-button class="mr-8px" size="medium" @click="close">取消</a-button>
<a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
</div>
</template>

8
src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss
View File

@ -87,13 +87,5 @@
}
}
.arco-modal-footer {
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
}
}

11
src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
View File

@ -19,7 +19,7 @@
<div class="filter-row-item flex items-center">
<span class="label">分组</span>
<a-space class="w-200px">
<GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
<CommonSelect v-model="query.group_ids" :options="groups" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
@ -31,7 +31,7 @@
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
</a-space>
</div>
</div>
@ -47,13 +47,13 @@
</a-select>
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button class="w-84px" size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
@ -66,9 +66,8 @@
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
import CommonSelect from '@/components/common-select';
const props = defineProps({
query: {

13
src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
View File

@ -1,17 +1,4 @@
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

5
src/views/property-marketing/media-account/account-dashboard/index.vue
View File

@ -65,7 +65,8 @@ import AccountTable from './components/account-table';
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
import { formatNumberShow } from '@/utils/tools';
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
import { downloadByUrl } from '@/utils/tools';
// import { downloadByUrl } from '@/utils/tools';
import { showExportNotification } from '@/utils/arcoD';
import icon1 from '@/assets/img/icon-question.png';
@ -139,7 +140,7 @@ const handleExport = () => {
}).then((res) => {
const { code, data } = res;
if (code === 200) {
downloadByUrl(data.download_url);
showExportNotification(`正在下载“${data.name}”，请稍后...`);
}
});
};

10
src/views/property-marketing/media-account/account-dashboard/style.scss
View File

@ -2,16 +2,6 @@
height: 100%;
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
border-radius: 8px;
border: 1px solid #e6e6e8;

53
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'">
@ -56,11 +53,29 @@
</div>
<p class="cts">
<template v-if="field.type === 'status'">
<div class="status-tag" :class="`status-tag-${detailData.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === detailData.status)?.label
}}</span>
<StatusBox :item="detailData" class="w-fit" />
</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'">
{{
@ -72,6 +87,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 +104,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,10 +132,10 @@
<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';
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
@ -119,10 +143,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: '%',
// },
];

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

@ -36,13 +36,13 @@
/>
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button class="w-84px" size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
@ -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();

14
src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
View File

@ -1,18 +1,4 @@
.note-table-wrap {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple),
:deep(.arco-picker) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

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: '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: '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>

10
src/views/property-marketing/media-account/account-detail/style.scss
View File

@ -19,16 +19,6 @@
padding: 10px 0;
align-items: center;
}
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.table-wrap {
width: 100%;

2
src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
View File

@ -15,7 +15,7 @@
<span>确认删除 {{ accountName }} 这个账号吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>

168
src/views/property-marketing/media-account/account-manage/components/account-table/footer-btn.tsx Normal file
View File

@ -0,0 +1,168 @@
import {
EnumStatus,
EnumErrorStatus,
getStatusInfo,
} from '@/views/property-marketing/media-account/components/status-select/status-box';
import { Dropdown, Doption, Button, Tooltip } from '@arco-design/web-vue';
export default defineComponent({
name: 'FooterBtn',
props: {
item: {
type: Object,
default: () => ({}),
},
},
emits: ['syncData', 'handleReauthorize', 'handlePause', 'openDelete', 'openEdit'],
setup(props, { emit }) {
const statusInfo = computed(() => {
const { status, error_status, to_be_expire_for_cookie } = props.item;
return getStatusInfo(status, error_status, to_be_expire_for_cookie) ?? {};
});
const renderEditDoption = () => {
return (
<Doption class="color-#211F24" onClick={() => emit('openEdit', props.item)}>
编辑
</Doption>
);
};
const renderReauthorizeDoption = (text = '重新授权') => {
return (
<Doption class="color-#211F24" onClick={() => emit('handleReauthorize', props.item)}>
{text}
</Doption>
);
};
const renderPauseDoption = () => {
return (
<Doption class="color-#211F24" onClick={() => emit('handlePause', props.item)}>
暂停同步
</Doption>
);
};
const renderUpdateBtn = () => {
return (
<Button type="outline" size="mini" onClick={() => emit('syncData', props.item)}>
更新数据
</Button>
);
};
const renderDeleteDoption = () => {
return (
<Doption class="color-#F64B31" onClick={() => emit('openDelete', props.item)}>
删除
</Doption>
);
};
const renderNormal = () => {
return (
<>
<Dropdown
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
更多
</Button>
),
content: () => (
<>
{renderEditDoption()}
{renderReauthorizeDoption()}
{renderPauseDoption()}
{renderDeleteDoption()}
</>
),
}}
></Dropdown>
{renderUpdateBtn()}
</>
);
};
const renderPause = () => {
return (
<>
<Dropdown
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
更多
</Button>
),
content: () => (
<>
{renderEditDoption()}
{renderDeleteDoption()}
</>
),
}}
></Dropdown>
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
开启同步
</Button>
</>
);
};
// 异常情况
const renderAbnormal = () => {
const { error_status } = props.item;
const isMissing = error_status === EnumErrorStatus.MISSING;
const isUnauthorized = error_status === EnumErrorStatus.UNAUTHORIZED;
const renderSyncBtn = () => {
if (isMissing) {
return renderUpdateBtn();
} else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
return (
<Tooltip content={statusInfo.value.disabledBtnTooltip}>
<Button type="outline" size="mini" disabled>
重新授权
</Button>
</Tooltip>
);
} else {
return (
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
{isUnauthorized ? '去授权' : '重新授权'}
</Button>
);
}
};
return (
<>
<Dropdown
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
更多
</Button>
),
content: () => (
<>
{renderEditDoption()}
{isMissing && renderReauthorizeDoption()}
{renderPauseDoption()}
{renderDeleteDoption()}
</>
),
}}
></Dropdown>
{renderSyncBtn()}
</>
);
};
const renderContent = () => {
const { status } = props.item;
if (status === EnumStatus.NORMAL) {
return renderNormal();
} else if (status === EnumStatus.PAUSE) {
return renderPause();
} else {
return renderAbnormal();
}
};
return () => renderContent();
},
});

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

@ -4,20 +4,31 @@
-->
<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" />
<StatusBox :item="item" />
</div>
<div class="field-row">
<span class="label">数据更新时间</span>
<span class="cts num">{{ getLastSyncedAt(item) }}</span>
</div>
<div class="field-row">
<span class="label">平台</span>
@ -35,6 +46,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">
<a-tooltip
v-if="item.projects.length > 2"
position="bottom"
:content="
item.projects
.slice(2)
.map((v) => v.name)
.join(',')
"
>
<div class="tag-box">
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
</div>
</a-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 class="field-row">
<span class="label">分组</span>
<span class="cts">{{ item.group?.name || '-' }}</span>
@ -64,48 +99,29 @@
</div>
</div>
<div class="operate-row">
<a-dropdown trigger="hover">
<a-button class="w-52px search-btn mr-8px" size="mini">
<template #default>更多</template>
</a-button>
<template #content>
<a-doption class="color-#211F24" @click="openEdit(item)">编辑</a-doption>
<a-doption v-if="showPauseButton(item.status)" class="color-#211F24" @click="handlePause(item)"
>暂停同步</a-doption
>
<a-doption class="color-#F64B31" @click="openDelete(item)">删除</a-doption>
</template>
<a-button class="search-btn" size="mini" @click="onBtnClick(item)">
<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> -->
<FooterBtn
:item="item"
@handleReauthorize="handleReauthorize"
@syncData="syncData"
@openEdit="openEdit"
@openDelete="openDelete"
@handlePause="handlePause"
/>
</div>
</div>
</div>
<div v-if="isSyncFailed(item)" 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">{{ getErrorStatusText(item) }}</span>
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-8px" size="mini" @click="handleCancel(item)">取消</a-button>
<a-button type="outline" size="mini" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
getConfirmBtnText(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,30 +129,49 @@
</template>
<script setup>
import { defineProps, ref, computed } from 'vue';
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import { defineProps, ref, computed, inject } from 'vue';
import { useRouter } from 'vue-router';
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
import {
EnumErrorStatus,
errorStatusMap,
EnumStatus,
} from '@/views/property-marketing/media-account/components/status-select/status-box';
import PauseAccountPatchModal from './pause-account-patch';
import StatusBox from '../status-box';
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/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
// import icon3 from '@/assets/img/media-account/icon-delete.png';
import icon3 from '@/assets/img/media-account/icon-warn.png';
const props = defineProps({
dataSource: {
type: Array,
default: () => [],
},
syncMediaAccounts: {
type: Array,
default: () => [],
},
selectedItems: {
type: Array,
default: () => [],
},
isLoadingTaskStatus: {
type: Boolean,
default: () => false,
},
});
const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete', 'updateSyncStatus']);
const syncData = inject('handleSyncData');
const router = useRouter();
const pauseAccountPatchModalRef = ref(null);
const reauthorizeAccountModalRef = ref(null);
@ -166,9 +201,8 @@ const openDelete = (item) => {
};
const handleReauthorize = (item) => {
console.log({ item });
const { id, platform, status } = item;
const isUnauthorized = isUnauthorizedStatus(status);
const { id, platform, error_status } = item;
const isUnauthorized = isUnauthorizedStatus(error_status);
if (isUnauthorized) {
authorizedAccountModalRef.value?.open(id, platform);
} else {
@ -180,51 +214,70 @@ const handlePause = (item) => {
pauseAccountPatchModalRef.value?.open(item);
};
const showPauseButton = (status) => {
return ![EnumStatus.PAUSE, EnumStatus.UNAUTHORIZED].includes(status);
};
const isUnauthorizedStatus = (status) => {
return [EnumStatus.UNAUTHORIZED].includes(status);
const isUnauthorizedStatus = (error_status) => {
return [EnumErrorStatus.UNAUTHORIZED].includes(error_status);
};
// 三种异常情况
const isAbnormalStatus = (status) => {
return [
EnumStatus.ABNORMAL,
EnumStatus.ABNORMAL_LOGIN,
EnumStatus.ABNORMAL_REQUEST,
EnumStatus.ABNORMAL_FREEZE,
].includes(status);
const goDetail = (item) => {
router.push(`/media-account/detail/${item.id}`);
};
const formatTime = (time) => {
return exactFormatTime(time, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
};
const getTooltipText = (status) => {
return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
const getSyncMediaAccount = (item) => {
return props.syncMediaAccounts.find((v) => v.id === item.id);
};
const isSyncing = (item) => {
if (!props.syncMediaAccounts.length) return false;
return getSyncMediaAccount(item)?.status === 0;
};
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 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);
const onBtnClick = (item) => {
if (isUnauthorizedStatus(item.status)) {
item.status = EnumStatus.ABNORMAL;
item.error_status = error_status;
emits('updateSyncStatus', item);
};
const showConfirmBtn = (item) => {
const error_status = getSyncMediaAccount(item)?.error_status;
return [EnumErrorStatus.MISSING, EnumErrorStatus.LOGIN].includes(error_status);
};
const handleConfirm = (item) => {
const error_status = getSyncMediaAccount(item)?.error_status;
if (error_status === EnumErrorStatus.MISSING) {
syncData(item);
}
if (error_status === EnumErrorStatus.LOGIN) {
handleReauthorize(item);
return;
}
if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
handleReauthorize(item);
return;
}
handlePause(item);
};
const getBtnText = (item) => {
if (isUnauthorizedStatus(item.status)) {
return '去授权';
const getConfirmBtnText = (item) => {
const error_status = getSyncMediaAccount(item)?.error_status;
if (error_status === EnumErrorStatus.MISSING) {
return '重新更新';
}
if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
if (error_status === EnumErrorStatus.LOGIN) {
return '重新授权';
}
return '暂停同步';
};
</script>

2
src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
View File

@ -9,7 +9,7 @@
<span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</a-button>
</template>
</a-modal>

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

@ -1,9 +1,3 @@
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-container {
flex: 1;
display: grid;
@ -17,6 +11,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 +19,7 @@
font-style: normal;
font-weight: 400;
margin-bottom: 11px;
width: fit-content;
// line-height: 22px; /* 157.143% */
}
.label {
@ -78,6 +74,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 +98,8 @@
justify-content: flex-end;
padding-top: 8px;
}
&.checked {
border: 1px solid var(--Brand-6, #6D4CFE);
&.checked {
border: 1px solid var(--Brand-6, #6d4cfe);
}
}
}

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

@ -2,176 +2,32 @@
* @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';
import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
<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 AuthorizedAccountModal from '../authorized-account-modal';
import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '../status-box';
// import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
import SyncDataModal from '../sync-data-modal';
import CommonSelect from '@/components/common-select';
// import { downloadByUrl } from '@/utils/tools';
import { showExportNotification } from '@/utils/arcoD';
import { genRandomId } from '@/utils/tools';
import {
fetchAccountTags,
fetchAccountGroups,
@ -180,14 +36,15 @@ import {
putMediaAccounts,
getTemplateUrl,
batchMediaAccounts,
getProjectList,
} 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']);
// import icon5 from '@/assets/img/media-account/icon-warn-1.png';
// import icon6 from '@/assets/img/media-account/icon-success.png';
const UploadStatus = {
DEFAULT: 'default',
@ -198,201 +55,400 @@ const INITIAL_FORM = {
mobile: '',
operator_name: '',
holder_name: '',
platform: 0,
platform: 1,
group_id: undefined,
tag_ids: [],
project_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 projects = 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));
const syncDataModalRef = ref(null);
const importLoading = 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;
}
};
const getProjects = async () => {
const { code, data } = await getProjectList();
if (code === 200) {
projects.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;
importLoading.value = false;
uploadStatus.value = UploadStatus.DEFAULT;
}
});
}
const reset = () => {
formRef.value?.resetFields();
formRef.value?.clearValidate();
groupOptions.value = [];
tagOptions.value = [];
projects.value = [];
form.value = cloneDeep(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();
getProjects();
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;
}
const startAuthorized = (id, platform) => {
authorizedAccountModalRef.value.open(id, platform);
importLoading.value = true;
const formData = new FormData();
formData.append('file', file.value);
const { code, data } = await batchMediaAccounts(formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
if (code === 200) {
const id = genRandomId();
showExportNotification(`正在导入“${file.value.name}”，请稍后...`, { id });
emit('startQueryTaskStatus', data.id, id);
onClose();
} else {
uploadStatus.value = UploadStatus.ERROR;
}
} catch (error) {
uploadStatus.value = UploadStatus.ERROR;
} finally {
importLoading.value = false;
}
};
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 renderLabel = (label, tooltipContent) => {
return (
<>
<span class="label">{label}</span>
<Tooltip content={tooltipContent}>
<icon-question-circle size="14" class="ml-4px color-#737478" />
</Tooltip>
</>
);
};
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 item={form.value} />
</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="所属项目">
<CommonSelect
v-model={form.value.project_ids}
options={projects.value}
placeholder="请选择…"
size="large"
/>
</FormItem>
<FormItem label="选择分组">
<CommonSelect
v-model={form.value.group_id}
multiple={false}
options={groupOptions.value}
placeholder="请选择…"
size="large"
/>
</FormItem>
<FormItem label="选择标签">
<CommonSelect 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"
auto-size={{ minRows: 3, maxRows: 5 }}
/>
</FormItem>
<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"
auto-size={{ minRows: 5, maxRows: 8 }}
/>
</FormItem>
)}
</>
)}
</Form>
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
<Button size="large" 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">

20
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" />
@ -78,15 +76,10 @@
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" class="cancel-btn" @click="handleRefreshQrCode">
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<a-button
v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
size="large"
class="cancel-btn"
@click="close"
>
<a-button v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)" size="large" @click="close">
取消
</a-button>
<a-button type="primary" size="large" @click="handleOk">
@ -94,12 +87,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 +123,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 +137,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 +296,7 @@ const handleOk = () => {
// 授权成功，关闭弹窗
if (modalState.value === MODAL_STATE.SUCCESS) {
syncDataModalRef.value.open(id.value);
close();
return;
}

8
src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
View File

@ -30,7 +30,7 @@
<a-form-item label="选择分组" required>
<template v-if="editType === 'all'">
<div class="flex items-center w-100%">
<GroupSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
<CommonSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
</div>
</template>
</a-form-item>
@ -47,7 +47,7 @@
<a-table-column title="选择分组" data-index="group_id">
<template #cell="{ record }">
<div class="flex items-center w-100%">
<GroupSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
</div>
</template>
</a-table-column>
@ -56,7 +56,7 @@
</template>
</a-form>
<template #footer>
<a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
</template>
</a-modal>
@ -65,7 +65,7 @@
<script setup>
import { ref, reactive } from 'vue';
import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
import CommonSelect from '@/components/common-select';
import icon1 from '@/assets/img/icon-question.png';

2
src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
View File

@ -76,7 +76,7 @@
</template>
</a-form>
<template #footer>
<a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
</template>
</a-modal>

48
src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
View File

@ -33,16 +33,20 @@
<span class="label">平台</span>
<a-space class="w-160px">
<a-select v-model="query.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
item.label
}}</a-option>
<a-option
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
:key="index"
:value="item.value"
:label="item.label"
>{{ item.label }}</a-option
>
</a-select>
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
</a-space>
</div>
</div>
@ -50,22 +54,28 @@
<div class="filter-row-item flex items-center">
<span class="label">分组</span>
<a-space class="w-200px">
<GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">所属项目</span>
<a-space class="w-200px">
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">标签</span>
<a-space class="w-320px">
<TagSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
<CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button class="w-84px" size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
@ -77,13 +87,17 @@
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { fetchAccountTags, fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
import {
fetchAccountTags,
getProjectList,
fetchAccountGroups,
fetchAccountOperators,
} from '@/api/all/propertyMarketing';
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
import CommonSelect from '@/components/common-select';
import { INITIAL_QUERY, PLATFORM_LIST } from '@/views/property-marketing/media-account/account-manage/constants';
import { INITIAL_QUERY } from '@/views/property-marketing/media-account/account-manage/constants';
import { MEDIA_ACCOUNT_PLATFORMS } from '@/utils/platform';
const props = defineProps({
query: {
@ -97,6 +111,7 @@ const emits = defineEmits('onSearch', 'onReset', 'update:query');
const tags = ref([]);
const groups = ref([]);
const operators = ref([]);
const projects = ref([]);
const handleSearch = () => {
emits('update:query', props.query);
@ -127,11 +142,18 @@ const getOperators = async () => {
operators.value = data;
}
};
const getProjects = async () => {
const { code, data } = await getProjectList();
if (code === 200) {
projects.value = data;
}
};
onMounted(() => {
getTags();
getGroups();
getOperators();
getProjects();
});
defineExpose({

13
src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
View File

@ -1,17 +1,4 @@
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

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

@ -16,7 +16,7 @@
</a-form-item>
</a-form>
<template #footer>
<a-button class="cancel-btn" @click="onClose">取消</a-button>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
</template>
</a-modal>

2
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
View File

@ -9,7 +9,7 @@
<span>确认删除 "{{ groupName }}" 这个分组吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>

2
src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
View File

@ -21,7 +21,7 @@
</div>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="close">取消</a-button>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
</template>
</a-modal>

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

@ -92,13 +92,12 @@
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" class="cancel-btn" @click="handleRefreshQrCode">
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<a-button
v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
size="large"
class="cancel-btn"
@click="close"
>
取消
@ -108,12 +107,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 +144,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 +158,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 +321,7 @@ const handleOk = () => {
console.log('确定覆盖');
// 这里可以添加覆盖逻辑
} else {
syncDataModalRef.value.open(id.value);
close();
}
return;

97
src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
View File

@ -1,97 +0,0 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 15:31:15
-->
<template>
<div class="status-box" :class="`status-box-${status}`">
<span class="text">{{ statusText }}</span>
<a-tooltip v-if="showTooltip" :content="tooltipText">
<img v-if="showIcon" :src="iconSrc" width="12" height="12" class="ml-4px" />
</a-tooltip>
</div>
</template>
<script setup>
import { computed } from 'vue';
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
const props = defineProps({
status: {
type: Number,
required: true,
},
});
const statusText = computed(() => {
return STATUS_LIST.find((v) => v.value === props.status)?.label ?? '-';
});
const showTooltip = computed(() => {
return isDisabledReauthorize(props.status);
});
const tooltipText = computed(() => {
return STATUS_LIST.find((v) => v.value === props.status)?.tooltip ?? '-';
});
const showIcon = computed(() => {
return ![EnumStatus.NORMAL, EnumStatus.UNAUTHORIZED].includes(props.status);
});
const iconSrc = computed(() => {
return props.status === EnumStatus.PAUSE ? iconWarn1 : iconWarn2;
});
// 判断是否为禁用重新授权的状态
const isDisabledReauthorize = (status) => {
return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
};
</script>
<style scoped lang="scss">
.status-box {
display: flex;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: #f2f3f5;
.text {
color: var(--BG-700, #737478);
font-family: $font-family-medium;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
&-1 {
background: #ebf7f2;
.text {
color: #25c883;
}
}
&-2,
&-4,
&-5,
&-6,
&-7 {
background: #ffe7e4;
.text {
color: #f64b31;
}
}
&-3 {
background: #fff7e5;
color: #ffae00;
.text {
color: #ffae00;
}
}
}
</style>

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" @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% */
}
}
}

6
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
View File

@ -1,7 +1,3 @@
<!--
* @Author: AI
* @Date: 2025-06-27
-->
<template>
<a-modal
v-model:visible="visible"
@ -16,7 +12,7 @@
</a-form-item>
</a-form>
<template #footer>
<a-button class="cancel-btn" @click="onClose">取消</a-button>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
</template>
</a-modal>

2
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
View File

@ -9,7 +9,7 @@
<span>确认删除 "{{ tagName }}" 这个标签吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>

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

@ -9,11 +9,12 @@ export const INITIAL_QUERY = {
operator_id: '',
group_ids: [],
tag_ids: [],
project_ids: [],
};
export const INITIAL_PAGE_INFO = {
page: 1,
pageSize: 8,
pageSize: 20,
total: 0,
};

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

@ -8,19 +8,19 @@
<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">
<a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenTagsModal">
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenTagsModal">
<template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>标签管理</template>
</a-button>
<a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenGroupModal">
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
</template>
<template #default>分组管理</template>
</a-button>
<a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
<template #icon>
<img :src="icon1" width="16" height="16" />
</template>
@ -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>
@ -67,7 +70,7 @@
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
<a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
</a-space>
@ -76,12 +79,15 @@
<div class="card-wrap">
<AccountTable
v-if="dataSource.length > 0"
:syncMediaAccounts="syncMediaAccounts"
:isLoadingTaskStatus="isLoadingTaskStatus"
:dataSource="dataSource"
:selectedItems="selectedItems"
@selectionChange="handleSelectionChange"
@delete="handleDelete"
@openEdit="handleOpenEdit"
@update="getData"
@updateSyncStatus="handleUpdateSyncStatus"
/>
<NoData v-else />
@ -91,7 +97,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"
@ -102,7 +109,7 @@
<GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
<TagsManageModal ref="tagsManageModalRef" @update="filterBlockRef?.getTags" />
<AddAccountModal ref="addAccountModalRef" @update="getData" />
<AddAccountModal ref="addAccountModalRef" @update="getData" @startQueryTaskStatus="handleGetImportTaskStatus" />
<DeleteAccountModal ref="deleteAccountRef" @update="getData" @batchUpdate="onBatchSuccess" />
<BatchTagModal ref="batchTagModalRef" @update="onBatchSuccess" />
@ -111,7 +118,8 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, provide } from 'vue';
import { Notification } from '@arco-design/web-vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
@ -123,7 +131,16 @@ import BatchTagModal from './components/batch-tag-modal';
import BatchGroupModal from './components/batch-group-modal';
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
import { showImportResultNotification } from '@/utils/arcoD';
import { getTaskStatus } from '@/api/all/common';
import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
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 +149,9 @@ 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;
let queryTaskTimer = null;
const groupManageModalRef = ref(null);
const tagsManageModalRef = ref(null);
const addAccountModalRef = ref(null);
@ -145,8 +165,11 @@ const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const selectedItems = ref([]);
const healthData = ref({});
const syncMediaAccounts = ref([]);
const isLoadingTaskStatus = ref(false); // 正在查询状态中
const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
const isAbNormalStatus = computed(() => healthData.value?.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(
@ -159,7 +182,7 @@ const tipLabel = computed(() => {
}
const {
total_abnormal_number = 0,
abnormal_number = 0,
login_invalid_number = 0,
too_many_requests_number = 0,
account_frozen_number = 0,
@ -172,16 +195,13 @@ const tipLabel = computed(() => {
{ count: too_many_requests_number, label: '请求频繁' },
{ count: account_frozen_number, label: '账号被封' },
{ count: miss_data_number, label: '数据缺失' },
// { count: abnormal_number, label: '其他异常' },
];
// 过滤出有异常的项并格式化
const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
onMounted(() => {
getData();
return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
const getData = () => {
@ -262,10 +282,62 @@ 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();
isLoadingTaskStatus.value = false;
getData();
}
}
};
const handleUpdateSyncStatus = (item) => {
const target = syncMediaAccounts.value.find((v) => v.id === item.id);
if (target) {
target.status = EnumStatus.NORMAL;
}
};
const startSyncDataPolling = () => {
isLoadingTaskStatus.value = true;
clearSyncDataTimer();
getAsyncStatus();
syncDataTimer = setInterval(getAsyncStatus, 3000);
};
const handleSyncData = async (item) => {
const { code } = await postSyncMediaAccountData(item.id);
if (code === 200) {
if (!isLoadingTaskStatus.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 (!isLoadingTaskStatus.value) {
startSyncDataPolling();
}
}
};
const handleBatchGroup = () => {
batchGroupModalRef.value?.open(selectedItems.value);
};
@ -274,9 +346,49 @@ const onBatchSuccess = () => {
getData();
};
const handleOpenAbnormalAccount = () => {
query.value.status = 2;
query.value.status = 3;
reload();
};
// 查询导入账号任务状态
const getSyncTaskStatus = async (id, notificationId) => {
const { code, data } = await getTaskStatus(id);
if (code === 200) {
if (data?.status !== 0) {
clearQueryTaskTimer();
notificationId && Notification.remove(notificationId);
showImportResultNotification(data);
getData();
}
}
};
const handleGetImportTaskStatus = (id, notificationId) => {
clearQueryTaskTimer();
getSyncTaskStatus(id, notificationId);
queryTaskTimer = setInterval(() => getSyncTaskStatus(id, notificationId), 3000);
};
const clearSyncDataTimer = () => {
if (syncDataTimer) {
clearInterval(syncDataTimer);
syncDataTimer = null;
}
};
const clearQueryTaskTimer = () => {
if (queryTaskTimer) {
clearInterval(queryTaskTimer);
queryTaskTimer = null;
}
};
onMounted(() => {
getData();
});
onUnmounted(() => {
clearSyncDataTimer();
clearQueryTaskTimer();
});
provide('handleSyncData', handleSyncData);
</script>
<style scoped lang="scss">

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

@ -2,16 +2,6 @@
height: 100%;
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
.top {
.title {
@ -47,20 +37,11 @@
color: #211f24;
}
}
.err-btn {
background-color: #f64b31 !important;
color: var(--BG-white, #fff);
font-family: 'PingFang SC';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
.operation-btn {
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 +52,10 @@
&.red {
color: #F64B31;
}
&.disabled {
color: #C5B7FF;
cursor: not-allowed;
}
}
}
.card-wrap {

63
src/views/property-marketing/media-account/components/group-select/index.vue
View File

@ -1,63 +0,0 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedGroups"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
modelValue: {
type: [Array, String, Number],
default: () => [],
},
multiple: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: '全部',
},
options: {
type: Array,
default: () => [],
},
});
const emits = defineEmits(['update:modelValue', 'change']);
const selectedGroups = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedGroups.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedGroups, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedGroups.value = value;
emits('change', value);
};
</script>

64
src/views/property-marketing/media-account/components/operator-select/index.vue
View File

@ -1,64 +0,0 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedOperators"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
modelValue: {
type: [Array, String, Number],
default: () => [],
},
multiple: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: '全部',
},
options: {
type: Array,
default: () => [],
},
});
const emits = defineEmits(['update:modelValue', 'change']);
const selectedOperators = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedOperators.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedOperators, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedOperators.value = value;
emits('change', value);
};
</script>

87
src/views/property-marketing/media-account/components/status-select/constants.ts
View File

@ -2,59 +2,82 @@
* @Author: RenXiaoDong
* @Date: 2025-07-04 11:18:11
*/
export enum EnumStatus {
UNAUTHORIZED = 0,
NORMAL = 1,
ABNORMAL = 2,
PAUSE = 3,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
ABNORMAL_MISSING = 7,
export enum EnumAccountStatus {
UNAUTHORIZED = 0, // 未授权
NORMAL = 1, // 正常
PAUSE = 2, // 暂停同步
ABNORMAL = 3, // 全部异常
ABNORMAL_LOGIN = 4, // 异常（登录状态失效）
ABNORMAL_REQUEST = 5, // 异常（请求频繁）
ABNORMAL_FREEZE = 6, // 异常（账号被封）
ABNORMAL_MISSING = 7, // 异常（数据缺失）
ABNORMAL_EXPIRED = 8, // 即将过期
}
export const STATUS_LIST = [
{
text: '正常',
label: '正常',
value: EnumStatus.NORMAL,
value: EnumAccountStatus.NORMAL,
},
{
text: '即将过期',
label: '即将过期',
value: EnumAccountStatus.ABNORMAL_EXPIRED,
},
{
text: '暂停同步',
label: '暂停同步',
value: EnumStatus.PAUSE,
value: EnumAccountStatus.PAUSE,
},
{
text: '未授权',
label: '未授权',
value: EnumStatus.UNAUTHORIZED,
},
{
text: '异常',
text: '全部异常',
label: '异常',
value: EnumStatus.ABNORMAL,
value: EnumAccountStatus.ABNORMAL,
},
{
text: '数据缺失',
label: '数据缺失',
value: EnumStatus.ABNORMAL_MISSING,
},
{
text: '异常-登录状态失效',
text: '异常（未授权）',
label: '异常',
value: EnumStatus.ABNORMAL_LOGIN,
tooltip: '登录状态失效，需重新扫码授权',
value: EnumAccountStatus.UNAUTHORIZED,
tooltip: '未授权',
style: {
'padding-left': '24px',
},
},
{
text: '异常-请求过于频繁',
text: '异常（数据缺失）',
label: '异常',
value: EnumStatus.ABNORMAL_REQUEST,
tooltip: '请求过于频繁，需等待24小时后重试',
value: EnumAccountStatus.ABNORMAL_MISSING,
tooltip: '数据缺失',
style: {
'padding-left': '24px',
},
},
{
text: '异常-账号被冻结/封禁',
text: '异常（登录状态失效）',
label: '异常',
value: EnumStatus.ABNORMAL_FREEZE,
tooltip: '账号被冻结/封禁',
value: EnumAccountStatus.ABNORMAL_LOGIN,
tooltip: '登录状态失效',
style: {
'padding-left': '24px',
},
},
{
text: '异常（请求频繁）',
label: '异常',
value: EnumAccountStatus.ABNORMAL_REQUEST,
tooltip: '请求频繁，等待24小时后重试',
style: {
'padding-left': '24px',
},
},
{
text: '异常（账号被封）',
label: '异常',
value: EnumAccountStatus.ABNORMAL_FREEZE,
tooltip: '账号被封',
style: {
'padding-left': '24px',
},
},
];

10
src/views/property-marketing/media-account/components/status-select/index.vue
View File

@ -11,7 +11,13 @@
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
<a-option
v-for="(item, index) in STATUS_LIST"
:key="index"
:value="item.value"
:label="item.text"
:style="item.style"
>
{{ item.text }}
</a-option>
</a-select>
@ -19,7 +25,7 @@
<script setup>
import { ref, watch } from 'vue';
import { STATUS_LIST } from './constants';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
const props = defineProps({
modelValue: {

147
src/views/property-marketing/media-account/components/status-select/status-box.tsx Normal file
View File

@ -0,0 +1,147 @@
import { defineComponent, computed } from 'vue';
import { Tooltip } from '@arco-design/web-vue';
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
import icon1 from '@/assets/img/media-account/icon-schedule.png';
export enum EnumErrorStatus {
NORMAL = 0, // 正常
UNAUTHORIZED = 1, // 未授权
LOGIN = 2, // 登录状态失效
REQUEST = 3, // 请求过于频繁
FREEZE = 4, // 账号被冻结/封禁
MISSING = 5, // 数据缺失
UNKNOWN = 6, // 未知异常
}
export enum EnumStatus {
ABNORMAL = 0, // 异常
NORMAL = 1, // 正常
PAUSE = 2, // 暂停同步
}
export enum EnumExpireForCookie {
NORMAL = 0, // 正常
EXPIRE = 1, // 即将过期
}
const normalStyle = {
color: '#25c883',
background: '#ebf7f2',
};
const abnormalStyle = {
color: '#f64b31',
background: '#ffe7e4',
};
const pauseStyle = {
color: '#ffae00',
background: '#fff7e5',
};
export const errorStatusMap = new Map([
[1, { tooltip: '未授权', text: '未授权' }],
[2, { tooltip: '登录状态失效', text: '登录状态失效' }],
[3, { tooltip: '请求频繁，等待24小时后重试', btnTooltip: '请求频繁，等待24小时后重试', text: '请求过于频繁' }],
[4, { tooltip: '账号被冻结', btnTooltip: '账号被封，解封后才能操作', text: '账号被冻结' }],
[5, { tooltip: '数据缺失', text: '数据缺失' }],
[6, { tooltip: '未知错误', text: '未知错误' }],
]);
/**
*
* @param status 状态 0-异常，1-正常，2-暂停同步
* @param error_status 异常状态 0-无异常，1-未授权，2-登录状态失效，3-请求过于频繁，4-账号被冻结/封禁，5-数据缺失，6-未知错误
* @param to_be_expire_for_cookie cookie是否即将过期 0-否，1-是
* @returns
*/
export const getStatusInfo = (
status: EnumStatus,
error_status: EnumErrorStatus,
to_be_expire_for_cookie: EnumExpireForCookie,
) => {
const statusInfo = { color: '', background: '', label: '', tooltip: '', disabledBtnTooltip: '' };
if (status === EnumStatus.ABNORMAL) {
statusInfo.color = abnormalStyle.color;
statusInfo.background = abnormalStyle.background;
statusInfo.label = '异常';
const target = errorStatusMap.get(error_status);
statusInfo.tooltip = target?.tooltip ?? '';
statusInfo.disabledBtnTooltip = target?.btnTooltip ?? '';
} else if (status === EnumStatus.NORMAL) {
if (to_be_expire_for_cookie === EnumExpireForCookie.NORMAL) {
statusInfo.color = normalStyle.color;
statusInfo.background = normalStyle.background;
statusInfo.label = '正常';
} else {
statusInfo.color = abnormalStyle.color;
statusInfo.background = abnormalStyle.background;
statusInfo.label = '即将过期';
}
} else if (status === EnumStatus.PAUSE) {
statusInfo.color = pauseStyle.color;
statusInfo.background = pauseStyle.background;
statusInfo.label = '暂停同步';
statusInfo.tooltip = '暂停同步';
}
return statusInfo;
};
export default defineComponent({
name: 'StatusBox',
props: {
item: {
type: Object,
default: () => ({}),
},
},
setup(props) {
const statusInfo = computed(() => {
const { status, error_status, to_be_expire_for_cookie } = props.item;
return getStatusInfo(status, error_status, to_be_expire_for_cookie) ?? {};
});
const renderContent = () => {
const { to_be_expire_for_cookie, status } = props.item;
const { background, color, label } = statusInfo.value;
if (status === EnumStatus.NORMAL) {
return (
<div class="flex items-center status-box">
{to_be_expire_for_cookie === EnumExpireForCookie.EXPIRE && (
<div class="flex items-center rounded-2px px-8px mr-8px" style={{ background, color }}>
<img src={icon1} width="12" height="12" class="mr-4px" />
<span class="text-12px lh-20px font-400 label">{label}</span>
</div>
)}
<div
class="flex items-center rounded-2px px-8px"
style={{ background: normalStyle.background, color: normalStyle.color }}
>
<span class="text-12px lh-20px font-400">正常</span>
</div>
</div>
);
}
return (
<div class="flex items-center rounded-2px px-8px status-box" style={{ background, color }}>
<span class="text-12px lh-20px font-400 label">{label}</span>
{status === EnumStatus.PAUSE ? (
<img src={iconWarn1} width="12" height="12" class="ml-4px" />
) : (
<Tooltip content={statusInfo.value.tooltip}>
<img src={iconWarn2} width="12" height="12" class="ml-4px" />
</Tooltip>
)}
</div>
);
};
return () => renderContent();
},
});

64
src/views/property-marketing/media-account/components/tag-select/index.vue
View File

@ -1,64 +0,0 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedTags"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
modelValue: {
type: [Array, String, Number],
default: () => [],
},
multiple: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: '全部',
},
options: {
type: Array,
default: () => [],
},
});
const emits = defineEmits(['update:modelValue', 'change']);
const selectedTags = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedTags.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedTags, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedTags.value = value;
emits('change', value);
};
</script>

156
src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<a-modal
v-model:visible="visible"
title="添加项目"
modal-class="add-project-modal"
width="960px"
:mask-closable="false"
@close="onClose"
>
<div class="content">
<a-steps changeable :current="currentStep" @change="setCurrent" class="mb-24px mx-79px">
<a-step v-for="(step, index) in STEPS" :key="index">{{ step.label }}</a-step>
</a-steps>
<component :is="activeComp" v-model:formQuery="formQuery" ref="compRef" />
</div>
<template #footer>
<div class="flex justify-between items-center w-100%">
<div>
<a-button type="outline" size="medium" @click="onPrev" v-if="!isFirstStep">上一步</a-button>
</div>
<div class="flex items-center">
<a-button size="medium" class="mr-8px" @click="onCancel">取消</a-button>
<a-button type="primary" size="medium" @click="onSubmit">{{ isLastStep ? '确认添加' : '下一步' }}</a-button>
</div>
</div>
</template>
</a-modal>
</template>
<script setup>
import { postAddProject, putProject, getProjectDetail } from '@/api/all/propertyMarketing';
import StepOne from './stepOne.vue';
import StepTwo from './stepTwo.vue';
import StepThree from './stepThree.vue';
import StepFour from './stepFour.vue';
const STEPS = [
{
label: '项目信息',
index: 1,
comp: StepOne,
},
{
label: '关联平台账号',
index: 2,
comp: StepTwo,
},
{
label: '关联渠道账户',
index: 3,
comp: StepThree,
},
{
label: '关联内容稿件',
index: 4,
comp: StepFour,
},
];
const INITIAL_QUERY = {
name: '',
budget: '',
target: '',
background: '',
media_account_ids: [],
placement_account_ids: [],
work_ids: [],
};
const update = inject('update');
const visible = ref(false);
const currentStep = ref(1);
const formQuery = ref(cloneDeep(INITIAL_QUERY));
const compRef = ref(null);
const projectId = ref(null);
const isFirstStep = computed(() => currentStep.value === 1);
const isEdit = computed(() => projectId.value);
const isLastStep = computed(() => currentStep.value === STEPS.length);
const activeComp = computed(() => STEPS.find((v) => v.index === currentStep.value)?.comp ?? null);
const open = (id = null) => {
projectId.value = id;
if (id) {
getDetail();
}
visible.value = true;
};
const getDetail = (id) => {
getProjectDetail(projectId.value).then((res) => {
if (res.code === 200) {
formQuery.value = res.data;
}
});
};
const onClose = () => {
currentStep.value = 1;
formQuery.value = cloneDeep(INITIAL_QUERY);
projectId.value = '';
compRef.value?.reset?.();
visible.value = false;
};
const onCancel = () => {
visible.value = false;
};
const onSubmit = async () => {
if (isFirstStep.value) {
const valid = await compRef.value.validate();
if (!valid) {
return;
}
}
if (isLastStep.value) {
isEdit.value ? handleEdit() : handleAdd();
} else {
currentStep.value++;
}
};
const handleAdd = () => {
postAddProject(formQuery.value).then((res) => {
if (res.code === 200) {
onClose();
update();
}
});
};
const handleEdit = () => {
putProject({ id: projectId.value, ...formQuery.value }).then((res) => {
if (res.code === 200) {
onClose();
update();
}
});
};
const setCurrent = async (current) => {
if (isFirstStep.value) {
const valid = await compRef.value.validate();
if (!valid) {
return;
}
}
currentStep.value = current;
};
const onPrev = () => {
currentStep.value--;
};
defineExpose({ open });
</script>

267
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue Normal file
View File

@ -0,0 +1,267 @@
<template>
<div class="table-wrap flex h-448px">
<div class="left flex-1 pr-12px flex flex-col">
<div class="flex items-center mb-16px">
<a-input
v-model="query.uid"
class="w-160px mr-16px"
placeholder="搜索序号"
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
<a-input
v-model="query.title"
class="w-220px mr-16px"
placeholder="搜索内容稿件标题"
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
<a-select
v-model="query.uploader_id"
size="medium"
placeholder="选择上传人员"
class="w-160px"
allow-clear
@change="handleSearch"
>
<a-option v-for="(item, index) in uploaders" :key="index" :value="item.id" :label="item.name">
{{ item.name || '-' }}
</a-option>
</a-select>
</div>
<a-table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #empty>
<NoData text="暂无账户" />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template #cell="{ record }">
<template v-if="column.dataIndex === 'created_at'">
{{ exactFormatTime(record.created_at) }}
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</a-table-column>
</template>
</a-table>
</div>
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
<p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
<a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
</div>
<div class="flex-1 overflow-y-auto overflow-x-hidden">
<template v-if="selectedRows?.length">
<div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
<a-tooltip :content="item.name">
<p class="name mr-4px">{{ item.name || '-' }}</p>
</a-tooltip>
<icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
</div>
</template>
<NoData v-else text="暂无账户" />
</div>
</div>
</div>
</template>
<script setup>
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
import { getUserList } from '@/api/all/common';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
const TABLE_COLUMNS = [
{
title: '序号',
dataIndex: 'uid',
width: 80,
},
{
title: '内容稿件标题',
dataIndex: 'title',
},
{
title: '上传时间',
dataIndex: 'created_at',
width: 120,
},
{
title: '上传人员',
dataIndex: 'uploader.name',
width: 120,
},
];
const emit = defineEmits(['update:formQuery']);
const props = defineProps({
formQuery: {
type: Object,
default: () => {},
},
});
const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const query = ref({
uid: '',
uploader_id: '',
title: '',
});
const uploaders = ref([]);
const allData = ref([]);
const updateFormQuery = () => {
emit('update:formQuery', {
...props.formQuery,
work_ids: selectedRowKeys.value,
});
};
const handleSearch = () => {
const { uid, title, uploader_id } = query.value;
dataSource.value = allData.value.filter((item) => {
const uinMatch = uid === '' ? true : item.uid.includes(uid);
const titleMatch = title === '' ? true : item.title === title;
const operatorIdMatch = uploader_id === '' ? true : item.uploader?.id === uploader_id;
return uinMatch && titleMatch && operatorIdMatch;
});
};
const getUsers = async () => {
const { code, data } = await getUserList();
if (code === 200) {
uploaders.value = data.map( v => ({
...v,
name: v.name || v.mobile
}));
console.log(uploaders.value);
}
};
const getTableData = async () => {
const { code, data } = await getWorksList();
if (code === 200) {
allData.value = data ?? [];
dataSource.value = data ?? [];
initSelect();
}
};
const initSelect = () => {
if (props.formQuery.work_ids?.length) {
selectedRowKeys.value = props.formQuery.work_ids;
selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
}
};
const onClearSelect = () => {
selectedRowKeys.value = [];
selectedRows.value = [];
updateFormQuery();
};
const onDelete = (item) => {
const { id } = item;
selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
updateFormQuery();
};
onMounted(() => {
getUsers();
getTableData();
});
</script>
<style lang="scss" scoped>
.table-wrap {
.s1 {
color: var(--Text-2, #3c4043);
font-family: font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.left {
border-right: 1px solid var(--Border-2, #e6e6e8);
:deep(.arco-table) {
}
}
.right {
.tag-item {
max-width: 100%;
width: fit-content;
overflow: hidden;
display: flex;
height: 24px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
.name {
color: var(--Text-2, #3c4043);
font-family: font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
flex: 1;
@include ellipsis;
}
}
}
}
</style>

54
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<a-form ref="formRef" :model="formQuery" :rules="rules" layout="horizontal" auto-label-width class="h-448px">
<a-form-item label="项目名称" required field="name">
<a-input v-model="formQuery.name" placeholder="请输入项目名称" size="large" class="!w-400px" />
</a-form-item>
<a-form-item label="项目预算" field="budget">
<a-input v-model="formQuery.budget" placeholder="请输入项目预算" size="large" class="!w-400px" />
</a-form-item>
<a-form-item label="项目目标" field="target">
<a-textarea
v-model="formQuery.target"
placeholder="请输入项目目标"
:max-length="500"
show-word-limit
class="h-154px"
/>
</a-form-item>
<a-form-item label="项目背景" field="background">
<a-textarea
v-model="formQuery.background"
placeholder="请输入项目背景"
:max-length="500"
show-word-limit
class="h-154px"
/>
</a-form-item>
</a-form>
</template>
<script setup>
const props = defineProps({
formQuery: {
type: Object,
default: () => {},
},
});
const formRef = ref(null);
const rules = {
name: [{ required: true, message: '请输入项目名称' }],
};
const validate = async () => {
const errors = await formRef.value.validate();
return !errors
};
const reset = () => {
formRef.value.resetFields();
};
defineExpose({ validate, reset });
</script>

259
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue Normal file
View File

@ -0,0 +1,259 @@
<template>
<div class="table-wrap flex h-448px">
<div class="left flex-1 pr-12px flex flex-col">
<div class="flex items-center mb-16px">
<a-input
v-model="query.name"
class="w-220px mr-16px"
placeholder="搜索账户"
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
<a-select
v-model="query.platform"
class="mr-16px w-160px"
size="medium"
placeholder="选择平台"
allow-clear
@change="handleSearch"
>
<a-option
v-for="(item, index) in PLATFORM_LIST"
:key="index"
:value="item.value"
:label="item.label"
>{{ item.label }}</a-option
>
</a-select>
<a-select
v-model="query.operator_id"
size="medium"
placeholder="选择运营人员"
class="w-160px"
allow-clear
@change="handleSearch"
>
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</div>
<a-table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #empty>
<NoData text="暂无账户"/>
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template #cell="{ record }">
<template v-if="column.dataIndex === 'platform'">
<img :src="getPutAccountPlatformLogo(record.platform)" width="19" height="19" />
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</a-table-column>
</template>
</a-table>
</div>
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
<p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
<a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
</div>
<div class="flex-1 overflow-y-auto overflow-x-hidden">
<template v-if="selectedRows?.length">
<div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
<a-tooltip :content="item.name">
<p class="name mr-4px">{{ item.name || '-' }}</p>
</a-tooltip>
<icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
</div>
</template>
<NoData v-else text="暂无账户" />
</div>
</div>
</div>
</template>
<script setup>
import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools';
import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
const TABLE_COLUMNS = [
{
title: '账号名称',
dataIndex: 'name',
},
{
title: '渠道',
dataIndex: 'platform',
width: 80,
},
{
title: '运营人员',
dataIndex: 'operator.name',
width: 140,
},
];
const emit = defineEmits(['update:formQuery']);
const props = defineProps({
formQuery: {
type: Object,
default: () => {},
},
});
const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const query = ref({
name: '',
operator_id: '',
platform: '',
});
const operators = ref([]);
const allData = ref([]);
const updateFormQuery = () => {
emit('update:formQuery', {
...props.formQuery,
placement_account_ids: selectedRowKeys.value,
});
};
const handleSearch = () => {
const { name, platform, operator_id } = query.value;
dataSource.value = allData.value.filter((item) => {
const nameMatch = name === '' ? true : item.name.includes(name);
const platformMatch = platform === '' ? true : item.platform === platform;
const operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
return nameMatch && platformMatch && operatorIdMatch;
});
};
const getOperators = async () => {
const { code, data } = await getPlacementAccountOperators();
if (code === 200) {
operators.value = data;
}
};
const getTableData = async () => {
const { code, data } = await getPlacementAccountsList();
if (code === 200) {
allData.value = data ?? [];
dataSource.value = data ?? [];
initSelect();
}
};
const initSelect = () => {
if (props.formQuery.placement_account_ids?.length) {
selectedRowKeys.value = props.formQuery.placement_account_ids;
selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
}
};
const onClearSelect = () => {
selectedRowKeys.value = [];
selectedRows.value = [];
updateFormQuery();
};
const onDelete = (item) => {
const { id } = item;
selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
updateFormQuery();
};
onMounted(() => {
getOperators();
getTableData();
});
</script>
<style lang="scss" scoped>
.table-wrap {
.s1 {
color: var(--Text-2, #3c4043);
font-family: font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.left {
border-right: 1px solid var(--Border-2, #e6e6e8);
:deep(.arco-table) {
}
}
.right {
.tag-item {
max-width: 100%;
width: fit-content;
overflow: hidden;
display: flex;
height: 24px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
.name {
color: var(--Text-2, #3c4043);
font-family: font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
flex: 1;
@include ellipsis;
}
}
}
}
</style>

253
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue Normal file
View File

@ -0,0 +1,253 @@
<template>
<div class="table-wrap flex h-448px">
<div class="left flex-1 pr-12px flex flex-col">
<div class="flex items-center mb-16px">
<a-input
v-model="query.name"
class="w-220px mr-16px"
placeholder="搜索账号"
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
<a-select
v-model="query.platform"
class="mr-16px w-160px"
size="medium"
placeholder="选择平台"
allow-clear
@change="handleSearch"
>
<a-option
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
:key="index"
:value="item.value"
:label="item.label"
>{{ item.label }}</a-option
>
</a-select>
<a-select
v-model="query.operator_id"
size="medium"
placeholder="选择运营人员"
class="w-160px"
allow-clear
@change="handleSearch"
>
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</div>
<a-table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #empty>
<NoData text="暂无账号"/>
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template #cell="{ record }">
<template v-if="column.dataIndex === 'platform'">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="19" height="19" />
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</a-table-column>
</template>
</a-table>
</div>
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
<p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
<a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
</div>
<div class="flex-1 overflow-y-auto">
<div class="flex flex-wrap" v-if="selectedRows?.length">
<div class="tag-item mr-8px mb-8px" v-for="item in selectedRows" :key="item.id">
<span class="name mr-4px">{{ item.name || '-' }}</span>
<icon-close size="12" class="color-#3C4043 cursor-pointer" @click="onDelete(item)" />
</div>
</div>
<NoData v-else text="暂无账号" />
</div>
</div>
</div>
</template>
<script setup>
import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools';
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
const TABLE_COLUMNS = [
{
title: '账号名称',
dataIndex: 'name',
},
{
title: '平台',
dataIndex: 'platform',
width: 80,
},
{
title: '运营人员',
dataIndex: 'operator.name',
width: 140,
},
];
const emit = defineEmits(['update:formQuery']);
const props = defineProps({
formQuery: {
type: Object,
default: () => {},
},
});
const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const query = ref({
name: '',
operator_id: '',
platform: '',
});
const operators = ref([]);
const allData = ref([]);
const updateFormQuery = () => {
emit('update:formQuery', {
...props.formQuery,
media_account_ids: selectedRowKeys.value,
});
};
const handleSearch = () => {
const { name, platform, operator_id } = query.value;
dataSource.value = allData.value.filter((item) => {
const nameMatch = name === '' ? true : item.name.includes(name);
const platformMatch = platform === '' ? true : item.platform === platform;
const operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
return nameMatch && platformMatch && operatorIdMatch;
});
};
const getOperators = async () => {
const { code, data } = await fetchAccountOperators();
if (code === 200) {
operators.value = data;
}
};
const getTableData = async () => {
const { code, data } = await getMediaAccountList();
if (code === 200) {
allData.value = data ?? [];
dataSource.value = data ?? [];
initSelect();
}
};
const initSelect = () => {
if (props.formQuery.media_account_ids?.length) {
selectedRowKeys.value = props.formQuery.media_account_ids;
selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
}
};
const onClearSelect = () => {
selectedRowKeys.value = [];
selectedRows.value = [];
updateFormQuery();
};
const onDelete = (item) => {
const { id } = item;
selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
updateFormQuery();
};
onMounted(() => {
getOperators();
getTableData();
});
</script>
<style lang="scss" scoped>
.table-wrap {
.s1 {
color: var(--Text-2, #3c4043);
font-family: font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.left {
border-right: 1px solid var(--Border-2, #e6e6e8);
:deep(.arco-table) {
}
}
.right {
.tag-item {
width: fit-content;
display: flex;
height: 24px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
.name {
color: var(--Text-2, #3c4043);
font-family: font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
}
}
}
</style>

3
src/views/property-marketing/project-manage/project-list/components/add-project-modal/style.scss Normal file
View File

@ -0,0 +1,3 @@
.add-project-modal {
}

70
src/views/property-marketing/project-manage/project-list/components/filter-block/index.vue Normal file
View File

@ -0,0 +1,70 @@
<!-- eslint-disable vue/no-mutating-props -->
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<div class="filter-wrap px-24px pt-12px pb-24px">
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">项目名称</span>
<a-space size="medium">
<a-input
v-model="query.name"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</div>
<div class="filter-row-item flex items-center">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
<template #default>重置</template>
</a-button>
</div>
</div>
</div>
</template>
<script setup>
import { defineEmits, defineProps } from 'vue';
const props = defineProps({
query: {
type: Object,
required: true,
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const handleSearch = () => {
emits('update:query', props.query);
nextTick(() => {
emits('onSearch');
});
};
const handleReset = () => {
emits('onReset');
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

23
src/views/property-marketing/project-manage/project-list/components/filter-block/style.scss Normal file
View File

@ -0,0 +1,23 @@
.filter-wrap {
.filter-row {
.filter-row-item {
&:not(:last-child) {
margin-right: 24px;
}
.label {
margin-right: 8px;
color: #211f24;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
flex-shrink: 0;
line-height: 22px; /* 157.143% */
}
:deep(.arco-space-item) {
width: 100%;
}
}
}
}

46
src/views/property-marketing/project-manage/project-list/components/project-table/constants.ts Normal file
View File

@ -0,0 +1,46 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-28 10:33:06
*/
export const TABLE_COLUMNS = [
{
title: '项目名称',
dataIndex: 'name',
width: 240,
fixed: 'left',
},
{
title: '项目预算',
dataIndex: 'budget',
width: 180,
prefix: "￥"
},
{
title: '关联平台账号',
dataIndex: 'media_account_count',
width: 180,
},
{
title: '关联渠道账户',
dataIndex: 'placement_account_count',
width: 180,
},
{
title: '关联内容稿件',
dataIndex: 'work_count',
width: 180,
},
{
title: '创建时间',
dataIndex: 'create_at',
width: 180,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '操作',
dataIndex: 'operation',
width: 100,
},
];

63
src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue Normal file
View File

@ -0,0 +1,63 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-26 17:44:16
-->
<template>
<a-modal
v-model:visible="visible"
title="删除项目"
width="480px"
modal-class="project-manage-modal"
@close="onClose"
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 {{ projectName }} 这个项目吗？</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { deleteProject } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const update = inject('update');
const visible = ref(false);
const projectId = ref(null);
const projectName = ref('');
const isBatch = computed(() => Array.isArray(projectId.value));
function onClose() {
visible.value = false;
projectId.value = null;
projectName.value = '';
}
const open = (record) => {
const { id = null, name = '' } = record;
projectId.value = id;
projectName.value = name;
visible.value = true;
};
async function onDelete() {
const { code } = await deleteProject(projectId.value);
if (code === 200) {
AMessage.success('删除成功');
update()
onClose();
}
}
defineExpose({ open });
</script>

88
src/views/property-marketing/project-manage/project-list/components/project-table/index.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<a-table
ref="tableRef"
:data="dataSource"
row-key="id"
column-resizable
:pagination="false"
:scroll="{ x: '100%' }"
class="flex-1 project-table w-100%"
bordered
@sorter-change="handleSorterChange"
>
<template #empty>
<NoData text="暂无项目"/>
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'create_at'" #cell="{ record }">
{{ exactFormatTime(record.create_at) }}
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
<a-button type="outline" size="mini" @click="onEdit(record)">编辑</a-button>
</div>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
</template>
<script setup>
import { ref } from 'vue';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import icon1 from '@/assets/img/media-account/icon-delete.png';
const emits = defineEmits(['edit', 'sorterChange', 'delete']);
const props = defineProps({
dataSource: {
type: Array,
default: () => [],
},
});
const tableRef = ref(null);
// 处理排序变化
const handleSorterChange = (column, order) => {
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
};
const onDelete = (item) => {
emits('delete', item);
};
const onEdit = (item) => {
emits('edit', item);
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

10
src/views/property-marketing/project-manage/project-list/components/project-table/style.scss Normal file
View File

@ -0,0 +1,10 @@
.project-table {
.cts {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
}

5
src/views/property-marketing/project-manage/project-list/constants.ts Normal file
View File

@ -0,0 +1,5 @@
export const INITIAL_QUERY = {
name: '',
sort_column: undefined,
sort_order: undefined,
};

125
src/views/property-marketing/project-manage/project-list/index.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<div class="project-list-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-16px">
<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">
<a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAddProjectModal">
<template #icon>
<img :src="icon1" width="16" height="16" />
</template>
<template #default>添加项目</template>
</a-button>
</div>
</div>
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
>
<ProjectTable
:dataSource="dataSource"
@sorterChange="handleSorterChange"
@delete="handleDelete"
@edit="handleEdit"
/>
<div v-if="pageInfo.total > 0" class="pagination-box">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
<AddProjectModal ref="addProjectModalRef" />
<DeleteProjectModal ref="deleteProjectModalRef" />
</div>
</template>
<script setup>
import { INITIAL_QUERY } from './constants';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
import { getProjects } from '@/api/all/propertyMarketing';
import FilterBlock from './components/filter-block';
import ProjectTable from './components/project-table';
import AddProjectModal from './components/add-project-modal';
import DeleteProjectModal from './components/project-table/delete-project-modal.vue';
import icon1 from '@/assets/img/media-account/icon-add.png';
const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } = useTableSelectionWithPagination({
onPageChange: () => {
getData();
},
onPageSizeChange: () => {
getData();
},
});
const addProjectModalRef = ref(null);
const deleteProjectModalRef = ref(null);
const query = ref(cloneDeep(INITIAL_QUERY));
const getData = async () => {
const { page, page_size } = pageInfo.value;
const { code, data } = await getProjects({
...query.value,
page,
page_size,
});
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.value.total = data.total;
}
};
const handleSearch = () => {
reload();
};
const handleReset = () => {
resetPageInfo();
query.value = cloneDeep(INITIAL_QUERY);
reload();
};
const reload = () => {
pageInfo.value.page = 1;
getData();
};
const handleOpenAddProjectModal = () => {
addProjectModalRef.value?.open();
};
const handleSorterChange = (column, order) => {
query.value.sort_column = column;
query.value.sort_order = order;
reload();
};
const handleDelete = (item) => {
const { id, name } = item;
deleteProjectModalRef.value?.open({ id, name: `“${name}”` });
};
const handleEdit = (item) => {
addProjectModalRef.value?.open(item.id);
};
onMounted(() => {
getData();
});
provide('update', getData);
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

29
src/views/property-marketing/project-manage/project-list/style.scss Normal file
View File

@ -0,0 +1,29 @@
.project-list-wrap {
height: 100%;
display: flex;
flex-direction: column;
.filter-wrap {
.top {
.title {
font-family: $font-family-medium;
font-style: normal;
}
:deep(.arco-btn) {
.arco-btn-icon {
line-height: 16px;
}
}
}
}
.table-wrap {
display: flex;
flex-direction: column;
.pagination-box {
display: flex;
width: 100%;
padding: 16px 24px;
justify-content: flex-end;
align-items: center;
}
}
}

10
src/views/property-marketing/put-account/account-dashboard/index.vue
View File

@ -32,7 +32,7 @@
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<OperatorSelect v-model="query.operator_id" :options="operators" />
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" />
</a-space>
</div>
</div>
@ -43,13 +43,13 @@
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-100%" />
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
@ -74,13 +74,13 @@
</template>
<script setup lang="ts">
import EchartsItem from './components/echarts-item/index';
import { PLATFORM_LIST } from '../common_constants';
import { PLATFORM_LIST } from '@/utils/platform';
import {
getPlacementAccountsTrend,
getPlacementAccountProjectsTrend,
fetchAccountOperators,
} from '@/api/all/propertyMarketing';
import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select/index.vue';
import CommonSelect from '@/components/common-select';
import AccountSelect from '@/views/components/common/AccountSelect.vue';
import PlanSelect from '@/views/components/common/PlanSelect.vue';

4
src/views/property-marketing/put-account/account-data/components/board-table/constants.ts
View File

@ -7,7 +7,7 @@ export const TABLE_COLUMNS = [
title: '账户名称',
dataIndex: 'name',
prop: 'name',
width: 180,
width: 240,
fixed: 'left',
},
{
@ -19,7 +19,7 @@ export const TABLE_COLUMNS = [
},
{
title: '运营人员',
dataIndex: 'operator_ame',
dataIndex: 'operator_name',
prop: 'operator',
width: 180,
},

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

@ -16,11 +16,11 @@
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<template #default>导出数据</template>
</a-button>
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
<a-button type="outline" size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
</template>
@ -106,7 +106,7 @@
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">

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

@ -19,7 +19,7 @@
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
<span class="label">计划分组</span>
<a-space class="w-200px">
<group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
@ -31,14 +31,14 @@
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
</a-space>
</div>
</div>
<div class="filter-row flex">
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
<span class="label">关联账户</span>
<a-space class="w-160px">
<a-space class="w-240px">
<AccountSelect v-model="query.placement_account_id" :options="placementAccounts" @change="handleSearch" />
</a-space>
</div>
@ -55,13 +55,13 @@
/>
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
@ -78,10 +78,9 @@ import {
getPlacementAccountsList,
getPlacementAccountOperators,
} from '@/api/all/propertyMarketing';
import GroupSelect from '../group-select';
import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
import CommonSelect from '@/components/common-select';
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
import AccountSelect from '@/views/property-marketing/put-account/components/account-select';
const props = defineProps({

14
src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
View File

@ -1,18 +1,4 @@
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple),
:deep(.arco-picker) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

2
src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue
View File

@ -16,7 +16,7 @@
</a-form-item>
</a-form>
<template #footer>
<a-button class="cancel-btn" @click="onClose">取消</a-button>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
</template>
</a-modal>

2
src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue
View File

@ -9,7 +9,7 @@
<span>确认删除 "{{ groupName }}" 这个分组吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>

1
src/views/property-marketing/put-account/account-data/components/group-select/index.vue
View File

@ -9,6 +9,7 @@
size="medium"
:placeholder="placeholder"
allow-clear
:max-tag-count="3"
@change="handleChange"
>
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">

2
src/views/property-marketing/put-account/account-data/components/plan-table/constants.ts
View File

@ -7,7 +7,7 @@ export const TABLE_COLUMNS = [
title: '计划名称',
dataIndex: 'name',
prop: 'name',
width: 180,
width: 240,
fixed: 'left',
},
{

6
src/views/property-marketing/put-account/account-data/components/plan-table/index.vue
View File

@ -16,11 +16,11 @@
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<template #default>导出数据</template>
</a-button>
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
<a-button type="outline" size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
</template>
@ -106,7 +106,7 @@
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">

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

@ -9,7 +9,7 @@
<a-tab-pane key="1" title="账户"></a-tab-pane>
<a-tab-pane key="2" title="计划"></a-tab-pane>
<template v-if="!isAccountTab" #extra>
<a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
<a-button type="outline" class="mr-12px flex items-center" size="medium" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
</template>
@ -68,8 +68,9 @@ import {
postPlacementAccountDataListExport,
} from '@/api/all/propertyMarketing';
import { showExportNotification } from '@/utils/arcoD';
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { downloadByUrl } from '@/utils/tools';
// import { downloadByUrl } from '@/utils/tools';
import icon2 from '@/assets/img/media-account/icon-group.png';
@ -91,7 +92,8 @@ const init = () => {
selectedRowKeys.value = [];
accountTableRef.value?.resetTable();
const data_time = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
const data_time = [yesterday, yesterday];
query.value.data_time = data_time;
getData();
@ -136,9 +138,11 @@ const handleSelectionChange = (selectedRows) => {
};
const handleTabClick = (key) => {
dataSource.value = [];
selectedRowKeys.value = [];
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
activeTab.value = key;
getData();
};
const handleExport = () => {
@ -148,7 +152,7 @@ const handleExport = () => {
}).then((res) => {
const { code, data } = res;
if (code === 200) {
downloadByUrl(data.download_url);
showExportNotification(`正在下载“${data.name}”，请稍后...`);
}
});
};

10
src/views/property-marketing/put-account/account-data/style.scss
View File

@ -2,16 +2,6 @@
height: 100%;
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
border-radius: 8px;
border: 1px solid #e6e6e8;

6
src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
View File

@ -2,10 +2,6 @@
* @Author: RenXiaoDong
* @Date: 2025-06-26 17:44:16
-->
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-26 17:23:52
-->
<template>
<a-modal
v-model:visible="visible"
@ -19,7 +15,7 @@
<span>确认删除 {{ accountName }} 这个账户吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>

53
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" />
@ -35,6 +41,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">
<a-tooltip
v-if="item.projects.length > 2"
position="bottom"
:content="
item.projects
.slice(2)
.map((v) => v.name)
.join(',')
"
>
<div class="tag-box">
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
</div>
</a-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 class="field-row">
<span class="label">账户总消耗</span>
<span class="cts">{{ `￥${formatNumberShow({ value: item.total_use_amount, showExactValue: true })}` }}</span>
@ -47,33 +77,34 @@
<img :src="icon1" 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"
type="outline"
class="mr-8px"
size="mini"
@click="handlePause(item)"
>
<template #default>暂停同步</template>
</a-button>
<a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
<a-button type="outline" class="mr-8px" size="mini" @click="handleReauthorize(item)">
<template #default>获取凭证</template>
</a-button>
<a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
<a-button type="outline" size="mini" @click="openEdit(item)">
<template #default>编辑</template>
</a-button>
</div>
</div>
</div>
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" />
</div>
</template>
<script setup>
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 { PLATFORM_LIST } from '@/utils/platform';
import { EnumPutAccountStatus } 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';
@ -92,7 +123,7 @@ const props = defineProps({
},
});
const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
const emits = defineEmits(['openEdit', 'selectionChange', 'delete']);
const pauseAccountPatchModalRef = ref(null);
const authorizedAccountModalRef = ref(null);
@ -121,7 +152,7 @@ const openDelete = (item) => {
};
const handleReauthorize = (item) => {
authorizedAccountModalRef.value?.open(item.id, item.last_synced_at);
authorizedAccountModalRef.value?.open({ accountId: item.id, last_synced_at: item.last_synced_at });
};
const handlePause = (item) => {
@ -129,7 +160,7 @@ const handlePause = (item) => {
};
const showPauseButton = (status) => {
return status === EnumStatus.NORMAL;
return status === EnumPutAccountStatus.NORMAL;
};
</script>

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

@ -9,7 +9,7 @@
<span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</a-button>
</template>
</a-modal>
@ -20,8 +20,8 @@ import { ref } from 'vue';
import { pausePatchPlacementAccount } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const emits = defineEmits(['update', 'close']);
const emits = defineEmits(['close']);
const update = inject('update');
const visible = ref(false);
const accountId = ref(null);
const accountName = ref('');
@ -45,7 +45,7 @@ async function onConfirm() {
const { code } = await pausePatchPlacementAccount(accountId.value);
if (code === 200) {
AMessage.success('暂停成功');
emits('update');
update();
onClose();
}
}

6
src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
View File

@ -1,9 +1,3 @@
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-container {
flex: 1;
display: grid;

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

@ -111,6 +111,9 @@
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="所属项目" field="project_ids">
<CommonSelect v-model="form.project_ids" :options="projects" placeholder="请选择…" size="large" />
</a-form-item>
<template v-if="isEdit">
<a-form-item label="账户总消耗" field="total_use_amount">
<a-input v-model="form.total_use_amount" placeholder="请输入..." size="large" disabled />
@ -126,18 +129,18 @@
<icon-question-circle size="14" class="ml-4px color-#737478" />
</a-tooltip>
</template>
<a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :un-checked-value="0" />
<a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :unchecked-value="0" />
</a-form-item>
</template>
</a-form>
<template #footer>
<a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit" :loading="importLoading">
{{ confirmBtnText }}
</a-button>
</template>
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" />
<!-- <ImportPromptModal ref="importPromptModalRef" /> -->
</a-modal>
</template>
@ -148,20 +151,26 @@ import { ref, defineEmits } from 'vue';
import AuthorizedAccountModal from '../authorized-account-modal';
// import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '../status-box';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import CommonSelect from '@/components/common-select';
import { PLATFORM_LIST, ENUM_PUT_ACCOUNT_PLATFORM } from '@/utils/platform';
import { showExportNotification } from '@/utils/arcoD';
import { genRandomId } from '@/utils/tools';
import {
postPlacementAccounts,
getPlacementAccountsDetail,
putPlacementAccounts,
getPlacementAccountsTemplateUrl,
batchPlacementAccounts,
getProjectList,
} from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-download.png';
import icon2 from '@/assets/img/media-account/icon-delete.png';
const emits = defineEmits(['update']);
const update = inject('update');
const emits = defineEmits(['startQueryTaskStatus']);
const UploadStatus = {
DEFAULT: 'default',
@ -173,7 +182,8 @@ const INITIAL_FORM = {
operator_name: '',
holder_name: '',
platform: 0,
is_sync_project: 0,
is_sync_project: 1,
project_ids: [],
};
const visible = ref(false);
@ -188,6 +198,8 @@ const authorizedAccountModalRef = ref(null);
const uploadRef = ref(null);
const file = ref(null);
const form = ref(cloneDeep(INITIAL_FORM));
const projects = ref([]);
const importLoading = ref(false);
const rules = {
mobile: [
@ -213,7 +225,7 @@ const rules = {
const isBatchImport = computed(() => uploadType.value === 'batch');
const confirmBtnText = computed(() => {
if (isBatchImport.value) return '确定导入';
if (isBatchImport.value) return importLoading.value ? '导入中' : '确定导入';
return isEdit.value ? '确定' : '下一步';
});
@ -229,6 +241,7 @@ const handleUpload = async (option) => {
function removeFile() {
fileName.value = '';
file.value = null;
importLoading.value = false;
uploadStatus.value = UploadStatus.DEFAULT;
}
@ -240,6 +253,8 @@ const reset = () => {
fileName.value = '';
file.value = null;
isEdit.value = false;
projects.value = [];
importLoading.value = false;
uploadStatus.value = UploadStatus.DEFAULT;
uploadType.value = 'manual';
};
@ -252,12 +267,19 @@ const open = (accountId = '') => {
id.value = accountId;
isEdit.value = !!accountId;
getProjects();
if (accountId) {
getAccountDetail();
}
visible.value = true;
};
const getProjects = async () => {
const { code, data } = await getProjectList();
if (code === 200) {
projects.value = data;
}
};
const getAccountDetail = async () => {
const { code, data } = await getPlacementAccountsDetail(id.value);
@ -268,28 +290,59 @@ const getAccountDetail = async () => {
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 batchPlacementAccounts(formData, {
const { code, data } = await batchPlacementAccounts(formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
if (code === 200) {
AMessage.success('导入成功');
emits('update');
const id = genRandomId();
showExportNotification(`正在导入“${file.value.name}”，请稍后...`, { id });
emit('startQueryTaskStatus', data.id, id);
onClose();
} else {
uploadStatus.value = UploadStatus.ERROR;
}
} catch (error) {
uploadStatus.value = UploadStatus.ERROR;
} finally {
importLoading.value = false;
}
// importPromptModalRef.value.open();
};
const handleAdd = async () => {
// 聚光无子账号
if (form.value.platform === ENUM_PUT_ACCOUNT_PLATFORM.jg) {
const { code, data } = await postPlacementAccounts(form.value);
if (code === 200) {
update();
authorizedAccountModalRef.value.open({ accountId: data?.id });
}
} else {
authorizedAccountModalRef.value.open({ form: form.value, needSelectSubAccount: true });
}
};
const handleEdit = async () => {
const { code } = await putPlacementAccounts({ id: id.value, ...form.value });
if (code === 200) {
isEdit.value && AMessage.success('修改成功');
update();
onClose();
}
};
async function onSubmit() {
if (isBatchImport.value) {
handleBatchImport();
@ -298,27 +351,11 @@ async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = id.value ? putPlacementAccounts : postPlacementAccounts;
const _params = id.value ? { id: id.value, ...form.value } : form.value;
const { code, data } = await _fn(_params);
if (code === 200) {
isEdit.value && AMessage.success('修改成功');
emits('update');
if (isEdit.value) {
onClose();
} else {
handleSuccess(data?.id);
}
}
isEdit.value ? handleEdit() : handleAdd();
}
});
}
const handleSuccess = (id) => {
authorizedAccountModalRef.value.open(id);
};
const handleDownloadTemplate = async () => {
const { code, data } = await getPlacementAccountsTemplateUrl();
if (code === 200) {
@ -326,6 +363,7 @@ const handleDownloadTemplate = async () => {
}
};
provide('closeAddAccountModal', onClose);
// 对外暴露打开弹窗方法
defineExpose({ open });
</script>

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

@ -12,7 +12,7 @@
:footer="!isLoading"
@close="close"
>
<div v-if="showSyncTip">
<!-- <div v-if="showSyncTip">
<div class="flex items-center mb-20px">
<img :src="icon1" width="16" height="16" class="mr-16px" />
<p class="s2">
@ -25,8 +25,8 @@
<a-radio value="sync" class="mb-16px">立即同步遗漏数据 - 获取完整的最新数据 （推荐）</a-radio>
<a-radio value="no_sync">仅授权不更新 - 继续使用当前不完全的数据</a-radio>
</a-radio-group>
</div>
<div v-else class="flex flex-col items-center">
</div> -->
<div class="flex flex-col items-center">
<template v-if="isLoading">
<a-progress
:percent="progress"
@ -55,10 +55,12 @@
</template>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="close">取消</a-button>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
</template>
</a-modal>
<SelectSubAccountModal ref="selectSubAccountModalRef" />
</template>
<script setup>
@ -71,12 +73,14 @@ import {
postPlacementAccountsSync,
} from '@/api/all/propertyMarketing';
import SelectSubAccountModal from '../select-sub-account-modal';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
const emits = defineEmits(['update']);
const INITIAL_SYNC_TYPE = 'sync';
const update = inject('update');
// const INITIAL_SYNC_TYPE = 'sync';
const visible = ref(false);
const isLoading = ref(false);
const isCompleted = ref(false);
@ -86,9 +90,12 @@ const failReason = ref('');
const progress = ref(0);
const id = ref('');
const lastSyncedAt = ref(null); // 上次同步时间戳
const showSyncTip = ref(false);
const syncType = ref(INITIAL_SYNC_TYPE); // sync ｜ no_sync
const selectSubAccountModalRef = ref(null);
// const lastSyncedAt = ref(null); // 上次同步时间戳
// const showSyncTip = ref(false);
const shouldSelectSubAccount = ref(false);
// const syncType = ref(INITIAL_SYNC_TYPE); // sync ｜ no_sync
const addAccountFormData = ref(null); // 添加账户表单数据
const INITIAL_FORM = {
account: '',
@ -116,22 +123,26 @@ const confirmBtnText = computed(() => {
return isSuccess.value ? '继续添加' : '重试';
});
const getDaysDiffText = (lastSyncedAt) => {
if (!lastSyncedAt) return '0天';
// const getDaysDiffText = (lastSyncedAt) => {
// if (!lastSyncedAt) return '0天';
const daysDiff = dayjs().diff(dayjs(lastSyncedAt * 1000), 'day');
// const daysDiff = dayjs().diff(dayjs(lastSyncedAt * 1000), 'day');
if (daysDiff === 0) return '不到1天';
return `${daysDiff}天`;
};
// if (daysDiff === 0) return '不到1天';
// return `${daysDiff}天`;
// };
const open = ({ accountId, last_synced_at = null, form = null, needSelectSubAccount = false }) => {
reset();
const open = (accountId, last_synced_at = null) => {
id.value = accountId;
lastSyncedAt.value = last_synced_at;
// lastSyncedAt.value = last_synced_at;
addAccountFormData.value = form;
shouldSelectSubAccount.value = needSelectSubAccount;
visible.value = true;
};
const close = () => {
const reset = () => {
formRef.value?.resetFields();
formRef.value?.clearValidate();
@ -142,11 +153,16 @@ const close = () => {
failReason.value = '';
progress.value = 0;
id.value = '';
lastSyncedAt.value = null;
syncType.value = INITIAL_SYNC_TYPE;
showSyncTip.value = false;
// lastSyncedAt.value = null;
// syncType.value = INITIAL_SYNC_TYPE;
// showSyncTip.value = false;
shouldSelectSubAccount.value = false;
addAccountFormData.value = null;
clearFakeProgressTimer();
clearStatusPollingTimer();
};
const close = () => {
visible.value = false;
};
@ -174,6 +190,8 @@ const startStatusPolling = () => {
clearFakeProgressTimer();
clearStatusPollingTimer();
isLoading.value = false;
isSuccess.value && postPlacementAccountsSync(id.value);
}
}
}, 2000);
@ -220,49 +238,62 @@ const clearFakeProgressTimer = () => {
}
};
const handleSyncData = () => {
if (!showSyncTip.value) {
formRef.value.validate(async (errors) => {
if (!errors) {
showSyncTip.value = true;
}
});
return;
}
// const handleSyncData = () => {
// if (!showSyncTip.value) {
// formRef.value.validate(async (errors) => {
// if (!errors) {
// showSyncTip.value = true;
// }
// });
// return;
// }
if (syncType.value === INITIAL_SYNC_TYPE) {
postPlacementAccountsSync(id.value).then((res) => {
if (res.code === 200) {
close();
}
});
} else {
close();
}
};
// if (syncType.value === INITIAL_SYNC_TYPE) {
// postPlacementAccountsSync(id.value).then((res) => {
// if (res.code === 200) {
// update();
// close();
// }
// });
// } else {
// close();
// }
// };
const handleOk = () => {
if (lastSyncedAt.value && lastSyncedAt.value < dayjs().startOf('day').valueOf()) {
handleSyncData();
return;
}
// // n天未同步更新
// if (lastSyncedAt.value && lastSyncedAt.value < dayjs().startOf('day').valueOf()) {
// handleSyncData();
// return;
// }
// 已完成
if (isCompleted.value) {
if (isSuccess.value) {
emits('update');
update();
close();
} else {
startLoading();
}
} else {
formRef.value.validate(async (errors) => {
if (!errors) {
startLoading();
}
});
return;
}
// 未完成，校验表单
formRef.value.validate(async (errors) => {
if (errors) return;
if (shouldSelectSubAccount.value) {
visible.value = false;
selectSubAccountModalRef.value.open({
...addAccountFormData.value,
...form.value,
});
} else {
startLoading();
}
});
};
provide('closeAuthorizeAccountModal', close);
defineExpose({
open,
});

26
src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
View File

@ -42,18 +42,24 @@
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
</a-space>
</div>
</div>
<div class="filter-row flex">
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<div class="filter-row-item flex items-center">
<span class="label">所属项目</span>
<a-space class="w-200px">
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
</a-space>
</div>
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>
@ -65,10 +71,10 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { getPlacementAccountOperators } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import { getPlacementAccountOperators, getProjectList } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST } from '@/utils/platform';
import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
import CommonSelect from '@/components/common-select';
const props = defineProps({
query: {
@ -80,6 +86,7 @@ const props = defineProps({
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const operators = ref([]);
const projects = ref([]);
const handleSearch = () => {
emits('update:query', props.query);
@ -97,9 +104,16 @@ const getOperators = async () => {
operators.value = data;
}
};
const getProjects = async () => {
const { code, data } = await getProjectList();
if (code === 200) {
projects.value = data;
}
};
onMounted(() => {
getOperators();
getProjects();
});
</script>

13
src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
View File

@ -1,17 +1,4 @@
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

2
src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
View File

@ -18,7 +18,7 @@
</div>
</div>
<template #footer>
<a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
</template>
</a-modal>

23
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/constants.ts Normal file
View File

@ -0,0 +1,23 @@
export const INITIAL_FORM = {
platform: '',
account: '',
password: '',
account_name: '',
account_id: '',
};
export const INITIAL_PAGE_INFO = {
page: 1,
page_size: 20,
total: 0,
};
export const TABLE_COLUMNS = [
{
title: '账户名称',
dataIndex: 'account_name',
},
{
title: '账户ID',
dataIndex: 'account_id',
},
];

214
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue Normal file
View File

@ -0,0 +1,214 @@
<template>
<a-modal
v-model:visible="visible"
title="选择子账户"
modal-class="select-sub-account-modal"
width="720px"
:mask-closable="false"
@close="onClose"
>
<div class="filter-row flex mb-16px">
<div class="filter-row-item flex items-center">
<span class="label">账户名称</span>
<a-input
v-model="query.account_name"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
@change="reload"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</div>
<div class="filter-row-item flex items-center">
<span class="label">账户ID</span>
<a-input
v-model="query.account_id"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
@change="reload"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</div>
</div>
<a-table
ref="tableRef"
:data="dataSource"
column-resizable
:row-selection="rowSelection"
:row-key="ROW_KEY"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="w-100% flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
<div v-if="pageInfo.total > 0" class="flex justify-end mt-16px">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
<template #footer>
<span class="cts color-#3C4043 s1"
>已选<span class="color-#6D4CFE num mx-3px">{{ selectedRows.length }}个</span>账户</span
>
<div class="flex items-center">
<a-button size="large" @click="onClose">取消</a-button>
<a-button
type="primary"
class="ml-16px"
status="danger"
size="large"
:disabled="!selectedRows.length"
@click="onConfirm"
>添加已选账户</a-button
>
</div>
</template>
</a-modal>
</template>
<script setup>
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
import { formatTableField } from '@/utils/tools';
import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
const emits = defineEmits('confirm');
const update = inject('update');
const closeAddAccountModal = inject('closeAddAccountModal');
const closeAuthorizeAccountModal = inject('closeAuthorizeAccountModal');
const visible = ref(false);
const query = ref(cloneDeep(INITIAL_FORM));
const form = ref(null);
const ROW_KEY = 'account_id';
const {
selectedRowKeys,
selectedRows,
dataSource,
pageInfo,
onPageChange,
onPageSizeChange,
rowSelection,
handleSelect,
handleSelectAll,
} = useTableSelectionWithPagination({
rowKey: ROW_KEY,
onPageChange: () => {
getData();
},
onPageSizeChange: () => {
getData();
},
});
const open = (formData) => {
const { platform, account, password } = formData;
form.value = formData;
query.value = {
...query.value,
platform,
account,
password,
};
getData();
visible.value = true;
};
const onClose = () => {
form.value = null;
selectedRows.value = [];
dataSource.value = [];
selectedRowKeys.value = [];
query.value = cloneDeep(INITIAL_FORM);
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
visible.value = false;
};
const onConfirm = async () => {
const { code } = await postAddSubAccount({ ...form.value, subaccounts: selectedRows.value });
if (code === 200) {
visible.value = false;
update();
closeAuthorizeAccountModal();
closeAddAccountModal();
}
};
const getData = async () => {
const { page, page_size } = pageInfo.value;
const { code, data } = await postSubAccount({
...query.value,
page,
page_size,
});
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.value.total = data.total;
}
};
const reload = () => {
pageInfo.value.page = 1;
getData();
};
defineExpose({ open });
</script>
<style lang="scss">
@import './style.scss';
</style>

45
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss Normal file
View File

@ -0,0 +1,45 @@
.select-sub-account-modal {
.cts {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.arco-modal-header {
}
.arco-modal-body {
height: 536px;
overflow: hidden;
display: flex;
flex-direction: column;
.filter-row {
.filter-row-item {
&:not(:last-child) {
margin-right: 24px;
}
.label {
margin-right: 12px;
color: #211f24;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
flex-shrink: 0;
line-height: 22px;
}
}
}
}
.arco-modal-footer {
justify-content: space-between;
.s1 {
font-family: $font-family-regular;
.num {
font-family: $font-family-medium;
}
}
}
}

12
src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
View File

@ -13,7 +13,7 @@
<script setup>
import { computed } from 'vue';
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
import { STATUS_LIST, EnumPutAccountStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
@ -38,16 +38,16 @@ const tooltipText = computed(() => {
});
const showIcon = computed(() => {
return ![EnumStatus.NORMAL, EnumStatus.UNAUTHORIZED].includes(props.status);
return ![EnumPutAccountStatus.NORMAL, EnumPutAccountStatus.UNAUTHORIZED].includes(props.status);
});
const iconSrc = computed(() => {
return props.status === EnumStatus.PAUSE ? iconWarn1 : iconWarn2;
return props.status === EnumPutAccountStatus.PAUSE ? iconWarn1 : iconWarn2;
});
// 判断是否为禁用重新授权的状态
const isDisabledReauthorize = (status) => {
return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
return [EnumPutAccountStatus.ABNORMAL_LOGIN, EnumPutAccountStatus.ABNORMAL_REQUEST, EnumPutAccountStatus.ABNORMAL_FREEZE].includes(status);
};
</script>
@ -75,7 +75,7 @@ const isDisabledReauthorize = (status) => {
}
}
&-2,
&-3,
&-4,
&-5,
&-6 {
@ -85,7 +85,7 @@ const isDisabledReauthorize = (status) => {
}
}
&-3 {
&-2{
background: #fff7e5;
color: #ffae00;
.text {

1
src/views/property-marketing/put-account/account-manage/constants.ts
View File

@ -8,4 +8,5 @@ export const INITIAL_QUERY = {
status: '',
platform: '',
operator_id: '',
project_ids: [],
};

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

@ -8,7 +8,7 @@
<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">
<a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
<template #icon>
<img :src="icon1" width="16" height="16" />
</template>
@ -53,7 +53,7 @@
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
<a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
</a-space>
@ -67,7 +67,6 @@
@selectionChange="handleSelectionChange"
@delete="handleDelete"
@openEdit="handleOpenEdit"
@update="getData"
/>
<NoData v-else />
@ -77,16 +76,17 @@
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"
:page-size="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
<AddAccountModal ref="addAccountModalRef" @update="getData" />
<AddPutAccountModal ref="addAccountModalRef" @startQueryTaskStatus="handleGetImportTaskStatus" />
<DeleteAccountModal ref="deleteAccountRef" @update="onDeleteSuccess" />
</div>
</template>
@ -96,11 +96,13 @@ import { ref } from 'vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
import AddAccountModal from './components/add-account-modal';
import AddPutAccountModal from './components/add-account-modal';
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 icon1 from '@/assets/img/media-account/icon-add.png';
import icon4 from '@/assets/img/media-account/icon-success.png';
@ -111,10 +113,11 @@ const groupManageModalRef = ref(null);
const tagsManageModalRef = ref(null);
const addAccountModalRef = ref(null);
const deleteAccountRef = ref(null);
let queryTaskTimer = null;
const pageInfo = ref({
page: 1,
pageSize: 8,
page_size: 20,
total: 0,
});
const query = ref(cloneDeep(INITIAL_QUERY));
@ -140,6 +143,7 @@ const tipLabel = computed(() => {
too_many_requests_number = 0,
account_frozen_number = 0,
miss_data_number = 0,
abnormal_number = 0,
} = healthData.value;
// 定义异常类型映射
@ -148,6 +152,7 @@ const tipLabel = computed(() => {
{ count: too_many_requests_number, label: '请求频繁' },
{ count: account_frozen_number, label: '账号被封' },
{ count: miss_data_number, label: '数据缺失' },
{ count: abnormal_number, label: '其他异常' },
];
// 过滤出有异常的项并格式化
@ -156,10 +161,6 @@ const tipLabel = computed(() => {
return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
onMounted(() => {
getData();
});
const getData = () => {
getHealthData();
getAccountData();
@ -172,10 +173,10 @@ const getHealthData = async () => {
}
};
const getAccountData = async () => {
const { page, pageSize } = pageInfo.value;
const { page, page_size } = pageInfo.value;
const { code, data, total } = await getPlacementAccounts({
page,
page_size: pageSize,
page_size,
...query.value,
});
if (code === 200) {
@ -188,11 +189,11 @@ const reload = () => {
getData();
};
const handleSearch = () => {
getData();
reload();
};
const handleReset = () => {
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.page_size = 20;
pageInfo.value.total = 0;
selectedItems.value = [];
query.value = cloneDeep(INITIAL_QUERY);
@ -204,7 +205,7 @@ const onPageChange = (current) => {
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.value.pageSize = pageSize;
pageInfo.value.page_size = pageSize;
reload();
};
@ -254,6 +255,39 @@ const handleOpenAbnormalAccount = () => {
query.value.status = 2;
reload();
};
// 查询导入账号任务状态
const getSyncTaskStatus = async (id, notificationId) => {
const { code, data } = await getTaskStatus(id);
if (code === 200) {
if (data?.status !== 0) {
clearQueryTaskTimer();
notificationId && Notification.remove(notificationId);
showImportResultNotification(data);
getData();
}
}
};
const handleGetImportTaskStatus = (id, notificationId) => {
clearQueryTaskTimer();
getSyncTaskStatus(id, notificationId);
queryTaskTimer = setInterval(() => getSyncTaskStatus(id, notificationId), 3000);
};
const clearQueryTaskTimer = () => {
if (queryTaskTimer) {
clearInterval(queryTaskTimer);
queryTaskTimer = null;
}
};
onMounted(() => {
getData();
});
onUnmounted(() => {
clearQueryTaskTimer();
});
provide('update', getData);
</script>
<style scoped lang="scss">

Some files were not shown because too many files have changed in this diff Show More