ant-vue-admin/src/views/news/news/data.ts

import { FormProps, BasicColumn } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { formatToDate } from '/@/utils/dateUtil';
import { FormSchema } from '/@/components/Form/index';
import { adapt } from '/@/utils/adapt';
import { Tinymce } from '/@/components/Tinymce/index';

const adaptWidth = adapt();

// const isDir = (type: string) => type === '0';
// const isMenu = (type: string) => type === '1';
// const isButton = (type: string) => type === '2';
export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    editComponentProps: {
      prefix: '$',
    },
    width: 100,
    sorter: true,
  },
  {
    title: '标题',
    dataIndex: 'title',
    width: 130,
    sorter: true,
  },
  {
    title: '分类',
    dataIndex: 'type',
    width: 150,
    sorter: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createtime',
    width: 200,
    customRender: ({ record }) => {
      const createtime = record.createtime;
      return formatToDate(createtime * 1000);
    },
  },
  {
    title: '更新时间',
    dataIndex: 'updatetime',
    width: 200,
    customRender: ({ record }) => {
      const updatetime = record.updatetime;
      return formatToDate(updatetime * 1000);
    },
  },
  // {
  //   title: '状态',
  //   dataIndex: 'status',
  //   width: 80,
  //   customRender: ({ record }) => {
  //     const color = record.status ? 'green' : 'red';
  //     const text = record.status ? '公告' : '新闻';
  //     return h(Tag, { color: color }, () => text);
  //   },
  //   sorter: true,
  // },
];

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
    schemas: [
      {
        field: `id`,
        label: `ID`,
        component: 'Input',
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `title`,
        label: `标题`,
        component: 'Input',
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `type`,
        label: `分类`,
        component: 'Input',
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
    ],
  };
}

// =================popup================================
export const schemas: FormSchema[] = [
  {
    field: 'title',
    component: 'Input',
    label: '标题',
    labelWidth: adaptWidth.adminLabelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    required: true,
  },
  {
    field: 'type',
    component: 'Input',
    label: '分类',
    labelWidth: adaptWidth.adminLabelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    required: true,
  },
  {
    field: 'content',
    component: 'Input',
    label: '内容',
    labelWidth: adaptWidth.adminLabelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
      });
    },
    required: true,
  },
];