chore: update

src/modules/admin/lab/experiment/components/GradeRulesDialog.vue

@@ -19,6 +19,7 @@ const emit = defineEmits<{
 
 const formRef = $ref<FormInstance>()
 const form = reactive<any>({
+  experiment_id: props.data.id,
   is_show: '1',
   rule_list: [{ name: '实验报告', type: 1, percent: 100, rule_mode: 1 }]
 })
@@ -76,7 +77,7 @@ function handleSubmit() {
   }
 
   formRef?.validate().then(() => {
-    const params = { experiment_id: props.data.id, ...form, rule_list: JSON.stringify(form.rule_list) }
+    const params = { ...form, rule_list: JSON.stringify(form.rule_list) }
     updateExperimentGradeRule(params).then(() => {
       ElMessage({ message: '保存成功', type: 'success' })
       emit('update')

src/modules/admin/lab/experiment/components/ReportDesign.vue

@@ -3,11 +3,10 @@ import type { Component } from 'vue'
 import { Delete } from '@element-plus/icons-vue'
 import { ElMessageBox } from 'element-plus'
 import draggable from 'vuedraggable'
-
-const ReportDesignContent = defineAsyncComponent(() => import('./ReportDesignContent.vue'))
-const ReportDesignAttachment = defineAsyncComponent(() => import('./ReportDesignAttachment.vue'))
-const ReportDesignQuestion = defineAsyncComponent(() => import('./ReportDesignQuestion.vue'))
-const ReportDesignPaper = defineAsyncComponent(() => import('./ReportDesignPaper.vue'))
+import ReportDesignContent from './ReportDesignContent.vue'
+import ReportDesignAttachment from './ReportDesignAttachment.vue'
+import ReportDesignQuestion from './ReportDesignQuestion.vue'
+import ReportDesignPaper from './ReportDesignPaper.vue'
 
 interface Props {
   modelValue: any[]
@@ -36,12 +35,14 @@ function getComponent(type: number) {
 
 // 添加
 function handleAdd(type: number) {
-  datalist.unshift({ type })
+  datalist.unshift({ type, id: Date.now(), name: '', score: 10 })
+  emit('update:modelValue', datalist)
 }
 // 删除
 function handleRemove(index: number) {
   ElMessageBox.confirm('删除组件将导致报告分值的变化，请确认是否删除组件？', '提示').then(() => {
     datalist.splice(index, 1)
+    emit('update:modelValue', datalist)
   })
 }
 function handleChange(data: any, index: number) {
@@ -57,8 +58,9 @@ function handleChange(data: any, index: number) {
         <el-button type="primary" @click="handleAdd(1)">添加内容组件</el-button>
         <el-button type="primary" @click="handleAdd(2)">添加附件组件</el-button>
         <el-button type="primary" @click="handleAdd(3)">添加思考题组件</el-button>
-        <el-button type="primary" @click="handleAdd(4)">添加试卷组件</el-button>
+        <el-button type="primary" disabled @click="handleAdd(4)">添加试卷组件</el-button>
       </el-button-group>
+      <slot name="header"></slot>
     </div>
     <div class="report-design-bd">
       <draggable v-model="datalist" item-key="id">
@@ -66,6 +68,7 @@ function handleChange(data: any, index: number) {
           <div class="report-design-item-card">
             <component
               :is="getComponent(element.type)"
+              :index="index"
               :data="element"
               @change="(data:any) => handleChange(data, index)" />
             <el-button type="danger" :icon="Delete" circle @click="handleRemove(index)" />
@@ -77,6 +80,10 @@ function handleChange(data: any, index: number) {
 </template>
 
 <style lang="scss">
+.report-design-hd {
+  display: flex;
+  align-items: center;
+}
 .report-design-item-card {
   display: flex;
   align-items: center;

src/modules/admin/lab/experiment/components/ReportDesignAttachment.vue

 <script setup lang="ts">
 interface Props {
+  index: number
   data: any
 }
 const props = defineProps<Props>()
@@ -28,50 +29,62 @@ watchEffect(() => {
 })
 
 watch(form, value => emit('change', value), { deep: true })
+
+function handleScoreChange(value: number) {
+  form.min_score = Math.min(value, form.min_score)
+  form.has_score = Math.min(value, form.has_score)
+  form.no_score = Math.min(value, form.no_score)
+}
 </script>
 
 <template>
   <div class="report-design-item">
-    <el-form :model="form" label-suffix="：">
-      <el-row :gutter="40">
-        <el-col :span="6">
-          <el-form-item label="附件组件名称" prop="name" label-width="130px">
-            <el-input v-model="form.name" placeholder="例：实验源代码程序包" maxlength="20" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="分值" prop="score">
-            <el-input-number :min="0" v-model="form.score" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="评分规则" prop="rule_mode">
-            <el-radio-group v-model="form.rule_mode">
-              <el-radio :label="1">人工评分</el-radio>
-              <el-radio :label="2">自动评分</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="最低分" prop="min_score">
-            <el-input-number :min="0" v-model="form.min_score" v-if="form.rule_mode === 1" />
-            <template v-else>
-              <el-form-item label="有附件" label-width="auto" style="margin-right: 10px; margin-bottom: 10px">
-                <el-input-number :min="0" v-model="form.has_score" />
-              </el-form-item>
-              <el-form-item label="无附件" label-width="auto" style="margin-bottom: 10px">
-                <el-input-number :min="0" v-model="form.no_score" />
-              </el-form-item>
-            </template>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label="附件类型" prop="categories" label-width="130px">
-        <el-checkbox-group v-model="form.categories">
-          <el-checkbox :label="1">实验截图</el-checkbox>
-          <el-checkbox :label="2">本地文件</el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
-    </el-form>
+    <el-row :gutter="40">
+      <el-col :span="6">
+        <el-form-item
+          label="附件组件名称"
+          label-width="130px"
+          :prop="'detail_list.' + index + '.name'"
+          :rules="[{ required: true, message: '请输入' }]">
+          <el-input v-model="form.name" placeholder="例：实验源代码程序包" maxlength="20" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="分值" prop="score">
+          <el-input-number :min="0" v-model="form.score" @change="handleScoreChange" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="评分规则" prop="rule_mode">
+          <el-radio-group v-model="form.rule_mode">
+            <el-radio :label="1">人工评分</el-radio>
+            <el-radio :label="2">自动评分</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="最低分" prop="min_score">
+          <el-input-number :min="0" :max="form.score" v-model="form.min_score" v-if="form.rule_mode === 1" />
+          <template v-else>
+            <el-form-item label="有附件" label-width="auto" style="margin-right: 10px; margin-bottom: 10px">
+              <el-input-number :min="0" :max="form.score" v-model="form.has_score" />
+            </el-form-item>
+            <el-form-item label="无附件" label-width="auto" style="margin-bottom: 10px">
+              <el-input-number :min="0" :max="form.score" v-model="form.no_score" />
+            </el-form-item>
+          </template>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-form-item
+      label="附件类型"
+      label-width="130px"
+      :prop="'detail_list.' + index + '.categories'"
+      :rules="[{ required: true, message: '请选择' }]">
+      <el-checkbox-group v-model="form.categories">
+        <el-checkbox :label="1">实验截图</el-checkbox>
+        <el-checkbox :label="2">本地文件</el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
   </div>
 </template>

src/modules/admin/lab/experiment/components/ReportDesignContent.vue

 <script setup lang="ts">
 interface Props {
+  index: number
   data: any
 }
 const props = defineProps<Props>()
@@ -17,44 +18,54 @@ watchEffect(() => {
 })
 
 watch(form, value => emit('change', value), { deep: true })
+
+function handleScoreChange(value: number) {
+  form.min_score = Math.min(value, form.min_score)
+}
 </script>
 
 <template>
   <div class="report-design-item">
-    <el-form :model="form" label-suffix="：">
-      <el-row :gutter="40">
-        <el-col :span="6">
-          <el-form-item label="内容组件名称" prop="name" label-width="130px">
-            <el-input v-model="form.name" placeholder="例：实验目的" maxlength="20" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="分值" prop="score">
-            <el-input-number :min="0" v-model="form.score" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="评分规则" prop="rule_mode">
-            <el-radio-group v-model="form.rule_mode">
-              <el-radio :label="1">人工评分</el-radio>
-              <!-- <el-radio :label="2">自动评分</el-radio> -->
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="最低分" prop="min_score">
-            <el-input-number :min="0" v-model="form.min_score" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label="组件提示信息" prop="notice_message" label-width="130px">
-        <el-input
-          type="textarea"
-          v-model="form.notice_message"
-          :autosize="{ minRows: 4 }"
-          show-word-limit
-          maxlength="200" />
-      </el-form-item>
-    </el-form>
+    <el-row :gutter="40">
+      <el-col :span="6">
+        <el-form-item
+          label="内容组件名称"
+          label-width="130px"
+          :prop="'detail_list.' + index + '.name'"
+          :rules="[{ required: true, message: '请输入' }]">
+          <el-input v-model="form.name" placeholder="例：实验目的" maxlength="20" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="分值" prop="score">
+          <el-input-number :min="0" v-model="form.score" @change="handleScoreChange" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="评分规则" prop="rule_mode">
+          <el-radio-group v-model="form.rule_mode">
+            <el-radio :label="1">人工评分</el-radio>
+            <!-- <el-radio :label="2">自动评分</el-radio> -->
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="最低分" prop="min_score">
+          <el-input-number :min="0" :max="form.score" v-model="form.min_score" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-form-item
+      label="组件提示信息"
+      label-width="130px"
+      :prop="'detail_list.' + index + '.notice_message'"
+      :rules="[{ required: true, message: '请输入' }]">
+      <el-input
+        type="textarea"
+        v-model="form.notice_message"
+        :autosize="{ minRows: 4 }"
+        show-word-limit
+        maxlength="200" />
+    </el-form-item>
   </div>
 </template>

src/modules/admin/lab/experiment/components/ReportDesignQuestion.vue

 <script setup lang="ts">
 interface Props {
+  index: number
   data: any
 }
 const props = defineProps<Props>()
@@ -17,44 +18,54 @@ watchEffect(() => {
 })
 
 watch(form, value => emit('change', value), { deep: true })
+
+function handleScoreChange(value: number) {
+  form.min_score = Math.min(value, form.min_score)
+}
 </script>
 
 <template>
   <div class="report-design-item">
-    <el-form :model="form" label-suffix="：">
-      <el-row :gutter="40">
-        <el-col :span="6">
-          <el-form-item label="思考题组件名称" prop="name" label-width="130px">
-            <el-input v-model="form.name" placeholder="例：实验扩展思考" maxlength="20" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="分值" prop="score">
-            <el-input-number :min="0" v-model="form.score" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="评分规则" prop="rule_mode">
-            <el-radio-group v-model="form.rule_mode">
-              <el-radio :label="1">人工评分</el-radio>
-              <!-- <el-radio :label="2">自动评分</el-radio> -->
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="最低分" prop="min_score">
-            <el-input-number :min="0" v-model="form.min_score" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label="思考题题干内容" prop="question_stem" label-width="130px">
-        <el-input
-          type="textarea"
-          v-model="form.question_stem"
-          :autosize="{ minRows: 4 }"
-          show-word-limit
-          maxlength="200" />
-      </el-form-item>
-    </el-form>
+    <el-row :gutter="40">
+      <el-col :span="6">
+        <el-form-item
+          label="思考题组件名称"
+          label-width="130px"
+          :prop="'detail_list.' + index + '.name'"
+          :rules="[{ required: true, message: '请输入' }]">
+          <el-input v-model="form.name" placeholder="例：实验扩展思考" maxlength="20" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="分值" prop="score">
+          <el-input-number :min="0" v-model="form.score" @change="handleScoreChange" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="评分规则" prop="rule_mode">
+          <el-radio-group v-model="form.rule_mode">
+            <el-radio :label="1">人工评分</el-radio>
+            <!-- <el-radio :label="2">自动评分</el-radio> -->
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="最低分" prop="min_score">
+          <el-input-number :min="0" :max="form.score" v-model="form.min_score" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-form-item
+      label="思考题题干内容"
+      label-width="130px"
+      :prop="'detail_list.' + index + '.question_stem'"
+      :rules="[{ required: true, message: '请输入' }]">
+      <el-input
+        type="textarea"
+        v-model="form.question_stem"
+        :autosize="{ minRows: 4 }"
+        show-word-limit
+        maxlength="200" />
+    </el-form-item>
   </div>
 </template>

src/modules/admin/lab/experiment/components/ReportPreview.vue

@@ -63,11 +63,38 @@ const teacherText = $computed(() => {
           <p class="score">{{ item.score }}分</p>
           <p class="rule-mode">{{ reportScoreRule[item.rule_mode] }}</p>
         </div>
-        <el-input
-          type="textarea"
-          readonly
-          :autosize="{ minRows: 6 }"
-          :value="item.notice_message || item.question_stem" />
+        <!-- 内容组件 -->
+        <template v-if="item.type === 1">
+          <p>{{ item.notice_message || item.question_stem }}</p>
+          <el-input
+            type="textarea"
+            readonly
+            :autosize="{ minRows: 6 }"
+            :placeholder="`这里是学生填写的${item.name}回答内容，支持富文本。`" />
+        </template>
+        <!-- 附件组件 -->
+        <template v-else-if="item.type === 2">
+          <el-table :data="[{}, {}]" stripe :header-cell-style="{ background: '#ededed' }">
+            <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
+            <el-table-column label="附件类型" align="center"></el-table-column>
+            <el-table-column label="附件名称" align="center"></el-table-column>
+            <el-table-column label="更新时间" align="center"></el-table-column>
+            <el-table-column label="操作" align="right">
+              <el-link>查看</el-link>
+            </el-table-column>
+          </el-table>
+        </template>
+        <!-- 思考题 -->
+        <template v-else-if="item.type === 3">
+          <p>{{ item.question_stem }}</p>
+          <el-input
+            type="textarea"
+            readonly
+            :autosize="{ minRows: 6 }"
+            :placeholder="`这里是学生填写的${item.name}回答内容，支持富文本。`" />
+        </template>
+        <!-- 试卷 -->
+        <template v-else-if="item.type === 4"> </template>
       </el-form-item>
     </el-form>
     <el-row justify="center">
@@ -85,6 +112,9 @@ const teacherText = $computed(() => {
   }
   .total-score {
     text-align: right;
+    font-size: 16px;
+    font-weight: bold;
+    color: var(--main-color);
     padding-right: 100px;
   }
   .form-hd {

src/modules/admin/lab/experiment/views/Report.vue

 <script setup lang="ts">
 import type { ExperimentItem } from '../types'
-import { ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import ReportDesign from '../components/ReportDesign.vue'
-import { getExperiment } from '../api'
+import { getExperiment, getExperimentReportRule, updateExperimentReportRule } from '../api'
 
 const ReportPreview = defineAsyncComponent(() => import('../components/ReportPreview.vue'))
 
@@ -16,49 +17,76 @@ const teacherText = $computed(() => {
   if (!detail) return ''
   return detail.teacher.map(item => item.name).join('、')
 })
-function fetchInfo() {
+// 获取实验信息
+function fetchExperimentInfo() {
   getExperiment({ experiment_id: props.id }).then(res => {
     detail = res.data.info
   })
 }
+
+const formRef = $ref<FormInstance>()
+
 const form = reactive({
-  switch: true,
-  detail_list: [
-    {
-      id: '233434343',
-      name: '实验目的',
-      type: 1,
-      notice_message: '好好学习天线向上',
-      rule_mode: 1,
-      score: '10.00',
-      min_score: '5.00'
-    },
-    {
-      id: '233434344',
-      name: '实验附件',
-      type: 2,
-      rule_mode: 2,
-      score: '10.00',
-      min_score: '5.00',
-      categories: [1, 2],
-      has_score: '8.00',
-      no_score: '5.00'
-    },
-    {
-      id: '233434344',
-      name: '思考题',
-      type: 3,
-      rule_mode: 1,
-      score: '10.00',
-      min_score: '5.00',
-      question_stem: '这是思考题的题干'
+  experiment_id: props.id,
+  report_upload_way: 1,
+  detail_list: []
+})
+
+// 获取报告信息
+function fetchInfo() {
+  getExperimentReportRule({ experiment_id: props.id }).then(res => {
+    const { data } = res
+    let detailList = []
+    try {
+      detailList = JSON.parse(data.info.detail_list).map((item: any) => {
+        return { ...item, percent: parseFloat(item.percent) }
+      })
+    } catch (error) {
+      console.log(error)
     }
-  ]
+    Object.assign(form, { report_upload_way: data.way, detail_list: detailList })
+  })
+}
+
+onMounted(() => {
+  fetchExperimentInfo()
+  fetchInfo()
+})
+
+const score = $computed(() => {
+  return detail?.score ? parseFloat(detail.score) : 0
+})
+// 合计
+const total = $computed(() => {
+  return form.detail_list.reduce((result: number, item: any) => {
+    return result + (item.score || 0)
+  }, 0)
 })
-onMounted(() => fetchInfo())
 
 // 保存
-function handleSubmit() {}
+function handleSubmit() {
+  if (total !== score) {
+    ElMessage.error('请确保组件总分等于实验总分！')
+    return
+  }
+  formRef?.validate().then(() => {
+    const params = { ...form, detail_list: JSON.stringify(form.detail_list) }
+    if (form.report_upload_way === 1) {
+      ElMessageBox.confirm('确定将当前实验的实验报告提交方式保存为学生手工上传文件吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        updateExperimentReportRule(params).then(() => {
+          ElMessage({ message: '保存成功', type: 'success' })
+          window.close()
+        })
+      })
+    } else {
+      updateExperimentReportRule(params).then(() => {
+        ElMessage({ message: '保存成功', type: 'success' })
+      })
+    }
+  })
+}
 
 // 关闭
 function handleClose() {
@@ -76,7 +104,7 @@ function handlePreview() {
 
 <template>
   <AppCard title="实验报告规则设置">
-    <el-form :model="form" label-suffix="：" v-if="detail">
+    <el-form ref="formRef" :model="form" label-suffix="：" hide-required-asterisk v-if="detail">
       <el-row>
         <el-col :span="8">
           <el-form-item label="实验名称">{{ detail.name }}</el-form-item>
@@ -96,22 +124,38 @@ function handlePreview() {
           <el-form-item :span="3" label="指导教师">{{ teacherText }}</el-form-item>
         </el-col>
       </el-row>
-      <el-form-item label="实验报告提交方式" prop="switch">
+      <el-form-item label="实验报告提交方式" prop="report_upload_way">
         <el-switch
-          v-model="form.switch"
+          v-model="form.report_upload_way"
           active-text="上传文件"
+          :active-value="1"
           inactive-text="在线填写"
+          :inactive-value="2"
           style="--el-switch-on-color: #ba143e; --el-switch-off-color: #ba143e" />
       </el-form-item>
-      <ReportDesign v-model="form.detail_list"></ReportDesign>
+      <ReportDesign v-model="form.detail_list" v-if="form.report_upload_way === 2">
+        <template #header>
+          <p class="report-header-item">实验总分：{{ detail.score }}</p>
+          <p class="report-header-item">组件总分：{{ total }}</p>
+        </template>
+      </ReportDesign>
     </el-form>
     <el-row justify="center">
       <el-space :size="40">
         <el-button auto-insert-space @click="handleClose">关闭</el-button>
         <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-        <el-button type="primary" auto-insert-space @click="handlePreview">预览</el-button>
+        <el-button type="primary" auto-insert-space @click="handlePreview" v-if="form.report_upload_way === 2"
+          >预览</el-button
+        >
       </el-space>
     </el-row>
     <ReportPreview v-model="previewVisible" :data="{ ...detail, ...form }"></ReportPreview>
   </AppCard>
 </template>
+
+<style lang="scss">
+.report-header-item {
+  flex: 1;
+  text-align: center;
+}
+</style>