同步数据趋势图分离查询参数

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

@@ -1,15 +1,15 @@
 import * as api from './api'
-import {dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet} from '@fast-crud/fast-crud'
+import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
 import {inject} from 'vue'
 import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
-import {dynBidStrategyEnum} from '/@/views/adManage/utils/enum.js'
+import {parseQueryParams} from '/@/views/adManage/utils/tools'
+import XEUtils from 'xe-utils'
 
 
 export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
     const pageRequest = async (query: UserPageQuery) => {
-        query['profileId'] = context['profileId']
-        query['startDate'] = context['start']
-        query['endDate'] = context['end']
+        const params = parseQueryParams(context.value)
+        XEUtils.assign(query, params)
         return await api.GetList(query)
     }
     const editRequest = async ({form, row}: EditReq) => {

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

@@ -1,33 +1,46 @@
 <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" @tab-change="changeTab">
-                    <el-tab-pane label="数据趋势" name="dataTendency">
-                        <DataTendencyChart v-if="tabActiveName === 'dataTendency'" :fetchCard="getCardData" :fetchLine="getLineData"></DataTendencyChart>
-                    </el-tab-pane>
-                    <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
-                </el-tabs>
-            </template>
-        </fs-crud>
-    </fs-page>
+  <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" @tab-change="changeTab">
+          <el-tab-pane label="数据趋势" name="dataTendency">
+            <DataTendencyChart
+                v-if="tabActiveName === 'dataTendency'"
+                :query="queryParams"
+                :fetchCard="getCardData"
+                :fetchLine="getLineData">
+            </DataTendencyChart>
+          </el-tab-pane>
+          <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
+        </el-tabs>
+      </template>
+    </fs-crud>
+  </fs-page>
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted, nextTick, inject} from 'vue'
-import {useFs, FsPage} from '@fast-crud/fast-crud'
+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/sp/chartComponents/dataTendency.vue'
 import {useShopInfo} from '/@/stores/shopInfo'
 import {getCardData, getLineData} from '/@/views/adManage/sp/campaigns/api'
+import {usePublicData} from '/@/stores/publicData'
+import {storeToRefs} from 'pinia'
+
 
 const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
-const dateRange = inject('dateRange')
-const start = dateRange.value[0]
-const end = dateRange.value[1]
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {profileId: shopInfo.profile.profile_id, start: start, end: end}})
+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()
@@ -35,29 +48,34 @@ const dataTendencyRef = ref()
 
 
 onMounted(() => {
-    crudExpose.doRefresh()
+  crudExpose.doRefresh()
 })
 
 const resizeTabChart = () => {
-    if (tabActiveName.value === 'dataTendency') {
-        dataTendencyRef.value.resizeChart()
-    }
+  if (tabActiveName.value === 'dataTendency') {
+    dataTendencyRef.value.resizeChart()
+  }
 }
 const changeTab = () => {
-    nextTick(() => {
-        resizeTabChart()
-    })
+  nextTick(() => {
+    resizeTabChart()
+  })
 }
 defineExpose({resizeTabChart})
+
+watch(queryParams, async () => {
+  crudExpose.doRefresh()
+}, { deep: true })
+
 </script>
 
 <style lang="scss">
 .chart-tabs {
-    margin: 5px 0;
+  margin: 5px 0;
 
-    .el-tabs__nav {
-        padding-left: 0 !important;
-    }
+  .el-tabs__nav {
+    padding-left: 0 !important;
+  }
 }
 
 </style>

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

