From 82b98a26316d50a543142583262b9479c7586cfe Mon Sep 17 00:00:00 2001
From: xuesinan <1404152492@qq.com>
Date: Thu, 28 Oct 2021 14:16:15 +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 | 217 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 161 insertions(+), 56 deletions(-)

diff --git a/index.html b/index.html
index d45c870..0c89767 100644
--- a/index.html
+++ b/index.html
@@ -105,17 +105,17 @@
                 </div> -->
 
                 <div class="formulate-plan">
-                  <div class="mt-2.5 p-2 border border-gray-200 rounded-sm text-sm">
+                  <div class="p-2 border border-gray-200 rounded-sm text-sm">
                     <div class="temp flex justify-between items-center w-full">
                       <p class="w-20 flex-shrink-0 text-gray-400">选择模板</p>
                       <div class="flex items-center">
-                        <span class="sel-temp-name mr-1">模板1</span>
+                        <span class="sel-temp-name mr-1">请选择红头文件模板</span>
                         <img style="width: 15px;" src="https://www.tall.wiki/staticrec/icon/right.svg" />
                       </div>
                     </div>
 
                     <div class="mt-2 temp-list flex items-center">
-                      <div class="temp-item border border-blue-400 flex justify-center items-center" style="width: 30%; height: 100px; margin-right: 5%;" onclick="p1449927427387301888.selTemp(1)">
+                      <!-- <div class="temp-item border border-blue-400 flex justify-center items-center" style="width: 30%; height: 100px; margin-right: 5%;" onclick="p1449927427387301888.selTemp(1)">
                         <img style="max-width: 100%; max-height: 100%;" src="http://test.tall.wiki/staticrec/plan.png" />
                       </div>
                       <div class="temp-item border border-gray-200 flex justify-center items-center" style="width: 30%; height: 100px; margin-right: 5%;" onclick="p1449927427387301888.selTemp(2)">
@@ -123,12 +123,12 @@
                       </div>
                       <div class="temp-item border border-gray-200 flex justify-center items-center" style="width: 30%; height: 100px;" onclick="p1449927427387301888.selTemp(3)">
                         <img style="max-width: 100%; max-height: 100%;" src="http://test.tall.wiki/staticrec/plan.png" />
-                      </div>
+                      </div> -->
                     </div>
                   </div>
 
                   <div class="temp-box">
-                    <div class="organizer-box mt-2.5 px-2 py-1.5 w-full border border-gray-200 rounded-sm text-sm">
+                    <!-- <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>
                         <input class="organizer-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" placeholder="请输入主办单位" />
@@ -159,16 +159,24 @@
                       <input class="train-end-time text-right outline-none" type="date">
                     </div>
 
-                    <!-- <div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm">
-                      <p class="w-20 flex-shrink-0 text-gray-400">单选</p>
+                    <div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm">
+                      <p class="w-20 flex-shrink-0 text-gray-400">多选</p>
                       <div class="flex items-center flex-wrap justify-end">
-                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项1</label>
-                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项2</label>
-                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项3</label>
-                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项4</label>
-                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项5</label>
-                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项6</label>
+                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" value="" />选项1</label>
+                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" value="" />选项2</label>
+                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" value="" />选项3</label>
+                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" value="" />选项4</label>
+                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" value="" />选项5</label>
+                        <label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="checkbox" value="" />选项6</label>
                       </div>
+                    </div>
+
+                    <div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm">
+                      <p class="w-20 flex-shrink-0 text-gray-400">下拉选</p>
+                      <select id="group" value="1">
+                        <option value="1">Dimond</option>
+                        <option value="2">vertical</option>
+                      </select>
                     </div> -->
                   </div>
 
@@ -227,6 +235,7 @@
                 curStatus: 0, // 当前状态 0 未提交 1 已提交待审核
                 curIndex: 0, // 当前选择的模板
                 tempList: [{name: '模板1', organizer: '国家体育总局社会体育指导中心', title: ''}, {name: '模板2', organizer: '', title: ''}, {name: '模板3', organizer: '', title: ''}],
+                tempData: {},
 
                 init() {
                   this.dom = document.querySelector("div[data-root=p1449927427387301888]");
@@ -305,6 +314,7 @@
                       //     that.showOrHide(2, 0, 0, 0);
                       //   }
                       // }
+                      that.tempData = data;
                     } else {
                       console.log('msg: ', msg);
                     }
