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

Merge remote-tracking branch 'origin/feature/0902_antd组件替换' into test

Browse Source 
# Conflicts:
#	src/App.vue
#	src/components/common-select/index.vue
#	src/layouts/components/navbar/components/task-center-modal/components/import-task/index.vue
#	src/views/components/login/index.vue
#	src/views/home/components/history-conversation-drawer/index.vue
#	src/views/login/style.scss
#	src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
This commit is contained in:
rd
2025-09-10 16:13:54 +08:00
parent 55dfa8d8f7 98e6d1194d
commit 2ddc552213
233 changed files with 5624 additions and 6240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<template>
<div class="brand-wrap">
<div class="filter-wrap bg-#fff rounded-8px ">
<div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">品牌物料</p>
<div class="flex items-center">
<a-button class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
<Button type="primary" class="add-btn" @click="handleAdd">+ 添加品牌</Button>
</div>
</div>
@ -12,32 +12,33 @@
<div class="filter-row flex mb-20px">
<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>
<Space size="medium">
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." size="medium" allowClear>
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</Input>
</Space>
</div>
<div class="filter-row flex">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="outline" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
<a-modal
v-model:visible="modalVisible"
:mask-closable="false"
<Modal
v-model:open="modalVisible"
:maskClosable="false"
centered
:esc-to-close="false"
width="510px"
@cancel="handleModalCancel"
@ -45,78 +46,77 @@
<template #title>
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
</template>
<a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
<a-form-item field="name" label="品牌名称">
<a-input v-model="form.name" class="h-36px" placeholder="请输入..." />
</a-form-item>
<a-form-item field="logo" class="form-item-logo" label="标准版Logo">
<a-space>
<Form
:model="form"
:rules="formRule"
ref="formRef"
layout="horizontal"
labelAlign="right"
:labelCol="{ span: 4 }"
:wrapperCol="{ span: 20 }"
>
<FormItem name="name" label="品牌名称">
<Input v-model:value="form.name" class="h-36px" placeholder="请输入..." />
</FormItem>
<FormItem name="logo" class="form-item-logo" label="标准版Logo">
<div class="inline-flex">
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
</a-space>
<a-space>
</div>
<div class="inline-flex">
<span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
</a-space>
</a-form-item>
<a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
</div>
</FormItem>
<FormItem name="otherLogos" class="form-item-logo" label="其他Logo">
<ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
</a-form-item>
<a-form-item field="slogan" label="Slogan">
<a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
</a-form-item>
</a-form>
</FormItem>
<FormItem name="slogan" label="Slogan">
<TextArea v-model:value="form.slogan" placeholder="请输入..." :maxlength="50" showCount />
</FormItem>
</Form>
<template #footer>
<a-button @click="handleModalCancel">取消</a-button>
<a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
<Button @click="handleModalCancel">取消</Button>
<Button type="primary" @click="handleModalOk">{{ btn_str }}</Button>
</template>
</a-modal>
</Modal>
</div>
</div>
<div
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col"
>
<a-table :data="tableData" ref="tableRef" :pagination="false">
<template #columns>
<a-table-column title="品牌名称" data-index="name" />
<a-table-column title="品牌logo" data-index="logo">
<template #cell="{ record }">
<img :src="record.logo" style="width: 50px; height: 50px" />
</template>
</a-table-column>
<a-table-column title="Slogan" data-index="slogan" />
<a-table-column width="150" min-widht="150" title="操作" data-index="optional">
<template #cell="{ record }">
<a-space size="medium">
<a-space>
<a-popconfirm
content="确定删除吗?"
type="warning"
ok-text="确认删除"
cancel-text="取消"
@ok="deleteBrand(record.id)"
>
<icon-delete></icon-delete>
</a-popconfirm>
</a-space>
<a-space>
<a-button class="edit-btn" type="outline" @click="handleEdit(record.id)">编辑</a-button>
</a-space>
</a-space>
</template>
</a-table-column>
</template>
</a-table>
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
<Table :dataSource="tableData" ref="tableRef" :pagination="false" :showSorterTooltip="false">
<Table.Column title="品牌名称" dataIndex="name" />
<Table.Column title="品牌logo" dataIndex="logo">
<template #customRender="{ record }">
<img :src="record.logo" style="width: 50px; height: 50px" />
</template>
</Table.Column>
<Table.Column title="Slogan" dataIndex="slogan" />
<Table.Column :width="80" title="操作" dataIndex="optional">
<template #customRender="{ record }">
<Space>
<Popconfirm
title="确定删除吗?"
okText="确认删除"
cancelText="取消"
@confirm="deleteBrand(record.id)"
>
<icon-delete></icon-delete>
</Popconfirm>
<Button type="outline" class="edit-btn" size="small" @click="handleEdit(record.id)">编辑</Button>
</Space>
</template>
</Table.Column>
</Table>
<div class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:pageSize="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
:hideOnSinglePage="false"
/>
</div>
</div>
@ -125,8 +125,9 @@
<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { Button, Modal, Space, Form, FormItem, Pagination, Input, Table, message, Popconfirm } from 'ant-design-vue';
const { TextArea } = Input;
import {
addMaterials,
@ -196,19 +197,16 @@ const handleReset = () => {
reload();
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.page = current;
pageInfo.pageSize = pageSize;
handleSearch();
};
const onPageSizeChange = (pageSize) => {
pageInfo.pageSize = pageSize;
reload();
};
const deleteBrand = (id) => {
console.log(id, 'id');
deleteMaterials(id).then(() => {
Message.success('删除成功');
message.success('删除成功');
handleSearch();
});
};
@ -231,24 +229,22 @@ function handleModalOk() {
formRef.value
.validate()
.then((valid) => {
if (!valid) {
if (form.id) {
updateMaterials(form.id, form).then(() => {
Message.success('修改成功');
handleSearch();
});
} else {
addMaterials(form).then((response) => {
Message.success('新增成功');
handleSearch();
});
}
modalVisible.value = false;
if (form.id) {
updateMaterials(form.id, form).then(() => {
message.success('修改成功');
handleSearch();
});
} else {
addMaterials(form).then((response) => {
message.success('新增成功');
handleSearch();
});
}
modalVisible.value = false;
})
.catch((error) => {
console.error('验证失败:', error);
Message.error('请检查表单填写是否正确');
message.error('请检查表单填写是否正确');
});
}

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

@ -37,6 +37,9 @@
}
:deep(.ant-popconfirm-buttons) {
display: flex;
}
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),

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

