连线添加音频功能

src/views/buss/exam/question/QuestionFormPage.vue

@@ -46,18 +46,29 @@
                     height="350"
                     placement="bottom"
                   >
-                   宽度(px) <a-input type="number" :value="tzSize.sizeWidth" />
-                   高度(px) <a-input type="number" :value="tzSize.sizeHeight" />
-                     <a-upload  @change="addItemImg" style="border-radius: 5px;width: 75px;margin: auto"
-                                       multiple="multiple" > <a-button type="primary">背景图片</a-button></a-upload>
-                    <a-input  :value="tzSize.sizeUrl" />
-                    <a-button @click="addItem();drawerHiddenClose();" >确定</a-button>
+                    宽度(px)
+                    <a-input type="number" v-model:value="tzSize.sizeWidth"/>
+                    高度(px)
+                    <a-input type="number" v-model:value="tzSize.sizeHeight"/>
+                    <a-upload @change="addItemImg"
+                              style="border-radius: 5px;width: 75px;margin: auto"
+                              multiple="multiple">
+                      <a-button type="primary">背景图片</a-button>
+                    </a-upload>
+                    <a-input v-model:value="tzSize.sizeUrl"/>
+                    <a-button v-if="addMod===0" @click="addItem();drawerHiddenClose();">确定
+                    </a-button>
+                    <a-button v-if="addMod===1" @click="addAns();drawerHiddenClose();">确定
+                    </a-button>
+                    <a-button v-if="addMod===2" @click="addImg();drawerHiddenClose();">确定
+                    </a-button>
                   </a-drawer>
-                  <button @click="sizeDrawer=true">添加选项组件</button>
-                  <button @click="addAns">添加答案位置</button>
-                  <a-upload @change="addImg" style="border-radius: 5px;width: 75px;margin: auto"
-                            multiple="multiple">添加背景图片
-                  </a-upload>
+                  <button @click="addOption(0)">添加选项组件</button>
+                  <button @click="addOption(1)">添加答案位置</button>
+                  <button @click="addOption(2)">添加背景图片</button>
+                  <!--                  <a-upload @change="addOption(2)" style="border-radius: 5px;width: 75px;margin: auto"-->
+                  <!--                            multiple="multiple">添加背景图片-->
+                  <!--                  </a-upload>-->
                   <button @click="subOneType7">保存当前</button>
                   <button @click="clean">清理</button>
                 </div>
@@ -66,9 +77,9 @@
 
                   </div>
                   <button @click="addConnectionRow">添加一列</button>
-                  <button @click="delConnectionRow">删除最后一列</button>
+                  <button @click="walert">删除最后一列</button>
                   <button @click="subOneType7">保存当前</button>
-                  <button @click="ConnectionItemclean">清空</button>
+                  <button @click="walert">清理</button>
                 </div>
               </a-form-item>
             </a-col>