@@ -3,181 +3,182 @@ import {dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptions
 import {inject} from 'vue'
 import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
 import {dynBidStrategyEnum} from '/@/views/adManage/utils/enum.js'
+import {parseQueryParams} from '/@/views/adManage/utils/tools'
+import XEUtils from 'xe-utils'
 
 
 export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
-    const pageRequest = async (query: UserPageQuery) => {
-        query['profileId'] = context.profile.value.profile_id
-        query['startDate'] = context.dateRange.value[0]
-        query['endDate'] = context.dateRange.value[1]
-        return await api.GetList(query)
-    }
-    const editRequest = async ({form, row}: EditReq) => {
-        form.id = row.id
-        return await api.UpdateObj(form)
-    }
-    const delRequest = async ({row}: DelReq) => {
-        return await api.DelObj(row.id)
-    }
-    const addRequest = async ({form}: AddReq) => {
-        return await api.AddObj(form)
-    }
+  const pageRequest = async (query: UserPageQuery) => {
+    const params = parseQueryParams(context.value)
+    XEUtils.assign(query, params)
+    return await api.GetList(query)
+  }
+  const editRequest = async ({form, row}: EditReq) => {
+    form.id = row.id
+    return await api.UpdateObj(form)
+  }
+  const delRequest = async ({row}: DelReq) => {
+    return await api.DelObj(row.id)
+  }
+  const addRequest = async ({form}: AddReq) => {
+    return await api.AddObj(form)
+  }
 
-    //权限判定
-    const hasPermissions = inject('$hasPermissions')
+  //权限判定
+  const hasPermissions = inject('$hasPermissions')
 
-    return {
-        crudOptions: {
-            table: {
-                height: 800
-            },
-            container: {
-                fixedHeight: false
-            },
-            actionbar: {
-                show: true,
-                buttons: {
-                    add: {
-                        show: false
-                    },
-                }
-            },
-            search: {
-                show: false
-            },
-            toolbar: {
-                buttons: {
-                    search: {
-                        show: true
-                    },
-                    compact: {
-                        show: false
-                    }
-                }
-            },
-            request: {
-                pageRequest,
-                addRequest,
-                editRequest,
-                delRequest,
-            },
-            rowHandle: {
-                fixed: 'right',
-                width: 80,
-                buttons: {
-                    view: {
-                        show: false,
-                    },
-                    edit: {
-                        iconRight: 'Edit',
-                        type: 'text',
-                        text: null
-                        // show: hasPermissions('dictionary:Update'),
-                    },
-                    remove: {
-                        iconRight: 'Delete',
-                        type: 'text',
-                        text: null
-                        // show: hasPermissions('dictionary:Delete'),
-                    },
-                },
-            },
-            columns: {
-                id: {
-                    title: 'ID',
-                    column: {
-                        show: false
-                    },
-                    form: {
-                        show: false
-                    }
-                },
-                keywordText: {
-                    title: '关键词',
-                    column: {
-                        width: '200px',
-                        fixed: 'left',
-                        align: 'center'
-                    },
-                    search: {
-                        show: true,
-                        component: {
-                            props: {
-                                clearable: true
-                            }
-                        }
-                    },
-                },
-                state: {
-                    title: '状态',
-                    column: {
-                        width: '90px',
-                        align: 'center'
-                    },
-                    type: 'dict-select',
-                    search: {
-                        show: true
-                    },
-                    dict: dict({
-                        data: [
-                            {value: 'PAUSED', label: '已暂停', color: 'warning'},
-                            {value: 'ENABLED', label: '投放中', color: 'success'},
-                        ]
-                    })
-                },
-                campaignName: {
-                    title: '广告活动名称',
-                    column: {
-                        width: '200px',
-                        fixed: 'left',
-                        align: 'center'
-                    },
-                    search: {
-                        show: true,
-                        component: {
-                            props: {
-                                clearable: true
-                            }
-                        }
-                    },
-                    form: {
-                        rules: [{required: true, message: '必填项'}]
-                    }
-                },
-                adGroupName: {
-                    title: '广告组名称',
-                },
-                suggestedBudget: {
-                    title: '建议竞价',
-                    form: {
-                        show: false
-                    }
-                },
-                bid: {title: '出价'},
-                '标签': {},
-                Impression: {
-                    title: '曝光量'
-                },
-                '搜索结果顶部展示份额': {},
-                Click: {
-                    title: '点击量'
-                },
-                CTR: {
-                    title: '点击率'
-                },
-                Spend: {
-                    title: '花费'
-                },
-                CPC: {title: '点击成本'},
-                TotalPurchases: {title: '订单数'},
-                TotalSales: {title: '销售额'},
-                TotalUnitOrdered: {title: '销量'},
-                PurchasesRate: {title: '转化率'},
-                ACOS: {title: 'ACOS'},
-                ROAS: {title: 'ROAS'},
-                CPA: {title: '订单成本'},
-                ...BaseColumn
-            }
+  return {
+    crudOptions: {
+      table: {
+        height: 800
+      },
+      container: {
+        fixedHeight: false
+      },
+      actionbar: {
+        show: true,
+        buttons: {
+          add: {
+            show: false
+          },
+        }
+      },
+      search: {
+        show: false
+      },
+      toolbar: {
+        buttons: {
+          search: {
+            show: true
+          },
+          compact: {
+            show: false
+          }
         }
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest,
+      },
+      rowHandle: {
+        fixed: 'right',
+        width: 80,
+        buttons: {
+          view: {
+            show: false,
+          },
+          edit: {
+            iconRight: 'Edit',
+            type: 'text',
+            text: null
+            // show: hasPermissions('dictionary:Update'),
+          },
+          remove: {
+            iconRight: 'Delete',
+            type: 'text',
+            text: null
+            // show: hasPermissions('dictionary:Delete'),
+          },
+        },
+      },
+      columns: {
+        id: {
+          title: 'ID',
+          column: {
+            show: false
+          },
+          form: {
+            show: false
+          }
+        },
+        keywordText: {
+          title: '关键词',
+          column: {
+            width: '200px',
+            fixed: 'left',
+            align: 'center'
+          },
+          search: {
+            show: true,
+            component: {
+              props: {
+                clearable: true
+              }
+            }
+          },
+        },
+        state: {
+          title: '状态',
+          column: {
+            width: '90px',
+            align: 'center'
+          },
+          type: 'dict-select',
+          search: {
+            show: true
+          },
+          dict: dict({
+            data: [
+              {value: 'PAUSED', label: '已暂停', color: 'warning'},
+              {value: 'ENABLED', label: '投放中', color: 'success'},
+            ]
+          })
+        },
+        campaignName: {
+          title: '广告活动名称',
+          column: {
+            width: '200px',
+            fixed: 'left',
+            align: 'center'
+          },
+          search: {
+            show: true,
+            component: {
+              props: {
+                clearable: true
+              }
+            }
+          },
+          form: {
+            rules: [{required: true, message: '必填项'}]
+          }
+        },
+        adGroupName: {
+          title: '广告组名称',
+        },
+        suggestedBudget: {
+          title: '建议竞价',
+          form: {
+            show: false
+          }
+        },
+        bid: {title: '出价'},
+        '标签': {},
+        Impression: {
+          title: '曝光量'
+        },
+        '搜索结果顶部展示份额': {},
+        Click: {
+          title: '点击量'
+        },
+        CTR: {
+          title: '点击率'
+        },
+        Spend: {
+          title: '花费'
+        },
+        CPC: {title: '点击成本'},
+        TotalPurchases: {title: '订单数'},
+        TotalSales: {title: '销售额'},
+        TotalUnitOrdered: {title: '销量'},
+        PurchasesRate: {title: '转化率'},
+        ACOS: {title: 'ACOS'},
+        ROAS: {title: 'ROAS'},
+        CPA: {title: '订单成本'},
+        ...BaseColumn
+      }
     }
+  }
 }

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

@@ -4,7 +4,12 @@
       <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'" :fetchCard="getCardData" :fetchLine="getLineData"></DataTendencyChart>
+            <DataTendencyChart
+                v-if="tabActiveName === 'dataTendency'"
+                :query="queryParams"
+                :fetchCard="getCardData"
+                :fetchLine="getLineData">
+            </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct">
             <AdStructChart v-if="tabActiveName === 'adStruct'"/>
@@ -17,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted, inject} from 'vue'
+import {ref, onMounted, inject, watch} from 'vue'
 import {useFs, FsPage} from '@fast-crud/fast-crud'
 import {createCrudOptions} from './crud'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
@@ -33,11 +38,20 @@ const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const {dateRange} = storeToRefs(publicData)
 const {profile} = storeToRefs(shopInfo)
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {profile, dateRange}})
+const queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange
+})
+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
 
 onMounted(async () => {
   crudExpose.doRefresh()
 })
