要实现点击“跟进”按钮时以弹窗的形式打开 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>
这样，当你点击“跟进”按钮时，就会打开一个带有指定内容（例如，某个记录信息）的弹窗，而点击弹窗中的“关闭”按钮就会将其隐藏。
内容由零声教学AI助手提供，问题来源于学员提问
