-Go服务器开发

要实现点击“跟进”按钮时以弹窗形式展示 FollowUpModal，你可以使用 Vue 的状态管理来控制模态框的显示。以下是一个修改后的示例代码，它在点击“跟进”按钮时会打开一个模态框。

修改后的代码

<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="openFollowUpModal(record)">跟进</a-button>
      </template>
    </template>
  </a-table>

  <!-- Follow Up Modal -->
  <FollowUpModal 
    v-model:visible="isModalVisible" 
    :record="selectedRecord" 
    @close="isModalVisible = false" 
  />
</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 selectedRecord = ref(null); // 存储选中的记录

// 打开模态框并传入选中的记录
const openFollowUpModal = (record) => {
  selectedRecord.value = record;
  isModalVisible.value = true;
};

// 分页和页面大小变化处理函数
const handlePageSizeChange = (current, size) => {
  pageSize.value = size;
};
const handlePageChange = (page) => {
  currentPage.value = page;
};
</script>

修改点说明：

新增状态：
- isModalVisible: 控制模态框的可见性。
- selectedRecord: 存储当前选中的记录，以便在模态框中使用。
打开模态框的方法：
- openFollowUpModal(record)：这个方法会被调用，当用户点击“跟进”按钮时，会设置选中的记录，并将模态框的可见性设置为 true。
FollowUpModal组件：
- 使用了 v-model:visible 来双向绑定可见性，并传递所选的记录作为属性。如果有关闭事件，关闭事件将设置可见性为 false。
@click事件处理：在“跟进”按钮上添加了点击事件处理器，用于调用上述打开模态框的方法。