+
+watch(queryParams, async () => {
+  crudExpose.doRefresh()
+}, { deep: true })
+
 </script>
 
 <style lang="scss">

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

@@ -1,14 +1,14 @@
 import * as api from './api'
-import {dict, AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
+import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, 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'
+import XEUtils from 'xe-utils'
 
 export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery) => {
-    query['profileId'] = context['profileId']
-    query['startDate'] = context['start']
-    query['endDate'] = context['end']
+    const params = parseQueryParams(context.value)
+    XEUtils.assign(query, params)
     return await api.GetList(query)
   }
   const editRequest = async ({form, row}: EditReq) => {

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

@@ -4,7 +4,12 @@
       <template #header-middle>
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card" @tab-change="changeTab">
           <el-tab-pane label="数据趋势" name="dataTendency">
-            <DataTendencyChart v-if="tabActiveName === 'dataTendency'" :fetchCard="getCardData" :fetchLine="getLineData"></DataTendencyChart>
+            <DataTendencyChart
+                v-if="tabActiveName === 'dataTendency'"
+                :query="queryParams"
+                :fetchCard="getCardData"
+                :fetchLine="getLineData">
+            </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct" :lazy="true">
             <AdStructChart ref="adStructChartRef"/>
@@ -29,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import {inject, nextTick, onMounted, ref} from 'vue'
+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'
@@ -37,13 +42,20 @@ import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency
 import {useShopInfo} from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
 import {getCardData, getLineData} from '/@/views/adManage/sp/campaigns/api'
+import {usePublicData} from '/@/stores/publicData'
+import {storeToRefs} from 'pinia'
+
 
 const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
-const dateRange = inject('dateRange')
-const start = dateRange.value[0]
-const end = dateRange.value[1]
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {profileId: shopInfo.profile.profile_id, start: start, end: end}})
+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()
@@ -76,6 +88,10 @@ const jumpGroup = (row: any) => {
   })
 }
 
