【新增】mysql出题界面

2025-05-20 15:40:50 +08:00
parent 52bff24959
commit e004ec7cc5
5 changed files with 217 additions and 174 deletions
--- a/src/views/paper/question/DeptTree.vue
+++ b/src/views/paper/question/DeptTree.vue
@@ -6,7 +6,7 @@
      </template>
    </el-input>
  </div>
-  <div class="head-container">
+  <div class="head-container " >
    <el-tree
      ref="treeRef"
      :data="deptList"
--- a/src/views/paper/question/MysqlForm.vue
+++ b/src/views/paper/question/MysqlForm.vue
@@ -45,7 +45,7 @@

  <el-col :span="12">
                <el-form-item label="章节名称" prop="chapteridDictText">
-                  <el-input v-model="formData.chapteridDictText" placeholder="请输入章节名称" />
+                  <el-input v-model="formData.chapteridDictText" placeholder="请输入章节名称"  disabled />
                </el-form-item>
              </el-col>
            </el-row>
@@ -56,7 +56,7 @@
                <el-form-item label="启用状态" prop="status">
                  <el-radio-group v-model="formData.status">
                    <el-radio
-                      v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                      v-for="dict in getIntDictOptions(DICT_TYPE.SYS_STATUS)"
                      :key="dict.value"
                      :value="dict.value"
                    >
@@ -64,6 +64,8 @@
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
+
+                
              </el-col>
            </el-row>
       
@@ -80,100 +82,13 @@
            </div>
            <div class="edit-right bottom-common">
              <el-tabs v-model="rightActiveName" class="demo-tabs" @tab-click="rightHandleClick">
-                <!-- <el-tab-pane class="answer" label="试题答案" name="answer">
-                  <div class="block">
-                    <div class="tip">
-                      <p>答案设置&nbsp;&nbsp;|&nbsp;选项数：</p>
-                      <el-select
-                        v-model="optionNumVal"
-                        class="m-2"
-                        placeholder="Select"
-                        size="large"
-                        style="width: 30%"
-                      >
-                        <el-option
-                          v-for="item in optionNumber"
-                          :key="item"
-                          :label="item"
-                          :value="item"
-                        />
-                      </el-select>
-                    </div>
-                    <el-radio-group v-model="radio">
-                      <div class="options" v-for="item in optionNumVal" :key="item">
-                        <div class="content">
-                          <el-radio :label="String.fromCharCode(64 + item)">
-                            {{ String.fromCharCode(64 + item) }}
-                          </el-radio>
-                          <el-input
-                            class="text"
-                            v-model="optionsContent[item]"
-                            :rows="3"
-                            type="textarea"
-                            placeholder="请输入答案内容"
-                          />
-                        </div>
-                        <el-button class="more-btn" @click="moreEdit">更多…</el-button> 
-                      </div>
-                    </el-radio-group>
-                  </div>
-                </el-tab-pane> -->
+
                <el-tab-pane label="试题解析" name="analysis">
                  <div class="block">
                    <Editor v-model="formData.analysis" height="150px" />
                  </div>
                </el-tab-pane>
-                <el-tab-pane name="keyword">
-                  <template #label>
-                    <div class="custom-tabs-label">
-                      <p>关键字</p>
-                      <el-dropdown>
-                        <span class="el-dropdown-link" @click.stop="false">
-                          <div class="setting_icon"></div>
-                        </span>
-                        <template #dropdown>
-                          <el-dropdown-menu>
-                            <el-dropdown-item @click="editKeyword('create')">新建</el-dropdown-item>
-                            <el-dropdown-item @click="editKeyword('create')">编辑</el-dropdown-item>
-                            <el-dropdown-item @click="editKeyword('delete')">删除</el-dropdown-item>
-                            <el-dropdown-item @click="editKeyword('deleteall')"
-                              >删除全部</el-dropdown-item
-                            >
-                          </el-dropdown-menu>
-                        </template>
-                      </el-dropdown>
-                    </div>
-                  </template>
-                  <div class="block">
-                    <el-table
-                      :data="keywordList"
-                      style="width: 100%"
-                      @selection-change="handleKeywordSelectionChange"
-                    >
-                      <el-table-column type="index" width="50" />
-                      <el-table-column type="selection" width="55" />
-                      <el-table-column prop="keyword" label="关键字" />
-                    </el-table>
-                    <el-dialog
-                      v-model="keyVisible"
-                      title="编辑关键字"
-                      width="50%"
-                      :before-close="keyDialogClose"
-                      :close-on-click-modal="false"
-                      :close-on-press-escape="false"
-                    >
-                      <div class="main" style="width: 100%; height: 100%">
-                        <el-input v-model="keyWord" placeholder="请输入关键字" size="large" />
-                        <div class="dialog-footer" style="margin-top: 20px;">
-                          <el-button @click="keyDialogClose">取消</el-button>
-                          <el-button type="primary" @click="confirmKeyDialogVisible">
-                            确定
-                          </el-button>
-                        </div>
-                      </div>
-                    </el-dialog>
-                  </div>
-                </el-tab-pane>
+
                <el-tab-pane name="medium">
                  <template #label>
                    <div class="custom-tabs-label">
