-Go服务器开发

为了避免在选中一个日期范围后另一个日期范围也被赋值，我们需要调整 v-model 的绑定逻辑。在你的代码中，你使用了 v-model:value="formState[(date, dateEnd)]"，这会导致 Vue 认为这是一个数组并在相互之间赋值。我们可以将 v-model 修改为具体的状态属性，并确保只在日期选择器变化时更新对应的状态。

以下是修改后的代码：

<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) => {
                            if (dates && dates.length > 0) {
                                formState.date = dates[0];
                                formState.dateEnd = dates[1];
                            } else {
                                formState.date = '';
                                formState.dateEnd = '';
                            }
                        }"
                    />
                </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) => {
                            if (importDates && importDates.length > 0) {
                                formState.importDate = importDates[0];
                                formState.importDateEnd = importDates[1];
                            } else {
                                formState.importDate = '';
                                formState.importDateEnd = '';
                            }
                        }"
                    />
                </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);
  Object.assign(formState, { date: '', dateEnd: '', importDate: '', importDateEnd: '' });
};
</script>

修改点：

v-model:value 使用的是 [formState.date, formState.dateEnd] 和 [formState.importDate, formState.importDateEnd] 数组，以正确映射到两个输入框。
在 @change 方法中增加了检查，确保只有在有有效日期时才进行赋值；如果没有选定日期，则重置相应字段为空。
在 reset() 函数中，使用 Object.assign() 来重置所有表单状态。

通过这些修改，选中一个日期范围不会影响到另一个范围的选择。

内容由零声教学AI助手提供，问题来源于学员提问