|
|
@@ -1,30 +1,468 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
- <title>计算公式</title>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
- <link rel="stylesheet" href="./css/bootstrap.css">
|
|
|
- <script src="./js/jquery-3.6.0.min.js"></script>
|
|
|
- <script src="./js/bootstrap.js"></script>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <script src="https://admin.jubaolife.com/static/admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
|
|
|
+ <title>列表</title>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-left {
|
|
|
+ width: 200px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ background: rgb(216, 195, 157);
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-left input {
|
|
|
+ width: 80%;
|
|
|
+ min-height: 30px;
|
|
|
+ outline: none;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 0 5px;
|
|
|
+ border: 1px solid rgb(69, 126, 123);
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-left button {
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 10px 25px;
|
|
|
+ margin: 10px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right {
|
|
|
+ width: calc(100vw - 200px);
|
|
|
+ padding: 10px 15px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: rgb(160, 240, 178);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right table {
|
|
|
+ cursor: default;
|
|
|
+ border: 1px solid #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right table {
|
|
|
+ width: calc(100vw - 300px);
|
|
|
+ text-align: center;
|
|
|
+ margin: 20px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right table thead td {
|
|
|
+ color: #fff !important;
|
|
|
+ background: rgb(73, 187, 58);
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right table tr td {
|
|
|
+ height: 35px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #000;
|
|
|
+ border: 1px solid #000;
|
|
|
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right table tr td button {
|
|
|
+ padding: 3px 7px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right table tr td input {
|
|
|
+ width: 200px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ background-color: #0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right table tr td span {
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: antiquewhite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right table tr td span:hover {
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgb(172, 163, 152);
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ width: 200px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 5px;
|
|
|
+ background-color: rgb(207, 183, 226);
|
|
|
+ }
|
|
|
+
|
|
|
+ .search input {
|
|
|
+ width: 130px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: snow;
|
|
|
+ border: 1px solid rgb(80, 80, 80);
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
- <div></div>
|
|
|
+<div class="container">
|
|
|
+ <div class="container-left">
|
|
|
+ <p>信息输入</p>
|
|
|
+ <form action="#" method="GET">
|
|
|
+ type：
|
|
|
+ <input type="text" name="type" id="type"/>
|
|
|
+ orderNo：
|
|
|
+ <input type="text" name="orderNo" id="orderNo"/>
|
|
|
+ formula：
|
|
|
+ <input type="text" name="formula" id="formula"/>
|
|
|
+ provinceEnum：
|
|
|
+ <input type="text" name="provinceEnum" id="provinceEnum"/>
|
|
|
+ ruleFormula：
|
|
|
+ <input type="text" name="ruleFormula" id="ruleFormula"/>
|
|
|
+ <button type="button" class="btn">添加</button>
|
|
|
+ <button type="reset">重置</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="container-right">
|
|
|
+ <p>信息显示</p>
|
|
|
+ <table cellpadding="0" cellspacing="0">
|
|
|
+ <thead>
|
|
|
+ <td>序号</td>
|
|
|
+ <td>一</td>
|
|
|
+ <td>二</td>
|
|
|
+ <td>三</td>
|
|
|
+ <td>四</td>
|
|
|
+ <td>五</td>
|
|
|
+ <td>移除</td>
|
|
|
+ <td>修改</td>
|
|
|
+ </thead>
|
|
|
+ <tbody id="main">
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
</body>
|
|
|
+<script type="text/javascript">
|
|
|
+ //TODO 1.获取元素
|
|
|
+ // 获取存放数据位置的tbody标签
|
|
|
+ var tbody = document.querySelector('tbody');
|
|
|
+ // 获取输入数据区域的input的标签
|
|
|
+ var inputs = document.querySelectorAll('.container-left input');
|
|
|
+ // 获取触发添加功能的button按钮
|
|
|
+ var btn = document.querySelector('.btn');
|
|
|
+ // 获取触发清空表单的button按钮
|
|
|
+ var reset = document.querySelector('button[type=reset]');
|
|
|
+ // 设定序号初始值
|
|
|
+ var number = 0;
|
|
|
+ // 判断记录值
|
|
|
+ var flag = true;
|
|
|
+ // 定义空对象，存放输入数据
|
|
|
+ var message = {};
|
|
|
+ // 定义空数组，存放对象
|
|
|
+ var students = [];
|
|
|
+ // 接口数据
|
|
|
+ var list = [
|
|
|
+ {
|
|
|
+ id: 23,
|
|
|
+ type: "POINT_S",
|
|
|
+ orderNo: 1,
|
|
|
+ formula: "(1-math.abs((sj-yc)/yc))*100",
|
|
|
+ provinceEnum: "E21Old;E61;E62;E63;E64;",
|
|
|
+ ruleFormula: null
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ $.ajax({
|
|
|
+ url: "http://localhost:9089/jarCalculate/select",
|
|
|
+ type: "GET",
|
|
|
+ async: false,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (res) {
|
|
|
+ list = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 新增接口
|
|
|
+ function postAdd(data) {
|
|
|
+ $.ajax({
|
|
|
+
|
|
|
+ type: "post",
|
|
|
+ dataType: "json",
|
|
|
+ contentType: 'application/json',
|
|
|
+ url: "http://localhost:9089/jarCalculate/add",
|
|
|
+ /* data,*/
|
|
|
+ data: JSON.stringify(data),
|
|
|
+
|
|
|
+
|
|
|
+ type: "POST",
|
|
|
+ async: false,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (res) {
|
|
|
+ console.log(res)
|
|
|
+ // 将输入的数据存入数组
|
|
|
+ message = {
|
|
|
+ "number": number,
|
|
|
+ "id": res.data.id,
|
|
|
+ "type": inputs[0].value,
|
|
|
+ "orderNo": inputs[1].value,
|
|
|
+ 'formula': inputs[2].value,
|
|
|
+ 'provinceEnum': inputs[3].value,
|
|
|
+ 'ruleFormula': inputs[4].value
|
|
|
+ };
|
|
|
+ // 调用去重函数
|
|
|
+ clearMess();
|
|
|
+ // 启用自动数据重置
|
|
|
+ reset.click();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 修改
|
|
|
+ function postEdit(data) {
|
|
|
+ $.ajax({
|
|
|
+ url: "http://localhost:9089/jarCalculate/edit",
|
|
|
+ data,
|
|
|
+ type: "POST",
|
|
|
+ async: false,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (res) {
|
|
|
+ alert(res.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ function postDelet(index) {
|
|
|
|
|
|
-<script>
|
|
|
- // 初始化
|
|
|
- init();
|
|
|
- // 初始化数据
|
|
|
- function init() {
|
|
|
$.ajax({
|
|
|
+ url: "http://localhost:9089/jarCalculate/delet",
|
|
|
+ data: JSON.stringify({
|
|
|
+ id: students[index].id
|
|
|
+ }),
|
|
|
type: "post",
|
|
|
- url: "/jarCalculate/add",
|
|
|
- success: function (data) {
|
|
|
- console.log("add");
|
|
|
+ dataType: "json",
|
|
|
+ contentType: 'application/json',
|
|
|
+ cache: false,
|
|
|
+ success: function (res) {
|
|
|
+ alert(res.message);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
+</script>
|
|
|
+<script>
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ message = {
|
|
|
+ "number": i + 1,
|
|
|
+ "id": list[i].id,
|
|
|
+ "type": list[i].type,
|
|
|
+ "orderNo": list[i].orderNo,
|
|
|
+ 'formula': list[i].formula,
|
|
|
+ 'provinceEnum': list[i].provinceEnum,
|
|
|
+ 'ruleFormula': list[i].ruleFormula
|
|
|
+ };
|
|
|
+ inputs[0].value = list[i].type;
|
|
|
+ inputs[1].value = list[i].orderNo;
|
|
|
+ inputs[2].value = list[i].formula;
|
|
|
+ inputs[3].value = list[i].provinceEnum;
|
|
|
+ inputs[4].value = list[i].ruleFormula;
|
|
|
+ // 调用去重函数
|
|
|
+ clearMess();
|
|
|
+ // 启用自动数据重置
|
|
|
+ reset.click();
|
|
|
+ }
|
|
|
+ // TODO 2.添加功能
|
|
|
+ btn.addEventListener('click', function () {
|
|
|
+ // 输入框非空判断
|
|
|
+ if (inputs[0].value != '' && inputs[0].value != null && inputs[1].value != '' && inputs[1].value !=
|
|
|
+ null && inputs[2].value != '' && inputs[2].value != null && inputs[3].value != '' && inputs[3].value != null) {
|
|
|
+ postAdd({
|
|
|
+ type: inputs[0].value,
|
|
|
+ orderNo: inputs[1].value,
|
|
|
+ formula: inputs[2].value,
|
|
|
+ provinceEnum: inputs[3].value,
|
|
|
+ ruleFormula: inputs[4].value
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 空数据提示
|
|
|
+ alert("数据输入不完全，请重新输入数据");
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ });
|
|
|
+
|
|
|
+ //TODO 去重函数
|
|
|
+ function clearMess() {
|
|
|
+ students.push(message);
|
|
|
+ // 调用回显函数
|
|
|
+ innerMess();
|
|
|
+ };
|
|
|
+
|
|
|
+ // TODO 回显函数
|
|
|
+ function innerMess() {
|
|
|
+ // 生成表格内容区域
|
|
|
+ if (flag) {
|
|
|
+ // 创建新的tr节点
|
|
|
+ var trs = document.createElement('tr');
|
|
|
+ tbody.appendChild(trs);
|
|
|
|
|
|
+ // 每次创建一个tr，number+1
|
|
|
+ number++;
|
|
|
+
|
|
|
+ // 创建一个td，接收number值，赋予序号的含义
|
|
|
+ var tdNum = document.createElement('td');
|
|
|
+ tdNum.classList.add('nums');
|
|
|
+ tdNum.innerHTML = number;
|
|
|
+ trs.appendChild(tdNum);
|
|
|
+
|
|
|
+ // 将输入框的值赋予到新创建的td
|
|
|
+ for (var i = 0; i < inputs.length; i++) {
|
|
|
+ var tds = document.createElement('td');
|
|
|
+ tds.innerHTML = inputs[i].value;
|
|
|
+ trs.appendChild(tds);
|
|
|
+ }
|
|
|
+ ;
|
|
|
+
|
|
|
+ // 创建移除操作按钮 - 删除
|
|
|
+ var deleteBtn = document.createElement('td');
|
|
|
+ deleteBtn.innerHTML = `<button class="delete" data-event="deleteMess">删除</button>`;
|
|
|
+ trs.appendChild(deleteBtn);
|
|
|
+
|
|
|
+ // 创建修改操作按钮 - 修改
|
|
|
+ var changeBtn = document.createElement('td');
|
|
|
+ changeBtn.innerHTML = `<button class="change" data-event="changeMess">修改</button>`;
|
|
|
+ trs.appendChild(changeBtn);
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ };
|
|
|
+
|
|
|
+ //TODO 删除函数
|
|
|
+ function deleteMess(element) {
|
|
|
+ // 获取到当前标签的序号
|
|
|
+ var deleteIndex = element.parentNode.parentNode;
|
|
|
+ if (confirm("是否确认操作")) {
|
|
|
+ deleteIndex.remove();
|
|
|
+ // 根据序号删除数组中的对应数据
|
|
|
+ for (var i = 0; i < students.length; i++) {
|
|
|
+ if (students[i].number == deleteIndex.children[0].innerHTML) {
|
|
|
+ postDelet(i)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ students.splice(i, 1);
|
|
|
+ var nums = document.querySelectorAll('.nums');
|
|
|
+ // 删除行的同时，控制删除行以外行数序号的删减
|
|
|
+ var index;
|
|
|
+ if (nums.length > 0) {
|
|
|
+ for (var i = 0; i < nums.length; i++) {
|
|
|
+ index = i;
|
|
|
+ var nums = document.querySelectorAll('.nums');
|
|
|
+ nums[index].innerHTML = index + 1;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ number--;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ };
|
|
|
+
|
|
|
+ //TODO 修改函数
|
|
|
+ function changeMess(element) {
|
|
|
+ var tds2 = element.parentNode.parentNode.children;
|
|
|
+ for (var i = 1; i < tds2.length - 2; i++) {
|
|
|
+ inputs[i - 1].value = tds2[i].innerHTML;
|
|
|
+ tds2[i].innerHTML = `<input type="text" value='${tds2[i].innerText}'/>`;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ element.parentNode.innerHTML = `<button class="change" data-event="updateMess">更新</button>`;
|
|
|
+ };
|
|
|
+
|
|
|
+ //TODO 更新函数
|
|
|
+ function updateMess(element) {
|
|
|
+ var id = '';
|
|
|
+ var tdsInp = document.querySelectorAll('table input');
|
|
|
+ var firstNumber = parseInt(element.parentNode.parentNode.firstElementChild.innerHTML);
|
|
|
+ var tds3 = element.parentNode.parentNode.children;
|
|
|
+ for (var i = 0; i < students.length; i++) {
|
|
|
+ if (students[i].number == tds3[0].innerHTML) {
|
|
|
+ id = students[i].id;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ students.splice(firstNumber - 1, 1);
|
|
|
+ var message2 = {
|
|
|
+ "number": firstNumber - 1,
|
|
|
+ "id": id,
|
|
|
+ "type": tdsInp[0].value,
|
|
|
+ "orderNo": tdsInp[1].value,
|
|
|
+ 'formula': tdsInp[2].value,
|
|
|
+ 'provinceEnum': tdsInp[3].value,
|
|
|
+ 'ruleFormula': tdsInp[4].value
|
|
|
+ };
|
|
|
+ postEdit({
|
|
|
+ id: id,
|
|
|
+ type: tdsInp[0].value,
|
|
|
+ orderNo: tdsInp[1].value,
|
|
|
+ formula: tdsInp[2].value,
|
|
|
+ provinceEnum: tdsInp[3].value,
|
|
|
+ ruleFormula: tdsInp[4].value,
|
|
|
+ })
|
|
|
+ students.push(message2);
|
|
|
+ for (var i = 0; i < tdsInp.length; i++) {
|
|
|
+ tds3[i + 1].innerHTML = tdsInp[i].value;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ console.log(students)
|
|
|
+ reset.click();
|
|
|
+ element.parentNode.innerHTML = `<button class="change" data-event="changeMess">修改</button>`;
|
|
|
+ };
|
|
|
+ window.addEventListener('click', e => {
|
|
|
+ const {event} = e.target.dataset
|
|
|
+ if (event == 'updateMess') {
|
|
|
+ updateMess(e.target)
|
|
|
+ }
|
|
|
+ if (event == 'changeMess') {
|
|
|
+ changeMess(e.target)
|
|
|
+ }
|
|
|
+ if (event == 'deleteMess') {
|
|
|
+ deleteMess(e.target)
|
|
|
+ }
|
|
|
+ })
|
|
|
</script>
|
|
|
-</html>
|
|
|
+
|
|
|
+</html>
|
yuzijian