...-Go服务器开发

要实现点击“查询”按钮时重新调用接口并获取数据，同时在点击“重置”按钮时清空查询条件，可以按照以下步骤修改你的代码：

修改 onFinish 和 reset 方法：确保在点击“查询”时能调用相应的API，且在点击“重置”时能清空表单。
使用 Vue 的 ref 来管理表单状态：你可以使用 ref 来定义和更新表单的状态，以便于控制输入框的值。

下面是改进后的代码示例：

<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.importStart, formState.importEnd]"
              />
            </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 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>