-Go服务器开发

要在 Vue 中实现点击 “跟进” 按钮时打开一个新的页面并以弹窗形式展示，你可以使用 Vue Router 和 Ant Design Vue 的 Modal 组件来实现。以下是如何修改你的代码以满足这一要求。

修改后的代码示例

<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('edit', record)">编辑</a-button>
        <a-button @click="showFollowUpModal(record)">跟进</a-button>
        <a-button @click="complete(record)">完成</a-button>
      </template>
    </template>
  </a-table>

  <a-modal
    v-model:visible="isFollowUpModalVisible"
    title="跟进"
    @ok="handleFollowUpOk"
    @cancel="handleFollowUpCancel"
  >
    <p>这是关于 {{ selectedRecord?.name }} 的跟进信息。</p>
    <!-- 在这里可以添加更多输入或内容 -->
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import { Table, Button, Modal } from 'ant-design-vue';

const columns = ref([]);
const data = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalRecords = ref(100);
const isFollowUpModalVisible = ref(false);
const selectedRecord = ref(null);

const openModal = (action, record) => {
  console.log(action, record);
};

const showFollowUpModal = (record) => {
  selectedRecord.value = record; // 存储当前记录
  isFollowUpModalVisible.value = true; // 显示弹窗
};

const handleFollowUpOk = () => {
  // 在这里处理跟进行为，比如保存数据等
  console.log('跟进操作已确认:', selectedRecord.value);
  
  isFollowUpModalVisible.value = false; // 隐藏弹窗
};

const handleFollowUpCancel = () => {
  isFollowUpModalVisible.value = false; // 隐藏弹窗
};

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

<style scoped>
/* 可根据需要添加样式 */
</style>

改动说明：

增加 Modal：在模板中加入了 a-modal，用于展示 “跟进” 内容。
状态管理：
- 使用 isFollowUpModalVisible 管理 Modal 是否可见。
- 使用 selectedRecord 存储当前选择的记录，以便在 Modal 中展示。
按钮事件：将 “跟进” 按钮的点击事件指向新方法 showFollowUpModal，该方法会设置当前记录并显示 Modal。
处理确定和取消按钮：定义了 handleFollowUpOk 和 handleFollowUpCancel 方法，分别处理用户确认和取消操作。