Quantity-Creation-Management-System/src/components/promotion/MenuTable.vue

<script setup lang="ts">
import type { BaseMenu } from '@/types/Promotion/Menu'
import type { CustomIndicatorScheme } from '@/types/Tables/table'
import type { BaseTableInfo } from '@/types/Tables/tablePageData'
import type { MenuTableReq } from '@/types/Tables/MenuTable/menuTableReq'
import type { TablePaginationProps } from '@/types/Tables/pagination'

import Menu from '../navigation/Menu.vue'
import Table from '../table/Table.vue'

import { useMenuTable } from '@/hooks/useMenuTable'
import { computed, onMounted, ref } from 'vue'
import { useDate } from '@/hooks/useDate'

import TableCustomIndicatorController from '@/utils/localStorage/tableCustomIndicatorController'
import type { Operations } from '@/types/Tables/Operations/operations'

// 自定义表格的类型
type TableType = InstanceType<typeof Table>

interface MenuTableProps {
  saveTableName: string // 保存的表格的名称，后面会拼接上每个菜单的名，这个主要用于保存自定义指标方案
  menuList: BaseMenu[] // 菜单列表
  menuDefaultActive: string // 菜单默认选中
  tableInfo: BaseTableInfo // 表格信息
  tableReqInfo: MenuTableReq // 每个菜单的数据请求格式
  tablePaginationConfig: TablePaginationProps // 表格分页配置
  operations: Operations // 表格中需要进行的操作，会被直接添加到操作列，作为按钮存在
  excludeFields?: {
    [key: string]: string[]
  } // 排除的字段
}

const { disableDate, shortcuts } = useDate()

// props
const props = withDefaults(defineProps<MenuTableProps>(), {
  excludeFields: () => ({}),
})

// 表格ref
const tableRef = ref<TableType | null>(null)

// 当前菜单选中
const activeMenu = ref(props.menuDefaultActive)

// 自定义指标保存的方案
const customIndicatorScheme = ref<Array<CustomIndicatorScheme>>([])

// 每个表格的自定义方案的IO控制器
const tableControllers: {
  [key: string]: TableCustomIndicatorController
} = {}

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

// 修改或新增的弹窗控制
const operationDialog = ref<boolean>(false)

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

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

/**
 * @description: 打开操作弹窗
 * @return {*}
 */
const openOperationDialog = () => {
  operationDialog.value = true
}

/**
 * @description: 查询表格
 * @param {*} params 请求参数
 * @return {*}
 */
const queryTable = (params: any) => {
  props.tableReqInfo[activeMenu.value].config.params = params
  updateTableData()
}

const {
  menuActiveChange,
  changeScheme,
  updateCustomIndicator,
  initData,
  updateTableData,
} = useMenuTable(
  props.saveTableName,
  fileName,
  activeMenu,
  customIndicatorScheme,
  tableControllers,
  props.tableInfo,
  props.tableReqInfo,
  props.tablePaginationConfig,
  tableRef,
  props.menuList,
)

const emits = defineEmits(['changeDate'])

onMounted(() => {
  initData()
})
</script>

<template>
  <div class="menuTableContainer">
    <div class="menuTableHeader">
      <Menu
        :default-active="'account'"
        :menu-list="menuList"
        :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'"
          :clearable="false"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="menuTableContent">
      <Table
        ref="tableRef"
        :active-menu="activeMenu"
        :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"
        :scheme-list="customIndicatorScheme"
        :exclude-export-fields="props.excludeFields[activeMenu]"
        @update-custom-indicator="updateCustomIndicator"
        @change-scheme="changeScheme"
        @query-table="queryTable"
      >
        <template #operations>
          <div>
            <el-button
              text
              :type="item.type"
              v-for="item in operations[activeMenu]"
              @click="openOperationDialog"
            >
              {{ item.label }}
            </el-button>
          </div>
        </template>
      </Table>
    </div>
    <el-dialog
      v-model="operationDialog"
      :align-center="true"
      title="Tips"
      width="500"
    >
      <slot name="operationDialog">
        <span>This is a message</span>
      </slot>
    </el-dialog>
  </div>
</template>

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

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

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

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