x -DPDK中文网

要实现待选状态只能选择一个值并替换已选状态的功能，可以对 handleChange 方法进行修改，确保在向右移动时，只能选择一个值。同时，在用户选择新值时，已选状态会被替换成最新选中的值。以下是更新后的代码片段：

<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([]);
const selectedKeys = ref([]);
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, direction) => {
  if (direction === 'right') {
    // 如果是从左到右（添加），只允许选择一个
    if (nextTargetKeys.length > 1) {
      message.warning('只能选择一个标签！');
      return;
    }
    
    // 替换已选状态中的旧值
    if (nextTargetKeys.length === 1) {
      selectedKeys.value[0] = nextTargetKeys[0];
      targetKeys.value[0] = nextTargetKeys[0]; // 更新目标键以保持同步
    }
  }

  console.log('targetKeys:', targetKeys.value);
};

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.map((tag) => tag.id);
      
       // 确保在加载完成后，只保留一个已选择的标签（如果存在）
       if(targetKeys.value.length > 1){
         targetKeys.value.pop(); // 确保只有最后一个标签在目标中
       }
      
   } else {
     message.error(response.message);
   }
 });
};

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

更改说明：

handleChange 函数：
- 检查从左到右的变化，限制用户一次只能选择一个标签。
- 将新的标签替换到 selectedKeys 中，同时更新 targetKeys。
fetchSelectedTags 函数：
- 在加载初始已选标签后，确保仅保留最后一个已经选择的标签。