【新增】 方案绑定软件环境检测

src/views/task/selftrans/collegeexam/components/steps/step3/components/app-add.vue

@@ -0,0 +1,104 @@
+<!-- 编辑弹窗 -->
+<template>
+  <Dialog v-model="isVisible" :title="'添加软件环境'" width="460" @open="handleOpen" center>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" @submit.prevent="">
+      <el-form-item label="软件环境" prop="appName">
+        <el-input clearable v-model="form.appName" placeholder="请输入软件环境" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save"> 保存 </el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue'
+import { useFormData } from '@/utils/use-form-data'
+import * as AppApi from '@/api/exam/app'
+const props = defineProps({
+  /** 修改回显的数据 */
+  data: Object,
+  taskId: String,
+  taskSpecialty: String
+})
+const emit = defineEmits(['done'])
+
+/** 弹窗是否打开 */
+const isVisible = defineModel({ type: Boolean })
+
+/** 提交状态 */
+const loading = ref(false)
+
+/** 表单实例 */
+const formRef = ref(null)
+
+/** 表单数据 */
+const [form, resetFields, assignFields] = useFormData({
+  appName: '',
+  taskId: ''
+})
+
+/** 表单验证规则 */
+const rules = reactive({
+  appName: [{ required: true, message: '请输入软件环境', trigger: 'blur' }]
+})
+
+const queDialogVisible = ref(false)
+
+const checkAll = ref(false)
+const selectedQue = ref<string[]>([])
+const currentSpNames = ref<Array<string>>([]) // 当前题型名列表
+const selectedRow = ref<any>(null) // 当前选中的试卷数据（可选）
+
+watch(selectedQue, (val) => {
+  if (val.length === currentSpNames.value.length) {
+    checkAll.value = true
+  } else {
+    checkAll.value = false
+  }
+})
+
+/** 关闭弹窗 */
+const handleCancel = () => {
+  isVisible.value = false
+}
+const message = useMessage() // 消息弹窗
+/** 保存编辑 */
+const save = () => {
+  formRef.value?.validate?.((valid) => {
+    if (!valid) {
+      return
+    }
+    loading.value = true
+    const payload = {
+      appName: form.appName,
+      taskId: props.taskId
+    }
+    AppApi.createAppCheck(payload)
+      .then((msg) => {
+        loading.value = false
+        message.success('新增成功！')
+        handleCancel()
+        emit('done')
+      })
+      .catch((e) => {
+        loading.value = false
+        message.error(e.message)
+      })
+  })
+}
+
+/** 弹窗打开事件 */
+const handleOpen = () => {
+  resetFields()
+  form.taskId = props.taskId // 新增时赋值 taskId
+  form.taskSpecialty = props.taskSpecialty // 新增时赋值 taskSpecialty
+  nextTick(() => {
+    nextTick(() => {
+      formRef.value?.clearValidate?.()
+    })
+  })
+}
+defineExpose({ open })
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 使用 el-tabs 组件创建可切换的选项卡 -->
-    <el-tabs v-model="activeTab" style="margin-top: 20px">
+    <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">
@@ -251,14 +251,6 @@
             />
             <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>
 
@@ -341,13 +333,33 @@
           <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="openAddForm">新增</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 setup>
+<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: {
@@ -381,6 +393,49 @@ const form = ref({
   isScoreDetail: '',
   isDelete: ''
 })
+const tableData = ref([]) // 列表的数
+const showAdd = ref(false)
+const taskAddRef = ref()
+const message = useMessage() // 消息弹窗
+const isAppTrue = ref(true)
+// 打开新增表单
+const openAddForm = () => {
+  showAdd.value = true
+  nextTick(() => {
+    taskAddRef.value?.open()
+  })
+}
+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')