-Go服务器开发

在你的 Vue 组件中，如果选中其中一个日期范围选择器时另一个也会被赋值，并且当你再选中另一个时之前的选择会被覆盖，这通常是因为 v-model 的绑定和事件处理逻辑不够清晰。

你目前的代码使用了同样的状态管理来处理两个不同的日期范围选择，导致它们相互影响。为了解决这个问题，可以考虑以下几点：

分开状态管理：确保每个日期范围有独立的状态。
更新v-model 绑定：将它们直接与 formState 中不同的属性相连。

以下是修正后的示例代码：

<template>
    <div>
        <a-row>
            <a-col :span="8">
                <a-form-item name="dateRange" label="日期" v-bind="dateRange">
                    <a-range-picker
                        v-model:value="[formState.date, formState.dateEnd]"
                        value-format="YYYY-MM-DD"
                        @change="(dates) => {
                            formState.date = dates[0];
                            formState.dateEnd = dates[1];
                        }"
                    />
                </a-form-item>
            </a-col>

            <a-col :span="8">
                <a-form-item name="importDateRange" label="导入日期" v-bind="importDateRange">
                    <a-range-picker
                        v-model:value="[formState.importDate, formState.importDateEnd]"
                        value-format="YYYY-MM-DD"
                        @change="(importDates) => {
                            formState.importDate = importDates[0];
                            formState.importDateEnd = importDates[1];
                        }"
                    />
                </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="queryTable">查询</a-button>
                    <a-button @click="reset">重置</a-button>
                </a-form-item>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';

const data = ref([]);
const pageSize = ref(5);
const formState = reactive({
    date: '',
    dateEnd: '',
    importDate: '',
    importDateEnd: ''
});

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

const queryTable = () => {
    const params = {
        draw: 1,
        length: 25,
        order: [],
        search: { regex: false, value: '' },
        params: {
            customerId: 'A10101',
            date: formState.date,
            dateEnd: formState.dateEnd,
            importDate: formState.importDate,
            importDateEnd: formState.importDateEnd,
            start: 0
        }
    };

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

const reset = () => {
    console.log(formState);
    // Reset the state to empty strings
    Object.assign(formState, {
        date: '',
        dateEnd: '',
        importDate: '',
        importDateEnd: ''
    });
};
</script>