...-Go服务器开发

要实现点击“查询”按钮重新调用接口并在点击“重置”按钮时清空查询条件，你需要在 queryTable 和 reset 方法中分别处理这些逻辑。

以下是如何修改你的代码：

添加 queryTable 和 reset 方法：这两个方法将在用户点击相应的按钮时被调用。
在 queryTable 方法中重新请求数据。
在 reset 方法中清空表单数据和 data。

更新后的代码如下：

<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.dateRange" <!-- 使用v-model绑定 -->
              />
            </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.importDateRange" <!-- 使用v-model绑定 -->
              />
            </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="{ ...paginationOptions }" <!-- 提取分页配置 -->
      :rowClassName= "(record, index) => (index % 2 === 0 ? 'red-row' : '') "
    ></a-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { CollectionRecord } from '../../utils' // 确保路径正确

const formState = ref({
  dateRange: null,
  importDateRange: null,
})

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 handlePageSizeChange = (current, size) => {
  console.log(`每页条数变化为: ${size}`)
  pageSize.value = size
}

const paginationOptions = {
   pageSize: pageSize.value,
   showSizeChanger: true,
   pageSizeOptions:['5','10','20'],
   onShowSizeChange(handlePageSizeChange),
   showQuickJumper:true,
   showTotal:(total, range) =>
       `显示 ${range[0]}~${range[1]}条记录，共 ${total} 条记录`,
}

// 查询方法
const queryTable = () => {
 const params = {
     draw:1,
     length:size,
     order:[]
     search:{regex:false,value:''},
     searchParams:{
         custId:'A10101',
         dateStart:this.formState.dateRange[0], // 从表单获取值
         dateEnd:this.formState.dateRange[1],
       },
 }

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

// 重置方法
const reset=()=>{ 
 formState.value={ 
     dateRange:null, // 清空选择的日期范围 
     importDateRange:null, // 清空导入日期范围 
 }
 data.value=[]; // 清空数据表格内容 
}

</script>