ant-vue-admin/src/views/bill/dues/data.ts

import { FormProps, BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Form/index';
import { adapt } from '/@/utils/adapt';
import moment from 'moment';
import { h } from 'vue';
import YearPicker from './customCom/YearPicker.vue';

const adaptWidth = adapt();

export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    editComponentProps: {
      prefix: '$',
    },
    width: 80,
    sorter: true,
  },
  {
    title: '会费年份',
    dataIndex: 'year',
    width: 90,
    sorter: true,
  },
  {
    title: '会员职务',
    dataIndex: 'duty',
    width: 130,
    customRender({ record }) {
      const options = ['会长', '副会长', '秘书长', '副秘书长', '理事', '会员'];
      return options[record.duty];
    },
    sorter: true,
  },
  {
    title: '金额',
    dataIndex: 'money',
    width: 160,
    sorter: true,
  },
  {
    title: '操作员',
    dataIndex: 'manager',
    width: 150,
    sorter: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 160,
    sorter: true,
  },
  {
    title: '创建日期',
    dataIndex: 'createtime',
    width: 160,
    customRender({ record }) {
      return moment(record.createtime * 1000).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: `year`,
        label: `会费年份`,
        component: 'Input',
        render: ({ model, field }) => {
          return h(YearPicker, {
            value: model.year,
            onChange(value) {
              model[field] = value;
            },
          });
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `duty`,
        label: `会员职务`,
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '会长',
              value: 0,
            },
            {
              label: '副会长',
              value: 1,
            },
            {
              label: '秘书长',
              value: 2,
            },
            {
              label: '副秘书长',
              value: 3,
            },
            {
              label: '理事',
              value: 4,
            },
            {
              label: '会员',
              value: 5,
            },
          ],
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `remark`,
        label: `备注`,
        component: 'Input',
        componentProps: {
          placeholder: '备注',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `money`,
        label: `金额`,
        component: 'RangeNumber',
        componentProps: {
          placeholder: '金额',
        },
        defaultValue: '',
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `createtime`,
        label: `创建日期`,
        component: 'RangePicker',
        componentProps: {
          placeholder: '创建日期',
          showTime: true,
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
    ],
  };
}

// =================popup================================
export const schemas: FormSchema[] = [
  {
    field: 'year',
    component: 'Input',
    label: '会费年份',
    labelWidth: adaptWidth.labelWidth,
    render: ({ model, field }) => {
      return h(YearPicker, {
        value: model.year,
        onChange(value) {
          model[field] = value;
        },
      });
    },
    colProps: {
      span: adaptWidth.elContainer,
    },
    required: true,
  },
  {
    field: 'duty',
    component: 'Select',
    label: '会员职务',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '会员职务',
      options: [
        {
          label: '会长',
          value: 0,
        },
        {
          label: '副会长',
          value: 1,
        },
        {
          label: '秘书长',
          value: 2,
        },
        {
          label: '副秘书长',
          value: 3,
        },
        {
          label: '理事',
          value: 4,
        },
        {
          label: '会员',
          value: 5,
        },
      ],
    },
    required: true,
  },
  {
    field: 'money',
    component: 'Input',
    label: '金额',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      type: 'number',
      placeholder: '金额',
    },
    rules: [
      {
        required: true,
        validator: async (_, value: any) => {
          let dealValue = '';
          if (value) {
            dealValue = value.replace(/\s*/g, '');
          }
          if (dealValue === '') {
            return Promise.reject('请输入金额');
          }
          if (value < 0) {
            return Promise.reject('金额不能小于0');
          }
        },
        trigger: 'blur',
      },
    ],
    required: true,
  },
  {
    field: 'remark',
    component: 'Input',
    label: '备注',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '备注',
    },
  },
];