-Go服务器开发

要实现点击“跟进”按钮时以弹窗的形式打开 FollowUpModal，你可以使用 Vue 的状态管理来控制模态框的显示与隐藏。以下是如何修改你的代码，以达到这个效果：

1. 修改模板

在你的 <template> 中，为 FollowUpModal 添加一个 v-if 来控制它的显示，同时设置一个变量来存储当前操作的记录。

<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" 
    :record="currentRecord" 
    @close="closeModal" 
  />
</template>

2. 在脚本中添加逻辑

接下来，在 <script setup> 部分，定义相关的状态和方法来处理模态框的打开和关闭。

<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 closeModal = () => {
  isModalVisible.value = false; // 关闭模态框
};
const followUp = (record) => {
  console.log('跟进', record);
};
const complete = (record) => {
  console.log('完成', record);
};
</script>

3. 在 `FollowUpModal` 中处理关闭事件

确保在 FollowUpModal 中，有个机制可以发出关闭事件，以便父组件能够响应并关闭模态框。例如，你可以在 FollowUpModal 中定义一个“关闭”按钮，并通过 $emit 发出事件：

<template>
  <a-modal title="跟进" @cancel="$emit('close')" @ok="$emit('close')">
    <!-- 模态框内容 -->
    
   <!-- 可在这里添加表单等其他元素 -->
    
   <div>这是跟进内容...</div>
   
   <button @click="$emit('close')">关闭</button> <!-- 使用 emit 发出关闭事件 -->
  
   <!-- 或者其他提交逻辑 -->
    
 </a-modal> 
</template>
<script setup>
// 可以根据需要定义 props 和其他逻辑...
defineProps(['record']);
</script>