上一篇中，我們已經完成了"未完成清單"的內容。
這篇我們接著繼續做已完成清單的內容

Model處理

1. 打開 ProprietorModel.cs
2. 新增 SelectDoneOrder()

public List<Order> SelectDoneOrder(IConfiguration config)
        {
            var order_list = new List<Order>();
            //連線設定
            SqlSugarClient db = new SqlSugarClient(new ConnectionConfig()
            {
                //連線字串
                ConnectionString = config.GetValue<string>("WebmenuConnectionString"),
                DbType = DbType.SqlServer,//連線類型
                IsAutoCloseConnection = true //自動關閉連線
            });


            try
            {

                //當執行時，觸發事件
                db.Aop.OnLogExecuting = (sql, pars) =>
                {
                    Console.WriteLine(sql);//查看SQL語法
                };
                //begin tran
                db.BeginTran();
                //取得菜單表頭，並排序(正序)
                var list_h = db.Queryable<Menulisth>().Where(head => head.OrderDone == true && head.Createtime >= DateTime.Today).OrderBy(menu => menu.Createtime, OrderByType.Asc).ToList();
                var list_b = db.Queryable<Menulistb, Menulisth>((body, head) => new JoinQueryInfos(JoinType.Left, head.Uid == body.H_uid))
                    .Where((body, head) => head.OrderDone == true && head.Createtime >= DateTime.Today)
                    .OrderBy((body, head) => head.Createtime, OrderByType.Asc)
                    .Select<Menulistb>().ToList();
                //將表頭加入到表身資料寫入
                foreach (var head in list_h)
                {

                    var order = new Order();
                    //加入表頭
                    order.head = head;
                    //加入表身
                    foreach (var body in list_b)
                    {
                        if (body.H_uid == head.Uid)
                        {
                            order.bodys.Add(body);
                        }
                    }
                    order_list.Add(order);

                }

                db.CommitTran();
            }
            catch
            {
                db.RollbackTran();//rollback
                throw;
            }
            return order_list;
        }

複製原本的SelectUndoOrder()來進行修改即可，
將原本的條件改成

head.OrderDone == true && head.Createtime >= DateTime.Today

為了避免日後網頁上的資訊無限增長，所以完成清單只顯示今日的點菜單。

Controller 處理

1. 打開 HomeController.cs
2. 新增 GetDoneOrder()

[HttpPost]
        public IActionResult GetDoneOrder()
        {
            var proprietor = ProprietorModel.proprietor;
            var list = proprietor.SelectDoneOrder(_config);
            //自動轉成json格式
            return Json(list);
        }

這邊負責將從資料庫取得的資訊傳回前台

View 處理(.cshtml)

1. 打開 Proprietor.cshtml
2. 將已完成清單中的假資料清空
   html部分的程式碼應該會剩下這樣:

<div>
    <p>這是老闆-餐點清單</p>
    <table id="orderlist"
           class="table table-hover table-dark">
        <thead>
            <tr class="">
                <th colspan="3" class="text-center "><h1>店名</h1></th>
            </tr>
            <tr class="">
                <th data-field="undo">未完成訂單</th>
                <th data-field="done">已完成訂單</th>
            </tr>
        </thead>
        <tbody id="orderlist_body">
            <tr>
                @*未完成清單*@
                <td>
                    <ul class="list-group " id="undo_list">
                    </ul>
                </td>
                @*已完成清單*@
                <td>
                    <div class="list-group " id="done_list">
                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
        </tfoot>
    </table>

</div>

3. 利用ajax呼叫後台資料 setDoneOrder()

function setDoneOrder() {
        var json = 0
        $.ajax({
        url: "@Url.Action("GetDoneOrder")",
            type: "post",
            dataType: "json",
            success: function (data) {

                data.forEach((item) => {
                    done_order(item.head,item.bodys)

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

        }

        })
        return json
    }

4. 接著做以完成清單的外框 done_order()

function done_order(head,bodys) {
        var formNum = head.formnum

        var html_text = `
<div>
    <button class="list-group-item list-group-item-action active btn-outline-success" type="button" data-toggle="collapse" data-target="#collapse${formNum}" aria-expanded="false" aria-controls="collapse${formNum}">
        訂單編號 ${formNum}
    </button>
    <div class="collapse" id="collapse${formNum}">
        <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${formNum}">
                    返回
                </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${formNum}>div>div[name='item_list']`
            $(selector).append(item_html)
        }
        )

    }

這邊使用了Bootstrap中collapse的元件，因為已完成的部分通常不需要太多的資訊。
所以在一般時候就用折疊的方式收起來。
5. 最後再將訂單中餐點內容加進來done_order_item()

function done_order_item(item, count) {
        item_html = `
<label class="list-group-item list-group-item-primary">
    &ensp;
    ${item} * ${count}
</label>
`
        return item_html
    }

整段script程式碼就會變成這個樣子:

//未完成清單
function undo_order_item(item,count)...
function undo_order(head, bodys)
function setUndoOrder()
//已完成清單
function done_order_item(item, count)
function done_order(head,bodys)
function setDoneOrder()

setUndoOrder()
setDoneOrder()

6. 成果
   

結語

這篇中可以看出我們將每段不同業務的工作分到MVC各個部分去完成。
在前端的View的部分，我們也可以再繼續細分成
頁面框架 html、畫面功能JS、與畫面美工CSS，三個部分。
這樣在撰寫時不僅可以有更清晰的邏輯，也能減少我們在一堆程式碼中神遊，
落得找不到程式碼的窘境。