@@ -237,17 +152,50 @@
                      </el-dropdown>
                    </div>
                  </template>
-                  <div class="block">
-                    <el-table
-                      :data="documentList"
-                      style="width: 100%"
-                      @selection-change="handleDocumentSelectionChange"
-                    >
-                      <el-table-column type="index" width="50" />
-                      <el-table-column prop="type" label="附件" />
-                      <el-table-column prop="size" label="大小" width="80" />
-                    </el-table>
-                  </div>
+                  <!-- 提示 -->
+                  <el-alert type="warning" show-icon :closable="false">
+                    <template #default>
+                      <span>提示：文件名称可默认不设置</span>
+                    </template>
+                  </el-alert>
+
+                <div class="block">
+                  <el-table :data="documentList" style="width: 100%">
+                    <el-table-column type="index" label="#" width="50" />
+                    <el-table-column label="文件名称" width="250">
+                      <template #default="scope">
+                        <el-input
+                          v-model="scope.row.fileName"
+                          size="small"
+                          placeholder="请输入文件名称"
+                        />
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      prop="fileType"
+                      label="类型"
+                      :formatter="fileTypeFormatter"
+                    />
+                    <el-table-column prop="url" label="地址" width="200">
+                    <template #default="{ row }">
+                      <div
+                        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+                        :title="row.url"
+                      >
+                        {{ row.url }}
+                      </div>
+                    </template>
+                  </el-table-column>
+
+                    <el-table-column label="操作" width="150">
+                      <template #default="scope">
+                        <el-button type="primary" plain @click="openForm(scope.row.fileType)">
+                          <Icon icon="ep:upload" class="mr-5px" /> 上传
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
                </el-tab-pane>
              </el-tabs>
            </div>
@@ -260,12 +208,16 @@
      </template>
    </Dialog>
  </div>
+    <!-- 表单弹窗：添加/修改 -->
+  <FileForm ref="FileRef" @success="handleUploadSuccess"/>
+
+
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { FormRules } from 'element-plus'
 import * as QuestionApi from '@/api/paper/question'
-
+import FileForm from './components/FileForm.vue';
 defineOptions({ name: 'ChoiceForm' })

 const { t } = useI18n() // 国际化
@@ -287,9 +239,30 @@ const formData = ref({
  pointNames: '',
  audit: '',
  subjectName: '',
-  status: '',
+  status: ' ',
  resourceValue: ''
 })
+
+function fileTypeFormatter(row, column, cellValue) {
+  if (cellValue === '1') return '考试文件'
+  if (cellValue === '2') return '结果文件'
+  return '未知类型'
+}
+const documentList = ref([
+  {
+    quId: '',
+    url: '',
+    fileType: '1',
+    fileName: ''
+  },
+  {
+    quId: '',
+    url: '',
+    fileType: '2',
+    fileName: ''
+  }
+ 
+])
 const formRules = reactive<FormRules>({
  // specialtyName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }]
 })
@@ -301,40 +274,23 @@ const rightActiveName = ref('answer')
 const rightHandleClick = (tab, e) => {
  rightActiveName.value = tab.paneName.value
 }
-const optionNumVal = ref(4)
-const optionNumber = ref(26)
 const radio = ref('A')
