【新增】试卷任务训练、考试、高考模拟前端

src/views/task/trans/components/task-temp.vue

@@ -0,0 +1,151 @@
+<template>
+  <!-- 模板库对话框 -->
+  <Dialog v-model="dialogVisible" title="模板库" width="80%" :destroy-on-close="true">
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="任务名称" align="center" prop="taskName" />
+        <el-table-column label="专业" align="center" prop="taskSpecialty" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openEdit('update', scope.row)"
+              v-hasPermi="['system:sms-channel:update']"
+            >
+              使用
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap> 
+  </Dialog>
+
+  <!-- 选择参数的对话框 -->
+  <Dialog v-model="showDialog" title="选择所需参数" width="50%" :destroy-on-close="true">
+    <el-checkbox-group v-model="selectedOptions">
+      <el-checkbox label="1">试卷方案</el-checkbox>
+      <el-checkbox label="2">试卷管理</el-checkbox>
+      <el-checkbox label="3">参数设置</el-checkbox>
+      <el-checkbox label="4">考场设置</el-checkbox>
+      <el-checkbox label="5">人员设置</el-checkbox>
+    </el-checkbox-group>
+    <!-- 全选、取消全选按钮 -->
+    <el-button @click="selectAll">全选</el-button>
+    <el-button @click="deselectAll">取消全选</el-button>
+
+    <!-- 底部按钮 -->
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="confirmSelection">确认</el-button>
+    </template>
+  </Dialog>
+</template>
+
+
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue';
+import { pageTasks, submitSelection } from '@/api/system/task';
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+  data: Object
+});
+const emit = defineEmits(['update:modelValue', 'done']);
+
+// 处理模板库对话框的显隐
+const dialogVisible = defineModel({ type: Boolean });// 控制模板库对话框
+const showDialog = ref(false); // 控制选择参数对话框
+const selectedOptions = ref([]); // 存储用户选中的复选框内容
+const selectedTaskId = ref(null); // 用来存储选中行的 taskId
+
+// 加载中状态
+const loading = ref(false);
+
+// 表格数据和分页参数
+const list = ref([]); // 表格数据
+const total = ref(0); // 总记录数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  status: '0',
+  isTemplate: '0',
+   taskType:'0'
+});
+
+// 获取数据
+const getList = async () => {
+  loading.value = true;
+  try {
+    const res = await pageTasks(queryParams); 
+    list.value = res.list; // 假设 res.data 是你需要的数据
+    total.value = res.total; // 假设 res.total 是总记录数
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 监听父组件传递的 modelValue
+watch(
+  () => props.modelValue,
+  (val) => {
+    dialogVisible.value = val;
+  }
+);
+watch(dialogVisible, (val) => {
+  emit('update:modelValue', val); // 更新父组件的 modelValue
+});
+
+// 打开编辑表单，弹出选择参数对话框
+const openEdit = (action, row) => {
+  selectedTaskId.value = row.taskId; // 记录选中的 taskId
+  showDialog.value = true; // 弹出选择参数对话框
+};
+
+// 全选按钮的处理方法
+const selectAll = () => {
+  selectedOptions.value = ['1', '2', '3', '4']; // 选择所有复选框
+};
+
+// 取消全选按钮的处理方法
+const deselectAll = () => {
+  selectedOptions.value = []; // 清空选中的复选框
+};
+
+// 确认选择的操作
+const confirmSelection = () => {
+  // 发送请求，包含 taskId 和选中的选项
+  const requestData = {
+    taskId: selectedTaskId.value, // 选中的 taskId
+    options: selectedOptions.value // 选中的复选框内容
+  };
+
+  submitSelection(requestData)
+    .then((msg) => {
+      showDialog.value = false; // 关闭选择参数对话框
+      message.success(msg); // 提示成功
+      emit('done'); // 通知父组件
+    })
+    .catch((e) => {
+      showDialog.value = false; // 关闭选择参数对话框
+      message.error(e.message); // 提示错误
+    });
+};
+
+// 关闭选择参数对话框
+const handleCancel = () => {
+  showDialog.value = false;
+};
+
+// 初始化获取数据
+onMounted(() => {
+  getList();
+});
+</script>