|
@@ -4,76 +4,79 @@
|
|
|
* @Description:广告关联活动弹窗
|
|
|
* @Author: xinyan
|
|
|
*/
|
|
|
-import { inject, onMounted, Ref, ref, watch } from 'vue';
|
|
|
-import { getRelationCampaign } from '/@/views/efTools/automation/api';
|
|
|
+import { onMounted, ref, watch } from 'vue';
|
|
|
+import { getAdGroupList, getRelationCampaign } from '/@/views/efTools/automation/api';
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
import { useShopInfo } from '/@/stores/shopInfo';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
|
|
|
const props = defineProps({
|
|
|
templateId: {
|
|
|
type: [String, Number],
|
|
|
required: true,
|
|
|
- }
|
|
|
+ },
|
|
|
+ modelValue: {
|
|
|
+ type: Boolean,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
});
|
|
|
-const shopInfo = useShopInfo()
|
|
|
-const { profile } = storeToRefs(shopInfo)
|
|
|
+const emits = defineEmits(['update:modelValue']);
|
|
|
+const shopInfo = useShopInfo();
|
|
|
+const { profile } = storeToRefs(shopInfo);
|
|
|
const { templateId } = toRefs(props);
|
|
|
-console.log(templateId);
|
|
|
|
|
|
-const dialogVisible = inject<Ref>('isDialogVisible');
|
|
|
-//广告活动输入框
|
|
|
+const dialogVisible = ref(props.modelValue);
|
|
|
+//筛选条件
|
|
|
const searchAdCampaign = ref('');
|
|
|
const selectedCampaignType = ref('sp');
|
|
|
const selectedAdGroup = ref('');
|
|
|
const selectedStatus = ref('');
|
|
|
-const selectedActivityTag = ref('');
|
|
|
-const currentPage = ref('');
|
|
|
-const total = ref('');
|
|
|
-const pageSize = ref(20);
|
|
|
-const loading = ref(false);
|
|
|
-const handleSizeChange = (size) => {
|
|
|
- pageSize.value = size;
|
|
|
- fetchAdCampaign(); // 调用 fetchAdCampaign 重新获取数据
|
|
|
-};
|
|
|
-
|
|
|
-const handleCurrentChange = (newPage) => {
|
|
|
- currentPage.value = newPage;
|
|
|
- loading.value = true;
|
|
|
- fetchAdCampaign();
|
|
|
- loading.value = false;
|
|
|
-};
|
|
|
|
|
|
+const adCampaignName = ref([]);
|
|
|
const campaignType = [
|
|
|
- {value: 'sb', label: 'SB'},
|
|
|
- {value: 'sp', label: 'SP'},
|
|
|
- {value: 'sd', label: 'SD'},
|
|
|
+ { value: 'sb', label: 'SB' },
|
|
|
+ { value: 'sp', label: 'SP' },
|
|
|
+ { value: 'sd', label: 'SD' },
|
|
|
];
|
|
|
-
|
|
|
-const adGroups = [
|
|
|
- {value: 'Group1', label: 'Group1'},
|
|
|
- {value: 'Group2', label: 'Group2'}
|
|
|
-];
|
|
|
-
|
|
|
+const adGroups = ref([]);
|
|
|
const campaignStatus = [
|
|
|
- {value: 'active', label: 'Active'},
|
|
|
- {value: 'inactive', label: 'Inactive'}
|
|
|
+ { value: 0, label: '未存档' },
|
|
|
+ { value: 'ENABLED', label: '已启用' },
|
|
|
+ { value: 'PAUSED', label: '已暂停' },
|
|
|
];
|
|
|
|
|
|
-const activityTags = [
|
|
|
- {value: 'Tag1', label: 'Tag1'},
|
|
|
- {value: 'Tag2', label: 'Tag2'}
|
|
|
-];
|
|
|
+//表格
|
|
|
+const currentPage = ref(1);
|
|
|
+const pageSize = ref(25);
|
|
|
+const total = ref(0);
|
|
|
|
|
|
-const adCampaignName = ref([]);
|
|
|
+const loading = ref(false);
|
|
|
+const refTable = ref(null);
|
|
|
+const selectedAds = ref([]);
|
|
|
+let selections = []; // 添加选中的项
|
|
|
+
|
|
|
+function handleCurrentChange(newPage) {
|
|
|
+ currentPage.value = newPage;
|
|
|
+ loading.value = true;
|
|
|
+ fetchAdCampaign();
|
|
|
+}
|
|
|
+
|
|
|
+// 处理分页器每页显示条目数变化
|
|
|
+function handleSizeChange(newSize) {
|
|
|
+ pageSize.value = newSize;
|
|
|
+ currentPage.value = 1;
|
|
|
+ fetchAdCampaign();
|
|
|
+}
|
|
|
|
|
|
async function fetchAdCampaign() {
|
|
|
try {
|
|
|
+ loading.value = true;
|
|
|
const resp = await getRelationCampaign({
|
|
|
profileId: profile.value.profile_id,
|
|
|
templateId: templateId.value,
|
|
|
- campaignName: '',
|
|
|
- portfolioId: '',
|
|
|
- campaignStatus: '',
|
|
|
+ campaignName: searchAdCampaign.value,
|
|
|
+ portfolioId: selectedAdGroup.value,
|
|
|
+ campaignStatus: selectedStatus.value,
|
|
|
campaignType: selectedCampaignType.value,
|
|
|
page: currentPage.value,
|
|
|
limit: pageSize.value,
|
|
@@ -81,44 +84,155 @@ async function fetchAdCampaign() {
|
|
|
adCampaignName.value = resp.data;
|
|
|
total.value = resp.total;
|
|
|
currentPage.value = resp.page;
|
|
|
+ // 恢复勾选状态
|
|
|
+ nextTick(() => {
|
|
|
+ adCampaignName.value.forEach(item => {
|
|
|
+ if (selectedAds.value.some(ad => ad.campaignId === item.campaignId)) {
|
|
|
+ refTable.value.toggleRowSelection(item, true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
} catch (error) {
|
|
|
- console.error('Error fetching task data:', error);
|
|
|
+ ElMessage.error('请求广告活动数据失败');
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const selectedAds = ref([]);
|
|
|
-
|
|
|
-const handleSelectionChange = (selection) => {
|
|
|
- selectedAds.value = selection;
|
|
|
- console.log('Selected ads:', selectedAds.value);
|
|
|
-};
|
|
|
+function handleSelectionChange(selection) {
|
|
|
+ selections = selection;
|
|
|
+ const newSelections = selections.filter(
|
|
|
+ (sel) => !selectedAds.value.some((added) => added.campaignId === sel.campaignId)
|
|
|
+ );
|
|
|
+ if (newSelections.length > 0) {
|
|
|
+ selectedAds.value.push(...newSelections);
|
|
|
+ }
|
|
|
+ // 处理取消选中的项
|
|
|
+ const removedSelections = selectedAds.value.filter(
|
|
|
+ (added) => !selections.some((sel) => sel.campaignId === added.campaignId)
|
|
|
+ );
|
|
|
|
|
|
-const confirm = () => {
|
|
|
-};
|
|
|
+ if (removedSelections.length > 0) {
|
|
|
+ selectedAds.value = selectedAds.value.filter(
|
|
|
+ (added) => !removedSelections.some((removed) => removed.campaignId === added.campaignId)
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-const removeSelectedAd = (index) => {
|
|
|
- selectedAds.value.splice(index, 1);
|
|
|
-};
|
|
|
+function removeSelectedAd(index) {
|
|
|
+ const removedAd = selectedAds.value.splice(index, 1)[0];
|
|
|
+ const targetIndex = adCampaignName.value.findIndex(ad => ad.campaignName === removedAd.campaignName);
|
|
|
+ if (targetIndex !== -1) {
|
|
|
+ const adTable = refTable.value;
|
|
|
+ adTable.toggleRowSelection(adCampaignName.value[targetIndex], false);
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-const removeAllSelectedAds = () => {
|
|
|
+function removeAllSelectedAds() {
|
|
|
+ const adTable = refTable.value;
|
|
|
+ selectedAds.value.forEach(ad => {
|
|
|
+ const targetIndex = adCampaignName.value.findIndex(item => item.campaignName === ad.campaignName);
|
|
|
+ if (targetIndex !== -1) {
|
|
|
+ adTable.toggleRowSelection(adCampaignName.value[targetIndex], false);
|
|
|
+ }
|
|
|
+ });
|
|
|
selectedAds.value = [];
|
|
|
-};
|
|
|
+}
|
|
|
+
|
|
|
+function cancel() {
|
|
|
+ dialogVisible.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+//TODO: 确认按钮
|
|
|
+async function confirm() {
|
|
|
+ const campaignItems = selectedAds.value.map(ad => ({
|
|
|
+ campaignId: ad.campaignId,
|
|
|
+ campaignType: ad.campaignType
|
|
|
+ }));
|
|
|
+ const adGroupInfo = [];
|
|
|
+ const campaignTargetInfo = [
|
|
|
+ { targetId: '492707808377423', adGroup_id: '448117369011017', bid: 0.45 },
|
|
|
+ ];
|
|
|
+ const campaignKeywordInfo = [
|
|
|
+ { keywordId: '416969576305724', adGroup_id: '393554556566271', bid: 0.04 },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const requestData = {
|
|
|
+ profileId: profile.value.profile_id,
|
|
|
+ templateId: templateId.value,
|
|
|
+ campaignItems,
|
|
|
+ adGroupInfo,
|
|
|
+ campaignTargetInfo,
|
|
|
+ campaignKeywordInfo
|
|
|
+ };
|
|
|
+ //console.log('requestData', requestData);
|
|
|
+}
|
|
|
+
|
|
|
+// 获取广告组下拉框
|
|
|
+async function fetchAdGroupList() {
|
|
|
+ try {
|
|
|
+ const resp = await getAdGroupList({
|
|
|
+ profileId: profile.value.profile_id,
|
|
|
+ });
|
|
|
+ adGroups.value = resp.data.map((item: any) => {
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.portfolioId
|
|
|
+ };
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('请求失败');
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
const headerCellStyle = (args) => {
|
|
|
if (args.rowIndex === 0) {
|
|
|
return {
|
|
|
backgroundColor: 'rgba(245, 245, 245, 0.9)',
|
|
|
+ fontWeight: '500',
|
|
|
};
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const cellStyle = () => {
|
|
|
+ return {
|
|
|
+ fontSize: '13px',
|
|
|
+ //fontWeight: '500',
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+//监控筛选条件变化
|
|
|
watch(selectedCampaignType, () => {
|
|
|
fetchAdCampaign();
|
|
|
});
|
|
|
|
|
|
-watch(templateId,()=>{
|
|
|
+watch(selectedAdGroup, (newVal) => {
|
|
|
+ if (newVal) {
|
|
|
+ selectedAdGroup.value = newVal;
|
|
|
+ fetchAdCampaign();
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+watch(selectedStatus, () => {
|
|
|
+ fetchAdCampaign();
|
|
|
+});
|
|
|
+
|
|
|
+watch(templateId, () => {
|
|
|
fetchAdCampaign();
|
|
|
-})
|
|
|
+ fetchAdGroupList();
|
|
|
+});
|
|
|
+
|
|
|
+watch(() => props.modelValue, (newValue) => {
|
|
|
+ dialogVisible.value = newValue;
|
|
|
+});
|
|
|
+
|
|
|
+watch(dialogVisible, (newValue) => {
|
|
|
+ emits('update:modelValue', newValue);
|
|
|
+});
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ //fetchAdGroupList();
|
|
|
+});
|
|
|
|
|
|
</script>
|
|
|
|
|
@@ -130,9 +244,10 @@ watch(templateId,()=>{
|
|
|
title="关联广告活动"
|
|
|
width="1158px"
|
|
|
>
|
|
|
- <div class="custom-border" style="display: flex;">
|
|
|
+ <div style="display: flex;">
|
|
|
<div style="width: 50%;">
|
|
|
- <el-input v-model="searchAdCampaign" placeholder="请输入广告活动" style="width: 100%;"></el-input>
|
|
|
+ <el-input v-model="searchAdCampaign" placeholder="请输入广告活动" style="width: 100%;"
|
|
|
+ @change="fetchAdCampaign()"></el-input>
|
|
|
<div class="custom-inline">
|
|
|
<el-select v-model="selectedCampaignType" placeholder="选择广告类型">
|
|
|
<el-option v-for="item in campaignType"
|
|
@@ -159,18 +274,11 @@ watch(templateId,()=>{
|
|
|
:value="item.value"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
-
|
|
|
- <el-select v-model="selectedActivityTag" placeholder="活动标签">
|
|
|
- <el-option
|
|
|
- v-for="item in activityTags"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
</div>
|
|
|
<el-table
|
|
|
+ ref="refTable"
|
|
|
v-loading="loading"
|
|
|
+ :cell-style="cellStyle"
|
|
|
:data="adCampaignName"
|
|
|
:header-cell-style="headerCellStyle"
|
|
|
height="400"
|
|
@@ -180,46 +288,65 @@ watch(templateId,()=>{
|
|
|
<el-table-column label="广告活动名称" prop="campaignName">
|
|
|
<template #default="scope">
|
|
|
<el-tag
|
|
|
- :type="scope.row.campaignType === 'SB' ? 'primary' : 'success'"
|
|
|
+ :color="scope.row.campaignType === 'sb' ? '#0163d2' : (scope.row.campaignType === 'sp' ? '#ff7424' : '#365672')"
|
|
|
+ class="campaign-type"
|
|
|
disable-transitions
|
|
|
- round
|
|
|
- >
|
|
|
+ round>
|
|
|
{{ scope.row.campaignType }}
|
|
|
</el-tag>
|
|
|
- {{ scope.row.campaignName }}」
|
|
|
+ {{ scope.row.campaignName }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column type="selection" width="55"></el-table-column>
|
|
|
</el-table>
|
|
|
- <el-pagination
|
|
|
- v-model:current-page="currentPage"
|
|
|
- :page-size="pageSize"
|
|
|
- :page-sizes="[10, 25, 50]"
|
|
|
- :total="total"
|
|
|
- layout="total, prev, pager, next"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- ></el-pagination>
|
|
|
+ <div class="pagination-container mt-4">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :page-sizes="[10, 25, 50,100,200]"
|
|
|
+ :total="total"
|
|
|
+ background
|
|
|
+ layout="total,sizes,prev, next, jumper"
|
|
|
+ small
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div style="flex: 1; padding-left: 20px;">
|
|
|
<h3>已选择({{ selectedAds.length }})</h3>
|
|
|
<el-table
|
|
|
+ :cell-style="cellStyle"
|
|
|
:data="selectedAds"
|
|
|
:header-cell-style="headerCellStyle"
|
|
|
height="484"
|
|
|
style="width: 100%; margin-top: 20px;"
|
|
|
>
|
|
|
- <el-table-column label="广告活动" prop="campaignName"></el-table-column>
|
|
|
+ <el-table-column label="广告活动" prop="campaignName">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag
|
|
|
+ :color="scope.row.campaignType === 'sb' ? '#0163d2' : (scope.row.campaignType === 'sp' ? '#ff7424' : '#365672')"
|
|
|
+ class="campaign-type"
|
|
|
+ disable-transitions
|
|
|
+ round>
|
|
|
+ {{ scope.row.campaignType }}
|
|
|
+ </el-tag>
|
|
|
+ {{ scope.row.campaignName }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
+ align="center"
|
|
|
label="操作"
|
|
|
width="100"
|
|
|
>
|
|
|
<template #header>
|
|
|
- <el-button link size="normal" type="danger" @click="removeAllSelectedAds">删除全部</el-button>
|
|
|
+ <el-button link size="default" style="color: #2077d7" @click="removeAllSelectedAds">删除全部</el-button>
|
|
|
</template>
|
|
|
<template #default="scope">
|
|
|
- <el-button type="text" @click="removeSelectedAd(scope.$index)">删除</el-button>
|
|
|
+ <el-button type="text" @click="removeSelectedAd(scope.$index)">
|
|
|
+ <CircleClose style="width:16px;color:#4b5765" />
|
|
|
+ </el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -227,7 +354,7 @@ watch(templateId,()=>{
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
- <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
<el-button type="primary" @click="confirm">确定</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -235,19 +362,29 @@ watch(templateId,()=>{
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
-.SP {
|
|
|
- background-color: orange;
|
|
|
- color: white;
|
|
|
- padding: 2px 4px;
|
|
|
- border-radius: 3px;
|
|
|
- margin-right: 8px;
|
|
|
+.pagination-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
}
|
|
|
|
|
|
-.SB {
|
|
|
- background-color: blue;
|
|
|
- color: white;
|
|
|
- padding: 2px 4px;
|
|
|
- border-radius: 3px;
|
|
|
- margin-right: 8px;
|
|
|
+.custom-inline {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin: 12px 0;
|
|
|
+ gap: 4px;
|
|
|
}
|
|
|
+
|
|
|
+.campaign-type {
|
|
|
+ width: 35px;
|
|
|
+ text-align: center;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fff;
|
|
|
+ border-color: #fff;
|
|
|
+ line-height: 22px;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|