...-Go服务器开发

要实现点击“查询”按钮重新调用接口并在点击“重置”按钮时清空查询条件，可以按照以下步骤进行修改：

在 data 中增加两个响应式变量来保存日期范围和其他可能的表单字段。
修改 queryTable 方法以使用这些变量并发送请求。
在 reset 方法中清空这些变量。

以下是你可以参考的代码修改：

<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:value="[dateStart, dateEnd]" 
              />
            </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:value="[importDateStart, importDateEnd]"
              />
            </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="queryTable"
              >
                查询
              </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="{ 
        pageSize: pageSize,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20'],
        onShowSizeChange: handlePageSizeChange,
        showQuickJumper: true,
        showTotal: (total, range) =>
          `显示 ${range[0]}~${range[1]}条记录，共 ${total} 条记录`,
      }"
      :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 dateStart = ref(null)
const dateEnd = ref(null)
const importDateStart = ref(null)
const importDateEnd = ref(null)

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

const queryTable = () => {
  const params = {
    draw: 1,
    length: pageSize.value, // 使用当前页面大小
    order: [],
    searchParams: {
      custId:'A10101', 
      dateStart:value(dateStart), // 获取开始日期值  
      dateEnd:value(dateEnd),     // 获取结束日期值    
   },
 }

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

const reset = () => {
  dateStart.value=null; 
dateEnd.value=null; 
importDateStart.value=null;
importDateEnd.value=null; 
// 清空表格数据，或根据需求决定是否保留数据   
data.value=[];
}
</script>

修改说明：

新增响应式变量：dateStart, dateEnd, importDateStart, importDateEnd 用于存储选择的时间范围。
绑定到 <a-range-picker>：通过 v-model:value 来绑定这些变量，以便它们能反映用户选择的时间。
查询方法：queryTable 函数中使用新定义的变量构建请求参数，并发起 API 请求。
重置方法：在 reset() 函数中清空所有时间相关的变量以及表格数据（如果需要）。