ss-tiku-manage-web/src/views/Question/Database/Components/DialogDuplicateQuestion.vue

<template>
  <Dialog v-model="dialogVisible" title="疑似重复题目" width="70%">
    <el-table v-loading="loading" :data="tableList" highlight-current-row>
      <el-table-column type="index" width="55" align="center" />
      <el-table-column label="题目" align="left" prop="question" min-width="140" />
      <el-table-column label="选项" align="left" min-width="140">
        <template #default="{ row }">
          <p v-if="row.chooseA">A:{{ row.chooseA }}</p>
          <p v-if="row.chooseB">B:{{ row.chooseB }}</p>
          <p v-if="row.chooseC">C:{{ row.chooseC }}</p>
          <p v-if="row.chooseD">D:{{ row.chooseD }}</p>
        </template>
      </el-table-column>
      <el-table-column label="答案" align="center" prop="trueAnswer" width="100" />
      <el-table-column label="章节" align="center" prop="chapterName" min-width="100" />
      <el-table-column label="图片" align="center" width="100">
        <template #default="{ row }">
          <el-image
            v-if="row.imageUrl"
            :src="getShowImg(row)"
            :preview-src-list="[getShowImg(row)]"
            :lazy="true"
            style="width: 90px"
            preview-teleported
          />
        </template>
      </el-table-column>
      <el-table-column label="难点分析" align="center" prop="bestAnswer" min-width="200">
        <template #default="{ row }">
          <div v-dompurify-html="row.bestAnswer"></div>
        </template>
      </el-table-column>
      <el-table-column label="答题技巧" align="center" prop="skillInfo" min-width="100">
        <template #default="{ row }">
          <div v-if="row.skillInfo" v-dompurify-html="row.skillInfo"></div>
        </template>
      </el-table-column>
      <el-table-column label="题目来源" prop="oldSource" width="100" />

      <el-table-column label="操作" align="center" width="140">
        <template #default="scope">
          <el-button type="primary" link @click="handleDelete(scope.row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </Dialog>
</template>

<script setup>
import { getDuplicateQuesionList, deleteDuplicateQuestion } from '@/api/xjapplet/xjdatabase'

const message = useMessage()
const dialogVisible = ref(false)

const tableList = ref([])
const loading = ref(false)
function open(row) {
  dialogVisible.value = true
  getList(row)
}
defineExpose({ open })

function getList(row) {
  loading.value = true
  // 调接口获取数据
  getDuplicateQuesionList({
    questionId: row.questionId,
    carTypeId: row.carTypeId,
    subject: row.subject,
    source: row.source
  })
    .then((response) => {
      tableList.value = response
    })
    .finally(() => {
      loading.value = false
    })
}

function getShowImg(row) {
  return row.imageUrl.includes('http')
    ? row.imageUrl
    : `https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`
}

const handleDelete = (row) => {
  message.confirm('是否确认删除该题目？').then(() => {
    deleteDuplicateQuestion({
      questionId: row.questionId,
      subject: row.subject,
      source: row.source,
      carTypeId: row.carTypeId
    }).then(() => {
      message.success('删除成功')
      getList()
    })
  })
}
</script>

<style lang="scss" scoped></style>