...-DPDK中文网

根据您提供的代码和错误信息，TypeError: Failed to fetch dynamically 通常与 Vue 3 中 v-model 的用法有关。在您的代码中，您使用了 v-model:value="[formState.dateStart, formState.dateEnd]"。这是不正确的，因为 v-model 不支持数组作为绑定。

在 Vue 3 中，如果要使用 v-model 来处理多个值，可以通过创建一个计算属性或方法来处理这个逻辑。以下是如何修复此问题的一种方法：

修改后的代码

<template>
  <div class="HistoricalReminder">
    <div>
      <a-form
        :model="formState"
        name="time related controls"
        v-bind="formItemLayout"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-row>
          <a-col :span="8">
            <a-form-item label="日期" name="dateRange">
              <a-range-picker
                v-bind="rangeConfig"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                v-model="[formState.dateStart, formState.dateEnd]"
                @change="onDateChange" <!-- 添加事件监听 -->
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="导入日期" name="importDateRange">
              <a-range-picker
                v-bind="rangeConfig"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                v-model="[formState.importStart, formState.importEnd]"
                @change="onImportDateChange" <!-- 添加事件监听 -->
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item style="margin-left: 40px;">
              <a-button
                class="margin-right-10"
                type="primary"
                @click.prevent="$refs.form.submit()"
              >
                查询
              </a-button>
              <a-button @click.prevent="reset()">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      :columns="columns"
      :data-source "data"
      :scroll="{ x: 'max-content' }"
      :pagination="{ /* pagination config here */ }"
      :rowClassName ="(record, index) => (index % 2 === 0 ? 'red-row' : '')" 
    ></ a-table >
  </div >
</template>

<script setup >
import { ref } from 'vue'
import { CollectionRecord } from '../../utils'

const columns = [
  {
    title: '借据号',
    dataIndex: 'loanInfoCode',
    key: 'loanInfoCode',
    width: 100,
  },
  {
    title: '合同编号',
    dataIndex: 'contractCode',
    key: 'contractCode',
    width: 150,
  },
  {
    title: '客户姓名',
    dataIndex: 'customerName',
    key: 'customerName',
    width: 150,
  },
]

const data = ref([])
const pageSize = ref(5)
const formState = ref({
  dateStart: '',
  dateEnd: '',
  importStart: '',
  importEnd: '',
})

const onDateChange = (dates) => {
   if (dates.length > 0) {
     formState.value.dateStart = dates[0];
     formState.value.dateEnd = dates[1];
   }
}

const onImportDateChange = (dates) => {
   if (dates.length > 0) {
     formState.value.importStart = dates[0];
     formState.value.importEnd = dates[1];
   }
}

const handlePageSizeChange = (current, size) => {
   console.log(`每页条数变化为:${size}`)
}

const onFinish = () => {
   const params = {
     draw:1 ,
     length：pageSize .value,
     order： [],
     searchParams：{
       custId：' A10101' , // 示例客户ID，视需要更改
       dateStart ：formState .value.dateStart，
       dateEnd ：formState .value.dateEnd，
       importStart ：formState .value.importStart，
       importEnd ：formState .value.importEnd，
     },
   }

   CollectionRecord(params)
     .then((response) => {
       data.value= response.data;
     })
     .catch((error)=> console.error(' 请求失败:', error));
}

const reset= () => {
   // 清空表单状态
   formState.value.dateStart= '';
   formState.value.dateEnd= '';
   formState.value.importStart= '';
   formState.value.importEnd= '';

   // 清空数据表内容或将其设置为初始状态 
   data.value= [];
}
</script >

<style scoped>
// 在此处添加样式（如有必要）
</style>