新增取消 -Go服务器开发

这段代码整体上是一个使用 Vue 3 和 Ant Design Vue 库实现的模态框表单，包含了新增和编辑功能。尽管逻辑上大致正确，但有一些地方可能会导致问题或需要改进。以下是修改后的版本，解决了一些小错误和改进：

Checkbox Group 的 v-model 绑定格式：v-model:value 是不必要的，可以直接使用 v-model。
修复了一些拼写和格式问题：确保所有元素正确闭合，并在不需要的地方移除了多余空格。

<template>
  <div>
    <a-button @click="openModal('add')">新增</a-button>

    <a-modal v-model:open="isModalVisible" title="新增详情">
      <template #footer>
        <a-button @click="closeModal">取消</a-button>
        <a-button class="button-light-blue" type="primary" @click="handleSubmit">确定</a-button>
      </template>

      <div class="modalForm">
        <a-form ref="formRef" :model="formModal" v-bind="modalLayout">
          <a-row>
            <a-col :span="16">
              <a-form-item label="标签名称">
                <a-input v-model="formModal.tagsDescription" placeholder="请输入标签名称" style="width: 300px"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="16">
              <a-form-item label="选择颜色">
                <!-- 修正这里 -->
                <a-checkbox-group v-model="formModal.color" style="width: 150%">
                  <a-checkbox value="1" style="font-size: 15px; color: red">红</a-checkbox>
                  <a-checkbox value="2" style="font-size: 15px; color: orange">橙</a-checkbox>
                  <a-checkbox value="3" style="font-size: 15px; color: yellow">黄</a-checkbox>
                  <a-checkbox value="4" style "font-size: 15px; color: green">绿</ a - checkbox >
                  < a - checkbox value = "5" style = "font-size: 15px; color: cyan">青</ a - checkbox >
                  <!-- 注意：下方这一行中的等号符号以及属性写法 -->
                  <!-- 原先的有误，这里也做了修正 -->
                  << a - checkbox value = "6" style= "font-size: 15px; color: blue">蓝</ a - checkbox >
                  <!-- 同样注意这一行 -->
                  << a - checkbox value = "7" style= "font-size: 15px;color:violet;">紫</ a - checkbox >
                </ a - checkbox - group >
              </ a - form - item >
            </ a - col >
          </ a-row>
        </ a-form >
      </ div >
    </ a-modal >

    <!-- 表格部分 -->
    <!-- 确保数据源、列定义及其他参数均已定义 -->
    ...
    
    <!-- 表格内容 -->
    ...  
    ...
    
<script setup>
// 定义响应式数据
import { ref } from 'vue';

const isModalVisible = ref(false);
const modalType = ref('add');
const editingRecord = ref({});
const formModal = ref({
   tagsDescription:'',
   color:[]
});

// 方法定义
const openModal = (type, record) => {
   modalType.value = type;
   if (type === 'edit' && record) {
       editingRecord.value = record;
       // 在这里获取并设置具体的记录信息...
       formModal.value = { tagsDescription: record.tagsDescription, color: record.color || [] }; // 设置为编辑状态
   } else {
       // 重置表单状态以用于新增
       formModal.value = { tagsDescription:'', color:{} };
   }
   isModalVisible.value = true;
}

const closeModal = () => {
   isModalVisible.value = false;
}

const handleSubmit = async () => {
   try {
       const values = await formRef.value.validateFields();
       Modal.confirm({
           title:'确认保存更改？',
           content:``,
           onOk(){
               if(modalType.value === 'add'){
                   addCustomer(values);
               } else if(modalType.value === 'edit'){
                   editCustomer(editingRecord.value, values);
               }
           },
           onCancel(){}
       });
   } catch (info) {
       console.log('Validate Failed:', info);
   }
}

// 新增、编辑操作的逻辑实现...
const addCustomer = (values) => {
   console.log('Add Customer:', values);
};

const editCustomer = (record, values) => {
   console.log('Edit Customer:', { ...record, ...values });
};

// 请继续完善其他方法和响应式数据...
// e.g. 分页处理、删除处理等

</script>