Quantity-Creation-Management-System/src/views/Promotion/adManage/ttad.vue

<script setup lang="ts">
import { EleBtnType } from '@/types/Button/buttonType'

import type {
  OperationItem,
  Operations,
} from '@/types/Tables/Operations/operations'
import type {
  FilterInfo,
  TableInfoItem,
  BaseFieldItem,
} from '@/types/Tables/table'
import type { TablePaginationProps } from '@/types/Tables/pagination'
import type { BaseMenu } from '@/types/Promotion/Menu'
import type {
  AdmgeTTAccData,
  AdmgeTTProjData,
  AdmgeTTAdData,
} from '@/types/Tables/tableData/ttAd'
import type {
  AdmgeTTAccFileds,
  AdmgeTTProjFileds,
  AdmgeTTAdFileds,
} from '@/types/Tables/tableData/ttAd'
import type {
  BaseTableInfo,
  BaseAllFieldsInfo,
  BaseAllFilterInfo,
  BaseAllFixedFiledsInfo,
} from '@/types/Tables/tablePageData'
import type { MenuTableReq } from '@/types/Tables/MenuTable/menuTableReq'

import { TableFilterType } from '@/types/Tables/table'
import { useRequest } from '@/hooks/useRequest'
import { useDate } from '@/hooks/useDate'
import { reactive, readonly } from 'vue'

import MenuTable from '@/components/promotion/MenuTable.vue'

// 表格信息
interface TableInfo extends BaseTableInfo {
  account: TableInfoItem<AdmgeTTAccData, BaseFieldItem<AdmgeTTAccFileds>> // 账户信息
  project: TableInfoItem<AdmgeTTProjData, BaseFieldItem<AdmgeTTProjFileds>> // 项目信息
  advertise: TableInfoItem<AdmgeTTAdData, BaseFieldItem<AdmgeTTAdFileds>> // 广告信息
}

// 所有字段信息
interface AllFieldsInfo extends BaseAllFieldsInfo {
  account: AdmgeTTAccFileds[]
  project: AdmgeTTProjFileds[]
  advertise: AdmgeTTAdFileds[]
}

// 上方查询表单字段
interface AllFilterInfo extends BaseAllFilterInfo {
  account: FilterInfo
  project: FilterInfo
  advertise: FilterInfo
}

// 固定字段
interface AllFixedFiledsInfo extends BaseAllFixedFiledsInfo {
  account: Array<string>
  project: Array<string>
  advertise: Array<string>
}

// 操作信息
interface Operation extends Operations {
  account: OperationItem[]
  project: OperationItem[]
  advertise: OperationItem[]
}

const { AllApi } = useRequest()
const { shortcuts } = useDate()

