apps/web-ele/.env.development

@@ -4,7 +4,8 @@ VITE_PORT=8081
 VITE_BASE=/
 
 # 接口地址
-VITE_GLOB_API_URL=http://39.164.159.226:8088
+# VITE_GLOB_API_URL=http://39.164.159.226:8088
+VITE_GLOB_API_URL=http://192.168.1.7:8080
 # VITE_GLOB_API_URL=http://192.168.1.170:8080
 # VITE_GLOB_FLOW_URL=http://192.168.31.160:8082
 VITE_GLOB_FLOW_URL=http://192.168.1.21:8082

apps/web-ele/src/api/exam/question/question.ts

@@ -0,0 +1,64 @@
+import { requestClient } from '#/api/request';
+
+enum Api {
+  base = '/examQuestion/question',
+  list = '/examQuestion/question/list',
+  randomList = '/examQuestion/question/random-list',
+}
+
+export interface Question {
+  id: number;
+  categoryId: number;
+  questionType: string;
+  questionContent: string;
+  options: string;
+  correctAnswer: string;
+  answerAnalysis: string;
+  analysisReference: string;
+  questionStatus: string;
+  difficultyLevel: string;
+  score: number;
+  delFlag: string;
+}
+
+/**
+ * 获取试题列表
+ */
+async function questionList(params?: any) {
+  return requestClient.get<Question>(Api.list, { params });
+}
+
+async function questionDetail(id: number) {
+  return requestClient.get<Question>(`${Api.base}/${id}`);
+}
+// 新增试题分类
+function addQuestion(question: Question) {
+  return requestClient.post(Api.base, question, {
+    successMessageMode: 'message',
+  });
+}
+// 修改试题分类
+function updateQuestion(question: Question) {
+  return requestClient.put(Api.base, question, {
+    successMessageMode: 'message',
+  });
+}
+// 删除试题分类
+function deleteQuestion(ids: number[]) {
+  return requestClient.delete(`${Api.base}/${ids.join(',')}`, {
+    successMessageMode: 'message',
+  });
+}
+
+function randomQuestionList(params?: any) {
+  return requestClient.get<Question>(Api.randomList, { params });
+}
+
+export {
+  addQuestion,
+  deleteQuestion,
+  questionDetail,
+  questionList,
+  randomQuestionList,
+  updateQuestion,
+};

apps/web-ele/src/components/questionPreview/index.ts

@@ -0,0 +1 @@
+export { default, default as QuestionPreview } from './src/index.vue';

