feat(property-marketing): 优化账号和计划选择组件，重构投放指南表格展示逻辑

perf: 移除冗余代码，优化空数据展示处理 style: 统一组件样式引用方式，调整表格标题显示
2025-07-10 15:24:11 +08:00
parent a8ed7c21c2
commit a0516cf378
8 changed files with 55 additions and 73 deletions
--- a/src/views/components/common/AccountSelect.vue
+++ b/src/views/components/common/AccountSelect.vue
@ -1,11 +1,5 @@
 <template>
-  <a-select
-    v-model="selectedValue"
-    placeholder="请选择账号"
-    allow-clear
-    filterable
-    @change="handleChange"
-  >
+  <a-select allow-search v-model="selectedValue" placeholder="请选择账号" allow-clear filterable @change="handleChange">
    <a-option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name">
      {{ account.name }}
    </a-option>
@ -54,13 +48,17 @@ const fetchAccounts = async () => {
 };

 // 搜索处理
-const handleSearch = (value: string) => {
-
-};
+const handleSearch = (value: string) => {};

 // 值变化处理
 const handleChange = (value: number | string) => {
-  emit('update:modelValue', [value]);
+  let data = [];
+  if (value === '') {
+    data = [];
+  } else {
+    data = [value];
+  }
+  emit('update:modelValue', data);
 };

 // 初始化获取数据
--- a/src/views/components/common/PlanSelect.vue
+++ b/src/views/components/common/PlanSelect.vue
@ -1,5 +1,5 @@
 <template>
-  <a-select v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange">
+  <a-select allow-search v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange">
    <a-option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
      {{ item.name }}
    </a-option>
@ -47,11 +47,14 @@ const fetchData = async () => {
    loading.value = false;
  }
 };
-// 搜索处理
-const handleSearch = (value: string) => {};
-
 const handleChange = (value: any) => {
-  emit('update:modelValue', [value]);
+  let data = [];
+  if (value === '') {
+    data = [];
+  } else {
+    data = [value];
+  }
+  emit('update:modelValue', data);
 };

 onMounted(fetchData);
--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
@ -10,10 +10,8 @@
      </a-popover>
    </template>

-    <div v-if="isChartEmpty" class="no-data">
-      <a-empty />
-    </div>
-    <div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
+
+    <div  class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
  </a-card>
 </template>

