abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)
程序员文章站
2023-11-09 18:17:16
在上面文章abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之七(三十三) 的学习之后，我们知道了ABP自动帮助我们生成了WebAPI接口，接下我们通过修改脚本文件中的新增、更新与删除功能的脚本，通过这些WebAPI接口实现增删改... ......
abp(net core)+easyui+efcore实现仓储管理系统目录
abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务（五）
abp(net core)+easyui+efcore实现仓储管理系统——easyui前端页面框架 (十八)
在上面文章abp(net core)+easyui+efcore实现仓储管理系统——abp webapi与easyui结合增删改查之七(三十三) 的学习之后，我们知道了abp自动帮助我们生成了webapi接口，接下我们通过修改脚本文件中的新增、更新与删除功能的脚本，通过这些webapi接口实现增删改功能，而不是通过controller来实现。
十四、修改新增、更新与删除脚本
1. 在visual studio 2017的“解决方案资源管理器”中，找到领域层“abp.tplms.web.mvc”项目中的wwwroot目录下的view-resources\orgs目录中的找到index.js文件。
2. 在index.js文件中，我们写入完整的脚本代码。代码如下：
//------------------------组织管理-->组织信息---------------------------------//
//刷新数据
function initable() {
$("#dgorg").treegrid({
url: "/orgs/list",
title: "组织管理",
pagination: false,
fit: true,
fitcolumns: false,
loadmsg: "正在加载组织信息...",
nowarp: false,
border: false,
idfield: "id",
sortname: "id",
sortorder: "asc",
treefield: "name",
frozencolumns: [[//冻结列
{
field: "chk", checkbox: true, align: "left", width: 50
}
]],
columns: [[
{ title: "编号", field: "id", width: 50, sortable: true },
{ title: "组织名称", field: "name", width: 200, sortable: true },
{ title: "代码", field: "bizcode", width: 100, sortable: true },
{ title: "海关代码", field: "customcode", width: 100, sortable: true },
{ title: "状态", field: "status", width: 80, sortable: false },
{ title: "类型", field: "type", width: 80, sortable: false },
{ title: "父节点", field: "parentname", width: 120, sortable: false },
{ title: '创建时间', field: 'creationtime', width: 130, align: 'center' }
]]
});
}
function reloaded() { //reload
$("#reload").click(function () {
$('#dgorg').treegrid('reload');
});
}
//修改点击按钮事件
function updorginfo() {
$("#edit").click(function () {
bindtree();
//判断选择的中
var row = $("#dgorg").treegrid('getselected');
if (row) {
$.messager.confirm('编辑', '您想要编辑吗？', function (r) {
if (r) {
//先绑定
showorg(row);
//打开对话框编辑
$("#divaddupdorg").dialog({
closed: false,
title: "修改组织信息",
modal: true,
width: 600,
height: 450,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
});
}
});
} else {
$.messager.alert('提示', ' 请选择要编辑的行！', 'warning');
}
});
}
//删除
function deleteorg() {
$("#del").click(function () {
var rows = $("#dgorg").datagrid("getselections");
if (rows.length > 0) {
$.messager.confirm("提示", "确定要删除吗?", function (res) {
if (res) {
var codes = []; //重要不是{}
for (var i = 0; i < rows.length; i++) {
codes.push(rows[i].id);
_orgservice.delete({
id: rows[i].id
}).done(function () {
$.messager.alert("提示", "删除成功！");
$("#dgorg").datagrid("clearchecked");
$("#dgorg").datagrid("clearselections");
$('#dgorg').treegrid('reload');
});
}
}
});
}
})
}
//清空文本框
function clearall() {
$("#idupdate").val("");
$("#updbizcode").val("");
$("#nameupdate").val("");
$("#updcustomcode").val("");
$(':input[name]', this).each(function () {
$(this).val("");
});
}
var _orgservice = abp.services.app.org;
var _$modal = $("#divaddupdorg").parent();
var _$form = _$modal.find('form');
//弹出 添加对话框
function showorgdialog() {
$("#add").click(function () {
clearall();
bindtree();
$("#divaddupdorg").dialog({
closed: false,
title: "添加组织信息",
modal: true,
width: 600,
height: 450,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true
});
});
$("#btnsave").click(function () {
//保存
if (!_$form.valid()) {
return;
}
var id = $("#idupdate").val();
if (id == "" || id == undefined || id=="0") {
//验证
$.messager.confirm('确认', '您确认要保存吗？', function (r) {
if (r) {
$("#idupdate").val("0");
var postdata = _$form.serializeformtoobject(); //serializeformtoobject is defined in main.js
if (postdata == null || postdata == undefined || postdata.name == "" || postdata.bizcode == "") {
$.messager.alert('提示', ' 请填写相关必填项！', 'warning');
return;
}
abp.ui.setbusy(_$modal);
_orgservice.create(postdata).done(function () {
$.messager.alert("提示", "保存成功！");
$("#idupdate").val("");
_$modal.modal('hide');
$("#divaddupdorg").dialog("close");
initable(); //reload page to see new user!
}).always(function () {
abp.ui.clearbusy(_$modal);
});
}
})
}
else {
savedetail();
}
});
}
function savedetail() {
if (!_$form.valid()) {
return;
}
$.messager.confirm('确认', '您确认要修改吗？', function (r) {
var postdata = _$form.serializeformtoobject();
if (postdata==null || postdata==undefined || postdata.bizcode == "" || postdata.name == "") {
$.messager.alert('提示', ' 请填写相关必填项！', 'warning');
return;
}
abp.ui.setbusy(_$modal);
_orgservice.update(postdata).done(function () {
$.messager.alert("提示", "修改成功！");
_$modal.modal('hide');
$("#divaddupdorg").dialog("close");
initable(); //reload page to see new user!
}).always(function () {
abp.ui.clearbusy(_$modal);
});
})
}
function showorg(row) {
$("#idupdate").val(row.id);
$("#nameupdate").val(row.name);
$("#updbizcode").val(row.bizcode);
$("#updtype").val(row.type);
$("#updcustomcode").val(row.customcode);
$("#updisautoexpand").val(row.isautoexpand);
$("#updisleaf").val(row.isleaf);
$("#updstatus").val(row.status);
$("#updhotkey").val(row.hotkey);
$("#updiconname").val(row.iconname);
$("#remarkupdate").val(row.remark);
$("#addtree").combotree('setvalue', row.parentid);
$("#addtree").combotree('settext', row.parentname);
$('#updparentname').val(row.parentname);
}
function bindtree() {
$('#addtree').combotree({
url: '/orgs/getjsontree',
valuefield: 'id',
textfield: 'name',
multiple: false,
editable: false,
method: 'get',
panelheight: 'auto',
checkbox: false,
//required: true,
//全部折叠
onloadsuccess: function (node, data) {
$('#addtree').combotree('tree').tree("expandall"); //collapseall
},
onselect: function (node) {
$('#updparentname').val(node.text);
}
});
}
//------------------------系统管理-->组织信息结束------------------------------//
@section scripts
{
<script src="~/view-resources/views/orgs/index.js" asp-append-version="true"></script>
<script type="text/javascript">
$(function () {
initable();
reloaded();
updorginfo();
showorgdialog();
deleteorg();
});
</script>
}
十五、测试修改与删除组织部门信息
1.在visual studio 2017的解决方案资源管理器中，按f5运行应用程序。
2.在浏览器中的地址栏中输入“http://localhost:5000/”，然后输入管理员用户名进行登录。
3.在主界面的菜单中，选择“business->组织管理”菜单项，浏览器中呈现一个组织信息列表与四个按钮。
4.然后在组织信息列表中选中一条货物信息，然后使用鼠标点击“修改”按钮，对组织信息进行修改。如下图。
5.对于货物信息进行修改完成之后，点击“保存”按钮，弹出一个“您确认要修改吗？”对话框。点击对话框中的“确定”按钮。如下图。
6.如果修改成功，会有一个“修改成功”的提示信息，同时更新组织信息列表。如下图。
7.在组织信息列表中选中一条货物信息，然后使用鼠标点击“删除”按钮。会弹出一个“您确认要删除吗？”对话框。点击对话框中的“确定”按钮。如下图。
8.如果删除成功，会有一个“删除成功！”的提示信息，同时更新组织信息列表。如下图。
推荐阅读
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理八(二十六)
-
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）
-
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图（八）
-
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试（九）
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之四(三十)
-
abp(net core)+easyui+efcore实现仓储管理系统——入库管理之八(四十四)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之二(二十八)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之三(二十九)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)