IssueSupportManage/src/views/question/issue/columns.tsx

import type { TableColumn } from '@/components/core/dynamic-table';
import { stateTypeList } from './data';
import { Tag } from 'ant-design-vue';
import { DictEnum } from '@/enums/dictEnum';
import { getDictionaryByTypeName } from '@/utils/dict';
export type TableListItem = API.IssueType;
export type TableColumnItem = TableColumn<TableListItem>;

// const questionTypeList = await getDictionaryByTypeName(DictEnum.QUESTION_TYPE);

// 数据项类型
// export type ListItemType = typeof tableData[number];
// 使用TableColumn<ListItemType> 将会限制dataIndex的类型，但换来的是dataIndex有类型提示
export const baseColumns: TableColumnItem[] = [
  {
    title: '问题标题',
    align: 'center',
    dataIndex: 'title',
    // sorter: true,
    width: 150,
    resizable: true,
    formItemProps: {
      defaultValue: '',
      required: false,
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '问题描述',
    align: 'center',
    dataIndex: 'description',
    width: 150,
    ellipsis: true,
    resizable: true,
    formItemProps: {
      defaultValue: '',
      required: false,
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '功能模块',
    align: 'center',
    dataIndex: 'tags',
    width: 200,
    hideInSearch: true,
  },
  // {
  //   title: '问题属性',
  //   align: 'center',
  //   dataIndex: 'attribute',
  //   width: 150,
  //   formItemProps: {
  //     defaultValue: undefined,
  //     required: false,
  //     component: 'Select',
  //     componentProps: {
  //       options: questionTypeList,
  //     },
  //   },
  //   customRender: ({ record }) => {
  //     const label = questionTypeList?.find((e) => e.value === record.attribute)?.label;

  //     return <div>{{ label }}</div>;
  //   },
  // },
  {
    title: '问题号',
    align: 'center',
    dataIndex: 'billcode',
    width: 200,
    formItemProps: {
      defaultValue: '',
      required: false,
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '客户',
    align: 'center',
    dataIndex: 'customer',
    width: 150,
    formItemProps: {
      defaultValue: '',
      required: false,
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '产品',
    align: 'center',
    dataIndex: 'product',
    width: 150,
    hideInSearch: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '版本',
    align: 'center',
    dataIndex: 'version',
    width: 150,
    hideInSearch: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '代理商',
    align: 'center',
    dataIndex: 'agent',
    width: 150,
    formItemProps: {
      defaultValue: '',
      required: false,
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '服务号',
    align: 'center',
    dataIndex: 'serviceNumber',
    width: 150,
    hideInSearch: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '创建时间',
    align: 'center',
    width: 200,
    dataIndex: 'createTime',
    formItemProps: {
      defaultValue: '',
      required: false,
      component: 'RangePicker',
      componentProps: {
        valueFormat: 'YYYY-MM-DD',
      },
      colProps: {
        span: 6,
      },
    },
  },
  // state 问题状态
  {
    title: '问题状态',
    align: 'center',
    dataIndex: 'state',
    width: 150,
    fixed: 'right',
    formItemProps: {
      defaultValue: undefined,
      required: false,
      component: 'Select',
      componentProps: {
        options: stateTypeList,
      },
      colProps: {
        span: 6,
      },
    },
    customRender: ({ record }) => {
      const { label, color } = stateTypeList.find((e) => e.value === record.state);

      return <Tag color={color}>{label}</Tag>;
    },
  },
];