fix

apps/web-ele/src/router/routes/local.ts

@@ -150,7 +150,7 @@ const localRoutes: RouteRecordStringComponent[] = [
     component: '/knowledge/edit/index',
     meta: {
       activePath: '/knowledge/edit',
-      icon: 'carbon:data-base', 
+      icon: 'carbon:data-base',
       title: '知识库编辑',
       hideInMenu: true,
     },
@@ -228,4 +228,3 @@ export const localMenuList: RouteRecordStringComponent[] = [
   // },
   ...localRoutes,
 ];
-

apps/web-ele/src/views/examManage/examPaper/cpns/examEdit/index.vue

@@ -0,0 +1,499 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+// 试卷表单数据
+const examForm = ref({
+  examName: '',
+  examCategory: '',
+});
+
+// 当前选中的题目索引
+const currentQuestionIndex = ref(0);
+
+// 新题目标题
+const newQuestionTitle = ref('');
+
+// 试卷题目数据
+const examQuestions = ref([
+  {
+    title: '第一题 选择题',
+    fixedQuestions: [
+      { type: '填空题', count: 120, score: 0 },
+      { type: '简答题', count: 120, score: 0 },
+      { type: '单选题', count: 120, score: 0 },
+      { type: '多选题', count: 120, score: 0 },
+    ],
+    randomQuestions: [
+      { type: '填空题', count: 120, score: 0 },
+      { type: '简答题', count: 120, score: 0 },
+      { type: '单选题', count: 120, score: 0 },
+      { type: '多选题', count: 120, score: 0 },
+    ],
+  },
+  {
+    title: '第二题 填空题',
+    fixedQuestions: [],
+    randomQuestions: [],
+  },
+  {
+    title: '第三题 判断题',
+    fixedQuestions: [],
+    randomQuestions: [],
+  },
+]);
+
+// 计算总题数
+const totalQuestions = computed(() => examQuestions.value.length);
+
+// 计算小题总数
+const totalSubQuestions = computed(() => {
+  return examQuestions.value.reduce((total, question) => {
+    return (
+      total + question.fixedQuestions.length + question.randomQuestions.length
+    );
+  }, 0);
+});
+
+// 计算总分
+const totalScore = computed(() => {
+  let score = 0;
+  examQuestions.value.forEach((question) => {
+    question.fixedQuestions.forEach((item) => {
+      score += item.score;
+    });
+    question.randomQuestions.forEach((item) => {
+      score += item.score;
+    });
+  });
+  return score;
+});
+
+// 获取单个题目总分
+const getQuestionTotalScore = (index: number) => {
+  const question = examQuestions.value[index];
+  let score = 0;
+  question.fixedQuestions.forEach((item) => {
+    score += item.score;
+  });
+  question.randomQuestions.forEach((item) => {
+    score += item.score;
+  });
+  return score;
+};
+
+// 计算分数变化
+const calculateScore = () => {
+  // 分数计算逻辑已通过computed属性实现
+};
+
+// 添加大题
+const addBigQuestion = () => {
+  examQuestions.value.push({
+    title: `第${examQuestions.value.length + 1}题 新题目`,
+    fixedQuestions: [],
+    randomQuestions: [],
+  });
+  currentQuestionIndex.value = examQuestions.value.length - 1;
+};
+</script>
+
+<template>
+  <div class="exam-edit-container">
+    <!-- 顶部区域 -->
+    <div class="top-section">
+      <div class="left-section">
+        <div class="form-item">
+          <label class="label">试卷名称：</label>
+          <el-input
+            v-model="examForm.examName"
+            placeholder="请输入试卷名称"
+            :maxlength="30"
+            show-word-limit
+            class="input"
+          />
+        </div>
+        <div class="form-item">
+          <label class="label">试卷分类：</label>
+          <el-select
+            v-model="examForm.examCategory"
+            placeholder="请选择"
+            class="select"
+          >
+            <el-option label="选择题" value="1" />
+            <el-option label="填空题" value="2" />
+            <el-option label="简答题" value="3" />
+            <el-option label="判断题" value="4" />
+          </el-select>
+        </div>
+      </div>
+      <div class="right-section">
+        <div class="stats">
+          <span>{{ totalQuestions }}大题</span>
+          <span class="separator">|</span>
+          <span>{{ totalSubQuestions }}小题</span>
+          <span class="separator">|</span>
+          <span>总分：{{ totalScore }}</span>
+        </div>
+        <el-button type="primary" size="default" class="save-btn">
+          保存
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 主体区域 -->
+    <div class="main-section">
+      <!-- 左侧导航 -->
+      <div class="left-nav">
+        <div class="nav-title">大题导航</div>
+        <div
+          v-for="(question, index) in examQuestions"
+          :key="index"
+          class="nav-item"
+          :class="{ active: currentQuestionIndex === index }"
+          @click="currentQuestionIndex = index"
+        >
+          {{ question.title }}
+        </div>
+        <el-input
+          v-model="newQuestionTitle"
+          placeholder="大题名称"
+          class="new-question-input"
+        />
+      </div>
+
+      <!-- 右侧内容 -->
+      <div class="right-content">
+        <!-- 题目编辑区域 -->
+        <div
+          v-for="(question, index) in examQuestions"
+          :key="index"
+          class="question-block"
+          v-show="currentQuestionIndex === index"
+        >
+          <div class="question-header">
+            <span class="question-title">{{ question.title }}</span>
+            <el-button type="text" icon="EditPen" class="edit-btn">
+              编辑
+            </el-button>
+          </div>
+
+          <!-- 固定试题 -->
+          <div class="question-type-section">
+            <div class="section-title">固定试题</div>
+            <el-table :data="question.fixedQuestions" style="width: 100%">
+              <el-table-column prop="type" label="试题类型" width="120" />
+              <el-table-column prop="count" label="试题数" width="100" />
+              <el-table-column prop="score" label="每道题分数" width="120">
+                <template #default="scope">
+                  <el-input-number
+                    v-model="scope.row.score"
+                    :min="0"
+                    :max="100"
+                    size="small"
+                    @change="calculateScore"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="120">
+                <template #default="scope">
+                  <el-button type="text" size="small" class="preview-btn">
+                    预览
+                  </el-button>
+                  <el-button type="text" size="small" class="delete-btn">
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-button type="text" icon="Plus" class="add-question-btn">
+              + 试题库中选题
+            </el-button>
+          </div>
+
+          <!-- 随机试题 -->
+          <div class="question-type-section">
+            <div class="section-title">随机试题</div>
+            <el-table :data="question.randomQuestions" style="width: 100%">
+              <el-table-column prop="type" label="试题类型" width="120" />
+              <el-table-column prop="count" label="试题数" width="100" />
+              <el-table-column prop="score" label="每道题分数" width="120">
+                <template #default="scope">
+                  <el-input-number
+                    v-model="scope.row.score"
+                    :min="0"
+                    :max="100"
+                    size="small"
+                    @change="calculateScore"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="120">
+                <template #default="scope">
+                  <el-button type="text" size="small" class="preview-btn">
+                    预览
+                  </el-button>
+                  <el-button type="text" size="small" class="delete-btn">
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-button type="text" icon="Plus" class="add-question-btn">
+              + 试题库中选题
+            </el-button>
+          </div>
+
+          <div class="question-footer">
+            <span class="question-score"
+              >合计：{{ getQuestionTotalScore(index) }}分</span
+            >
+          </div>
+        </div>
+
+        <!-- 添加大题按钮 -->
+        <el-button
+          type="dashed"
+          icon="Plus"
+          class="add-big-question-btn"
+          @click="addBigQuestion"
+        >
+          + 添加大题
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.exam-edit-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+}
+
+/* 顶部区域 */
+.top-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.left-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex: 1;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.label {
+  font-size: 14px;
+  color: #606266;
+  min-width: 80px;
+  text-align: right;
+}
+
+.input {
+  width: 300px;
+}
+
+.select {
+  width: 300px;
+}
+
+.right-section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 15px;
+}
+
+.stats {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  font-size: 14px;
+  color: #303133;
+}
+
+.separator {
+  color: #dcdfe6;
+  font-size: 16px;
+}
+
+.save-btn {
+  width: 100px;
+}
+
+/* 主体区域 */
+.main-section {
+  display: flex;
+  gap: 20px;
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 左侧导航 */
+.left-nav {
+  width: 250px;
+  border-right: 1px solid #e6e8eb;
+  padding-right: 20px;
+}
+
+.nav-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #303133;
+}
+
+.nav-item {
+  padding: 10px 15px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  background-color: #f5f7fa;
+}
+
+.nav-item:hover {
+  background-color: #ecf5ff;
+  color: #409eff;
+}
+
+.nav-item.active {
+  background-color: #ecf5ff;
+  color: #409eff;
+  border-left: 3px solid #409eff;
+}
+
+.new-question-input {
+  margin-top: 10px;
+}
+
+/* 右侧内容 */
+.right-content {
+  flex: 1;
+  padding-left: 20px;
+}
+
+/* 题目块 */
+.question-block {
+  margin-bottom: 30px;
+  padding: 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+}
+
+.question-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.question-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.edit-btn {
+  color: #409eff;
+}
+
+/* 题目类型区块 */
+.question-type-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: white;
+  border-radius: 6px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #303133;
+}
+
+.add-question-btn {
+  color: #409eff;
+  margin-top: 10px;
+}
+
+.question-footer {
+  text-align: right;
+  margin-top: 15px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.question-score {
+  font-weight: bold;
+  color: #303133;
+}
+
+/* 添加大题按钮 */
+.add-big-question-btn {
+  width: 100%;
+  margin-top: 20px;
+}
+
+/* 操作按钮样式 */
+.preview-btn {
+  color: #409eff;
+  margin-right: 10px;
+}
+
+.delete-btn {
+  color: #f56c6c;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .input,
+  .select {
+    width: 250px;
+  }
+}
+
+@media (max-width: 768px) {
+  .top-section {
+    flex-direction: column;
+  }
+
+  .right-section {
+    align-items: flex-start;
+  }
+
+  .main-section {
+    flex-direction: column;
+  }
+
+  .left-nav {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #e6e8eb;
+    padding-right: 0;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+  }
+
+  .right-content {
+    padding-left: 0;
+  }
+}
+</style>

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

@@ -1,30 +1,33 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '@vben/common-ui';
+
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+
 import { Page } from '@vben/common-ui';
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import {
-  Plus,
-  Edit,
-  Delete,
-  DArrowLeft,
-  Expand,
   CopyDocument,
+  DArrowLeft,
+  Delete,
   Download,
+  Edit,
+  Expand,
+  Plus,
 } from '@element-plus/icons-vue';
 import {
-  ElTree,
   ElButton,
   ElIcon,
   ElMessage,
-  ElSpace,
   ElMessageBox,
+  ElSpace,
+  ElTree,
 } from 'element-plus';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 // 路由实例
 const router = useRouter();
 const route = useRoute();
@@ -192,26 +195,26 @@ const gridOptions: VxeGridProps = {
       query: async ({ page }, formValues = {}) => {
         // 模拟API请求
         console.log('查询参数:', formValues, page);
-        
+
         // 模拟搜索过滤
         let filteredData = [...mockExamData.value];
-        
+
         if (formValues.name) {
-          filteredData = filteredData.filter(item => 
-            item.name.includes(formValues.name)
+          filteredData = filteredData.filter((item) =>
+            item.name.includes(formValues.name),
           );
         }
-        
+
         // 模拟分页
         const start = (page.currentPage - 1) * page.pageSize;
         const end = start + page.pageSize;
         const paginatedData = filteredData.slice(start, end);
         console.log('分页数据:', paginatedData);
-        
+
         // 确保返回格式正确，使用 items 作为数据键
-        return { 
-          items: paginatedData, 
-          total: filteredData.length 
+        return {
+          items: paginatedData,
+          total: filteredData.length,
         };
       },
     },
@@ -260,7 +263,7 @@ const deleteChapter = (node) => {
 // 新增试卷
 const addExam = () => {
   // 跳转到新页面
-  router.push('/examManage/examEdit');
+  router.push('/examManage/examEdit/0');
 };
 
 // 添加时间
@@ -280,7 +283,7 @@ const deleteHandle = () => {
   if (ids.length <= 0) {
     return;
   }
-  
+
   ElMessageBox.confirm(`确认删除选中的${ids.length}条数据吗?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
@@ -326,16 +329,15 @@ onMounted(() => {
 <template>
   <Page :auto-content-height="true">
     <div class="knowledge-detail">
-
       <!-- 主体内容区 -->
       <div class="main-content">
         <!-- 左侧目录 -->
-        <div class="left-sidebar" :class="{ 'collapsed': isCollapse }">
+        <div class="left-sidebar" :class="{ collapsed: isCollapse }">
           <!-- 折叠按钮 -->
           <div class="collapse-btn" @click="isCollapse = true">
             <ElIcon><DArrowLeft /></ElIcon>
           </div>
-          
+
           <div class="sidebar-content">
             <!-- 章节树 -->
             <div class="chapter-tree">
@@ -387,18 +389,31 @@ onMounted(() => {
 
         <!-- 中间内容 -->
         <div class="center-content">
-          <ElIcon v-if="isCollapse" :size="20" class="collapse-control-btn" @click="isCollapse = false"><Expand /></ElIcon>
-          
+          <ElIcon
+            v-if="isCollapse"
+            :size="20"
+            class="collapse-control-btn"
+            @click="isCollapse = false"
+          >
+            <Expand />
+          </ElIcon>
+
           <!-- 试卷列表区域 -->
           <div class="question-list">
             <!-- 试卷列表 -->
             <BasicTable table-title="试卷管理列表">
               <template #toolbar-tools>
                 <ElSpace>
-                  <ElButton type="danger" :disabled=" !(basicTableApi?.grid?.getCheckboxRecords?.()?.length > 0) " @click="deleteHandle" >
+                  <ElButton
+                    type="danger"
+                    :disabled="
+                      !(basicTableApi?.grid?.getCheckboxRecords?.()?.length > 0)
+                    "
+                    @click="deleteHandle"
+                  >
                     批量删除
                   </ElButton>
-                  <ElButton type="primary" @click="addExam" >
+                  <ElButton type="primary" @click="addExam">
                     新增试卷
                   </ElButton>
                 </ElSpace>
@@ -409,7 +424,7 @@ onMounted(() => {
                     type="text"
                     size="small"
                     @click="previewExam(row)"
-                    style="margin-left: 0px;"
+                    style="margin-left: 0px"
                   >
                     预览
                   </ElButton>
@@ -417,7 +432,7 @@ onMounted(() => {
                     type="text"
                     size="small"
                     @click="copyExam(row)"
-                    style="margin-left: 0px;"
+                    style="margin-left: 0px"
                   >
                     <ElIcon><CopyDocument /></ElIcon>
                     复制
@@ -426,7 +441,7 @@ onMounted(() => {
                     type="text"
                     size="small"
                     @click="downloadExam(row)"
-                    style="margin-left: 0px;"
+                    style="margin-left: 0px"
                   >
                     <ElIcon><Download /></ElIcon>
                     下载
@@ -435,7 +450,7 @@ onMounted(() => {
                     type="text"
                     size="small"
                     @click="editExam(row)"
-                    style="margin-left: 0px;"
+                    style="margin-left: 0px"
                   >
                     <ElIcon><Edit /></ElIcon>
                     编辑
@@ -445,7 +460,7 @@ onMounted(() => {
                     size="small"
                     @click="deleteExam(row)"
                     class="text-red-500"
-                    style="margin-left: 0px;"
+                    style="margin-left: 0px"
                   >
                     <ElIcon><Delete /></ElIcon>
                     删除
@@ -591,15 +606,3 @@ onMounted(() => {
   display: flex;
 }
 </style>
-
-
-
-
-
-
-
-
-
-
-
-