@ -1,11 +1,11 @@
.arco-modal {
.arco-modal-body {
.arco-form-item {
.ant-modal {
.ant-modal-body {
.ant-form-item {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
.arco-form-item-label {
.ant-form-item-label {
color: var(--Text-1, #211f24);
font-family: $font-family-regular;
font-size: 14px;

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

@ -1,6 +1,6 @@
<template>
<div class="business-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
<div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">业务洞察报告</p>
</div>
@ -9,54 +9,59 @@
<div class="filter-row flex mb-20px">
<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>
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." size="middle" allowClear>
<template #prefix>
<icon-search />
</template>
</Input>
</div>
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
</a-space>
<Space class="w-240px">
<DatePicker.RangePicker allowClear format="YYYY-MM-DD HH:mm" class="w-100%" />
</Space>
</div>
<div class="filter-row flex">
<a-button type="outline" class="mr-12px" size="medium">
<Button class="mr-12px outline-btn">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium">
搜索
</Button>
<Button>
<template #icon>
<icon-refresh />
</template>
<template #default>重置</template>
</a-button>
重置
</Button>
</div>
</div>
</div>
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col"
>
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false">
</a-table>
<Table :dataSource="tableData" :pagination="false" :showSorterTooltip="false" @change="handleChange">
<Table.Column
v-for="column in columns"
:key="column.dataIndex"
:title="column.title"
:dataIndex="column.dataIndex"
:width="column.width"
:minWidth="column.minWidth"
/>
</Table>
<div class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:pageSize="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -65,6 +70,7 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button, Input, Space, Table, Pagination, DatePicker } from 'ant-design-vue';
const pageInfo = reactive({
page: 1,
@ -79,17 +85,19 @@ const listResult = reactive({
data: [],
total: 0,
});
const onPageSizeChange = () => {};
const tableData = ref([]);
const handleChange = () => {};
const onPageChange = () => {};
const columns = [
const onPageChange = (page: number, pageSize:number) => {
pageInfo.page = page;
pageInfo.pageSize = pageSize;
};
const columns = [
{
title: '服务/产品',
dataIndex: 'service_name',
slotName: 'rank',
width: 60,
minWidth: 60,
width: 100,
minWidth: 100,
},
{
title: '生成日期',
@ -140,10 +148,12 @@ const columns = [
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
:deep(.outline-btn) {
border: 1px solid #d9d9d9;
&:hover {
color: #6d4cfe;
border-color: #6d4cfe;
}
}
:deep(.edit-btn) {
@ -157,9 +167,9 @@ const columns = [
background: var(--BG-white, #fff);
}
:deep(.arco-input-wrapper),
:deep(.arcoInput-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-textarea-wrapper),
:deep(.ant-input),
:deep(.arco-picker),
:deep(.arco-select-view-multiple) {
border-radius: 4px;
@ -167,7 +177,7 @@ const columns = [
background-color: #fff;
&:focus-within,
&.arco-input-focus {
&.arcoInput-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);

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

@ -1,6 +1,6 @@
<template>
<div class="competitive-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
<div class="filter-wrap bg-#fff rounded-8px ">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">竞品对比报告</p>
</div>
@ -9,54 +9,89 @@
<div class="filter-row flex mb-20px">
<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>
<Space>
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." allowClear>
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</Input>
</Space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
</a-space>
<Space class="w-240px">
<DatePicker.RangePicker allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
</Space>
</div>
<div class="filter-row flex">
<a-button type="outline" class="mr-12px" size="medium">
<Button type="primary" ghost class="mr-12px">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium">
</Button>
<Button>
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col"
>
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false">
</a-table>
<Table :dataSource="tableData" :pagination="false" :showSorterTooltip="false" @change="handleChange">
<Table.Column
title="服务/产品"
dataIndex="service_name"
:width="60"
:minWidth="60"
/>
<Table.Column
title="生成日期"
dataIndex="create_time"
:width="120"
:minWidth="120"
/>
<Table.Column
:width="180"
:minWidth="180"
title="竞争对手"
dataIndex="customer"
/>
<Table.Column
title="最后更新日期"
dataIndex="volumeRate"
:width="180"
:minWidth="180"
/>
<Table.Column
title="操作人"
dataIndex="operator"
:width="120"
:minWidth="120"
/>
<Table.Column
title="操作"
dataIndex="operator"
:width="120"
:minWidth="120"
/>
</Table>
<div class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:pageSize="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -64,6 +99,7 @@
</template>
<script setup lang="ts">
import { Button, Input, Space, Pagination, Table, DatePicker } from 'ant-design-vue';
import { reactive, ref } from 'vue';
const pageInfo = reactive({
@ -76,54 +112,14 @@ const query = reactive({
});
const handleChange = () => {};
const onPageChange = () => {};
const onPageChange = (page: number, pageSize:number) => {
pageInfo.page = page;
pageInfo.pageSize = pageSize;
};
const onPageSizeChange = () => {};
const tableData = ref([]);
const columns = [
{
title: '服务/产品',
dataIndex: 'service_name',
slotName: 'rank',
width: 60,
minWidth: 60,
},
{
title: '生成日期',
dataIndex: 'create_time',
width: 120,
minWidth: 120,
},
{
titleSlotName: 'customer',
width: 180,
minWidth: 180,
title: '竞争对手',
dataIndex: 'customer',
slotName: 'hot',
},
{
titleSlotName: 'lasterUpdateTime',
title: '最后更新日期',
dataIndex: 'volumeRate',
width: 180,
minWidth: 180,
slotName: 'lasterUpdateTime',
},
{
title: '操作人',
dataIndex: 'operator',
width: 120,
minWidth: 120,
},
{
title: '操作',
dataIndex: 'operator',
width: 120,
minWidth: 120,
},
];
</script>
<style scoped lang="scss">
@ -151,7 +147,7 @@ const columns = [
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-textarea-wrapper),
:deep(.ant-input),
:deep(.arco-picker),
:deep(.arco-select-view-multiple) {
border-radius: 4px;

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

@ -5,151 +5,143 @@
<template>
<div class="action-row mb-12px flex justify-between">
<div>
<a-checkbox
<Checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:checked="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
@change="(e) => handleSelectAll(e.target.checked)"
>全选</Checkbox
>
</div>
<div class="flex items-center">
<a-button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<Button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download class="mr-8px" /> </template>
<template #default>导出数据</template>
</a-button>
<a-button type="outline" class="w-110px" size="medium" @click="openCustomColumn">
</Button>
<Button type="outline" class="w-110px" size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
<img :src="icon1" width="14" height="14" class="mr-8px" />
</template>
<template #default>自定义列</template>
</a-button>
</Button>
</div>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
row-key="id"
column-resizable
:row-selection="{
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
selectedRowKeys: selectedItems,
onSelect: handleSelect,
onSelectAll: handleSelectAll,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
class="account-table w-100% flex-1"
bordered
@sorter-change="handleSorterChange"
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="handleTableChange"
>
<template #empty>
<template #emptyText>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in tableColumns"
: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">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<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>
<Column
v-for="column in tableColumns"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sorter="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</template>
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="20" height="20" class="rounded-4px" />
</template>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<StatusBox :item="record" class="w-fit h-28px" />
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{
`观看: ${record[`${getPropPrefix(dateType)}view_rate`]}% 点赞: ${
record[`${getPropPrefix(dateType)}like_rate`]
}%`
}}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'like_collect_number'" #cell="{ record }">
{{
formatNumberShow({
value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
record[`${getPropPrefix(dateType)}collect_number`] ?? 0
}`,
showExactValue: true,
})
}}
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-if="column.dataIndex === 'platform'" #customRender="{ record }">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="20" height="20" class="rounded-4px" />
</template>
<template v-else-if="column.dataIndex === 'status'" #customRender="{ record }">
<StatusBox :item="record" class="w-fit h-28px" />
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #customRender="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{
`观看: ${record[`${getPropPrefix(dateType)}view_rate`]}% 点赞: ${
record[`${getPropPrefix(dateType)}like_rate`]
}%`
}}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'like_collect_number'" #customRender="{ record }">
{{
formatNumberShow({
value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
record[`${getPropPrefix(dateType)}collect_number`] ?? 0
}`,
showExactValue: true,
})
}}
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="column.dataIndex === 'newest_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_work_published_at) }}
</p>
</template>
<template v-else-if="column.dataIndex === 'second_new_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.second_new_work_published_at) }}
</p>
</template>
<template v-else-if="column.isRateField" #customRender="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="column.dataIndex === 'newest_work_title'" #customRender="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_work_published_at) }}
</p>
</template>
<template v-else-if="column.dataIndex === 'second_new_work_title'" #customRender="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.second_new_work_published_at) }}
</p>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
<a-table-column data-index="operation" fixed="right" width="100" title="操作">
<template #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
</a-table-column>
</template>
</a-table>
<template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</Column>
<Column dataIndex="operation" fixed="right" :width="100" title="操作">
<template #customRender="{ record }">
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template>
</Column>
</Table>
<CustomTableColumnModal
ref="customTableColumnModalRef"
@ -162,6 +154,8 @@
<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Checkbox, Button, Tooltip, Table } from 'ant-design-vue';
const { Column } = Table;
import { getCustomColumns } from '@/api/all/common';
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
@ -209,7 +203,7 @@ const dateType = computed(() => (props.query.type === 7 ? 'week' : 'month'));
const tableColumns = computed(() => {
const _result = [];
const _columns = getDefaultColumns(dateType.value);
console.log({_columns})
console.log({ _columns });
selectedColumns.value.forEach((item) => {
const _column = _columns.find((_item) => _item.prop === item);
@ -220,30 +214,32 @@ const tableColumns = computed(() => {
return _result;
});
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = props.dataSource.map((item) => item.id);
} else {
selectedItems.value = [];
}
emit('selectionChange', checked ? selectedItems.value : []);
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}?type=${dateType.value}`);
};
// 处理排序变化
const handleSorterChange = (column, order) => {
console.log(column, order);
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
// 处理表格变化
const handleTableChange = (pagination, filters, sorter) => {
if (sorter && sorter.field) {
emit('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
}
};
const handleSelect = (selectedRowKeys, selectedRows) => {
selectedItems.value = selectedRowKeys;
const handleSelect = (record, selected, selectedRows, nativeEvent) => {
selectedItems.value = selectedRows.map((row) => row.id);
emit('selectionChange', selectedRows);
};
const handleSelectAll = (selected, selectedRows, changeRows) => {
if (selected) {
selectedItems.value = props.dataSource.map((item) => item.id);
emit('selectionChange', props.dataSource);
} else {
selectedItems.value = [];
emit('selectionChange', []);
}
};
const handleExport = () => {
emit('export');
};

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

@ -3,14 +3,15 @@
* @Date: 2025-06-30 10:54:49
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="自定义列"
width="960px"
unmountOnClose
titleAlign="start"
class="custom-table-column-modal-98"
@close="close"
centered
wrapClassName="custom-table-column-modal-98"
@cancel="close"
>
<div class="modal-body">
<!-- 左侧分组 -->
@ -20,16 +21,16 @@
<span class="text">{{ group.label }}</span>
</div>
<div class="fields">
<a-checkbox
<Checkbox
v-for="option in group.columns"
:key="option.value"
:model-value="isCheck(option)"
:checked="isCheck(option)"
:value="option.value"
:disabled="option.is_require === ENUM_STATUS.NO"
@change="(checked) => onCheckChange(checked, option)"
@change="(e) => onCheckChange(e.target.checked, option)"
>
{{ localFields.find((item) => item.prop === option.value)?.title }}
</a-checkbox>
</Checkbox>
</div>
</div>
</div>
@ -64,15 +65,16 @@
</div>
<template #footer>
<div style="text-align: right">
<a-button class="mr-8px" size="medium" @click="close">取消</a-button>
<a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
<div class="flex">
<Button @click="close">取消</Button>
<Button type="primary" @click="onSubmit">确定</Button>
</div>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Checkbox, Modal, Button } from 'ant-design-vue';
import { ref, defineExpose } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
@ -169,6 +171,7 @@ const removeCheckedField = (value) => {
// 勾选/取消
const onCheckChange = (checked, option) => {
console.log(checked, option);
if (checked) {
checkColumns.value.push(option.value);
} else {

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

@ -1,5 +1,5 @@
.custom-table-column-modal-98 {
.arco-modal-body {
.ant-modal-body {
.modal-body {
height: 504px;
border-radius: 8px;

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

@ -8,18 +8,11 @@
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">账号名称</span>
<a-input
v-model="query.name"
placeholder="请搜索..."
size="medium"
class="!w-240px"
allow-clear
@change="handleSearch"
>
<Input v-model:value="query.name" placeholder="请搜索..." class="!w-240px" allowClear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</Input>
</div>
<div class="filter-row-item flex items-center">
<span class="label">分组</span>
@ -43,37 +36,40 @@
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-select v-model="query.type" size="medium" placeholder="全部" class="!w-240px" @change="handleSearch">
<template #arrow-icon> <icon-calendar size="16" /> </template>
<a-option :value="7" label="近7天">近7天</a-option>
<!-- <a-option :value="14" label="近14天">近14天</a-option> -->
<a-option :value="30" label="近30天">近30天</a-option>
</a-select>
<Select v-model:value="query.type" size="middle" placeholder="全部" class="!w-240px" @change="handleSearch">
<template #suffixIcon> <icon-calendar size="16" /> </template>
<Option :value="7" label="近7天">近7天</Option>
<!-- <Option :value="14" label="近14天">近14天</Option> -->
<Option :value="30" label="近30天">近30天</Option>
</Select>
</div>
<div class="filter-row-item flex items-center">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px" size="medium" @click="handleReset">
</Button>
<Button class="w-84px" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { Button, Input, Select } from 'ant-design-vue';
import { reactive, defineEmits, defineProps, onMounted, nextTick, ref } from 'vue';
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
import CommonSelect from '@/components/common-select';
const { Option } = Select;
const props = defineProps({
query: {
type: Object,
@ -81,7 +77,7 @@ const props = defineProps({
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
const groups = ref([]);
const operators = ref([]);

4
src/views/property-marketing/media-account/account-dashboard/constants.ts
View File

@ -37,8 +37,8 @@ export const CARD_FIELDS = [
export const INITIAL_QUERY = {
name: '',
status: '',
operator_id: '',
status: undefined,
operator_id: undefined,
group_ids: [],
type: 7,
column: '',

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

@ -9,9 +9,9 @@
<div class="top flex h-64px py-10px justify-between items-center">
<div class="flex items-center">
<p class="text-18px font-400 lh-26px color-#211F24 mr-4px title">数据总览</p>
<a-tooltip content="展示所筛选的账号的信息汇总">
<Tooltip title="展示所筛选的账号的信息汇总">
<icon-question-circle size="16" class="color-#737478" />
</a-tooltip>
</Tooltip>
</div>
</div>
<div class="overview-row flex">
@ -19,15 +19,15 @@
<div class="flex items-center mb-8px">
<img :src="item.icon" width="20" height="20" class="mr-8px" />
<p class="label color-#211F24">{{ item.label }}</p>
<a-tooltip v-if="item.tooltip" :content="item.tooltip">
<Tooltip v-if="item.tooltip" :title="item.tooltip">
<img :src="icon1" width="14" height="14" class="ml-4px" />
</a-tooltip>
</Tooltip>
</div>
<span class="value color-#211F24 ml-32px">{{ formatNumberShow(overviewData[item.prop]) }}</span>
</div>
</div>
</div>
<div class=" bg-#fff rounded-8px mb-16px">
<div class="bg-#fff rounded-8px mb-16px">
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
</div>
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
@ -40,16 +40,15 @@
@sorterChange="handleSorterChange"
/>
<div v-if="pageInfo.total > 0" class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.page_size"
:pageSize="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -60,6 +59,7 @@
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
import { Tooltip, Pagination } from 'ant-design-vue';
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
import { formatNumberShow } from '@/utils/tools';
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
@ -99,8 +99,9 @@ const getData = async () => {
}
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.page_size = pageSize;
getData();
};

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

@ -3,7 +3,7 @@
* @Date: 2025-06-28 12:58:25
-->
<template>
<div class="account-info-wrap bg-#fff rounded-8px px-24px mb-16px">
<div class="account-info-wrap bg-#fff rounded-8px px-24px mb-16px">
<div class="title-row">
<span class="cts !text-18px !lh-26px title">账号信息</span>
</div>
@ -47,9 +47,9 @@
<template v-else>
<div class="flex items-center mb-4px">
<p class="cts !color-#737478 !mr-4px">{{ field.title }}</p>
<a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
<Tooltip v-if="field.tooltip" :title="field.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</Tooltip>
</div>
<p class="cts">
<template v-if="field.type === 'status'">
@ -60,10 +60,10 @@
<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
<Tooltip
v-if="detailData.tags.length > 2"
position="top"
:content="
:title="
detailData.tags
.slice(2)
.map((v) => v.name)
@ -73,7 +73,7 @@
<div class="tag-box">
<span class="text">{{ `+${detailData.tags.length - 2}` }}</span>
</div>
</a-tooltip>
</Tooltip>
</div>
<span class="cts" v-else>-</span>
</template>
@ -88,7 +88,12 @@
}}
</template>
<template v-else-if="field.dataIndex === 'platform'">
<img :src="getMediaAccountPlatformLogo(detailData.platform)" width="16" height="16" class="rounded-4px" />
<img
:src="getMediaAccountPlatformLogo(detailData.platform)"
width="16"
height="16"
class="rounded-4px"
/>
</template>
<template v-else-if="['last_authorized_at', 'last_synced_at'].includes(field.dataIndex)">
{{ exactFormatTime(detailData[field.dataIndex], 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss') }}
@ -132,6 +137,7 @@
<script setup>
import { useRoute } from 'vue-router';
import { Tooltip } from 'ant-design-vue';
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
import { getMediaAccountPlatformLogo } from '@/utils/platform';
import { getAccountInfoFields } from '../../constants';

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

@ -18,7 +18,7 @@ export const TABLE_COLUMNS = [
{
title: '笔记标题',
dataIndex: 'title',
width: 240,
width: 280,
fixed: 'left',
},
{
@ -30,42 +30,42 @@ export const TABLE_COLUMNS = [
{
title: '曝光量',
dataIndex: 'exposure_number',
width: 180,
width: 160,
tooltip: '内容被展示给用户的总次数，不代表用户实际观看。',
align: 'right',
},
{
title: '观看量',
dataIndex: 'view_number',
width: 180,
width: 160,
tooltip: '用户点击内容并实际观看的次数，是内容实际触达的重要指标。',
align: 'right',
},
{
title: '点赞量',
dataIndex: 'like_number',
width: 180,
width: 160,
tooltip: '单篇笔记获得的点赞总数，反映用户喜好程度。',
align: 'right',
},
{
title: '收藏量',
dataIndex: 'collect_number',
width: 180,
width: 160,
tooltip: '用户将内容保存到收藏夹的次数，代表内容被认可为“值得保留”。',
align: 'right',
},
{
title: '评论数',
dataIndex: 'comment_number',
width: 180,
width: 160,
tooltip: '内容下方用户留言的总数，体现用户参与度与讨论热度。',
align: 'right',
},
{
title: '分享量',
dataIndex: 'share_number',
width: 180,
width: 160,
tooltip: '内容被转发或分享至其他平台或私信的次数，代表外扩传播意愿。',
align: 'right',
},

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

@ -3,121 +3,115 @@
* @Date: 2025-06-28 12:58:09
-->
<template>
<div class="note-table-wrap bg-#fff rounded-8px px-24px flex-1 flex flex-col">
<div class="note-table-wrap bg-#fff rounded-8px px-24px flex-1 flex flex-col">
<div class="title-row">
<div class="flex items-center">
<span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
<a-tooltip content="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
<Tooltip title="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
<icon-question-circle size="16" class="color-#737478" />
</a-tooltip>
</Tooltip>
</div>
</div>
<div class="filter-row flex my-16px">
<div class="filter-row-item flex items-center">
<span class="label">笔记标题</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.title" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
<Input v-model:value="query.title" class="!w-240px" placeholder="请搜索..." allowClear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</Input>
</div>
<div class="filter-row-item flex items-center">
<span class="label">发布日期</span>
<a-space size="medium" class="w-260px">
<a-range-picker
v-model="published_at"
size="medium"
allow-clear
format="YYYY-MM-DD"
class="w-100%"
@change="onDateChange"
/>
</a-space>
<DatePicker.RangePicker
v-model:value="published_at"
size="medium"
class="!w-260px"
allow-clear
format="YYYY-MM-DD"
@change="onDateChange"
/>
</div>
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px" size="medium" @click="handleReset">
</Button>
<Button class="w-84px" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
<a-table
:data="dataSource"
row-key="id"
<Table
:dataSource="dataSource"
rowKey="id"
:pagination="false"
:scroll="{ x: '100%' }"
class="w-100%"
bordered
column-resizable
:showSorterTooltip="false"
>
<template #empty>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'published_at'">
{{ exactFormatTime(record.published_at) }}
</template>
<template v-else-if="column.dataIndex === 'exposure_number'">
{{ formatNumberShow({ value: record.view_number * 10, showExactValue: true }) }}
</template>
<template v-else-if="column.dataIndex === 'title'">
<TextoverTips :context="record.title" />
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</Table.Column>
<template #emptyText>
<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 === '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>
</template>
</a-table-column>
</template>
</a-table>
</Table>
<div v-if="pageInfo.total > 0" class="pagination-row mb-24px">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.page_size"
:pageSize="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
</template>
<script setup>
import { Button, Input, Tooltip, Table, Pagination, DatePicker } from 'ant-design-vue';
import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { useRoute } from 'vue-router';
import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';
import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
import TextoverTips from '@/components/text-over-tips/index.vue';
const route = useRoute();
const id = route.params.id;
@ -148,8 +142,9 @@ const onDateChange = (value) => {
handleSearch();
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.page_size = pageSize;
getData();
};

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

@ -3,27 +3,27 @@
* @Date: 2025-06-26 17:44:16
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isBatch ? '批量删除账号' : '删除账号'"
width="400px"
modal-class="account-manage-modal"
@close="onClose"
wrapClassName="account-manage-modal"
@cancel="onClose"
centered
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 {{ accountName }} 这个账号吗？</span>
</div>
<template #footer>
<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
>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger @click="onDelete">确认删除</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Modal, Button, message } from 'ant-design-vue';
import { ref } from 'vue';
import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -56,7 +56,7 @@ async function onDelete() {
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
isBatch.value ? emits('batchUpdate') : emits('update');
onClose();
}

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

@ -3,7 +3,9 @@ import {
EnumErrorStatus,
getStatusInfo,
} from '@/views/property-marketing/media-account/components/status-select/status-box';
import { Dropdown, Doption, Button, Tooltip } from '@arco-design/web-vue';
import { Dropdown, Menu } from 'ant-design-vue';
const { Item: MenuItem } = Menu;
import { Tooltip, Button } from 'ant-design-vue';
export default defineComponent({
name: 'FooterBtn',
props: {
@ -21,37 +23,37 @@ export default defineComponent({
const renderEditDoption = () => {
return (
<Doption class="color-#211F24" onClick={() => emit('openEdit', props.item)}>
<MenuItem class="color-#211F24" onClick={() => emit('openEdit', props.item)}>
编辑
</Doption>
</MenuItem>
);
};
const renderReauthorizeDoption = (text = '重新授权') => {
return (
<Doption class="color-#211F24" onClick={() => emit('handleReauthorize', props.item)}>
<MenuItem class="color-#211F24" onClick={() => emit('handleReauthorize', props.item)}>
{text}
</Doption>
</MenuItem>
);
};
const renderPauseDoption = () => {
return (
<Doption class="color-#211F24" onClick={() => emit('handlePause', props.item)}>
<MenuItem class="color-#211F24" onClick={() => emit('handlePause', props.item)}>
暂停同步
</Doption>
</MenuItem>
);
};
const renderUpdateBtn = () => {
return (
<Button type="outline" size="mini" onClick={() => emit('syncData', props.item)}>
<Button type="primary" ghost size="small" onClick={() => emit('syncData', props.item)}>
更新数据
</Button>
);
};
const renderDeleteDoption = () => {
return (
<Doption class="color-#F64B31" onClick={() => emit('openDelete', props.item)}>
<MenuItem class="color-#F64B31" onClick={() => emit('openDelete', props.item)}>
删除
</Doption>
</MenuItem>
);
};
const renderNormal = () => {
@ -61,17 +63,17 @@ export default defineComponent({
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
<Button type="primary" ghost class="mr-8px" size="small">
更多
</Button>
),
content: () => (
<>
overlay: () => (
<Menu>
{renderEditDoption()}
{renderReauthorizeDoption()}
{renderPauseDoption()}
{renderDeleteDoption()}
</>
</Menu>
),
}}
></Dropdown>
@ -86,19 +88,19 @@ export default defineComponent({
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
<Button type="primary" ghost class="mr-8px" size="small">
更多
</Button>
),
content: () => (
<>
overlay: () => (
<Menu>
{renderEditDoption()}
{renderDeleteDoption()}
</>
</Menu>
),
}}
></Dropdown>
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
开启同步
</Button>
</>
@ -115,15 +117,15 @@ export default defineComponent({
return renderUpdateBtn();
} else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
return (
<Tooltip content={statusInfo.value.disabledBtnTooltip}>
<Button type="outline" size="mini" disabled>
<Tooltip title={statusInfo.value.disabledBtnTooltip}>
<Button type="primary" ghost size="small" disabled>
重新授权
</Button>
</Tooltip>
);
} else {
return (
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
{isUnauthorized ? '去授权' : '重新授权'}
</Button>
);
@ -135,17 +137,17 @@ export default defineComponent({
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
<Button type="primary" ghost class="mr-8px" size="small">
更多
</Button>
),
content: () => (
<>
overlay: () => (
<Menu>
{renderEditDoption()}
{isMissing && renderReauthorizeDoption()}
{renderPauseDoption()}
{renderDeleteDoption()}
</>
</Menu>
),
}}
></Dropdown>

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

@ -4,24 +4,21 @@
-->
<template>
<div class="card-container">
<a-spin
<Spin
v-for="(item, index) in dataSource"
:key="index"
:loading="isSyncing(item)"
:spinning="isSyncing(item)"
tip="更新数据中..."
class="card-item"
:class="{
checked: isSelected(item),
}"
:wrapperClassName="`card-item ${isSelected(item) ? 'checked' : ''}`"
>
<template #icon>
<icon-sync size="24" />
</template>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)" class="relative top--2px"></Checkbox>
<div class="ml-8px flex-1">
<a-tooltip content="点击查看账号详情">
<Tooltip title="点击查看账号详情">
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
</a-tooltip>
</Tooltip>
<div class="field-row">
<span class="label">状态</span>
<StatusBox :item="item" />
@ -74,10 +71,10 @@
<span class="label">所属项目</span>
<span v-if="!item.projects.length" class="cts">-</span>
<div v-else class="flex items-center">
<a-tooltip
<Tooltip
v-if="item.projects.length > 2"
position="bottom"
:content="
placement="bottom"
:title="
item.projects
.slice(2)
.map((v) => v.name)
@ -87,7 +84,7 @@
<div class="tag-box">
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
</div>
</a-tooltip>
</Tooltip>
<div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
<span class="text">{{ project.name }}</span>
@ -102,10 +99,10 @@
<span class="label">标签</span>
<span v-if="!item.tags.length" class="cts">-</span>
<div v-else class="flex items-center">
<a-tooltip
<Tooltip
v-if="item.tags.length > 2"
position="bottom"
:content="
placement="bottom"
:title="
item.tags
.slice(2)
.map((v) => v.name)
@ -115,7 +112,7 @@
<div class="tag-box">
<span class="text">{{ `+${item.tags.length - 2}` }}</span>
</div>
</a-tooltip>
</Tooltip>
<div v-for="(tag, index) in item.tags.slice(0, 2)" :key="index" class="tag-box">
<span class="text">{{ tag.name }}</span>
@ -139,13 +136,13 @@
<span class="name !mb-0">{{ getErrorStatusText(item) }}</span>
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-8px" size="mini" @click="handleCancel(item)">取消</a-button>
<a-button type="outline" size="mini" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
<Button type="primary" ghost class="mr-8px" size="small" @click="handleCancel(item)">取消</Button>
<Button type="primary" ghost size="small" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
getConfirmBtnText(item)
}}</a-button>
}}</Button>
</div>
</div>
</a-spin>
</Spin>
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
<ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@ -154,6 +151,7 @@
<script setup>
import { defineProps, ref, computed, inject } from 'vue';
import { Checkbox, Button, Tooltip, Spin } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';

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

@ -3,19 +3,27 @@
* @Date: 2025-06-27 14:41:20
-->
<template>
<a-modal v-model:visible="visible" title="暂停同步" width="400px" modal-class="account-manage-modal" @close="onClose">
<Modal
v-model:open="visible"
title="暂停同步"
centered
width="400px"
wrapClassName="account-manage-modal"
@cancel="onClose"
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</a-button>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Button, Modal, message } from 'ant-design-vue';
import { ref } from 'vue';
import { pausePatchAccount } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -44,7 +52,7 @@ const open = (record) => {
async function onConfirm() {
const { code } = await pausePatchAccount(accountId.value);
if (code === 200) {
AMessage.success('暂停成功');
message.success('暂停成功');
emits('success');
onClose();
}

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

@ -4,13 +4,17 @@
// grid-template-rows: repeat(2, 1fr); /* 2行 */
grid-template-columns: repeat(4, 1fr); /* 4列 */
gap: 20px;
:deep(.ant-spin-container) {
height: 100%;
width: 100%;
display: flex;
align-items: flex-start;
}
.card-item {
border-radius: 8px;
// border: 1px solid var(--BG-300, #e6e6e8);
background: var(--BG-white, #fff);
padding: 12px 16px 16px;
display: flex;
align-items: flex-start;
position: relative;
.name {
color: var(--Text-1, #211f24);

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

@ -5,20 +5,19 @@
<script lang="jsx">
import { ref, computed } from 'vue';
import {
Button,
Modal,
Form,
FormItem,
Input,
RadioGroup,
Radio,
Upload,
Button,
Switch,
Input,
message,
Tooltip,
Notification,
Message as AMessage,
Textarea,
} from '@arco-design/web-vue';
Upload,
Switch,
} from 'ant-design-vue';
const { TextArea } = Input;
import AuthorizedAccountModal from '../authorized-account-modal';
// import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
@ -97,15 +96,14 @@ export default {
mobile: [
{
required: true,
message: '请填写手机号',
trigger: ['blur', 'change'],
},
{
validator: (value, callback) => {
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请填写手机号');
}
if (!/^1[3-9]\d{9}$/.test(value)) {
callback('手机号格式不正确');
return Promise.reject('手机号格式不正确');
} else {
callback();
return Promise.resolve();
}
},
trigger: ['blur', 'change'],
@ -145,10 +143,9 @@ export default {
}
};
function handleUpload(option) {
const { fileItem } = option;
uploadStatus.value = UploadStatus.WAITING;
file.value = fileItem.file;
fileName.value = fileItem.name;
file.value = option.file;
fileName.value = option.file.name;
}
function removeFile() {
fileName.value = '';
@ -198,7 +195,7 @@ export default {
const handleBatchImport = async () => {
try {
if (!file.value) {
AMessage.warning('请上传要导入的文件');
message.warning('请上传要导入的文件');
return;
}
@ -244,7 +241,7 @@ export default {
const handleEditAccount = async () => {
const { code } = await putMediaAccounts({ id: id.value, ...form.value });
if (code === 200) {
AMessage.success('修改成功');
message.success('修改成功');
emit('update');
onClose();
}
@ -254,14 +251,12 @@ export default {
handleBatchImport();
return;
}
formRef.value.validate(async (errors) => {
if (!errors) {
if (isCustomCookie.value && !form.value.cookie) {
AMessage.warning('请填写Cookie值');
return;
}
isEdit.value ? handleEditAccount() : handleAddAccount();
formRef.value.validate().then(async () => {
if (isCustomCookie.value && !form.value.cookie) {
message.warning('请填写Cookie值');
return;
}
isEdit.value ? handleEditAccount() : handleAddAccount();
});
}
const startAuthorized = (id, platform) => {
@ -288,18 +283,27 @@ export default {
return () => (
<Modal
v-model:visible={visible.value}
v-model:open={visible.value}
title={isEdit.value ? '编辑账号' : '添加账号'}
modal-class="add-account-modal"
wrapClassName="add-account-modal"
width="500px"
mask-closable={false}
onClose={onClose}
centered
maskClosable={false}
onCancel={onClose}
footer={null}
>
<Form ref={formRef} model={form.value} rules={rules} layout="horizontal" auto-label-width>
<Form
ref={formRef}
model={form.value}
rules={rules}
layout="horizontal"
labelAlign="right"
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
>
{!isEdit.value && (
<FormItem label="上传方式" required>
<RadioGroup v-model={uploadType.value}>
<RadioGroup v-model:value={uploadType.value}>
<Radio value="manual">手动添加账号</Radio>
<Radio value="batch">批量导入账号</Radio>
</RadioGroup>
@ -312,19 +316,14 @@ export default {
<Upload
ref={uploadRef}
action="/"
draggable
custom-request={handleUpload}
customRequest={handleUpload}
accept=".xlsx,.xls"
show-file-list={false}
showUploadList={false}
>
{{
'upload-button': () => (
<div class="upload-box">
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
),
}}
<div class="upload-box">
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
</Upload>
) : (
<div class="flex items-center">
@ -356,22 +355,22 @@ export default {
<>
{isEdit.value && (
<>
<FormItem label="账号名称" field="name">
<Input v-model={form.value.name} placeholder="请输入..." size="large" disabled />
<FormItem label="账号名称" name="name">
<Input v-model:value={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 label="账号ID" name="account_id">
<Input v-model:value={form.value.account_id} placeholder="请输入..." size="large" disabled />
</FormItem>
<FormItem label="状态" field="status">
<FormItem label="状态" name="status">
<StatusBox item={form.value} />
</FormItem>
</>
)}
<FormItem label="手机号码" field="mobile" required>
<Input v-model={form.value.mobile} placeholder="请输入..." size="large" />
<FormItem label="手机号码" name="mobile" required>
<Input v-model:value={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 label="运营人员" name="operator_name" required>
<Input v-model:value={form.value.operator_name} placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="运营平台" required={!isEdit.value}>
{isEdit.value ? (
@ -398,7 +397,7 @@ export default {
height="24"
/>
) : (
<RadioGroup v-model={form.value.platform}>
<RadioGroup v-model:value={form.value.platform}>
<Radio value={1}>小红书</Radio>
<Radio value={0}>抖音</Radio>
<Radio value={2}>B站</Radio>
@ -409,8 +408,8 @@ export default {
</RadioGroup>
)}
</FormItem>
<FormItem label="号码持有人" field="holder_name">
<Input v-model={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
<FormItem label="号码持有人" name="holder_name">
<Input v-model:value={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="所属项目">
<CommonSelect
@ -448,10 +447,10 @@ export default {
}}
>
<Textarea
v-model={form.value.end_work_link}
v-model:value={form.value.end_work_link}
placeholder="请输入笔记链接。若无需输入，填写 “无” "
size="large"
auto-size={{ minRows: 3, maxRows: 5 }}
autoSize={{ minRows: 3, maxRows: 5 }}
/>
</FormItem>
<FormItem
@ -463,12 +462,12 @@ export default {
<Switch v-model={isCustomCookie.value} size="large" />
</FormItem>
{isCustomCookie.value && (
<FormItem label="" field="cookie">
<Textarea
v-model={form.value.cookie}
<FormItem label=" " name="cookie">
<TextArea
v-model:value={form.value.cookie}
placeholder="请输入..."
size="large"
auto-size={{ minRows: 5, maxRows: 8 }}
autoSize={{ minRows: 5, maxRows: 8 }}
/>
</FormItem>
)}

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

@ -4,7 +4,7 @@
.w-240px {
width: 240px !important;
}
.arco-modal-body {
.ant-modal-body {
.upload-block {
width: 100%;
.dt {
@ -36,15 +36,8 @@
}
}
}
.arco-upload-drag {
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.arco-icon {
margin-bottom: 16px;
}
.ant-upload {
width: 100%;
}
.upload-box {
display: flex;
@ -77,13 +70,13 @@
}
}
}
.upload-dragger {
border: 1px dashed #d9d9d9;
padding: 24px 0;
text-align: center;
background: #fafafa;
cursor: pointer;
}
// .upload-dragger {
// border: 1px dashed #d9d9d9;
// padding: 24px 0;
// text-align: center;
// background: #fafafa;
// cursor: pointer;
// }
.upload-error {
color: #f53f3f;
margin-left: 8px;

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

@ -3,24 +3,25 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="480px"
title="授权账号"
modal-class="authorized-account-modal"
:mask-closable="false"
:footer="modalState !== MODAL_STATE.LOADING"
@close="close"
centered
wrapClassName="authorized-account-modal"
:maskClosable="false"
:footer="modalState === MODAL_STATE.LOADING ? null : footer"
@cancel="close"
>
<div class="flex flex-col items-center">
<!-- 加载中状态 -->
<template v-if="modalState === MODAL_STATE.LOADING">
<a-progress
<Progress
:percent="progress"
color="#6D4CFE"
trackColor="#E6E6E8"
size="large"
:stroke-width="4"
strokeColor="#6D4CFE"
trailColor="#E6E6E8"
size="default"
:strokeWidth="4"
type="circle"
/>
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
@ -40,7 +41,7 @@
<!-- 二维码加载中或失败 -->
<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" />
<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"
@ -62,7 +63,7 @@
</div>
</template>
<!-- 正常二维码 -->
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<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" />
@ -76,24 +77,24 @@
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
<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">
</Button>
<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">
</Button>
<Button type="primary" size="large" @click="handleOk">
{{ confirmBtnText }}
</a-button>
</Button>
</template>
</a-modal>
</Modal>
<SyncDataModal ref="syncDataModalRef" />
</template>
<script setup>
import { defineExpose, ref, computed } from 'vue';
import { Message as AMessage } from '@arco-design/web-vue';
import { Button, Modal, message, Image, Progress } from 'ant-design-vue';
import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
import SyncDataModal from '../sync-data-modal';
@ -262,12 +263,12 @@ const getAuthorizedStatus = async () => {
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
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);
if (modalState.value === MODAL_STATE.LOADING && progress.value < 99) {
const step = Math.random() * 4 + 1;
progress.value = Math.min(progress.value + step, 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 if (modalState.value === MODAL_STATE.LOADING && progress.value >= 99) {
progress.value = 99; // 卡在99%
} else {
clearFakeProgressTimer();
clearStatusPollingTimer();
@ -305,7 +306,7 @@ const handleOk = () => {
// 二维码还在加载中
if (modalState.value === MODAL_STATE.QR_LOADING) {
AMessage.warning('二维码生成中，请稍等');
message.warning('二维码生成中，请稍等');
return;
}

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

@ -3,73 +3,87 @@
* @Date: 2025-06-27 09:35:49
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="批量分组"
modal-class="batch-group-modal"
wrapClassName="batch-group-modal"
width="800px"
:mask-closable="false"
:maskClosable="false"
centered
>
<div class="mb-16px t1">
{{ `已选${accountGroupList.length}个账号` }}
</div>
<a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
<a-form-item label="编辑方式" required>
<a-radio-group v-model="editType">
<a-radio value="all">
<Form ref="formRef" :model="form" layout="horizontal">
<FormItem label="编辑方式" required>
<Radio.Group v-model:value="editType">
<Radio value="all">
<div class="flex items-center">
<span>统一编辑</span>
<a-tooltip content="原分组将被清除，统一加入新分组。">
<Tooltip title="原分组将被清除，统一加入新分组。">
<img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
</a-tooltip>
</Tooltip>
</div>
</a-radio>
<a-radio value="each">分别编辑</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="选择分组" required>
</Radio>
<Radio value="each">分别编辑</Radio>
</Radio.Group>
</FormItem>
<FormItem label="选择分组" required>
<template v-if="editType === 'all'">
<div class="flex items-center w-100%">
<CommonSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
</div>
</template>
</a-form-item>
</FormItem>
<!-- 分别编辑 -->
<template v-if="editType === 'each'">
<a-table :data="accountGroupList" :pagination="false" row-key="id" class="w-100%" column-resizable>
<template #columns>
<a-table-column title="账号名称" data-index="name" width="200">
<template #cell="{ record }">
<span>{{ record.name || '-' }}</span>
</template>
</a-table-column>
<a-table-column title="选择分组" data-index="group_id">
<template #cell="{ record }">
<div class="flex items-center w-100%">
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
</div>
</template>
</a-table-column>
<Table
:dataSource="accountGroupList"
:columns="columns"
:pagination="false"
rowKey="id"
bordered
:showSorterTooltip="false"
@resizeColumn="handleResizeColumn"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'name'">
<span>{{ record.name || '-' }}</span>
</template>
<template v-else-if="column.dataIndex === 'group_id'">
<div class="flex items-center w-100%">
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" class="w-full" />
</div>
</template>
</template>
</a-table>
</Table>
</template>
</a-form>
</Form>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" @click="onSubmit">确定</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ref, reactive, computed } from 'vue';
import { Modal, Form, FormItem, Radio, Tooltip, Button, Table, message } from 'ant-design-vue';
import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
import CommonSelect from '@/components/common-select';
import icon1 from '@/assets/img/icon-question.png';
// [{id, name, group_id: null}]
const columns = ref([
{ title: '账号名称', dataIndex: 'name', width: 100, minWidth: 100, resizable: true },
{ title: '选择分组', dataIndex: 'group_id' },
]);
const handleResizeColumn = (w, col) => {
const idx = columns.value.findIndex((c) => c.dataIndex === col.dataIndex);
if (idx !== -1) columns.value[idx].width = w;
};
const emits = defineEmits(['update']);
const visible = ref(false);
@ -102,18 +116,17 @@ const getTags = async () => {
const onClose = () => {
visible.value = false;
form.group_id = null;
};
const onSubmit = async () => {
if (isAllEdit.value) {
if (form.group_id === null) {
AMessage.error('请选择分组');
message.error('请选择分组');
return;
}
} else {
if (accountGroupList.value.some((item) => item.group_id === null)) {
AMessage.error('请选择分组');
message.error('请选择分组');
return;
}
}
@ -126,7 +139,7 @@ const onSubmit = async () => {
// 这里处理批量标签的提交逻辑
const { code } = await batchPutGroup({ media_accounts });
if (code === 200) {
AMessage.success('设置分组成功');
message.success('设置分组成功');
emits('update');
visible.value = false;
}

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

@ -2,7 +2,7 @@
.batch-group-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
// min-height: 200px;
.t1 {
color: var(--Text-3, #737478);

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

@ -3,87 +3,85 @@
* @Date: 2025-06-27 09:35:49
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="批量标签"
modal-class="batch-tag-modal"
wrapClassName="batch-tag-modal"
width="800px"
:mask-closable="false"
centered
:maskClosable="false"
>
<div class="mb-16px t1">
{{ `已选${accountTagList.length}个账号` }}
</div>
<a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
<a-form-item label="编辑方式" required>
<a-radio-group v-model="editType">
<a-radio value="all">
<Form ref="formRef" :model="form" layout="horizontal" auto-label-width>
<FormItem label="编辑方式" required>
<RadioGroup v-model:value="editType">
<Radio value="all">
<div class="flex items-center">
<span>统一编辑</span>
<a-tooltip content="原标签将被清除，统一为新标签。">
<Tooltip title="原标签将被清除，统一为新标签。">
<img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
</a-tooltip>
</Tooltip>
</div>
</a-radio>
<a-radio value="each">分别编辑</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="选择标签" required>
</Radio>
<Radio value="each">分别编辑</Radio>
</RadioGroup>
</FormItem>
<FormItem label="选择标签" required>
<template v-if="editType === 'all'">
<div class="flex items-center w-100%">
<a-select
v-model="form.tags"
<Select
v-model:value="form.tags"
:options="tagOptions"
multiple
allow-create
mode="tags"
placeholder="请输入标签，回车键可直接添加..."
:limit="5"
:max-tag-count="5"
class="flex-1"
@create="handleCreateTag"
@search="handleCreateTag"
/>
<span class="ml-12px">{{ `${form.tags.length}/5` }}</span>
</div>
</template>
</a-form-item>
</FormItem>
<!-- 分别编辑 -->
<template v-if="editType === 'each'">
<a-table :data="accountTagList" :pagination="false" row-key="id" class="w-100%" column-resizable>
<template #columns>
<a-table-column title="账号名称" data-index="name" width="200">
<template #cell="{ record }">
<span>{{ record.name || '-' }}</span>
</template>
</a-table-column>
<a-table-column title="选择标签" data-index="tags">
<template #cell="{ record, rowIndex }">
<div class="flex items-center w-100%">
<a-select
v-model="record.tags"
:options="tagOptions"
multiple
allow-create
placeholder="请输入标签，回车键可直接添加..."
:limit="5"
style="width: 90%"
@create="(val) => handleCreateTag(val, rowIndex)"
/>
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
</div>
</template>
</a-table-column>
</template>
</a-table>
<Table :dataSource="accountTagList" :pagination="false" rowKey="id" class="w-100%">
<Table.Column title="账号名称" dataIndex="name" :width="200">
<template #customRender="{ record }">
<span>{{ record.name || '-' }}</span>
</template>
</Table.Column>
<Table.Column title="选择标签" dataIndex="tags">
<template #customRender="{ record, index }">
<div class="flex items-center w-100%">
<Select
v-model:value="record.tags"
:options="tagOptions"
mode="tags"
placeholder="请输入标签，回车键可直接添加..."
:max-tag-count="5"
class="!w-full"
@search="(val) => handleCreateTag(val, index)"
/>
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
</div>
</template>
</Table.Column>
</Table>
</template>
</a-form>
</Form>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" size="large" @click="onSubmit">确定</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Button, Form, FormItem, Modal, Radio, RadioGroup, Select, Table, Tooltip, message } from 'ant-design-vue';
import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/icon-question.png';
@ -143,12 +141,12 @@ const onClose = () => {
const onSubmit = async () => {
if (isAllEdit.value) {
if (form.tags.length === 0) {
AMessage.error('请输入标签');
message.error('请输入标签');
return;
}
} else {
if (accountTagList.value.some((item) => item.tags.length === 0)) {
AMessage.error('请输入标签');
message.error('请输入标签');
return;
}
}
@ -160,7 +158,7 @@ const onSubmit = async () => {
console.log({ media_accounts });
const { code } = await batchPutTag({ media_accounts });
if (code === 200) {
AMessage.success('设置标签成功');
message.success('设置标签成功');
emits('update');
visible.value = false;
}

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

@ -2,7 +2,7 @@
.batch-tag-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
// min-height: 200px;
.t1 {
color: var(--Text-3, #737478);

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

@ -8,86 +8,73 @@
<div class="filter-row flex">
<div class="filter-row-item">
<span class="label">账号名称/ID/手机号</span>
<a-space size="medium">
<a-input
v-model="query.search"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
<Input v-model:value="query.search" class="w-240px" placeholder="请搜索..." allowClear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</Input>
</div>
<div class="filter-row-item">
<span class="label">状态</span>
<a-space class="w-180px">
<StatusSelect v-model="query.status" @change="handleSearch" />
</a-space>
<StatusSelect v-model="query.status" @change="handleSearch" class="w-180px" />
</div>
<div class="filter-row-item">
<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 MEDIA_ACCOUNT_PLATFORMS"
:key="index"
:value="item.value"
:label="item.label"
>{{ item.label }}</a-option
>
</a-select>
</a-space>
<Select
v-model:value="query.platform"
class="w-160px"
size="middle"
placeholder="全部"
allowClear
@change="handleSearch"
>
<Option
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
:key="index"
:value="item.value"
:label="item.label"
>{{ item.label }}</Option
>
</Select>
</div>
<div class="filter-row-item">
<span class="label">运营人员</span>
<a-space class="w-160px">
<CommonSelect
v-model="query.operator_id"
allowSearch
:multiple="false"
:options="operators"
@change="handleSearch"
/>
</a-space>
<CommonSelect
class="w-160px"
v-model="query.operator_id"
allowSearch
:multiple="false"
:options="operators"
@change="handleSearch"
/>
</div>
</div>
<div class="filter-row">
<div class="filter-row-item">
<span class="label">分组</span>
<a-space class="w-200px">
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" class="!w-200px" />
</div>
<div class="filter-row-item">
<span class="label">所属项目</span>
<a-space class="w-200px">
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
</a-space>
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" class="!w-200px" />
</div>
<div class="filter-row-item">
<span class="label">标签</span>
<a-space class="w-320px">
<CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
</a-space>
<CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" class="!w-320px" />
</div>
<div class="filter-row-item">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px" size="medium" @click="handleReset">
</Button>
<Button class="w-84px" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -95,6 +82,8 @@
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { Button, Input, Select } from 'ant-design-vue';
const { Option } = Select;
import {
fetchAccountTags,
getProjectList,
@ -114,7 +103,7 @@ const props = defineProps({
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
const tags = ref([]);
const groups = ref([]);

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

@ -3,27 +3,29 @@
* @Date: 2025-06-26 11:44:17
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isEdit ? '编辑分组' : '添加新分组'"
modal-class="account-manage-modal"
wrapClassName="group-manage-modal"
width="400px"
@close="onClose"
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
</a-form>
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
<Input v-model:value="form.name" placeholder="请输入…" />
</FormItem>
</Form>
<template #footer>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue';
import { Button, Modal, Form, FormItem, Input, message } from 'ant-design-vue';
import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
@ -61,16 +63,14 @@ const open = (record = {}) => {
};
async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = isEdit.value ? putGroup : postAccountGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
formRef.value.validate().then(async () => {
const _fn = isEdit.value ? putGroup : postAccountGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
message.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
});
}

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

@ -3,22 +3,28 @@
* @Date: 2025-06-26 11:45:05
-->
<template>
<a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
<Modal
v-model:open="visible"
title="删除分组"
centered
width="400px"
wrapClassName="account-manage-modal"
@cancel="onClose"
>
<div class="flex items-center mb-24px">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 "{{ groupName }}" 这个分组吗？</span>
</div>
<template #footer>
<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
>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, Modal, message } from 'ant-design-vue';
import { deleteGroup } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -46,7 +52,7 @@ const open = (record) => {
async function onDelete() {
const { code } = await deleteGroup(groupId.value);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
emits('success');
onClose();
}

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

@ -3,84 +3,103 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="900px"
modal-class="account-manage-modal"
:footer="false"
wrapClassName="account-manage-modal"
:footer="null"
centered
title="分组管理"
:mask-closable="false"
@close="close"
:maskClosable="false"
@cancel="close"
>
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="reload">
<Space size="medium" class="w-240px">
<Input v-model:value="query.name" placeholder="请搜索..." size="middle" allowClear @change="reload">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</Input>
</Space>
</div>
<a-button type="primary" size="medium" @click="openAdd"
<Button type="primary" size="middle" @click="openAdd"
><template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>添加新分组</template>
</a-button>
</Button>
</div>
<a-table
column-resizable
:columns="columns"
:data="list"
row-key="id"
<Table
:dataSource="list"
rowKey="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
:showSorterTooltip="false"
@change="
(pagination, filters, sorter) => {
if (sorter && sorter.columnKey) {
handleSorterChange(sorter.columnKey, sorter.order);
}
}
"
>
<template #empty>
<Table.Column title="分组名称" dataIndex="name" />
<Table.Column title="创建人" dataIndex="creator">
<template #customRender="{ record }">
{{ record.creator?.name || '-' }}
</template>
</Table.Column>
<Table.Column title="创建日期" dataIndex="created_at" :width="160" key="created_at" :sorter="true">
<template #customRender="{ record }">
{{ exactFormatTime(record.created_at) }}
</template>
</Table.Column>
<Table.Column title="操作" :align="'center'" :width="120">
<template #customRender="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
</div>
</template>
</Table.Column>
<template #emptyText>
<NoData>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
<Button type="primary" class="mb-16px" size="middle" @click="openAdd"
><template #icon>
<icon-plus size="16"/>
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>去添加</template>
</a-button>
</Button>
</NoData>
</template>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
</div>
</template>
</a-table>
</Table>
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:pageSize="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
<AddGroup ref="addGroupRef" @success="update" />
<DeleteGroup ref="deleteGroupRef" @success="update" />
</a-modal>
</Modal>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button, Input, Modal, Space, Table, Pagination } from 'ant-design-vue';
import { getAccountGroup } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
@ -115,25 +134,6 @@ const loading = ref(false);
const query = ref(cloneDeep(INITIAL_QUERY));
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const columns = [
{ title: '分组名称', dataIndex: 'name' },
{
title: '创建人',
dataIndex: 'creator',
render: ({ record }) => record.creator?.name || '-',
},
{
title: '创建日期',
dataIndex: 'created_at',
width: 160,
render: ({ record }) => exactFormatTime(record.created_at),
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{ title: '操作', slotName: 'action', align: 'center', width: 120 },
];
function open() {
visible.value = true;
getData();
@ -188,8 +188,9 @@ const reload = () => {
getData();
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.pageSize = pageSize;
getData();
};
const onPageSizeChange = (pageSize) => {

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

@ -2,9 +2,9 @@
.account-manage-modal {
border-radius: 8px;
.arco-modal-body {
.arco-btn {
.arco-btn-icon {
.ant-modal-body {
.ant-btn {
.ant-btn-icon {
line-height: 16px;
}
}

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

@ -3,13 +3,14 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="480px"
title="导入提示"
modal-class="import-prompt-modal"
:mask-closable="false"
@close="close"
wrapClassName="import-prompt-modal"
:maskClosable="false"
centered
@cancel="close"
>
<div class="flex flex-col items-center">
<div class="flex items-center">
@ -21,13 +22,14 @@
</div>
</div>
<template #footer>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
<Button size="large" @click="close">取消</Button>
<Button type="primary" size="large" @click="handleOk"> 去授权 </Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Button, Modal } from 'ant-design-vue';
import { defineExpose } from 'vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

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

@ -1,7 +1,7 @@
@import "@/views/property-marketing/component.scss";
.import-prompt-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: $font-family-regular;

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

@ -3,24 +3,25 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="500px"
centered
title="重新授权"
modal-class="reauthorize-account-modal"
:mask-closable="false"
:footer="modalState !== MODAL_STATE.LOADING"
@close="close"
wrapClassName="reauthorize-account-modal"
:maskClosable="false"
:footer="modalState === MODAL_STATE.LOADING ? null : footer"
@cancel="close"
>
<div class="flex flex-col items-center">
<!-- 加载中状态 -->
<template v-if="modalState === MODAL_STATE.LOADING">
<a-progress
<Progress
:percent="progress"
color="#6D4CFE"
trackColor="#E6E6E8"
size="large"
:stroke-width="4"
strokeColor="#6D4CFE"
trailColor="#E6E6E8"
size="default"
:strokeWidth="4"
type="circle"
/>
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
@ -54,7 +55,7 @@
<!-- 二维码加载中或失败 -->
<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" />
<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"
@ -77,7 +78,7 @@
</template>
<!-- 正常二维码 -->
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<Image v-else :src="qrCodeUrl" :width="160" :height="160" />
<!-- 二维码失效遮罩 -->
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
@ -92,28 +93,26 @@
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<a-button
<Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode"> 重新生成 </Button>
<Button
v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
size="large"
@click="close"
>
取消
</a-button>
<a-button type="primary" size="large" @click="handleOk">
</Button>
<Button type="primary" size="large" @click="handleOk">
{{ confirmBtnText }}
</a-button>
</Button>
</template>
</a-modal>
</Modal>
<SyncDataModal ref="syncDataModalRef" />
</template>
<script setup>
import { defineExpose, ref, computed } from 'vue';
import { Message as AMessage } from '@arco-design/web-vue';
import { Button, Modal, message, Image, Progress } from 'ant-design-vue';
import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
import SyncDataModal from '../sync-data-modal';
@ -282,12 +281,12 @@ const getAuthorizedStatus = async () => {
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
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);
if (modalState.value === MODAL_STATE.LOADING && progress.value < 99) {
const step = Math.random() * 4 + 1;
progress.value = Math.min(progress.value + step, 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 if (modalState.value === MODAL_STATE.LOADING && progress.value >= 99) {
progress.value = 99; // 卡在99%
} else {
clearFakeProgressTimer();
clearStatusPollingTimer();
@ -319,14 +318,14 @@ const handleRefreshQrCode = () => {
const handleOk = () => {
// 二维码已过期
if (modalState.value === MODAL_STATE.QR_EXPIRED) {
AMessage.error('二维码已失效，请重新扫码');
message.error('二维码已失效，请重新扫码');
handleRefreshQrCode();
return;
}
// 二维码还在加载中
if (modalState.value === MODAL_STATE.QR_LOADING) {
AMessage.warning('二维码生成中，请稍等');
message.warning('二维码生成中，请稍等');
return;
}

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

@ -3,13 +3,14 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="480px"
title="更新数据"
modal-class="sync-data-modal"
:mask-closable="false"
@close="close"
centered
wrapClassName="sync-data-modal"
:maskClosable="false"
@cancel="close"
>
<div class="flex flex-col items-center">
<div class="flex items-center">
@ -20,14 +21,15 @@
</div>
</div>
<template #footer>
<a-button size="large" @click="close">稍后再说</a-button>
<a-button type="primary" size="large" @click="handleOk"> 更新数据 </a-button>
<Button size="large" @click="close">稍后再说</Button>
<Button type="primary" size="large" @click="handleOk"> 更新数据 </Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { defineExpose } from 'vue';
import { Button, Modal } from 'ant-design-vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

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

@ -1,7 +1,7 @@
@import "@/views/property-marketing/component.scss";
.sync-data-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: $font-family-regular;

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

@ -1,25 +1,27 @@
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isEdit ? '编辑标签' : '添加新标签'"
modal-class="tags-manage-modal"
wrapClassName="tags-manage-modal"
width="400px"
@close="onClose"
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
</a-form>
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<FormItem :label="isEdit ? '标签名称' : '新标签名称'" name="name" required>
<Input v-model:value="form.name" placeholder="请输入…" />
</FormItem>
</Form>
<template #footer>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import { Button, Modal, Form, FormItem, Input, message } from 'ant-design-vue';
import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
@ -57,18 +59,17 @@ const open = (record = {}) => {
};
async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
formRef.value.validate()
.then(async () => {
const _fn = isEdit.value ? putTag : postAccountTags;
const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
message.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
}
});
})
}
defineExpose({ open });

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

@ -3,22 +3,28 @@
* @Date: 2025-06-26 17:23:52
-->
<template>
<a-modal v-model:visible="visible" title="删除标签" width="400px" modal-class="account-manage-modal" @close="onClose">
<Modal
v-model:open="visible"
title="删除标签"
centered
width="400px"
wrapClassName="account-manage-modal"
@cancel="onClose"
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 "{{ tagName }}" 这个标签吗？</span>
</div>
<template #footer>
<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
>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, message } from 'ant-design-vue';
import { deleteTag } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -46,7 +52,7 @@ const open = (record) => {
async function onDelete() {
const { code } = await deleteTag(tagId.value);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
emits('success');
onClose();
}

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

@ -3,65 +3,71 @@
* @Date: 2025-06-25 17:58:28
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="800px"
modal-class="tags-manage-modal"
:footer="false"
wrapClassName="tags-manage-modal"
:footer="null"
centered
title="标签管理"
:mask-closable="false"
@close="close"
:maskClosable="false"
@cancel="close"
>
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
<Input
v-model:value="query.name"
placeholder="请搜索..."
class="w-240px"
size="medium"
allowClear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</Input>
</div>
<a-button type="primary" size="medium" @click="openAdd">
<Button type="primary" @click="openAdd">
<template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>添加新标签</template>
</a-button>
</Button>
</div>
<div class="h-300px">
<div v-if="showDataSource.length" class="tag-list">
<a-tooltip v-for="tag in showDataSource" :key="tag.id" content="双击修改标签名">
<Tooltip v-for="tag in showDataSource" :key="tag.id" title="双击修改标签名">
<div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
<span>{{ tag.name }}</span>
<img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
</div>
</a-tooltip>
</Tooltip>
</div>
<template v-else>
<NoData>
<span class="s1 mb-16px">暂无标签</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
<Button type="primary" class="mb-16px" @click="openAdd">
<template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>去添加</template>
</a-button>
</Button>
</NoData>
</template>
</div>
<AddTag ref="addTagRef" @success="update" />
<DeleteTag ref="deleteTagRef" @success="update" />
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, Modal, Input, Tooltip } from 'ant-design-vue';
import { getTagsList } from '@/api/all/propertyMarketing';
import AddTag from './add-tag.vue';
import DeleteTag from './delete-tag.vue';

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

@ -3,14 +3,14 @@
.tags-manage-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
// padding: 24px 24px 44px !important;
overflow: hidden;
display: flex;
flex-direction: column;
.arco-btn {
.arcanto-btn {
width: fit-content;
.arco-btn-icon {
.ant-btn-icon {
line-height: 16px;
}
}

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

@ -4,9 +4,9 @@
*/
export const INITIAL_QUERY = {
search: '',
status: '',
platform: '',
operator_id: '',
status: undefined,
platform: undefined,
operator_id: undefined,
group_ids: [],
tag_ids: [],
project_ids: [],

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

@ -4,28 +4,28 @@
-->
<template>
<div class="account-manage-wrap">
<div class="filter-wrap bg-#fff rounded-8px ">
<div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
<div class="flex items-center">
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenTagsModal">
<Button class="w-112px mr-12px" type="primary" ghost size="middle" @click="handleOpenTagsModal">
<template #icon>
<img :src="icon3" width="16" height="16" />
<img :src="icon3" width="16" height="16" class="mr-8px" />
</template>
<template #default>标签管理</template>
</a-button>
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenGroupModal">
标签管理
</Button>
<Button class="w-112px mr-12px" type="outline" size="middle" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
<img :src="icon2" width="16" height="16" class="mr-8px" />
</template>
<template #default>分组管理</template>
</a-button>
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
分组管理
</Button>
<Button type="primary" class="w-112px" size="middle" @click="handleOpenAccountModal">
<template #icon>
<icon-plus size="16"/>
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>添加账号</template>
</a-button>
</Button>
</div>
</div>
<FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
@ -33,17 +33,17 @@
<div
v-if="dataSource.length > 0"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
class="tip-row flex justify-between items-center px-16px py-10px w-100% my-12px h-48px"
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
>
<div class="flex items-center">
<div class="flex items-center">
<template v-if="selectedItems.length > 0">
<a-checkbox
:model-value="checkedAll"
<Checkbox
:checked="checkedAll"
:indeterminate="indeterminate"
class="mr-8px"
@change="handleChangeAll"
@change="(e) => handleChangeAll(e.target.checked)"
/>
<span class="label mr-24px">
已选
@ -69,11 +69,11 @@
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
<Space v-if="isAbNormalStatus" class="flex items-center">
<Button type="primary" danger size="small" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
</a-space>
</Button>
</Space>
</div>
</div>
<div class="card-wrap">
@ -92,17 +92,16 @@
<NoData v-else />
<div v-if="pageInfo.total > 0" class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:page-size-options="[8, 16, 20, 32, 64]"
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:pageSize="pageInfo.pageSize"
:pageSizeOptions="['8', '16', '20', '32', '64']"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -119,7 +118,7 @@
<script setup>
import { ref, provide } from 'vue';
import { Notification } from '@arco-design/web-vue';
import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
@ -240,8 +239,10 @@ const handleReset = () => {
reload();
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.pageSize = pageSize;
getData();
};
const onPageSizeChange = (pageSize) => {
@ -355,7 +356,7 @@ const getSyncTaskStatus = async (id, notificationId) => {
if (code === 200) {
if (data?.status !== 0) {
clearQueryTaskTimer();
notificationId && Notification.remove(notificationId);
notificationId && notification.close(notificationId);
showImportResultNotification(data);
getData();
}

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

@ -3,15 +3,15 @@
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedStatus"
:multiple="multiple"
size="medium"
<Select
v-model:value="selectedStatus"
:mode="multiple ? 'multiple' : undefined"
size="middle"
:placeholder="placeholder"
allow-clear
allowClear
@change="handleChange"
>
<a-option
<Option
v-for="(item, index) in STATUS_LIST"
:key="index"
:value="item.value"
@ -19,11 +19,13 @@
:style="item.style"
>
{{ item.text }}
</a-option>
</a-select>
</Option>
</Select>
</template>
<script setup>
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';

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

@ -1,5 +1,5 @@
import { defineComponent, computed } from 'vue';
import { Tooltip } from '@arco-design/web-vue';
import { Tooltip } from 'ant-design-vue';
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
@ -111,7 +111,7 @@ export default defineComponent({
const { background, color, label } = statusInfo.value;
if (status === EnumStatus.NORMAL) {
return (
<div class="flex items-center status-box">
<div class="flex items-center status-box w-fit">
{to_be_expire_for_cookie === EnumExpireForCookie.EXPIRE && (
<div class="flex items-center rounded-2px px-8px mr-8px" style={{ background, color }}>
<img src={icon1} width="12" height="12" class="mr-4px" />
@ -129,12 +129,12 @@ export default defineComponent({
}
return (
<div class="flex items-center rounded-2px px-8px status-box" style={{ background, color }}>
<div class="flex items-center rounded-2px px-8px status-box w-fit" style={{ background, color }}>
<span class="text-14px lh-22px font-400 label">{label}</span>
{status === EnumStatus.PAUSE ? (
<img src={iconWarn1} width="12" height="12" class="ml-4px" />
) : (
<Tooltip content={statusInfo.value.tooltip}>
<Tooltip title={statusInfo.value.tooltip}>
<img src={iconWarn2} width="12" height="12" class="ml-4px" />
</Tooltip>
)}

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

@ -1,35 +1,37 @@
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="添加项目"
modal-class="add-project-modal"
wrapClassName="add-project-modal"
width="960px"
:mask-closable="false"
@close="onClose"
centered
:maskClosable="false"
@cancel="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>
<Steps changeable :current="currentStep" @change="setCurrent" class="mb-24px px-79px w-full">
<Steps.Step v-for="(step, index) in STEPS" :key="index" :title="step.label" />
</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>
<Button type="primary" ghost size="middle" @click="onPrev" v-if="!isFirstStep">上一步</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>
<Button size="middle" class="mr-8px" @click="onCancel">取消</Button>
<Button type="primary" size="middle" @click="onSubmit">{{ isLastStep ? '确认添加' : '下一步' }}</Button>
</div>
</div>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { postAddProject, putProject, getProjectDetail } from '@/api/all/propertyMarketing';
import { Button, Modal, Steps } from 'ant-design-vue';
import StepOne from './stepOne.vue';
import StepTwo from './stepTwo.vue';
@ -39,22 +41,22 @@ import StepFour from './stepFour.vue';
const STEPS = [
{
label: '项目信息',
index: 1,
index: 0,
comp: StepOne,
},
{
label: '关联平台账号',
index: 2,
index: 1,
comp: StepTwo,
},
{
label: '关联渠道账户',
index: 3,
index: 2,
comp: StepThree,
},
{
label: '关联内容稿件',
index: 4,
index: 3,
comp: StepFour,
},
];
@ -71,14 +73,14 @@ const INITIAL_QUERY = {
const update = inject('update');
const visible = ref(false);
const currentStep = ref(1);
const currentStep = ref(0);
const formQuery = ref(cloneDeep(INITIAL_QUERY));
const compRef = ref(null);
const projectId = ref(null);
const isFirstStep = computed(() => currentStep.value === 1);
const isFirstStep = computed(() => currentStep.value === 0);
const isEdit = computed(() => projectId.value);
const isLastStep = computed(() => currentStep.value === STEPS.length);
const isLastStep = computed(() => currentStep.value === STEPS.length - 1);
const activeComp = computed(() => STEPS.find((v) => v.index === currentStep.value)?.comp ?? null);
const open = (id = null) => {
@ -98,7 +100,7 @@ const getDetail = (id) => {
});
};
const onClose = () => {
currentStep.value = 1;
currentStep.value = 0;
formQuery.value = cloneDeep(INITIAL_QUERY);
projectId.value = '';
compRef.value?.reset?.();
@ -140,12 +142,12 @@ const handleEdit = () => {
});
};
const setCurrent = async (current) => {
const setCurrent = (current) => {
if (isFirstStep.value) {
const valid = await compRef.value.validate();
if (!valid) {
return;
}
compRef.value?.validate().then(() => {
currentStep.value = current;
});
return;
}
currentStep.value = current;
};

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

@ -2,106 +2,102 @@
<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"
<Input
v-model:value="query.uid"
class="w-160px mr-16px"
placeholder="搜索序号"
size="medium"
allow-clear
allowClear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
<a-input
v-model="query.title"
</Input>
<Input
v-model:value="query.title"
class="w-220px mr-16px"
placeholder="搜索内容稿件标题"
size="medium"
allow-clear
allowClear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</Input>
<a-select
v-model="query.uploader_id"
size="medium"
<Select
v-model:value="query.uploader_id"
size="middle"
placeholder="选择上传人员"
class="w-160px"
allow-clear
allowClear
@change="handleSearch"
>
<a-option v-for="(item, index) in uploaders" :key="index" :value="item.id" :label="item.name">
<Option v-for="(item, index) in uploaders" :key="index" :value="item.id" :label="item.name">
{{ item.name || '-' }}
</a-option>
</a-select>
</Option>
</Select>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
selectedRowKeys,
onSelect: handleSelect,
onSelectAll: handleSelectAll,
}"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
>
<template #empty>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'created_at'">
{{ exactFormatTime(record.created_at) }}
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</Table.Column>
<template #emptyText>
<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>
</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>
<Button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</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>
<Tooltip :title="item.title">
<p class="name mr-4px">{{ item.title || '-' }}</p>
</Tooltip>
<icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
</div>
</template>
@ -113,6 +109,8 @@
<script setup>
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { Button, Input, Select, Table, Tooltip } from 'ant-design-vue';
const { Option } = Select;
import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
import { getUserList } from '@/api/all/common';
@ -149,16 +147,15 @@ const props = defineProps({
},
});
const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } = useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const query = ref({
uid: '',
uploader_id: '',
uploader_id: undefined,
title: '',
});
const uploaders = ref([]);
@ -175,7 +172,7 @@ const handleSearch = () => {
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;
const operatorIdMatch = uploader_id === undefined ? true : item.uploader?.id === uploader_id;
return uinMatch && titleMatch && operatorIdMatch;
});
};
@ -183,12 +180,10 @@ const handleSearch = () => {
const getUsers = async () => {
const { code, data } = await getUserList();
if (code === 200) {
uploaders.value = data.map( v => ({
uploaders.value = data.map((v) => ({
...v,
name: v.name || v.mobile
name: v.name || v.mobile,
}));
console.log(uploaders.value);
}
};
const getTableData = async () => {

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

@ -1,33 +1,46 @@
<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"
<Form
ref="formRef"
:model="formQuery"
:rules="rules"
layout="horizontal"
class="h-448px"
labelAlign="right"
:labelCol="{ span: 2 }"
:wrapperCol="{ span: 21 }"
>
<FormItem label="项目名称" required name="name">
<Input v-model:value="formQuery.name" placeholder="请输入项目名称" size="large" class="!w-400px" />
</FormItem>
<FormItem label="项目预算" name="budget">
<Input v-model:value="formQuery.budget" placeholder="请输入项目预算" size="large" class="!w-400px" />
</FormItem>
<FormItem label="项目目标" name="target">
<TextArea
v-model:value="formQuery.target"
placeholder="请输入项目目标"
:max-length="500"
show-word-limit
class="h-154px"
class="!h-154px"
:maxlength="500"
showCount
/>
</a-form-item>
<a-form-item label="项目背景" field="background">
<a-textarea
v-model="formQuery.background"
</FormItem>
<FormItem label="项目背景" name="background">
<TextArea
v-model:value="formQuery.background"
class="!h-154px"
placeholder="请输入项目背景"
:max-length="500"
show-word-limit
class="h-154px"
:maxlength="500"
showCount
/>
</a-form-item>
</a-form>
</FormItem>
</Form>
</template>
<script setup>
import { Form, FormItem, Input } from 'ant-design-vue';
const { TextArea } = Input;
import { ref } from 'vue';
const props = defineProps({
formQuery: {
type: Object,
@ -42,8 +55,7 @@ const rules = {
};
const validate = async () => {
const errors = await formRef.value.validate();
return !errors
return formRef.value.validate();
};
const reset = () => {

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

@ -2,109 +2,102 @@
<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"
<Input
v-model:value="query.name"
class="w-220px mr-16px"
placeholder="搜索账户"
size="medium"
allow-clear
allowClear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
<a-select
v-model="query.platform"
</Input>
<Select
v-model:value="query.platform"
class="mr-16px w-160px"
size="medium"
size="middle"
placeholder="选择平台"
allow-clear
allowClear
@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"
<Option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
item.label
}}</Option>
</Select>
<Select
v-model:value="query.operator_id"
size="middle"
placeholder="选择运营人员"
class="w-160px"
allow-clear
allowClear
@change="handleSearch"
>
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
<Option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</Option>
</Select>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
selectedRowKeys,
onSelect: handleSelect,
onSelectAll: handleSelectAll,
}"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="(pagination, filters, sorter) => {}"
>
<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>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</template>
<template #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 #customRender="{ record }">
<template v-if="column.dataIndex === 'platform'">
<img :src="getPutAccountPlatformLogo(record.platform)" width="19" height="19" />
</template>
</a-table-column>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</Table.Column>
<template #emptyText>
<NoData text="暂无账户" />
</template>
</a-table>
</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>
<Button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</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">
<Tooltip :title="item.name">
<p class="name mr-4px">{{ item.name || '-' }}</p>
</a-tooltip>
</Tooltip>
<icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
</div>
</template>
@ -117,6 +110,8 @@
<script setup>
import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools';
import { Button, Input, Select, Table, Tooltip } from 'ant-design-vue';
const { Option } = Select;
import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
@ -146,17 +141,16 @@ const props = defineProps({
},
});
const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } = useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const query = ref({
name: '',
operator_id: '',
platform: '',
operator_id: undefined,
platform: undefined,
});
const operators = ref([]);
const allData = ref([]);
@ -171,8 +165,8 @@ 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;
const platformMatch = platform === undefined ? true : item.platform === platform;
const operatorIdMatch = operator_id === undefined ? true : item.operator_id === operator_id;
return nameMatch && platformMatch && operatorIdMatch;
});
};

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

@ -2,102 +2,97 @@
<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"
<Input
v-model:value="query.name"
class="w-220px mr-16px"
placeholder="搜索账号"
size="medium"
allow-clear
allowClear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
<a-select
v-model="query.platform"
</Input>
<Select
v-model:value="query.platform"
class="mr-16px w-160px"
size="medium"
size="middle"
placeholder="选择平台"
allow-clear
allowClear
@change="handleSearch"
>
<a-option
<Option
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
:key="index"
:value="item.value"
:label="item.label"
>{{ item.label }}</a-option
>{{ item.label }}</Option
>
</a-select>
<a-select
v-model="query.operator_id"
size="medium"
</Select>
<Select
v-model:value="query.operator_id"
size="middle"
placeholder="选择运营人员"
class="w-160px"
allow-clear
allowClear
@change="handleSearch"
>
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
<Option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</Option>
</Select>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
selectedRowKeys,
onSelect: handleSelect,
onSelectAll: handleSelectAll,
}"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
>
<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>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'platform'">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="19" height="19" />
</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 v-else>
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</Table.Column>
<template #emptyText>
<NoData text="暂无账号" />
</template>
</a-table>
</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>
<Button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</Button>
</div>
<div class="flex-1 overflow-y-auto">
<div class="flex flex-wrap" v-if="selectedRows?.length">
@ -115,6 +110,8 @@
<script setup>
import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools';
import { Button, Input, Select, Tooltip, Table } from 'ant-design-vue';
const { Option } = Select;
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
@ -144,17 +141,16 @@ const props = defineProps({
},
});
const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } = useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const query = ref({
name: '',
operator_id: '',
platform: '',
operator_id: undefined,
platform: undefined,
});
const operators = ref([]);
const allData = ref([]);
@ -169,8 +165,8 @@ 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;
const platformMatch = platform === undefined ? true : item.platform === platform;
const operatorIdMatch = operator_id === undefined ? true : item.operator_id === operator_id;
return nameMatch && platformMatch && operatorIdMatch;
});
};

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

@ -8,34 +8,34 @@
<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"
<Space size="medium">
<Input
v-model:value="query.name"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
allowClear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</Input>
</Space>
</div>
<div class="filter-row-item flex items-center">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px"/>
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px"/>
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -43,6 +43,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { Button, Input, Space } from 'ant-design-vue';
const props = defineProps({
query: {
@ -51,7 +52,7 @@ const props = defineProps({
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
const handleSearch = () => {
emits('update:query', props.query);

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

@ -41,7 +41,7 @@ export const TABLE_COLUMNS = [
{
title: '操作',
dataIndex: 'operation',
width: 100,
width: 120,
fixed: 'right',
},
];

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

@ -3,28 +3,30 @@
* @Date: 2025-06-26 17:44:16
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="删除项目"
width="480px"
modal-class="project-manage-modal"
@close="onClose"
centered
wrapClassName="project-manage-modal"
@cancel="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
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete"
>确认删除</Button
>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, Modal, message } from 'ant-design-vue';
import { deleteProject } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -53,7 +55,7 @@ const open = (record) => {
async function onDelete() {
const { code } = await deleteProject(projectId.value);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
update()
onClose();
}

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

@ -1,60 +1,59 @@
<template>
<a-table
<Table
ref="tableRef"
:data="dataSource"
row-key="id"
column-resizable
:dataSource="dataSource"
rowKey="id"
:pagination="false"
:scroll="{ x: '100%' }"
class="flex-1 project-table w-100%"
bordered
@sorter-change="handleSorterChange"
:showSorterTooltip="false"
@change="handleTableChange"
>
<template #empty>
<template #emptyText>
<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>
<Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sorter="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</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-if="column.dataIndex === 'create_at'" #customRender="{ record }">
{{ exactFormatTime(record.create_at) }}
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
<Button type="primary" ghost size="small" @click="onEdit(record)">编辑</Button>
</div>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
<template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</Column>
</Table>
</template>
<script setup>
import { ref } from 'vue';
import { Button, Tooltip, Table } from 'ant-design-vue';
const { Column } = Table;
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
@ -71,9 +70,11 @@ const props = defineProps({
const tableRef = ref(null);
// 处理排序变化
const handleSorterChange = (column, order) => {
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
// 处理表格变化
const handleTableChange = (pagination, filters, sorter) => {
if (sorter && sorter.field) {
emits('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
}
};
const onDelete = (item) => {
emits('delete', item);

23
src/views/property-marketing/project-manage/project-list/index.vue
View File

@ -4,12 +4,12 @@
<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">
<Button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAddProjectModal">
<template #icon>
<icon-plus size="16" />
</template>
<template #default>添加项目</template>
</a-button>
</Button>
</div>
</div>
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
@ -22,16 +22,15 @@
@edit="handleEdit"
/>
<div v-if="pageInfo.total > 0" class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.page_size"
:pageSize="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -43,6 +42,7 @@
<script setup>
import { INITIAL_QUERY } from './constants';
import { Button, Pagination } from 'ant-design-vue';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
import { getProjects } from '@/api/all/propertyMarketing';
@ -51,13 +51,10 @@ import ProjectTable from './components/project-table';
import AddProjectModal from './components/add-project-modal';
import DeleteProjectModal from './components/project-table/delete-project-modal.vue';
const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } = useTableSelectionWithPagination({
const { dataSource, pageInfo, onPageChange, resetPageInfo } = useTableSelectionWithPagination({
onPageChange: () => {
getData();
},
onPageSizeChange: () => {
getData();
},
});
const addProjectModalRef = ref(null);

13
src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
View File

@ -1,21 +1,20 @@
<template>
<a-card :bordered="false" class="chart-container" ref="chartContainer">
<Card :bordered="false" class="chart-container !p-0" ref="chartContainer">
<template #title>
<span class="a-card-title">{{ title.name }}</span>
<a-popover position="tl">
<Tooltip position="tl" :title="title.popover">
<icon-question-circle />
<template #content>
<p style="margin: 0">{{ title.popover }}</p>
</template>
</a-popover>
</Tooltip>
</template>
<NoData v-if="isChartEmpty" text="暂无数据" />
<div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
</a-card>
</Card>
</template>
<script setup>
import { Tooltip, Card } from "ant-design-vue"
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

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

@ -1,80 +1,73 @@
<template>
<div class="account-dashboard-wrap">
<div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
<a-tabs v-model:activeKey="accountType" @tab-click="handleTabClick">
<a-tab-pane key="1" title="账户"></a-tab-pane>
<a-tab-pane key="2" title="计划"></a-tab-pane>
</a-tabs>
<div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
<Tabs v-model:activeKey="accountType" @change="handleTabClick" size="large">
<TabPane key="1" tab="账户"></TabPane>
<TabPane key="2" tab="计划"></TabPane>
</Tabs>
<div class="container px-24px">
<div class="container pt-24px px-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center" v-if="accountType == 2">
<span class="label">计划名称</span>
<a-space size="medium" class="w-240px">
<PlanSelect v-model="query.ids"></PlanSelect>
</a-space>
<PlanSelect v-model="query.ids" class="w-240px"></PlanSelect>
</div>
<div class="filter-row-item flex items-center">
<span class="label">账号名称</span>
<a-space size="medium" class="w-240px">
<AccountSelect v-model="query.placement_account_id"></AccountSelect>
</a-space>
<AccountSelect v-model:value="query.placement_account_id" class="w-240px"></AccountSelect>
</div>
<div class="filter-row-item flex items-center">
<span class="label">平台</span>
<a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear>
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
<Select v-model:value="query.platform" class="w-150" size="middle" placeholder="全部" allowClear>
<Option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
>{{ item.label }}
</a-option>
</a-select>
</Option>
</Select>
</div>
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" />
</a-space>
<CommonSelect v-model="query.operator_id" class="!w-160px" :multiple="false" :options="operators" />
</div>
</div>
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-100%" />
</a-space>
<DatePicker.RangePicker v-model="data_time" allowClear format="YYYY-MM-DD" class="!w-240px" @change="onDateChange" />
</div>
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
<div class="table-wrap rounded-8px py-5px flex-1 flex flex-col" v-if="onLoading == false">
<a-row :gutter="[24, 24]">
<a-col v-for="(chart, key) in chartConfigs" :key="chart.dataKey" :span="12">
<Row :gutter="[24, 24]">
<Col v-for="(chart, key) in chartConfigs" :key="chart.dataKey" :span="12">
<div>
<EchartsItem
:chartData="{ date: chart.date, series_data: chart.series_data }"
:title="{ name: chart.title.name, popover: chart.title.popover }"
/>
</div>
</a-col>
</a-row>
</Col>
</Row>
</div>
</div>
</template>
<script setup lang="ts">
import EchartsItem from './components/echarts-item/index';
import { PLATFORM_LIST } from '@/utils/platform';
import { Button, Select, Tabs, Row, Col, DatePicker } from 'ant-design-vue';
import {
getPlacementAccountsTrend,
getPlacementAccountProjectsTrend,
@ -84,7 +77,11 @@ import CommonSelect from '@/components/common-select';
import AccountSelect from '@/views/components/common/AccountSelect.vue';
import PlanSelect from '@/views/components/common/PlanSelect.vue';
const accountType = ref(1);
const { TabPane } = Tabs;
const { Option } = Select;
const accountType = ref("1");
const data_time = ref([]);
const operators = ref([]);
const onLoading = ref(true);
@ -95,8 +92,8 @@ const getOperators = async () => {
}
};
const query = reactive({
platform: '',
operator_id: '',
platform: undefined,
operator_id: undefined,
data_time: [],
ids: [],
placement_account_id: [],
@ -113,6 +110,19 @@ const handleTabClick = (value) => {
accountType.value = value;
handleSearch();
};
const onDateChange = (date) => {
if (!date) {
query.data_time = [];
handleSearch();
return;
}
const [start, end] = date;
const FORMAT_DATE = 'YYYY-MM-DD';
query.data_time = [dayjs(start).startOf('day').format(FORMAT_DATE), dayjs(end).endOf('day').format(FORMAT_DATE)];
handleSearch();
};
const mergeChartData = (apiResponse) => {
console.log(apiResponse, 'apiResponse');
chartConfigs.value = chartConfigs.value.map((config) => {
@ -226,14 +236,15 @@ const chartConfigs = ref([
},
]);
const handleReset = async () => {
query.platform = '';
query.operator_id = '';
data_time.value = [];
query.platform = undefined;
query.operator_id = undefined;
query.data_time = [];
query.ids = [];
query.placement_account_id = [];
handleSearch();
};
const operators = ref([]);
onMounted(() => {
handleSearch();
getOperators();

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

@ -19,13 +19,6 @@
border-radius: 8px;
// border: 1px solid #e6e6e8;
:deep(.arco-tabs) {
.arco-tabs-tab {
height: 56px;
padding: 0 8px;
}
}
.top {
.title {
font-family: $font-family-medium;

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

@ -5,135 +5,132 @@
<template>
<div class="action-row mb-12px flex justify-between">
<div>
<a-checkbox
<Checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:checked="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
@change="(e) => handleSelectAll(e.target.checked)"
>全选</Checkbox
>
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<Button type="primary" ghost class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download class="mr-8px" /> </template>
<template #default>导出数据</template>
</a-button>
<a-button type="outline" size="medium" @click="openCustomColumn">
</Button>
<Button type="primary" ghost size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
<img :src="icon1" width="14" height="14" class="mr-8px" />
</template>
<template #default>自定义列</template>
</a-button>
</Button>
</div>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
row-key="id"
column-resizable
:row-selection="{
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
selectedRowKeys: selectedItems,
onChange: handleSelect,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
class="account-table w-100%"
bordered
@sorter-change="handleSorterChange"
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="
(pagination, filters, sorter) => {
if (sorter && sorter.columnKey) {
handleSorterChange(sorter.columnKey, sorter.order === 'ascend' ? 'asc' : 'desc');
}
}
"
>
<template #empty>
<Table.Column
v-for="column in tableColumns"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sorter="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</template>
<template v-if="column.dataIndex === 'platform'" #customRender="{ record }">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'status'" #customRender="{ record }">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{ STATUS_LIST.find((item) => item.value === record.status)?.label }}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #customRender="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `ROI: ${record.roi}% CVR: ${record.conversion_rate}%` }}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<Button type="primary" ghost size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #customRender="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="column.dataIndex === 'newest_work_title'" #customRender="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFe">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_project_published_at) }}
</p>
</template>
<template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</Table.Column>
<template #emptyText>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in tableColumns"
: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">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<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 === 'platform'" #cell="{ record }">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `ROI: ${record.roi}% CVR: ${record.conversion_rate}%` }}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="column.dataIndex === 'newest_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFe">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_project_published_at) }}
</p>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
</Table>
<CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
</template>
<script setup>
import { Button, Checkbox, Table, Tooltip } from 'ant-design-vue';
import { ref, computed } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField, exactFormatTime } from '@/utils/tools';

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

@ -4,75 +4,84 @@
* @Date: 2025-06-25 14:02:40
-->
<template>
<div class="container px-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<div class="common-filter-wrap">
<div class="filter-row flex">
<div class="filter-row-item">
<span class="label">{{ isAccountTab ? '账户名称' : '计划名称' }}</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
<Input
v-model:value="query.name"
class="w-240px"
placeholder="请搜索..."
size="middle"
allowClear
@change="handleSearch"
>
<template #prefix>
<SearchOutlined />
</template>
</Input>
</div>
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
<div v-if="!isAccountTab" class="filter-row-item">
<span class="label">计划分组</span>
<a-space class="w-200px">
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>
<CommonSelect class="w-200px" v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</div>
<div class="filter-row-item flex items-center">
<div class="filter-row-item">
<span class="label">状态</span>
<a-space class="w-180px">
<StatusSelect v-model="query.status" @change="handleSearch" />
</a-space>
<StatusSelect class="w-180px" v-model="query.status" @change="handleSearch" />
</div>
<div class="filter-row-item flex items-center">
<div class="filter-row-item">
<span class="label">运营人员</span>
<a-space class="w-160px">
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
</a-space>
<CommonSelect
class="w-160px"
v-model="query.operator_id"
:multiple="false"
:options="operators"
@change="handleSearch"
/>
</div>
</div>
<div class="filter-row flex">
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
<div v-if="!isAccountTab" class="filter-row-item">
<span class="label">关联账户</span>
<a-space class="w-240px">
<AccountSelect v-model="query.placement_account_id" :options="placementAccounts" @change="handleSearch" />
</a-space>
<CommonSelect
class="w-240px"
v-model:value="query.placement_account_id"
:options="placementAccounts"
@change="handleSearch"
/>
</div>
<div class="filter-row-item flex items-center">
<div class="filter-row-item">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<a-range-picker
v-model="query.data_time"
size="medium"
:allow-clear="false"
format="YYYY-MM-DD"
class="w-100%"
@change="handleSearch"
/>
</a-space>
<DatePicker.RangePicker
v-model:value="data_time"
:allowClear="false"
format="YYYY-MM-DD"
class="w-240px"
@change="onDateChange"
/>
</div>
<div class="filter-row-item">
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</Button>
</div>
<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>
</template>
<script setup>
import dayjs from 'dayjs';
import { reactive, defineEmits, defineProps } from 'vue';
import { Button, Input, DatePicker } from 'ant-design-vue';
import {
getPlacementAccountProjectGroupsList,
getPlacementAccountsList,
@ -94,13 +103,22 @@ const props = defineProps({
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
// // 同步父组件传入的初始值
// watch(
// () => props.query.data_time,
// (newVal) => {
// if (newVal && newVal.length > 0) {
// data_time.value = newVal;
// }
// },
// { immediate: true }
// );
// const tags = ref([]);
const groups = ref([]);
const operators = ref([]);
const placementAccounts = ref([]);
// const dataTime = ref([]);
const data_time = ref([]);
const handleSearch = () => {
emits('update:query', props.query);
@ -109,7 +127,30 @@ const handleSearch = () => {
});
};
const onDateChange = (date) => {
// query.data_time = date;
if (!date) {
props.query.data_time = [];
handleSearch();
return;
}
const [start, end] = date;
const FORMAT_DATE = 'YYYY-MM-DD';
props.query.data_time = [
dayjs(start).startOf('day').format(FORMAT_DATE),
dayjs(end).endOf('day').format(FORMAT_DATE),
];
handleSearch();
};
const init = () => {
data_time.value = [dayjs().subtract(1, 'day'), dayjs().subtract(1, 'day')];
};
const handleReset = () => {
init();
emits('onReset');
};
@ -134,6 +175,8 @@ const getAccounts = async () => {
};
onMounted(() => {
init();
getGroups();
getOperators();
getAccounts();

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

@ -3,27 +3,29 @@
* @Date: 2025-06-26 11:44:17
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isEdit ? '编辑分组' : '添加新分组'"
modal-class="account-manage-modal"
wrapClassName="account-manage-modal"
width="400px"
@close="onClose"
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
</a-form>
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal">
<FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
<Input v-model:value="form.name" placeholder="请输入…" />
</FormItem>
</Form>
<template #footer>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue';
import { Button, Modal, Form, FormItem, Input, message } from 'ant-design-vue';
import { postPlacementAccountProjectGroups, putPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
@ -61,16 +63,14 @@ const open = (record = {}) => {
};
async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = isEdit.value ? putPlacementAccountProjectGroups : postPlacementAccountProjectGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
formRef.value.validate().then(async () => {
const _fn = isEdit.value ? putPlacementAccountProjectGroups : postPlacementAccountProjectGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
message.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
});
}

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

@ -3,22 +3,21 @@
* @Date: 2025-06-26 11:45:05
-->
<template>
<a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
<Modal v-model:open="visible" centered title="删除分组" width="400px" wrapClassName="account-manage-modal" @cancel="onClose">
<div class="flex items-center mb-24px">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 "{{ groupName }}" 这个分组吗？</span>
</div>
<template #footer>
<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
>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px danger-btn" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, Modal, message } from 'ant-design-vue';
import { deletePlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -46,7 +45,7 @@ const open = (record) => {
async function onDelete() {
const { code } = await deletePlacementAccountProjectGroups(groupId.value);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
emits('success');
onClose();
}

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

@ -3,85 +3,102 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="900px"
modal-class="put-account-group-manage-modal"
:footer="false"
wrapClassName="put-account-group-manage-modal"
:footer="null"
title="分组管理"
:mask-closable="false"
@close="close"
centered
:maskClosable="false"
@cancel="close"
>
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<Space size="medium" class="w-240px">
<Input v-model:value="query.name" placeholder="请搜索..." size="middle" allowClear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</Input>
</Space>
</div>
<a-button type="primary" size="medium" @click="openAdd"
<Button type="primary" size="medium" @click="openAdd"
><template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>添加新分组</template>
</a-button>
</Button>
</div>
<a-table
column-resizable
:columns="columns"
:data="list"
row-key="id"
<Table
:dataSource="list"
rowKey="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
:showSorterTooltip="false"
@change="handleTableChange"
>
<template #empty>
<Column
v-for="column in columns"
:key="column.dataIndex"
:title="column.title"
:dataIndex="column.dataIndex"
:width="column.width"
:align="column.align"
:sortable="column.sortable"
>
<template v-if="column.slotName === 'action'" #customRender="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
</div>
</template>
<template v-else-if="column.dataIndex === 'creator'" #customRender="{ record }">
{{ record.creator?.name || '-' }}
</template>
<template v-else-if="column.dataIndex === 'created_at'" #customRender="{ record }">
{{ exactFormatTime(record.created_at) }}
</template>
</Column>
<template #emptyText>
<NoData>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
<Button type="primary" class="mb-16px" size="medium" @click="openAdd"
><template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>去添加</template>
</a-button>
</Button>
</NoData>
</template>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
</div>
</template>
</a-table>
</Table>
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:pageSize="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
<AddGroup ref="addGroupRef" @success="update" />
<DeleteGroup ref="deleteGroupRef" @success="update" />
</a-modal>
</Modal>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button, Modal, Pagination, Input, Space, Table } from 'ant-design-vue';
import { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
const { Column } = Table;
import AddGroup from './add-group.vue';
import DeleteGroup from './delete-group.vue';
@ -157,9 +174,9 @@ function openDelete(record) {
deleteGroupRef.value.open(record);
}
const handleSorterChange = (column, order) => {
query.value.sort_column = column;
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
const handleTableChange = (pagination, filters, sorter) => {
query.value.sort_column = sorter.field;
query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
getData();
};
async function getData() {
@ -190,8 +207,10 @@ const handleSearch = () => {
reload();
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.pageSize = pageSize;
getData();
};
const onPageSizeChange = (pageSize) => {

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

@ -2,9 +2,9 @@
.account-manage-modal {
border-radius: 8px;
.arco-modal-body {
.arco-btn {
.arco-btn-icon {
.ant-modal-body {
.ant-btn {
.ant-btn-icon {
line-height: 16px;
}
}

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

@ -3,22 +3,24 @@
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedGroups"
:multiple="multiple"
size="medium"
<Select
v-model:value="selectedGroups"
:mode="multiple ? 'multiple' : undefined"
size="middle"
:placeholder="placeholder"
allow-clear
:max-tag-count="3"
allowClear
:maxTagCount="3"
@change="handleChange"
>
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
<Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</Option>
</Select>
</template>
<script setup>
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue';
const props = defineProps({

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

@ -5,86 +5,77 @@
<template>
<div class="action-row mb-12px flex justify-between">
<div>
<a-checkbox
<Checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:checked="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
@change="(e) => handleSelectAll(e.target.checked)"
>全选</Checkbox
>
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<Button type="primary" ghost class="mr-12px" @click="handleExport">
<template #icon> <icon-download class="mr-8px" /> </template>
<template #default>导出数据</template>
</a-button>
<a-button type="outline" size="medium" @click="openCustomColumn">
</Button>
<Button type="primary" ghost @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
<img :src="icon1" width="14" height="14" class="mr-8px" />
</template>
<template #default>自定义列</template>
</a-button>
</Button>
</div>
</div>
<a-table
<Table
ref="tableRef"
column-resizable
:data="dataSource"
row-key="id"
:row-selection="{
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
selectedRowKeys: selectedItems,
onChange: handleSelect,
onSelectAll: handleSelectAll,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
class="plan-table w-100%"
bordered
@sorter-change="handleSorterChange"
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="handleTableChange"
>
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in tableColumns"
: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">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<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 === 'platform'" #cell="{ record }">
<Table.Column
v-for="column in tableColumns"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'platform'">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<template v-else-if="column.dataIndex === 'status'">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<template v-else-if="column.dataIndex === 'ai_evaluate'">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
@ -105,40 +96,40 @@
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
<template v-else-if="column.dataIndex === 'operation'">
<Button type="primary" ghost size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
<template v-else-if="column.isRateField">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<!-- <template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
<p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
</template> -->
<template v-else #cell="{ record }">
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</Table.Column>
<template #emptyText>
<NoData />
</template>
</a-table>
</Table>
<CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
</template>
<script setup>
import { ref, computed } from 'vue';
import { Checkbox, Button, Table } from 'ant-design-vue';
import { ref, computed, onMounted } from 'vue';
import { cloneDeep, union } from 'lodash-es';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import { useRouter } from 'vue-router';
import CustomTableColumnModal from '@/components/custom-table-column-modal';
import { getCustomColumns } from '@/api/all/common';
const { Column } = Table;
import icon1 from '@/assets/img/media-account/icon-custom.png';
import icon2 from '@/assets/img/media-account/icon-warn.png';
@ -171,22 +162,11 @@ const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
);
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = props.dataSource.map((item) => item.id);
} else {
selectedItems.value = [];
// 处理表格变化（排序、分页等）
const handleTableChange = (pagination, filters, sorter) => {
if (sorter && sorter.field) {
emit('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
}
emit('selectionChange', checked ? selectedItems.value : []);
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}`);
};
// 处理排序变化
const handleSorterChange = (column, order) => {
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
};
const handleSelect = (selectedRowKeys, selectedRows) => {
@ -194,6 +174,19 @@ const handleSelect = (selectedRowKeys, selectedRows) => {
emit('selectionChange', selectedRows);
};
const handleSelectAll = (selected, selectedRows, changeRows) => {
if (selected) {
selectedItems.value = props.dataSource.map((item) => item.id);
} else {
selectedItems.value = [];
}
emit('selectionChange', selected ? selectedRows : []);
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}`);
};
const handleExport = () => {
emit('export');
};

6
src/views/property-marketing/put-account/account-data/constants.ts
View File

@ -5,9 +5,9 @@
export const INITIAL_QUERY = {
name: '',
status: '',
operator_id: '',
placement_account_id: '',
status: undefined,
operator_id: undefined,
placement_account_id: undefined,
group_ids: [],
data_time: [],
column: '',

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

@ -4,19 +4,19 @@
-->
<template>
<div class="account-data-wrap">
<div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
<a-tabs v-model="activeTab" @tab-click="handleTabClick">
<a-tab-pane key="1" title="账户"></a-tab-pane>
<a-tab-pane key="2" title="计划"></a-tab-pane>
<template v-if="!isAccountTab" #extra>
<a-button type="outline" class="mr-12px flex items-center" size="medium" @click="handleOpenGroupModal">
<div class="filter-wrap bg-#fff rounded-8px mb-16px">
<Tabs v-model:activeKey="activeTab" @change="handleTabClick" size="large">
<TabPane key="1" tab="账户"></TabPane>
<TabPane key="2" tab="计划"> </TabPane>
<template v-if="!isAccountTab" #rightExtra>
<Button type="primary" ghost class="mr-12px flex items-center" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
<img :src="icon2" width="16" height="16" class="mr-8px" />
</template>
<template #default>分组管理</template>
</a-button>
</Button>
</template>
</a-tabs>
</Tabs>
<FilterBlock
ref="filterBlockRef"
v-model:query="query"
@ -35,16 +35,15 @@
@selectionChange="handleSelectionChange"
/>
<div v-if="pageInfo.total > 0" class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.page_size"
:pageSize="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -54,6 +53,8 @@
</template>
<script setup>
import { Button, Tabs, Pagination } from 'ant-design-vue';
const { TabPane } = Tabs;
import FilterBlock from './components/filter-block';
import BoardTable from './components/board-table';
import PlanTable from './components/plan-table';
@ -111,8 +112,9 @@ const getData = async () => {
}
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.page_size = pageSize;
getData();
};

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

@ -4,12 +4,6 @@
.filter-wrap {
border-radius: 8px;
// border: 1px solid #e6e6e8;
:deep(.arco-tabs) {
.arco-tabs-tab {
height: 56px;
padding: 0 8px;
}
}
:deep(.arco-btn) {
.arco-btn-icon {
line-height: 14px;

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

@ -3,28 +3,29 @@
* @Date: 2025-06-26 17:44:16
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isBatch ? '批量删除账户' : '删除账户'"
width="480px"
modal-class="account-manage-modal"
@close="onClose"
centered
wrapClassName="account-manage-modal"
@cancel="onClose"
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 {{ accountName }} 这个账户吗？</span>
</div>
<template #footer>
<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
>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
// 添加Modal导入
import { ref } from 'vue';
import { Button, message, Modal } from 'ant-design-vue';
import { deletePlacementAccount, batchDeletePlacementAccounts } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -56,7 +57,7 @@ async function onDelete() {
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
emits('update', isBatch.value ? accountId.value : [accountId.value]);
onClose();
}

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

@ -12,7 +12,7 @@
checked: isSelected(item),
}"
>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></Checkbox>
<div class="ml-8px flex-1">
<p class="name">{{ item.name || '-' }}</p>
<div class="field-row">
@ -45,10 +45,10 @@
<span class="label">所属项目</span>
<span v-if="!item.projects.length" class="cts">-</span>
<div v-else class="flex items-center">
<a-tooltip
<Tooltip
v-if="item.projects.length > 2"
position="bottom"
:content="
placement="bottom"
:title="
item.projects
.slice(2)
.map((v) => v.name)
@ -58,7 +58,7 @@
<div class="tag-box">
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
</div>
</a-tooltip>
</Tooltip>
<div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
<span class="text">{{ project.name }}</span>
@ -75,22 +75,23 @@
</div>
<div class="operate-row">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
<a-button
<Button
v-if="showPauseButton(item.status)"
type="outline"
type="primary"
ghost
class="mr-8px"
size="mini"
size="small"
@click="handlePause(item)"
>
<template #default>暂停同步</template>
</a-button>
<a-button type="outline" class="mr-8px" size="mini" @click="handleReauthorize(item)">
</Button>
<Button type="primary" ghost class="mr-8px" size="small" @click="handleReauthorize(item)">
<template #default>获取凭证</template>
</a-button>
</Button>
<a-button type="outline" size="mini" @click="openEdit(item)">
<Button type="primary" ghost size="small" @click="openEdit(item)">
<template #default>编辑</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -100,6 +101,7 @@
</template>
<script setup>
import { Checkbox, Button, Tooltip } from 'ant-design-vue';
import { defineProps, ref, computed } from 'vue';
import { PLATFORM_LIST } from '@/utils/platform';
import { EnumPutAccountStatus } from '@/views/property-marketing/put-account/components/status-select/constants';

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

@ -3,20 +3,28 @@
* @Date: 2025-06-27 14:41:20
-->
<template>
<a-modal v-model:visible="visible" title="暂停同步" width="480px" modal-class="account-manage-modal" @close="onClose">
<Modal
v-model:open="visible"
title="暂停同步"
width="480px"
wrapClassName="account-manage-modal"
@cancel="onClose"
centered
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</a-button>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, message } from 'ant-design-vue';
import { pausePatchPlacementAccount } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -44,7 +52,7 @@ const open = (record) => {
async function onConfirm() {
const { code } = await pausePatchPlacementAccount(accountId.value);
if (code === 200) {
AMessage.success('暂停成功');
message.success('暂停成功');
update();
onClose();
}

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

@ -3,45 +3,51 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isEdit ? '编辑账户' : '添加账户'"
modal-class="add-put-account-modal"
wrapClassName="add-put-account-modal"
width="500px"
:mask-closable="false"
:maskClosable="false"
unmount-on-close
@close="onClose"
centered
@cancel="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>
<Form
ref="formRef"
:model="form"
:rules="formRules"
layout="horizontal"
labelAlign="right"
:labelCol="{ span: 6 }"
:wrapperCol="{ span: 18 }"
>
<FormItem v-if="!isEdit" label="上传方式" required>
<RadioGroup v-model:value="uploadType">
<Radio value="manual">手动添加账户</Radio>
<Radio value="batch">批量导入账户</Radio>
</RadioGroup>
</FormItem>
<!-- 批量导入账户模式下的内容 -->
<template v-if="isBatchImport">
<a-form-item label="账户文件" required>
<FormItem label="账户文件" required>
<!-- 默认状态 -->
<div class="upload-block">
<template v-if="uploadStatus === UploadStatus.DEFAULT">
<a-upload
<Upload
ref="uploadRef"
action="/"
draggable
:custom-request="handleUpload"
:customRequest="handleUpload"
accept=".xlsx,.xls,.docx,.doc"
:show-file-list="false"
:showUploadList="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>
<div class="upload-box">
<icon-plus size="14" class="mb-16px" />
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
</Upload>
</template>
<template v-else>
<div class="flex items-center">
@ -71,81 +77,94 @@
<span class="dt">下载账户导入模板.xlsx</span>
</div>
</div>
</a-form-item>
</FormItem>
</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">
<FormItem label="账户名称" name="name">
<Input v-model:value="form.name" placeholder="请输入..." disabled size="large" />
</FormItem>
<FormItem label="账户ID" name="account_id">
<Input v-model:value="form.account_id" placeholder="请输入..." size="large" disabled />
</FormItem>
<FormItem label="状态" name="status">
<StatusBox :status="form.status" />
</a-form-item>
</FormItem>
</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="号码持有人" field="holder_name" required>
<a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
</a-form-item>
<a-form-item label="运营平台" :required="!isEdit">
<FormItem label="手机号" name="mobile">
<Input v-model:value="form.mobile" placeholder="请输入..." size="large" />
</FormItem>
<FormItem label="运营人员" name="operator_name">
<Input v-model:value="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="号码持有人" name="holder_name">
<Input v-model:value="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="运营平台" :required="!isEdit">
<div v-if="isEdit" class="flex items-center">
<img :src="PLATFORM_LIST[form.platform].icon" width="14" height="14" class="mr-4px" />
<span>{{ PLATFORM_LIST[form.platform].label }}</span>
</div>
<a-radio-group v-else v-model="form.platform">
<a-radio v-for="item in PLATFORM_LIST" :key="item.value" :value="item.value">
<RadioGroup v-else v-model:value="form.platform">
<Radio v-for="item in PLATFORM_LIST" :key="item.value" :value="item.value">
<div class="flex items-center">
<img :src="item.icon" width="14" height="14" class="mr-4px" />
<span>{{ item.label }}</span>
</div>
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="所属项目" field="project_ids">
</Radio>
</RadioGroup>
</FormItem>
<FormItem label="所属项目" name="project_ids">
<CommonSelect v-model="form.project_ids" :options="projects" placeholder="请选择…" size="large" />
</a-form-item>
</FormItem>
<template v-if="isEdit">
<a-form-item label="账户总消耗" field="total_use_amount">
<a-input v-model="form.total_use_amount" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="账户余额" field="balance_amount">
<a-input v-model="form.balance_amount" placeholder="请输入..." size="large" disabled />
</a-form-item>
<FormItem label="账户总消耗" name="total_use_amount">
<Input v-model:value="form.total_use_amount" placeholder="请输入..." size="large" disabled />
</FormItem>
<FormItem label="账户余额" name="balance_amount">
<Input v-model:value="form.balance_amount" placeholder="请输入..." size="large" disabled />
</FormItem>
</template>
<a-form-item label="同步项目数据" field="is_sync_project">
<FormItem name="is_sync_project">
<template #label>
<span class="label">同步项目数据</span>
<a-tooltip content="同步项目数据后，账户数据将同步到项目中">
<Tooltip title="同步项目数据后，账户数据将同步到项目中">
<icon-question-circle size="14" class="ml-4px color-#737478" />
</a-tooltip>
</Tooltip>
</template>
<a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :unchecked-value="0" />
</a-form-item>
<Switch v-model:checked="form.is_sync_project" size="middle" :checkedValue="1" :unCheckedValue="0" />
</FormItem>
</template>
</a-form>
</Form>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit" :loading="importLoading">
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" size="large" @click="onSubmit" :loading="importLoading">
{{ confirmBtnText }}
</a-button>
</Button>
</template>
<AuthorizedAccountModal ref="authorizedAccountModalRef" />
<!-- <ImportPromptModal ref="importPromptModalRef" /> -->
</a-modal>
</Modal>
</template>
<script setup>
import {
Modal,
Form,
FormItem,
Button,
Input,
RadioGroup,
Radio,
Tooltip,
message,
Switch,
Upload,
} from 'ant-design-vue';
import { ref, defineEmits } from 'vue';
import AuthorizedAccountModal from '../authorized-account-modal';
@ -201,26 +220,25 @@ const form = ref(cloneDeep(INITIAL_FORM));
const projects = ref([]);
const importLoading = ref(false);
const rules = {
const formRules = {
mobile: [
{
required: true,
message: '请填写手机号',
trigger: ['blur', 'change'],
},
{
validator: (value, callback) => {
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请填写手机号');
}
if (!/^1[3-9]\d{9}$/.test(value)) {
callback('手机号格式不正确');
return Promise.reject('手机号格式不正确');
} else {
callback();
return Promise.resolve();
}
},
trigger: ['blur', 'change'],
},
],
operator_name: [{ required: true, message: '请输入运营人员' }],
holder_name: [{ required: true, message: '请输入号码持有人' }],
operator_name: [{ required: true, message: '请输入运营人员', trigger: ['blur', 'change'] }],
holder_name: [{ required: true, message: '请输入号码持有人', trigger: ['blur', 'change'] }],
};
const isBatchImport = computed(() => uploadType.value === 'batch');
@ -230,12 +248,12 @@ const confirmBtnText = computed(() => {
});
const handleUpload = async (option) => {
const { fileItem } = option;
const { file: uploadedFile } = option;
uploadStatus.value = UploadStatus.WAITING;
file.value = fileItem.file;
fileName.value = fileItem.name;
file.value = uploadedFile;
fileName.value = uploadedFile.name;
};
function removeFile() {
@ -291,7 +309,7 @@ const getAccountDetail = async () => {
const handleBatchImport = async () => {
try {
if (!file.value) {
AMessage.warning('请上传要导入的文件');
message.warning('请上传要导入的文件');
return;
}
@ -337,7 +355,7 @@ const handleAdd = async () => {
const handleEdit = async () => {
const { code } = await putPlacementAccounts({ id: id.value, ...form.value });
if (code === 200) {
isEdit.value && AMessage.success('修改成功');
isEdit.value && message.success('修改成功');
update();
onClose();
}
@ -349,10 +367,8 @@ async function onSubmit() {
return;
}
formRef.value.validate(async (errors) => {
if (!errors) {
isEdit.value ? handleEdit() : handleAdd();
}
formRef.value.validate().then(() => {
isEdit.value ? handleEdit() : handleAdd();
});
}

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

@ -4,7 +4,7 @@
.w-240px {
width: 240px !important;
}
.arco-modal-body {
.ant-modal-body {
.upload-block {
width: 100%;
.dt {
@ -36,8 +36,8 @@
}
}
}
.arco-upload-drag {
height: 120px;
.ant-upload {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
@ -47,6 +47,8 @@
}
}
.upload-box {
cursor: pointer;
width: 100%;
display: flex;
height: 120px;
padding: 0 16px;

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

@ -3,37 +3,24 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="480px"
title="获取凭证"
modal-class="authorized-account-modal"
:mask-closable="false"
:footer="!isLoading"
@close="close"
wrapClassName="authorized-account-modal"
:maskClosable="false"
:footer="isLoading ? null : footer"
centered
@cancel="close"
>
<!-- <div v-if="showSyncTip">
<div class="flex items-center mb-20px">
<img :src="icon1" width="16" height="16" class="mr-16px" />
<p class="s2">
检测到该账户最后更新日期为{{ exactFormatTime(lastSyncedAt, 'MM月DD日HH:mm', 'YYYY年MM月DD日 HH:mm') }}，已有{{
getDaysDiffText(lastSyncedAt)
}}未同步最新数据。
</p>
</div>
<a-radio-group v-model="syncType" class="ml-32px">
<a-radio value="sync" class="mb-16px">立即同步遗漏数据 - 获取完整的最新数据 （推荐）</a-radio>
<a-radio value="no_sync">仅授权不更新 - 继续使用当前不完全的数据</a-radio>
</a-radio-group>
</div> -->
<div class="flex flex-col items-center">
<template v-if="isLoading">
<a-progress
<Progress
:percent="progress"
color="#6D4CFE"
trackColor="#E6E6E8"
size="large"
:stroke-width="4"
strokeColor="#6D4CFE"
trailColor="#E6E6E8"
size="default"
:strokeWidth="4"
type="circle"
/>
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
@ -44,27 +31,39 @@
<p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
<p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
</template>
<a-form v-else ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item label="账户" field="account">
<a-input v-model="form.account" placeholder="请输入..." size="large" />
</a-form-item>
<a-form-item label="密码" field="password">
<a-input-password v-model="form.password" placeholder="请输入..." size="large" />
</a-form-item>
</a-form>
<Form
v-else
class="w-full"
ref="formRef"
:model="form"
:rules="rules"
layout="horizontal"
:labelCol="{ span: 3 }"
:wrapperCol="{ span: 21 }"
>
<FormItem label="账户" name="account">
<Input v-model:value="form.account" placeholder="请输入..." size="large" />
</FormItem>
<FormItem label="密码" name="password">
<Input.Password v-model:value="form.password" placeholder="请输入..." size="large" />
</FormItem>
</Form>
</template>
</div>
<template #footer>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
<Button size="large" @click="close">取消</Button>
<Button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </Button>
</template>
</a-modal>
</Modal>
<SelectSubAccountModal ref="selectSubAccountModalRef" />
</template>
<script setup>
// 添加Modal导入
import { Modal, Form, FormItem, Input, Progress } from 'ant-design-vue';
import dayjs from 'dayjs';
import { Button } from 'ant-design-vue';
import { defineExpose, ref, computed, defineEmits } from 'vue';
import { exactFormatTime } from '@/utils/tools';
import {
@ -218,12 +217,12 @@ const startLoading = async () => {
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
if (!isCompleted.value && progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
if (!isCompleted.value && progress.value < 99) {
const step = Math.random() * 4 + 1;
progress.value = Math.min(progress.value + step, 99);
progress.value = Number(progress.value.toFixed(2));
} else if (!isCompleted.value && progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
} else if (!isCompleted.value && progress.value >= 99) {
progress.value = 99; // 卡在99%
} else {
clearFakeProgressTimer();
clearStatusPollingTimer();
@ -279,8 +278,7 @@ const handleOk = () => {
}
// 未完成，校验表单
formRef.value.validate(async (errors) => {
if (errors) return;
formRef.value.validate().then(() => {
if (shouldSelectSubAccount.value) {
visible.value = false;
selectSubAccountModalRef.value.open({

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

@ -8,18 +8,18 @@
<div class="filter-row">
<div class="filter-row-item">
<span class="label">账号名称/ID/手机号</span>
<a-input
v-model="query.search"
<Input
v-model:value="query.search"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
allowClear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</Input>
</div>
<div class="filter-row-item">
<span class="label">状态</span>
@ -27,18 +27,18 @@
</div>
<div class="filter-row-item">
<span class="label">平台</span>
<a-select
<Select
class="!w-160px"
v-model="query.platform"
size="medium"
v-model:value="query.platform"
size="middle"
placeholder="全部"
allow-clear
allowClear
@change="handleSearch"
>
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
<Option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
item.label
}}</a-option>
</a-select>
}}</Option>
</Select>
</div>
<div class="filter-row-item">
<span class="label">运营人员</span>
@ -57,18 +57,18 @@
<CommonSelect class="!w-200px" v-model="query.project_ids" :options="projects" @change="handleSearch" />
</div>
<div class="filter-row-item">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -76,6 +76,8 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { Button, Input, Select } from 'ant-design-vue';
const { Option } = Select;
import { getPlacementAccountOperators, getProjectList } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST } from '@/utils/platform';
import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
@ -88,7 +90,7 @@ const props = defineProps({
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
const operators = ref([]);
const projects = ref([]);

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

@ -3,13 +3,13 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="480px"
title="导入提示"
modal-class="import-prompt-modal"
:mask-closable="false"
@close="close"
wrapClassName="import-prompt-modal"
:maskClosable="false"
@cancel="close"
>
<div class="flex flex-col items-center">
<div class="flex items-center">
@ -18,14 +18,15 @@
</div>
</div>
<template #footer>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
<Button size="large" @click="close">取消</Button>
<Button type="primary" size="large" @click="handleOk"> 去授权 </Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { defineExpose } from 'vue';
import { Button, Modal } from 'ant-design-vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

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

@ -1,7 +1,7 @@
@import "@/views/property-marketing/component.scss";
.import-prompt-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;

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

@ -1,101 +1,99 @@
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
@cancel="onClose"
centered
title="选择子账户"
modal-class="select-sub-account-modal"
width="720px"
:mask-closable="false"
:maskClosable="false"
@close="onClose"
>
<div class="filter-row flex mb-16px">
<div class="filter-row-item flex items-center">
<span class="label">账户名称</span>
<a-input
v-model="query.account_name"
<Input
v-model:value="query.account_name"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
allowClear
@change="reload"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</Input>
</div>
<div class="filter-row-item flex items-center">
<span class="label">账户ID</span>
<a-input
v-model="query.account_id"
<Input
v-model:value="query.account_id"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
allowClear
@change="reload"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</Input>
</div>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
column-resizable
:row-selection="rowSelection"
:row-key="ROW_KEY"
:dataSource="dataSource"
:rowSelection="{
selectedRowKeys,
onSelect: handleSelect,
onSelectAll: handleSelectAll,
}"
:rowKey="ROW_KEY"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="w-100% flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="(pagination, filters, sorter) => {}"
>
<template #empty>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</template>
<template #customRender="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</Table.Column>
<template #emptyText>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
</Table>
<div v-if="pageInfo.total > 0" class="flex justify-end mt-16px">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.page_size"
:pageSize="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
<template #footer>
@ -103,22 +101,17 @@
>已选<span class="color-#6D4CFE num mx-3px">{{ selectedRows.length }}个</span>账户</span
>
<div class="flex items-center">
<a-button size="large" @click="onClose">取消</a-button>
<a-button
type="primary"
class="ml-16px"
status="danger"
size="large"
:disabled="!selectedRows.length"
@click="onConfirm"
>添加已选账户</a-button
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" :disabled="!selectedRows.length" @click="onConfirm"
>添加已选账户</Button
>
</div>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Button, Pagination, Input, Modal, Table, Tooltip } from 'ant-design-vue';
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
import { formatTableField } from '@/utils/tools';
import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
@ -134,25 +127,13 @@ const query = ref(cloneDeep(INITIAL_FORM));
const form = ref(null);
const ROW_KEY = 'account_id';
const {
selectedRowKeys,
selectedRows,
dataSource,
pageInfo,
onPageChange,
onPageSizeChange,
rowSelection,
handleSelect,
handleSelectAll,
} = useTableSelectionWithPagination({
rowKey: ROW_KEY,
onPageChange: () => {
getData();
},
onPageSizeChange: () => {
getData();
},
});
const { selectedRowKeys, selectedRows, dataSource, pageInfo, onPageChange, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
rowKey: ROW_KEY,
onPageChange: () => {
getData();
},
});
const open = (formData) => {
const { platform, account, password } = formData;

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

@ -7,9 +7,9 @@
font-weight: 400;
line-height: 22px;
}
.arco-modal-header {
.ant-modal-header {
}
.arco-modal-body {
.ant-modal-body {
height: 536px;
overflow: hidden;
display: flex;
@ -33,7 +33,7 @@
}
}
.arco-modal-footer {
.ant-modal-footer {
justify-content: space-between;
.s1 {
font-family: $font-family-regular;

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

@ -3,16 +3,17 @@
* @Date: 2025-06-25 15:31:15
-->
<template>
<div class="status-box" :class="`status-box-${status}`">
<div class="status-box w-fit" :class="`status-box-${status}`">
<span class="text">{{ statusText }}</span>
<a-tooltip v-if="showTooltip" :content="tooltipText">
<Tooltip v-if="showTooltip" :title="tooltipText">
<img v-if="showIcon" :src="iconSrc" width="12" height="12" class="ml-4px" />
</a-tooltip>
</Tooltip>
</div>
</template>
<script setup>
import { computed } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { STATUS_LIST, EnumPutAccountStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';

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

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

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

@ -4,16 +4,16 @@
-->
<template>
<div class="account-manage-wrap">
<div class="filter-wrap bg-#fff rounded-8px ">
<div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">账户管理</p>
<div class="flex items-center">
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
<Button type="primary" class="w-112px" @click="handleOpenAccountModal">
<template #icon>
<icon-plus size="16"/>
<icon-plus size="16" />
</template>
<template #default>添加账户</template>
</a-button>
</Button>
</div>
</div>
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
@ -21,17 +21,17 @@
<div
v-if="dataSource.length > 0"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px items-center h-48px"
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
>
<div class="flex items-center">
<div class="flex items-center">
<template v-if="selectedItems.length > 0">
<a-checkbox
:model-value="checkedAll"
<Checkbox
:checked="checkedAll"
:indeterminate="indeterminate"
class="mr-8px"
@change="handleChangeAll"
@change="(e) => handleChangeAll(e.target.checked)"
/>
<span class="label mr-24px">
已选
@ -52,11 +52,11 @@
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
<Space v-if="isAbNormalStatus" class="flex items-center">
<Button type="primary" danger size="small" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
</a-space>
</Button>
</Space>
</div>
</div>
<div class="card-wrap">
@ -71,17 +71,16 @@
<NoData v-else />
<div v-if="pageInfo.total > 0" class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:page-size-options="[8, 16, 20, 32, 64]"
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.page_size"
:pageSizeOptions="['8', '16', '20', '32', '64']"
:pageSize="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -93,6 +92,7 @@
<script setup>
import { ref } from 'vue';
import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
@ -199,8 +199,9 @@ const handleReset = () => {
reload();
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.page_size = pageSize;
getData();
};
const onPageSizeChange = (pageSize) => {
@ -261,7 +262,7 @@ const getSyncTaskStatus = async (id, notificationId) => {
if (code === 200) {
if (data?.status !== 0) {
clearQueryTaskTimer();
notificationId && Notification.remove(notificationId);
notificationId && notification.close(notificationId);
showImportResultNotification(data);
getData();
}

24
src/views/property-marketing/put-account/components/account-select/index.vue
View File

@ -3,24 +3,26 @@
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedOperators"
:multiple="multiple"
size="medium"
<Select
v-model:value="selectedOperators"
:mode="multiple ? 'multiple' : undefined"
size="middle"
:placeholder="placeholder"
allow-clear
allow-search
allowClear
showSearch
@change="handleChange"
>
<a-tooltip v-for="(item, index) in options" :key="index" :content="item.name">
<a-option :value="item.id" :label="item.name">
<Tooltip v-for="(item, index) in options" :key="index" :title="item.name">
<Option :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-tooltip>
</a-select>
</Option>
</Tooltip>
</Select>
</template>
<script setup>
import { Select, Tooltip } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue';
const props = defineProps({

18
src/views/property-marketing/put-account/components/status-select/index.vue
View File

@ -3,21 +3,23 @@
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedStatus"
:multiple="multiple"
size="medium"
<Select
v-model:value="selectedStatus"
:mode="multiple ? 'multiple' : undefined"
size="middle"
:placeholder="placeholder"
allow-clear
allowClear
@change="handleChange"
>
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
<Option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
{{ item.text }}
</a-option>
</a-select>
</Option>
</Select>
</template>
<script setup>
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';

134
src/views/property-marketing/put-account/investment-guidelines/components/action-guide-distribution/index.vue
View File

@ -3,148 +3,140 @@
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">投放行动指南</span>
<a-popover position="tl">
<Tooltip position="tl" title="投放建议优化。">
<icon-question-circle />
<template #content>
<p>投放建议优化。</p>
</template>
</a-popover>
</Tooltip>
</div>
<a-space>
<Space>
<span class="player-title">表现分析</span>
<a-popover position="tl">
<Tooltip position="tl" title="表现分析。">
<icon-question-circle />
<template #content>
<p>表现分析。</p>
</template>
</a-popover>
</a-space>
</Tooltip>
</Space>
<div style="margin-right: 24px">
<a-row :gutter="24">
<a-col :span="12">
<Row :gutter="24">
<Col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">人群分析</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '人群分析').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '人群分析')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
<a-col :span="12">
</Col>
<Col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">投放素材</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '投放素材').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '投放素材')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="24">
<a-col :span="12">
</Col>
</Row>
<Row class="grid-demo" :gutter="24">
<Col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">投放时段</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '投放时段').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '投放时段')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</Col>
<a-col :span="12">
<Col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">平台表现</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '平台表现').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '平台表现')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
</Col>
</Row>
</div>
<a-space>
<Space>
<span class="player-title">新投放建议生成</span>
<a-popover position="tl">
<Tooltip position="tl" title="新投放建议生成。">
<icon-question-circle />
<template #content>
<p style="margin: 0">新投放建议生成。</p>
</template>
</a-popover>
</a-space>
<a-row class="grid-demo" :gutter="24">
<a-col :span="24">
</Tooltip>
</Space>
<Row class="grid-demo" :gutter="24">
<Col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title">人群建议</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '人群建议').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '人群建议')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="24">
<a-col :span="24">
</Col>
</Row>
<Row class="grid-demo" :gutter="24">
<Col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title">素材建议</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '素材建议').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '素材建议')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
</Col>
</Row>
<a-row class="grid-demo" :gutter="24">
<a-col :span="24">
<Row class="grid-demo" :gutter="24">
<Col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title">投放策略建议</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '投放策略建议').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '投放策略建议')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
</Col>
</Row>
</div>
</view>
</template>
<script setup lang="ts">
import { Space, Tooltip, Row, Col } from "ant-design-vue"
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
const props = defineProps({

15
src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
View File

@ -2,12 +2,9 @@
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">总体摘要</span>
<a-popover position="tl">
<Tooltip position="tl" title="于筛选出来的投流账户/计划的情况生成的总体描述。">
<icon-question-circle />
<template #content>
<p style="margin: 0">基于筛选出来的投流账户/计划的情况生成的总体描述。</p>
</template>
</a-popover>
</Tooltip>
<span @click="copyData" class="copybtn">
<icon-copy :style="{ fontSize: '14px' }" />
复制
@ -16,11 +13,11 @@
<NoData v-if="isEmptyData" style="height: 100px" text="暂无数据" />
<div v-else class="month-data-div">
<div style="align-self: stretch">
<a-space direction="vertical">
<Space direction="vertical">
<span v-for="(line, index) in formattedText" :key="index" :class="getCss(line.highlight)">
{{ line.text }}
</span>
</a-space>
</Space>
</div>
</div>
</div>
@ -29,7 +26,7 @@
<script setup lang="ts">
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
import { defineProps } from 'vue';
import { Message } from '@arco-design/web-vue';
import { Space, message, Tooltip } from "ant-design-vue"
const props = defineProps({
overview: {
@ -79,7 +76,7 @@ const copyData = () => {
navigator.clipboard
.writeText(textToCopy)
.then(() => {
Message.success('已复制');
message.success('已复制');
})
.catch((err) => {
console.error('复制失败:', err);

75
src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
View File

@ -2,97 +2,80 @@
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">投放建议优化</span>
<a-popover position="tl">
<Tooltip position="tl" title="基于筛选出来的投流账户/计划的情况生成的优化建议。">
<icon-question-circle />
<template #content>
<p style="margin: 0">基于筛选出来的投流账户/计划的情况生成的优化建议。</p>
</template>
</a-popover>
</Tooltip>
</div>
<NoData v-if="isEmptyData" style="height: 100px" text="暂无数据" />
<div v-else>
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
<a-col :span="24">
<Row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
<Col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title"
>总体策略
<a-popover position="tl">
<Tooltip position="tl" title="优化建议的整体调整概述。">
<icon-question-circle />
<template #content>
<p style="margin: 0">优化建议的整体调整概述。</p>
</template>
</a-popover>
</Tooltip>
</span>
<span class="placement-optimization-str">{{ props.optimization?.[0]?.['content'] }}</span>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
<a-col :span="12">
</Col>
</Row>
<Row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
<Col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title"
>预算分配
<a-popover position="tl">
<Tooltip position="tl" title="优化建议在预算分配部分的详细描述。">
<icon-question-circle />
<template #content>
<p style="margin: 0">优化建议在预算分配部分的详细描述。</p>
</template>
</a-popover>
</Tooltip>
</span>
<span class="placement-optimization-str">{{ props.optimization?.[1]?.['content'] }}</span>
</div>
</a-col>
<a-col :span="12">
</Col>
<Col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title"
>时段优化
<a-popover position="tl">
<Tooltip position="tl" title="优化建议在时段优化部分的详细描述。">
<icon-question-circle />
<template #content>
<p style="margin: 0">优化建议在时段优化部分的详细描述。</p>
</template>
</a-popover>
</Tooltip>
</span>
<span class="placement-optimization-str">{{ props.optimization?.[2]?.['content'] }}</span>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
<a-col :span="12">
</Col>
</Row>
<Row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
<Col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title"
>人群包优化
<a-popover position="tl">
<Tooltip position="tl" title="优化建议在人群包优化部分的详细描述。">
<icon-question-circle />
<template #content>
<p style="margin: 0">优化建议在人群包优化部分的详细描述。</p>
</template>
</a-popover>
</Tooltip>
</span>
<span class="placement-optimization-str">{{ props?.optimization?.[3]?.['content'] }}</span>
</div>
</a-col>
<a-col :span="12">
</Col>
<Col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title"
>素材优化
<a-popover position="tl">
<Tooltip position="tl" title="优化建议在素材优化部分的详细描述。">
<icon-question-circle />
<template #content>
<p style="margin: 0">优化建议在素材优化部分的详细描述。</p>
</template>
</a-popover>
</Tooltip>
</span>
<span class="placement-optimization-str">{{ props?.optimization?.[4]?.['content'] }}</span>
</div>
</a-col>
</a-row>
</Col>
</Row>
</div>
</div>
</template>
<script setup lang="ts">
import { Tooltip, Row, Col } from "ant-design-vue"
import { defineProps } from 'vue';
const props = defineProps({

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

@ -1,72 +1,72 @@
<template>
<view>
<a-table class="account-table" :columns="columns" :data="listData" :pagination="false">
<template #platform="{ record }">
<span class="mr-8px" v-if="record.platform.length > 0" v-for="(item, index) in record.platform">
<img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
</span>
</template>
<template #operation="{ record }">
<a-space size="medium">
<a-space>
<a-popconfirm
content="确定删除吗?"
type="warning"
ok-text="确认删除"
cancel-text="取消"
@ok="deleteData(record.id)"
>
<icon-delete></icon-delete>
</a-popconfirm>
</a-space>
<a-space>
<a-button type="outline" @click="downLoad(record.file_url)" class="operation-btn">下载</a-button>
<a-button type="outline" @click="goDetail(record.id)" class="operation-btn">详情</a-button>
</a-space>
</a-space>
</template>
</a-table>
<Table class="account-table" :dataSource="listData" :pagination="false" :showSorterTooltip="false" @change="(pagination, filters, sorter) => {}">
<Table.Column
title="生成日期"
dataIndex="created_at"
:width="60"
:minWidth="60"
/>
<Table.Column
title="账号"
dataIndex="account"
:width="120"
:minWidth="120"
/>
<Table.Column
:width="180"
:minWidth="180"
title="计划"
dataIndex="plan"
/>
<Table.Column
title="平台"
:width="120"
:minWidth="120"
>
<template #customRender="{ record }">
<template v-if="record.platform.length > 0">
<span class="mr-8px" v-for="(item, index) in record.platform" :key="index">
<img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
</span>
</template>
</template>
</Table.Column>
<Table.Column
title="操作"
dataIndex="operation"
:width="60"
:minWidth="60"
>
<template #customRender="{ record }">
<Space>
<Space>
<Popconfirm
title="确定删除吗?"
okText="确认删除"
cancelText="取消"
@confirm="deleteData(record.id)"
>
<icon-delete></icon-delete>
</Popconfirm>
</Space>
<Space>
<Button type="primary" ghost @click="downLoad(record.file_url)" class="operation-btn">下载</Button>
<Button type="primary" ghost @click="goDetail(record.id)" class="operation-btn">详情</Button>
</Space>
</Space>
</template>
</Table.Column>
</Table>
</view>
</template>
<script setup lang="ts">
import { Button, Space, Table, message, Popconfirm } from 'ant-design-vue';
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { PLATFORM_LIST } from '@/utils/platform';
import { Message } from '@arco-design/web-vue';
const columns = [
{
title: '生成日期',
dataIndex: 'created_at',
width: 60,
minWidth: 60,
},
{
title: '账号',
dataIndex: 'account',
width: 120,
minWidth: 120,
},
{
width: 180,
minWidth: 180,
title: '计划',
dataIndex: 'plan',
},
{
title: '平台',
width: 120,
minWidth: 120,
slotName: 'platform',
},
{
title: '操作',
dataIndex: 'operation',
slotName: 'operation',
width: 60,
minWidth: 60,
},
];
// hotTranslation.vue
import { useRouter } from 'vue-router';
import { deleteHistorylog } from '@/api/all/propertyMarketing';
@ -83,7 +83,7 @@ const goDetail = async (id) => {
const downLoad = (fileUrl) => {
if (isEmpty(fileUrl)) {
Message.error('下载失败,文件不存在');
message.error('下载失败,文件不存在');
return;
}
const link = document.createElement('a');
@ -96,7 +96,7 @@ const downLoad = (fileUrl) => {
const deleteData = async (id) => {
const { code, message } = await deleteHistorylog(id);
if (code == 200) {
Message.success(message);
message.success(message);
emits('onSearch');
console.log('onsearch');
}
@ -121,4 +121,7 @@ const props = defineProps({
line-height: 22px;
word-wrap: break-word;
}
:deep(.ant-popconfirm-buttons) {
display: flex;
}
</style>

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

@ -1,52 +1,46 @@
<!--表单搜索组件-->
<template>
<div class="container px-24px">
<div class="container px-24px pt-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">账户名称</span>
<a-space size="medium" class="w-240px">
<AccountSelect v-model="query.placement_account_id"></AccountSelect>
</a-space>
<AccountSelect v-model="query.placement_account_id" class="w-240px"></AccountSelect>
</div>
<div class="filter-row-item flex items-center">
<span class="label">计划</span>
<a-space size="medium" class="w-240px">
<PlanSelect v-model="query.placement_account_project_id"></PlanSelect>
</a-space>
<PlanSelect v-model="query.placement_account_project_id" class="w-240px"></PlanSelect>
</div>
<div class="filter-row-item flex items-center">
<span class="label">平台</span>
<a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear>
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
<Select v-model:value="query.platform" class="w-150" size="middle" placeholder="全部" allowClear>
<Option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
>{{ item.label }}
</a-option>
</a-select>
</Option>
</Select>
</div>
</div>
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space size="medium" class="w-240px">
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-310" />
</a-space>
<DatePicker.RangePicker v-model:value="data_time" size="medium" allowClear format="YYYY-MM-DD" class="w-310" @change="onDateChange" />
</div>
<div class="filter-row-item flex items-center">
<a-button type="outline" class="mr-12px" :disabled="disabled" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" :disabled="disabled" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -54,10 +48,13 @@
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
import { Button, Select, DatePicker } from 'ant-design-vue';
import { PLATFORM_LIST } from '@/utils/platform';
import AccountSelect from '@/views/components/common/AccountSelect.vue';
import PlanSelect from '@/views/components/common/PlanSelect.vue';
const { Option } = Select;
const props = defineProps({
query: {
type: Object,
@ -68,7 +65,10 @@ const props = defineProps({
default: false,
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
const data_time = ref([]);
// 获取最近7天的日期
const getLast7Days = () => {
const today = new Date();
@ -79,6 +79,19 @@ const getLast7Days = () => {
const handleSearch = () => {
emits('onSearch', props.query);
};
const onDateChange = (date) => {
if (!date) {
props.query.data_time = [];
handleSearch();
return;
}
const [start, end] = date;
const FORMAT_DATE = 'YYYY-MM-DD';
props.query.data_time = [dayjs(start).startOf('day').format(FORMAT_DATE), dayjs(end).endOf('day').format(FORMAT_DATE)];
handleSearch();
};
// 使用 computed 实现 v-model
const localQuery = computed({
get: () => props.query,
@ -86,10 +99,14 @@ const localQuery = computed({
});
const handleReset = () => {
data_time.value = [];
emits('onReset');
};
onMounted(() => {
localQuery.value.data_time = getLast7Days();
const defaultTime = getLast7Days();
data_time.value = defaultTime;
localQuery.value.data_time = defaultTime;
});
</script>

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

@ -1,97 +1,132 @@
<template>
<view class="table-data">
<a-table
<Table
class="account-table"
:columns="columns"
:data="listData"
:dataSource="listData"
:pagination="false"
@sorter-change="handleSorterChange"
:showSorterTooltip="false"
@change="(pagination, filters, sorter) => {
if (sorter && !Array.isArray(sorter) && sorter.columnKey) {
handleSorterChange(sorter.columnKey, sorter.order);
}
}"
>
<template #total_use_amount_label>
<a-space>
<span>本周总消耗</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p>当前周内所有投流账户的累计广告花费，反映整体投放规模。</p>
<Table.Column
title="账户名称"
dataIndex="account_name"
:width="60"
:minWidth="60"
/>
<Table.Column
:width="180"
:minWidth="180"
title="计划名称"
dataIndex="name"
/>
<Table.Column
title="平台"
dataIndex="platform"
:width="120"
:minWidth="120"
>
<template #customRender="{ record }">
<div class="field-row">
<img :src="PLATFORM_LIST.find((v) => v.value === record.platform)?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST.find((v) => v.value === record.platform)?.label }}</span>
</div>
</template>
</Table.Column>
<Table.Column
:width="120"
:minWidth="120"
key="total_use_amount"
:sorter="true"
dataIndex="total_use_amount"
>
<template #title>
<Space>
<span>本周总消耗</span>
<Tooltip position="tl" title="当前周内所有投流账户的累计广告花费，反映整体投放规模。">
<icon-question-circle />
</Tooltip>
</Space>
</template>
<template #customRender="{ record }">
<Space>￥{{ record.total_use_amount }}</Space>
</template>
</Table.Column>
<Table.Column
:width="120"
:minWidth="120"
key="pre_total_use_amount_chain"
:sorter="true"
dataIndex="pre_total_use_amount_chain"
>
<template #title>
<Space>
<span>本周总消耗环比</span>
<Tooltip position="tl" title="本周消耗金额与上周对比的变化百分比，用于衡量预算投放趋势。">
<icon-question-circle />
</Tooltip>
</Space>
</template>
<template #customRender="{ record }">
<Statistic
:value="record.pre_total_use_amount_chain * 100"
:value-style="{
color: record.pre_total_use_amount_chain > 0 ? '#F64B31' : '#25C883',
fontStyle: 'normal',
fontSize: '14px',
}"
>
<template #prefix>
<icon-arrow-rise v-if="record.pre_total_use_amount_chain > 0" />
<icon-arrow-down v-else />
</template>
</a-popover>
</a-space>
</template>
<template #pre_total_use_amount_chain_title>
<a-space>
<span>本周总消耗环比</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p>本周消耗金额与上周对比的变化百分比，用于衡量预算投放趋势。</p>
</template>
</a-popover>
</a-space>
</template>
<template #roi>
<a-space>
<span>ROI</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p>投资回报率（ROI）= 收益 ÷ 投入成本，反映整体投流账户的收益效率。</p>
</template>
</a-popover>
</a-space>
</template>
<template #ctr>
<a-space>
<span>CTR</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p>点击率（CTR）= 点击量 ÷ 展示量，是衡量广告素材吸引力的关键指标。</p>
</template>
</a-popover>
</a-space>
</template>
<template #platform="{ record }">
<div class="field-row">
<img :src="PLATFORM_LIST.find((v) => v.value === record.platform)?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST.find((v) => v.value === record.platform)?.label }}</span>
</div>
</template>
<template #total_use_amount="{ record }">
<a-space>￥{{ record.total_use_amount }}</a-space>
</template>
<template #total_use_amoun2="{ record }">
<div class="field-row">
<img :src="PLATFORM_LIST.find((v) => v.value === record.platform)?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST.find((v) => v.value === record.platform)?.label }}</span>
</div>
</template>
<template #pre_total_use_amount_chain="{ record }">
<a-statistic
:value="record.pre_total_use_amount_chain * 100"
:value-style="{
color: record.pre_total_use_amount_chain > 0 ? '#F64B31' : '#25C883',
fontStyle: 'normal',
fontSize: '14px',
}"
>
<template #prefix>
<icon-arrow-rise v-if="record.pre_total_use_amount_chain > 0" />
<icon-arrow-down v-else />
</template>
<template #suffix>%</template>
</a-statistic>
</template>
<template #clickRate="{ record }">
<span>{{ `${record.click_rate}%` }}</span>
</template>
</a-table>
<template #suffix>%</template>
</Statistic>
</template>
</Table.Column>
<Table.Column
dataIndex="roi"
:width="120"
:minWidth="120"
key="roi"
:sorter="true"
>
<template #title>
<Space>
<span>ROI</span>
<Tooltip position="tl" title="投资回报率（ROI）= 收益 ÷ 投入成本，反映整体投流账户的收益效率。">
<icon-question-circle />
</Tooltip>
</Space>
</template>
</Table.Column>
<Table.Column
dataIndex="click_rate"
:width="120"
:minWidth="120"
key="click_rate"
:sorter="true"
>
<template #title>
<Space>
<span>CTR</span>
<Tooltip position="tl" title="点击率（CTR）= 点击量 ÷ 展示量，是衡量广告素材吸引力的关键指标。">
<icon-question-circle />
</Tooltip>
</Space>
</template>
<template #customRender="{ record }">
<span>{{ `${record.click_rate}%` }}</span>
</template>
</Table.Column>
</Table>
</view>
</template>
<script setup lang="ts">
import { Space, Table, Tooltip, Statistic } from "ant-design-vue"
import { PLATFORM_LIST } from '@/utils/platform';
const props = defineProps({
@ -108,69 +143,6 @@ const emit = defineEmits(['updateQuery']);
const handleSorterChange = (column, order) => {
emit('updateQuery', { column, order });
};
const columns = [
{
title: '账户名称',
dataIndex: 'account_name',
width: 60,
minWidth: 60,
},
{
width: 180,
minWidth: 180,
title: '计划名称',
dataIndex: 'name',
},
{
title: '平台',
dataIndex: 'platform',
width: 120,
minWidth: 120,
slotName: 'platform',
},
{
title: '本周总消耗',
titleSlotName: 'total_use_amount_label',
dataIndex: 'total_use_amount',
slotName: 'total_use_amount',
width: 120,
minWidth: 120,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '本周总消耗环比',
titleSlotName: 'pre_total_use_amount_chain_title',
dataIndex: 'pre_total_use_amount_chain',
width: 120,
minWidth: 120,
slotName: 'pre_total_use_amount_chain',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
titleSlotName: 'roi',
dataIndex: 'roi',
width: 120,
minWidth: 120,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
titleSlotName: 'ctr',
dataIndex: 'click_rate',
width: 120,
minWidth: 120,
slotName: 'clickRate',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
];
</script>
<style lang="scss"></style>

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

@ -6,31 +6,31 @@
</div>
<div class="container px-24px pt-12px pb-24px">
<a-row class="grid-demo" :gutter="24">
<a-col :span="12">
<Row class="grid-demo" :gutter="24">
<Col :span="12">
<div class="">
<a-space direction="vertical">
<Space direction="vertical">
<span class="span-title">账户</span>
<span class="span-content">{{ detailData?.account }}</span>
</a-space>
</Space>
</div>
</a-col>
</Col>
<a-col :span="12">
<Col :span="12">
<div class="">
<a-space direction="vertical">
<Space direction="vertical">
<span class="span-title">计划</span>
<span class="span-content">{{detailData.plan}}</span>
</a-space>
</Space>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="24" style="margin-top: 30px">
<a-col :span="12">
</Col>
</Row>
<Row class="grid-demo" :gutter="24" style="margin-top: 30px">
<Col :span="12">
<div class="">
<a-space direction="vertical">
<Space direction="vertical">
<span class="span-title">平台</span>
<a-space>
<Space>
<span
class="mr-8px"
v-if="detailData.platform.length > 0"
@ -39,20 +39,20 @@
<img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</Col>
<a-col :span="12">
<Col :span="12">
<div class="">
<a-space direction="vertical">
<Space direction="vertical">
<span class="span-title">生成时间</span>
<span class="span-content">{{ detailData.created_at }}</span>
</a-space>
</Space>
</div>
</a-col>
</a-row>
</Col>
</Row>
</div>
</div>
<MonthData :overview="aiResult.overview"></MonthData>
@ -60,28 +60,27 @@
<!-- 投放建议-->
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
<div class="ignore-export">
<a-space class="down-btn">
<a-button type="outline" :loading="exportLoading" @click="downPage">
<Space class="down-btn">
<Button type="primary" ghost :loading="exportLoading" @click="downPage">
<template #icon>
<icon-download />
<icon-download class="mr-8px"/>
</template>
<template #default>下载</template>
</a-button>
</a-space>
</Button>
</Space>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button, Space, message, Row, Col } from 'ant-design-vue';
import MonthData from './components/month-data/index.vue';
import PlacementSuggestions from './components/placement-suggestions/index.vue';
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';
import { Message } from '@arco-design/web-vue';
const aiResult = reactive({
optimization: [], // 投放建议优化
@ -122,7 +121,7 @@ const downPage = async () => {
document.body.removeChild(link);
exportLoading.value = false;
} catch (error) {
Message.error(error.message);
message.error(error.message);
exportLoading.value = false;
}
};

62
src/views/property-marketing/put-account/investment-guidelines/index.vue
View File

@ -2,17 +2,16 @@
<div class="guidelines-data-wrap">
<div class="part-div">
<div>
<a-tabs
<Tabs
v-model:activeKey="tabData"
@tab-click="onSearch"
@change="onSearch"
class="a-tab-class ignore-export"
default-active-key="placement_guide"
defaultActiveKey="placement_guide"
size="large"
>
<a-tab-pane key="placement_guide" title="投放指南"></a-tab-pane>
<a-tab-pane key="guide_history">
<template #title>历史指南列表</template>
</a-tab-pane>
</a-tabs>
<TabPane key="placement_guide" tab="投放指南"></TabPane>
<TabPane key="guide_history" tab="历史指南列表"></TabPane>
</Tabs>
</div>
<!--表单组件搜索-->
<listSearchForm
@ -29,19 +28,18 @@
@onSearch="onSearch"
@updateQuery="handleUpdateQuery"
/>
<a-spin v-if="loading" tip="AI分析中" />
<Spin v-if="loading" tip="AI分析中" />
<div v-if="listData.total > 0" class="pagination-box flex justify-end ignore-export">
<a-pagination
<Pagination
:total="listData.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total: number) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="query.page"
:page-size="query.pageSize"
:pageSize="query.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -54,26 +52,28 @@
></PlacementSuggestions>
<div v-if="tabData == 'placement_guide'" class="ignore-export">
<a-space class="down-btn">
<a-button type="outline" :loading="exportLoading" @click="downPage">
<Space class="down-btn">
<Button type="primary" ghost :loading="exportLoading" @click="downPage">
<template #icon>
<icon-download />
<icon-download class="mr-8px"/>
</template>
<template #default>下载</template>
</a-button>
<a-button type="primary" @click="handleSave">
</Button>
<Button type="primary" @click="handleSave">
<template #icon>
<icon-drive-file />
<icon-drive-file class="mr-8px"/>
</template>
<template #default>保存</template>
</a-button>
</a-space>
</Button>
</Space>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button, Tabs, Space, Pagination, Spin, message as Amessage } from 'ant-design-vue';
const { TabPane } = Tabs;
import PlacementGuideList from './components/table-data/placementGuideList.vue';
import listSearchForm from './components/table-data/listSearchForm.vue';
import GuideListHistory from './components/table-data/guideListHistory.vue';
@ -85,14 +85,13 @@ import {
getPlacementGuideHistory,
savePlacementGuide,
} from '@/api/all/propertyMarketing';
import { Message } from '@arco-design/web-vue';
import { AiResultStatus, generatePDF } from '@/views/property-marketing/put-account/investment-guidelines/constants';
import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';
const tabData = ref('placement_guide');
const query = reactive({
platform: '',
platform: undefined,
date_time: [],
placement_account_id: [],
placement_account_project_id: [],
@ -105,8 +104,9 @@ const query = reactive({
const currentComponent = computed(() => {
return tabData.value === 'placement_guide' ? PlacementGuideList : GuideListHistory;
});
const onPageChange = (current) => {
const onPageChange = (current: number, pageSize: number) => {
query.page = current;
query.page_size = pageSize;
onSearch();
};
const onPageSizeChange = (pageSize) => {
@ -179,7 +179,7 @@ const downPage = async () => {
document.body.removeChild(link);
exportLoading.value = false;
} catch (error) {
Message.error(error.message);
Amessage.error(error.message);
exportLoading.value = false;
}
};
@ -214,7 +214,7 @@ const syncGetAiResult = async () => {
aiResult.action_guide = data.result?.action_guide?.modules || [];
aiResult.overview = data.result?.overview?.content_blocks[0] || [];
} else if (data.ai_result_status === AiResultStatus.FAILED) {
Message.error('AI分析失败');
Amessage.error('AI分析失败');
aiError();
}
saveForm.code = data?.code;
@ -238,7 +238,7 @@ const handleReset = () => {
query.platform = '';
query.sort_column = '';
query.sort_order = '';
query.platform = '';
query.platform = undefined;
query.date_time = [];
onSearch();
};
@ -261,7 +261,7 @@ const handleSave = async () => {
};
const { code, message, data } = await savePlacementGuide(updatedSaveForm);
if (code === 200) {
Message.success(message);
Amessage.success(message);
}
};