-Go服务器开发

要在点击“跟进”按钮时展示一个弹窗并切换到一个新的 Vue 页面，你可以使用 Vue Router 来实现页面切换，并结合 Ant Design Vue 的 Modal 组件来显示弹窗。以下是一个示例代码，演示如何完成这一需求。

首先，确保你的项目中已经安装了 vue-router 和 ant-design-vue。

1. 创建新页面

假设你有一个新页面叫做 FollowUp.vue：

<!-- FollowUp.vue -->
<template>
  <div>
    <h2>跟进记录</h2>
    <!-- 在这里添加更多内容 -->
  </div>
</template>
<script setup>
// 可以在这里添加逻辑或数据
</script>

2. 配置路由

在你的路由配置文件中（通常是 router/index.js 或类似的文件），添加新的路由：

import { createRouter, createWebHistory } from 'vue-router';
import FollowUp from '@/components/FollowUp.vue'; // 根据实际路径引入
const routes = [
  // 其他路由...
  {
    path: '/follow-up',
    component: FollowUp,
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

3. 修改原表格组件

在原有表格组件中修改“跟进”按钮的事件处理，以便在点击后打开弹窗或跳转到新页面。

<template>
  <a-table ...>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'operation'">
        <a-button @click="openModal('edit', record)">编辑</a-button>
      </template>
      <template v-if="column.key === 'operation'">
        <a-button @click="handleFollowUp(record)">跟进</a-button> <!-- 添加 click 事件 -->
      </template>
      <template v-if="column.key === 'operation'">
        <a-button @click="complete(record)">完成</a-button>
      </template>
    </template>
  </a-table>
  <!-- Modal 弹窗 -->
  <a-modal v-model:visible="isModalVisible" title="跟进" @ok="handleOk" @cancel="handleCancel">
    <p>您要对{{ followRecord }}进行跟进吗？</p> <!-- 显示选择的记录 -->
    <!-- 可以在这里添加更多输入字段等内容 -->
  </a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
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 isModalVisible = ref(false); // 控制 modal 的显隐
const followRecord = ref(null); // 用于保存需要跟进的记录
const router = useRouter();
const openModal = (action, record) => {
   console.log(action, record);
};
const handleFollowUp = (record) => {
   followRecord.value = record; // 保存当前记录
   isModalVisible.value = true; // 打开弹窗
};
const handleOk = () => {
   // 确认后的操作，比如：可能想导航到另一个页面：
   router.push({ path: '/follow-up' });
   isModalVisible.value = false; // 隐藏弹窗
};
const handleCancel = () => {
   isModalVisible.value = false; // 隐藏弹窗
};
const complete = (record) => {
   console.log('完成', record);
};
</script>
<style scoped>
/* 添加相关样式 */
</style>