476 lines
15 KiB
Vue
476 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 使用 el-tabs 组件创建可切换的选项卡 -->
|
|
<el-tabs v-model="activeTab" style="margin-top: 20px" @tab-change="openAppForm">
|
|
<!-- 第一个 tab - 通用参数 -->
|
|
<el-tab-pane label="通用参数" name="tab1">
|
|
<el-form :model="form" label-width="200px" style="margin-top: 20px">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<!-- 是否使用监考密码验证 -->
|
|
<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="监考密码" v-if="form.isExamPassword === '0'">
|
|
<el-input
|
|
v-model="form.examPassword"
|
|
placeholder="请输入监考密码"
|
|
@input="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<!-- 练习成绩保存 -->
|
|
<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-col>
|
|
|
|
<!-- <el-col :span="12">
|
|
<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-col> -->
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="考生答题时是否显示试题编号">
|
|
<el-switch
|
|
v-model="form.isAnswerId"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="是否显示试卷编号">
|
|
<el-switch
|
|
v-model="form.isNumber"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="是否显示解析按钮">
|
|
<el-switch
|
|
v-model="form.isContent"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<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-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<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-col>
|
|
|
|
<el-col :span="12">
|
|
<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-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="是否有测评时长限制">
|
|
<el-switch
|
|
v-model="form.isTime"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="测评时长">
|
|
<el-time-picker
|
|
v-model="form.examTime"
|
|
value-format="HH:mm:ss"
|
|
placeholder="请设置测评时长"
|
|
class="ele-fluid"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<!-- <el-col :span="12">
|
|
<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-col> -->
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<!-- 禁止学生使用U盘 -->
|
|
<el-form-item label="是否显示成绩">
|
|
<el-switch
|
|
v-model="form.isScore"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="是否显示成绩明细">
|
|
<el-switch
|
|
v-model="form.isScoreDetail"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<!-- <el-form-item label="定时检查与学生端联通性，每">
|
|
<el-input-number v-model="form.isConnect" label="分钟" @change="handleFormChange" />
|
|
<span>分钟传一次,断联直接交卷</span>
|
|
</el-form-item> -->
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<!-- 是否删除文件 -->
|
|
<el-form-item label="是否删除文件">
|
|
<el-switch
|
|
v-model="form.isDelete"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</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>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="防作弊功能" name="tab3">
|
|
<el-form :model="form" label-width="200px" style="margin-top: 20px">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<!-- 禁止学生使用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-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="是否可以文件共享">
|
|
<el-switch
|
|
v-model="form.isFile"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<!-- 禁止学生使用U盘 -->
|
|
<el-form-item label="禁用外网">
|
|
<el-switch
|
|
v-model="form.isNet"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="禁止截屏">
|
|
<el-switch
|
|
v-model="form.isScreen"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="是否允许复制题干">
|
|
<el-switch
|
|
v-model="form.isCpoy"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
@change="handleFormChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="考试注意事项提醒" name="tab4">
|
|
<div class="block" @blur.capture="handleFormChange">
|
|
<Editor v-model="form.warn" height="250px" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="考试环境配置" name="tab5">
|
|
<div class="block" @blur.capture="handleFormChange">
|
|
<el-button @click="asyncApp">同步软件环境</el-button>
|
|
<el-table v-if="isAppTrue" :data="tableData" style="width: 100%">
|
|
<el-table-column prop="appName" label="名称" align="center" />
|
|
<el-table-column label="操作" align="center" width="100px">
|
|
<template #default="scope">
|
|
<el-button type="primary" link @click="handleDelete(scope.row)">
|
|
<Icon icon="ep:delete" />删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<app-add v-model="showAdd" :task-Id="props.taskId" ref="taskAddRef" @done="reload" />
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { getParam, updateParam } from '@/api/system/param' // 引入后台请求方法
|
|
import { CommonStatusEnum } from '@/utils/constants'
|
|
import AppAdd from './components/app-add.vue'
|
|
import * as AppApi from '@/api/exam/app'
|
|
import { time } from 'console'
|
|
|
|
const props = defineProps({
|
|
taskId: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
// 字段初始值设置为空或空字符串
|
|
const form = ref({
|
|
isAnswerId: '',
|
|
isContent: '',
|
|
isNumber: '',
|
|
isExamPassword: '', // 是否使用监考密码验证
|
|
examPassword: '', // 监考密码
|
|
usb: '', // 是否禁止U盘
|
|
saveGrades: '', // 成绩保存方式
|
|
driver: '', // 存放系统盘
|
|
directory: '', // 考试目录名称
|
|
uploadTime: '', // 上传间隔时间
|
|
isCpoy: '',
|
|
isRepeat: '', // 是否删除目录
|
|
isAnswer: '',
|
|
isLook: '',
|
|
isConnect: '',
|
|
isFile: '',
|
|
isNet: '',
|
|
isScreen: '',
|
|
warn: '',
|
|
isScore: '',
|
|
isScoreDetail: '',
|
|
isDelete: ''
|
|
})
|
|
const tableData = ref([]) // 列表的数
|
|
const showAdd = ref(false)
|
|
const taskAddRef = ref()
|
|
const message = useMessage() // 消息弹窗
|
|
const isAppTrue = ref(true)
|
|
|
|
// 同步软件环境
|
|
const asyncApp = () => {
|
|
AppApi.createAppCheckList(props.taskId).then(() => {
|
|
getList()
|
|
})
|
|
}
|
|
|
|
const reload = () => {
|
|
getList()
|
|
}
|
|
|
|
// 删除
|
|
const handleDelete = async (row) => {
|
|
// 删除的二次确认
|
|
await message.delConfirm()
|
|
// 发起删除
|
|
await AppApi.deleteAppCheck(row.id)
|
|
|
|
getList()
|
|
}
|
|
|
|
const openAppForm = async () => {
|
|
console.log(activeTab.value)
|
|
if (activeTab.value == 'tab5') {
|
|
await getList()
|
|
isAppTrue.value = false
|
|
setTimeout(() => {
|
|
isAppTrue.value = true
|
|
}, 0)
|
|
}
|
|
}
|
|
|
|
// 查询列表
|
|
const getList = async () => {
|
|
const res = await AppApi.getAppCheck(props.taskId)
|
|
tableData.value = res
|
|
}
|
|
|
|
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>
|