【新增】试卷任务前端分类，监控管理前端

src/views/task/selftrans/ai/components/steps/step3/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <!-- 使用 el-tabs 组件创建可切换的选项卡 -->
+    <el-tabs v-model="activeTab" style="margin-top: 20px;">
+      <!-- 第一个 tab - 通用参数 -->
+      <el-tab-pane label="通用参数" name="tab1">
+        <el-form :model="form" label-width="200px" style="margin-top: 20px;">
+          <!-- 是否使用监考密码验证 -->
+          <el-form-item label="是否使用监考密码验证">
+            <el-switch 
+              v-model="form.isExamPassword" 
+              active-value="0" 
+              inactive-value="1" 
+              active-text="是" 
+              inactive-text="否" 
+              @change="handleFormChange" />
+          </el-form-item>
+
+              <!-- 是否使用监考密码验证 -->
+              <el-form-item label="是否启用考场设置">
+            <el-switch 
+              v-model="form.isSession" 
+              active-value="0" 
+              inactive-value="1" 
+              active-text="是" 
+              inactive-text="否" 
+              @change="handleFormChange" />
+          </el-form-item>
+          <!-- 监考密码 -->
+          <el-form-item label="监考密码" v-if="form.isExamPassword === '0'">
+            <el-input v-model="form.examPassword" placeholder="请输入监考密码" @input="handleFormChange" />
+          </el-form-item>
+
+          <!-- 禁止学生使用U盘 -->
+          <el-form-item label="禁止学生使用U盘">
+            <el-switch 
+              v-model="form.usb" 
+              active-value="0" 
+              inactive-value="1" 
+              active-text="是" 
+              inactive-text="否" 
+              @change="handleFormChange" />
+          </el-form-item>
+
+          <!-- 练习成绩保存 -->
+          <el-form-item label="练习成绩保存">
+            <el-radio-group v-model="form.saveGrades" @change="handleFormChange">
+              <el-radio label="0">最高成绩</el-radio>
+              <el-radio label="1">最新成绩</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+
+          <el-form-item label="是否显示重答按钮">
+            <el-switch 
+              v-model="form.isRepeat" 
+              active-value="0" 
+              inactive-value="1" 
+              active-text="是" 
+              inactive-text="否" 
+              @change="handleFormChange" />
+          </el-form-item>
+
+
+          <el-form-item label="是否显示答案按钮">
+            <el-switch 
+              v-model="form.isAnswer" 
+              active-value="0" 
+              inactive-value="1" 
+              active-text="是" 
+              inactive-text="否" 
+              @change="handleFormChange" />
+          </el-form-item>
+          <el-form-item label="学生是否可以查看试卷">
+            <el-switch 
+              v-model="form.isLook" 
+              active-value="0" 
+              inactive-value="1" 
+              active-text="是" 
+              inactive-text="否" 
+              @change="handleFormChange" />
+          </el-form-item>
+
+          <el-form-item label="定时检查与学生端联通性，每">
+            <el-input-number v-model="form.isConnect"  label="分钟" @change="handleFormChange" />
+            <span>分钟传一次,断联直接交卷</span>
+          </el-form-item>
+
+          
+
+        </el-form>
+      </el-tab-pane>
+
+      <!-- 第二个 tab - 试卷答题文件 -->
+      <el-tab-pane label="试卷答题文件" name="tab2">
+        <el-form :model="form" label-width="200px" style="margin-top: 20px;">
+          <!-- 学生文件存放系统盘 -->
+          <el-form-item label="驱动器为学生文件存放系统盘">
+            <el-radio-group v-model="form.driver" @change="handleFormChange">
+              <el-radio label="C">C</el-radio>
+              <el-radio label="D">D</el-radio>
+              <el-radio label="E">E</el-radio>
+              <el-radio label="F">F</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <!-- 考试目录名称 -->
+          <el-form-item label="考试目录名称">
+            <el-input v-model="form.directory" placeholder="请输入考试目录名称" @input="handleFormChange" />
+          </el-form-item>
+
+          <!-- 定时上传考试目录 -->
+          <el-form-item label="定时上传考试目录每">
+            <el-input-number v-model="form.uploadTime" :min="1" label="分钟" @change="handleFormChange" />
+            <span>分钟传一次</span>
+          </el-form-item>
+
+          <!-- 完成考试后是否删除考试目录 -->
+          <el-form-item label="完成考试后是否删除考试目录">
+            <el-radio-group v-model="form.isDel" @change="handleFormChange">
+              <el-radio label="0">是</el-radio>
+              <el-radio label="1">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { getParam, updateParam } from '@/api/system/param'  // 引入后台请求方法
+
+const props = defineProps({
+  taskId: {
+    type: String,
+    default: ''
+  }
+})
+
+// 字段初始值设置为空或空字符串
+const form = ref({
+  isExamPassword: '',     // 是否使用监考密码验证
+  examPassword: '',       // 监考密码
+  usb: '',                // 是否禁止U盘
+  saveGrades: '',         // 成绩保存方式
+  driver: '',             // 存放系统盘
+  directory: '',          // 考试目录名称
+  uploadTime: '',         // 上传间隔时间
+  isDel: '',   
+  isRepeat:'',           // 是否删除目录
+  isAnswer:'',
+  isLook:'',
+  isConnect:''
+})
+
+const activeTab = ref('tab1')
+
+// 页面加载时用 taskId 请求后端并赋值
+onMounted(async () => {
+  if (props.taskId) {
+    try {
+      const res = await getParam({ taskId: props.taskId })
+      const data = res || {}
+      console.log('任务详情：', data)
+
+      // 用 Object.assign 将后端数据合并到 form
+      Object.assign(form.value, data)
+    } catch (error) {
+      console.error('获取任务详情失败', error)
+    }
+  }
+})
+
+// 表单变化时触发请求
+const handleFormChange = async () => {
+  if (form.value.isExamPassword === '1') {
+    form.value.examPassword = ''
+  }
+  try {
+    // 发送请求以更新数据
+    const response = await updateParam(form.value)
+    console.log('更新结果:', response)
+  } catch (error) {
+    console.error('更新数据失败', error)
+  }
+}
+</script>
+
+<style scoped>
+/* 可以为 tab 设置额外的样式，具体根据需求定制 */
+</style>