fix

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

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 // 导入依赖
-import type { VbenFormProps } from '@vben/common-ui';
 import type { EchartsUIType } from '@vben/plugins/echarts';
-
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { ElButton } from 'element-plus';
@@ -95,7 +93,7 @@ const switchTab = (tab: string) => {
 const questionStatsColumns: VxeGridProps['columns'] = [
   { title: '序号', width: 80, field: 'id', type: 'seq' },
   { title: '题目类别', width: 120, field: 'category' },
-  { title: '题目名称', width: 400, field: 'name' },
+  { title: '题目名称', field: 'name' },
   { title: '正确数', width: 100, field: 'correctCount' },
   { title: '正确率', width: 100, field: 'correctRate' },
 ];
@@ -171,29 +169,20 @@ const questionStatsGridOptions: VxeGridProps = {
   id: 'exam-paper-question-stats',
 };
 
-// 表单配置（无搜索表单）
-const questionStatsFormOptions: VbenFormProps = {
-  commonConfig: {
-    labelWidth: 80,
-    componentProps: { allowClear: true },
-  },
-  schema: [],
-};
 
 // 创建表格组件
 const [QuestionStatsTable] = useVbenVxeGrid({
-  formOptions: questionStatsFormOptions,
   gridOptions: questionStatsGridOptions,
 });
 
 // ========================== 操作日志表格 ==========================
 // 列配置
 const operationLogsColumns: VxeGridProps['columns'] = [
-  { title: '序号', width: 80, field: 'id', type: 'seq' },
-  { title: '操作部门', width: 150, field: 'department' },
-  { title: '操作人', width: 120, field: 'operator' },
-  { title: '操作内容', width: 300, field: 'content' },
-  { title: '操作时间', width: 180, field: 'time' },
+  { title: '序号',field: 'id', type: 'seq' },
+  { title: '操作部门', field: 'department' },
+  { title: '操作人', field: 'operator' },
+  { title: '操作内容', field: 'content' },
+  { title: '操作时间', field: 'time' },
 ];
 
 // 表格配置
@@ -253,7 +242,8 @@ const operationLogsGridOptions: VxeGridProps = {
   id: 'exam-paper-operation-logs',
 };
 
-// 表单配置（无搜索表单）
+// 注意：以下表单配置已不再使用
+/*
 const operationLogsFormOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 80,
@@ -261,10 +251,10 @@ const operationLogsFormOptions: VbenFormProps = {
   },
   schema: [],
 };
+*/
 
 // 创建表格组件
 const [OperationLogsTable] = useVbenVxeGrid({
-  formOptions: operationLogsFormOptions,
   gridOptions: operationLogsGridOptions,
 });
 
@@ -310,7 +300,8 @@ const scoreRanksGridOptions: VxeGridProps = {
   id: 'exam-paper-score-ranks',
 };
 
-// 表单配置（无搜索表单）
+// 注意：以下表单配置已不再使用
+/*
 const scoreRanksFormOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 80,
@@ -318,10 +309,10 @@ const scoreRanksFormOptions: VbenFormProps = {
   },
   schema: [],
 };
+*/
 
 // 创建表格组件
 const [ScoreRanksTable] = useVbenVxeGrid({
-  formOptions: scoreRanksFormOptions,
   gridOptions: scoreRanksGridOptions,
 });
 
@@ -360,17 +351,11 @@ const updateChart = () => {
             borderWidth: 2,
           },
           label: {
-            show: true,
-            position: 'center',
-            formatter: '{b}\n{c}',
-            fontSize: 18,
-            fontWeight: 'bold',
+            show: false
           },
           emphasis: {
             label: {
-              show: true,
-              fontSize: '20',
-              fontWeight: 'bold',
+              show: false
             },
           },
           labelLine: { show: false },
@@ -384,7 +369,7 @@ const updateChart = () => {
         formatter: '{b}: {c}<br/>参与率: 60.00%',
       },
     });
