From 6c5c14fee9d99c3b8f783dcf6f5f15e28f088893 Mon Sep 17 00:00:00 2001
From: xuesinan <1404152492@qq.com>
Date: Fri, 29 Oct 2021 18:33:37 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BA=A2=E5=A4=B4=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 91 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 66 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 42ea9cd..e130e87 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
             <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
             <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
 
-            <div data-tname="考勤" data-pid="1433332016270811136" data-uid="1217647686598135808" data-rid="rid333" data-tid="tid444" data-did="did555" style="height:50px;width:100%">
+            <div data-tname="考勤" data-pid="1453661473401479168" data-uid="1217647686598135808" data-rid="rid333" data-tid="tid444" data-did="did555" style="height:50px;width:100%">
               <div data-root="p1449927427387301888" style="height:100%;width:100%;">
                 <!-- <div class="train-plan" style="display: none;">
                   <div class="title"></div>
@@ -127,7 +127,7 @@
                     </div>
                   </div>
 
-                  <div class="temp-box">
+                  <div class="temp-box" id="form">
                     <!-- <div class="organizer-box mt-2.5 px-2 py-1.5 w-full border border-gray-200 rounded-sm text-sm">
                       <div class="flex justify-between items-center w-full" style="height: 20px;">
                         <p class="w-20 flex-shrink-0 text-gray-400">主办单位</p>
@@ -213,6 +213,10 @@
               //   formData.append('param', files[0]);
               //   p1449927427387301888.upload(formData)
               // }, false);
+              var form = document.getElementById("form");
+              form.addEventListener("input", function(e){
+                p1449927427387301888.setData(e);
+              })
               //事件委托就是利用事件冒泡特性，给父元素绑定事件
               //parent.contains(child) 判断是否是某个节点的子节点
               //e.target 触发事件的源节点
@@ -313,7 +317,7 @@
                       //     that.showOrHide(2, 0, 0, 0);
                       //   }
                       // }
-                      that.tempData = data;
+                      // that.tempData = data;
                     } else {
                       console.log('msg: ', msg);
                     }
@@ -425,16 +429,16 @@
                   for (let i = 0; i < this.tempData.length; i++) {
                     let data = this.tempData[i];
                     if (data.type === 1) {
-                      html += `<div class="mt-2.5 px-2 py-1.5 w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
+                      html += `<div class="ques-box mt-2.5 px-2 py-1.5 w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
                                 <div class="flex justify-between items-center w-full" style="height: 20px;">
                                   <p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>
-                                  <input class="train-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" placeholder="请输入${data.question}" />
+                                  <input data-id="${data.questionId}" class="ques-${data.questionId} train-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" placeholder="请输入${data.question}" />
                                 </div>
                               </div>`;
                     } else if (data.type === 2) {
                       html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full h-16 border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
                                 <p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>
-                                <textarea class="train-desc text-right outline-none" style="width: calc(100% - 6rem)" placeholder="请输入${data.question}"></textarea>
+                                <textarea class="ques-${data.questionId} train-desc text-right outline-none" style="width: calc(100% - 6rem)" placeholder="请输入${data.question}"></textarea>
                               </div>`;
                     } else if (data.type === 3) {
                       html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">`;
@@ -442,33 +446,33 @@
 
                       html += `<div class="flex items-center flex-wrap justify-end">`;
                       for (let j = 0; j < data.optionList.length; j++) {
-                        html += `<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" data-id="${data.optionList[j].optionId}" value="${data.optionList[j].submitValue}" />${data.optionList[j].showValue}</label>`;
+                        html += `<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" data-id="${data.questionId}" value="${data.optionList[j].submitValue}" />${data.optionList[j].showValue}</label>`;
                       }
                       html += `</div>`;
                       html += `</div>`;
                     } else if (data.type === 4) {
-                      html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
-                                <p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>
-                                <div class="flex items-center flex-wrap justify-end">
-                                  <% for (let j = 0; j < data.optionList.length; j++) { %>
-                                  <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" data-id="<%= data.optionList[j].optionId %>" value="<%= data.optionList[j].submitValue %>" /><%= data.optionList[j].showValue %></label>
-                                  <% } %>
-                                </div>
-                              </div>`;
+                      html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">`;
+                      html += `<p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>`;
+                      html += `<div class="flex items-center flex-wrap justify-end">`;
+                      for (let j = 0; j < data.optionList.length; j++) {
+                        html += `<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" data-id="${data.questionId}" value="${data.optionList[j].submitValue}" />${data.optionList[j].showValue}</label>`;
+                      }
+                      html += `</div>`;
+                      html += `</div>`;
                     } else if (data.type === 5) {
-                      html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
-                                <p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>
-                                <select id="group" value="1">
-                                  <% for (let j = 0; j < data.optionList.length; j++) { %>
-                                  <option data-id="<%= data.optionList[j].optionId %>" value="<%= data.optionList[j].submitValue %>"><%= data.optionList[j].showValue %></option>
-                                  <% } %>
-                                </select>
-                              </div>`;
+                      html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">`;
+                      html += `<p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>`;
+                      html += `<select id="group" value="1">`;
+                      for (let j = 0; j < data.optionList.length; j++) {
+                        html += `<option data-id="${data.questionId}" value="${data.optionList[j].submitValue}">${data.optionList[j].showValue} </option>`;
+                      }
+                      html += `</select>`;
+                      html += `</div>`;
                     } else if (data.type === 6) {
                       html += `<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm" data-id="${data.questionId}">
                                 <div class="flex justify-between items-center w-full" style="height: 20px;">
                                   <p class="w-20 flex-shrink-0 text-gray-400">${data.question}</p>
-                                  <input class="train-start-time text-right outline-none" type="date" placeholder="请选择${data.question}">
+                                  <input class="train-start-time text-right outline-none" data-id="${data.questionId}" type="date" placeholder="请选择${data.question}">
                                 </div>
                               </div>`;
                     }
@@ -477,13 +481,50 @@
                   this.dom.querySelector('.temp-box').innerHTML = html;
                 },
 
+                // 监听input框的值
+                setData(e) {
+                  var event = e || window.event;
+                  var tar = event.target || event.srcElement;
+                  let id = tar.getAttribute("data-id");
+
+                  console.log("event", event, "tar", tar, "id", id)
+
+                  let arr = this.tempData;
+                  arr.forEach(function(item, index) {
+                    if (item.type === 1 || item.type === 3 || item.type === 6) {
+                      if (item.questionId == id) {
+                        item.answer = tar.value;
+                      }
+                    }
+                  });
+
+                  console.log(arr);
+                },
+
                 // 预览
                 bigImg() {
                   document.querySelector('.img-preview').style.display = 'flex';
                 },
 
                 submit() {
-
+                  // this.tempData
+                  let that = this;
+                  console.log("that.tempData",that.tempData)
+                  let questionList = [], arr = that.tempData;
+                  arr.forEach(function(item, index) {
+                    console.log(item, index);
+                    if (item.type === 1 || item.type === 2) {
+                      item.answer = that.dom.querySelector('.ques-' + item.questionId).value;
+                      let obj = {};
+                      obj.questionId = item.questionId;
+                      obj.answerList = item.answer;
+                    } else if (item.type === 3) {
+                      item.answer = that.dom.querySelector('.ques-' + item.questionId).value;
+                      let obj = {};
+                      obj.questionId = item.questionId;
+                      obj.answerList = item.answer;
+                    }
+                  })
                 },
 
                 // 文件上传