-Go服务器开发

在你提供的代码中，日期选择器（a-range-picker）的 v-model:value 绑定部分存在一些问题。根据你的描述，你希望一个日期范围的选择不影响另一个日期范围的值。

问题

目前，两个 a-range-picker 的 v-model:value 都绑定到了同一个对象的不同属性，但使用了错误的语法。
当你选中其中一个日期框时，另一边的框被赋值的问题可能是由于直接在模板中定义了多个同名属性。

修正建议

更正 v-model:value 的绑定方式。
确保每个范围选择器独立更新自己的状态。

下面是修正后的代码：

<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" htmlType="submit">查询</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);
    formState.date = '';
    formState.dateEnd = '';
    formState.importDate = '';
    formState.importDateEnd = '';
};
</script>