-Go服务器开发

要在点击“跟进”按钮时展示一个弹窗，并切换到一个新的 Vue 组件，您可以使用动态组件和 Vue Router。下面是实现这一功能的基本步骤：

1. 使用 Vue Router 创建新组件

首先，创建一个新的 Vue 组件，例如 FollowUpModal.vue。

<!-- FollowUpModal.vue -->
<template>
  <div>
    <h2>跟进记录</h2>
    <!-- 跟进的内容和逻辑 -->
    <p>您正在跟进: {{ record }}</p>
    <a-button @click="close">关闭</a-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps(['record']);
const router = useRouter();

const close = () => {
  // 返回上一页或关闭 modal 的逻辑
  router.back();
};
</script>

2. 配置路由

在你的路由配置文件中，添加对新组件的路由路径，例如：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import FollowUpModal from '../components/FollowUpModal.vue'; // 根据实际路径导入

const routes = [
  {
    path: '/follow-up',
    name: 'FollowUp',
    component: FollowUpModal,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

3. 修改原来的表格组件

在原来的表格组件中，将“跟进”按钮的点击事件修改为导航到新页面。

<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="goToFollowUp(record)">跟进</a-button> <!-- 修改这里 -->
        <a-button @click="complete(record)">完成</a-button>
      </template>
    </template>
  </a-table>
</template>

<script setup>
// ...其余代码保持不变...

const goToFollowUp = (record) => {
   // 使用 vue-router 导航到跟进页面，并将记录作为参数传递过去
   router.push({ name: 'FollowUp', query: { recordId: record.id } });
};
</script>