@@ -313,17 +324,18 @@ const blankColumns: JVxeColumn[] = [
 const sizeDrawer = ref<boolean>(false);
 
 
-const drawerHiddenClose=()=> {
-  console.log(sizeDrawer)
- sizeDrawer.value=!sizeDrawer.value
-  console.log(sizeDrawer)
-
+const drawerHiddenClose = () => {
+  sizeDrawer.value = !sizeDrawer.value
+  tzSize.value.sizeUrl = null
+  tzSize.value.sizeWidth = 100
+  tzSize.value.sizeHeight = 100
 }
-let tzSize=ref({
-  sizeWidth:100,
-  sizeHeight:100,
-  sizeUrl:null
+let tzSize = ref({
+  sizeWidth: 100,
+  sizeHeight: 100,
+  sizeUrl: null
 })
+
 function handleChange(val) {
   console.log(val)
   if (currentQuestionType.value == 5) {
@@ -471,6 +483,21 @@ let Connection = 0;
 let arrBodyIndex = [];
 let arrAnsIndex = [];
 
+let addMod = 0;
+
+function addOption(value) {
+  addMod = value
+  sizeDrawer.value = true
+  tzSize.value.sizeUrl = null
+  tzSize.value.sizeWidth = 100
+  tzSize.value.sizeHeight = 100
+}
+
+function walert(value) {
+  window.alert('暂不可用，填错请刷新')
+}
+
+
 function addItem() {
   let index = bodyIndex
   ssaawcBody.value.innerHTML += `<div id='option${index}'` +
@@ -491,11 +518,12 @@ function addItem() {
   }, 1000)
 }
 
-function addConnectionRow() {
+function addConnectionRow(value) {
   if (bodyIndex > 3) {
     window.alert("已达上限")
     return
   }
+
   let index = bodyIndex
   ssaawcBody.value.innerHTML += `<div style="display: inline-block;text-align: center;margin-right: 70px;"><div id='option${index}'` +
     "                         style=\"display: inline-block;background-color: red; width: 120px;min-height: 200px;\">" +
@@ -532,6 +560,7 @@ function addConnectionRow() {
       let url = "";
       const file = event.target.files[0];
       if (file) {
+        console.log(file)
         var formData = new FormData(); // 创建FormData对象
         formData.append('file', file); // 将文件添加到FormData对象中
 
@@ -547,11 +576,22 @@ function addConnectionRow() {
           }
           //
           var message = JSON.parse(date.target.response).message;
-          console.log(message)
+          console.log(JSON.parse(date.target.response))
           url = "http://10.11.12.100:8080/exam-boot/sys/common/static/" + message
-          option.innerHTML += `<div id="option${index + "-" + (add.children.length + 1)}" style="width: 90px;height: 90px;background-color: #0a9fe5;margin: auto;margin-bottom: 10px">
+          console.log(file)
+          if (file.type.includes('image')) {
+            option.innerHTML += `<div id="option${index + "-" + (option.children.length + 1)}" style="width: 90px;height: 90px;background-color: #0a9fe5;margin: auto;margin-bottom: 10px">
 <img style="width: 90px;height: 90px" src="${url}" alt=""/>
 </div>`
+          } else if (file.type === 'audio/mpeg') {
+            option.innerHTML += `<div id="option${index + "-" + (option.children.length + 1)}" style="width: 90px;height: 90px;overflow: hidden;background-color: #0a9fe5;margin: auto;margin-bottom: 10px">
+
+<audio id="myAudio" style="width: 290px;height:50px;position: relative;left: -120px" src="${url}"  controls="false"></audio>
+        <button onclick="document.getElementById('myAudio').play();">开始</button>
+        <button onclick="document.getElementById('myAudio').pause();">暂停</button>
+</div>`
+          }
+
         };
 
         xhr.send(formData); // 发送请求
@@ -561,7 +601,21 @@ function addConnectionRow() {
     })
     let del = document.getElementById("del" + index);
     del.addEventListener('click', () => {
-      console.log("sss")
+      if (option.children.length > 0) {
+        const c = []
+        for (let i = 0; i < option.children.length - 1; i++) {
+          c.push(option.children[i])
+        }
+        console.log(option)
+        option.innerHTML = ''
+        for (let i = 0; i < c.length; i++) {
+          option.innerHTML += c[i].outerHTML
+        }
+        let copyArray: any = answer.dataSource.slice();
+        copyArray.pop();
+        answer.dataSource = copyArray;
+        Connection--
+      }
     })
   }, 10)
 }
@@ -569,7 +623,7 @@ function addConnectionRow() {
 function addAns() {
   let index = ansIndex
   ssaawcBody.value.innerHTML += `<div id='answer${index}'` +
-    "                         style=\"position: absolute;display: inline-block;border: black solid 1px; width: 100px;height: 100px;cursor: move;top: 10px\">" +
+    `                         style=\"position: absolute;display: inline-block;border: black solid 1px; width: ${tzSize.value.sizeWidth}px;height: ${tzSize.value.sizeHeight}px;cursor: move;top: 10px\">` +
     `                     scsac${index + 1}` +
     `                    <button id="butAns${index}">锁定</button></div>`
   ansIndex++
@@ -598,33 +652,11 @@ function addAns() {
 }
 
 function addImg() {
-  let url = "";
-  const file = event.target.files[0];
-  if (file) {
-    var formData = new FormData(); // 创建FormData对象
-    formData.append('file', file); // 将文件添加到FormData对象中
-
-    var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
-    xhr.open('POST', 'http://10.11.12.100:8080/exam-boot/sys/common/upload', true); // 初始化请求，这里的'/upload'是服务器上处理上传文件的路径
-    xhr.setRequestHeader("x-access-token", getToken())
-
-    xhr.onload = function (date) {
-      if (this.status == 200) {
-        console.log('文件上传成功');
-      } else {
-        console.error('文件上传失败');
-      }
-      //
-      var message = JSON.parse(date.target.response).message;
-      console.log(message)
-      url = "http://10.11.12.100:8080/exam-boot/sys/common/static/" + message
-      ssaawcBody.value.innerHTML =  `<img style="width: 700px;height: 500px" src="${url}" alt=""/>`
-    };
 
-    xhr.send(formData); // 发送请求
+  ssaawcBody.value.innerHTML = `<img style="width: ${tzSize.value.sizeWidth}px;height: ${tzSize.value.sizeHeight}px" src="${tzSize.value.sizeUrl}" alt=""/>`
 
-  }
 }
+
 function addItemImg() {
   let url = "";
   const file = event.target.files[0];
@@ -646,7 +678,7 @@ function addItemImg() {
       var message = JSON.parse(date.target.response).message;
       console.log(message)
       url = "http://10.11.12.100:8080/exam-boot/sys/common/static/" + message
-      tzSize.value.sizeUrl=url
+      tzSize.value.sizeUrl = url
       console.log(tzSize.value.sizeUrl)
     };
 
@@ -663,6 +695,7 @@ function subOneType7() {
 }
 
 function clean() {
+  Connection = 0
   bodyIndex = 0;
   ansIndex = 0;
   formData.value.content = ""
@@ -725,38 +758,38 @@ function ssaawcs(item, but, index: number) {
   function ass(event) {
     event.preventDefault(); // 阻止默认行为
 
-      var startX = event.clientX; // 记录初始鼠标位置
-      var startY = event.clientY;
-      var startLeft = item.style.left.toString().replace('px', ''); // 记录DIV初始位置
-      var startTop = item.style.top.toString().replace('px', '');
-      startLeft = Number(startLeft)
-      startTop = Number(startTop)
-      console.log(item)
+    var startX = event.clientX; // 记录初始鼠标位置
+    var startY = event.clientY;
+    var startLeft = item.style.left.toString().replace('px', ''); // 记录DIV初始位置
+    var startTop = item.style.top.toString().replace('px', '');
+    startLeft = Number(startLeft)
+    startTop = Number(startTop)
+    console.log(item)
 // 鼠标移动事件
-      document.onmousemove = function (event) {
-        var newX = event.clientX; // 计算新的鼠标位置
-        var newY = event.clientY;
-        var newLeft = startLeft + (newX - startX); // 更新DIV位置
-        var newTop = startTop + (newY - startY);
-        console.log(item.id)
-        if (newTop >= 0 && newTop + 100 <= Number(ssaawcBody.value.style.height.toString().replace('px', ''))) {
-          item.style.top = newTop + "px";
-        } else if (newTop < 0) {
-          item.style.top = "0px"
-        }
-        if (newLeft >= 0 && newLeft + 100 <= Number(ssaawcBody.value.style.width.toString().replace('px', ''))) {
-          item.style.left = newLeft + "px"; // 应用新位置
-        } else if (newLeft < 0) {
-          item.style.left = "0px";
-        }
+    document.onmousemove = function (event) {
+      var newX = event.clientX; // 计算新的鼠标位置
+      var newY = event.clientY;
+      var newLeft = startLeft + (newX - startX); // 更新DIV位置
+      var newTop = startTop + (newY - startY);
+      console.log(item.id)
+      if (newTop >= 0 && newTop + 100 <= Number(ssaawcBody.value.style.height.toString().replace('px', ''))) {
+        item.style.top = newTop + "px";
+      } else if (newTop < 0) {
+        item.style.top = "0px"
+      }
+      if (newLeft >= 0 && newLeft + 100 <= Number(ssaawcBody.value.style.width.toString().replace('px', ''))) {
+        item.style.left = newLeft + "px"; // 应用新位置
+      } else if (newLeft < 0) {
+        item.style.left = "0px";
+      }
 
-      };
+    };
 
 // 鼠标松开事件
-      document.onmouseup = function () {
-        document.onmousemove = null; // 移除事件监听器
-        document.onmouseup = null;
-      };
+    document.onmouseup = function () {
+      document.onmousemove = null; // 移除事件监听器
+      document.onmouseup = null;
+    };
 
 
   }
@@ -892,6 +925,7 @@ async function submitForm(data) {
 
 //提交表单
 function handleSubmit() {
+
   formRef.value
     .validate().then(() => {
     //单选，多选，判断，填空的校验
@@ -902,7 +936,10 @@ function handleSubmit() {
         createMessage.error("答案选项不能为空");
         return false;
       }
-
+      if (currentQuestionType.value == 8 && bodyIndex < 2) {
+        createMessage.error("连线题列数不足");
+        return
+      }
       answerTable.value!.validateTable().then(errMap => {
         if (errMap) {
           console.log("表单验证未通过：", {errMap});

src/views/buss/exam/question/index.vue

@@ -34,7 +34,7 @@
       <template #htmlSlot="{text}">
         <div v-if="text.includes('position: absolute')" v-html='"<div ref=\"ssaawcBody\" style=\"background-color: #aaaaaa;height: 500px;width: 700px\">"+text+"</div>"'></div>
         <div v-if="!text.includes('position: absolute')&&!text.includes('display: inline-block;text-align: center;')" v-html='text'></div>
-        <div v-if="text.includes('display: inline-block;text-align: center;')" v-html='text.replace(`
+        <div v-if="text.includes('display: inline-block;text-align: center;')" v-html='"<div ref=\"ssaawcBody\" style=\"background-color: #aaaaaa;height: 500px;width: 700px\">"+text.replace(`
 <br>
 添加一个:<input style="border-radius: 5px;width: 75px;margin: auto" type="file" multiple="multiple" id="add1">
 
@@ -54,7 +54,7 @@
 添加一个:<input style="border-radius: 5px;width: 75px;margin: auto" type="file" multiple="multiple" id="add3">
 
 <br>
-<button style="border-radius: 5px;margin-top: 5px" id="del3">删除一个</button>`,"")'></div>
+<button style="border-radius: 5px;margin-top: 5px" id="del3">删除一个</button>`,"")+"</div>"'></div>
       </template>
       <!--省市区字段回显插槽-->
       <template #pcaSlot="{text}">