-  } else {
+  } else if (chartType.value === 'pass') {
     // 及格情况图表
     renderEcharts({
       series: [
@@ -398,17 +383,11 @@ const updateChart = () => {
             borderWidth: 2,
           },
           label: {
-            show: true,
-            position: 'center',
-            formatter: '{b}\n{c}',
-            fontSize: 18,
-            fontWeight: 'bold',
+            show: false
           },
           emphasis: {
             label: {
-              show: true,
-              fontSize: '20',
-              fontWeight: 'bold',
+              show: false
             },
           },
           labelLine: { show: false },
@@ -425,6 +404,177 @@ const updateChart = () => {
   }
 };
 
+// ========================== 表单数据 ==========================
+// 定义表单数据
+const formData = ref({
+  ruleName: '',
+  questionTypes: [] as string[],
+  participants: [] as string[],
+  correctors: [] as string[],
+  timeRange: [] as [Date, Date] | null,
+  executionMode: '',
+});
+
+// 表单验证规则
+const formRules = ref({
+  ruleName: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
+  questionTypes: [{ required: true, message: '请选择题目类型', trigger: 'change' }],
+  participants: [{ required: true, message: '请选择参与人员', trigger: 'change' }],
+  correctors: [{ required: true, message: '请选择批改人员', trigger: 'change' }],
+  timeRange: [{ required: true, message: '请选择规则起止时间', trigger: 'change' }],
+  executionMode: [{ required: true, message: '请选择规则执行方式', trigger: 'change' }],
+});
+
+// 题目类型选项
+const questionTypeOptions = [
+  { value: 'single', label: '单选题' },
+  { value: 'multiple', label: '多选题' },
+  { value: 'judgment', label: '判断题' },
+  { value: 'fill', label: '填空题' },
+  { value: 'short', label: '简答题' },
+];
+
+// 表单引用
+const formRef = ref<InstanceType<typeof ElForm> | null>(null);
+
+// 监听题目类型变化，初始化新增类型的默认值
+watch(
+  () => formData.value.questionTypes,
+  (newTypes, oldTypes) => {
+    // 如果是新增类型，初始化默认值
+    const addedTypes = newTypes.filter(type => !oldTypes.includes(type));
+    addedTypes.forEach(type => {
+      formData.value[`questionCount_${type}`] = 0;
+      formData.value[`extractType_${type}`] = 'random';
+      formData.value[`scorePerQuestion_${type}`] = 0;
+    });
+  },
+  { deep: true }
+);
+
+// 计算每种题型的总分
+const calculateTypeTotal = (type: string): number => {
+  const count = Number(formData.value[`questionCount_${type}`] || 0);
+  const scorePer = Number(formData.value[`scorePerQuestion_${type}`] || 0);
+  return count * scorePer;
+};
+
+// 计算所有题型的总分
+const grandTotal = computed(() => {
+  const types = formData.value.questionTypes || [];
+  return types.reduce((total, type) => {
+    return total + calculateTypeTotal(type);
+  }, 0);
+});
+
+// 计算所有题型的总题数
+const totalQuestions = computed(() => {
+  const types = formData.value.questionTypes || [];
+  return types.reduce((total, type) => {
+    return total + Number(formData.value[`questionCount_${type}`] || 0);
+  }, 0);
+});
+
+// 更新数量或分值时重新计算
+const updateCalculations = () => {
+  // 计算属性会自动更新，无需手动调用
+};
+
+// 定义抽屉
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: '添加规则',
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      drawerApi.drawerLoading(true);
+      // 可以在这里加载表单数据
+    } catch (error) {
+      console.error(error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+  async onClosed() {
+    // 重置表单
+    if (formRef.value) {
+      formRef.value.resetFields();
+    }
+  },
+  async onConfirm() {
+    try {
+      drawerApi.drawerLoading(true);
+      if (!formRef.value) return;
+      
+      await formRef.value.validate((valid) => {
+        if (!valid) {
+          return;
+        }
+        // 处理表单提交逻辑
+        console.log('提交的数据:', formData.value);
+        drawerApi.close();
+      });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+});
+
+// 打开抽屉
+const openAddCategoryModal = () => {
+  drawerApi.open();
+};
+
+// 获取题目类型中文名称
+const getQuestionTypeName = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    single: '单选题',
+    multiple: '多选题',
+    judgment: '判断题',
+    fill: '填空题',
+    short: '简答题',
+  };
+  return typeMap[type] || type;
+};
+
+// 注意：以下函数是旧的useVbenForm实现方式，已被新的计算属性替代
+// 保留仅供参考，实际已不再使用
+/*
+const calculateTypeTotal = (type: string): number => {
+  const values = formApi.getValues();
+  const count = Number(values[`questionCount_${type}`] || 0);
+  const scorePer = Number(values[`scorePerQuestion_${type}`] || 0);
+  return count * scorePer;
+};
+
+const calculateGrandTotal = (): number => {
+  const values = formApi.getValues();
+  const types = values.questionTypes || [];
+  return types.reduce((total, type) => {
+    return total + calculateTypeTotal(type);
+  }, 0);
+};
+
+const calculateTotalQuestions = (): number => {
+  const values = formApi.getValues();
+  const types = values.questionTypes || [];
+  return types.reduce((total, type) => {
+    return total + Number(values[`questionCount_${type}`] || 0);
+  }, 0);
+};
+
+const calculateTotal = () => {
+  const values = formApi.getValues();
+  const types = values.questionTypes || [];
+  types.forEach(type => calculateTypeTotal(type));
+  calculateGrandTotal();
+  calculateTotalQuestions();
+};
+*/
+
 // ========================== 生命周期钩子 ==========================
 onMounted(() => {
   // 初始化图表
@@ -438,15 +588,10 @@ onMounted(() => {
       <!-- 左侧考卷分类 -->
       <div class="left-panel">
         <div class="panel-header">
-          <h2>考卷分类</h2>
-        </div>
-        <div class="search-container">
-          <input
-            v-model="searchKeyword"
-            type="text"
-            class="search-input"
-            placeholder="搜索考卷分类"
-          />
+          <h2>考卷管理</h2>
+          <button class="add-btn" @click="openAddCategoryModal">
+            添加考卷规则
+          </button>
         </div>
         <div class="category-list">
           <div
@@ -499,12 +644,12 @@ onMounted(() => {
 
         <!-- 数据看板内容 -->
         <div v-if="activeTab === 'dashboard'" class="dashboard-content">
-          <QuestionStatsTable table-title="题目统计" />
+          <QuestionStatsTable/>
         </div>
 
         <!-- 操作日志内容 -->
         <div v-if="activeTab === 'log'" class="log-content">
-          <OperationLogsTable table-title="操作日志" />
+          <OperationLogsTable/>
         </div>
 
         <!-- 下方统计区域 -->
@@ -541,7 +686,7 @@ onMounted(() => {
             <div class="section-header">
               <h3>人员得分排名</h3>
             </div>
-            <ScoreRanksTable table-title="人员得分排名">
+            <ScoreRanksTable>
               <template #action="{ row }">
                 <ElButton size="small" @click="viewDetail(row.id)">
                   查看
@@ -553,6 +698,114 @@ onMounted(() => {
       </div>
     </div>
   </Page>
+
+  <!-- 添加考卷规则抽屉 -->
+  <Drawer class="w-[800px]">
+    <ElForm ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+      <ElFormItem label="规则名称" prop="ruleName">
+        <ElInput v-model="formData.ruleName" placeholder="请输入规则名称" />
+      </ElFormItem>
+      
+      <ElFormItem label="题目类型" prop="questionTypes">
+        <ElSelect v-model="formData.questionTypes" multiple placeholder="请选择题目类型">
+          <ElOption
+            v-for="option in questionTypeOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </ElSelect>
+      </ElFormItem>
+      
+      <!-- 动态表格：题目数量和分值配置 -->
+      <ElFormItem label="题目配置">
+        <div v-if="formData.questionTypes.length > 0">
+          <ElTable :data="formData.questionTypes" border style="width: 100%">
+            <ElTableColumn prop="type" label="类型" width="120">
+              <template #default="scope">
+                {{ getQuestionTypeName(scope.row) }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn prop="count" label="数量" width="120">
+              <template #default="scope">
+                <ElInput-number
+                  v-model="formData[`questionCount_${scope.row}`]"
+                  :min="0"
+                  :step="1"
+                  @change="updateCalculations"
+                  style="width: 100%"
+                />
+              </template>
+            </ElTableColumn>
+            <ElTableColumn prop="extract" label="抽取方式" width="120">
+              <template #default="scope">
+                <ElSelect v-model="formData[`extractType_${scope.row}`]" style="width: 100%">
+                  <ElOption label="随机" value="random" />
+                </ElSelect>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn prop="score" label="每题分值" width="120">
+              <template #default="scope">
+                <ElInput-number
+                  v-model="formData[`scorePerQuestion_${scope.row}`]"
+                  :min="0"
+                  :step="0.5"
+                  @change="updateCalculations"
+                  style="width: 100%"
+                />
+              </template>
+            </ElTableColumn>
+            <ElTableColumn prop="total" label="合计分值" width="120">
+              <template #default="scope">
+                {{ calculateTypeTotal(scope.row) }}
+              </template>
+            </ElTableColumn>
+          </ElTable>
+          
+          <!-- 汇总信息 -->
+          <div class="summary-info" style=" display: flex; align-items: center; justify-content: flex-end; padding: 12px;margin-top: 16px; background-color: #f5f7fa; border-radius: 4px;">
+            <ElDescriptions :column="2" border size="small" style="width: auto;">
+              <ElDescriptionsItem label="总题数">{{ totalQuestions }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="总分值">{{ grandTotal }}</ElDescriptionsItem>
+            </ElDescriptions>
+          </div>
+        </div>
+        <div v-else style="padding: 20px; color: #999; text-align: center; background-color: #fafafa; border: 1px dashed #dcdfe6; border-radius: 4px;">
+         
+          请先选择题目类型
+        </div>
+      </ElFormItem>
+      
+      <ElFormItem label="参与人员" prop="participants">
+        <ElSelect v-model="formData.participants" multiple placeholder="请选择参与人员">
+          <!-- 这里可以根据实际情况添加参与人员选项 -->
+        </ElSelect>
+      </ElFormItem>
+      
+      <ElFormItem label="批改人员" prop="correctors">
+        <ElSelect v-model="formData.correctors" multiple placeholder="请选择批改人员">
+          <!-- 这里可以根据实际情况添加批改人员选项 -->
+        </ElSelect>
+      </ElFormItem>
+      
+      <ElFormItem label="规则起止时间" prop="timeRange">
+        <ElDatePicker
+          v-model="formData.timeRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 100%"
+        />
+      </ElFormItem>
+      
+      <ElFormItem label="规则执行方式" prop="executionMode">
+        <ElSelect v-model="formData.executionMode" placeholder="请选择规则执行方式">
+          <!-- 这里可以根据实际情况添加执行方式选项 -->
+        </ElSelect>
+      </ElFormItem>
+    </ElForm>
+  </Drawer>
 </template>
 
 <style lang="scss" scoped>
@@ -571,14 +824,14 @@ onMounted(() => {
   flex-direction: column;
   background-color: #fff;
   border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }
 
 .panel-header {
   display: flex;
   gap: 16px;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   padding: 16px;
   border-bottom: 1px solid #e8e8e8;
 }
@@ -589,18 +842,18 @@ onMounted(() => {
 }
 
 .search-input {
+  box-sizing: border-box;
   width: 100%;
   padding: 8px 12px;
   font-size: 14px;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   transition: all 0.3s;
-  box-sizing: border-box;
 
   &:focus {
-    outline: none;
     border-color: #1890ff;
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    outline: none;
+    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
   }
 }
 
@@ -611,6 +864,21 @@ onMounted(() => {
   color: #333;
 }
 
+.add-btn {
+  padding: 6px 16px;
+  font-size: 14px;
+  color: white;
+  cursor: pointer;
+  background-color: #1890ff;
+  border: none;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #40a9ff;
+  }
+}
+
 .exam-info {
   display: flex;
   flex-wrap: wrap;
@@ -644,13 +912,13 @@ onMounted(() => {
 
   &:hover {
     background-color: #e6f7ff;
-    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+    box-shadow: 0 2px 8px rgb(24 144 255 / 15%);
   }
 
   &.active {
     background-color: #e6f7ff;
     border-color: #1890ff;
-    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+    box-shadow: 0 2px 8px rgb(24 144 255 / 15%);
   }
 }
 
@@ -674,8 +942,8 @@ onMounted(() => {
 /* 右侧占位符样式 */
 .placeholder {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   height: 100%;
   font-size: 16px;
   color: #999;
@@ -693,8 +961,8 @@ onMounted(() => {
 .tab-item {
   padding: 12px 20px;
   font-size: 14px;
-  cursor: pointer;
   color: #666;
+  cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all 0.3s;
 
@@ -703,9 +971,9 @@ onMounted(() => {
   }
 
   &.active {
+    font-weight: 500;
     color: #1890ff;
     border-bottom-color: #1890ff;
-    font-weight: 500;
   }
 }
 
@@ -713,9 +981,9 @@ onMounted(() => {
 .dashboard-content,
 .log-content {
   flex: 1;
+  min-height: 300px;
   padding: 16px;
   overflow-y: auto;
-  min-height: 300px;
 }
 
 /* 下方统计区域 */
@@ -732,15 +1000,15 @@ onMounted(() => {
 .rank-section {
   display: flex;
   flex-direction: column;
+  padding: 16px;
   background-color: #fafafa;
   border-radius: 6px;
-  padding: 16px;
 }
 
 .section-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 16px;
 }
 
@@ -760,8 +1028,8 @@ onMounted(() => {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   text-align: center;
+  transform: translate(-50%, -50%);
 }
 
 .count-label {
@@ -782,4 +1050,56 @@ onMounted(() => {
     border-radius: 4px;
   }
 }
+
+/* 动态生成的表格样式 */
+.vben-table {
+  overflow: hidden;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.vben-table th {
+  font-weight: 500;
+  color: #333;
+  background-color: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.vben-table td {
+  color: #666;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.vben-table tr:last-child td {
+  border-bottom: none;
+}
+
+/* 动态生成的表单控件样式 */
+.vben-input,
+.vben-select {
+  height: 28px;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-color: #d9d9d9;
+  border-radius: 4px;
+  outline: none;
+  transition: all 0.3s;
+
+  &:focus {
+    border-color: #1890ff;
+    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+  }
+}
+
+/* 汇总信息样式 */
+.summary-info {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 12px;
+  margin-top: 12px;
+  background-color: #fafafa;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
 </style>