Quantity-Creation-Management-System/src/views/Promotion/accManage/accTencentAd.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 {
  AdvertiserData,
  BusinessManagerData,
  AgencyData,
} from '@/types/Tables/tableData/tencentAcc'
import type {
  AdvertiserFields,
  BusinessManagerFields,
  AgencyFields,
} from '@/types/Tables/tableData/tencentAcc'

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 { reactive } from 'vue'

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

// 表格信息
interface TableInfo extends BaseTableInfo {
  advertiserTable: TableInfoItem<
    AdvertiserData,
    BaseFieldItem<AdvertiserFields>
  > // 广告主信息
  businessManagerTable: TableInfoItem<
    BusinessManagerData,
    BaseFieldItem<BusinessManagerFields>
  > // 业务经理信息
  agencyTable: TableInfoItem<AgencyData, BaseFieldItem<AgencyFields>> // 代理商信息
}

// 所有字段信息
interface AllFieldsInfo extends BaseAllFieldsInfo {
  advertiserTable: AdvertiserFields[]
  businessManagerTable: BusinessManagerFields[]
  agencyTable: AgencyFields[]
}

// 上方查询表单字段
interface AllFilterInfo extends BaseAllFilterInfo {
  advertiserTable: FilterInfo
  businessManagerTable: FilterInfo
  agencyTable: FilterInfo
}

// 固定字段
interface AllFixedFiledsInfo extends BaseAllFixedFiledsInfo {
  advertiserTable: Array<string>
  businessManagerTable: Array<string>
  agencyTable: Array<string>
}

// 操作信息
interface Operation extends Operations {
  advertiserTable: OperationItem[]
  businessManagerTable: OperationItem[]
  agencyTable: OperationItem[]
}

const { AllApi } = useRequest()

// 所有子字段信息
const AllFields: AllFieldsInfo = {
  advertiserTable: [
    { label: '账户余额', name: 'accountBalance', state: true, fixed: false },
  ],
  businessManagerTable: [
    { label: '项目', name: 'accountBalance', state: true, fixed: false },
  ],
  agencyTable: [
    { label: '代理', name: 'accountBalance', state: true, fixed: false },
  ],
}

// 广告主查询表单信息
const advertiserFilterInfo: FilterInfo = {
  accMain: {
    label: '账号主体',
    name: 'accMain',
    type: TableFilterType.Select,
    value: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '主体1', value: '1' },
      { label: '主体2', value: '2' },
    ],
  },
}

// 业务经理查询表单信息
const businessManagerFilterInfo: FilterInfo = {
  search: {
    label: '搜索',
    name: 'search',
    type: TableFilterType.Search,
    value: 'name',
    options: [{ label: '名称', value: 'name' }],
  },
}

// 代理商查询表单信息
const agencyFilterInfo: FilterInfo = {
  agencyProject: {
    label: '代理项目',
    name: 'agencyProject',
    type: TableFilterType.Select,
    value: 'name',
    options: [{ label: '名称', value: 'name' }],
  },
}

// 所有的查询表单信息
const allFilters: AllFilterInfo = {
  advertiserTable: advertiserFilterInfo,
  businessManagerTable: businessManagerFilterInfo,
  agencyTable: agencyFilterInfo,
}

// 所有需要固定的字段
const allFixedFileds: AllFixedFiledsInfo = {
  advertiserTable: ['accountName', 'action'],
  businessManagerTable: [],
  agencyTable: [],
}

// 所有的表格请求
const tableReqInfo: MenuTableReq = {
  advertiserTable: {
    url: AllApi.mockAdTTAcc,
    config: {
      params: {},
    },
  },
  businessManagerTable: {
    url: AllApi.mockAdTTAcc,
    config: {
      params: {},
    },
  },
  agencyTable: {
    url: AllApi.mockAdTTAcc,
    config: {
      params: {},
    },
  },
}

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

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

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

// 导航
const menuList: BaseMenu[] = [
  {
    name: 'advertiserTable',
    title: '广告主',
  },
  {
    name: 'businessManagerTable',
    title: '商务管家或业务单元',
  },
  {
    name: 'agencyTable',
    title: '代理商',
  },
]

// 表格名
const saveTableName = 'tencentAcc-tableInfo'

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

<template>
  <MenuTable
    :menu-default-active="menuList[0].name"
    :menu-list="menuList"
    :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>