ABP使用文档

  |  

具体入门与开发原理可参考此地址

https://blog.csdn.net/wulex/article/category/7256369/3

abp入门系列

https://www.jianshu.com/p/a6e9ace79345

我们以通知公告为示例

  1. 首先我们有一个公告信息的表结构,如下,像是否删除、新增时间等七个字段只需要继承FullAuditedEntity类即可

image.png

项目目录位置,在Domain/Plat建立NoticeItems目录,以类+s设置文件夹。

image.png

TelSCode.Domain.Plat.NoticeItems 此命名空间下的类如下,

public class NoticeItem : FullAuditedEntity
{
/// <summary>
/// 公告类别ID
/// </summary>
[StringLength(50)]
public string BaseItemId { get; set; }
/// <summary>
/// 标题
/// </summary>
[StringLength(100)]
public string Title { get; set; }
/// <summary>
/// 内容
/// </summary>
public string Content { get; set; }
/// <summary>
/// 打开次数
/// </summary>
public int Times { get; set; }
/// <summary>
/// 新增人姓名
/// </summary>

[StringLength(50)]
public string CreationUserName { get; set; }
/// <summary>
/// 部门
/// </summary>
[StringLength(50)]
public string DepName { get; set; }
/// <summary>
/// 是否置顶
/// </summary>

public bool IsTop { get; set; }

/// <summary>
/// 置顶时间
/// </summary>
public DateTime? TopTime { get; set; }
/// <summary>
/// 发布时间
/// </summary>
public DateTime? DeployTime { get; set; }
public bool IsImg { get; set; }
/// <summary>
/// 状态
/// </summary>
public string Status { get; set; }
/// <summary>
/// 图片地址
/// </summary>
public string ImgUrl { get; set; }
/// <summary>
/// 附件地址
/// </summary>
public string FileUrl { get; set; }

/// <summary>
/// 阅读量+1
/// </summary>
public void NewlyTimes()
{
this.Times++;
}

}

在此文件夹下把相关权限配置好

image.png

具体配置如下

image.png

数据以树的形式存放,公告信息这个菜单放到基础资料管理下,TypeCode为permission时,在菜单下不展示,是菜单下的权限配置,EnCode不能出现重复值,修改菜单时应在此位置修改对应的文字与排序方式、地址。如果是图标,将不自动更新。

new SysMenu {  DisplayName = "公告信息管理", Icon = "icon-standard-date-add", EnCode = "Plat.NoticeItem", LinkUrl = "/Plat/NoticeItem/Index", TypeCode = menu, SortCode = 20 ,
Childrens = new List<SysMenu>()
{
new SysMenu { DisplayName = "新增公告", EnCode = "Plat.NoticeItem.Add", TypeCode = permission, SortCode = 1 },
new SysMenu { DisplayName = "编辑公告", EnCode = "Plat.NoticeItem.Edit", TypeCode = permission, SortCode = 2},
new SysMenu { DisplayName = "删除公告", EnCode = "Plat.NoticeItem.Delete", TypeCode = permission, SortCode = 3 },
new SysMenu { DisplayName = "公告列表", EnCode = "Plat.NoticeItem.GetGrid", TypeCode = permission, SortCode = 4 }
}
}

然后在EntityFramework的TelSCodeDbContext中增加一行

public virtual IDbSet<NoticeItem> NoticeItem { get; set; }

image.png

在Application的Plat区域增加NoticeItems文件夹,我们以类名后缀加s建立文件夹,

image.png

NoticeItemInput.cs文件夹,一般情况下只需要将NoticeItem中的字段复制过来即可

[AutoMap(typeof(NoticeItem))]
public class NoticeItemInput : EntityDto
{
public string BaseItemId { get; set; }
[StringLength(100,ErrorMessage = "标题仅限100个字符")]
public string Title { get; set; }
public string Content { get; set; }
public int Times { get; set; }
public string CreationUserName { get; set; }
public string DepName { get; set; }
public bool IsTop { get; set; }
public bool IsImg { get; set; }
public string Status { get; set; }
public string ImgUrl { get; set; }
public string FileUrl { get; set; }
public DateTime? TopTime { get; set; }
public DateTime? DeployTime { get; set; }
}

