原本程序的部分打算到上一篇就结束了，
不过有小夥伴问到如何在更改状态的同时<span>中的数字也跟着改变。
所以我们这篇来说如何动态更改<span>中的数字。
首先，我们先来整理有哪些时候会产生(更改)未完成餐点的数字

1. 建立订单的时候 undo_order()
2. 修改餐点状态的时候 $('#undo_list').on("change", 'input[name="item_checkbox"]')

动态修改未完成餐点数量

1. 打开 Proprietor.cshtml
2. 给<span>一个id

<span class="badge bg-danger rounded-pill text-white " id="${uid}_span">${count}</span>

这样方便之後搜寻使用
3. undo_order()中加入以下程序码

//取得未完成数量
var undo_count = bodys.filter(item => !item.itemDone).length
        //更变数字
        $(`#${uid}_span`).text(undo_count)
        //如果数字为0变成绿色 其余都是红色
        if (undo_count == 0) {
            $(`#${uid}_span`).removeClass("bg-danger")
            $(`#${uid}_span`).addClass("bg-success")

        } else {
            $(`#${uid}_span`).removeClass("bg-success")
            $(`#${uid}_span`).addClass("bg-danger")
        }

undo_order()完整程序码:

function undo_order(head, bodys) {
        var formNum = head.formnum
        var count = bodys.length
        var uid = head.uid
        var html_text = `
<li id="${uid}_li" class="list-group-item  justify-content-between align-items-center list-group-item-success">
    <table id="${uid}_table" class="table table-borderless list-group-item-success">
        <thead>
            <tr>
                <th>
                    订单编号 ${formNum}
                    <span class="badge bg-danger rounded-pill text-white " id="${uid}_span">${count}</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="list-group item_list">

                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <button id="${uid}_btn" name="done_btn" type="button" class="btn btn-success">
                        完成
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
</li>
`
        $('#undo_list').append(html_text)
        var undo_count = bodys.filter(item => !item.itemDone).length
        $(`#${uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${uid}_span`).removeClass("bg-danger")
            $(`#${uid}_span`).addClass("bg-success")

        } else {
            $(`#${uid}_span`).removeClass("bg-success")
            $(`#${uid}_span`).addClass("bg-danger")
        }
        bodys.forEach((item) => {
            var item_html = undo_order_item(head.uid,item.uid,item.item, item.count)
            var selector = `#${uid}_table>tbody>tr>td>div`

            $(selector).append(item_html)
            cb_id = `cb_${head.uid}_${item.uid}`
            $(`#${cb_id}`).prop('checked', item.itemDone)
        }
        )

    }

4. 修改 餐点旁checkbox中onchange事件
   加入以下程序码:

//变色
        var undo_count = selectOrder.bodys.filter(item => !item.itemDone).length
        $(`#${h_uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${h_uid}_span`).removeClass("bg-danger")
            $(`#${h_uid}_span`).addClass("bg-success")

        } else {
            $(`#${h_uid}_span`).removeClass("bg-success")
            $(`#${h_uid}_span`).addClass("bg-danger")
        }

完整checkbox事件

$('#undo_list').on("change", 'input[name="item_checkbox"]', function () {
        var h_uid = $(this).attr("id").split("_")[1]
        var b_uid = $(this).attr("id").split("_")[2]
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var selectOrder = undo_data.find(order => order.head.uid == h_uid)
        var selectItem = selectOrder.bodys.find(item => item.uid == b_uid)
        selectItem.itemDone = $(this).prop('checked')
        //变色
        var undo_count = selectOrder.bodys.filter(item => !item.itemDone).length
        $(`#${h_uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${h_uid}_span`).removeClass("bg-danger")
            $(`#${h_uid}_span`).addClass("bg-success")

        } else {
            $(`#${h_uid}_span`).removeClass("bg-success")
            $(`#${h_uid}_span`).addClass("bg-danger")
        }
        
        localStorage.setItem("undo_data", JSON.stringify(undo_data))

    });

5. 成果
   

结语

还差一些验证的问题外，程序的部分差不多到这边就结束了。
剩下的就是一些美工、架站的问题了。
在之後还有时间的话，会再把後续的处理再补上。