✨ feat: 广告管理SD: 受众表格渲染显示逻辑

src/views/adManage/sd/audiences/crud.tsx

@@ -112,14 +112,14 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
             sortable: true
           },
         },
-        resolvedExpression: {
-          title: '类型',
-          column: {
-            align: 'center',
-            width: 130,
-            sortable: true
-          },
-        },
+        // resolvedExpression: {
+        //   title: '类型',
+        //   column: {
+        //     align: 'center',
+        //     width: 130,
+        //     sortable: true
+        //   },
+        // },
         state: {
           title: '状态',
           column: {
@@ -164,7 +164,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
             align: 'center',
             sortable: true,
             formatter: (row) => {
-              return '$' + row.value
+              return row.value ? '$' + row.value : "--"
             }
           }
         },

src/views/adManage/sd/audiences/index.vue

@@ -1,3 +1,69 @@
+<script lang="ts" setup>
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
+import { useRoute, useRouter } from 'vue-router'
+import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import AdStructChart from './chartComponents/adStruct.vue'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
+import { storeToRefs } from 'pinia'
+import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
+import DataCompare from '/@/components/dataCompare/index.vue'
+import { sdTypeMap, sdtargetMap } from '/@/views/adManage/utils/enum'
+
+const tabActiveName = ref('dataTendency')
+const shopInfo = useShopInfo()
+const publicData = usePublicData()
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
+const queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange,
+})
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
+const route = useRoute()
+const router = useRouter()
+const adStructChartRef = ref()
+const dataTendencyRef = ref()
+const showCompare = ref(false)
+
+onMounted(() => {
+  crudExpose.doRefresh()
+})
+
+const jumpGroup = (row: any) => {
+  router.push({
+    name: 'CampaignDetail',
+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
+  })
+}
+
+const resizeTabChart = () => {
+  if (tabActiveName.value === 'dataTendency') {
+    dataTendencyRef.value.resizeChart()
+  } else if (tabActiveName.value === 'adStruct') {
+    adStructChartRef.value.resizeChart()
+  }
+}
+const changeTab = () => {
+  nextTick(() => {
+    resizeTabChart()
+  })
+}
+defineExpose({ resizeTabChart })
+
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
+</script>
+
 <template>
   <fs-page class="fs-page-custom">
     <fs-crud ref="crudRef" v-bind="crudBinding">
@@ -10,8 +76,7 @@
               :fetchCard="getCardData"
               :fetch-line-month="getLineMonthData"
               :fetch-line-week="getLineWeekData"
-              :fetchLine="getLineData"
-            >
+              :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct">
@@ -26,35 +91,38 @@
 
       <template #cell_expression="scope">
         <div>
-          <!-- 单独渲染第一个元素 -->
-          <div
-            v-if="scope.row.resolvedExpression[0]?.value && scope.row.resolvedExpression[0].value.length > 0" style="font-weight: 550; color: #505968">
-            {{ scope.row.resolvedExpression[0].value[0].value ?? '' }}
-          </div>
-          <!-- 渲染其他所有元素 -->
-          <div v-if="scope.row.resolvedExpression[0]?.value && scope.row.resolvedExpression[0].value.length > 1">
-            <template v-for="(item, index) in scope.row.resolvedExpression[0].value" :key="index">
-              <span v-if="index > 0">
-                <span v-if="item.type &&
-                    (item.type === 'asinPriceGreaterThan' || 
-                    item.type === 'asinPriceLESSThan' || 
-                    item.type === 'asinReviewRatingGreaterThan' || 
-                    item.type === 'asinReviewRatingLessThan')">
-                  {{ sdtargetMap[item.type] }}
+          <!-- 预处理以确保 expression 是数组且第一个元素存在且有 value -->
+          <div v-if="Array.isArray(scope.row.expression) && scope.row.expression.length > 0 && scope.row.expression[0]?.value">
+            <!-- 渲染除了第一个 lookback 以外的第一个元素 -->
+            <div v-if="scope.row.expression[0].value[0].type !== 'lookback'" style="font-weight: 550; color: #505968">
+              {{ scope.row.expression[0].value[0].value ?? '--' }}
+            </div>
+            <!-- 渲染其他所有元素（包括可能跳过的第一个 lookback） -->
+            <div>
+              <template v-for="(item, index) in scope.row.expression[0].value" :key="index">
+                <span v-if="index > 0 || scope.row.expression[0].value[0].type === 'lookback'">
+                  <span v-if="['asinPriceGreaterThan', 'asinPriceLESSThan', 'asinReviewRatingGreaterThan', 'asinReviewRatingLessThan'].includes(item.type)">
+                    {{ sdtargetMap[item.type] }}
+                  </span>
+                  <span v-else>
+                    {{ item.type ? sdtargetMap[item.type] + ': ' : '--' }}
+                  </span>
+                  {{ item.value ?? '--' }}
+                  <span v-if="index < scope.row.expression[0].value.length - 1">&nbsp;</span>
                 </span>
