-Go服务器开发

为了实现提交时，如果查询到 tagsId 为空则禁用按钮，您可以使用 Vue 的计算属性和条件判断来控制按钮的可用状态。以下是您的代码示例，增加了对 tagsId 是否为空的检查，以防止在未选择标签时进行下一步操作。

更新后的代码示例

<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      :scroll="{
        x: columns.reduce((sum, col) => sum + (col.width || 0), 0) > 1800 ? 'max-content' : undefined
      }"
      :pagination="{
        current: currentPage,
        pageSize: pageSize,
        total: totalRecords,
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        onShowSizeChange: handlePageSizeChange,
        onChange: handlePageChange,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      }"
      :custom-row="customRow"
      style="padding: 5px"
      bordered
      :row-selection="rowSelection"
      :rowKey="record => record.customerId" <!-- Assuming customerId is unique -->
    />

    <a-button 
      type="primary" 
      @click="processBatchAction" 
      :disabled="!isTagsIdValid" 
    >
      确认
    </a-button>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';
import { message } from 'ant-design-vue';

const columns = [
  // Define your columns here
];

const data = ref([]); // Your data source
const currentPage = ref(1);
const pageSize = ref(10);
const totalRecords = ref(0);

const rowSelection = reactive({
  preserveSelectedRowKeys: true,
  selectedRowKeys: [],
  onChange(selectedRowKeys, selectedRows) {
    newSelectedRowKeys.value = selectedRowKeys;
    
    // Update the names of the selected customers
    newSelectedCustomerNames.value = selectedRows.map(row => row.customerName);
    
    console.log('Selected Row Keys:', selectedRowKeys);
  }
});

// 假设 tagsId 是一个响应式变量，这里初始化为 null 或者有效值。
const tagsId = ref(null); // 或者某个合法值

// 使用计算属性判断 tagsId 是否有效
const isTagsIdValid = computed(() => {
   return !!tagsId.value; // 当 tagsId 不为空时返回 true
});

const handlePageSizeChange = (current, size) => {
  pageSize.value = size;
};

const handlePageChange = (page, size) => {
  currentPage.value = page;
};

const customRow = (record) => {
  return {
    onClick: () => {
      console.log('Clicked row:', record);
    }
  };
};

// Add other necessary methods and API calls

// 示例：批量处理客户标签的函数
const batchCustomerTags = async ({ tagsId, customerIds, customerNames }) => {
   // 实现您的API调用，并返回一个 Promise
   console.log("Batch processing for IDs:", customerIds);
   console.log("Batch processing for Names:", customerNames);
   
   // 模拟成功响应
   return { success: true, message: "操作成功!" };
};

// 用于处理选中客户并在操作后显示消息的函数。
const newSelectedRowKeys = ref([]);
const newSelectedCustomerNames = ref([]);

function processBatchAction() {
   if (!isTagsIdValid.value) { 
     message.warning("请确保选择了标签！"); 
     return; 
   }

   batchCustomerTags({ 
     tagsId: tagsId.value, // 使用当前的 tagsId 值 
     customerIds:newSelectedRowKeys.value, 
     customerNames:newSelectedCustomerNames.value 
   }).then(response => {
     if(response.success){
       message.success(response.message);
     } else {
       message.error(response.message);
     }
   });
}

// 获取或更新 tagsId 的逻辑需要根据实际情况进行实现。
// 举例：
function fetchTags() {
   // 根据您的业务逻辑获取或更新tagsId，例如：
   // const fetchedTags= await apiGetTags(); // 假设有此方法返回结果
  
   // 标签ID的赋值可以是下面这样的:
   // tagsId.value=fetchedTags.id || null;

}

// 在适当的位置调用 fetchTags()
fetchTags();

</script>