-Go服务器开发

你可以在Vue 3中使用Ant Design Vue实现两个日期框以进行查询。以下是一个简单的示例，演示了如何添加开始和结束日期选择框，并在点击按钮时触发查询。

首先，确保已安装Ant Design Vue库，然后您可以将其应用于您的组件中：

<template>
  <div class="HistoricalReminder">
    <a-row>
      <a-col :span="8">
        <a-date-picker v-model:value="startDate" placeholder="开始日期" />
      </a-col>
      <a-col :span="8">
        <a-date-picker v-model:value="endDate" placeholder="结束日期" />
      </a-col>
      <a-col :span="8">
        <a-button type="primary" @click="fetchData">查询</a-button>
      </a-col>
    </a-row>

    <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 startDate = ref(null);
const endDate = ref(null);

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

const fetchData = () => {
  const params = {
    draw: 1,
    length: pageSize.value, // 使用当前页面大小
    order: [],
    searchParams: {
      custId: 'A10101', // 如果有其他的搜索条件，可以动态传递
      dateStart: startDate.value ? startDate.value.format('YYYY-MM-DD') : '',
      dateEnd: endDate.value ? endDate.value.format('YYYY-MM-DD') : ''
    },
  };

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

<style scoped>
.red-row {
   background-color: #ffcccc; /* 自定义颜色 */
}
</style>