apps/web-ele/src/components/questionPreview/src/index.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+/**
+ * 试题预览组件
+ * 支持单选、多选、判断、填空、简答等题型
+ */
+import { isNumber } from 'lodash-es';
+
+interface QuestionItem {
+  id: number;
+  questionType: string;
+  questionContent: string;
+  options: null | string;
+  correctAnswer: string;
+  answerAnalysis: string;
+}
+
+interface Props {
+  questions: QuestionItem[]; // 试题数组
+}
+
+withDefaults(defineProps<Props>(), {
+  questions: () => [],
+});
+
+/**
+ * 计算每个试题的选项
+ */
+const getOptions = (question: QuestionItem): string[] => {
+  try {
+    const options = question.options ? JSON.parse(question.options) : [];
+    // 确保返回的是字符串数组
+    return Array.isArray(options) ? options.map(String) : [];
+  } catch {
+    return [];
+  }
+};
+
+/**
+ * 计算每个试题的正确答案
+ */
+const getCorrectAnswer = (question: QuestionItem): number[] => {
+  try {
+    const answer = JSON.parse(question.correctAnswer);
+    // 确保返回的是数字数组
+    return Array.isArray(answer)
+      ? answer.map((item: any) =>
+          isNumber(item) ? Number.parseInt(item.toString(), 10) : item,
+        )
+      : [];
+  } catch {
+    return [];
+  }
+};
+
+/**
+ * 获取选项字母标识（A、B、C...）
+ */
+const getOptionLabel = (index: number | string) => {
+  return String.fromCodePoint(65 + Number(index));
+};
+</script>
+
+<template>
+  <div class="question-preview">
+    <div
+      v-for="(question, index) in questions"
+      :key="question.id"
+      class="question-item mb-6"
+    >
+      <!-- 题目序号和内容 -->
+      <div class="question-header mb-3 flex items-start">
+        <span class="question-number mr-2 font-medium">{{ index + 1 }}.</span>
+        <div
+          class="question-content flex-1"
+          v-html="question.questionContent"
+        ></div>
+      </div>
+
+      <!-- 选项（单选、多选、判断） -->
+      <div
+        v-if="
+          ['single_choice', 'multiple_choice', 'judgment'].includes(
+            question.questionType,
+          )
+        "
+        class="question-options pl-6"
+      >
+        <div
+          v-for="(option, optionIndex) in getOptions(question)"
+          :key="optionIndex"
+          class="option-item mb-2 flex items-center"
+        >
+          <!-- 单选题 -->
+          <div
+            v-if="question.questionType === 'single_choice'"
+            class="flex w-full items-center"
+          >
+            <el-radio
+              :value="optionIndex"
+              :model-value="getCorrectAnswer(question)[0]"
+              disabled
+              class="mr-1 flex-shrink-0"
+            >
+              <span class="option-label mr-2 flex-shrink-0">
+                {{ getOptionLabel(optionIndex) }}.
+              </span>
+              <span class="option-content flex-1" v-html="option"></span>
+            </el-radio>
+          </div>
+
+          <!-- 多选题 -->
+          <div
+            v-else-if="question.questionType === 'multiple_choice'"
+            class="flex w-full items-center"
+          >
+            <el-checkbox
+              :value="optionIndex"
+              :checked="getCorrectAnswer(question).includes(optionIndex)"
+              disabled
+              class="mr-1 flex-shrink-0"
+            >
+              <span class="option-label mr-2 flex-shrink-0">
+                {{ getOptionLabel(optionIndex) }}.
+              </span>
+              <span class="option-content flex-1" v-html="option"></span>
+            </el-checkbox>
+          </div>
+
+          <!-- 判断题 -->
+          <div
+            v-else-if="question.questionType === 'judgment'"
+            class="flex w-full items-center"
+          >
+            <el-radio
+              :value="optionIndex"
+              :model-value="getCorrectAnswer(question)[0]"
+              disabled
+              class="mr-1 flex-shrink-0"
+            >
+              <span class="option-content flex-1" v-html="option"></span>
+            </el-radio>
+          </div>
+        </div>
+      </div>
+
+      <!-- 填空题 -->
+      <div
+        v-else-if="question.questionType === 'fill_blank'"
+        class="question-blanks flex items-start pl-6"
+      >
+        <div class="blank-label mr-2 flex-shrink-0 font-medium">答案：</div>
+        <div class="blank-answers flex-1 text-[#4E5969]">
+          {{ getCorrectAnswer(question).join('、') }}
+        </div>
+      </div>
+
+      <!-- 简答题 -->
+      <div
+        v-else-if="question.questionType === 'essay'"
+        class="question-essay flex items-start pl-6"
+      >
+        <div class="blank-label mr-2 flex-shrink-0 font-medium">答案：</div>
+        <div
+          class="essay-answer flex-1 text-[#4E5969]"
+          v-html="getCorrectAnswer(question)[0] || ''"
+        ></div>
+      </div>
+
+      <!-- 答案解析 -->
+      <div
+        v-if="question.answerAnalysis"
+        class="question-analysis mt-3 flex items-start pl-6"
+      >
+        <div class="analysis-label mr-2 flex-shrink-0 font-medium">解析：</div>
+        <div
+          class="analysis-content flex-1 text-[#4E5969]"
+          v-html="question.answerAnalysis"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>

apps/web-ele/src/components/tinymce/src/editor.vue

