取消 -DPDK中文网

为了实现穿梭框左边的待选状态和右边已选状态分别联调不同接口，你可以在onMounted钩子中调用相应的接口来获取数据。这里是一个基本的实现思路：

定义两个新的响应式变量来存储待选和已选状态的数据源。
在组件挂载时，调用接口获取这两部分数据，并更新对应的数据源。
将数据源绑定到a-transfer组件。

以下是修改后的代码示例：

<template>
  <div class="singleMarking">
    <div class="cancel-btn-container">
      <a-button class="cancel-btn" @click="handleCancel">取消</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, h } from 'vue';
import { message } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { getCustomerTags, getAvailableStates, getSelectedStates } from '@/utils'; // 假设你有这些接口

const targetKeys = ref([]);
const selectedKeys = ref([]);
const route = useRoute();
const custId = ref('');
const name = ref('');

const dataSource = ref([]); // 数据源将变为响应式引用

// 渲染函数
const renderItem = (item) => {
  return h('span', { style: { color: item.color } }, item.title);
};

// 当目标键变化时的处理函数
const handleChange = (nextTargetKeys, direction, moveKeys) => {
  console.log('targetKeys:', nextTargetKeys);
  console.log('direction:', direction);
  console.log('moveKeys:', moveKeys);
};

// 处理取消操作
const handleCancel = () => {
  window.parent.postMessage({ type: 'close-dialog', action: 'cancel' });
};

// 确认操作处理
const handleConfirm = () => {
  console.log('custId:', custId.value);
  getCustomerTags({ customerId: custId.value }).then((response) => {
    if (response.success) {
      message.success(response.message);
    } else {
      message.error(response.message);
    }
  });
};

// 挂载后获取初始数据
onMounted(() => {
  custId.value = route.query.custId;
  name.value = route.query.name;

  // 获取待选状态和已选状态的数据
  fetchData();
});

// 联调接口以获取待选和已选状态的数据
const fetchData = async () => {
  try {
    const availableResponse = await getAvailableStates(); // 获取待选状态数据
    const selectedResponse = await getSelectedStates({ customerId: custId.value }); // 获取已选状态数据

    if (availableResponse.success && selectedResponse.success) {
      // 更新dataSource为两个来源合并的数据，或根据需求设置各自内容。
      dataSource.value.push(...availableResponse.data); // 假设返回格式符合要求
      targetKeys.value.push(...selectedResponse.data.map(item => item.key)); // 已选择项以key保存至targetKeys，假设返回格式包含key字段。
      
      selectedKeys.value = [...targetKeys.value]; // 初始化selected keys（即右侧已经选择的项）
      
      console.log('Available States:', availableResponse.data);
      console.log('Selected States:', selectedResponse.data);

    } else {
      message.error(availableResponse.message || selectedResponse.message);
    }
    
} catch (error) {
   message.error("请求失败，请重试");
   console.error(error);
}
};
</script>