test2.0

src/views/adManage/sb/campaigns/index.vue

@@ -1,29 +1,30 @@
 <template>
-	<fs-page class="fs-page-custom">
-		<fs-crud ref="crudRef" v-bind="crudBinding">
-			<template #header-middle>
-				<el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
-					<el-tab-pane label="数据趋势" name="dataTendency">
-						<DataTendencyChart
-							v-if="tabActiveName === 'dataTendency'"
-							:query="queryParams"
-							:fetchCard="getCardData"
-							:fetchLine="getLineData"
-							:fetch-line-month="getLineMonthData"
-							:fetch-line-week="getLineWeekData">
-						</DataTendencyChart>
-					</el-tab-pane>
-					<el-tab-pane label="广告结构" name="adStruct">
-						<AdStructChart v-if="tabActiveName === 'adStruct'" />
-					</el-tab-pane>
-					<el-tab-pane label="散点视图" name="scatterView">
-						<div v-if="tabActiveName === 'scatterView'">散点视图</div>
-					</el-tab-pane>
-				</el-tabs>
-			</template>
-			<template #cell_percentTimeInBudget="scope">
-				<el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
-			</template>
+  <fs-page class="fs-page-custom">
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #header-middle>
+        <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
+          <el-tab-pane label="数据趋势" name="dataTendency">
+            <DataTendencyChart
+              v-if="tabActiveName === 'dataTendency'"
+              :query="queryParams"
+              :fetchCard="getCardData"
+              :fetchLine="getLineData"
+              :fetch-line-month="getLineMonthData"
+              :fetch-line-week="getLineWeekData"
+            >
+            </DataTendencyChart>
+          </el-tab-pane>
+          <el-tab-pane label="广告结构" name="adStruct">
+            <AdStructChart v-if="tabActiveName === 'adStruct'" />
+          </el-tab-pane>
+          <el-tab-pane label="散点视图" name="scatterView">
+            <div v-if="tabActiveName === 'scatterView'">散点视图</div>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+      <template #cell_percentTimeInBudget="scope">
+        <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
+      </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)">
@@ -31,43 +32,44 @@
           </el-link>
         </el-tooltip>
       </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>
+      <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>
 
-			<template v-for="field of Object.keys(SbBaseColumn)" #[`cell_${field}`]="scope">
-				<DataCompare
+      <template v-for="field of Object.keys(SbBaseColumn)" #[`cell_${field}`]="scope">
+        <DataCompare
           :field="field"
           :value="scope.row[field]"
           :prev-val="scope.row[`prev${field}`]"
           :gap-val="scope.row[`gap${field}`]"
           :date-range="dateRange"
-          :show-compare="showCompare"/>
-			</template>
-			<template #toolbar-left>
-				<div class="compare-switch">
-					<span>数据对比 </span>
-					<el-switch v-model="showCompare" size="small" />
-				</div>
-			</template>
-		</fs-crud>
-	</fs-page>
+          :show-compare="showCompare"
+        />
+      </template>
+      <template #toolbar-left>
+        <div class="compare-switch">
+          <span>数据对比 </span>
+          <el-switch v-model="showCompare" size="small" />
+        </div>
+      </template>
+    </fs-crud>
+  </fs-page>
 </template>
 
 <script lang="ts" setup>
