批量打标 -Go服务器开发

要在穿梭框中显示每个状态的颜色，您需要通过自定义渲染函数来修改每个项的样式。在您的 <a-transfer> 组件中，您可以使用 render 属性来实现这一点。具体来说，可以将文本颜色设置为相应的状态颜色。

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

<template>
  <div class="form-tool">
    <a-button class="margin-right-10 button-light-blue" @click="openModal">批量打标</a-button>
    <a-modal v-model:visible="open" title="批量打标" @ok="handleOk" width="800px">
      <a-transfer
        v-model:target-keys="targetKeys"
        v-model:selected-keys="selectedKeys"
        :data-source="dataSource"
        :titles="['待选状态', '已选状态']"
        :render="item => renderItem(item)"
        @change="handleChange"
      />
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const open = ref(false); // 用于控制模态框的显示
const targetKeys = ref([]); // 用于存储已选择的状态
const selectedKeys = ref([]); // 用于存储当前选中的状态

// 打开模态框的函数
const openModal = () => {
  open.value = true;
};

// 确认按钮的回调函数
const handleOk = () => {
  open.value = false;
  console.log('已选择的状态:', targetKeys.value);
};

// 穿梭框数据源
const dataSource = ref([
  { key: '1', title: '状态1', color: '#f50' },
  { key: '2', title: '状态2', color: '#2db7f5' },
  { key: '3', title: '状态3', color: '#87d068' },
  { key: '4', title: '状态4', color: '#108ee9' },
  { key: '5', title: '状态5', color: '#ffbf00' },
  { key: '6', title: '状态6', color: '#ff7f50' },
  { key: '7', title: '状态7', color: '#8a2be2' },
  { key: '8', title: '状态8', color: '#a52a2a' },
  { key: '9', title: '状态9', color: '#deb887' },
  { key: '10', title: '状态10', color: '#5f9ea0' },
]);

// 自定义渲染函数，用于展示带有颜色的文本
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);
};
</script>

<style scoped>
/* 可以添加其他样式 */
</style>