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 {
  TableData,
  FilterInfo,
  TableInfoItem,
  BaseFieldItem,
  TableFields,
} 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 { TableFilterType } from '@/types/Tables/table'

import { useRequest } from '@/hooks/useRequest'
import { useDate } from '@/hooks/useDate'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useTable } from '@/hooks/useTable'

import Menu from '@/components/navigation/Menu.vue'
import Table from '@/components/table/Table.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 { disableDate, shortcuts } = useDate()
const { getData, saveTableInfo, getTableInfo, updateTableFields } = useTable()

// 当前菜单选中
const activeMenu = ref('account')

// 修改或新增的弹窗控制
const tableItemDialog = ref(false)

// 所有子字段信息
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: { [key: string]: any } = {
  account: AllApi.mockAdTTAcc,
  project: AllApi.mockAdTTProj,
  advertise: AllApi.mockAdTTAd,
}

// 表格信息
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,
      func: () => {
        tableItemDialog.value = true
      },
    },
    {
      label: '删除',
      type: EleBtnType.Danger,
      func: () => {
        tableItemDialog.value = true
      },
    },
  ],
  advertise: [],
  project: [],
}

// 导航
const ttAdMenu: BaseMenu[] = [
  {
    name: 'account',
    title: '账户',
  },
  {
    name: 'project',
    title: '项目',
  },
  {
    name: 'advertise',
    title: '广告',
  },
]

// 选择的日期
const selectDate = ref(shortcuts[0].value)

/**
 * @description: 保存的文件名
 * @return {*}
 */
const fileName = computed(() => {
  return `ttad-${activeMenu.value}-tableInfo`
})

/**
 * @description: 日期改变
 * @param {*} val
 * @return {*}
 */
const dateChange = (val: Array<Date>) => {
  //   emits('changeDate', val)
}

/**
 * @description: 切换菜单
 * @param {*} val 新菜单名
 * @return {*}
 */
const menuActiveChange = (val: string) => {
  activeMenu.value = val
  updateTableData()
}

/**
 * @description: 更新表格的字段信息
 * @return {*}
 */
const updateTableInfo = () => {
  let info = getTableInfo(fileName.value)

  if (info) {
    tableInfo[activeMenu.value].fields = info.fields
    tableInfo[activeMenu.value].tableSortedFields = info.tableSortedFields
  }
}

/**
 * @description: 更新表格数据
 * @return {*}
 */
const updateTableData = async () => {
  try {
    updateTableInfo()

    getData(tableReqInfo[activeMenu.value]).then((res: Array<TableData>) => {
      tableInfo[activeMenu.value].data.splice(
        0,
        tableInfo[activeMenu.value].data.length,
        ...res,
      )
      tablePaginationConfig.total = res.length
    })
  } catch (err) {
    ElMessage.error('获取数据失败')
    console.log(err)
  }
}

/**
 * @description: 更新自定义指标和表格字段
 * @param {*} newIndicator  新的指标信息
 * @param {*} newSortedTablefileds 新的表格字段信息
 * @return {*}
 */
const updateCustomIndicator = (
  newIndicator: Array<BaseFieldItem<TableFields>>,
  newSortedTablefileds: Array<TableFields>,
) => {
  updateTableFields(
    tableInfo,
    activeMenu.value,
    newIndicator,
    newSortedTablefileds,
  )
    .then(() => {
      saveTableInfo(fileName.value, tableInfo[activeMenu.value])
    })
    .catch(() => {
      ElMessage.error('更新失败')
    })
  // saveTableInfo()
}

updateTableData()
onMounted(() => {
  // let info = getTableInfo(fileName.value)
  // if (Object.keys(info).length !== 0) {
  //   Object.assign(tableInfo, info)
  // }
})
</script>

<template>
  <div class="ttAdContainer">
    <div class="ttAdHeader">
      <Menu
        :default-active="'account'"
        :menu-list="ttAdMenu"
        :menu-item-style="'margin-right:30px;'"
        mode="horizontal"
        @active-change="menuActiveChange"
      ></Menu>
      <div class="datePickerBox">
        <el-date-picker
          class="datePicker"
          v-model="selectDate"
          :disabled-date="disableDate"
          :unlink-panels="false"
          @change="dateChange"
          type="daterange"
          range-separator="至"
          start-placeholder="Start date"
          end-placeholder="End date"
          :shortcuts="shortcuts"
          :size="'small'"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="ttAdContent">
      <Table
        :pagination-config="tablePaginationConfig"
        :table-fields="tableInfo[activeMenu].fields"
        :sorted-table-fields="tableInfo[activeMenu].tableSortedFields"
        :table-data="tableInfo[activeMenu].data"
        :fixed-fields="tableInfo[activeMenu].fixedFields"
        :filters-info="tableInfo[activeMenu].filters"
        @update-custom-indicator="updateCustomIndicator"
      >
        <template #operations>
          <div>
            <el-button
              text
              :type="item.type"
              v-for="item in operations[activeMenu]"
              @click="item.func"
            >
              {{ item.label }}
            </el-button>
          </div>
        </template>
      </Table>
    </div>
    <el-dialog v-model="tableItemDialog" title="Tips" width="500">
      <span>This is a message</span>
    </el-dialog>
  </div>
</template>

<style scoped>
.ttAdContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ttAdHeader {
  width: 100%;
  border-bottom: 1px solid #e0e0e0;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ttAdContent {
  width: 100%;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  overflow: hidden;
}

.datePickerBox {
  /* width: 100px !important; */
  margin-left: auto;
  margin-right: 5%;
}
</style>