-const annexList = ref([])
 // 保留选项的值
 const optionsContent = reactive({})

 // 关键字

-const keywordList = ref([] as any)
 const multipleKeywordSelection = ref([] as any)
 const handleKeywordSelectionChange = (val: any) => {
  multipleKeywordSelection.value = val
 }
-const keyVisible = ref(false)
-const keyEditType = ref('')

 const keyWord = ref([null])

-const editKeyword = (key) => {
-  keyEditType.value = key
-  keyVisible.value = true
-}
-const keyDialogClose = () => {
-  keyVisible.value = false
-}
-const confirmKeyDialogVisible = () => {
-  if (keyEditType.value === 'create') {
-    keywordList.value.push({
-      keyword: keyWord.value
-    })
-  }
-
-  keyVisible.value = false
+/** 添加/修改操作 */
+const FileRef = ref()
+const openForm = (type: string) => {
+  FileRef.value.open(type)
 }

 // 媒体文件
@@ -345,13 +301,17 @@ const handleMediumSelectionChange = (val: any) => {
 }
 const fileList = []

-// 媒体文件
-const documentList = ref([] as any)
+
 const multipleDocumentSelection = ref([] as any)
 const handleDocumentSelectionChange = (val: any) => {
  multipleDocumentSelection.value = val
 }
-
+const handleUploadSuccess = ({ url, fileType }) => {
+  const index = documentList.value.findIndex(item => item.fileType === fileType)
+  if (index !== -1) {
+    documentList.value[index].url = url
+  }
+}
 /** 打开弹窗 */
 const open = async (queryParams: any ,type: string, id?: number) => {
  dialogVisible.value = true
@@ -363,20 +323,10 @@ const open = async (queryParams: any ,type: string, id?: number) => {
  if (id) {
    formLoading.value = true
    try {
-      formData.value = await QuestionApi.getQuestion(id)
-      // for (let i = 0; i < formData.value.answerList.length; i++) {
-      //   if (formData.value.answerList[i].isRight === '0') {
-      //     let num = Number(i);
-      //     let nums = '';
-      //     if (num >= 0 && num <= 25) {
-      //       nums = String.fromCharCode(num + 65);
-      //     } else {
-      //       return '请输入 0-25 之间的数字';
-      //     }
-      //     radio.value = nums;
-      //   }
-      //   optionsContent[i + 1] = formData.value.answerList[i].content;
-      // }
+     const res = await QuestionApi.getQuestion(id)
+     formData.value =res 
+     documentList.value=res.fileUploads
+
    } finally {
      formLoading.value = false
    }
@@ -385,6 +335,9 @@ const open = async (queryParams: any ,type: string, id?: number) => {
    formData.value.courseName = queryParams.courseName
    formData.value.subjectName = queryParams.subjectName
    formData.value.pointNames=queryParams.pointNames
+    formData.value.chapteridDictText=queryParams.chapteridDictText
+
+    
  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -405,22 +358,7 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 const submitForm = async () => {
  const values = Object.values(optionsContent);
  console.log(values)
-  // 组合数据 （选择题）
-    // 创建临时字段
-    for (let i = 0; i < values.length; i++) {
-      let data = {};
-      data.content = values[i];
-      data.sort = i;
-      // 判断正确答案
-      if (mappedNumber.value === i) {
-        data.isRight = '0';
-      } else {
-        data.isRight = '1';
-      }
-      answerData.value.push(data);
-    }
-    formData.value.answerList = answerData.value;
-    console.log(formData.value.answerList)
+
    // 校验表单
    if (!formRef) return
    const valid = await formRef.value.validate()
@@ -462,6 +400,7 @@ const resetForm = () => {
    resourceValue: ''
  }
  formRef.value?.resetFields()
+  documentList.value=[]
 }
 </script>
 <style lang="scss" scoped>
--- a/src/views/paper/question/SpecialtyTree.vue
+++ b/src/views/paper/question/SpecialtyTree.vue
@@ -6,7 +6,7 @@
      </template>
    </el-input>
  </div>
-  <div class="head-container">
+  <div class="head-container ">
    <el-tree
      ref="treeRef"
      :data="specialtyList"
--- a/src/views/paper/question/components/FileForm.vue
+++ b/src/views/paper/question/components/FileForm.vue
@@ -0,0 +1,107 @@
+<template>
+  <Dialog v-model="dialogVisible" title="上传文件">
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="uploadUrl"
+      :auto-upload="false"
+      :data="data"
+      :disabled="formLoading"
+      :limit="1"
+      :on-change="handleFileChange"
+      :on-error="submitFormError"
+      :on-exceed="handleExceed"
+      :on-success="submitFormSuccess"
+      :http-request="httpRequest"
+      drag
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
+      <template #tip>
+        <!-- <div class="el-upload__tip" style="color: red">
+          提示：仅允许导入 jpg、png、gif 格式文件！
+        </div> -->
+      </template>
+    </el-upload>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitFileForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+
+defineOptions({ name: 'InfraFileForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const fileList = ref([]) // 文件列表
+const data = ref({ path: '' })
+const uploadRef = ref()
+
+const { uploadUrl, httpRequest } = useUpload()
+const currentType = ref(null) 
+/** 打开弹窗 */
+const open = async (type) => {
+    currentType.value = type  // 记录类型
+    console.log(currentType.value+"123123")
+  dialogVisible.value = true
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 处理上传的文件发生变化 */
+const handleFileChange = (file) => {
+  data.value.path = file.name
+}
+
+/** 提交表单 */
+const submitFileForm = () => {
+  if (fileList.value.length == 0) {
+    message.error('请上传文件')
+    return
+  }
+  unref(uploadRef)?.submit()
+}
+
+/** 文件上传成功处理 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitFormSuccess = (response: any, file: any) => {
+  // response 是后端接口返回的数据
+  // file 是当前上传的文件对象
+
+  // 假设后端返回格式：{ url: '文件地址', fileName: '文件名' }
+  const  url  = response.data
+console.log(currentType.value+"v")
+  dialogVisible.value = false
+  formLoading.value = false
+  uploadRef.value?.clearFiles()
+  message.success(t('common.createSuccess'))
+
+  // 触发成功事件，携带文件信息传递给父组件
+  emit('success', { url, fileType: currentType.value })
+}
+
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('上传失败，请您重新上传！')
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  // 重置上传状态和文件
+  formLoading.value = false
+  uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
+}
+</script>
--- a/src/views/paper/question/index.vue
+++ b/src/views/paper/question/index.vue
@@ -1,14 +1,15 @@
 <template>
  <el-row :gutter="20">
    <!-- 左侧部门树 -->
-    <el-col :span="4" :xs="24">
-      <ContentWrap class="h-1/2">
-        <SpecialtyTree @node-click="handleSpecialtyNodeClick" />
-      </ContentWrap>
-      <ContentWrap class="h-1/2">
-        <DeptTree @node-click="handleDeptNodeClick" />
-      </ContentWrap>
-    </el-col>
+<el-col :span="4" :xs="24">
+  <ContentWrap style="height: 50%; overflow-y: auto;">
+    <SpecialtyTree @node-click="handleSpecialtyNodeClick" />
+  </ContentWrap>
+  <ContentWrap style="height: 50%; overflow-y: auto;">
+    <DeptTree @node-click="handleDeptNodeClick" />
+  </ContentWrap>
+</el-col>
+
    <el-col :span="20" :xs="24">
      <!-- 搜索 -->
      <ContentWrap>
@@ -291,6 +292,7 @@ const queryParams = reactive({
  courseName: "",
  subjectName: "",
  pointNames:"",
+  chapteridDictText:"",
  pageNo: 1,
  pageSize: 10,
 })
@@ -348,20 +350,15 @@ const handleDeptNodeClick = async (row) => {
  // 判断点击的层级结构，进行入参
  if (!row.children != null){
  }
-  console.log(respoint.value+"respoint.value")
  const specArr: any = findNamePathFromTreeList(respoint.value, row.id)
-  console.log(specArr+"specArr")
  // 判断长度赋值
  if (specArr.length == 1) {
-
  }
  if (specArr.length == 2) {
- 
  }
  if (specArr.length == 3) {
- 
+    queryParams.chapteridDictText=specArr[1]
    queryParams.pointNames = specArr[2]
-    console.log(queryParams.pointNames +"queryParams.pointNames ")
  }
  await getList()
 }