wally
/
plugin-templete
1
0
Fork 1
Code Issues Releases Wiki Activity
Browse Source

红头文件

tiaosheng-ms
xuesinan 4 years ago
parent
a9bb2c2e36
commit
82b98a2631
1 changed files with 161 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 217
      index.html

217
index.html
View File

@ -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;
},
// 预览

Write Preview
Loading…
Cancel
Save