@@ -153,8 +153,8 @@ const initOptions = computed((): InitOptions => {
     contextmenu: 'link image table',
     default_link_target: '_blank',
     height,
-    image_advtab: true, // 图片高级选项
-    image_caption: true,
+    image_advtab: false, // 图片高级选项
+    image_caption: false,
     importcss_append: true,
     language: langName.value,
     link_title: false,
@@ -164,7 +164,7 @@ const initOptions = computed((): InitOptions => {
      * 允许粘贴图片 默认base64格式
      * images_upload_handler启用时为上传
      */
-    paste_data_images: true,
+    paste_data_images: false,
     plugins,
     quickbars_selection_toolbar:
       'bold italic | quicklink h2 h3 blockquote quickimage quicktable',

apps/web-ele/src/components/tinymce/src/img-upload.vue

@@ -89,9 +89,9 @@ function handleChange(info: Record<string, any>) {
       @change="handleChange"
     >
       <!-- 这里要改成i18n -->
-      <ElButton type="primary" v-bind="{ ...getButtonProps }">
+      <!-- <ElButton type="primary" v-bind="{ ...getButtonProps }">
         图片上传
-      </ElButton>
+      </ElButton> -->
     </ElUpload>
   </div>
 </template>

apps/web-ele/src/components/tinymce/src/tinymce.ts

@@ -4,8 +4,14 @@
 // colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
 
 // quickbars 快捷栏
+// export const plugins =
+//   'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons accordion';
+
 export const plugins =
-  'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons accordion';
+  'preview importcss searchreplace autolink autosave save directionality visualblocks visualchars fullscreen image link charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap emoticons accordion';
+
+// export const toolbar =
+//   'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl';
 
 export const toolbar =
-  'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl';
+  'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | fullscreen preview';

apps/web-ele/src/views/examManage/questionBank/config-data.tsx

@@ -0,0 +1,113 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+// 题型选项
+// single_choice-单选题、multiple_choice-多选题、judgment-判断题、essay-简答题、fill_blank-填空题
+export const questionTypeOptions = [
+  { label: '单选题', value: 'single_choice' },
+  { label: '多选题', value: 'multiple_choice' },
+  { label: '判断题', value: 'judgment' },
+  { label: '填空题', value: 'fill_blank' },
+  { label: '简答题', value: 'essay' },
+];
+
+// 试题难度选项 easy-简单、medium-中等、hard-困难
+export const difficultyOptions = [
+  { label: '简单', value: 'easy', color: '' },
+  { label: '中等', value: 'medium', color: 'yellow' },
+  { label: '困难', value: 'hard', color: 'red' },
+];
+
+export const queryFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'content',
+    label: '试题内容',
+    componentProps: {
+      placeholder: '请输入试题内容',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'questionType',
+    label: '题型',
+    componentProps: {
+      placeholder: '请选择题型',
+      options: questionTypeOptions,
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'difficultyLevel',
+    label: '试题难度',
+    componentProps: {
+      placeholder: '请选择试题难度',
+      options: difficultyOptions,
+    },
+  },
+];
+
+export const tableColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 80,
+  },
+  {
+    field: 'questionContent',
+    title: '试题内容',
+    minWidth: 300,
+    slots: {
+      default: ({ row }) => {
+        return h('div', { innerHTML: row.questionContent });
+      },
+    },
+  },
+  {
+    field: 'questionType',
+    title: '题型',
+    minWidth: 100,
+    formatter: ({ row }) => {
+      const questionType = questionTypeOptions.find(
+        (item) => item.value === row.questionType,
+      );
+      return questionType?.label || '-';
+    },
+  },
+  {
+    field: 'categoryName',
+    title: '类别',
+    minWidth: 120,
+  },
+  {
+    field: 'createBy',
+    title: '创建人',
+    minWidth: 120,
+  },
+  {
+    field: 'difficultyName',
+    title: '试题难度',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        const difficulty = difficultyOptions.find(
+          (item) => item.value === row.difficultyLevel,
+        );
+        // 字体颜色，返回 h函数
+        return h(
+          'span',
+          { style: { color: difficulty?.color || 'black' } },
+          difficulty?.label || '简单',
+        );
+      },
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 200,
+  },
+];

apps/web-ele/src/views/examManage/questionBank/index.vue

@@ -6,7 +6,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 
 import {
   DArrowLeft,
@@ -29,7 +29,11 @@ import {
   deleteQuestionCategory,
   questionCategoryTree,
 } from '#/api/exam/question/category';
+import { deleteQuestion, questionList } from '#/api/exam/question/question';
+// 导入预览组件
+import QuestionPreview from '#/components/questionPreview';
 
+import { queryFormSchema, tableColumns } from './config-data';
 import ChapterDrawer from './cpn/chapter/drawer.vue';
 
 // 路由实例
@@ -44,58 +48,7 @@ const isCollapse = ref(false);
 const chapterData = ref([]);
 
 // 选中的章节
-const selectedChapter = ref({});
-
-// 模拟试题数据
-const mockQuestionData = ref([
-  {
-    id: 1,
-    content: '下列关于JavaScript的说法，错误的是？',
-    questionType: 'single_choice',
-    questionTypeName: '单选题',
-    category: '基础知识',
-    creator: '管理员',
-    difficulty: 'medium',
-    difficultyName: '中等',
-    reminder: '重要',
-  },
-  {
-    id: 2,
-    content: 'Vue.js的核心特性有哪些？',
-    questionType: 'multiple_choice',
-    questionTypeName: '多选题',
-    category: '框架知识',
-    creator: '教师1',
-    difficulty: 'hard',
-    difficultyName: '困难',
-    reminder: '一般',
-  },
-  {
-    id: 3,
-    content: '简述CSS盒模型的概念',
-    questionType: 'essay',
-    questionTypeName: '简答题',
-    category: '前端基础',
-    creator: '教师2',
-    difficulty: 'easy',
-    difficultyName: '简单',
-    reminder: '重要',
-  },
-]);
-
-// 提醒选项
-const reminderOptions = [
-  { label: '重要', value: '重要' },
-  { label: '一般', value: '一般' },
-  { label: '普通', value: '普通' },
-];
-
-// 试题难度选项
-const difficultyOptions = [
-  { label: '简单', value: 'easy' },
-  { label: '中等', value: 'medium' },
-  { label: '困难', value: 'hard' },
-];
+const selectedChapter: any = ref({});
 
 // 表单配置
 const formOptions: VbenFormProps = {
@@ -105,34 +58,7 @@ const formOptions: VbenFormProps = {
       allowClear: true,
     },
   },
-  schema: [
-    {
-      component: 'Input',
-      fieldName: 'content',
-      label: '试题内容',
-      componentProps: {
-        placeholder: '请输入试题内容',
-      },
-    },
-    {
-      component: 'Select',
-      fieldName: 'reminder',
-      label: '提醒',
-      componentProps: {
-        placeholder: '请选择提醒等级',
-        options: reminderOptions,
-      },
-    },
-    {
-      component: 'Select',
-      fieldName: 'difficulty',
-      label: '试题难度',
-      componentProps: {
-        placeholder: '请选择试题难度',
-        options: difficultyOptions,
-      },
-    },
-  ],
+  schema: queryFormSchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
 };
 
@@ -143,44 +69,7 @@ const gridOptions: VxeGridProps = {
     reserve: true,
     trigger: 'default',
   },
-  columns: [
-    {
-      type: 'checkbox',
-      width: 80,
-    },
-    {
-      field: 'content',
-      title: '试题内容',
-      minWidth: 300,
-    },
-    {
-      field: 'questionTypeName',
-      title: '题型',
-      minWidth: 100,
-    },
-    {
-      field: 'category',
-      title: '类别',
-      minWidth: 120,
-    },
-    {
-      field: 'creator',
-      title: '创建人',
-      minWidth: 120,
-    },
-    {
-      field: 'difficultyName',
-      title: '试题难度',
-      minWidth: 100,
-    },
-    {
-      field: 'action',
-      fixed: 'right',
-      slots: { default: 'action' },
-      title: '操作',
-      width: 150,
-    },
-  ],
+  columns: tableColumns,
   size: 'medium',
   // 固定表格高度，避免高度不断增加
   height: 800,
@@ -201,40 +90,20 @@ const gridOptions: VxeGridProps = {
     },
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        // 模拟API请求
-        console.log('查询参数:', formValues, page);
-
-        // 模拟搜索过滤
-        let filteredData = [...mockQuestionData.value];
-
-        if (formValues.content) {
-          filteredData = filteredData.filter((item) =>
-            item.content.includes(formValues.content),
-          );
-        }
-
-        if (formValues.reminder) {
-          filteredData = filteredData.filter(
-            (item) => item.reminder === formValues.reminder,
-          );
-        }
-
-        if (formValues.difficulty) {
-          filteredData = filteredData.filter(
-            (item) => item.difficulty === formValues.difficulty,
-          );
-        }
-
-        // 模拟分页
-        const start = (page.currentPage - 1) * page.pageSize;
-        const end = start + page.pageSize;
-        const paginatedData = filteredData.slice(start, end);
-        console.log('分页数据:', paginatedData);
+        // 调用API获取试题列表
+        // 当前选择的章节ID
+        const chapterId = selectedChapter.value.id || 0;
+        const res: any = await questionList({
+          ...formValues,
+          categoryId: chapterId,
+          currentPage: page.currentPage,
+          pageSize: page.pageSize,
+        });
 
         // 确保返回格式正确，使用 items 作为数据键
         return {
-          items: paginatedData,
-          total: filteredData.length,
+          items: res.rows || [],
+          total: res.total || 0,
         };
       },
     },
