-Go服务器开发

要在FollowUpModal组件中以弹窗的形式打开，你需要使用Ant Design Vue提供的a-modal组件。以下是如何实现这个功能的步骤：

修改 FollowUpModal 组件：确保你的 FollowUpModal 组件能接收一个 visible 属性来控制弹窗的显示与隐藏，同时可以通过 @close 事件通知父组件关闭弹窗。
在主模板中引入和管理状态：在你的表格中，创建一个状态来控制 FollowUpModal 的可见性，并将相应的数据传递给它。

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

修改后的代码

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :scroll="{
      x: columns.reduce((sum, col) => sum + (col.width || 0), 0) > 1800 ? undefined : 'max-content'
    }"
    :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} 条记录`
    }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'operation'">
        <a-button @click="openModal('followUp', record)">跟进</a-button>
        <a-button @click="complete(record)">完成</a-button>
      </template>
    </template>
  </a-table>
  <!-- Follow Up Modal -->
  <FollowUpModal 
    v-if="isModalVisible" 
    :visible="isModalVisible" 
    @close="closeModal" 
    :record="currentRecord"
  />
</template>
<script setup>
import { ref } from 'vue';
import FollowUpModal from '../workOrderManager/components/followUpPage.vue'
const columns = ref([]);
const data = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalRecords = ref(100);
const isModalVisible = ref(false); // 控制modal显示
const currentRecord = ref(null); // 当前选中的记录
// 打开modal并设置当前记录
const openModal = (action, record) => {
  console.log(action, record);
  
  if (action === 'followUp') {
    currentRecord.value = record; // 保存当前记录
    isModalVisible.value = true; // 显示modal
  }
};
// 完成操作
const complete = (record) => {
  console.log('完成', record);
};
// 关闭modal
const closeModal = () => {
  isModalVisible.value = false; // 隐藏modal
};
</script>

在 FollowUpModal 中

你需要确保 FollowUpModal 可以根据传递的 visible 属性来决定是否展示，且当用户希望关闭模态框时触发 @close:

<template>
  <a-modal 
    title="跟进信息" 
    v-model:visible="visible" 
    @ok="$emit('close')" 
    @cancel="$emit('close')"
   >
     <!-- 模态框内容 -->
     <p>这是关于 {{ record?.name }} 的跟进信息。</p> <!-- 示例内容 -->
   </a-modal>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
   visible: Boolean,
   record: Object // 或者具体类型定义
});
</script>