...-Go服务器开发

要实现点击“查询”按钮时重新调用接口，并在点击“重置”按钮时清空查询条件，你可以对现有的代码进行以下修改：

添加一个方法来处理查询操作，并在该方法中调用接口。
将重置功能清空表单状态和数据。

以下是根据你的需求做出的修改示例：

<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="[formState.dateStart, formState.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="[formState.importDateStart, formState.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>

    <!-- 数据表格部分保持不变 -->
    ...
    
  </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: '',
  importDateStart: '',
  importDateEnd: ''
})

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

const queryTable = () => {
  const params = {
    draw: 1,
    length: pageSize.value,
    order: [],
    searchParams: {
      custId: 'A10101', // 可以根据需要调整 custId 的值
      dateStart: formState.value.dateStart,
      dateEnd: formState.value.dateEnd,
      importDateStart: formState.value.importDateStart,
      importDateEnd: formState.value.importDateEnd,
   },
 }

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

const reset = () => {
   // 重置表单状态
   formState.value.dateStart = '';
   formState.value.dateEnd = '';
   formState.value.importDateStart = '';
   formState.value.importDateEnd = '';

   // 清空数据源
   data.value = [];
}
</script>