vben5 admin ant design vue如何使用时间范围组件RangePicker

本文参考：https://pusdn-dev.feishu.cn/wiki/VF4hwBAUliTE6TkUPKrcBNcZn9f?from=from_copylink

由PUSDN整理发行，收录时请保留PUSDN。

前端组件专题

年月日时间范围表单回显RangePicker

推荐使用多个字段存储，不推荐用英文逗号拼接时间，便于查询等操作。

方式一：英文逗号分隔string接收

表单页示例modal.vue

数据库:pgz_range，实体：pgzRange

import dayjs from 'dayjs';
// ......
if (isUpdate.value && id) {
  const record = await demoInfo(id);
  record.pgzCheckboxArr = record.pgzCheckbox ? record.pgzCheckbox.split(',') : [];
  if (record.pgzRange) {
    const [startTime, endTime] = record.pgzRange.split(',');
    record.pgzRange = [dayjs(startTime), dayjs(endTime)];
  }
  await formApi.setValues(record);
}
// ......
 const data = cloneDeep(await formApi.getValues());
data.pgzCheckbox = data.pgzCheckboxArr.join(',');
 if (data.pgzRange && data.pgzRange.length === 2) {
   const [startTime, endTime] = data.pgzRange;
   data.pgzRange = `${startTime.format('YYYY-MM-DD HH:mm:ss')},${endTime.format('YYYY-MM-DD HH:mm:ss')}`;
 }

 await (isUpdate.value ? demoUpdate(data) : demoAdd(data));
 
 // data.ts
 {
  label: '时间范围', 
  fieldName: 'pgzRange',
  component: 'RangePicker',
},

查询列表示例index.vue

方式二：两个字段分别处理

例如：实体类和数据库有两个字段。startTime，endTime。

modal.vue｜表单页示例

const [BasicForm, formApi] = useVbenForm({ // .... fieldMappingTime: [ [ 'planDateRange',// 此字段前端虚拟，实体和数据库不存在 ['startTime', 'endTime'], ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'], ], ],

回显

index.vue｜查询列表示例