Naive UI 之 BasicForm NDatePicker

使用列表展示数据时经常会有很多的过滤项，其中时间过滤是最常见的

<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>

const schemas: FormSchema[] = [
    {
      field: 'term',
      component: 'NInput',
      label: '名称',
      componentProps: {
        placeholder: '请输入关键词',
      },
    },
    {
      field: 'documentStatus',
      component: 'NSelect',
      label: '状态：',
      componentProps: {
        placeholder: '请选择',
        options: [
          {
            label: '已完成',
            value: 0,
          },
          {
            label: '未完成',
            value: 1,
          },
        ],
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'date',
      component: 'NDatePicker',
      label: '时间',
      giProps: { span: 2 },
      componentProps: {
        placeholder: '请选择',
        type: 'daterange',
        format: 'yyyy-MM-dd',
        valueFormat: 'yyyy-MM-dd',
        onUpdateValue: (value, formattedValue) => {
          if (formattedValue) {
            params.value.startTime = formattedValue[0];
            params.value.endTime = formattedValue[1];
          }
          console.log(value, formattedValue);
        },
      },
    },
  ];

const params = ref({});
function handleSubmit(values: Recordable) {
    console.log(values);
    params.value = Object.assign(params.value, values);
    reloadTable();
  }

function handleReset(values: Recordable) {
    console.log('reset',values);
    params.value.startTime = null;
    params.value.endTime = null;
  }