x -DPDK中文网

要使左边的待选状态只能选择一个值且不可多选，你可以在<a-transfer>组件中添加一个 :show-search="false" 属性以禁用搜索框，并在 @change 事件处理函数中添加逻辑来限制选择数量。下面是修改后的代码：

<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;"
        :show-search="false" <!-- 禁用搜索框 -->
      />
    </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, moveKeys) => {
  if (direction === 'right') {
    // 如果是从待选状态移动到已选状态，强制只保留最后一个被选中的值
    const lastSelectedKey = moveKeys[moveKeys.length - 1];
    targetKeys.value = [lastSelectedKey]; // 保持目标键只有一个
  } else if (direction === 'left') {
    // 如果是从已选状态移回待选状态
    targetKeys.value = nextTargetKeys;
  }
};

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);
    } else {
      message.error(response.message);
    }
  });
};

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