-Go服务器开发

要将 FollowUpModal 以弹窗的形式打开，你可以使用 Ant Design Vue 的 Modal 组件来实现。你需要在点击 “跟进” 按钮时，显示这个模态框，并通过 prop 将需要传递的数据传给 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 -->
  <a-modal 
    v-model:visible="isModalVisible" 
    title="跟进" 
    @ok="handleOk" 
    @cancel="handleCancel"
  >
    <FollowUpModal :record="currentRecord" />
  </a-modal>
</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);
const currentRecord = ref(null);

const openModal = (action, record) => {
  if (action === 'followUp') {
    currentRecord.value = record;
    isModalVisible.value = true;
  }
};

const handleOk = () => {
  // Handle the OK action here
  isModalVisible.value = false;
};

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

const complete = (record) => {
  console.log('完成', record);
};
</script>

<style scoped>
/* Add any styles you may need */
</style>

修改说明：

模态框 (<a-modal>)：添加了一个 <a-modal> 元素来包裹 FollowUpModal，并根据 isModalVisible 控制其显示与隐藏。
按钮事件：在 “跟进” 按钮中，使用 @click 指令调用 openModal 方法，同时传入相应的记录。
记录管理：定义了一个名为 currentRecord 的响应式变量，用于存储当前要在模态框中处理的记录。
确定和取消处理方法：分别处理确定和取消操作时关闭模态框。