@@ -306,20 +175,29 @@ const exportQuestions = () => {
 };
 
 // 编辑试题
-const editQuestion = (row) => {
+const editQuestion = (row: any) => {
   // 跳转到编辑页面，并传递试题ID
   router.push(`/examManage/questionBank/questionEdit?id=${row.id}`);
 };
-
+const previewQuestions: any = ref([]);
 // 预览试题
-const previewQuestion = (row) => {
-  // 跳转到预览页面，并传递试题ID
-  router.push(`/examManage/questionBank/questionPreview?id=${row.id}`);
+const previewQuestion = (row: any) => {
+  // 打开预览模态框，并传递试题数据
+  previewQuestions.value = [row];
+  previewModalApi.open();
 };
 
 // 删除试题
-const deleteQuestion = (row) => {
-  ElMessage.info('删除试题功能待实现');
+const deleteQuestionEvent = async (row: any) => {
+  // 二次确认
+  ElMessageBox.confirm('确认删除该试题吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await deleteQuestion([row.id]);
+    await basicTableApi.reload();
+  });
 };
 
 // 批量删除试题
@@ -335,8 +213,7 @@ const deleteHandle = () => {
     cancelButtonText: '取消',
     type: 'warning',
   }).then(async () => {
-    // 模拟批量删除操作
-    console.log('批量删除试题:', ids);
+    await deleteQuestion(ids);
     await basicTableApi.reload();
   });
 };
