abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十四)

程序员文章站 2022-08-02 11:34:42

上接(abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十三) )，在这一篇文章中我们实现新增供应商的相关功能。我们先来看一下 “ABP.TPLMS.Web.Mvc”项目中的wwwroot目录下的view-resources\Use... ......

abp(net core)+easyui+efcore实现仓储管理系统目录

abp(net core)+easyui+efcore实现仓储管理系统——abp总体介绍(一）

abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)

abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三)

abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)

abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务（五）

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器（六）

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图（八）

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试（九）

abp(net core)+easyui+efcore实现仓储管理系统——多语言（十）

abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十一)

abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十二)

abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十三)

上接(abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十三) )，在这一篇文章中我们实现新增供应商的相关功能。

九、新增供应商

　 （一） 创建js文件

我们先来看一下 “abp.tplms.web.mvc”项目中的wwwroot目录下的view-resources\users目录中的index.js文件，然后参照此文件来写新增供应商的脚本文件。

1. 在visual studio 2017的“解决方案资源管理器”中，找到展现层“abp.tplms.web.mvc”项目中的wwwroot目录下的view-resources目录。使用鼠标右键单击此目录，在弹出菜单中选择“添加” > “新建文件夹”。并重命名为“supplier”。

2. 在visual studio 2017的“解决方案资源管理器”中，鼠标右键单击“supplier”文件夹，然后选择“添加” > “新建项…”。在“添加新项-abp.tplms.web.mvc”对话框中，选择“javascript文件”，并将名称命名为index.js。如下图。

abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十四)

3. 在index.js文件中，我们写入如下代码。

(function() {
    $(function() { 

        var _supplierservice = abp.services.app.supplier;
        var _$modal = $('#suppliercreatemodal');
        var _$form = _$modal.find('form'); 

        _$form.validate({         
        });

        $('#refreshbutton').click(function () {
            refreshmodulelist();
        }); 

        $('.delete-supplier').click(function () {
            var userid = $(this).attr("data-supplier-id");
            var username = $(this).attr('data-supplier-name');
            deletesupplier(userid, username);
        });

 
        $('.edit-supplier').click(function (e) {
            var supplierid = $(this).attr("data-supplier-id");

            e.preventdefault();
            $.ajax({
                url: abp.apppath + 'supplier/editsuppliermodal?supplierid=' + supplierid,

                type: 'post',
                contenttype: 'application/html',
                success: function (content) {
                    $('#suppliereditmodal div.modal-content').html(content);
                },

                error: function (e) { }
            });
        }); 

        _$form.find('button[type="submit"]').click(function (e) {
            e.preventdefault();

            if (!_$form.valid()) {
                return;
            }

            var supplier = _$form.serializeformtoobject(); //serializeformtoobject is defined in main.js         

            abp.ui.setbusy(_$modal);
            _supplierservice.create(supplier).done(function () {
                _$modal.modal('hide');
                location.reload(true); //reload page to see new user!

            }).always(function () {
                abp.ui.clearbusy(_$modal);
            });
        });
      

        _$modal.on('shown.bs.modal', function () {
            _$modal.find('input:not([type=hidden]):first').focus();

        });
 

        function refreshsupplierlist() {
            location.reload(true); //reload page to see new user!

        } 

        function deletesupplier(supplierid, suppliername) {
            abp.message.confirm(
                abp.utils.formatstring(abp.localization.localize('areyousurewanttodelete', 'tplms'), suppliername),

                function (isconfirmed) {
                    if (isconfirmed) {
                        _supplierservice.delete({
                            id: supplierid

                        }).done(function () {
                            refreshsupplierlist();

                        });
                    }
                }
            );
        }
    });
})();

4. 在visual studio 2017的“解决方案资源管理器”中，找到“abp.tplms.web.mvc”项目中的views目录下的supplier目录中的index.cshtml文件。双击打开此文件，并写入以下代码，引用脚本。

@section scripts    {  

        <script src="~/view-resources/views/supplier/index.js" asp-append-version="true"></script>   }

（二）创建新增供应商视图

1. 在visual studio 2017的“解决方案资源管理器”中，找到“abp.tplms.web.mvc”项目中的views目录下的supplier目录中的index.cshtml文件。双击打开此文件，并写入以下代码。

<div class="modal fade" id="suppliercreatemodal" tabindex="-1" role="dialog" 
aria-labelledby="suppliercreatemodallabel" data-backdrop="static">
    <div class="modal-dialog" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span>@l("createnewsupplier")</span>
                </h4>
            </div>
            <div class="modal-body">
                <form name="suppliercreateform" role="form"  class="form-validation">
                    <div>   
                        <div class="row clearfix">
                            <div class="col-sm-6">
                                <div class="form-group form-float">
                                    <div class="form-line">

                                        <label asp-for="@model.supplier.code" class="form-label"></label>
                                        <input type="text" name="code" class="form-control" required maxlength="50" />     
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">

                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <label asp-for="@model.supplier.name" class="form-label"></label>
                                        <input type="text" name="name" class="form-control" required maxlength="50" />     
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">

                            <div class="col-sm-12">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <label asp-for="@model.supplier.address" class="form-label"></label>
                                        <input type="text" name="address" class="form-control" required maxlength="255" />  
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">

                            <div class="col-sm-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <label asp-for="@model.supplier.linkname" class="form-label"></label>

                                        <input type="text" name="linkname" class="form-control" />
                                      
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <label asp-for="@model.supplier.mobile" class="form-label"></label>

                                        <input type="text" name="mobile" class="form-control" />                                      

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">

                            <div class="col-sm-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <label asp-for="@model.supplier.tel" class="form-label"></label>
                                        <input type="text" name="tel" class="form-control" required maxlength="255" />  
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">

                                <div class="form-group form-float">
                                    <div class="form-line">
                                         <label asp-for="@model.supplier.status" class="form-label"></label>

                                        <input type="text" name="status" class="form-control" />

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-sm-6">
                                <div class="form-line">
                                    <label asp-for="@model.supplier.sex"></label>
                                    <input name="sex" type="text" class="form-control" />

                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-line">
                                    <label asp-for="@model.supplier.email"></label>
                                    <input name="email" type="text" class="form-control" /> 

                                </div>
                            </div>
                        </div> 

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">@l("cancel")</button>
                        <button type="submit" class="btn btn-primary waves-effect">@l("save")</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

2. 在visual studio 2017中按f5运行应用程序。登录之后，点击“supplier”目录，我们可以看到供应商列表页面。然后点击供应商列表页面中的新增按钮。如下图。

abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十四)