vue3 vben table form 使用

搜索：

const typeOps = [
  {
    label: 'a',
    value: '1',
  },
  {
    label: 'b',
    value: '2',
  },
];

{
    field: 'displaySystem',
    label: '系统',
    component: 'Select',
    componentProps: {
      options: typeOps ,
      showSearch: true,
      optionFilterProp: 'label',
    },
    colProps: {
      span: 5,
    },
},
{
    field: 'deptId',
    label: '部门',
    component: 'ApiSelect',
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getSelectDept,
        labelField: 'deptName',
        valueField: 'deptId',
        onChange: (e, v) => {
          const { updateSchema } = formActionType;
          formModel.city = undefined;
          updateSchema({
            field: 'systemUsersId',
            componentProps: {
              options: [],
            },
          });
          console.log('ApiSelect====>:', e, v);
        },
      };
    },
    colProps: {
      span: 12,
    },
    required: true,
    dynamicDisabled: ({ values }) => {
      return !!values.id;
    },
},
{
    field: 'time',
    label: '时间',
    component: 'RangePicker',
    componentProps: {
      // format: 'YYYY-MM-DD HH:mm:ss',
      placeholder: ['开始时间', '结束时间'],
      showTime: { format: 'YYYY-MM-DD HH:mm:ss' },
    },
},

//便捷按钮
import dayjs, { Dayjs } from 'dayjs'
type RangeValue = [Dayjs, Dayjs]
{
    field: 'payTimeBetween',
    component: 'RangePicker',
    label: '时间',
    componentProps: {
      // format: 'YYYY-MM-DD HH:mm:ss',
      placeholder: ['开始日期', '结束日期'],
      showTime: { format: 'YYYY-MM-DD HH:mm:ss' },
      ranges: {
        昨天: [
          dayjs(dayjs(new Date().getTime() - 3600 * 1000 * 24).format('YYYY-MM-DD') + ' 00:00:00'),
          dayjs(dayjs(new Date().getTime() - 3600 * 1000 * 24).format('YYYY-MM-DD') + ' 23:59:59')
        ] as RangeValue
      }
    }
}

表格：

import { Image} from 'ant-design-vue';
 {
    title: '图片',
    dataIndex: 'photoUrl',
    align: 'center',
    customRender: ({ record }) => {
      if (!record.photoUrl) return;
      return h(Image, { src: record.photoUrl, width: '50px' });
    },
},

import { h } from 'vue';
import { Image, Switch } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { updateAdvertisement } from '../../../../api/adNews/advertisement';
{
    title: '状态',
    dataIndex: 'upFlag',
    align: 'center',
    customRender: ({ record }) => {
      console.log(record.upFlag);
      return h(Switch, {
        checked: record.upFlag == '1',
        checkedChildren: '上架',
        unCheckedChildren: '下架',
        onChange(checked: boolean) {
          const newStatus = checked ? '1' : '0';
          const { createMessage } = useMessage();
          updateAdvertisement({ ...record, upFlag: newStatus })
            .then(() => {
              record.upFlag = newStatus;
              createMessage.success(`状态修改成功`);
            })
            .catch(() => {})
            .finally(() => {});
        },
      });
    },
},

const statusOps = [
  {
    label: 'a',
    value: '0',
  },
  {
    label: 'b',
    value: '1',
  },
  {
    label: 'c',
    value: '2',
  },
];
const statusColorOps = { 1: 'red', 2: 'green', 0: '#f50' };
{
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    customRender: ({ record }) => {
      const obj = statusOps.find((item) => item.value == record.status);
      return h(Tag, { color: statusColorOps[record.status] }, () => obj?.label);
    },
},

import dayjs, { Dayjs } from 'dayjs'
{
    title: '时间',
    dataIndex: 'payTime',
    align: 'center',
    customRender: ({ record }) => {
      return h('div', {}, record.payTime ? dayjs(new Date(record.payTime)).format('YYYY-MM-DD HH:mm:ss') : '')
    }
  },

表单：

 {
    field: 'id',
    label: '主键',
    component: 'Input',
    required: false,
    show: false,
  },
{
    field: 'sortNo',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },

//
const typeOps = [
  {
    label: 'a',
    value: '1',
  },
  {
    label: 'b',
    value: '2',
  },
];
 {
    field: 'type',
    label: '类型',
    component: 'Select',
    componentProps: {
      options: typeOps,
    },
    // required: true,
    rules: [{ required: true, message: '请' }],
    ifShow: ({ values }) => {
      return !!values.type;
    },
  },
//多选下拉框
  {
    field: 'displaySystem',
    label: '系统',
    component: 'Select',
    componentProps: {
      options: displaySystemOps,
      mode: 'multiple',
      showArrow: true,
      showSearch: true,
      optionFilterProp: 'label',
    },
    required: true,
    dynamicDisabled: ({ values }) => {
      return !!values.id;
    },
  },
//
import { Switch } from 'ant-design-vue';
{
    field: 'upFlag',
    label: '状态',
    component: 'Switch',
    defaultValue: '0',
    componentProps: {
      unCheckedValue: '0',
      checkedValue: '1',
      checkedChildren: '上架',
      unCheckedChildren: '下架',
    },
    // required: true,
  },

//年月日时间点
{
    field: 'enableTime',
    label: '活动开始时间',
    component: 'DatePicker',
    componentProps: {
      showTime: { format: 'YYYY-MM-DD HH:mm:ss' },
    },
    required: true,
  },

{
    field: 'pass',
    label: '结果',
    component: 'RadioGroup',
    required: true,
    colProps: {
      span: 8,
    },
    componentProps: {
      options: [
        {
          label: '通过',
          value: true,
        },
        {
          label: '不通过',
          value: false,
        },
      ],
    },
    defaultValue: true,
    ifShow: ({ values }) => {
      return values.applyStatus == 6;
    },
  },
{
    field: 'auditRemark',
    label: '不通过理由',
    component: 'InputTextArea',
    required: true,
    ifShow: ({ values }) => {
      return !values.pass && values.applyStatus == 6;
    },
    componentProps: {
      placeholder: '请输入不通过理由',
      // rows: 5,
      autosize: { minRows: 5 },
      showCount: true,
      maxlength: 500,
    },
    colProps: {
      span: 24,
    },
  },
{
    field: 'fileList',
    label: '图片',
    component: 'Input',
    slot: 'fileListSlot',
    rules: [
      {
        required: true,
        validator: async (rule, value) => {
          console.log(value);
          if (!(value && value[0])) {
            return Promise.reject('请上传图片');
          }
          return Promise.resolve();
        },
        trigger: 'change',
      },
    ],
  },

描述：

const statusOps = {
  '0': '下线',
  '1': '上线',
};
const statusColorOps = { '0': 'red', '1': 'green' };
{
    field: 'status',
    label: '活动状态',
    span: 1,
    render: (curVal) => {
      return h(Tag, { color: statusColorOps[curVal] }, () => statusOps[curVal]);
    },
  },

import { h } from 'vue';
  {
    field: 'color',
    label: '颜色',
    span: 1,
    render: (curVal) => {
      return h('div', {
        style: { background: curVal, width: '20px', height: '20px' },
      });
    },
    show: ({ proposalFormDetailsList }) => {
      if (proposalFormDetailsList == undefined) return false;
      if (!proposalFormDetailsList && !proposalFormDetailsList.length) return false;
      for (const item of proposalFormDetailsList) {
        if (item.insuranceName == '公众') {
          return true;
        }
      }
      return false;
    },
    span: 3,
  },

 {
    field: 'useRule',
    label: '规则',
    span: 3,
    render: (curVal) => {
      return h('div', {
        innerHTML: curVal, // 这里是要渲染的数据
      });
    },
  },

{
    field: 'url',
    label: '照片',
    render: (curVal) => {
      if (!curVal) return;
      const imageList = [] as any;
      curVal.forEach((item) => {
        imageList.push(h(Image, { src: item, style: { margin: '10px 20px', width: '50px' } }));
      });
      return h('div', {}, imageList);
    },
    span: 3,
  },