@@ -345,9 +222,18 @@ const [ChapterVbenDrawer, chapterVbenDrawerApi] = useVbenDrawer({
   connectedComponent: ChapterDrawer,
 });
 
+// 预览试题模态框
+const [PreviewModal, previewModalApi] = useVbenModal({
+  // connectedComponent: QuestionPreview,
+  title: '预览',
+  width: 800,
+  height: 600,
+  showCancelBtn: false,
+});
+
 const getChapterTree = async () => {
-  const { rows } = await questionCategoryTree();
-  chapterData.value = rows;
+  const data: any = await questionCategoryTree();
+  chapterData.value = data.rows || [];
 };
 
 // 页面加载时获取数据
@@ -457,9 +343,9 @@ onMounted(() => {
                   <ElButton type="primary" @click="importQuestions">
                     导入
                   </ElButton>
-                  <ElButton type="primary" @click="exportQuestions">
+                  <!-- <ElButton type="primary" @click="exportQuestions">
                     导出
-                  </ElButton>
+                  </ElButton> -->
                 </ElSpace>
               </template>
               <template #action="{ row }">
@@ -478,7 +364,7 @@ onMounted(() => {
                   <ElButton
                     type="text"
                     size="small"
-                    @click="deleteQuestion(row)"
+                    @click="deleteQuestionEvent(row)"
                     class="text-red-500"
                   >
                     <ElIcon><Delete /></ElIcon>
@@ -492,6 +378,9 @@ onMounted(() => {
       </div>
     </div>
     <ChapterVbenDrawer @reload="getChapterTree" />
+    <PreviewModal>
+      <QuestionPreview :questions="previewQuestions" />
+    </PreviewModal>
   </Page>
 </template>
 
@@ -624,6 +513,6 @@ onMounted(() => {
 
 .action-buttons {
   display: flex;
-  gap: 8px;
+  //gap: 8px;
 }
 </style>