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

Merge branch 'main' into feature/linzhijun_扣子智能体_0710

Browse Source 
# Conflicts:
#	src/components/_base/navbar/index.vue
#	src/main.ts
#	src/permission/permission.ts
#	vite.config.ts
This commit is contained in:
林志军
2025-07-30 09:59:41 +08:00
parent 9fc33d62c7 2123398f40
commit 896ac9ad74
239 changed files with 6246 additions and 2117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/components/dataEngine/hotCloud.vue
View File

@ -160,7 +160,7 @@ const processTagData = (apiData) => {
};
</script>
<style scoped lang="less">
<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
background-color: var(--color-fill-2);
@ -219,7 +219,7 @@ a-tag:hover {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 16px;
font-style: normal;
font-weight: 400;

14
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>
@ -354,7 +354,7 @@ const handleOk = () => {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 16px;
font-style: normal;
font-weight: 400;
@ -378,7 +378,7 @@ const handleOk = () => {
padding: 12px 20px 0;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
@ -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>

2
src/views/components/dataEngine/keyBrandMovement.vue
View File

@ -287,7 +287,7 @@ watch(selectedIndustry, () => {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 16px;
font-style: normal;
font-weight: 400;

18
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>
@ -659,7 +659,7 @@ onMounted(() => {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 16px;
font-style: normal;
font-weight: 400;
@ -668,13 +668,13 @@ onMounted(() => {
}
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
&.num {
font-family: 'HarmonyOS Sans SC';
font-family: $font-family-manrope-regular;
}
}
</style>
@ -694,7 +694,7 @@ onMounted(() => {
padding: 12px 20px 0;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
@ -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>

14
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>
@ -276,7 +276,7 @@ const search = () => {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 16px;
font-style: normal;
font-weight: 400;
@ -299,7 +299,7 @@ const search = () => {
padding: 12px 20px 0;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
@ -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>

19
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 ? '女性' : '男性',
}));
@ -602,7 +605,7 @@ onMounted(() => {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 16px;
font-style: normal;
font-weight: 400;
@ -611,13 +614,13 @@ onMounted(() => {
}
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
&.num {
font-family: 'HarmonyOS Sans SC';
font-family: $font-family-manrope-regular;
}
}
:deep(.arco-tabs) {

2
src/views/components/drag/DraggableResizable.vue
View File

@ -360,7 +360,7 @@ if (container.value) {
}
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
.draggable-resizable {
position: absolute;
background-color: lightblue;

2
src/views/components/drag/index.vue
View File

@ -447,7 +447,7 @@ const adjustComponentPosition = (
return { x: adjustedX, y: adjustedY };
};
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
.app {
position: relative;
width: 100%;

2
src/views/components/layout/comp1.vue
View File

@ -16,7 +16,7 @@
<script setup lang="ts"></script>
<style lang="less" scoped>
<style lang="scss" scoped>
.flex-container {
display: flex;
flex-direction: row;

2
src/views/components/layout/comp2.vue
View File

@ -10,4 +10,4 @@
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>
<style lang="scss" scoped></style>

2
src/views/components/layout/comp3.vue
View File

@ -10,4 +10,4 @@
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>
<style lang="scss" scoped></style>

2
src/views/components/layout/comp4.vue
View File

@ -10,4 +10,4 @@
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>
<style lang="scss" scoped></style>

2
src/views/components/layout/index.vue
View File

@ -380,7 +380,7 @@ function getComponentStyle(component: ComponentState) {
}
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
.page-container {
width: 100%;
height: 100%;

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) {

2
src/views/components/login/style.scss
View File

@ -39,7 +39,7 @@
transform: translateX(-50%);
.text {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
line-height: 22px;

42
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() {
@ -178,13 +180,13 @@ onMounted(() => {
});
</script>
<style scoped lang="less">
<style scoped lang="scss">
.primary-account {
border-radius: 2px;
padding-right: 8px;
padding-left: 8px;
background: var(--Brand-Brand-1, rgba(240, 237, 255, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
line-height: 20px;
@ -195,7 +197,7 @@ onMounted(() => {
padding-right: 8px;
padding-left: 8px;
background: var(--Functional-Warning-1, rgba(255, 245, 222, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
color: var(--Functional-Warning-6, rgba(255, 174, 0, 1));
@ -204,7 +206,7 @@ onMounted(() => {
border-radius: 4px;
padding: 2px 12px;
border: 1px solid var(--Functional-Danger-6, rgba(246, 75, 49, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
line-height: 20px;
@ -214,7 +216,7 @@ onMounted(() => {
border-radius: 4px;
padding: 5px 16px;
border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
@ -224,14 +226,14 @@ onMounted(() => {
margin-bottom: 12px;
.add-account-title {
margin: 0;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
color: var(--Text-1, rgba(33, 31, 36, 1));
}
.add-account-subtitle {
margin: 4px 0 0 0;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1));
@ -243,7 +245,7 @@ onMounted(() => {
border-radius: 4px;
padding: 12px 16px;
background: var(--BG-200, rgba(242, 243, 245, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1));
@ -254,7 +256,7 @@ onMounted(() => {
}
.cannot-add-account-title {
margin: 0;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
color: var(--Text-1, rgba(33, 31, 36, 1));
@ -267,7 +269,7 @@ onMounted(() => {
.cannot-add-account-subtitle {
margin: 16px 0 0 0;
padding-left: 32px;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1));
@ -276,7 +278,7 @@ onMounted(() => {
.delete-modal-content {
margin-left: 34px;
margin-top: 16px;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1));
@ -289,7 +291,7 @@ onMounted(() => {
justify-content: space-between;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 18px;
font-style: normal;
font-weight: 400;

30
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;
}
@ -98,14 +102,14 @@ async function handleOk() {
}
</script>
<style scoped lang="less">
<style scoped lang="scss">
.tips {
height: 40px;
border-radius: 4px;
padding: 10px 16px;
background: var(--BG-100, rgba(247, 248, 250, 1));
border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
span {
@ -118,7 +122,7 @@ async function handleOk() {
align-items: center;
}
:deep(.arco-form-item-label) {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
margin: 0;
@ -126,12 +130,12 @@ async function handleOk() {
:deep(.arco-input-wrapper) {
background: white;
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
padding: 4px 12px;
input::placeholder {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
color: var(--Text-4, rgba(147, 148, 153, 1));
@ -141,7 +145,7 @@ async function handleOk() {
background: var(--BG-200, rgba(242, 243, 245, 1));
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
.arco-input:disabled {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
}
@ -156,7 +160,7 @@ async function handleOk() {
border: 1px solid rgba(109, 76, 254, 1);
border-radius: 4px;
padding: 2px 12px;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
color: rgba(109, 76, 254, 1);
@ -168,7 +172,7 @@ async function handleOk() {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 18px;
font-style: normal;
font-weight: 400;

20
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] : [];
});
// 表单校验规则
@ -261,7 +263,7 @@ function getFileExtension(filename: string): string {
align-items: center;
}
:deep(.arco-form-item-label) {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
margin: 0;
@ -269,12 +271,12 @@ function getFileExtension(filename: string): string {
:deep(.arco-input-wrapper) {
background: white;
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
padding: 4px 12px;
input::placeholder {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
color: var(--Text-4, rgba(147, 148, 153, 1));
@ -284,7 +286,7 @@ function getFileExtension(filename: string): string {
background: var(--BG-200, rgba(242, 243, 245, 1));
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
.arco-input:disabled {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
}
@ -304,7 +306,7 @@ function getFileExtension(filename: string): string {
border-radius: 4px;
padding: 2px 12px;
border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
vertical-align: middle;
@ -318,7 +320,7 @@ function getFileExtension(filename: string): string {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 18px;
font-style: normal;
font-weight: 400;

2
src/views/components/permission/auth.vue
View File

@ -30,5 +30,5 @@ function login() {
}
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
</style>

2
src/views/components/permission/choose-enterprise.vue
View File

@ -15,5 +15,5 @@
const enterprise = ref('');
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
</style>

2
src/views/components/table/index.vue
View File

@ -49,4 +49,4 @@ function add() {
function deleteItem(record) {}
</script>
<style lang="less" scoped></style>
<style lang="scss" scoped></style>

2
src/views/components/workplace/index.vue
View File

@ -46,7 +46,7 @@ const getSuccessCaseList = async () => {
};
</script>
<style scoped lang="less">
<style scoped lang="scss">
.container-body {
padding-left: 24px !important;
:deep(> div > .title) {

10
src/views/components/workplace/modules/case.vue
View File

@ -89,7 +89,7 @@ interface SuccessCase {
data: { label: string; value: string }[];
}
</script>
<style scoped lang="less">
<style scoped lang="scss">
.container {
width: 304px;
height: 306px;
@ -139,7 +139,7 @@ interface SuccessCase {
max-width: 100%;
}
.title {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 14px;
line-height: 22px;
@ -151,7 +151,7 @@ interface SuccessCase {
margin: 0;
padding: 0;
.keyword {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
line-height: 20px;
@ -169,7 +169,7 @@ interface SuccessCase {
line-height: 28px;
text-align: center;
.unit {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 10px;
line-height: 24px;
@ -178,7 +178,7 @@ interface SuccessCase {
}
}
.label {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 10px;
line-height: 100%;

16
src/views/components/workplace/modules/product.vue
View File

@ -123,7 +123,7 @@ const gotoModule = (menuId: number) => {
router.push({ name: routeMap[menuId] });
};
</script>
<style scoped lang="less">
<style scoped lang="scss">
.container {
width: 304px;
height: 220px;
@ -141,7 +141,7 @@ const gotoModule = (menuId: number) => {
border-radius: 4px;
padding-right: 8px;
padding-left: 8px;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
line-height: 20px;
@ -175,7 +175,7 @@ const gotoModule = (menuId: number) => {
background: rgba(255, 245, 222, 1);
:deep(.arco-statistic-title) {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@ -185,7 +185,7 @@ const gotoModule = (menuId: number) => {
}
:deep(.arco-statistic-value) {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 10px;
color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@ -201,7 +201,7 @@ const gotoModule = (menuId: number) => {
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 16px;
line-height: 24px;
@ -211,7 +211,7 @@ const gotoModule = (menuId: number) => {
.desc {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
line-height: 20px;
@ -228,7 +228,7 @@ const gotoModule = (menuId: number) => {
gap: 8px;
padding: 2px 12px;
background-color: rgba(109, 76, 254, 1) !important;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
line-height: 20px;
@ -244,7 +244,7 @@ const gotoModule = (menuId: number) => {
gap: 8px;
padding: 2px 12px;
border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
line-height: 20px;

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>

14
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%;
@ -44,7 +32,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

27
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;
@ -32,7 +7,7 @@
}
.arco-form-item-label {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

6
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>
@ -198,7 +198,7 @@ const columns = [
.label {
margin-right: 8px;
color: #211f24;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;

6
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>
@ -190,7 +190,7 @@ const columns = [
.label {
margin-right: 8px;
color: #211f24;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;

8
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>
@ -119,7 +119,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 +148,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>

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

@ -9,7 +9,7 @@
.account-table {
.cts {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;

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>

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

@ -22,7 +22,7 @@
margin-bottom: 16px;
.text {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 16px;
font-style: normal;
font-weight: 400;
@ -47,7 +47,7 @@
flex-direction: column;
.checked-title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 16px;
font-style: normal;
font-weight: 400;
@ -69,7 +69,7 @@
align-items: center;
.text {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -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: {

15
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) {
@ -20,7 +7,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

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}”，请稍后...`);
}
});
};

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

@ -2,22 +2,12 @@
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;
.top {
.title {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-style: normal;
}
:deep(.arco-btn) {
@ -37,7 +27,7 @@
}
.label {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -45,7 +35,7 @@
}
.value {
color: var(--Text-1, #211f24);
font-family: 'HarmonyOS Sans SC';
font-family: $font-family-manrope-regular;
font-size: 18px;
font-style: normal;
font-weight: 500;

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

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

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

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

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

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

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();

16
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) {
@ -21,7 +7,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

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>

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

@ -4,13 +4,13 @@
flex-direction: column;
:deep(.cts) {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
&.title {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
}
}
:deep(.title-row) {
@ -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
>

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

@ -4,37 +4,72 @@
-->
<template>
<div class="card-container">
<div
<a-spin
v-for="(item, index) in dataSource"
:key="index"
:loading="isSyncing(item)"
tip="更新数据中..."
class="card-item"
:class="{
checked: isSelected(item),
}"
>
<template #icon>
<icon-sync size="24" />
</template>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<div class="ml-8px flex-1">
<p class="name">{{ item.name || '-' }}</p>
<a-tooltip content="点击查看账号详情">
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
</a-tooltip>
<div class="field-row">
<span class="label">状态</span>
<StatusBox :status="item.status" />
</div>
<div class="field-row">
<span class="label">数据更新时间</span>
<span class="cts num">{{ getLastSyncedAt(item) }}</span>
</div>
<div class="field-row">
<span class="label">平台</span>
<img :src="item.platform === 0 ? icon1 : icon2" width="16" height="16" />
</div>
<div class="field-row">
<span class="label">账号ID</span>
<span class="cts">{{ item.account_id || '-' }}</span>
<span class="cts num">{{ item.account_id || '-' }}</span>
</div>
<div class="field-row">
<span class="label">手机号码</span>
<span class="cts">{{ item.mobile || '-' }}</span>
<span class="cts num">{{ item.mobile || '-' }}</span>
</div>
<div class="field-row">
<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>
@ -65,47 +100,36 @@
</div>
<div class="operate-row">
<a-dropdown trigger="hover">
<a-button class="w-52px search-btn mr-8px" size="mini">
<a-button class="w-52px mr-8px" type="outline" size="mini">
<template #default>更多</template>
</a-button>
<template #content>
<a-doption class="color-#211F24" @click="openEdit(item)">编辑</a-doption>
<a-doption v-if="item.status === EnumStatus.NORMAL" class="color-#211F24" @click="handleReauthorize(item)"
>重新授权</a-doption
>
<a-doption v-if="showPauseButton(item.status)" class="color-#211F24" @click="handlePause(item)"
>暂停同步</a-doption
>
<a-doption class="color-#F64B31" @click="openDelete(item)">删除</a-doption>
</template>
<a-button class="search-btn" size="mini" @click="onBtnClick(item)">
<a-button type="outline" 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> -->
</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">更新数据失败</span>
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
<a-button type="outline" class="" size="mini" @click="syncData(item)">重新更新</a-button>
</div>
</div>
</a-spin>
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
<ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@ -113,8 +137,11 @@
</template>
<script setup>
import { defineProps, ref, computed } from 'vue';
import { defineProps, ref, computed, inject } from 'vue';
import { useRouter } from 'vue-router';
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
import PauseAccountPatchModal from './pause-account-patch';
import StatusBox from '../status-box';
@ -123,6 +150,7 @@ import AuthorizedAccountModal from '../authorized-account-modal';
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon3 from '@/assets/img/media-account/icon-warn.png';
// import icon3 from '@/assets/img/media-account/icon-delete.png';
const props = defineProps({
@ -130,13 +158,23 @@ const props = defineProps({
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 router = useRouter();
const pauseAccountPatchModalRef = ref(null);
const reauthorizeAccountModalRef = ref(null);
@ -156,6 +194,12 @@ const toggleSelect = (item) => {
}
emits('selectionChange', newSelected);
};
const isSyncing = (item) => {
if (!props.syncMediaAccounts.length) return false;
const target = props.syncMediaAccounts.find((v) => v.id === item.id);
return target?.status === 0;
};
const openEdit = (item) => {
emits('openEdit', item);
@ -166,7 +210,6 @@ const openDelete = (item) => {
};
const handleReauthorize = (item) => {
console.log({ item });
const { id, platform, status } = item;
const isUnauthorized = isUnauthorizedStatus(status);
if (isUnauthorized) {
@ -183,6 +226,9 @@ const handlePause = (item) => {
const showPauseButton = (status) => {
return ![EnumStatus.PAUSE, EnumStatus.UNAUTHORIZED].includes(status);
};
const showSyncDataButton = (status) => {
return [EnumStatus.NORMAL, EnumStatus.ABNORMAL_MISSING].includes(status);
};
const isUnauthorizedStatus = (status) => {
return [EnumStatus.UNAUTHORIZED].includes(status);
};
@ -197,17 +243,23 @@ const isAbnormalStatus = (status) => {
].includes(status);
};
const getTooltipText = (status) => {
return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
};
// const getTooltipText = (status) => {
// return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
// };
const syncData = inject('handleSyncData');
const onBtnClick = (item) => {
if (showSyncDataButton(item.status)) {
syncData(item);
return;
}
if (isUnauthorizedStatus(item.status)) {
handleReauthorize(item);
return;
}
if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
if ([EnumStatus.PAUSE].includes(item.status) || isAbnormalStatus(item.status)) {
handleReauthorize(item);
return;
}
@ -216,16 +268,45 @@ const onBtnClick = (item) => {
};
const getBtnText = (item) => {
if (showSyncDataButton(item.status)) {
return '更新数据';
}
if (isUnauthorizedStatus(item.status)) {
return '去授权';
}
if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
if ([EnumStatus.PAUSE].includes(item.status) || isAbnormalStatus(item.status)) {
return '重新授权';
}
return '暂停同步';
};
const goDetail = (item) => {
router.push(`/media-account/detail/${item.id}`);
};
const onDeleteSyncStatus = async (item) => {
await deleteSyncStatus(item.id);
emits('updateSyncStatus', item);
};
const formatTime = (time) => {
return exactFormatTime(time, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
};
const getLastSyncedAt = (item) => {
const target = props.syncMediaAccounts.find((v) => v.id === item.id);
if (props.isLoadingTaskStatus && target) {
if (target?.status !== 0) {
return formatTime(target.last_synced_at);
}
}
return formatTime(item.last_synced_at);
};
const isSyncFailed = (item) => {
const target = props.syncMediaAccounts.find((v) => v.id === item.id);
return target?.status === 2;
};
</script>
<style scoped lang="scss">

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>

40
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,20 +11,22 @@
padding: 12px 16px 16px;
display: flex;
align-items: flex-start;
position: relative;
.name {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
margin-bottom: 11px;
width: fit-content;
// line-height: 22px; /* 157.143% */
}
.label {
margin-right: 20px;
flex-shrink: 0;
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 12px;
font-style: normal;
font-weight: 400;
@ -44,11 +40,14 @@
.cts {
@include ellipsis;
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
&.num {
font-family: $font-family-manrope-regular;
}
}
.tag-box {
display: flex;
@ -61,7 +60,7 @@
.text {
@include ellipsis();
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 10px;
font-style: normal;
font-weight: 400;
@ -75,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;
@ -82,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);
}
}
}

757
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 ImportPromptModal from '../import-prompt-modal';
import StatusBox from '../status-box';
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,401 @@ 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 status={form.value.status} />
</FormItem>
</>
)}
<FormItem label="手机号码" field="mobile" required>
<Input v-model={form.value.mobile} placeholder="请输入..." size="large" />
</FormItem>
<FormItem label="运营人员" field="operator_name" required>
<Input v-model={form.value.operator_name} placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="运营平台" required={!isEdit.value}>
{isEdit.value ? (
<img src={form.value.platform === 0 ? icon3 : icon4} width="24" height="24" />
) : (
<RadioGroup v-model={form.value.platform}>
<Radio value={1}>小红书</Radio>
<Radio value={0}>抖音</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem label="号码持有人" field="holder_name">
<Input v-model={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="所属项目">
<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"
max-length={72}
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">

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

@ -9,7 +9,7 @@
width: 100%;
.dt {
color: var(--Brand-Brand-6, #6d4cfe);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -21,7 +21,7 @@
background: var(--BG-200, #f2f3f5);
.name {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -69,7 +69,7 @@
.tip {
color: var(--Text-3, #737478);
text-align: center;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;

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

@ -9,11 +9,12 @@
title="授权账号"
modal-class="authorized-account-modal"
:mask-closable="false"
:footer="!isLoading"
:footer="modalState !== MODAL_STATE.LOADING"
@close="close"
>
<div class="flex flex-col items-center">
<template v-if="isLoading">
<!-- 加载中状态 -->
<template v-if="modalState === MODAL_STATE.LOADING">
<a-progress
:percent="progress"
color="#6D4CFE"
@ -24,32 +25,46 @@
/>
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
</template>
<template v-else>
<template v-if="isCompleted">
<img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
<p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
<p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
<!-- 完成状态 -->
<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>
</template>
<!-- 二维码状态 -->
<template v-else>
<div class="img-box">
<template v-if="qrCodeLoading || isFailLoadQrCode">
<!-- 二维码加载中或失败 -->
<template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
<div class="relative w-160px h-160px">
<a-image :src="icon1" width="160" height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
<img
v-if="modalState === MODAL_STATE.QR_FAILED"
:src="icon4"
width="24"
height="24"
class="mb-13px"
/>
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
<span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
}}</span>
<span
:class="modalState === MODAL_STATE.QR_FAILED ? '!color-#F64B31' : '!color-#6D4CFE'"
class="s2"
>{{ modalState === MODAL_STATE.QR_FAILED ? '二维码生成失败' : '二维码生成中...' }}</span
>
</div>
<div
class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
></div>
</div>
</template>
<!-- 正常二维码 -->
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<div v-if="isOverdue" class="mask cursor-pointer" @click="handleRefreshQrCode">
<!-- 二维码失效遮罩 -->
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
<icon-refresh size="24" class="mb-13px" />
<p class="s1">二维码失效</p>
<p class="s1">请点击刷新</p>
@ -59,68 +74,96 @@
</template>
</template>
</div>
<template #footer>
<a-button v-if="isCompleted" size="large" class="cancel-btn" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<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">
{{ confirmBtnText }}
</a-button>
</template>
</a-modal>
<SyncDataModal ref="syncDataModalRef" />
</template>
<script setup>
import { defineExpose, ref } from 'vue';
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';
import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
import icon4 from '@/assets/img/media-account/icon-warn.png';
// 失效时间
const emits = defineEmits(['update']);
const OVERDUE_TIME = 30000;
// 状态枚举
const MODAL_STATE = {
QR_LOADING: 0, // 二维码加载中
QR_FAILED: 1, // 二维码生成失败
QR_READY: 2, // 二维码就绪，等待扫码
QR_EXPIRED: 3, // 二维码已过期
LOADING: 4, // 数据同步中
SUCCESS: 5, // 授权成功
FAILED: 6, // 授权失败
};
const OVERDUE_TIME = 30000; // 失效时间
const visible = ref(false);
const isOverdue = ref(false); // 二维码失效
const isLoading = ref(false);
const isCompleted = ref(false);
const isSuccess = ref(false);
const modalState = ref(MODAL_STATE.QR_LOADING);
const failReason = ref('');
const progress = ref(0);
const id = ref('');
const platform = ref('');
const isFailLoadQrCode = ref(false);
const qrCodeUrl = ref('');
const qrCodeLoading = ref(false);
const syncDataModalRef = ref(null);
let progressTimer = null;
let overdueTimer = null;
let statusPollingTimer = null;
// 按钮文案映射
const confirmBtnText = computed(() => {
if (isFailLoadQrCode.value) return '重新生成';
if (!isCompleted.value) return '完成扫码';
return isSuccess.value ? '继续添加' : '重新扫码';
const btnTextMap = {
[MODAL_STATE.QR_LOADING]: '完成扫码',
[MODAL_STATE.QR_FAILED]: '重新生成',
[MODAL_STATE.QR_READY]: '完成扫码',
[MODAL_STATE.QR_EXPIRED]: '重新生成',
[MODAL_STATE.LOADING]: '处理中...',
[MODAL_STATE.SUCCESS]: '确认添加',
[MODAL_STATE.FAILED]: '重新扫码',
};
return btnTextMap[modalState.value] || '确定';
});
// 按钮是否禁用
const isBtnDisabled = computed(() => {
return false; // 所有状态下按钮都是可点击的
});
const open = (accountId, platformCode) => {
id.value = accountId;
platform.value = platformCode === 0 ? '抖音' : '小红书';
modalState.value = MODAL_STATE.QR_LOADING;
getAuthorizedQrCode();
visible.value = true;
};
const resetTaskFields = () => {
isOverdue.value = false;
isLoading.value = false;
isCompleted.value = false;
isSuccess.value = false;
modalState.value = MODAL_STATE.QR_LOADING;
failReason.value = '';
platform.value = '';
progress.value = 0;
qrCodeUrl.value = '';
qrCodeLoading.value = false;
isFailLoadQrCode.value = false;
};
const close = () => {
resetTaskFields();
id.value = '';
@ -132,24 +175,22 @@ const close = () => {
const getAuthorizedQrCode = async () => {
try {
qrCodeLoading.value = true;
modalState.value = MODAL_STATE.QR_LOADING;
const { code, data } = await getAuthorizedImage(id.value);
if (code === 200) {
qrCodeUrl.value = data.image;
overdueTimer = null;
isOverdue.value = false;
modalState.value = MODAL_STATE.QR_READY;
// 约定：后端限制40s内必须扫码，前端定30s后失效
overdueTimer = setTimeout(() => {
isOverdue.value = true;
modalState.value = MODAL_STATE.QR_EXPIRED;
}, OVERDUE_TIME);
} else {
isFailLoadQrCode.value = true;
modalState.value = MODAL_STATE.QR_FAILED;
}
} catch (error) {
isFailLoadQrCode.value = true;
} finally {
qrCodeLoading.value = false;
modalState.value = MODAL_STATE.QR_FAILED;
}
};
@ -163,22 +204,14 @@ const clearStatusPollingTimer = () => {
const startStatusPolling = () => {
clearStatusPollingTimer();
statusPollingTimer = setInterval(async () => {
if (!isCompleted.value) {
if (modalState.value === MODAL_STATE.LOADING) {
await getAuthorizedStatus();
if (isCompleted.value) {
progress.value = 1;
clearFakeProgressTimer();
clearStatusPollingTimer();
isLoading.value = false;
emits('update');
}
}
}, 2000);
};
const startLoading = async () => {
isLoading.value = true;
isCompleted.value = false;
modalState.value = MODAL_STATE.LOADING;
progress.value = 0;
startFakeProgressPolling();
startStatusPolling();
@ -189,10 +222,18 @@ const getAuthorizedStatus = async () => {
if (code === 200) {
const { status, message } = data;
if (status !== 0) {
isCompleted.value = true;
isSuccess.value = status === 1;
failReason.value = status === 2 ? message : '';
isOverdue.value = false;
progress.value = 1;
clearFakeProgressTimer();
clearStatusPollingTimer();
if (status === 1) {
modalState.value = MODAL_STATE.SUCCESS;
} else {
modalState.value = MODAL_STATE.FAILED;
failReason.value = message || '';
}
emits('update');
}
}
};
@ -200,11 +241,11 @@ const getAuthorizedStatus = async () => {
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
if (!isCompleted.value && progress.value < 0.99) {
if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
progress.value = Number(progress.value.toFixed(2));
} else if (!isCompleted.value && progress.value >= 0.99) {
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
} else {
clearFakeProgressTimer();
@ -219,44 +260,58 @@ const clearFakeProgressTimer = () => {
progressTimer = null;
}
};
const clearOverdueTimer = () => {
if (overdueTimer) {
clearTimeout(overdueTimer);
overdueTimer = null;
}
};
// 重新扫码
const handleRefreshQrCode = () => {
clearOverdueTimer();
resetTaskFields();
getAuthorizedQrCode();
};
const handleOk = () => {
if (isFailLoadQrCode.value) {
// 二维码已过期
if (modalState.value === MODAL_STATE.QR_EXPIRED) {
handleRefreshQrCode();
return;
}
if (!qrCodeUrl.value) {
// 二维码还在加载中
if (modalState.value === MODAL_STATE.QR_LOADING) {
AMessage.warning('二维码生成中，请稍等');
return;
}
if (isOverdue.value) {
AMessage.error('二维码已失效，请重新扫码');
// 二维码生成失败
if (modalState.value === MODAL_STATE.QR_FAILED) {
handleRefreshQrCode();
return;
}
if (isCompleted.value) {
clearOverdueTimer();
// 授权成功，关闭弹窗
if (modalState.value === MODAL_STATE.SUCCESS) {
syncDataModalRef.value.open(id.value);
close();
return;
}
if (isSuccess.value) {
close();
} else {
handleRefreshQrCode();
}
} else {
// 授权失败，重新扫码
if (modalState.value === MODAL_STATE.FAILED) {
handleRefreshQrCode();
return;
}
// 二维码就绪，开始授权流程
if (modalState.value === MODAL_STATE.QR_READY) {
clearOverdueTimer();
startLoading();
return;
}
};

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

@ -20,7 +20,7 @@
.s1 {
color: var(--BG-White, #fff);
text-align: center;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -30,7 +30,7 @@
}
.s2 {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
overflow: hidden;
color: var(--Functional-Red-6, #f64b31);
text-overflow: ellipsis;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

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-group-modal/style.scss
View File

@ -6,7 +6,7 @@
// min-height: 200px;
.t1 {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;

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>

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

@ -6,7 +6,7 @@
// min-height: 200px;
.t1 {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;

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({

15
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) {
@ -20,7 +7,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

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
>

4
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
View File

@ -10,7 +10,7 @@
}
.s1 {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
.arco-pagination-jumper-prepend {
color: var(--Text-2, #3c4043);
text-align: right;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

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>

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

@ -4,7 +4,7 @@
.arco-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

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

@ -9,56 +9,12 @@
title="重新授权"
modal-class="reauthorize-account-modal"
:mask-closable="false"
:footer="taskStep !== TASK_STEP.loading"
:footer="modalState !== MODAL_STATE.LOADING"
@close="close"
>
<div class="flex flex-col items-center">
<template v-if="taskStep === TASK_STEP.default">
<!-- <template v-if="hasUnsyncData">
<div class="flex items-center mb-20px">
<img :src="icon4" width="16" height="16" class="mr-16px" />
<span class="s2 color-#3C4043">检测到该账号最后更新日期为x月x日，已有x天未同步最新数据。</span>
</div>
<a-radio-group v-model="actionType" class="ml-32px">
<a-radio :value="1" class="mb-16px"
><span class="s2"
>立即同步遗漏数据 - 获取完整的最新数据 <span class="color-#6D4CFE">（推荐）</span></span
></a-radio
>
<a-radio :value="2" class="mb-16px"
><span class="s2">仅授权不更新 - 继续使用当前不完全的数据</span></a-radio
>
</a-radio-group>
</template> -->
<!-- <template v-else> -->
<div class="img-box">
<template v-if="qrCodeLoading || isFailLoadQrCode">
<div class="relative w-160px h-160px">
<a-image :src="icon1" width="160" height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
<span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
}}</span>
</div>
<div
class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
></div>
</div>
</template>
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<div v-if="isOverdue" class="mask cursor-pointer" @click="handleRefreshQrCode">
<icon-refresh size="24" class="mb-13px" />
<p class="s1">二维码失效</p>
<p class="s1">请点击刷新</p>
</div>
</div>
<span class="mt-16px"> 请使用{{ platform }}扫码，将公司账号绑定至灵机平台。 </span>
</template>
<!-- </template> -->
<template v-else-if="taskStep === TASK_STEP.loading">
<!-- 加载中状态 -->
<template v-if="modalState === MODAL_STATE.LOADING">
<a-progress
:percent="progress"
color="#6D4CFE"
@ -69,42 +25,97 @@
/>
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
</template>
<!-- 完成状态 -->
<template v-else>
<template v-if="isNicknameChanged">
<div class="flex items-center mb-20px">
<img :src="icon4" width="16" height="16" class="mr-16px" />
<span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
</div>
<div class="w-100% pl-32px">
<div class="account-tip-box">
<p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
<p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
<template v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED">
<template v-if="isNicknameChanged">
<div class="flex items-center mb-20px">
<img :src="icon4" width="16" height="16" class="mr-16px" />
<span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
</div>
<div class="w-100% pl-32px">
<div class="account-tip-box">
<p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
<p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
</div>
</div>
</template>
<template v-else>
<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>
</template>
</template>
<!-- 二维码状态 -->
<template v-else>
<div class="img-box">
<!-- 二维码加载中或失败 -->
<template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
<div class="relative w-160px h-160px">
<a-image :src="icon1" width="160" height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<img
v-if="modalState === MODAL_STATE.QR_FAILED"
:src="icon4"
width="24"
height="24"
class="mb-13px"
/>
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
<span
:class="modalState === MODAL_STATE.QR_FAILED ? '!color-#F64B31' : '!color-#6D4CFE'"
class="s2"
>{{ modalState === MODAL_STATE.QR_FAILED ? '二维码生成失败' : '二维码生成中...' }}</span
>
</div>
<div
class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
></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" />
<p class="s1">二维码失效</p>
<p class="s1">请点击刷新</p>
</div>
</div>
</template>
<template v-else>
<img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
<p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
<p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
<span class="mt-16px"> 请使用{{ platform }}扫码，将公司账号绑定至灵机平台。 </span>
</template>
</template>
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<a-button
v-if="taskStep === TASK_STEP.default || taskStep === TASK_STEP.end"
v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
size="large"
class="cancel-btn"
@click="close"
>取消</a-button
>
<a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
取消
</a-button>
<a-button type="primary" size="large" @click="handleOk">
{{ confirmBtnText }}
</a-button>
</template>
</a-modal>
<SyncDataModal ref="syncDataModalRef" />
</template>
<script setup>
import { defineExpose, ref, onUnmounted } from 'vue';
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';
@ -112,144 +123,149 @@ import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
import icon4 from '@/assets/img/media-account/icon-warn-1.png';
const emits = defineEmits(['update']);
const OVERDUE_TIME = 30000; // 失效时间
const TASK_STEP = {
default: 1,
loading: 2,
end: 3,
// 状态枚举
const MODAL_STATE = {
QR_LOADING: 0, // 二维码加载中
QR_FAILED: 1, // 二维码生成失败
QR_READY: 2, // 二维码就绪，等待扫码
QR_EXPIRED: 3, // 二维码已过期
LOADING: 4, // 数据同步中
SUCCESS: 5, // 授权成功
FAILED: 6, // 授权失败
};
const OVERDUE_TIME = 30000; // 失效时间
const visible = ref(false);
const isOverdue = ref(false); // 二维码失效
const isSuccess = ref(false);
const modalState = ref(MODAL_STATE.QR_LOADING);
const failReason = ref('');
const progress = ref(0);
const id = ref('');
const platform = ref('');
const isFailLoadQrCode = ref(false);
const qrCodeUrl = ref('');
const qrCodeLoading = ref(false);
const taskStep = ref(TASK_STEP.default);
// const hasUnsyncData = ref(false); // 含有未同步数据
const isNicknameChanged = ref(false); // 昵称发生变化
const actionType = ref(1);
const syncDataModalRef = ref(null);
let progressTimer = null;
let overdueTimer = null;
let statusPollingTimer = null;
// 按钮文案映射
const confirmBtnText = computed(() => {
if (isFailLoadQrCode.value) return '重新生成';
if (taskStep.value === TASK_STEP.default) {
// return hasUnsyncData.value ? '确定' : '完成扫码';
return '完成扫码';
}
if (taskStep.value === TASK_STEP.end) {
if (isNicknameChanged.value) return '确定覆盖';
return isSuccess.value ? '继续添加' : '重新扫码';
}
return '';
const btnTextMap = {
[MODAL_STATE.QR_LOADING]: '完成扫码',
[MODAL_STATE.QR_FAILED]: '重新生成',
[MODAL_STATE.QR_READY]: '完成扫码',
[MODAL_STATE.QR_EXPIRED]: '重新生成',
[MODAL_STATE.LOADING]: '处理中...',
[MODAL_STATE.SUCCESS]: isNicknameChanged.value ? '确定覆盖' : '确认添加',
[MODAL_STATE.FAILED]: '重新扫码',
};
return btnTextMap[modalState.value] || '确定';
});
const open = (accountId, platformCode) => {
id.value = accountId;
platform.value = platformCode === 0 ? '抖音' : '小红书';
modalState.value = MODAL_STATE.QR_LOADING;
getAuthorizedQrCode();
visible.value = true;
};
const resetTaskFields = () => {
isOverdue.value = false;
isSuccess.value = false;
modalState.value = MODAL_STATE.QR_LOADING;
failReason.value = '';
platform.value = '';
progress.value = 0;
qrCodeUrl.value = '';
qrCodeLoading.value = false;
isNicknameChanged.value = false;
isFailLoadQrCode.value = false;
actionType.value = 1;
taskStep.value = TASK_STEP.default;
};
const close = () => {
resetTaskFields();
id.value = '';
clearFakeProgressTimer();
clearStatusPollingTimer();
clearOverdueTimer();
visible.value = false;
};
const getAuthorizedQrCode = async () => {
try {
modalState.value = MODAL_STATE.QR_LOADING;
const { code, data } = await getAuthorizedImage(id.value);
if (code === 200) {
qrCodeUrl.value = data.image;
overdueTimer = null;
modalState.value = MODAL_STATE.QR_READY;
// 约定：后端限制40s内必须扫码，前端定30s后失效
overdueTimer = setTimeout(() => {
modalState.value = MODAL_STATE.QR_EXPIRED;
}, OVERDUE_TIME);
} else {
modalState.value = MODAL_STATE.QR_FAILED;
}
} catch (error) {
modalState.value = MODAL_STATE.QR_FAILED;
}
};
const clearStatusPollingTimer = () => {
if (statusPollingTimer) {
clearInterval(statusPollingTimer);
statusPollingTimer = null;
}
};
const startStatusPolling = () => {
clearStatusPollingTimer();
statusPollingTimer = setInterval(async () => {
if (modalState.value === MODAL_STATE.LOADING) {
await getAuthorizedStatus();
}
}, 2000);
};
const startLoading = async () => {
modalState.value = MODAL_STATE.LOADING;
progress.value = 0;
startFakeProgressPolling();
startStatusPolling();
};
const getAuthorizedStatus = async () => {
const { code, data } = await getMediaAccountsAuthorizedStatus(id.value);
if (code === 200) {
const { status, message } = data;
if (status !== 0) {
taskStep.value = TASK_STEP.end;
isSuccess.value = status === 1;
failReason.value = status === 2 ? message : '';
isOverdue.value = false;
}
}
};
progress.value = 1;
clearFakeProgressTimer();
clearStatusPollingTimer();
const startStatusPolling = () => {
clearStatusPollingTimer();
statusPollingTimer = setInterval(async () => {
if (taskStep.value === TASK_STEP.loading) {
await getAuthorizedStatus();
if (taskStep.value === TASK_STEP.end) {
progress.value = 1;
clearFakeProgressTimer();
clearStatusPollingTimer();
emits('update');
if (status === 1) {
modalState.value = MODAL_STATE.SUCCESS;
// 这里可以根据实际业务逻辑判断是否需要显示昵称变更提示
// isNicknameChanged.value = true; // 示例：如果需要显示昵称变更
} else {
modalState.value = MODAL_STATE.FAILED;
failReason.value = message || '';
}
}
}, 2000);
};
const getAuthorizedQrCode = async () => {
try {
qrCodeLoading.value = true;
const { code, data } = await getAuthorizedImage(id.value);
if (code === 200) {
qrCodeUrl.value = data.image;
overdueTimer = null;
isOverdue.value = false;
// 约定：后端限制40s内必须扫码，前端定30s后失效
overdueTimer = setTimeout(() => {
isOverdue.value = true;
}, OVERDUE_TIME);
} else {
isFailLoadQrCode.value = true;
emits('update');
}
} catch (error) {
isFailLoadQrCode.value = true;
} finally {
qrCodeLoading.value = false;
}
};
const startLoading = async () => {
taskStep.value = TASK_STEP.loading;
progress.value = 0;
startFakeProgressPolling();
startStatusPolling();
};
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
if (taskStep.value === TASK_STEP.loading) {
if (progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
progress.value = Number(progress.value.toFixed(2));
} else if (progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
}
if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
progress.value = Number(progress.value.toFixed(2));
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
} else {
clearFakeProgressTimer();
clearStatusPollingTimer();
@ -263,6 +279,7 @@ const clearFakeProgressTimer = () => {
progressTimer = null;
}
};
const clearOverdueTimer = () => {
if (overdueTimer) {
clearTimeout(overdueTimer);
@ -270,52 +287,57 @@ const clearOverdueTimer = () => {
}
};
const clearStatusPollingTimer = () => {
if (statusPollingTimer) {
clearInterval(statusPollingTimer);
statusPollingTimer = null;
}
};
// 重新扫码
const handleRefreshQrCode = () => {
clearOverdueTimer();
resetTaskFields();
getAuthorizedQrCode();
};
const handleOk = () => {
if (taskStep.value === TASK_STEP.default) {
if (isFailLoadQrCode.value) {
handleRefreshQrCode();
return;
}
clearOverdueTimer();
if (!qrCodeUrl.value) {
AMessage.warning('二维码生成中，请稍等');
return;
}
if (isOverdue.value) {
AMessage.error('二维码已失效，请重新扫码');
return;
}
startLoading();
// 二维码已过期
if (modalState.value === MODAL_STATE.QR_EXPIRED) {
AMessage.error('二维码已失效，请重新扫码');
handleRefreshQrCode();
return;
}
if (taskStep.value === TASK_STEP.end) {
// 二维码还在加载中
if (modalState.value === MODAL_STATE.QR_LOADING) {
AMessage.warning('二维码生成中，请稍等');
return;
}
// 二维码生成失败
if (modalState.value === MODAL_STATE.QR_FAILED) {
handleRefreshQrCode();
return;
}
// 授权成功
if (modalState.value === MODAL_STATE.SUCCESS) {
if (isNicknameChanged.value) {
isNicknameChanged.value = false;
console.log('确定覆盖');
// 这里可以添加覆盖逻辑
} else {
if (isSuccess.value) {
close();
} else {
handleRefreshQrCode();
}
syncDataModalRef.value.open(id.value);
close();
}
return;
}
// 授权失败，重新扫码
if (modalState.value === MODAL_STATE.FAILED) {
handleRefreshQrCode();
return;
}
// 二维码就绪，开始授权流程
if (modalState.value === MODAL_STATE.QR_READY) {
clearOverdueTimer();
startLoading();
return;
}
};

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

@ -20,7 +20,7 @@
.s1 {
color: var(--BG-White, #fff);
text-align: center;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -30,7 +30,7 @@
}
.s2 {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
overflow: hidden;
color: var(--Functional-Red-6, #f64b31);
text-overflow: ellipsis;
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;

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

@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
.text {
color: var(--BG-700, #737478);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 12px;
font-style: normal;
font-weight: 400;

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,
};

149
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 { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import { getTaskStatus } from '@/api/all/common';
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?.abnormal_number > 0);
const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
const isDisabledBatchSyncData = computed(() => selectedItems.value.some((item) => item.status !== EnumStatus.NORMAL));
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
const indeterminate = computed(
@ -159,27 +182,27 @@ const tipLabel = computed(() => {
}
const {
abnormal_number = 0,
total_abnormal_number = 0,
login_invalid_number = 0,
too_many_requests_number = 0,
account_frozen_number = 0,
miss_data_number = 0,
abnormal_number = 0,
} = healthData.value;
// 定义异常类型映射
const abnormalTypes = [
{ count: login_invalid_number, label: 'cookie过期' },
{ count: too_many_requests_number, label: '已请求频繁' },
{ 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 `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
onMounted(() => {
getData();
return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
const getData = () => {
@ -210,7 +233,7 @@ const reload = () => {
getData();
};
const handleSearch = () => {
getData();
reload();
};
const handleReset = () => {
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
@ -260,10 +283,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 = 1;
}
};
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);
};
@ -275,6 +350,46 @@ 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 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">

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

@ -2,20 +2,10 @@
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 {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-style: normal;
}
:deep(.arco-btn) {
@ -29,7 +19,7 @@
border-radius: 2px;
background: #f0edff;
.label {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -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: 'PuHuiTi-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>

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

@ -5,8 +5,8 @@
export enum EnumStatus {
UNAUTHORIZED = 0,
NORMAL = 1,
ABNORMAL = 2,
PAUSE = 3,
ABNORMAL = 3,
PAUSE = 2,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,

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

@ -19,7 +19,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: {

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/components/echarts-item/index.vue
View File

@ -9,9 +9,9 @@
</template>
</a-popover>
</template>
<NoData v-if="isChartEmpty" text="暂无数据" />
<div class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
<div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
</a-card>
</template>
@ -32,7 +32,11 @@ const chartEl = ref(null);
const chartContainer = ref(null);
let chartInstance = null;
const isChartEmpty = computed(() => isEmpty(props.chartData?.series_data));
// 判断 series_data 是否为空或 undefined/null
const isChartEmpty = computed(() => {
const seriesData = props.chartData?.series_data;
return Array.isArray(seriesData) ? seriesData.length === 0 : !seriesData;
});
console.log(isChartEmpty, 'isChartEmpty');
// 初始化图表

14
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';
@ -109,6 +109,10 @@ const getAccountsTrends = async () => {
onLoading.value = false;
};
const handleTabClick = (value) => {
accountType.value = value;
handleSearch();
};
const mergeChartData = (apiResponse) => {
console.log(apiResponse, 'apiResponse');
chartConfigs.value = chartConfigs.value.map((config) => {

4
src/views/property-marketing/put-account/account-dashboard/style.scss
View File

@ -28,7 +28,7 @@
.top {
.title {
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-style: normal;
}
@ -92,7 +92,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'PuHuiTi-Regular';
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;

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,
},

8
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 }">
@ -135,7 +135,7 @@
<script setup>
import { ref, computed } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import { useRouter } from 'vue-router';

2
src/views/property-marketing/put-account/account-data/components/board-table/style.scss
View File

@ -9,7 +9,7 @@
.account-table {
.cts {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;

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