+watch(queryParams, async () => {
+  crudExpose.doRefresh()
+}, { deep: true })
+
 </script>
 
 <style lang="scss">

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

@@ -1,178 +1,178 @@
 import * as api from './api'
-import {dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet} from '@fast-crud/fast-crud'
+import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
 import {inject} from 'vue'
 import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
-import {dynBidStrategyEnum} from '/@/views/adManage/utils/enum.js'
+import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
+import XEUtils from 'xe-utils'
 
 
 export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
-    const pageRequest = async (query: UserPageQuery) => {
-        query['profileId'] = context['profileId']
-        query['startDate'] = context['start']
-        query['endDate'] = context['end']
-        return await api.GetList(query)
-    }
-    const editRequest = async ({form, row}: EditReq) => {
-        form.id = row.id
-        return await api.UpdateObj(form)
-    }
-    const delRequest = async ({row}: DelReq) => {
-        return await api.DelObj(row.id)
-    }
-    const addRequest = async ({form}: AddReq) => {
-        return await api.AddObj(form)
-    }
+  const pageRequest = async (query: UserPageQuery) => {
+    const params = parseQueryParams(context.value)
+    XEUtils.assign(query, params)
+    return await api.GetList(query)
+  }
+  const editRequest = async ({form, row}: EditReq) => {
+    form.id = row.id
+    return await api.UpdateObj(form)
+  }
+  const delRequest = async ({row}: DelReq) => {
+    return await api.DelObj(row.id)
+  }
+  const addRequest = async ({form}: AddReq) => {
+    return await api.AddObj(form)
+  }
 
