<!DOCTYPE
html>
<
html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入库模块</title>
<link rel="stylesheet" href="../static/bootstrap-4.6.0-dist/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
font-family: Arial, sans-serif;
}
.container {
max-width: 1000px;
min-height: 600px;
/* 可根据需求调整这个值来改变整体框的最小
高度 */
}
.header {
margin: 20px 0;
color: #343a40;
font-weight: bold;
}
.form-group {
margin-bottom: 1.5rem;
/* 增加表单组之间的间距 */
}
.list-group-item {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
width: 100%;
padding: 5px 10px;
border: 1px solid #dee2e6;
border-radius: 5px;
box-sizing: border-box;
}
.list-group-item
span {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card {
border: none;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 20px;
background-color: #ffffff;
}
.btn-primary {
background-color: #007bff;
border: none;
width: 200px;
/* 设置按钮
宽度为 50 像素 */
}
.btn-primary:hover {
background-color: #0056b3;
}
footer {
margin-top: 20px;
padding: 10px 0;
background-color: #343a40;
color: white;
border-radius: 0 0 15px 15px;
}
/* 为查询按钮添加左外边距 */
.btn-query {
margin-left: 100px;
}
/* 新增的按钮容器样式 */
.button-container {
text-align: center;
}
/* 新增的样式，设置入库编号文本框的尺寸 */
.small-input {
width: 150px; /* 你可以根据需要调整
宽度 */
}
/* 新增样式，使入库编号输入框在同一行显示 */
.id-inputs {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.id-inputs label {
margin-right: 5px;
}
.id-row {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center header">金铜线入库模块</h1>
<div class="card mb-4">
<form method="POST">
<div class="form-group">
<label for="item">整半卷类型</label>
<select class="form-control" id="category" name="category" required>
<option value="" disabled selected>请选择入库类型</option>
<option value="整卷">整卷</option>
<option value="半卷">半卷</option>
{% if category %}
<option value="{{ category }}" selected>{{ category }}</option>
{% endif %}
</select>
</div>
<div class="form-group">
<label for="item">入库型号</label>
<select class="form-control" id="type" name="item" required>
<option value="" disabled selected>请选择物品编号</option>
<option value="70694">70694 - AU</option>
<option value="70704">70704 - AU</option>
<option value="70774">70774 - AU</option>
<option value="70794">70794 - CU</option>
<option value="70804">70708 - CU</option>
<option value="70784">7058779 - CU</option>
</select>
</div>
<div class="form-group">
<label for="batchNumber">入库批号</label>
<input type="text" class="form-control" id="batchNumber" name="batchNumber" required>
</div>
<div class="form-group id-inputs">
<div class="id-row">
<div class="form-group">
<label for="ID1">编号#1</label>
<input type="text" class="form-control small-input" id="ID1" name="ID1">
</div>
<div class="form-group">
<label for="ID2">编号#2</label>
<input type="text" class="form-control small-input" id="ID2" name="ID2">
</div>
<div class="form-group">
<label for="ID3">编号#3</label>
<input type="text" class="form-control small-input" id="ID3" name="ID3">
</div>
<div class="form-group">
<label for="ID4">编号#4</label>
<input type="text" class="form-control small-input" id="ID4" name="ID4">
</div>
<div class="form-group">
<label for="ID5">编号#5</label>
<input type="text" class="form-control small-input" id="ID5" name="ID5">
</div>
<div class="form-group">
<label for="ID6">编号#6</label>
<input type="text" class="form-control small-input" id="ID6" name="ID6">
</div>
</div>
<div class="id-row">
<div class="form-group">
<label for="ID7">编号#7</label>
<input type="text" class="form-control small-input" id="ID7" name="ID7">
</div>
<div class="form-group">
<label for="ID8">编号#8</label>
<input type="text" class="form-control small-input" id="ID8" name="ID8">
</div>
<div class="form-group">
<label for="ID9">编号#9</label>
<input type="text" class="form-control small-input" id="ID9" name="ID9">
</div>
<div class="form-group">
<label for="ID10">编号#10</label>
<input type="text" class="form-control small-input" id="ID10" name="ID10">
</div>
<div class="form-group">
<label for="ID11">编号#11</label>
<input type="text" class="form-control small-input" id="ID11" name="ID11">
</div>
<div class="form-group">
<label for="ID12">编号#12</label>
<input type="text" class="form-control small-input" id="ID12" name="ID12">
</div>
</div>
</div>
<div class="form-group">
<label for="quantity">入库数量</label>
<input type="number" class="form-control" id="quantity" name="quantity" value="1" required>
</div>
<div class="form-group">
<label for="date">入库日期</label>
<input type="datetime-local" class="form-control" id="date" name="date" required value="{{ date }}">
</div>
<div class="form-group">
<label for="shift">入库班次</label>
<select class="form-control" id="shift" name="shift" required>
<option value="" disabled selected>请选择班次</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
{% if shift %}
<option value="{{ shift }}" selected>{{ shift }}</option>
{% endif %}
</select>
</div>
<div class="form-group">
<label for="barge">员工工号</label>
<input type="text" class="form-control small-input" id="barge" name="barge" required value="{{ username }}">
</div>
<!-- 使用新增的容器包裹按钮 -->
<div class="button-container">
<button type="submit" class="btn btn-primary">入库</button>
<div></div>
<button type="button" class="btn btn-primary btn-query" id="queryButton">查询</button>
</div>
</form>
</div>
<h2 class="mt-4" align="center">当前库存</h2>
<ul class="list-group" id="inventoryList">
<li class="list-group-item">
<
span style="font-weight: bold;">入库类型</
span>
<
span style="font-weight: bold;">在库型号</
span>
<
span style="font-weight: bold;">在库数量</
span>
</li>
{% for data in inventory_data %}
<li class="list-group-item">
<
span>{{ data.category }}</
span>
<
span>{{ data.item }}</
span>
<
span>{{ data.quantity }}</
span>
</li>
{% endfor %}
</ul>
<a href="/" class="btn btn-link">返回首页</a>
</div>
<footer>
<div class="text-center">
<p>本系统用于管理金铜线的入库、出库
和库存报告</p>
<p>任何问题,请联系YanNiZong(cell:13910052243)</p>
</div>
</footer>
<script>
function submitForm(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单数据
const data = {
category: document.getElementById('category').value,
type: document.getElementById('type').value,
batchNumber: document.getElementById('batchNumber').value,
ID1: document.getElementById('ID1').value,
ID2: document.getElementById('ID2').value,
ID3: document.getElementById('ID3').value,
ID4: document.getElementById('ID4').value,
ID5: document.getElementById('ID5').value,
ID6: document.getElementById('ID6').value,
ID7: document.getElementById('ID7').value,
ID8: document.getElementById('ID8').value,
ID9: document.getElementById('ID9').value,
ID10: document.getElementById('ID10').value,
ID11: document.getElementById('ID11').value,
ID12: document.getElementById('ID12').value,
quantity: document.getElementById('quantity').value,
date: document.getElementById('date').value,
shift: document.getElementById('shift').value,
barge: document.getElementById('barge').value
};
console.log(data)
fetch('/into_storage', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
alert(result.message); // 简单提示结果
if (result.status === 'success') {
// 重置表单（可选）
document.getElementById('batchNumber').value = '';
for(let i=1; i<=12; i++) {
document.getElementById(`ID${i}`).value = '';
}
}
})
.catch(error => alert('网络错误: ' + error));
}
// 绑定表单提交事件
document.querySelector('form').addEventListener('submit', submitForm);
</script>
</body>
</
html> 这里的javascript有什么问题吗，可以通过id绑定按钮事件吗，或者哪一种交互、方式会更好
本文介绍如何通过CSS将HTML中的span元素从行内元素转换为行内块体元素以实现对其宽度和高度的设置。提供了具体的HTML代码示例及CSS样式。
扫一扫
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