--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@ -76,7 +76,6 @@
 import EchartsItem from './components/echarts-item/index';
 import { PLATFORM_LIST } from '../common_constants';
 import {
-  getPlacementAccountsList,
  getPlacementAccountsTrend,
  getPlacementAccountProjectsTrend,
  fetchAccountOperators,
@ -96,7 +95,6 @@ const getOperators = async () => {
  }
 };
 const query = reactive({
-  names: '',
  platform: '',
  operator_id: '',
  data_time: [],
@ -137,7 +135,6 @@ const handleSearch = async () => {
    getAccountProjectsTrend();
  }
 };
-// 定义图表配置
 const chartConfigs = ref([
  {
    dataKey: 'total_use_amount',
@ -224,25 +221,17 @@ const chartConfigs = ref([
    series_data: [],
  },
 ]);
-const handleReset = async () => {};
+const handleReset = async () => {
+  query.platform = '';
+  query.operator_id = '';
+  query.ids = [];
+  query.placement_account_id = [];
+  handleSearch();
+};

 const operators = ref([]);
-const accountList = ref([]);
-const handleTabClick = (key) => {
-  handleSearch();
-};
-
-// 获取账户名称
-const getAccountList = async () => {
-  const { code, data } = await getPlacementAccountsList(query);
-  if (code === 200) {
-    accountList.value = data;
-  }
-};
-
 onMounted(() => {
  handleSearch();
-  getAccountList();
  getOperators();
 });
 </script>
--- a/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
@ -1,7 +1,7 @@
 <template>
  <div class="part-div">
    <div class="part-div-header">
-      <span class="">总体摘要</span>
+      <span class="part-div-header-title">总体摘要</span>
      <a-popover position="tl">
        <icon-question-circle />
        <template #content>
@ -69,5 +69,4 @@ const getCss = (highlight?: string) => {
 </script>
 <style lang="scss">
@import './style.scss';
-
 </style>
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
@ -5,29 +5,14 @@
      <div class="filter-row-item flex items-center">
        <span class="label">账户名称</span>
        <a-space size="medium" class="w-240px">
-          <a-input v-model="query.account_name" placeholder="请搜索..." size="medium" allow-clear>
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
+          <AccountSelect v-model="query.placement_account_id"></AccountSelect>
        </a-space>
      </div>

      <div class="filter-row-item flex items-center">
        <span class="label">计划</span>
        <a-space size="medium" class="w-240px">
-          <a-input
-            class="w-310px"
-            :style="{ width: '320px' }"
-            v-model="query.plan"
-            placeholder="请搜索..."
-            size="medium"
-            allow-clear
-          >
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
+          <PlanSelect v-model="query.placement_account_project_id"></PlanSelect>
        </a-space>
      </div>

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

 const props = defineProps({
  query: {
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
@ -7,7 +7,7 @@
      :pagination="false"
      @sorter-change="handleSorterChange"
    >
-      <template #week_consumption>
+      <template #total_use_amount_label>
        <a-space>
          <span>本周总消耗</span>
          <a-popover position="tl">
@ -18,7 +18,7 @@
          </a-popover>
        </a-space>
      </template>
-      <template #weekConsumptionRateTitle>
+      <template #pre_total_use_amount_chain_title>
        <a-space>
          <span>本周总消耗环比</span>
          <a-popover position="tl">
@ -53,12 +53,22 @@
      </template>

      <template #platform="{ record }">
-        <a-space size="medium" v-if="record.platform">
-
-        </a-space>
+        <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 #weekConsumptionRate="{ record }">
+      <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="{
@ -90,7 +100,7 @@ const props = defineProps({
    default: () => {
      data: [];
    },
-  }
+  },
 });

 const emit = defineEmits(['updateQuery']);
@ -121,8 +131,9 @@ const columns = [
  },
  {
    title: '本周总消耗',
-    titleSlotName: 'week_consumption',
+    titleSlotName: 'total_use_amount_label',
    dataIndex: 'total_use_amount',
+    slotName: 'total_use_amount',
    width: 120,
    minWidth: 120,
    sortable: {
@ -131,11 +142,11 @@ const columns = [
  },
  {
    title: '本周总消耗环比',
-    titleSlotName: 'weekConsumptionRateTitle',
+    titleSlotName: 'pre_total_use_amount_chain_title',
    dataIndex: 'pre_total_use_amount_chain',
    width: 120,
    minWidth: 120,
-    slotName: 'weekConsumptionRate',
+    slotName: 'pre_total_use_amount_chain',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
--- a/src/views/property-marketing/put-account/investment-guidelines/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/index.vue
@ -14,7 +14,6 @@
          </a-tab-pane>
        </a-tabs>
      </div>
-      <!--表单组件搜索-->
      <listSearchForm
        class="ignore-export"
        @onReset="handleReset"
@ -54,8 +53,6 @@
        <MonthData :overview="aiResult.overview"></MonthData>
        <!--    投放建议-->
        <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
-        <!--      投放行动指南-->
-        <!--        <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>-->
      </div>
    </a-spin>
    <div v-if="tabData == 'placement_guide'" class="ignore-export">
@ -98,9 +95,9 @@ const tabData = ref('placement_guide');

 const query = reactive({
  platform: '',
-  account_name: '',
-  plan: '',
  date_time: [],
+  placement_account_id: [],
+  placement_account_project_id: [],
  sort_column: '',
  sort_order: '',
  page_size: 20,