NoticeItemListDto 为列表上展示的数据字段

[AutoMapFrom(typeof(NoticeItem))]
public class NoticeItemListDto : EntityDto, IHasCreationTime
{
public string BaseItemId { get; set; }
public string Title { get; set; }
public string Content { get; set; }
public int Times { get; set; }
/// <summary>
/// 回复次数
/// </summary>
public int CommentTimes { get; set; }
public string CreationUserName { get; set; }
public DateTime CreationTime { get; set; }

public DateTime? DeployTime { get; set; }

public bool IsTop { get; set; }
public string StatusCode { get; set; }
}

NoticeItemSearchDto为查询条件,继承PageDto即可,需要增加查询条件,则在此类中增加对应的属性。

public class NoticeItemSearchDto : PageDto
{
public string BaseItemEnCode { get; set; }
public string Title { get; set; }
}

INoticeItemAppService .cs文件 夹

public interface INoticeItemAppService : IUsualCrudAppService<NoticeItemInput, NoticeItemSearchDto, NoticeItemInput, int>
{

}

NoticeItemAppService.cs文件,一般情况下,此类继承UsualCrudAppService,继承接口INoticeItemAppService,即可拥有增、删、改、查的功能,如果想自定义查询实现,需要重写父类的CreateFilteredQuery方法,由于公告信息中业务要求,有置顶和置顶时间字段,需要根据最后置顶的时间倒序取数据,所以GetGridByCondition方法需要override下,即可解决,权限配置包括二部分,一种是给父类继承的UsualCurdAppService传相应的权限编码,分别:

base.DeletePermissionName="Plat.NoticeItem.Delete";
base.CreatePermissionName = "Plat.NoticeItem.Add";
base.UpdatePermissionName = "Plat.NoticeItem.Edit";

在方法名上使用此权限属性配置该方法对应的权限信息。

[AbpAuthorize("Plat.NoticeItem.GetGrid")]

调用 base.CreateOrUpdate方法时,即会判断用户是否有Plat.NoticeItem.Add权限

