科技资讯

Document

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

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

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

 

<?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>