-import {onMounted, ref, watch} from 'vue'
-import {FsPage, useFs} from '@fast-crud/fast-crud'
-import {createCrudOptions} from './crud'
-import {useShopInfo} from '/@/stores/shopInfo'
-import {usePublicData} from '/@/stores/publicData'
-import {storeToRefs} from 'pinia'
-import {useRouter} from 'vue-router'
+import { onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
 import AdStructChart from './chartComponents/adStruct.vue'
 import DataTendencyChart from '/@/views/adManage/sb/chartComponents/dataTendency.vue'
-import {getCardData, getLineData, getLineMonthData, getLineWeekData} from './api'
-import {SbBaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
+import { SbBaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
 import DataCompare from '/@/components/dataCompare/index.vue'
 
 const tabActiveName = ref('dataTendency')
@@ -77,35 +79,38 @@ const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
 })
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const router = useRouter()
 const showCompare = ref(false)
 
 const jumpGroup = (row: any) => {
-	router.push({
-		name: 'SbCampaignDetail',
-		query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
-	})
+  router.push({
+    name: 'SbCampaignDetail',
+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
+  })
 }
 
-onMounted( async () => {
+onMounted(async () => {
   crudExpose.doRefresh()
 })
 
-watch(queryParams, async () => {
-	crudExpose.doRefresh()
-}, { deep: true })
-
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
 </script>
 
 <style lang="scss" scoped>
 .compare-switch {
-	flex: none;
+  flex: none;
 }
 
-::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n+3):nth-child(-n+6) .cell) {
+::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n + 3):nth-child(-n + 6) .cell) {
   display: none;
 }
 
@@ -121,11 +126,12 @@ watch(queryParams, async () => {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
 ::v-deep(.el-table--border .el-table__footer-wrapper) {
   border: none;
 }
+
 ::v-deep(.el-table .el-table__footer-wrapper .cell) {
-    font-weight: 600;
+  font-weight: 600;
 }
-
 </style>

src/views/adManage/sb/keywords/crud.ts

@@ -141,7 +141,6 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
         campaignName: {
           title: '广告活动名称',
           column: {
-            fixed: 'left',
             width: 180,
           }
         },

src/views/adManage/sp/searchTerm/crud.tsx

@@ -1,9 +1,9 @@
-import * as api from './api'
-import {dict, UserPageQuery, compute, CreateCrudOptionsProps, CreateCrudOptionsRet} from '@fast-crud/fast-crud'
-import {inject} from 'vue'
-import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
-import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
+import { CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery } from '@fast-crud/fast-crud'
+import { inject } from 'vue'
 import XEUtils from 'xe-utils'
+import * as api from './api'
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
 
 export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery) => {
@@ -60,15 +60,28 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
       columns: {
         searchTerm: {
           title: '搜索词',
+          column: {
+            width: 130,
+            fixed: 'left'
+          }
         },
         matchType: {
           title: '定向',
+          column: {
+            width: 90
+          }
         },
         campaignName: {
           title: '广告活动',
+          column: {
+            width: 180,
+          },
         },
         adGroupName: {
           title: '广告组',
+          column: {
+            width: 180,
+          },
         },
         ...BaseColumn,
       },

src/views/adManage/sp/searchTerm/index.vue

@@ -17,8 +17,30 @@
 						<div v-if="tabActiveName === 'scatterView'">敬请期待...</div>
 					</el-tab-pane>
 				</el-tabs>
-        
       </template>
+
+      <template #cell_searchTerm="scope">
+        <el-tooltip effect="dark" :content="scope.row.searchTerm" placement="top">
+          <el-link :underline="false" @click="jumpGroup(scope.row)">
+            <div class="en-text">{{ scope.row.searchTerm }}</div>
+          </el-link>
+        </el-tooltip>
+      </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-tooltip>
+      </template>
+      <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-tooltip>
+      </template>
+      
       <template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare
           :field="field" 
@@ -49,13 +71,22 @@ import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
 import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
 import DataCompare from '/@/components/dataCompare/index.vue'
+import {useRouter} from 'vue-router'
+
 
 const tabActiveName = ref("dataTendency")
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
+const router = useRouter()
 const showCompare = ref(false)
+const jumpGroup = (row: any) => {
+  router.push({
+    name: 'SpCampaignDetail',
+    query: {campaignId: row.campaignId, tagsViewName: row.campaignName},
+  })
+}
 const queryParams = ref({
   profileId: profile.value.profile_id,
   dateRange
@@ -76,5 +107,16 @@ watch(
 </script>
 
 <style scoped>
-
+.en-text {
+  max-width: 100%;
+  font-size: 13px;
+  font-weight: 420;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
 </style>