// 所有子字段信息
const AllFields: AllFieldsInfo = {
  account: [
    { label: '账户余额', name: 'accountBalance', state: true, fixed: false },
    { label: '账户流动', name: 'accountFlow', state: true, fixed: false },
    { label: '账户名', name: 'accountName', state: true, fixed: true },
    { label: '账户状态', name: 'accountStatus', state: true, fixed: false },
    { label: '操作', name: 'action', state: true, fixed: true },
    {
      label: '广告账户数量',
      name: 'adAccountCount',
      state: true,
      fixed: false,
    },
    { label: '每日预算', name: 'dailyBudget', state: true, fixed: false },
    { label: '登录邮箱', name: 'loginEmail', state: true, fixed: false },
    { label: '媒体ID', name: 'mediaId', state: true, fixed: false },
  ],
  project: [
    { label: '项目', name: 'project', state: true, fixed: false },
    { label: '项目预算(元)', name: 'projectBudget', state: true, fixed: false },
    { label: '创建时间', name: 'creationTime', state: true, fixed: false },
    { label: '项目出价(元)', name: 'projectBid', state: true, fixed: false },
    {
      label: '深度转化出价(元)',
      name: 'deepConversionBid',
      state: true,
      fixed: false,
    },
    { label: '消耗', name: 'consumption', state: true, fixed: false },
    { label: '展示数', name: 'impressions', state: true, fixed: false },
    {
      label: '平均千次展示费用',
      name: 'averageCpm',
      state: true,
      fixed: false,
    },
    { label: '点击数', name: 'clicks', state: true, fixed: false },
    { label: '点击率', name: 'clickThroughRate', state: true, fixed: false },
    { label: '转化数', name: 'conversions', state: true, fixed: false },
    { label: '转化成本', name: 'conversionCost', state: true, fixed: false },
    { label: '转化率', name: 'conversionRate', state: true, fixed: false },
    { label: '深度转化数', name: 'deepConversions', state: true, fixed: false },
    {
      label: '深度转化成本',
      name: 'deepConversionCost',
      state: true,
      fixed: false,
    },
    {
      label: '深度转化率',
      name: 'deepConversionRate',
      state: true,
      fixed: false,
    },
  ],
  advertise: [
    { label: '广告', name: 'ad', state: true, fixed: false },
    { label: '广告预算(元)', name: 'adBudget', state: true, fixed: false },
    { label: '拒绝建议', name: 'rejectSuggestions', state: true, fixed: false },
    { label: '广告出价(元)', name: 'adBid', state: true, fixed: false },
    {
      label: '深度转化出价(元)',
      name: 'deepConversionBid',
      state: true,
      fixed: false,
    },
    { label: '消耗', name: 'consumption', state: true, fixed: false },
    { label: '展示数', name: 'impressions', state: true, fixed: false },
    {
      label: '平均千次展现费用',
      name: 'averageCpm',
      state: true,
      fixed: false,
    },
    { label: '点击数', name: 'clicks', state: true, fixed: false },
    { label: '点击率', name: 'clickThroughRate', state: true, fixed: false },
    { label: '转化数', name: 'conversions', state: true, fixed: false },
    { label: '转化成本', name: 'conversionCost', state: true, fixed: false },
    { label: '转化率', name: 'conversionRate', state: true, fixed: false },
    { label: '深度转化数', name: 'deepConversions', state: true, fixed: false },
    {
      label: '深度转化成本',
      name: 'deepConversionCost',
      state: true,
      fixed: false,
    },
    {
      label: '深度转化率',
      name: 'deepConversionRate',
      state: true,
      fixed: false,
    },
  ],
}

// 账户查询表单信息
const accFilterInfo: FilterInfo = {
  accMain: {
    label: '账号主体',
    name: 'accMain',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '主体1', value: '1' },
      { label: '主体2', value: '2' },
    ],
  },
  ttProject: {
    label: '创量项目',
    name: 'ttProject',
    type: TableFilterType.Select,
    value: 'A',
    options: [
      { label: '项目A', value: 'A' },
      { label: '项目B', value: 'B' },
    ],
  },
  optimizer: {
    label: '优化师',
    name: 'optimizer',
    type: TableFilterType.Select,
    value: 'jack',
    options: [
      { label: '优化师1', value: 'jack' },
      { label: '优化师2', value: 'rose' },
    ],
  },
  search: {
    label: '搜索',
    name: 'search',
    type: TableFilterType.Search,
    value: 'name',
    options: [
      { label: '名称', value: 'name' },
      { label: '备注', value: 'backup' },
    ],
  },
  product: {
    label: '产品',
    name: 'product',
    type: TableFilterType.Select,
    value: '1',
    options: [
      { label: '产品1', value: '1' },
      { label: '产品2', value: '2' },
    ],
  },
}