-    //权限判定
-    const hasPermissions = inject('$hasPermissions')
+  //权限判定
+  const hasPermissions = inject('$hasPermissions')
 
-    return {
-        crudOptions: {
-            table: {
-                height: 800
-            },
-            container: {
-                fixedHeight: false
-            },
-            actionbar: {
-                show: true,
-                buttons: {
-                    add: {
-                        show: false
-                    },
-                }
-            },
-            search: {
-                show: false
-            },
-            toolbar: {
-                buttons: {
-                    search: {
-                        show: true
-                    },
-                    compact: {
-                        show: false
-                    }
-                }
-            },
-            request: {
-                pageRequest,
-                addRequest,
-                editRequest,
-                delRequest,
-            },
-            rowHandle: {
-                fixed: 'right',
-                width: 80,
-                buttons: {
-                    view: {
-                        show: false,
-                    },
-                    edit: {
-                        iconRight: 'Edit',
-                        type: 'text',
-                        text: null
-                        // show: hasPermissions('dictionary:Update'),
-                    },
-                    remove: {
-                        iconRight: 'Delete',
-                        type: 'text',
-                        text: null
-                        // show: hasPermissions('dictionary:Delete'),
-                    },
-                },
-            },
-            columns: {
-                id: {
-                    title: 'ID',
-                    column: {
-                        show: false
-                    },
-                    form: {
-                        show: false
-                    }
-                },
-                '商品和分类': {title: '商品和分类'},
-                state: {
-                    title: '状态',
-                    column: {
-                        width: '90px',
-                        align: 'center'
-                    },
-                    type: 'dict-select',
-                    search: {
-                        show: true
-                    },
-                    dict: dict({
-                        data: [
-                            {value: 'PAUSED', label: '已暂停', color: 'warning'},
-                            {value: 'ENABLED', label: '投放中', color: 'success'},
-                        ]
-                    })
-                },
-                campaignName: {
-                    title: '广告活动名称',
-                    column: {
-                        width: '200px',
-                        align: 'center',
-                        fixed: 'left'
-                    },
-                    search: {
-                        show: true,
-                        component: {
-                            props: {
-                                clearable: true
-                            }
-                        }
-                    },
-                    form: {
-                        rules: [{required: true, message: '必填项'}]
-                    }
-                },
-                adGroupName: {
-                    title: '广告组名称',
-                    column: {
-                        align: 'center',
-                    },
-                },
-                suggestedBudget: {
-                    title: '建议竞价',
-                    column: {
-                        align: 'center',
-                    },
-                },
-                bid: {
-                    title: '出价',
-                    column: {
-                        align: 'center',
-                    },
-                },
-                '标签': {},
-                Impression: {
-                    title: '曝光量',
-                    column: {
-                        align: 'center',
-                    },
-                },
-                '搜索结果顶部展示份额': {},
-                Click: {
-                    title: '点击量',
-                    column: {
-                        align: 'center',
-                    },
-                },
-                CTR: {title: '点击率'},
-                Spend: {title: '花费'},
-                CPC: {title: '点击成本'},
-                TotalPurchases: {title: '订单数'},
-                TotalSales: {title: '销售额'},
-                TotalUnitOrdered: {title: '销量'},
-                PurchasesRate: {title: '转化率'},
-                ACOS: {title: 'ACOS'},
-                ROAS: {title: 'ROAS'},
-                CPA: {title: '订单成本'},
-                ...BaseColumn
-            }
+  return {
+    crudOptions: {
+      table: {
+        height: 800
+      },
+      container: {
+        fixedHeight: false
+      },
+      actionbar: {
+        show: true,
+        buttons: {
+          add: {
+            show: false
+          },
+        }
+      },
+      search: {
+        show: false
+      },
+      toolbar: {
+        buttons: {
+          search: {
+            show: true
+          },
+          compact: {
+            show: false
+          }
         }
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest,
+      },
+      rowHandle: {
+        fixed: 'right',
+        width: 80,
+        buttons: {
+          view: {
+            show: false,
+          },
+          edit: {
+            iconRight: 'Edit',
+            type: 'text',
+            text: null
+            // show: hasPermissions('dictionary:Update'),
+          },
+          remove: {
+            iconRight: 'Delete',
+            type: 'text',
+            text: null
+            // show: hasPermissions('dictionary:Delete'),
+          },
+        },
+      },
+      columns: {
+        id: {
+          title: 'ID',
+          column: {
+            show: false
+          },
+          form: {
+            show: false
+          }
+        },
+        '商品和分类': {title: '商品和分类'},
+        state: {
+          title: '状态',
+          column: {
+            width: '90px',
+            align: 'center'
+          },
+          type: 'dict-select',
+          search: {
+            show: true
+          },
+          dict: dict({
+            data: [
+              {value: 'PAUSED', label: '已暂停', color: 'warning'},
+              {value: 'ENABLED', label: '投放中', color: 'success'},
+            ]
+          })
+        },
+        campaignName: {
+          title: '广告活动名称',
+          column: {
+            width: '200px',
+            align: 'center',
+            fixed: 'left'
+          },
+          search: {
+            show: true,
+            component: {
+              props: {
+                clearable: true
+              }
+            }
+          },
+          form: {
+            rules: [{required: true, message: '必填项'}]
+          }
+        },
+        adGroupName: {
+          title: '广告组名称',
+          column: {
+            align: 'center',
+          },
+        },
+        suggestedBudget: {
+          title: '建议竞价',
+          column: {
+            align: 'center',
+          },
+        },
+        bid: {
+          title: '出价',
+          column: {
+            align: 'center',
+          },
+        },
+        '标签': {},
+        Impression: {
+          title: '曝光量',
+          column: {
+            align: 'center',
+          },
+        },
+        '搜索结果顶部展示份额': {},
+        Click: {
+          title: '点击量',
+          column: {
+            align: 'center',
+          },
+        },
+        CTR: {title: '点击率'},
+        Spend: {title: '花费'},
+        CPC: {title: '点击成本'},
+        TotalPurchases: {title: '订单数'},
+        TotalSales: {title: '销售额'},
+        TotalUnitOrdered: {title: '销量'},
+        PurchasesRate: {title: '转化率'},
+        ACOS: {title: 'ACOS'},
+        ROAS: {title: 'ROAS'},
+        CPA: {title: '订单成本'},
+        ...BaseColumn
+      }
     }
+  }
 }

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

@@ -4,7 +4,12 @@
       <template #header-middle>
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card" @tab-change="changeTab">
           <el-tab-pane label="数据趋势" name="dataTendency">
-            <DataTendencyChart v-if="tabActiveName === 'dataTendency'" :fetchCard="getCardData" :fetchLine="getLineData"></DataTendencyChart>
+            <DataTendencyChart
+                :query="queryParams"
+                v-if="tabActiveName === 'dataTendency'"
+                :fetchCard="getCardData"
+                :fetchLine="getLineData">
+            </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct" :lazy="true">
             <AdStructChart ref="adStructChartRef"/>
@@ -17,8 +22,8 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted, nextTick, inject} from 'vue'
-import {useFs, FsPage} from '@fast-crud/fast-crud'
+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/sp/chartComponents/dataTendency.vue'
@@ -34,8 +39,12 @@ const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const {dateRange} = storeToRefs(publicData)
 const {profile} = storeToRefs(shopInfo)
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {profile, dateRange}})
+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()
@@ -59,6 +68,11 @@ const changeTab = () => {
   })
 }
 defineExpose({resizeTabChart})
+
+watch(queryParams, async () => {
+  crudExpose.doRefresh()
+}, {deep: true})
+
 </script>
 
 <style lang="scss">