取消批量打标-Go服务器开发

要将穿梭框（a-transfer）组件在页面加载时自动显示，并且保留“确认”和“取消”按钮，你需要做一些小改动。可以通过设置 open 的初始值为 true 来实现自动打开模态框，同时确保在模态框中添加相应的按钮。以下是修改后的代码：

<template>
  <div class="singleMarking">
    <div>
      <a-button class="cancel-btn" @click="handleCancel">取消</a-button>
    </div>
    <div class="form-tool">
      <!-- 批量打标按钮可以移除或隐藏 -->
      <a-modal v-model:open="open" title="批量打标" @ok="handleOk" width="500px">
        <a-transfer
          v-model:target-keys="targetKeys"
          v-model:selected-keys="selectedKeys"
          :data-source="dataSource"
          :titles="[ '待选状态', '已选状态' ]"
          :render="renderItem"
          @change="handleChange"
        />
        <template #footer>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleOk">确认</a-button>
        </template>
      </a-modal>
    </div>
  </div>
</template>

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

const formState = reactive({});
const data = ref([]);
const open = ref(true); // 初始值设为 true，使模态框在页面加载时显示
const targetKeys = ref([]);
const selectedKeys = ref([]);

// 模拟的数据源
const dataSource = [
  { key: '1', title: '状态1', color: '#f50' },
  { key: '2', title: '状态2', color: '#2db7f5' },
  { key: '3', title: '状态3', color: '#87d068' },
  { key: '4', title: '状态4', color: '#108ee5' },
  { 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 handleCancel = () => {
  open.value = false; // 隐藏模态框
};

const handleOk = () => {
  open.value = false; // 隐藏模态框
  console.log('已选择的状态:', targetKeys.value);
};

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 lang="less">
.singleMarking {
   /* 在这里添加你的样式 */
}
.cancel-btn {
   /* 自定义取消按钮样式 */
}
.form-tool {
   /* 工具区域样式 */
}
.margin-right-10 {
   margin-right: 10px;
}
.button-light-blue {
   background-color: #add8e6; /* 自定义蓝色 */
}
</style>