ant-vue-admin/src/views/event/activity/data.ts

import { FormProps, BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Form/index';
import { adapt } from '/@/utils/adapt';
import moment from 'moment';
import { Tinymce } from '/@/components/Tinymce/index';
import { h } from 'vue';
import UploadFile from '/@/views/general/config/customComponents/UploadFile.vue';
import CustomInput from './customCom/CustomInput.vue';

const adaptWidth = adapt();

export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    editComponentProps: {
      prefix: '$',
    },
    width: 100,
    sorter: true,
  },
  {
    title: '活动名称',
    dataIndex: 'name',
    width: 130,
    sorter: true,
  },
  {
    title: '开始日期',
    dataIndex: 'starttime',
    width: 200,
    customRender({ record }) {
      return moment(record.starttime * 1000).format('YYYY-MM-DD HH:mm:ss');
    },
    sorter: true,
  },
  {
    title: '地点',
    dataIndex: 'place',
    width: 130,
    sorter: true,
  },
  {
    title: '计划人数',
    dataIndex: 'plan',
    width: 130,
    sorter: true,
  },
  {
    title: '报名人数',
    dataIndex: 'apply',
    width: 130,
    sorter: true,
  },
  {
    title: '参加人数',
    dataIndex: 'actual',
    width: 130,
    sorter: true,
  },
  {
    title: '活动状态',
    dataIndex: 'status',
    width: 130,
    customRender({ record }) {
      const options = ['筹备', '完成', '取消'];
      return options[record.status];
    },
    sorter: true,
  },
  {
    title: '操作员',
    dataIndex: 'manager',
    width: 130,
    sorter: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 160,
    sorter: true,
  },
  {
    title: '创建日期',
    dataIndex: 'createtime',
    width: 200,
    customRender: ({ record }) => {
      const createtime = record.createtime * 1000;
      return moment(createtime).format('YYYY-MM-DD HH:mm:ss');
    },
    sorter: true,
  },
];

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
    schemas: [
      {
        field: `id`,
        label: `ID`,
        component: 'Input',
        componentProps: {
          placeholder: 'ID',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `name`,
        label: `活动名称`,
        component: 'Input',
        componentProps: {
          placeholder: '活动名称',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `starttime`,
        label: `开始日期`,
        component: 'DatePicker',
        componentProps: {
          placeholder: '开始日期',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `place`,
        label: `地点`,
        component: 'Input',
        componentProps: {
          placeholder: '地点',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `plan`,
        label: `计划人数`,
        component: 'Input',
        componentProps: {
          placeholder: '计划人数',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `apply`,
        label: `报名人数`,
        component: 'Input',
        componentProps: {
          placeholder: '报名人数',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `actual`,
        label: `参加人数`,
        component: 'Input',
        componentProps: {
          placeholder: '参加人数',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `status`,
        label: `活动状态`,
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '筹备',
              value: 0,
            },
            {
              label: '完成',
              value: 1,
            },
            {
              label: '取消',
              value: 2,
            },
          ],
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `manager`,
        label: `操作员`,
        component: 'Input',
        componentProps: {
          placeholder: '操作员',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `remark`,
        label: `备注`,
        component: 'Input',
        componentProps: {
          placeholder: '备注',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `createtime`,
        label: `创建日期`,
        component: 'DatePicker',
        componentProps: {
          placeholder: '创建日期',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
    ],
  };
}

// =================popup================================
export const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: '活动名称',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '活动名称',
    },
    required: true,
  },
  {
    field: 'starttime',
    component: 'DatePicker',
    label: '开始时间',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '开始时间',
      showTime: true,
    },
    required: true,
  },
  {
    field: 'endtime',
    component: 'DatePicker',
    label: '结束时间',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '结束时间',
      showTime: true,
    },
    required: true,
  },
  {
    field: 'place',
    component: 'Input',
    label: '地点',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '地点',
    },
    required: true,
  },
  {
    field: 'plan',
    component: 'Input',
    label: '计划参加人员',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.plan,
        placeholder: '计划参加人员',
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'apply',
    component: 'Input',
    label: '报名参加人员',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.apply,
        placeholder: '报名参加人员',
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'actual',
    component: 'Input',
    label: '实际参加人员',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.actual,
        placeholder: '实际参加人员',
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'content',
    component: 'InputTextArea',
    label: '活动内容',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'hire',
    component: 'InputTextArea',
    label: '集体租赁',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '集体租赁',
    },
    required: true,
  },
  {
    field: 'car',
    component: 'CarArrayCom',
    label: '车辆登记',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    defaultValue: [],
    componentProps: ({ formModel }) => {
      return {
        placeholder: '车辆登记',
        value: formModel.car,
        onChange: () => {},
      };
    },
  },
  {
    field: 'status',
    component: 'Select',
    label: '活动状态',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '活动状态',
      options: [
        {
          label: '筹备',
          value: 0,
        },
        {
          label: '完成',
          value: 1,
        },
        {
          label: '取消',
          value: 2,
        },
      ],
    },
    required: true,
  },
  {
    field: 'attachment',
    component: 'Select',
    label: '附件',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(UploadFile, {
        value: model.attachment,
        type: 'files',
        style: { width: '100%' },
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'remark',
    component: 'Input',
    label: '备注',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '备注',
    },
  },
];