-                <span v-else>{{ item.type ? sdtargetMap[item.type] + ': ' : '' }}</span>
-                {{ item.value ?? '' }}
-                <span v-if="index < scope.row.resolvedExpression[0].value.length - 1">&nbsp;</span>
-              </span>
-            </template>
+              </template>
+            </div>
           </div>
+          <!-- 如果 expression 不存在或为空数组，显示暂无数据 -->
+          <div v-else style="font-weight: 500">暂无数据</div>
         </div>
       </template>
+
       <template #cell_campaignName="scope">
         <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
-          <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
-            <div class="en-text">{{ scope.row.campaignName }}</div>
-          </el-link>
+          <!-- <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)"> -->
+          <div class="en-text">{{ scope.row.campaignName ? scope.row.campaignName : '--' }}</div>
+          <!-- </el-link> -->
         </el-tooltip>
       </template>
       <!-- 类型 -->
@@ -66,9 +134,9 @@
 
       <template #cell_adGroupName="scope">
         <el-tooltip effect="dark" :content="scope.row.adGroupName" placement="top">
-          <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
-            <div class="en-text">{{ scope.row.adGroupName }}</div>
-          </el-link>
+          <!-- <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)"> -->
+          <div class="en-text">{{ scope.row.adGroupName }}</div>
+          <!-- </el-link> -->
         </el-tooltip>
       </template>
       <template #cell_suggestedBid="scope">
@@ -78,9 +146,7 @@
           {{ scope.row.suggestedBid_upper ? `$${scope.row.suggestedBid_upper}` : '--' }}
         </div>
       </template>
-      <template #cell_MissedImpressions="scope">
-        {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
-      </template>
+      <template #cell_MissedImpressions="scope"> {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }} </template>
       <template #cell_MissedClicks="scope"> {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template>
       <template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template>
 
@@ -91,8 +157,7 @@
           :prev-val="scope.row[`prev${field}`]"
           :gap-val="scope.row[`gap${field}`]"
           :date-range="dateRange"
-          :show-compare="showCompare"
-        />
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -104,72 +169,6 @@
   </fs-page>
 </template>
 
-<script lang="ts" setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
-import { FsPage, useFs } from '@fast-crud/fast-crud'
-import { createCrudOptions } from './crud'
-import { useRoute, useRouter } from 'vue-router'
-import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
-import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from '/@/stores/publicData'
-import AdStructChart from './chartComponents/adStruct.vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
-import { storeToRefs } from 'pinia'
-import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
-import DataCompare from '/@/components/dataCompare/index.vue'
-import { sdTypeMap, sdtargetMap } from '/@/views/adManage/utils/enum'
-
-const tabActiveName = ref('dataTendency')
-const shopInfo = useShopInfo()
-const publicData = usePublicData()
-const { dateRange } = storeToRefs(publicData)
-const { profile } = storeToRefs(shopInfo)
-const queryParams = ref({
-  profileId: profile.value.profile_id,
-  dateRange,
-})
-
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
-const route = useRoute()
-const router = useRouter()
-const adStructChartRef = ref()
-const dataTendencyRef = ref()
-const showCompare = ref(false)
-
-onMounted(() => {
-  crudExpose.doRefresh()
-})
-
-const jumpGroup = (row: any) => {
-  router.push({
-    name: 'CampaignDetail',
-    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
-  })
-}
-
-const resizeTabChart = () => {
-  if (tabActiveName.value === 'dataTendency') {
-    dataTendencyRef.value.resizeChart()
-  } else if (tabActiveName.value === 'adStruct') {
-    adStructChartRef.value.resizeChart()
-  }
-}
-const changeTab = () => {
-  nextTick(() => {
-    resizeTabChart()
-  })
-}
-defineExpose({ resizeTabChart })
-
-watch(
-  queryParams,
-  async () => {
-    crudExpose.doRefresh()
-  },
-  { deep: true }
-)
-</script>
-
 <style lang="scss" scoped>
 .campare-switch {
   flex: none;

src/views/adManage/utils/enum.ts

@@ -281,6 +281,9 @@ export const sdtargetMap: {[key: string]: string} = {
   'asinReviewRatingGreaterThan': '评分>',
   'asinReviewRatingLessThan': '评分<',
   'asinPriceBetween': '商品价格',
+  'asinCategorySameAs': 'asinCategorySameAs',
+  'asinIsPrimeShippingEligible': 'asinIsPrimeShippingEligible',
+  'asinReviewRatingBetween': '评分 ',
   'lookback': '回溯期'
 }
 export const targetEnum = [