新增sbgroupdetail/targets页面

src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/index.vue

@@ -18,21 +18,13 @@
       <el-tab-pane label="广告" name="ads">
         <Ads v-if="tabActiveName==='ads'" :adGroupId="route.query.adGroupId"></Ads>
       </el-tab-pane>
-      <!--<template v-if="route.query.targetingType === 'automatic'">-->
-      <!--  <el-tab-pane label="定向" name="tab2">-->
-      <!--    <AutoTarget v-if="tabActiveName === 'tab2'" :adGroupId="route.query.adGroupId">定向</AutoTarget>-->
-      <!--  </el-tab-pane>-->
-      <!--  <el-tab-pane label="否定投放" name="tab3">-->
-      <!--    <NegTarget v-if="tabActiveName === 'tab3'" :adGroupId="route.query.adGroupId">否定投放</NegTarget>-->
-      <!--  </el-tab-pane>-->
-      <!--</template>-->
       <template v-if="route.query.targetingType ==='target'">
         <el-tab-pane label="商品投放" name="tab2">
           <ManualTarget v-if="tabActiveName === 'tab2'" :adGroupId="route.query.adGroupId">商品投放</ManualTarget>
         </el-tab-pane>
-        <el-tab-pane label="否定商品" name="tab3">
-          <NegProduct v-if="tabActiveName === 'tab3'" :adGroupId="route.query.adGroupId">否定商品</NegProduct>
-        </el-tab-pane>
+        <!--<el-tab-pane label="否定商品" name="tab3">-->
+        <!--  <NegProduct v-if="tabActiveName === 'tab3'" :adGroupId="route.query.adGroupId">否定商品</NegProduct>-->
+        <!--</el-tab-pane>-->
       </template>
       <template v-else>
         <el-tab-pane label="关键词" name="tab2">
@@ -76,7 +68,7 @@ const adGroupInfo: Ref<SpAdGroup> = ref({})
 onMounted(async () => {
   const resp = await GetObj(route.query.adGroupId)
   adGroupInfo.value = resp.data
-  console.log(111, adGroupInfo.value)
+  console.log(111, route.query)
 })
 
 </script>

src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/keyword/crud.tsx

@@ -1,8 +1,8 @@
 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 {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
+import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
 import XEUtils from 'xe-utils'
 
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {

src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/manualTarget/api.ts

@@ -1,5 +1,5 @@
-import { request } from '/@/utils/service';
-import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import {request} from '/@/utils/service'
+import {UserPageQuery} from '@fast-crud/fast-crud'
 
 export const apiPrefix = '/api/ad_manage/sbgroupdetail/targets/';
 export function GetList(query: UserPageQuery) {

src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/manualTarget/crud.tsx

@@ -1,8 +1,8 @@
 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, dict, UserPageQuery} 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 XEUtils from 'xe-utils'
 
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
@@ -17,7 +17,18 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 
   return {
     crudOptions: {
-      table: {},
+      table: {
+        height: 750,
+        headerCellStyle: {
+          backgroundColor: '#f6f7fa', // 直接设置背景颜色
+          height: '20px',
+          // border: '0.5px solid #ddd',
+        },
+        cellStyle: {
+          border: 'none',
+          borderBottom: '0.5px solid #ddd',
+        },
+      },
       container: {
         fixedHeight: false,
       },
@@ -35,16 +46,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					}
 				}
       },
-      // toolbar: {
-      //   buttons: {
-      //     search: {
-      //       show: true,
-      //     },
-      //     compact: {
-      //       show: false,
-      //     },
-      //   },
-      // },
       request: {
         pageRequest,
       },
@@ -52,18 +53,36 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
         show: false,
       },
       columns: {
-        resolvedExpression: {
-          title: '商品',
+        resolvedExpression_value: {
+          title: '商品和分类',
           column: {
-            width: '300px',
+            width: '200px',
             fixed: 'left',
-            align: 'center',
+            align: 'left',
           },
         },
         state: {
           title: '状态',
           column: {
-            width: '100px',
+            width: '90px',
+            align: 'center',
+            sortable: true,
+          },
+          type: 'dict-select',
+          search: {
+            show: true
+          },
+          dict: dict({
+            data: [
+              {value: 'paused', label: '已暂停', color: 'warning'},
+              {value: 'enabled', label: '投放中', color: 'success'},
+            ]
+          })
+        },
+        ASIN: {
+          title: 'ASIN',
+          column: {
+            width: '130px',
             align: 'center',
           },
         },
@@ -81,6 +100,14 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
             align: 'center',
           },
         },
