admin-web-template/src/views/subscription/list/data.ts

import type { Ref } from 'vue'
import { h } from 'vue'
import { Space, Tag } from 'ant-design-vue'
import type { BasicColumn, FormSchema } from '@/components/Table'
import { useSystemEnumStore } from '@/store/modules/systemEnum'
import { getAllProducts } from '@/api/product'
import type { Product } from '@/api/product/types'

const { getSystemEnums } = useSystemEnumStore()

let productsCache: Pick<Product, 'id' | 'productName'>[] = []
async function getCachedProducts() {
  if (productsCache.length)
    return productsCache

  try {
    return productsCache = await getAllProducts()
  }
  catch {
    return []
  }
}

export const columns: BasicColumn[] = [
  {
    title: '产品名称',
    dataIndex: 'productId',
    customRender({ value }) {
      return productsCache.find(item => item.id === value)?.productName
    },
  },
  {
    title: '推送消息类型',
    dataIndex: 'messageType',
    customRender({ value }) {
      const values = value.split(',')
      const types = getSystemEnums('eSubscribeMessageType')
      return h(
        Space,
        () => types
          .map(item => values.includes(item.value.toString()) ? item.label : null)
          .filter(Boolean)
          .map(name => h(Tag, () => name)),
      )
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
]

export const searchFormSchema: FormSchema[] = [
  {
    field: 'productId',
    label: '产品名称',
    component: 'ApiSelect',
    componentProps: {
      api: getCachedProducts,
      showSearch: true,
      fieldNames: {
        label: 'productName',
        value: 'id',
      },
    },
    colProps: {
      span: 6,
    },
  },
]

export function getFormSchema(isUpload: Ref<boolean>): FormSchema[] {
  return [
    {
      field: 'productId',
      fields: ['id'],
      label: '产品名称',
      required: true,
      component: 'ApiSelect',
      componentProps: {
        api: getCachedProducts,
        valueField: 'id',
        labelField: 'productName',
        showSearch: true,
      },
      dynamicDisabled: () => isUpload.value,
    },
    {
      field: 'messageType',
      label: '推送消息类型',
      required: true,
      component: 'Select',
      componentProps: {
        mode: 'multiple',
        options: getSystemEnums('eSubscribeMessageType'),
      },
    },
  ]
}