// 项目查询表单信息
const projectFilter: FilterInfo = {
  search: {
    label: '搜索',
    name: 'search',
    type: TableFilterType.Search,
    value: 'name',
    options: [{ label: '名称', value: 'name' }],
  },
  ttProject: {
    label: '创量项目',
    name: 'ttProject',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '产品A', value: 'A' },
      { label: '产品B', value: 'B' },
    ], // Search 类型一般不需要 options
  },
  product: {
    label: '创量产品',
    name: 'product',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '产品A', value: 'A' },
      { label: '产品B', value: 'B' },
    ],
  },
  optimizationGoal: {
    label: '优化目标',
    name: 'optimizationGoal',
    type: TableFilterType.Select,
    value: 'clicks',
    options: [
      { label: '点击量', value: 'clicks' },
      { label: '转化量', value: 'conversions' },
      { label: '展示量', value: 'impressions' },
    ],
  },
  deepOptimizationGoal: {
    label: '深度优化目标',
    name: 'deepOptimizationGoal',
    type: TableFilterType.Select,
    value: 'ROI',
    options: [
      { label: '投资回报率 (ROI)', value: 'ROI' },
      { label: '订单数', value: 'orders' },
      { label: '注册量', value: 'registrations' },
    ],
  },
  mediaAccount: {
    label: '媒体账户',
    name: 'mediaAccount',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '账户1', value: '1' },
      { label: '账户2', value: '2' },
    ],
  },
  promotionObjective: {
    label: '推广目的',
    name: 'promotionObjective',
    type: TableFilterType.Select,
    value: 'sales',
    options: [
      { label: '销售转化', value: 'sales' },
      { label: '品牌推广', value: 'branding' },
      { label: '应用安装', value: 'app_install' },
    ],
  },
  deliveryMode: {
    label: '投放模式',
    name: 'deliveryMode',
    type: TableFilterType.Select,
    value: 'automated',
    options: [
      { label: '自动投放', value: 'automated' },
      { label: '手动投放', value: 'manual' },
    ],
  },
  status: {
    label: '状态',
    name: 'status',
    type: TableFilterType.Select,
    value: 'active',
    options: [
      { label: '全部', value: 'all' },
      { label: '启用', value: 'active' },
      { label: '暂停', value: 'paused' },
      { label: '已结束', value: 'ended' },
    ],
  },
  creationTime: {
    label: '创建时间',
    name: 'creationTime',
    type: TableFilterType.Date,
    startDate: shortcuts[0].value[0],
    endDate: shortcuts[0].value[1],
    value: '',
  },
  adType: {
    label: '广告类型',
    name: 'adType',
    type: TableFilterType.Select,
    value: 'display',
    options: [
      { label: '展示广告', value: 'display' },
      { label: '视频广告', value: 'video' },
      { label: '搜索广告', value: 'search' },
    ],
  },
}

// 广告查询表单信息
const adFilterInfo: FilterInfo = {
  ttProject: {
    label: '创量项目',
    name: 'ttProject',
    type: TableFilterType.Select,
    value: 'name',
    options: [{ label: '名称', value: 'name' }],
  },
  product: {
    label: '创量产品',
    name: 'product',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '产品A', value: 'A' },
      { label: '产品B', value: 'B' },
    ],
  },
  optimizer: {
    label: '优化师',
    name: 'optimizer',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '优化师A', value: 'A' },
      { label: '优化师B', value: 'B' },
    ],
  },
  diagnosticSuggestion: {
    label: '诊断建议',
    name: 'diagnosticSuggestion',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '建议A', value: 'A' },
      { label: '建议B', value: 'B' },
    ],
  },
  strategyGroup: {
    label: '策略组',
    name: 'strategyGroup',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '组A', value: 'A' },
      { label: '组B', value: 'B' },
    ],
  },
  learningStatus: {
    label: '学习期状态',
    name: 'learningStatus',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '进行中', value: 'ongoing' },
      { label: '已完成', value: 'completed' },
    ],
  },
  mediaAssets: {
    label: '信息素材',
    name: 'mediaAssets',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '素材A', value: 'A' },
      { label: '素材B', value: 'B' },
    ],
  },
  mediaAccount: {
    label: '媒体账户',
    name: 'mediaAccount',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '账户1', value: '1' },
      { label: '账户2', value: '2' },
    ],
  },
  promotionObjective: {
    label: '推广目的',
    name: 'promotionObjective',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '销售', value: 'sales' },
      { label: '品牌推广', value: 'branding' },
    ],
  },
  deliveryMode: {
    label: '投放模式',
    name: 'deliveryMode',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '自动投放', value: 'automated' },
      { label: '手动投放', value: 'manual' },
    ],
  },
  status: {
    label: '状态',
    name: 'status',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '启用', value: 'active' },
      { label: '暂停', value: 'paused' },
    ],
  },
  creationTime: {
    label: '创建时间',
    name: 'creationTime',
    type: TableFilterType.Date,
    startDate: new Date(),
    endDate: new Date(),
    value: '',
  },
  adType: {
    label: '广告类型',
    name: 'adType',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '展示广告', value: 'display' },
      { label: '视频广告', value: 'video' },
    ],
  },
}