+        // '分时': {
+        //   title: '分时调价',
+        //   column: {
+        //     width: '100px',
+        //     align: 'right',
+        //   }
+        // },
+
         ...BaseColumn,
       },
     },

src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/manualTarget/index.vue

@@ -5,70 +5,101 @@
         <DateRangePicker v-model="dateRange"></DateRangePicker>
       </template>
 
+      <template #header-middle>
+        <DataTendencyChart
+            :query="queryParams"
+            :fetchCard="getCardData"
+            :fetchLine="getLineData">
+        </DataTendencyChart>
+      </template>
       <template v-for="field of Object.keys(BaseColumn)" #[`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"
+            :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="campare-switch">
           <span>数据对比 </span>
-          <el-switch v-model="showCompare" size="small" />
+          <el-switch v-model="showCompare" size="small"/>
         </div>
       </template>
 
-      <template #cell_resolvedExpression="scope">
-        <p v-for="[key, val] of Object.entries(scope.row.resolvedExpression)">
-          {{ TargetExpressionEnum.find((item) => item.value === key)?.label }}：{{ val }}
-        </p>
+      <template #cell_resolvedExpression_value="scope">
+        <el-tooltip effect="dark" :content="scope.row.resolvedExpression_value" placement="top">
+          <div>
+            <el-link :underline="false" style="color: rgb(30, 33, 40)">
+              {{ scope.row.resolvedExpression_value }}
+            </el-link>
+            <br>
+            <span style="color: rgb(109, 119, 132)">ASIN: </span> <span style="color: rgb(30, 33, 40)">{{ scope.row.ASIN }}</span>
+          </div>
+        </el-tooltip>
       </template>
+
+
     </fs-crud>
   </fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed, watch, onBeforeMount } from 'vue'
-import { useFs, FsPage } from '@fast-crud/fast-crud'
-import { createCrudOptions } from './crud'
-// import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from '/@/stores/publicData'
-import { storeToRefs } from 'pinia'
-import { LocationQueryValue } from 'vue-router'
-import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
-import DataCompare from '/@/components/dataCompare/index.vue'
+import {onMounted, ref, watch} from 'vue'
+import {FsPage, useFs} from '@fast-crud/fast-crud'
+import {createCrudOptions} from './crud'
+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn'
+import {LocationQueryValue} from 'vue-router'
+import {usePublicData} from '/@/stores/publicData'
+import {storeToRefs} from 'pinia'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import { TargetExpressionEnum } from '/@/views/adManage/utils/enum'
+import {getCardData, getLineData} from '/@/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/api'
+import DataCompare from '/@/components/dataCompare/index.vue'
+import DataTendencyChart from '/@/views/adManage/sb/chartComponents/dataTendency.vue'
+// import { useShopInfo } from '/@/stores/shopInfo'
+
 
 interface Props {
   adGroupId: LocationQueryValue | LocationQueryValue[]
 }
+
 const props = defineProps<Props>()
 // const shopInfo = useShopInfo()
 const publicData = usePublicData()
-const { dateRange } = storeToRefs(publicData)
+const {dateRange} = storeToRefs(publicData)
 // const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   adGroupId: props.adGroupId,
   dateRange,
 })
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
 const showCompare = ref(false)
 
 onMounted(async () => {
   crudExpose.doRefresh()
 })
 watch(
-  queryParams,
-  async () => {
-    crudExpose.doRefresh()
-  },
-  { deep: true }
+    queryParams,
+    async () => {
+      crudExpose.doRefresh()
+    },
+    {deep: true}
 )
 </script>
 
-<style scoped></style>
+<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>

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

@@ -23,15 +23,15 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref, ref, onMounted, watch } from 'vue'
-import { useFs, FsPage } from '@fast-crud/fast-crud';
-import { createCrudOptions } from './crud'
-import { useRoute, useRouter, LocationQueryValue } from 'vue-router'
+import {onMounted, ref, watch} from 'vue'
+import {FsPage, useFs} from '@fast-crud/fast-crud'
+import {createCrudOptions} from './crud'
+import {LocationQueryValue, useRouter} from 'vue-router'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import { usePublicData } from '/@/stores/publicData'
-import { storeToRefs } from 'pinia'
+import {usePublicData} from '/@/stores/publicData'
+import {storeToRefs} from 'pinia'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
-import { getCardData, getLineData } from './api'
+import {getCardData, getLineData} from './api'
 
 const publicData = usePublicData()
 const router = useRouter()
@@ -47,7 +47,7 @@ const queryParams = ref({
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 
 onMounted(() => {
-	crudExpose.doRefresh();
+	crudExpose.doRefresh()
 })
 const jumpAds = (row: any) => {
   router.push({