|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>基本操作</title>
|
|
|
<style>
|
|
|
|
|
|
html,body{
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
table {
|
|
|
border-collapse: collapse;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
th, td {
|
|
|
text-align: center;
|
|
|
padding: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
thead th {
|
|
|
position: sticky; /* 使表头在滚动时保持固定 */
|
|
|
top: 0; /* 将其固定在容器的顶部 */
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
td{
|
|
|
border: 1px solid #ddd;
|
|
|
}
|
|
|
|
|
|
th {
|
|
|
background-color: #4CAF50;
|
|
|
color: rgb(250, 250, 250);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.button2 {
|
|
|
display: inline-block;
|
|
|
transition: all 0.2s ease-in;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
z-index: 1;
|
|
|
color: #090909;
|
|
|
padding: 0.7em 1.7em;
|
|
|
cursor: pointer;
|
|
|
font-size: 12px;
|
|
|
border-radius: 0.5em;
|
|
|
background: #e8e8e8;
|
|
|
border: 1px solid #e8e8e8;
|
|
|
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
|
|
}
|
|
|
|
|
|
.button2:active {
|
|
|
color: #666;
|
|
|
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
|
|
}
|
|
|
|
|
|
.button2:before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
|
|
top: 100%;
|
|
|
width: 140%;
|
|
|
height: 180%;
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
border-radius: 50%;
|
|
|
display: block;
|
|
|
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
|
|
z-index: -1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.button2:after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
left: 55%;
|
|
|
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
|
|
top: 180%;
|
|
|
width: 160%;
|
|
|
height: 190%;
|
|
|
background-color: #009087;
|
|
|
border-radius: 50%;
|
|
|
display: block;
|
|
|
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
|
|
z-index: -1;
|
|
|
}
|
|
|
|
|
|
.button2:hover {
|
|
|
color: #ffffff;
|
|
|
border: 1px solid #009087;
|
|
|
}
|
|
|
|
|
|
.button2:hover:before {
|
|
|
top: -35%;
|
|
|
background-color: #009087;
|
|
|
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
|
|
}
|
|
|
|
|
|
.button2:hover:after {
|
|
|
top: -45%;
|
|
|
background-color: #009087;
|
|
|
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
|
|
}
|
|
|
|
|
|
.center-buttons {
|
|
|
display: flex;
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cookie-card {
|
|
|
max-width: 300px;
|
|
|
max-height: 400px;
|
|
|
padding: 1rem;
|
|
|
background-color: #eceaea;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-weight: 600;
|
|
|
font-size: 25px;
|
|
|
font-family: 'Arial', sans-serif;
|
|
|
color: rgb(31 41 55);
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
|
|
|
height: 500px; /* 设置为你需要的高度 */
|
|
|
|
|
|
overflow-y: auto; /* 当内容超出容器高度时，显示垂直滚动条 */
|
|
|
|
|
|
border: 1px solid #000; /* 可选：添加边框以便查看容器边界 */
|
|
|
|
|
|
position: relative; /* 确保sticky定位相对于此容器 */
|
|
|
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
width:800px;
|
|
|
height: 700px;
|
|
|
/* display: flex; */
|
|
|
border-radius: 10px;
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
|
background: rgb(212, 212, 212);
|
|
|
position: fixed;
|
|
|
z-index: 999;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
gap: 10px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
|
|
|
}
|
|
|
|
|
|
.cookcard {
|
|
|
width: 43%;
|
|
|
height: 90%;
|
|
|
padding: 1rem;
|
|
|
background-color: #eceaea;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
|
|
}
|
|
|
|
|
|
.group {
|
|
|
position: relative;
|
|
|
/* border: 1px solid black; */
|
|
|
}
|
|
|
|
|
|
.input {
|
|
|
font-size: 16px;
|
|
|
padding: 0px 0px 10px 5px;
|
|
|
display: block;
|
|
|
width: 185px;
|
|
|
border: none;
|
|
|
border-bottom: 1px solid #515151;
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
.input:focus {
|
|
|
outline: none;
|
|
|
}
|
|
|
|
|
|
label {
|
|
|
color: #330e0e;
|
|
|
font-size: 18px;
|
|
|
font-weight: normal;
|
|
|
position: absolute;
|
|
|
pointer-events: none;
|
|
|
left: 5px;
|
|
|
top: 10px;
|
|
|
transition: 0.2s ease all;
|
|
|
-moz-transition: 0.2s ease all;
|
|
|
-webkit-transition: 0.2s ease all;
|
|
|
}
|
|
|
|
|
|
.input:focus ~ label, .input:valid ~ label {
|
|
|
top: -20px;
|
|
|
font-size: 14px;
|
|
|
color: #5264AE;
|
|
|
}
|
|
|
|
|
|
.bar {
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
width: 195px;
|
|
|
}
|
|
|
|
|
|
.bar:before, .bar:after {
|
|
|
content: '';
|
|
|
height: 2px;
|
|
|
width: 0;
|
|
|
bottom: 1px;
|
|
|
position: absolute;
|
|
|
background: #5264AE;
|
|
|
transition: 0.2s ease all;
|
|
|
-moz-transition: 0.2s ease all;
|
|
|
-webkit-transition: 0.2s ease all;
|
|
|
}
|
|
|
|
|
|
.bar:before {
|
|
|
left: 50%;
|
|
|
}
|
|
|
|
|
|
.bar:after {
|
|
|
right: 50%;
|
|
|
}
|
|
|
|
|
|
.input:focus ~ .bar:before, .input:focus ~ .bar:after {
|
|
|
width: 50%;
|
|
|
}
|
|
|
|
|
|
.highlight {
|
|
|
position: absolute;
|
|
|
height: 60%;
|
|
|
width: 100px;
|
|
|
top: 25%;
|
|
|
left: 0;
|
|
|
pointer-events: none;
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
|
|
|
.input:focus ~ .highlight {
|
|
|
animation: inputHighlighter 0.3s ease;
|
|
|
}
|
|
|
|
|
|
@keyframes inputHighlighter {
|
|
|
from {
|
|
|
background: #5264AE;
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
width: 0;
|
|
|
background: transparent;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.findcard {
|
|
|
display: flex;
|
|
|
border-radius: 10px;
|
|
|
justify-content: left; /* 水平居中 */
|
|
|
align-items: center;
|
|
|
max-width: 100%;
|
|
|
max-height: 400px;
|
|
|
gap: 10px;
|
|
|
padding: 1rem;
|
|
|
background-color: #f4ffca;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
|
|
}
|
|
|
|
|
|
.addcard {
|
|
|
width:850px;
|
|
|
height: 800px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
border-radius: 10px;
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
align-items: center;
|
|
|
background: rgb(253, 246, 246);
|
|
|
position: fixed;
|
|
|
z-index: 888;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
gap: 10px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="cookie-card">
|
|
|
<span class="title">药品基本信息以及基本操作</span>
|
|
|
</div>
|
|
|
<h1></h1>
|
|
|
<div class="card" style="display: none;" id="XIUGAICAIDAN">
|
|
|
<h1>修改药品信息</h1>
|
|
|
<div style="width: 100%;height: 90%;display: flex;justify-content: center;
|
|
|
align-items: center;gap: 10px;">
|
|
|
<div class="cookcard">
|
|
|
<div style="display: flex;justify-content: center;">
|
|
|
<h1>原药品信息</h1>
|
|
|
</div>
|
|
|
|
|
|
<table>
|
|
|
<tr>
|
|
|
<th>属性</th>
|
|
|
<th>内容</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>序号</td>
|
|
|
<td id="YuanId">Id</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>药品类型</td>
|
|
|
<td id="YuanType">Type</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>药名</td>
|
|
|
<td id="YuanName">Name</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>价格</td>
|
|
|
<td id="YuanPrice">Price</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>库存</td>
|
|
|
<td id="YuanAmount">Amount</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="cookcard">
|
|
|
<div style="display: flex;justify-content: center;">
|
|
|
<h1>修改后药品信息</h1>
|
|
|
</div>
|
|
|
|
|
|
<table>
|
|
|
<tr>
|
|
|
<th>属性</th>
|
|
|
<th>内容</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>序号</td>
|
|
|
<td id="OldId">Id</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>药品类型</td>
|
|
|
<td id="OldType">Type</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>药名</td>
|
|
|
<td id="NewName">
|
|
|
<div class="group">
|
|
|
<input id="XIUGAINAME" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>修改后药名</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>价格</td>
|
|
|
<td id="NewPrice">
|
|
|
<div class="group">
|
|
|
<input id="XIUGAIPRICE" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>修改后价格</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>库存</td>
|
|
|
<td id="NewAmount">
|
|
|
<div class="group">
|
|
|
<input id="XIUGAIAMOUNT" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>修改后库存</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<h1></h1>
|
|
|
<div style="display: flex;justify-content: center;gap: 10px;">
|
|
|
<button class="button2" onclick="Truemodify()">确认修改</button>
|
|
|
<button class="button2" onclick="Dontxiu()">取消</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<h1></h1>
|
|
|
<div style="display: flex; gap: 20px;">
|
|
|
<button class="button2" onclick="uPdate()">刷新药品信息</button>
|
|
|
<button class="button2" onclick="aDd()">添加药品</button>
|
|
|
</div>
|
|
|
<h1></h1>
|
|
|
<div class="findcard">
|
|
|
<button class="button2" onclick="fInd()">查找药品</button>
|
|
|
<h1></h1>
|
|
|
<div class="group">
|
|
|
<input id="FINDID" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>查找序号</label>
|
|
|
</div>
|
|
|
<div class="group">
|
|
|
<input id="FINDTYPE" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>查找类型</label>
|
|
|
</div>
|
|
|
<div class="group">
|
|
|
<input id="FINDNAME" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>查找药名</label>
|
|
|
</div>
|
|
|
<div class="group">
|
|
|
<input id="FINDPRICE" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>查找价格</label>
|
|
|
</div>
|
|
|
<div class="group">
|
|
|
<input id="FINDAMOUNT" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>查找库存</label>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<h1></h1>
|
|
|
<div class="container">
|
|
|
<table id="Table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>序号</th>
|
|
|
<th>药品类型</th>
|
|
|
<th>药名</th>
|
|
|
<th>价格</th>
|
|
|
<th>库存</th>
|
|
|
<th>操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody id="MedicineTable">
|
|
|
<!-- <tr id="listId">
|
|
|
<td id="IDId">Id</td>
|
|
|
<td id="TypeId">type</td>
|
|
|
<td id="NameId">name</td>
|
|
|
<td id="PriceId">price</td>
|
|
|
<td id="AmountId">amount</td>
|
|
|
<td class="center-buttons" id="ID:Id"><button class="button2" onclick="mOdify(this)">修改</button><button class="button2" onclick="dElete(this)">删除</button></td>
|
|
|
</tr> -->
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<div class="addcard" style="display: none;" id="ADDCAIDAN">
|
|
|
<h1>添加药品信息</h1>
|
|
|
<div>
|
|
|
<table>
|
|
|
<tr>
|
|
|
<th style="padding: 20px;">属性</th>
|
|
|
<th style="padding: 20px;">内容</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 20px;">序号</td>
|
|
|
<td style="padding: 20px;" id="AddId">
|
|
|
<div class="group">
|
|
|
<input id="ADDID" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>添加药品序号</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 20px;">药品类型</td>
|
|
|
<td style="padding: 20px;" id="AddType">
|
|
|
<div class="group">
|
|
|
<input id="ADDTYPE" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>添加药品类型</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 20px;">药名</td>
|
|
|
<td style="padding: 20px;" id="AddName">
|
|
|
<div class="group">
|
|
|
<input id="ADDNAME" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>添加药品名称</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 20px;">价格</td>
|
|
|
<td style="padding: 20px;" id="AddPrice">
|
|
|
<div class="group">
|
|
|
<input id="ADDPRICE" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>添加药品价格</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 20px;">进价</td>
|
|
|
<td style="padding: 20px;" id="AddPurprice">
|
|
|
<div class="group">
|
|
|
<input id="ADDPURPRICE" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>添加药品进价</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 20px;">库存</td>
|
|
|
<td style="padding: 20px;" id="AddAmount">
|
|
|
<div class="group">
|
|
|
<input id="ADDAMOUNT" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>添加药品库存</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 20px;">药品公司</td>
|
|
|
<td style="padding: 20px;" id="AddCompany">
|
|
|
<div class="group">
|
|
|
<input id="ADDCOMPANY" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>添加药品公司</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding: 20px;">药品公司联系电话</td>
|
|
|
<td style="padding: 20px;" id="AddPhonenumber">
|
|
|
<div class="group">
|
|
|
<input id="ADDPHONENUMBER" required="" type="text" class="input">
|
|
|
<span class="highlight"></span>
|
|
|
<span class="bar"></span>
|
|
|
<label>添加药品公司联系电话</label>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div style="display: flex;justify-content: center;gap: 20px;">
|
|
|
<button class="button2" onclick="Trueadd()">确认添加</button>
|
|
|
<button class="button2" onclick="Dontadd()">取消</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
<script>
|
|
|
|
|
|
var cuizaied='';
|
|
|
uPdate();
|
|
|
|
|
|
function uPdate(){
|
|
|
const requestBody = {wenti:1,name:"陈永杭"};
|
|
|
fetch('http://localhost:3000', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json' // 设置请求头为JSON
|
|
|
},
|
|
|
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
|
|
})
|
|
|
.then(response =>
|
|
|
response.json())
|
|
|
.then(data => {
|
|
|
cuizaied = data;
|
|
|
console.log('刷新');
|
|
|
console.log(data);
|
|
|
var targetDiv = document.getElementById('MedicineTable');
|
|
|
targetDiv.innerHTML = '';
|
|
|
for (i =0 ;i<data.length;i++){
|
|
|
var htmlString =
|
|
|
`<tr id="listId">
|
|
|
<td id="IDId">Id</td>
|
|
|
<td id="TypeId">type</td>
|
|
|
<td id="NameId">name</td>
|
|
|
<td id="PriceId">price</td>
|
|
|
<td id="AmountId">amount</td>
|
|
|
<td class="center-buttons" id="ID:Id"><button class="button2" onclick="mOdify(this)">修改</button><button class="button2" onclick="dElete(this)">删除</button></td>
|
|
|
</tr>`;
|
|
|
var newhtmlstring0=htmlString;
|
|
|
var newhtmlstring1=newhtmlstring0.replace(/Id/g,String(data[i].id));
|
|
|
var newhtmlstring2=newhtmlstring1.replace("type",String(data[i].type));
|
|
|
var newhtmlstring3=newhtmlstring2.replace("name",String(data[i].name));
|
|
|
var newhtmlstring4=newhtmlstring3.replace("price",String(data[i].price));
|
|
|
var newhtmlstring5=newhtmlstring4.replace("amount",String(data[i].amount));
|
|
|
|
|
|
|
|
|
targetDiv.innerHTML += newhtmlstring5;
|
|
|
}
|
|
|
}) // 打印服务器返回的数据
|
|
|
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
|
|
|
|
|
}
|
|
|
|
|
|
function mOdify(button){
|
|
|
var ParentNode = button.parentNode.parentNode;
|
|
|
document.getElementById('XIUGAICAIDAN').style.display = 'block';
|
|
|
|
|
|
var id2=parseInt(String(ParentNode.id).substring(4));
|
|
|
var type2='';
|
|
|
var name21 = '';
|
|
|
var price21 = '';
|
|
|
var amount21 = '';
|
|
|
type2 = document.getElementById("Type"+String(id2)).textContent;
|
|
|
name21 = document.getElementById("Name"+String(id2)).textContent;
|
|
|
price21 = document.getElementById("Price"+String(id2)).textContent;
|
|
|
amount21 = document.getElementById("Amount"+String(id2)).textContent;
|
|
|
//console.log(id2,type2,name21,price21,amount21);
|
|
|
|
|
|
// document.getElementById('XIUGAICAIDAN').style.display = 'flex';
|
|
|
document.getElementById('OldId').textContent=String(id2);
|
|
|
document.getElementById('YuanId').textContent=String(id2);
|
|
|
document.getElementById('OldType').textContent=String(type2);
|
|
|
document.getElementById('YuanType').textContent=String(type2);
|
|
|
document.getElementById('YuanName').textContent=String(name21);
|
|
|
document.getElementById('YuanPrice').textContent=String(price21);
|
|
|
document.getElementById('YuanAmount').textContent=String(amount21);
|
|
|
|
|
|
document.getElementById('XIUGAINAME').value='';
|
|
|
document.getElementById('XIUGAIPRICE').value='';
|
|
|
document.getElementById('XIUGAIAMOUNT').value='';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function Truemodify(){
|
|
|
var id2=parseInt(document.getElementById('OldId').textContent);
|
|
|
var type2=document.getElementById('OldType').textContent;
|
|
|
var name21 = document.getElementById("Name"+String(id2)).textContent;
|
|
|
var price21 = document.getElementById("Price"+String(id2)).textContent;
|
|
|
var amount21 = document.getElementById("Amount"+String(id2)).textContent;
|
|
|
console.log(id2,type2,name21,price21,amount21);
|
|
|
|
|
|
var name2=document.getElementById('XIUGAINAME').value.trim();
|
|
|
var price2=document.getElementById('XIUGAIPRICE').value.trim();
|
|
|
var amount2=document.getElementById('XIUGAIAMOUNT').value.trim();
|
|
|
if (amount2==''){
|
|
|
amount2=null;
|
|
|
}
|
|
|
if (name2==''){
|
|
|
name2=null;
|
|
|
}
|
|
|
if (price2 ==''){
|
|
|
price2=null;
|
|
|
}
|
|
|
console.log(id2,name2,price2,amount2,type2);
|
|
|
|
|
|
if (amount2==null && price2==null &&name2==null){
|
|
|
alert("请输入要更改的药品信息！！！");
|
|
|
}
|
|
|
else{
|
|
|
const requestBody = {"wenti":3,"id":parseInt(id2),"type":type2,"name":name2,"price":parseFloat(price2),"amount":parseInt(amount2),"nameed":name21,"priceed":price21,"amounted":amount21};
|
|
|
console.log(JSON.stringify(requestBody));
|
|
|
|
|
|
fetch('http://localhost:3000', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json' // 设置请求头为JSON
|
|
|
},
|
|
|
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
|
|
})
|
|
|
.then(response =>
|
|
|
response.json())
|
|
|
.then(data => {
|
|
|
cuizaied = data;
|
|
|
|
|
|
console.log(data);
|
|
|
var i=0;
|
|
|
for (i=0;i<data.length;i++){
|
|
|
if (parseInt(data[i].id)==parseInt(id2)){
|
|
|
|
|
|
if (name2 != null && String(data[i].name)==name2){
|
|
|
console.log('name2:'+String(name2),'name:'+String(data[i].name));
|
|
|
document.getElementById('Name'+String(id2)).textContent = String(name2);
|
|
|
}
|
|
|
if (price2 != null && parseFloat(data[i].price)==parseFloat(price2)){
|
|
|
console.log('price2:'+String(price2),'price:'+String(data[i].price));
|
|
|
document.getElementById('Price'+String(id2)).textContent = String(price2);
|
|
|
}
|
|
|
if (amount2 !=null && parseInt(data[i].amount)==parseInt(amount2)){
|
|
|
console.log('amount2:'+String(amount2),'amount:'+String(data[i].amount));
|
|
|
document.getElementById('Amount'+String(id2)).textContent = String(amount2);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
document.getElementById('XIUGAICAIDAN').style.display = 'none';
|
|
|
|
|
|
|
|
|
}) // 打印服务器返回的数据
|
|
|
|
|
|
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function Dontxiu(){
|
|
|
document.getElementById('XIUGAICAIDAN').style.display = 'none';
|
|
|
}
|
|
|
|
|
|
function dElete(button){
|
|
|
var ParentNode = button.parentNode.parentNode;
|
|
|
console.log('父节点的标签名:', ParentNode.tagName);
|
|
|
console.log('父节点的id:', ParentNode.id || '无id'); // 注意：className获取的是类名的字符串，多个类名用空格分隔
|
|
|
console.log('父节点的内部HTML:', ParentNode.innerHTML);
|
|
|
var id3=parseInt(String(ParentNode.id).substring(4));
|
|
|
var name3 = document.getElementById("Name"+String(id3)).textContent;
|
|
|
var type3 = document.getElementById("Type"+String(id3)).textContent;
|
|
|
var price3 = document.getElementById("Price"+String(id3)).textContent;
|
|
|
console.log(id3,type3,name3,price3);
|
|
|
const requestBody = {"wenti":4,"id":parseInt(id3),"type":String(type3),"name":name3,"price":parseFloat(price3)};
|
|
|
|
|
|
console.log(requestBody);
|
|
|
var delddid3=document.getElementById('list'+String(id3));
|
|
|
|
|
|
fetch('http://localhost:3000', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json' // 设置请求头为JSON
|
|
|
},
|
|
|
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
|
|
})
|
|
|
.then(response =>
|
|
|
response.json())
|
|
|
.then(data => {
|
|
|
cuizaied = data;
|
|
|
var i=0;
|
|
|
var xiugai3=1;
|
|
|
for (i=0;i<data.length;i++){
|
|
|
if (parseInt(data[i].id)==id3)
|
|
|
{
|
|
|
xiugai3=0;
|
|
|
alert('药品未删除成功');
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
if(xiugai3=1){
|
|
|
delddid3.remove();
|
|
|
}
|
|
|
|
|
|
|
|
|
}) // 打印服务器返回的数据
|
|
|
|
|
|
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
|
|
}
|
|
|
|
|
|
function fInd(){
|
|
|
var id1 = document.getElementById("FINDID").value.trim();
|
|
|
var type1 = document.getElementById("FINDTYPE").value.trim();
|
|
|
var name1 = document.getElementById("FINDNAME").value.trim();
|
|
|
var price1 = document.getElementById("FINDPRICE").value.trim();
|
|
|
var amount1 = document.getElementById("FINDAMOUNT").value.trim();
|
|
|
|
|
|
if (type1==''){
|
|
|
type1=null;
|
|
|
}
|
|
|
if (name1==''){
|
|
|
name1=null;
|
|
|
}
|
|
|
if (amount1==''){
|
|
|
amount1=null;
|
|
|
}
|
|
|
if (id1==''){
|
|
|
id1=null;
|
|
|
}
|
|
|
if (price1==''){
|
|
|
price1=null;
|
|
|
}
|
|
|
if(id1==null && type1==null && name1==null && price1==null && amount1==null){
|
|
|
alert('请输入要查找的药品信息！！！')
|
|
|
}
|
|
|
else{
|
|
|
console.log(id1,type1,name1,price1,amount1);
|
|
|
const requestBody = {"wenti":2,"id":parseInt(id1),"type":type1,"name":name1,"price":parseFloat(price1),"amount":parseInt(amount1)};
|
|
|
console.log(JSON.stringify(requestBody));
|
|
|
|
|
|
fetch('http://localhost:3000', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json' // 设置请求头为JSON
|
|
|
},
|
|
|
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
|
|
})
|
|
|
.then(response =>
|
|
|
response.json())
|
|
|
.then(data => {
|
|
|
console.log('查找');
|
|
|
console.log(data);
|
|
|
var targetDiv = document.getElementById('MedicineTable');
|
|
|
targetDiv.innerHTML = '';
|
|
|
for (i =0 ;i<data.length;i++){
|
|
|
var htmlString =
|
|
|
`<tr id="listId">
|
|
|
<td id="IDId">Id</td>
|
|
|
<td id="TypeId">type</td>
|
|
|
<td id="NameId">name</td>
|
|
|
<td id="PriceId">price</td>
|
|
|
<td id="AmountId">amount</td>
|
|
|
<td class="center-buttons" id="ID:Id"><button class="button2" onclick="mOdify(this)">修改</button><button class="button2" onclick="dElete(this)">删除</button></td>
|
|
|
</tr>`;
|
|
|
var newhtmlstring0=htmlString;
|
|
|
var newhtmlstring1=newhtmlstring0.replace(/Id/g,String(data[i].id));
|
|
|
var newhtmlstring2=newhtmlstring1.replace("type",String(data[i].type));
|
|
|
var newhtmlstring3=newhtmlstring2.replace("name",String(data[i].name));
|
|
|
var newhtmlstring4=newhtmlstring3.replace("price",String(data[i].price));
|
|
|
var newhtmlstring5=newhtmlstring4.replace("amount",String(data[i].amount));
|
|
|
|
|
|
|
|
|
targetDiv.innerHTML += newhtmlstring5;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
}) // 打印服务器返回的数据
|
|
|
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function aDd(){
|
|
|
console.log('添加药品菜单');
|
|
|
uPdate();
|
|
|
document.getElementById('ADDCAIDAN').style.display = 'flex';
|
|
|
document.getElementById('ADDID').value='';
|
|
|
document.getElementById('ADDTYPE').value='';
|
|
|
document.getElementById('ADDNAME').value='';
|
|
|
document.getElementById('ADDPRICE').value='';
|
|
|
document.getElementById('ADDPURPRICE').value='';
|
|
|
document.getElementById('ADDAMOUNT').value='';
|
|
|
document.getElementById('ADDCOMPANY').value='';
|
|
|
document.getElementById('ADDPHONENUMBER').value='';
|
|
|
|
|
|
}
|
|
|
|
|
|
function Trueadd(){
|
|
|
console.log('确定添加药品');
|
|
|
|
|
|
document.getElementById('ADDCAIDAN').style.display = 'flex';
|
|
|
var id4 = document.getElementById('ADDID').value.trim();
|
|
|
var type4 = document.getElementById('ADDTYPE').value.trim();
|
|
|
var name4 = document.getElementById('ADDNAME').value.trim();
|
|
|
var price4 = document.getElementById('ADDPRICE').value.trim();
|
|
|
var purprice4 = document.getElementById('ADDPURPRICE').value.trim();
|
|
|
var amount4 = document.getElementById('ADDAMOUNT').value.trim();
|
|
|
var company4 = document.getElementById('ADDCOMPANY').value.trim();
|
|
|
var phonenumber4 = document.getElementById('ADDPHONENUMBER').value.trim();
|
|
|
|
|
|
if (id4 == ''){
|
|
|
id4 = null;
|
|
|
}
|
|
|
if (type4 == ''){
|
|
|
type4 = null;
|
|
|
}
|
|
|
if (name4 == ''){
|
|
|
name4 = null;
|
|
|
}
|
|
|
if (price4 == ''){
|
|
|
price4 = null;
|
|
|
}
|
|
|
if (purprice4 == ''){
|
|
|
purprice4 = null;
|
|
|
}
|
|
|
if (amount4 == ''){
|
|
|
amount4 = null;
|
|
|
}
|
|
|
if (company4 == ''){
|
|
|
company4 = null;
|
|
|
}
|
|
|
if (phonenumber4 == ''){
|
|
|
phonenumber4 = null;
|
|
|
}
|
|
|
|
|
|
var idexited = ' ';
|
|
|
for (i=0;i<cuizaied.length;i++){
|
|
|
idexited += String(cuizaied[i].id);
|
|
|
idexited += ' ';
|
|
|
}
|
|
|
for (i=0;i<cuizaied.length;i++){
|
|
|
if (cuizaied[i].id == id4){
|
|
|
alert('序号已存在！！！'+'\n'+'已存在的序号：'+idexited);
|
|
|
document.getElementById('ADDID').value = null;
|
|
|
id4 = null;
|
|
|
}
|
|
|
if (cuizaied[i].name==String(name4) && cuizaied[i].type==String(type4) && cuizaied[i].price==parseFloat(price4)){
|
|
|
alert('药品已存在！！！');
|
|
|
document.getElementById('ADDID').value='';
|
|
|
document.getElementById('ADDTYPE').value='';
|
|
|
document.getElementById('ADDNAME').value='';
|
|
|
document.getElementById('ADDPRICE').value='';
|
|
|
document.getElementById('ADDPURPRICE').value='';
|
|
|
document.getElementById('ADDAMOUNT').value='';
|
|
|
document.getElementById('ADDCOMPANY').value='';
|
|
|
document.getElementById('ADDPHONENUMBER').value='';
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
console.log({"wenti":5,"id":parseInt(id4),"type":type4,"name":name4,"price":parseFloat(price4),"purprice":parseFloat(purprice4),"amount":parseInt(amount4),"company":company4,"phonenumber":phonenumber4});
|
|
|
|
|
|
if (id4 == null || type4 == null || name4 == null || price4 == null || purprice4 == null || amount4 == null || company4 == null || phonenumber4 == null){
|
|
|
alert('没有输入完整的药品信息！！！' + '\n' + '请输入完整的药品信息。');
|
|
|
}
|
|
|
else{
|
|
|
|
|
|
const requestBody = {"wenti":5,"id":parseInt(id4),"type":type4,"name":name4,"price":parseFloat(price4),"purprice":parseFloat(purprice4),"amount":parseInt(amount4),"company":company4,"phonenumber":phonenumber4};
|
|
|
console.log(JSON.stringify(requestBody));
|
|
|
|
|
|
fetch('http://localhost:3000', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json' // 设置请求头为JSON
|
|
|
},
|
|
|
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
|
|
})
|
|
|
.then(response =>
|
|
|
response.json())
|
|
|
.then(data => {
|
|
|
cuizaied = data;
|
|
|
console.log('已新增文件');
|
|
|
console.log(data);
|
|
|
var targetDiv = document.getElementById('MedicineTable');
|
|
|
targetDiv.innerHTML = '';
|
|
|
for (i =0 ;i<data.length;i++){
|
|
|
var htmlString =
|
|
|
`<tr id="listId">
|
|
|
<td id="IDId">Id</td>
|
|
|
<td id="TypeId">type</td>
|
|
|
<td id="NameId">name</td>
|
|
|
<td id="PriceId">price</td>
|
|
|
<td id="AmountId">amount</td>
|
|
|
<td class="center-buttons" id="ID:Id"><button class="button2" onclick="mOdify(this)">修改</button><button class="button2" onclick="dElete(this)">删除</button></td>
|
|
|
</tr>`;
|
|
|
var newhtmlstring0=htmlString;
|
|
|
var newhtmlstring1=newhtmlstring0.replace(/Id/g,String(data[i].id));
|
|
|
var newhtmlstring2=newhtmlstring1.replace("type",String(data[i].type));
|
|
|
var newhtmlstring3=newhtmlstring2.replace("name",String(data[i].name));
|
|
|
var newhtmlstring4=newhtmlstring3.replace("price",String(data[i].price));
|
|
|
var newhtmlstring5=newhtmlstring4.replace("amount",String(data[i].amount));
|
|
|
|
|
|
|
|
|
targetDiv.innerHTML += newhtmlstring5;
|
|
|
}
|
|
|
}) // 打印服务器返回的数据
|
|
|
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
|
|
|
|
|
document.getElementById('ADDCAIDAN').style.display = 'none';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function Dontadd(){
|
|
|
console.log('取消添加药品');
|
|
|
document.getElementById('ADDCAIDAN').style.display = 'none';
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
</html> |
