ads_web/src/views/adManage/ad-overview/monthly/crud.tsx

import * as api from './api'
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.js'
import XEUtils from 'xe-utils'

export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
  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')

  return {
    crudOptions: {
      table: {
        height: 800,
        showSummary: true,
        headerCellStyle: {
          backgroundColor: '#f6f7fa', // 直接设置背景颜色
          // border: '0.5px solid #ddd',
        },
        cellStyle:  {
          border: 'none',
          borderBottom: '0.5px solid #ddd'
        },
      },
      container: {
        fixedHeight: false
      },
      actionbar: {
        show: false,
        buttons: {
          add: {
            show: false
          },
        }
      },
      search: {
        show: false
      },
      toolbar: {
        buttons: {
          search: {
            show: true
          },
          compact: {
            show: false
          }
        }
      },
      request: {
        pageRequest,
        addRequest,
        editRequest,
        delRequest,
      },
      rowHandle: {
        show: false,
      },
      columns: {
        id: {
          title: 'ID',
          column: {
            show: false
          },
          form: {
            show: false
          }
        },
        Name: {
          title: '日期',
          column: {
            width: 100,
            align: 'left',
            fixed: 'left',
            // border: '0.5px solid #ddd',
            cellStyle: {
              border: '1px solid #ddd',
            }
          },
        },
        Spend: {
          title: '花费',
          column: {
            align: 'center',
            width: 100,
            sortable: true,
            border: '0.5px solid #ddd',

            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top"
                                content="来自亚马逊广告API，亚马逊系统会在3天内将无效点击从统计数据中删除，因此过去3天内的花费可能会有所变化">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>花费</span>
                  </span>
              )
            }
          }
        },
        TotalSales: {
          title: '销售额',
          column: {
            align: 'center',
            width: 130,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="
                      Seller类型店铺：<br />
                      销售额，来自亚马逊广告API。<br />
                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br/>出的广告商品及库存中其他商品的销售额；<br />
                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。<br />
                      <br />
                      Vendor类型店铺：<br />
                      销售额，来自亚马逊广告API。<br />
                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的销售额；<br />
                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。" raw-content>
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>销售额</span>
                  </span>
              )
            }
          }
        },
        ACOS: {
          title: 'ACOS',
          column: {
            align: 'center',
            width: 130,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="广告投入产出比，系统计算，广告花费/广告带来的销售额。">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>ACOS</span>
                  </span>
              )
            }
          }
        },
        ROAS: {
          title: 'ROAS',
          column: {
            align: 'center',
            width: 130,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="广告支出回报，系统计算，广告带来的销售额/广告花费。">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>ROAS</span>
                  </span>
              )
            }
          }
        },
        CPC: {
          title: '点击成本',
          column: {
            align: 'center',
            sortable: true,
            width: 130,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="单次点击成本，系统计算，花费/点击量">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>点击成本</span>
                  </span>
              )
            }
          }
        },
        CPA: {
          title: '订单成本',
          column: {
            align: 'center',
            sortable: true,
            width: 130,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="平均每笔订单的花费，系统计算，花费/广告订单量">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>订单成本</span>
                  </span>
              )
            }
          }
        },
        Click: {
          title: '点击量',
          column: {
            align: 'center',
            width: 130,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被点击的次数。亚马逊系统会在3天内将无效点击去除。">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>点击量</span>
                  </span>
              )
            }
          }
        },
        CTR: {
          title: '点击率',
          column: {
            align: 'center',
            width: 130,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>点击率</span>
                  </span>
              )
            }
          }
        },
        TotalPurchases: {
          title: '订单数',
          column: {
            align: 'center',
            width: 130,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="
                      Seller类型店铺：<br />
                      订单数，来自亚马逊广告API。<br />
                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除。<br />
                      <br />
                      Vendor类型店铺：<br />
                      订单数，来自亚马逊广告API。<br />
                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除" raw-content>
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>订单数</span>
                  </span>
              )
            }
          }
        },
        TotalUnitOrdered: {
          title: '销量',
          column: {
            align: 'center',
            width: 100,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="
                      Seller类型店铺：<br />
                      销售件数，来自亚马逊广告API。<br />
                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。<br />
                      <br />
                      Vendor类型店铺：<br />
                      销售件数，来自亚马逊广告API。<br />
                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。" raw-content>
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>销量</span>
                  </span>
              )
            }
          }
        },
        Impression: {
          title: '曝光量',
          column: {
            align: 'center',
            width: 130,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被展示的次数。">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>曝光量</span>
                  </span>
              )
            }
          }
        },
        PurchasesRate: {
          title: '转化率',
          column: {
            align: 'center',
            width: 130,
            sortable: true,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="广告转化率，系统计算，广告订单量/点击量*100%，展示型推广vCPM成本类型的广告活动不予计算。">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>转化率</span>
                  </span>
              )
            }
          }
        },
        CPM: {
          title: '千次曝光成本',
          column: {
            align: 'center',
            sortable: true,
            width: 150,
            renderHeader() {
              return (
                  <span>
                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
                      <span>
                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
                      </span>
                    </el-tooltip>
                    <span>千次曝光成本</span>
                  </span>
              )
            }
          }
        }
      }
    }
  }
}