// 所有的查询表单信息
const allFilters: AllFilterInfo = {
  account: accFilterInfo,
  project: projectFilter,
  advertise: adFilterInfo,
}

// 所有需要固定的字段
const allFixedFileds: AllFixedFiledsInfo = {
  account: ['accountName', 'action'],
  project: [],
  advertise: [],
}

// 所有的表格请求
const tableReqInfo: MenuTableReq = {
  account: {
    url: AllApi.mockAdTTAcc,
    config: {
      params: {},
    },
  },
  project: {
    url: AllApi.mockAdTTProj,
    config: {
      params: {},
    },
  },

  advertise: {
    url: AllApi.mockAdTTAd,
    config: {
      params: {},
    },
  },
}

// 所有表格需要排除的字段信息
const allExcludeFields: {
  [key: string]: string[]
} = {
  account: ['accountBalance'],
  project: [],
  advertise: [],
}

// 表格信息
const tableInfo = reactive<TableInfo>({
  account: {
    data: [],
    fields: [
      {
        label: '基础',
        name: 'base1',
        value: [],
        children: AllFields['account'],
      },
    ],
    tableSortedFields: [],
    filters: allFilters['account'],
    fixedFields: allFixedFileds['account'],
  },
  project: {
    data: [],
    fields: [
      {
        label: '基础',
        name: 'base2',
        value: [],
        children: AllFields['project'],
      },
    ],
    tableSortedFields: [],
    filters: allFilters['project'],
    fixedFields: allFixedFileds['project'],
  },
  advertise: {
    data: [],
    fields: [
      {
        label: '基础',
        name: 'base3',
        value: [],
        children: AllFields['advertise'],
      },
    ],
    tableSortedFields: [],
    filters: allFilters['advertise'],
    fixedFields: allFixedFileds['advertise'],
  },
})

// 分页配置
const tablePaginationConfig = reactive<TablePaginationProps>({
  total: 0,
  pageSizeList: [10, 20, 40],
})

// 自定义的操作字段
const operations: Operation = {
  account: [
    {
      label: '修改',
      type: EleBtnType.Primary,
    },
    {
      label: '删除',
      type: EleBtnType.Danger,
    },
  ],
  advertise: [],
  project: [],
}

// 导航
const ttAdMenu: BaseMenu[] = [
  {
    name: 'account',
    title: '账户',
  },
  {
    name: 'project',
    title: '项目',
  },
  {
    name: 'advertise',
    title: '广告',
  },
]
// 表格名
const saveTableName = 'ttad-tableInfo'
</script>

<template>
  <MenuTable
    :menu-default-active="ttAdMenu[0].name"
    :menu-list="ttAdMenu"
    :operations="operations"
    :save-table-name="saveTableName"
    :table-info="tableInfo"
    :table-pagination-config="tablePaginationConfig"
    :table-req-info="tableReqInfo"
    :exclude-fields="allExcludeFields"
  >
    <template #operationDialog>
      <div>测试后</div>
    </template>
  </MenuTable>
</template>

<style scoped></style>