ai-manus/chat-client/src/views/permission/prologueManage/index.vue

<template>
  <el-card>
    <el-form :model="form" label-width="120px">
      <el-form-item>
        <el-button type="primary" @click="load">查询</el-button>
        <el-button type="success" @click="save">保存</el-button>
      </el-form-item>
      <el-form-item :label="聊天类型">
        <el-select v-model="form.chatType" placeholder="选择聊天类型">
          <el-option label="故障诊断" value="1" />
          <el-option label="智能问答" value="2" />
          <el-option label="图表报告" value="3" />
          <el-option label="应急助手问答" value="4" />
          <el-option label="诊断代码查询" value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="开场白内容">
        <el-input type="textarea" v-model="form.content" rows="8"></el-input>
      </el-form-item>

      <!-- 新增推荐问题 -->
      <el-form-item>
        <el-button type="primary" @click="addRecommend">新增推荐问题</el-button>
      </el-form-item>

      <!-- 推荐问题列表 -->
      <el-table :data="recommendations" style="width: 100%" border>
        <el-table-column label="推荐问题" prop="questionContent" />
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button size="mini" @click="editRecommend(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteRecommend(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-form>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { getRemark, saveRemark, getRecommendations, editRecommendation, deleteRecommendation } from '@/api/prologue'
  import { useI18n } from 'vue-i18n'

  const { t, locale } = useI18n()

  defineOptions({
    name: 'prologueManage',
  })

  const form = ref({
    chatType: '1', // 默认选中 '故障诊断'
    content: '',
  })

  const recommendations = ref([]) // 推荐问题列表
  const currentRecommendation = ref({ questionContent: '' }) // 当前正在编辑的推荐问题

  // 查询开场白内容
  const load = async () => {
    try {
      const res = await getRemark(form.value.chatType) // 根据 chatType 获取开场白
      if (res.data) {
        form.value.content = res.data.content
        ElMessage.success('加载成功')
        await loadRecommendations() // 获取推荐问题列表
      } else {
        form.value.content = ''
        ElMessage.error('未找到开场白内容')
      }
    } catch (error) {
      ElMessage.error('加载失败，请稍后重试')
    }
  }

  // 查询推荐问题列表
  const loadRecommendations = async () => {
    try {
      const res = await getRecommendations(form.value.chatType) // 使用 chatType 获取推荐问题
      if (res.data) {
        console.log('recommend questions return data:', res.data)
        recommendations.value = res.data // 确保 res.data 是推荐问题列表
      }
    } catch (error) {
      ElMessage.error('加载推荐问题失败')
    }
  }

  // 监听 chatType 的变化，动态请求并更新 content 和推荐问题内容
  watch(
    () => form.value.chatType,
    () => {
      load()
    }
  )

  // 保存修改后的内容
  const save = () => {
    ElMessageBox.confirm('是否确认保存修改？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      try {
        await saveRemark(form.value)
        ElMessage.success('保存成功')
      } catch (error) {
        ElMessage.error('保存失败，请稍后重试')
      }
    })
  }

  // 新增推荐问题
  const addRecommend = () => {
    // currentRecommendation.value = { questionContent: '' } // 清空编辑框
    // dialogVisible.value = true // 显示编辑对话框
  }

  // 编辑推荐问题
  const editRecommend = (row: any) => {
    // currentRecommendation.value = { ...row } // 填充编辑框
    // dialogVisible.value = true // 显示编辑对话框
  }

  // 删除推荐问题
  const deleteRecommend = (row: any) => {
    ElMessageBox.confirm('确定要删除该推荐问题吗?', '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      try {
        await deleteRecommendation(row.id) // 根据 id 删除推荐问题
        console.log('待删除的row.id',row.id)
        ElMessage.success('删除成功')
        await loadRecommendations() // 重新加载推荐问题列表
      } catch (error) {
        ElMessage.error('删除失败')
      }
    })
  }

  // 在组件加载时获取初始的开场白内容
  onMounted(load)
</script>