-Go服务器开发

在你的代码中，使用了 Vue 的响应式特性来管理日期范围选择。根据你的描述，似乎你遇到了一个问题，即选择一个日期范围后另一个日期范围的状态会受到影响。

以下是一些建议和可能的修复：

避免直接赋值：在 v-model:value 中使用 formState[(date, dateEnd)] 这种语法是不正确的，这样不会得到你想要的属性。你应该明确地指定属性名称。例如：
```
v-model:value="[formState.date, formState.dateEnd]"
```
修改 @change 处理器：确保在日期改变时只更新相关字段。在 @change 的箭头函数中，你已经做得很好，但需要保证它们不会互相干扰。
简化结构：考虑将这两个范围选择器分开，而不是共享同一个对象。这样可以避免不同范围选择器间的不必要交互。

以下是经过修改后的代码片段：

<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);
    // Resetting all the dates to empty strings.
    Object.assign(formState, {
        date: '',
        dateEnd: '',
        importDate: '',
        importDateEnd: ''
    });
};
</script>