public class NoticeItemAppService : UsualCrudAppService<NoticeItem, NoticeItemInput, NoticeItemSearchDto, NoticeItemInput, int>, INoticeItemAppService
{

#region 构造函数
private readonly IRepository<NoticeItem> _noticeItemRepository;
private RoleManager RoleManager;
private readonly ISqlExecuter _iSqlExecuter;
public NoticeItemAppService(IRepository<NoticeItem> noticeItemRepository, ISqlExecuter iSqlExecuter, RoleManager roleManager) : base(noticeItemRepository)
{
this._noticeItemRepository = noticeItemRepository;
_iSqlExecuter = iSqlExecuter;
RoleManager = roleManager;
base.DeletePermissionName = "Plat.NoticeItem.Delete";
base.CreatePermissionName = "Plat.NoticeItem.Add";
base.UpdatePermissionName = "Plat.NoticeItem.Edit";
}
#endregion

public override async Task CreateOrUpdate(NoticeItemInput input)
{
if (input.IsTop)
{
input.TopTime = DateTime.Now;
}
else
{
input.TopTime = null;
}

if (input.Status == StatusCode.Submit.ToString())
{
input.DeployTime = DateTime.Now;
}
await base.CreateOrUpdate(input);
}

protected override IQueryable<NoticeItem> CreateFilteredQuery(NoticeItemSearchDto input)
{
return base.CreateFilteredQuery(input)
.WhereIf(!string.IsNullOrWhiteSpace(input.Title), m => m.Title.Contains(input.Title));
}

[AbpAuthorize("Plat.NoticeItem.GetGrid")]
public override EasyUiListResultDto<NoticeItemInput> GetGridByCondition(NoticeItemSearchDto input)
{
var rows = this.CreateFilteredQuery(input).OrderBy(r => r.IsTop).PageEasyUiBy(input).OrderByDescending(r => r.TopTime).MapTo<List<NoticeItemInput>>();

return new EasyUiListResultDto<NoticeItemInput>(input.Total, rows);
}

NoticeItemController.cs 此类注入IAbpFileManager 去解析保存的文件,供前台编辑页面时使用。


public class NoticeItemController : TelSCodeControllerBase
{
#region 构造函数
private readonly INoticeItemAppService _noticeitemAppService;
private readonly IAbpFileManager _abpFileManager;
public NoticeItemController(INoticeItemAppService noticeitemAppService, IAbpFileManager abpFileManager)
{
this._abpFileManager = abpFileManager;
this._noticeitemAppService = noticeitemAppService;
}
#endregion

#region 视图
public ActionResult Index()
{
return View();
}

[AbpMvcAuthorize("Plat.NoticeItem.Add", "Plat.NoticeItem.Edit")]
public ActionResult CreateOrUpdateModal()
{
return View();
}

#region 数据
public async Task<JsonResult> GetInfoForEdit(int id)
{
var output = await _noticeitemAppService.GetInfoForEdit(id);

if (id == 0)
{
output.CreationUserName = AbpSession.GetLoginName();
}

NoticeItemViewModel noticeItemViewModel = new NoticeItemViewModel(
_abpFileManager.GetFileOutput(output.FileUrl),
_abpFileManager.GetFileOutput(output.ImgUrl),
output
);

return Json(noticeItemViewModel);
}

[AbpMvcAuthorize("Plat.NoticeItem.GetGrid")]
public JsonResult GetGridByCondition(NoticeItemSearchDto input)
{
var gridData = _noticeitemAppService.GetGridByCondition(input);
return Json(gridData);
}

#endregion
}

公告信息因为有文件上传,所以需要新建一个NoticeItemViewModel 类
在TelSCode.Web中Plat区域Models新建文件夹NoticeItems,新建类NoticeItemViewModel.cs

image.png

[AutoMapFrom(typeof(NoticeItemInput))]
public class NoticeItemViewModel : NoticeItemInput
{
public List<AbpFileOutput> AbpFileOutput { get; set; }
public List<AbpFileOutput> AbpImgFileOutput { get; set; }
public NoticeItemViewModel(List<AbpFileOutput> fileUrlOutputs, List<AbpFileOutput> imgFileUrlOutputs, NoticeItemInput noticeItemInput)
{
AbpFileOutput = fileUrlOutputs;
AbpImgFileOutput = imgFileUrlOutputs;

noticeItemInput.MapTo(this);
}
}

接下来是界面,新增编辑在一个界面中,一个页面对应一个js,使用@Html.InCludeScript引用,不会有缓存问题,发布之后会生成版本号。

image.png

Index.cshtml

@using Abp.Web.Mvc.Extensions
@{
ViewBag.Title = "通知公告";
}

@section scripts{
@Html.IncludeScript("~/bower_components/webuploader/webuploader.min.js")
@Html.IncludeScript("~/bower_components/staticfile/libs/abp.webuploader.js")
@Html.IncludeScript("~/bower_components/wangEditor/wangEditor.min.js")
@Html.IncludeScript("~/bower_components/wangEditor/wangEditor-plugin.js")


<script>
var gridUI = gridUI ||
{
BaseItemEnCode: $.util.request['name'] == undefined ? "" : $.util.request['name']
};
</script>

@Html.IncludeScript("~/Areas/Plat/Views/NoticeItem/Index.js")

}

@section styles{
<link href="~/bower_components/webuploader/webuploader.css" rel="stylesheet" />
<link href="~/bower_components/wangEditor/wangEditor-plugin.css" rel="stylesheet" />
@Html.IncludeStyle("~/Areas/Plat/Views/NoticeItem/Index.js")
}

<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',border:false" style="height: 54px; overflow: hidden;">
<form id="searchForm">
<table class="kv-table no-border">
<tr>
<th class="kv-label" style="text-align:center">标题</th>
<td class="kv-content">
<input name="Title" id="Title" class="easyui-textbox" />
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="com.filter('#searchForm', '#dgGrid');">查询</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-undo'" onclick="com.clear('#searchForm', '#dgGrid')">清空</a>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="dgGrid"></table>
</div>
</div>

同目录下建一个Index.js ,我们使用闭包的形式来组织代码结构,将可配置项放在了上面,不强制要求,这里只为方便修改。使用时,将NoticeItem替换相应的类名,noticeServcice替换成相应的xxxservcie。abp.services.app.noticeItem中的noticeItem中n是首字母变成小写,这是后台生成的service,要按照此规定使用。

var gridUI = gridUI || {};
(function () {
var noticeService = abp.services.app.noticeItem;
var gridUrl = '/Plat/NoticeItem/GetGridByCondition?BaseItemEnCode=' + gridUI.BaseItemEnCode;
var editModalUrl = '/Plat/NoticeItem/CreateOrUpdateModal';
var readModalUrl = '/Plat/NoticeItem/ReadModal';
var dgGrid, dgGridId = "#dgGrid";

$.extend(gridUI,
{
loadGrid: function () {
var baseEnCode = 'Plat.NoticeItem.';

var toolbar = [{ text: "刷新", iconCls: "icon-reload", handler: function () { com.btnRefresh(dgGridId); } },
{ text: "新增", EnCode: baseEnCode + 'Add', iconCls: "icon-add", handler: gridUI.btnAdd },
{ text: "编辑", EnCode: baseEnCode + 'Edit', iconCls: "icon-edit", handler: gridUI.btnEdit },
{ text: "删除", EnCode: baseEnCode + 'Delete', iconCls: "icon-remove", handler: gridUI.btnDelete }];
toolbar = com.authorizeButton(toolbar);
if (gridUI.BaseItemEnCode != "") {
toolbar = [];
}

dgGrid = $(dgGridId).datagrid({
url: gridUrl,
toolbar: toolbar,
columns: [[
{
field: 'Id', title: '查看', width: 20, align: 'center', formatter: function (value, row) {
return String.format('<button class="btn btn-default btn-xs" type="button" onclick="gridUI.showDetails(\'{0}\')"><i class="fa fa-search"></i></button>', value);
}
},
{ field: 'Title', title: '标题', width: 80 },
{
field: 'BaseItemId', title: '类别', width: 80, formatter: function (value) {
if (top.clients.dataItems['NoticeItem']) {
return top.clients.dataItems['NoticeItem'][value];
} else {
return '';
}
}
},
{ field: 'CreationUserName', title: '发布人姓名', width: 160 },
{ field: 'IsTop', title: '是否置顶', width: 50, formatter: com.formatYes },
{
field: 'Status', title: '状态', width: 50, formatter: function (value) {
var objMsg = {
"primary": {
text: "发布",
'case': ['Submit']
},
"info": {
text: "暂存",
'case': ['TempSave']
}
};
return com.formatMsg(value, objMsg);
}
}
]]
});
},
editInfo: function (title, icon, id) {
var pDialog = com.dialog({
title: title,
width: '100%',
height: '100%',
href: editModalUrl,
iconCls: icon,
buttons: [
{
text: '发布',
iconCls: 'icon-ok',
handler: function () {
gridUI.submit(pDialog, "Submit");
}
}, {
text: '暂存',
iconCls: 'icon-save',
handler: function () {
gridUI.submit(pDialog, "TempSave");
}

}
],
onLoad: function () {
editUI.setForm(id);
}
});
},
showDetails: function (id) {
com.dialog({
title: "详情",
width: 1500,
height: 800,
href: readModalUrl,
queryParams: {
id: id
}
});
},
btnAdd: function () {
gridUI.editInfo('新增公告', 'icon-add');
},
btnEdit: function () {
com.edit(dgGridId, function (id) {
gridUI.editInfo("编辑公告", 'icon-edit', id);
});
},
btnDelete: function () {
com.deleted(noticeService, dgGridId);
},
submit: function (pDialog, status) {
var f = $("#editForm");
var isValid = f.form('validate');
if (!isValid) {
return;
}

var objForm = f.formSerialize();
objForm.Content = editor.txt.html();
objForm.Status = status;

com.setBusy(pDialog, true);
noticeService.createOrUpdate(objForm, { showMsg: true })
.done(function () {
com.btnRefresh();
pDialog.dialog('close');
})
.always(function () {
com.setBusy(pDialog, false);
});
}
});

$(function () {
gridUI.loadGrid();
});

})();

CreateOrUpdate.cshtml

@using Abp.Web.Mvc.Extensions
@{
Layout = null;
ViewBag.Title = "通知公告管理";
}
@Html.IncludeScript("/Areas/Plat/Views/NoticeItem/CreateOrUpdateModal.js")
<div class="layui-layer-content">
<form id="editForm">
<table class="kv-table">
<tr>
<th class="kv-label"><span class="red">*</span>标题</th>
<td class="kv-content" colspan="3">
<input id="Title" name="Title" type="text" class="easyui-textbox" data-options="required:true" style="width:569px" />
<input id="Id" name="Id" type="hidden" />
<input type="hidden" id="CreationUserName" name="CreationUserName" />
<input type="hidden" name="BaseItemCode" value="" />
</td>
</tr>
<tr>
<th class="kv-label">置顶</th>
<td class="kv-content" style="width:215px">
<input name="IsTop" id="IsTop" class="easyui-switchbutton">
</td>
<th class="kv-label">公告类别</th>
<td class="kv-content">
<input name="BaseItemId" id="BaseItemId" />
</td>
</tr>
<tr>
<th>附件</th>
<td colspan="3">
<div id="fileUrl"></div>
</td>
</tr>
@*<tr>
<th class="kv-label">是否图片新闻</th>
<td class="kv-content" colspan="3">
<input name="IsImg" id="IsImg" class="easyui-switchbutton">
</td>
</tr>*@
<tr id="IsImgNews">
<th>上传图片</th>
<td colspan="3">
<input name="IsImg" id="IsImg" type="hidden" value="true">
<div id="imgUrl" style="position: relative;"></div>
</td>
</tr>
<tr>
<th class="kv-label">内容</th>
<td class="kv-content" colspan="3">
<div id="Content" style="position: relative;"></div>
</td>
</tr>
</table>
</form>
</div>

CreateOrUpdate.js

var Img;
var editor;
var editUI = {
setForm: function (id) {

var E = window.wangEditor;
editor = new E('#Content');
editor.customConfig = com.editor.customConfig;
editor.create();
E.plugins.init({
elem: '#Content',
plugins: ['fullscreen']
});


//实例化文件上传
$("#imgUrl").powerWebUpload({
uploadType: 'img'
});
$("#fileUrl").powerWebUpload();

$('#BaseItemId').combobox({
url: com.baseUrl + '/baseItem/GetComBoJson?enCode=NoticeItem',
required: true,
validType: "comboxValidate['请选择公告类别']"
});

//function changeIsImg(checked) {
// if (checked) {
// $('#IsImgNews').css('display', '');
// } else {
// $('#IsImgNews').css('display', 'none');
// }
//}

//$('#IsImg').switchbutton({
// onChange: function (checked) {
// changeIsImg(checked);
// }
//});

com.setForm(id, function (data) {
var f = $("#editForm");
if (id) {
setTimeout(function () {
editor.txt.html(data.Content);
}, 666);
}



webuploader.loadFile({
elem: '#imgUrl',
rows: data.AbpImgFileOutput
});

webuploader.loadFile({
elem: '#fileUrl',
rows: data.AbpFileOutput
});
com.loadSwithButton($('.layui-layer-content'), data);
//changeIsImg(data.IsImg);
});
}
}

 评论


Copyright © 2019 、天上有木月博客 All Rights Reserved. by igeekfan. | 苏ICP备16046457号 | 本站运行于

本站开源 天上有木月 至Github , 总访问量为 次 。 载入天数...载入时分秒...