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

feat: 关联平台账号，关联渠道账户

Browse Source
This commit is contained in:
rd
2025-07-22 16:29:16 +08:00
parent 55174e4258
commit a9d055c479
24 changed files with 808 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@
<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">{{
<a-option v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS" :key="index" :value="item.value" :label="item.label">{{
item.label
}}</a-option>
</a-select>
@ -83,7 +83,8 @@ import GroupSelect from '@/views/property-marketing/media-account/components/gro
import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
import StatusSelect from '@/views/property-marketing/media-account/components/status-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: {

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

@ -7,26 +7,100 @@
: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" />
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
<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 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 visible = ref(false);
const emits = defineEmits(['update']);
const currentStep = ref(1);
const formQuery = ref(cloneDeep(INITIAL_QUERY));
const isFirstStep = computed(() => currentStep.value === 1);
const isLastStep = computed(() => currentStep.value === STEPS.length);
const activeComp = computed(() => STEPS.find((v) => v.index === currentStep.value)?.comp ?? null);
const open = () => {
visible.value = true;
};
const onClose = () => {
currentStep.value = 1;
formQuery.value = cloneDeep(INITIAL_QUERY);
visible.value = false;
};
const onCancel = () => {
visible.value = false;
};
const onSubmit = () => {
console.log('onSubmit');
console.log(formQuery.value);
if (isLastStep.value) {
console.log('onSubmit');
} else {
currentStep.value++;
}
};
const setCurrent = (current) => {
currentStep.value = current;
};
const onPrev = () => {
currentStep.value--;
};
defineExpose({ open });
</script>

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

@ -0,0 +1,12 @@
<template>
<div>步骤4</div>
</template>
<script setup>
const props = defineProps({
formQuery: {
type: Object,
default: () => {},
},
});
</script>

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

@ -0,0 +1,43 @@
<template>
<a-form ref="formRef" :model="formQuery" :rules="rules" layout="horizontal" auto-label-width class="h-360px">
<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-120px"
/>
</a-form-item>
<a-form-item label="项目背景" field="background">
<a-textarea
v-model="formQuery.background"
placeholder="请输入项目背景"
:max-length="500"
show-word-limit
class="h-120px"
/>
</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: '项目名称' }],
};
</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 />
</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 />
</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>

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

@ -74,7 +74,7 @@
</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,

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

@ -77,7 +77,7 @@
<script setup>
import { defineProps, ref, computed } from 'vue';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import { PLATFORM_LIST } from '@/utils/platform';
import { EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatNumberShow, exactFormatTime } from '@/utils/tools';

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

@ -148,7 +148,7 @@ import { ref, defineEmits } from 'vue';
import AuthorizedAccountModal from '../authorized-account-modal';
// import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '../status-box';
import { PLATFORM_LIST, ENUM_PLATFORM } from '@/views/property-marketing/put-account/common_constants';
import { PLATFORM_LIST, ENUM_PUT_ACCOUNT_PLATFORM } from '@/utils/platform';
import {
postPlacementAccounts,
@ -292,7 +292,7 @@ const handleBatchImport = async () => {
const handleAdd = async () => {
// 聚光无子账号
if (form.value.platform === ENUM_PLATFORM.jg) {
if (form.value.platform === ENUM_PUT_ACCOUNT_PLATFORM.jg) {
const { code, data } = await postPlacementAccounts(form.value);
if (code === 200) {
update();

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

@ -67,7 +67,6 @@
import dayjs from 'dayjs';
import { defineExpose, ref, computed, defineEmits } from 'vue';
import { exactFormatTime } from '@/utils/tools';
import { ENUM_PLATFORM } from '@/views/property-marketing/put-account/common_constants';
import {
putPlacementAccountsAuthorized,
getPlacementAccountsAuthorizedStatus,

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

@ -66,7 +66,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { getPlacementAccountOperators } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import { PLATFORM_LIST } from '@/utils/platform';
import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';

2
src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
View File

@ -31,7 +31,7 @@
</template>
<script setup lang="ts">
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import { PLATFORM_LIST } from '@/utils/platform';
import { Message } from '@arco-design/web-vue';
const columns = [

2
src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
View File

@ -54,7 +54,7 @@
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import { PLATFORM_LIST } from '@/utils/platform';
import AccountSelect from '@/views/components/common/AccountSelect.vue';
import PlanSelect from '@/views/components/common/PlanSelect.vue';

2
src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
View File

@ -92,7 +92,7 @@
</view>
</template>
<script setup lang="ts">
import { PLATFORM_LIST } from '../../../common_constants';
import { PLATFORM_LIST } from '@/utils/platform';
const props = defineProps({
listData: {

2
src/views/property-marketing/put-account/investment-guidelines/detail.vue
View File

@ -77,7 +77,7 @@ import { reactive, ref } from 'vue';
import MonthData from './components/month-data/index.vue';
import PlacementSuggestions from './components/placement-suggestions/index.vue';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants.ts';
import { PLATFORM_LIST } from '@/utils/platform';
import { getPlacementGuideDetail } from '@/api/all/propertyMarketing';
import { useRoute } from 'vue-router';
import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';