x -DPDK中文网

要使你的 Vue 组件的 a-transfer 组件在待选状态中只能选择一个值，并且在已选状态中替换掉之前的选项，可以通过以下步骤进行修改。

你需要调整 handleChange 方法，以确保只允许选择一个目标键。具体实现如下：

更新 handleChange 方法：在选择新的项目时，将之前已选中的项目移除，只保留最新选择的那个。
设置 v-model 的 targetKeys 属性为数组长度为1，这样就可以保证只能有一个值被选中。

以下是更新后的代码：

<template>
  <div class="singleMarking">
    <div class="cancel-btn-container">
      <a-button class="cancel-btn" @click="handleCancel">x</a-button>
    </div>
    <div style="margin-top: 40px">
      <a-transfer
        v-model:target-keys="targetKeys"
        v-model:selected-keys="selectedKeys"
        :data-source="dataSource"
        :titles="['待选状态', '已选状态']"
        :render="renderItem"
        @change="handleChange"
        list-style="width: 100%;height:300px;overflow-y: auto;"
      />
    </div>
    <div class="action-btns">
      <a-button class="cancel-btn" @click="handleCancel">取消</a-button>
      <a-button class="confirm-btn" type="primary" @click="handleConfirm">确认</a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { queryTagList, getCustomerTags, singleCustomerTags } from '@/utils';

const formState = reactive({});
const targetKeys = ref([]); // 存储已选择的key，初始为空
const selectedKeys = ref([]); // 用于控制当前选中的key
const route = useRoute();
const custId = ref('');
const name = ref('');
const dataSource = ref([]);

const handleCancel = () => {
  window.parent.postMessage({ type: 'close-dialog', action: 'cancel' }, '*');
};

const handleChange = (nextTargetKeys) => {
  if (nextTargetKeys.length > 0) {
    // 如果有新选择，更新targetKeys，仅保留最新选择的项
    targetKeys.value = [nextTargetKeys[nextTargetKeys.length - 1]];
  }
};

const handleConfirm = () => {
  const params = {
    tagsId: targetKeys.value,
    customerId: custId.value,
    customerName: name.value
  };
  
  singleCustomerTags(params).then((response) => {
    if (response.success) {
      message.success(response.message);
    } else {
      message.error(response.message);
    }
    
    handleCancel();
  });
};

const fetchAvailableTags = () => {
  queryTagList().then((response) => {
    if (response.success) {
      dataSource.value = response.data.map((tag) => ({
        key: tag.id,
        title: tag.tagsDescription,
        color: tag.color || '#000'
      }));
    } else {
      message.error(response.message);
    }
  });
};

const fetchSelectedTags = () => {
  getCustomerTags({ customerId: custId.value }).then((response) => {
    if (response.success) {
      selectedKeys.value = response.data.map((tag) => tag.id);
      targetKeys.value = response.data.length > 0 ? [response.data[0].id] : []; // 初始化时取第一个已选项
    } else {
      message.error(response.message);
    }
  });
};

onMounted(() => {
  custId.value = route.query.custId;
  name.value = route.query.name;
  
  fetchAvailableTags();
  
});
</script>