-Go服务器开发

为了在点击“跟进”按钮时根据状态判断并打开不同的 Modal（NegotiateModal 或 ComplaintModal），你可以使用 Vue 的条件渲染来控制哪个 Modal 显示。同时，你需要确保将选中的记录传递给相应的 Modal。

下面是修改后的代码示例：

修改后的代码

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :scroll="{
      x: columns.reduce((sum, col) => sum + (col.width || 0), 0) > 1800 ? 'max-content' : undefined
    }"
    :pagination="{
      current: currentPage,
      pageSize: pageSize,
      total: totalRecords,
      pageSizeOptions: ['10', '20', '30', '40', '100'],
      onChange: handlePageChange,
      onShowSizeChange: handlePageSizeChange,
      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="handleFollowUp(record)">跟进</a-button>
      </template>
    </template>
  </a-table>

  <!-- 根据状态选择显示不同的 Modal -->
  <NegotiateModal
    v-if="isNegotiationVisible"
    :visible="isNegotiationVisible"
    @update:visible="isNegotiationVisible = false"
    :record="selectedRecord"
  />

  <ComplaintModal
    v-if="isComplaintVisible"
    :visible="isComplaintVisible"
    @update:visible="isComplaintVisible = false"
    :record="selectedRecord"
  />
</template>

<script setup>
import { ref } from 'vue'
import NegotiateModal from './components/NegotiatePage.vue'
import ComplaintModal from './components/ComplaintPage.vue'

const columns = [
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed:'right',
    key: 'operation',
  }
]

const data = ref([])
const isNegotiationVisible = ref(false)
const isComplaintVisible = ref(false)
const selectedRecord = ref(null)

const handleFollowUp = (record) => {
   // 检查状态并设置对应的 Modal 可见性和记录
   if (record.status === '协商') {
     selectedRecord.value = record;
     isNegotiationVisible.value = true;
     isComplaintVisible.value = false; // 确保其他 modal 隐藏
   } else if (record.status === '投诉') {
     selectedRecord.value = record;
     isComplaintVisible.value = true;
     isNegotiationVisible.value = false; // 确保其他 modal 隐藏
   }
}

// 可以在这里添加分页和数据处理函数，例如 handlePageChange 和 handlePageSizeChange

</script>

如何运作

状态判断：
- 在 handleFollowUp 函数中，检查传入的 record 的 status 属性。
- 如果状态为“协商”，则将 selectedRecord 设置为当前记录，并打开 NegotiateModal。
- 如果状态为“投诉”，则将其设置为打开 ComplaintModal。
条件渲染：
- 使用 Vue 的条件渲染 (v-if) 来决定哪个 Modal 被渲染。
- 当一个 Modal 被展示时，另一个会被隐藏。
传递数据：
- 将选中的记录通过 props (record) 分别传递给各自的 Modal。