【Side Project】 (老板)订单清单UX功能实作

我们接续上一篇完成一些未完成的功能。

完成按钮 & 返回按钮

这两个按钮在整个篇章中，属於比较困难的部分。
我们先来分析一下，应该要完成哪些步骤才能走完流程。

完成按钮:

修改订单的状态为true(完成)
将完成清单中新增一笔与这笔资料相等的订单
删除未完成订单中的这笔资料
与资料库资料同步

返回按钮:

修改订单的状态为false(未完成)
将未完成清单中新增一笔与这笔资料相等的订单
删除完成清单中的这笔资料
与资料库资料同步

我们每次做状态更新的时候都需要修改画面，
并且更新资料。若老板不断修改状态的话，就会不断的与後台往来资料。
导致速度缓慢，也会造成系统的负担。
所以这边比较好的做法是，我们先将资料存在localStorage，
然後在达成特定条件的时候再与後台做资料的交换。

完成按钮

打开 Proprietor.cshtml
分别将setUndoOrder() 与 **setDoneOrder()**取得的资讯记录到localStorage

//先将资料转成字串再存入
localStorage.setItem("undo_data", JSON.stringify(data))
localStorage.setItem("done_data", JSON.stringify(data))

setUndoOrder():

function setUndoOrder() {
        var json = 0
        $.ajax({
        url: "@Url.Action("GetUndoOrder")",
            type: "post",
            dataType: "json",
            success: function (data) {
                localStorage.setItem("undo_data", JSON.stringify(data))
                data.forEach((item) => {
                    undo_order(item.head, item.bodys)

                })
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("status: " + xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })
        return json
    }

setDoneOrder():

function setDoneOrder() {
        var json = 0
        $.ajax({
        url: "@Url.Action("GetDoneOrder")",
            type: "post",
            dataType: "json",
            success: function (data) {
                localStorage.setItem("done_data",JSON.stringify(data))
                data.forEach((item) => {
                    

                })
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("status: " + xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })
        return json
    }

修改undo_order()，给予button name，让我们比较好搜寻

<button id="${uid}_btn" name="done_btn" type="button" class="btn btn-success">
    完成
</button>

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-primary rounded-pill">${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)

        bodys.forEach((item) => {
            var item_html = undo_order_item(item.item, item.count)
            var selector = `#${uid}_table>tbody>tr>td>div`

            $(selector).append(item_html)
        }
        )

    }

将name = done_btn 的button新增事件

$('#undo_list').on("click", 'button[name="done_btn"]', function () {
        var uid = $(this).attr("id").replace("_btn", "")
        console.log(uid)
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var done_data = JSON.parse(localStorage.getItem("done_data"))
        undo_data.forEach((item,index) => {
            if (item.head.uid == uid) {
                //新增元素到done_list
                done_order(item.head, item.bodys)
                //新增资料到done_data
                done_data[done_data.length] = item
                //删除undo_list的元素
                $(`#${uid}_li`).remove()
                //删除undo_data的资料
                undo_data.splice(index, 1)
                //将资料存回localStotage
                localStorage.setItem("done_data",JSON.stringify(done_data))
                localStorage.setItem("undo_data",JSON.stringify(undo_data))
            }
        })
        
    });

返回按钮

将刚刚的做法如法炮制

打开 Proprietor.cshtml
修改 done_order()，给予button name，让我们比较好搜寻

<button type="button" class="btn btn-outline-warning" id="btn${uid}" name="itemback_btn">
    返回
</button>

done_order()

function done_order(head,bodys) {
        var formNum = head.formnum
        var uid = head.uid
        var html_text = `
<div ${uid}_div>
    <button class="list-group-item list-group-item-action active btn-outline-success" type="button" data-toggle="collapse" data-target="#collapse${uid}" aria-expanded="false" aria-controls="collapse${uid}">
        订单编号 ${formNum}
    </button>
    <div class="collapse" id="collapse${uid}">
        <div class="card card-body">
            <div class="list-group" name="item_list">

            </div>
            <div>
                <br />
                <button type="button" class="btn btn-outline-warning" id="btn${uid}" name="itemback_btn">
                    返回
                </button>
            </div>
        </div>
    </div>
</div>
`
        $('#done_list').append(html_text)

        bodys.forEach((item) => {
            var item_html = done_order_item(item.item, item.count)
            var selector = `#collapse${uid}>div>div[name='item_list']`
            $(selector).append(item_html)
        }
        )

    }

新增 button[name="itemback_btn"] 的事件

$('#done_list').on("click", 'button[name="itemback_btn"]', function () {
        var uid = $(this).attr("id").replace("btn", "")
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var done_data = JSON.parse(localStorage.getItem("done_data"))
        done_data.forEach((item, index) => {
            if (item.head.uid == uid) {
                undo_order(item.head, item.bodys)
                undo_data[undo_data.length] = item
                $(`#${uid}_div`).remove()
                done_data.splice(index, 1)
                localStorage.setItem("done_data", JSON.stringify(done_data))
                localStorage.setItem("undo_data", JSON.stringify(undo_data))
            }
        })

    });