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

src/views/task/exam/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>
 
@@ -319,6 +311,7 @@
               </el-form-item>
             </el-col>
           </el-row>
+
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="是否允许复制题干">
@@ -340,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: {
@@ -380,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')