@@ -316,61 +326,156 @@
                  */
                 getAllTemp() {
                   var that = this;
-                  // fetch(`https://test.tall.wiki/gateway/sports/training/template`, {
-                  //   headers: new Headers({
-                  //     'Authorization': 'Bearer ' + that.token,
-                  //     'Content-Type': 'application/json; charset=utf-8'
-                  //   }),
-                  //   method: 'POST',
-                  //   body: JSON.stringify({
-                  //     param: {projectId: that.projectId}
-                  //   })
-                  // })
-                  // .then(function(response) {
-                  //   return response.json();
-                  // })
-                  // .then(function(res) {
-                  //   const { success, code, data, msg } = res;
-                  //   if (success && code === 200) {
-                  //     for (let i = 0; i < data.length; i++) {
-                  //       if (data[i].type === 0) {
-                  //         that.tempList = data[i].templateList;
-                  //       }
-                  //     }
-
-                  //     let html = '';
-
-                  //     for (let j = 0; j < that.tempList.length; j++) {
-                  //       html += `<div class="temp-item border border-blue-400 flex justify-center items-center" style="width: 30%; height: 100px; ${j % 3 == 2 ? '' : 'margin-right: 5%;'}" onclick="p1449927427387301888.selTemp(${j}, ${that.tempList[j]}}})">
-                  //                 <img style="max-width: 100%; max-height: 100%;" src="${that.tempList[j].path}" />
-                  //               </div>`;
-                  //     }
-
-                  //     that.dom.querySelector('.temp-list').html = html;
-
-                  //     html += `<div class="temp-item border border-blue-400 flex justify-center items-center" style="width: 30%; height: 100px;" onclick="p1449927427387301888.selTemp(1)">
-                  //               <img style="max-width: 100%; max-height: 100%;" src="http://test.tall.wiki/staticrec/plan.png" />
-                  //             </div>`;
-
-                  //   } else {
-                  //     console.log('msg: ', msg);
-                  //   }
-                  // });
+                  fetch(`https://test.tall.wiki/gateway/sports/training/template`, {
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token,
+                      'Content-Type': 'application/json; charset=utf-8'
+                    }),
+                    method: 'POST',
+                    body: JSON.stringify({
+                      param: {projectId: that.projectId}
+                    })
+                  })
+                  .then(function(response) {
+                    return response.json();
+                  })
+                  .then(function(res) {
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                      for (let i = 0; i < data.length; i++) {
+                        if (data[i].type === 0) {
+                          that.tempList = data[i].templateList;
+                        }
+                      }
+
+                      that.renderTemp(); // 渲染模板
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  });
                 },
 
                 /**
                  * 选择模板
                  */
                 selTemp(index) {
+                  let obj = this.tempList[index];
                   let tempName = document.querySelector('.sel-temp-name');
-                  tempName.innerHTML = this.tempList[index - 1].name;
+                  tempName.innerHTML = obj.name;
                   let temps = document.querySelectorAll('.temp-item');
                   for (let i = 0; i < temps.length; i++) {
                     temps[i].classList.remove("border-blue-400");
                     temps[i].classList.add("border-gray-200");
                   }
-                  temps[index - 1].classList.add("border-blue-400");
-                  this.curIndex = index - 1;
+                  temps[index].classList.add("border-blue-400");
+                  this.curIndex = index;
+                  this.getTempData(obj.id);
+                },
+
+                // 根据模板id获取模板数据
+                getTempData(id) {
+                  var that = this;
+                  fetch(`https://test.tall.wiki/gateway/sports/training/templateId`, {
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token,
+                      'Content-Type': 'application/json; charset=utf-8'
+                    }),
+                    method: 'POST',
+                    body: JSON.stringify({
+                      param: {id: id}
+                    })
+                  })
+                  .then(function(response) {
+                    return response.json();
+                  })
+                  .then(function(res) {
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                      for (let i = 0; i < data.length; i++) {
+                        if (data[i].type === 0) {
+                          that.tempList = data[i].templateList;
+                        }
+                      }
+                      that.tempData = data;
+                      that.renderTempData(); // 渲染模板数据
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  });
+                },
+
+                // 渲染模板
+                renderTemp() {
+                  let that = this;
+                  // this.tempList
+
+                  let html = '';
+
+                  for (let j = 0; j < that.tempList.length; 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="p1449927427387301888.selTemp(${j})">
+                              <img style="max-width: 100%; max-height: 100%;" src="${that.tempList[j].path}" />
+                            </div>`;
+                  }
+
+                  that.dom.querySelector('.temp-list').innerHTML = html;
+                },
+
+                // 渲染模板数据
+                renderTempData() {
+                  let html = '';
+                  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}">
+                                <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}" />
+                                </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>
+                              </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}">`;
+                      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="radio" data-id="${data.optionList[j].optionId}" 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>`;
+                    } 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>`;
+                    } 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}">
+                                </div>
+                              </div>`;
+                    }
+                  }
+
+                  this.dom.querySelector('.temp-box').innerHTML = html;
                 },
 
                 // 预览