From b0a1281069142d6eb11d17953ec9511338a4a318 Mon Sep 17 00:00:00 2001
From: xuesinan <1404152492@qq.com>
Date: Tue, 28 Dec 2021 17:18:32 +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 | 86 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 67 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 281ea98..39cf103 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
           </div>
         </div> -->
 
-        <div class="flex-1" style="height: 50rem;">
+        <div class="flex-1" style="width: 100%; height: 50rem;">
           <div class="rounded-lg bg-white p-3" style="height: 100%;">
             <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>
@@ -99,9 +99,12 @@
                 fileId: '', // 上传文件ID
                 filePath: '', // 上传文件路径
                 curStatus: 0, // 当前状态 0 未提交 1 已提交待审核
-                curIndex: 0, // 当前选择的模板
+                // curIndex: 0, // 当前选择的模板
                 tempList: [{name: '模板1', organizer: '国家体育总局社会体育指导中心', title: ''}, {name: '模板2', organizer: '', title: ''}, {name: '模板3', organizer: '', title: ''}],
-                tempData: {},
+                tempData: {}, // 当前选择的模板数据
+                currTempData: {}, // 当前计划的模板数据
+                templateId: '', // 当前选择的模板ID
+                currTemplateId: '', // 当前计划的模板ID
 
                 init() {
                   this.dom = document.querySelector("div[data-root=p1472866674721169408]");
@@ -129,8 +132,7 @@
                         that.token = data.token;
                         // 查询培训计划
                         that.getTrainPlan()
-                        // 查询所有模板
-                        that.getAllTemp();
+
                       } else {
                         console.log('msg: ', msg);
                       }
@@ -158,10 +160,16 @@
                   .then(function(res) {
                     const { success, code, data, msg } = res;
                     if (success && code === 200) {
-
+                      that.templateId = data.templateId;
+                      that.currTemplateId = data.templateId;
+                      that.tempData = data.trainingInfos;
+                      that.currTempData = data.trainingInfos;
                     } else {
                       console.log('msg: ', msg);
                     }
+
+                    // 查询所有模板
+                    that.getAllTemp();
                   });
                 },
 
@@ -212,8 +220,15 @@
                     temps[i].classList.add("border-gray-200");
                   }
                   temps[index].classList.add("border-blue-400");
-                  this.curIndex = index;
-                  this.getTempData(obj.id);
+
+                  this.templateId = obj.id;
+                  if (this.currTemplateId === obj.id) {
+                    this.tempData = this.currTempData;
+                    this.renderTempData(); // 渲染模板数据
+                  } else {
+                    // this.curIndex = index;
+                    this.getTempData(obj.id);
+                  }
                 },
 
                 // 根据模板id获取模板数据
@@ -251,36 +266,43 @@
                 // 渲染模板
                 renderTemp() {
                   let that = this;
-                  // this.tempList
-
                   let html = '';
 
                   for (let j = 0; j < that.tempList.length; j++) {
+                    let d = that.tempList[j];
+
                     html += `<div class="temp-item border border-gray-200 flex justify-center items-center ${j > 2 ? 'mt-2' : ''}" style="width: 30%; height: 100px; ${j % 3 == 2 ? '' : 'margin-right: 5%;'}" onclick="p1472866674721169408.selTemp(${j})">
-                              <img style="max-width: 100%; max-height: 100%;" src="${that.tempList[j].path}" />
+                              <img style="max-width: 100%; max-height: 100%;" src="${d.path}" />
                             </div>`;
                   }
 
                   that.dom.querySelector('.temp-list').innerHTML = html;
+
+                  for (let j = 0; j < that.tempList.length; j++) {
+                    if (that.tempList[j].id === that.currTemplateId) {
+                      that.selTemp(j);
+                    }
+                  }
                 },
 
                 // 渲染模板数据
                 renderTempData() {
                   let that = this;
                   let html = '';
+
                   for (let i = 0; i < that.tempData.length; i++) {
                     let data = that.tempData[i];
                     if (data.type === 1) {
                       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 data-id="${data.questionId}" class="train-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" placeholder="请输入${data.question}" />
+                                  <input data-id="${data.questionId}" class="train-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" value="${data.answer ? data.answer : ''}" 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 data-id="${data.questionId}" class="train-desc text-right outline-none" style="width: calc(100% - 6rem)" placeholder="请输入${data.question}"></textarea>
+                                <textarea data-id="${data.questionId}" class="train-desc text-right outline-none" style="width: calc(100% - 6rem)" placeholder="请输入${data.question}">${data.answer ? data.answer : ''}</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}">`;
@@ -288,7 +310,7 @@
 
                       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.questionId}" 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.optionList[j].choose ? 'checked' : ''} data-id="${data.questionId}" value="${data.optionList[j].submitValue}" />${data.optionList[j].showValue}</label>`;
                       }
                       html += `</div>`;
                       html += `</div>`;
@@ -297,7 +319,7 @@
                       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 += `<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" ${data.optionList[j].choose ? 'checked' : ''} data-id="${data.questionId}" value="${data.optionList[j].submitValue}" />${data.optionList[j].showValue}</label>`;
                       }
                       html += `</div>`;
                       html += `</div>`;
@@ -305,9 +327,9 @@
                       data.answer = '1';
                       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" data-id="${data.questionId}" value="1">`;
+                      html += `<select id="group" data-id="${data.questionId}" value="${data.answer}">`;
                       for (let j = 0; j < data.optionList.length; j++) {
-                        html += `<option value="${data.optionList[j].submitValue}">${data.optionList[j].showValue} </option>`;
+                        html += `<option value="${data.optionList[j].submitValue}" ${data.optionList[j].choose ? 'selected' : ''}>${data.optionList[j].showValue}</option>`;
                       }
                       html += `</select>`;
                       html += `</div>`;
@@ -315,12 +337,12 @@
                       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" data-id="${data.questionId}" type="date" placeholder="请选择${data.question}">
+                                  <input class="train-start-time text-right outline-none" data-id="${data.questionId}" type="date" value="${data.answer}" placeholder="请选择${data.question}">
                                 </div>
                               </div>`;
                     } else if (data.type === 7) {
                       html += `<div class="file-upload mt-2.5 px-2 flex justify-between items-center w-full h-8 border border-gray-200 rounded-sm text-sm">
-                                <p class="file-name text-gray-400">文件上传</p>
+                                <p class="file-name text-gray-400 truncate" style="width: calc(100% - 50px);">${data.answer ? data.answer : '文件上传'}</p>
                                 <div class="relative flex items-center">
                                   <button>上传</button>
                                   <input class="input-file absolute z-10 opacity-0" type="file" data-id="${data.questionId}" name="files" id="file" multiple>
@@ -419,6 +441,32 @@
                   })
 
                   console.log('questionList', questionList)
+
+                  fetch(`https://test.tall.wiki/gateway/sports/training/save`, {
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token,
+                      'Content-Type': 'application/json; charset=utf-8'
+                    }),
+                    method: 'POST',
+                    body: JSON.stringify({
+                      param: {
+                        projectId: that.projectId,
+                        questionList,
+                        templateId: that.templateId
+                      }
+                    }),
+                  })
+                  .then(function(response) {
+                    return response.json();
+                  })
+                  .then(function(res) {
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                      that.getTrainPlan(); // 重新调用查询培训计划方法，查询提交后的红头文件
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  });
                 },
 
                 // 文件上传