当前位置：首页 > news >正文

仓库物品带下拉提示搜索与开单自定义数量和备注带提交反馈单页功能

news 2024/11/1 16:32:15

搜索：带下拉提示可关闭超数量可下滑；输入停顿后查询以减少请求

表单，自定义数量和备注，自动计价...

<?php
/*
以下为csv文件:Yao.table.jijia.csv 示范数据:
code,中文名,英文名,单价,计价单位,备注
X001,阿司匹林,Aspirin,0.5,片,用于缓解轻中度疼痛
X002,布洛芬,Ibuprofen,0.7,片,缓解炎症和疼痛
X003,氯雷他定,Loratadine,1.0,片,缓解过敏症状
X004,阿司匹林4,Aspirin,0.5,片,用于缓解轻中度疼痛
X005,布洛芬5,Ibuprofen,0.7,片,缓解炎症和疼痛
X006,氯雷他定6,Loratadine,1.0,片,缓解过敏症状
X007,阿司匹林7,Aspirin,0.5,片,用于缓解轻中度疼痛
*/if($_GET["act"]=="cha"){
setlocale(LC_ALL, 'C'); //window:删除行首双斜杠
header('Content-Type: application/json; charset=UTF-8');
$query = $_GET['query'] ?? '';
// 读取 CSV 文件并进行药名查询
$data = [];
if (($handle = fopen('Yao.table.jijia.csv', 'r')) !== FALSE) {while (($row = fgetcsv($handle, 1000, ',')) !== FALSE) {if (strpos($row[1], $query) !== FALSE) {$data[] = ['code' => $row[0],'中文名' => $row[1],'英文名' => $row[2],'单价' => $row[3],'单位' => $row[4],'备注' => $row[5]];}}fclose($handle);
}
echo json_encode(array_slice($data, 0, 10)); // 最多返回10条exit();
}
if($_GET["act"]=="ti"){
header('Content-Type: application/json; charset=UTF-8');
$data = json_decode(file_get_contents('php://input'), true);
echo json_encode($data); exit();
}?>
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>药单开具页面</title><style>body {font-family: Arial, sans-serif;padding: 10px;background-color: #f4f4f9;}#top-bar {display: flex;gap: 5px;margin-bottom: 10px;position: relative;}input {width: 99%;line-height: 28px;}#medicine-list {position: absolute;top: 28px;width: 280px;background-color: white;border: 1px solid #ddd;max-height: 280px;overflow-y: auto;display: none;z-index: 1;}#medicine-list div {padding: 5px;cursor: pointer;position: relative;}#medicine-list div:hover {background-color: #f0f0f0;}#medicine-list .close-btn {position: absolute;right: 5px;color: red;cursor: pointer;font-weight: bold;z-index: 3;}table {width: 100%;border-collapse: collapse;margin: 20px 0;}table, th, td {border: 1px solid #ddd;padding: 2px;}th {background-color: #f4f4f4;text-align: left;}.text-right {text-align: right;}.text-center {text-align: center;}.text-gray {color: #888;}.bta {margin-top: 0px;padding: 8px 12px;background-color: #198754;color: white;border: none;cursor: pointer;min-width: 80px;border-radius: 5px;}.btn {margin: 0;padding: 8px 12px;background-color: red;color: white;border: none;cursor: pointer;border-radius: 5px;}.hidden {display: none;}</style>
</head>
<body>
<div id="top-bar"><input type="text" id="medicine-input" placeholder="输入药名"><button onclick="addMedicine()" class='bta'>添加</button><button onclick="window.location.reload()" class='bta'>新开</button><div id="medicine-list"></div>
</div><table id="medicine-table"><thead><tr><th>药品代码</th><th>药名</th><th>数量</th><th>单价</th><th>金额</th><th>用药备注</th><th>操作</th></tr></thead><tbody id="medicine-body"><!-- 动态生成的药品行 --></tbody><tfoot><tr><td colspan="4" class="text-right">总价：</td><td id="total-price" class="text-center">0.00</td><td colspan="2"></td></tr></tfoot>
</table><button id="submit-btn" class="bta" onclick="submitMedicineForm()">提交</button><script>let medicines = []; // 存储获取到的药品列表let selectedMedicines = {}; // 选择的药品信息let searchTimeout;// 延迟查询药名列表document.getElementById('medicine-input').addEventListener('input', function () {clearTimeout(searchTimeout);searchTimeout = setTimeout(fetchMedicineList, 500);});// 获取药名列表function fetchMedicineList() {const query = document.getElementById('medicine-input').value;if (query.length < 1) {document.getElementById('medicine-list').style.display = 'none';return;}fetch('?act=cha&query=' + encodeURIComponent(query)).then(response => response.json()).then(data => {medicines = data;showMedicineList();});}// 显示药名提示列表function showMedicineList() {const listContainer = document.getElementById('medicine-list');listContainer.innerHTML = `<div class="close-btn" onclick="closeMedicineList()">×</div>`;medicines.forEach(med => {const item = document.createElement('div');item.innerText = med.中文名;item.onclick = () => {document.getElementById('medicine-input').value = med.中文名;listContainer.style.display = 'none';};listContainer.appendChild(item);});listContainer.style.display = 'block';}// 关闭药名提示列表function closeMedicineList() {document.getElementById('medicine-list').style.display = 'none';}// 添加药品到计价表function addMedicine() {const name = document.getElementById('medicine-input').value;const medicine = medicines.find(m => m.中文名 === name);if (!medicine || selectedMedicines[medicine.code]) return; // 防止重复添加selectedMedicines[medicine.code] = medicine;const row = document.createElement('tr');row.id = `row-${medicine.code}`;row.innerHTML = `<td>${medicine.code}</td><td>${medicine.中文名}</td><td><input type="number" value="1" min="1" onchange="updateAmount('${medicine.code}', this.value)"></td><td class="text-right">${medicine.单价}</td><td id="amount-${medicine.code}" class="text-right">${medicine.单价}</td><td><input type="text" value="${medicine.备注}" onchange="updateRemark('${medicine.code}', this.value)"></td><td class="text-center"><button onclick="removeMedicine('${medicine.code}')" class='btn'>删</button></td>`;document.getElementById('medicine-body').appendChild(row);updateTotalPrice();}// 更新单个药品的金额function updateAmount(code, quantity) {const medicine = selectedMedicines[code];const amount = parseFloat(medicine.单价) * parseInt(quantity);document.getElementById(`amount-${code}`).innerText = amount.toFixed(2);updateTotalPrice();}// 更新单个药品备注function updateRemark(code, remark) {selectedMedicines[code].备注 = remark;}// 删除药品并更新总价function removeMedicine(code) {delete selectedMedicines[code];document.getElementById(`row-${code}`).remove();updateTotalPrice();}// 更新总价function updateTotalPrice() {let total = 0;for (const code in selectedMedicines) {const rowAmount = document.getElementById(`amount-${code}`);total += parseFloat(rowAmount.innerText);}document.getElementById('total-price').innerText = total.toFixed(2);}// 提交药单function submitMedicineForm() {const formData = [];for (const code in selectedMedicines) {const quantity = document.querySelector(`input[type="number"][onchange="updateAmount('${code}', this.value)"]`).value;formData.push({code,name: selectedMedicines[code].中文名,quantity,price: selectedMedicines[code].单价,amount: (quantity * selectedMedicines[code].单价).toFixed(2),remark: selectedMedicines[code].备注});}fetch('?act=ti&tt=tt', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(formData)}).then(response => response.json()).then(data => {//alert('提交成功！');document.getElementById('medicine-table').innerHTML = generateFinalTable(data);document.getElementById('submit-btn').style.display = 'none';});}// 显示提交后无输入表单及总价function generateFinalTable(data) {let total = 0;let table = `<thead><tr><th>药品代码</th><th>药名</th><th>数量</th><th>单价</th><th>金额</th><th>用药备注</th></tr></thead><tbody>`;data.forEach(item => {total += parseFloat(item.amount);table += `<tr><td>${item.code}</td><td>${item.name}</td><td>${item.quantity}</td><td class="text-right">${item.price}</td><td class="text-right">${item.amount}</td><td>${item.remark}</td></tr>`;});table += `<tfoot><tr><td colspan="4" class="text-right">总价：</td><td class="text-center">${total.toFixed(2)}</td><td></td></tr></tfoot>`;table += `</tbody>`;return table;}
</script></body>
</html>

查看全文

http://www.mrgr.cn/news/63341.html