上一篇中，我们已经完成了"未完成清单"的内容。
这篇我们接着继续做已完成清单的内容

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，三个部分。
这样在撰写时不仅可以有更清晰的逻辑，也能减少我们在一堆程序码中神游，
落得找不到程序码的窘境。