本文介紹如何實現(xiàn)進(jìn)銷存管理系統(tǒng)的財務(wù)對賬模塊，財務(wù)對賬模塊包括供應(yīng)商對賬和客戶對賬2個菜單頁面荷辕。供應(yīng)商和客戶對賬字段相同，因此可共用一個頁面組件類控嗜。
- 項目代碼：JxcLite
- 開源地址： https://gitee.com/known/JxcLite
1. 配置模塊
運行項目疆栏，在【系統(tǒng)管理-模塊管理】中配置如下模塊菜單承边，配置教程參考之前的教程石挂。
| 一級模塊 | 二級模塊 | 代碼 | 圖標(biāo) | Url | 描述 |
|---|---|---|---|---|---|
| 財務(wù)管理 | Finance | property-safety | |||
| 客戶對賬單 | CustomerAccount | unordered-list | /fms/CustomerAccount | 查詢和維護(hù)客戶對賬單信息富岳。 | |
| 供應(yīng)商對賬單 | SupplierAccount | unordered-list | /fms/SupplierAccount | 查詢和維護(hù)供應(yīng)商對賬單信息拯腮。 |
2. 實體類
在JxcLite項目Entities文件夾下面添加JxAccountHead.cs和JxAccountList.cs兩個實體類文件，實體類代碼可以直接復(fù)制模塊管理中由模型設(shè)置生成的代碼萝喘。文章中只簡單描述一下實體類的定義，具體代碼參見開源启妹，代碼定義如下：
namespace JxcLite.Entities;
/// <summary>
/// 對賬單表頭信息類饶米。
/// </summary>
public class JxAccountHead : EntityBase { }
/// <summary>
/// 對賬單表體信息類。
/// </summary>
public class JxAccountList : EntityBase { }
3. 建表腳本
打開JxcLite.Web項目Resources文件夾下的Tables.sql資源文件车胡，復(fù)制粘貼由【模塊管理-模型設(shè)置】中生成的建表腳本檬输。文章中只簡單描述一下建表腳本，具體腳本參見開源匈棘，內(nèi)容如下：
CREATE TABLE [JxAccountHead] (
[Id] varchar(50) NOT NULL PRIMARY KEY,
...
[Files] nvarchar(500) NULL
);
CREATE TABLE [JxAccountList] (
[Id] varchar(50) NOT NULL PRIMARY KEY,
...
[BillId] varchar(50) NOT NULL
);
4. 服務(wù)接口
在JxcLite項目Services文件夾下面添加財務(wù)管理模塊服務(wù)接口丧慈，文件名定義為IFinanceService.cs，該接口定義前后端交互的Api訪問方法羹饰，包括分頁查詢伊滋、批量刪除實體、保存實體队秩。具體方法定義如下：
namespace JxcLite.Services;
public interface IFinanceService : IService
{
//分頁查詢客戶或供應(yīng)商對賬單笑旺，通過查詢條件Type字段篩選
Task<PagingResult<JxAccountHead>> QueryAccountsAsync(PagingCriteria criteria);
//根據(jù)賬單類型獲取默認(rèn)對賬單信息
Task<JxAccountHead> GetDefaultAccountAsync(string type);
//批量刪除對賬單表頭及表體信息
Task<Result> DeleteAccountsAsync(List<JxAccountHead> models);
//保存對賬單表頭信息
Task<Result> SaveAccountAsync(UploadInfo<JxAccountHead> info);
}
5. 服務(wù)實現(xiàn)
在JxcLite.Web項目Services文件夾下面添加財務(wù)管理模塊服務(wù)接口的實現(xiàn)類乌妙，文件名定義為FinanceService.cs熊经，文章中只簡單描述一下實現(xiàn)類的定義和繼承槐壳，具體實現(xiàn)參見開源，定義如下：
namespace JxcLite.Web.Services;
class FinanceService(Context context) : ServiceBase(context), IFinanceService
{
public Task<PagingResult<JxAccountHead>> QueryAccountsAsync(PagingCriteria criteria) { }
public Task<JxAccountHead> GetDefaultAccountAsync(string type) { }
public Task<Result> DeleteAccountsAsync(List<JxAccountHead> models) { }
public Task<Result> SaveAccountAsync(UploadInfo<JxAccountHead> info) { }
}
雙擊打開JxcLite.Web項目中的AppWeb.cs文件崇堰，在AddJxcLiteCore方法中注冊服務(wù)類特幔，前端組件可以通過依賴注入工廠創(chuàng)建服務(wù)的實例。代碼如下：
public static class AppWeb
{
public static void AddJxcLiteCore(this IServiceCollection services)
{
services.AddScoped<IFinanceService, FinanceService>();
}
}
6. 數(shù)據(jù)依賴
在JxcLite.Web項目Repositories文件夾下面添加財務(wù)管理模塊數(shù)據(jù)依賴類，文件名定義為FinanceRepository.cs困肩，文章中只簡單描述一下依賴類的定義，具體實現(xiàn)參見開源，定義如下：
namespace JxcLite.Web.Repositories;
class FinanceRepository
{
internal static Task<PagingResult<JxAccountHead>> QueryAccountsAsync(Database db, PagingCriteria criteria) { }
internal static Task<List<JxBillList>> GetBillListsAsync(Database db, string headId) { }
//根據(jù)前綴獲取最大業(yè)務(wù)單號
internal static Task<string> GetMaxAccountNoAsync(Database db, string prefix) { }
internal static Task DeleteAccountListsAsync(Database db, string headId) { }
internal static Task DeleteAccountListAsync(Database db, string headId, string billId) { }
}
7. 列表頁面
在JxcLite.Client項目Pages\Finance文件夾下面添加AccountList.cs單據(jù)列表組件侈百，該組件是客戶和供應(yīng)商對賬單的列表組件共用類锭魔，具體實現(xiàn)參見開源漠秋，部分代碼如下：
namespace JxcLite.Client.Pages.Finance;
public class AccountList : BaseTablePage<JxAccountHead>
{
private IFinanceService Service;
//取得對賬類型（客戶、供應(yīng)商）焰雕，由具體對賬單頁面重寫該類型
protected virtual string Type { get; }
protected override async Task OnPageInitAsync()
{
await base.OnPageInitAsync();
Service = await CreateServiceAsync<IFinanceService>();//創(chuàng)建服務(wù)
Table.FormType = typeof(AccountForm);//自定義表單類型
Table.OnQuery = QueryAccountsAsync; //查詢方法
//下面是設(shè)置列表欄位顯示的模板
Table.Column(c => c.Status).Template((b, r) => b.Tag(r.Status));
Table.Column(c => c.AccountDate).Type(FieldType.Date);
}
//新增
public async void New()
{
var row = await Service.GetDefaultBillAsync(Type);
Table.NewForm(Service.SaveBillAsync, row);
}
//編輯
public void Edit(JxAccountHead row) => Table.EditForm(Service.SaveAccountAsync, row);
//批量刪除和刪除
public void DeleteM() => Table.DeleteM(Service.DeleteAccountsAsync);
public void Delete(JxAccountHead row) => Table.Delete(Service.DeleteAccountsAsync, row);
//導(dǎo)出
public async void Export() => await ExportDataAsync();
private Task<PagingResult<JxAccountHead>> QueryAccountsAsync(PagingCriteria criteria)
{
//設(shè)置對賬單類型查詢條件
criteria.SetQuery(nameof(JxAccountHead.Type), QueryType.Equal, Type);
return Service.QueryAccountsAsync(criteria);
}
}
8. 表頭組件
首先打開JxcLite.Client項目Shared文件夾下面TypeForms.cs文件，添加對賬單表頭類型表單組件，代碼如下：
namespace JxcLite.Client.Shared;
public class AccountHeadTypeForm : AntForm<JxAccountHead> { }
再在JxcLite.Client項目Pages\Finance文件夾下面添加AccountHead.razor文件己肮，具體實現(xiàn)參見開源，部分代碼如下：
@inherits BaseForm<JxAccountHead>
<AccountHeadTypeForm Form="Model" ShowAction>
<AntRow>
<DataItem Span="8" Label="對賬單號" Required>
<AntInput Disabled @bind-Value="@context.AccountNo" />
</DataItem>
<DataItem Span="8" Label="單證狀態(tài)">
<KTag Text="@context.Status" />
</DataItem>
<DataItem Span="8" Label="對賬日期" Required>
<AntDatePicker @bind-Value="@context.AccountDate" />
</DataItem>
</AntRow>
<AntRow>
<DataItem Span="8" Label="商業(yè)伙伴" Required>
<PartnerPicker Value="@context.Partner" AllowClear Type="@context.Type"
ValueChanged="e=>context.Partner=e[0].Name" />
</DataItem>
<DataItem Span="8" Label="業(yè)務(wù)日期" Required>
<AntRangePicker @bind-RangeValue="@context.BizDates" />
</DataItem>
<DataItem Span="8" Label="總金額">
<AntDecimal @bind-Value="@context.TotalAmount" /> 元
</DataItem>
</AntRow>
<AntRow>
<DataItem Span="8" Label="合同號">
<AntInput @bind-Value="@context.ContractNo" />
</DataItem>
<DataItem Span="8" Label="發(fā)票號">
<AntInput @bind-Value="@context.InvoiceNo" />
</DataItem>
</AntRow>
<AntRow>
<DataItem Span="24" Label="備注">
<AntTextArea @bind-Value="@context.Note" />
</DataItem>
</AntRow>
<AntRow>
<DataItem Span="24" Label="附件">
<KUpload @ref="upload" ReadOnly="Model.IsView" Value="@context.Files"
OpenFile IsButton="!Model.Data.IsNew" OnFilesChanged="OnFilesChanged" />
</DataItem>
</AntRow>
</AccountHeadTypeForm>
@code {
private KUpload upload;
private async void OnFilesChanged(List<FileDataInfo> files)
{
if (Model.Data.IsNew)
{
Model.Files[nameof(JxAccountHead.Files)] = files;
}
else
{
Model.Files[nameof(JxAccountHead.Files)] = files;
await Model.SaveAsync(d => upload.SetValue(d.Files), false);
}
}
}
9. 業(yè)務(wù)單表格組件
再在JxcLite.Client項目Shared文件夾下面添加BillHeadTable.cs文件般甲，該組件為對賬單明細(xì)列表鹅颊，具體實現(xiàn)參見開源觅闽，部分代碼如下：
namespace JxcLite.Client.Shared;
public class BillHeadTable : BaseTable<JxBillHead>
{
private IBillService Service;
[Parameter] public JxAccountHead Account { get; set; }
protected override async Task OnInitAsync()
{
await base.OnInitAsync();
Service = await CreateServiceAsync<IBillService>();
Table.ShowPager = true;
Table.OnQuery = QueryBillsAsync;
if (!ReadOnly)
{
Table.Toolbar.AddAction(nameof(New));
Table.Toolbar.AddAction(nameof(DeleteM));
Table.SelectType = TableSelectType.Checkbox;
}
Table.AddColumn(c => c.BillNo, true).Width(100);
Table.AddColumn(c => c.Status).Width(100).Template((b, r) => b.Tag(r.Status));
Table.AddColumn(c => c.BillDate).Width(100).Type(FieldType.Date);
Table.AddColumn(c => c.Partner).Width(150);
Table.AddColumn(c => c.ContractNo).Width(100);
Table.AddColumn(c => c.InvoiceNo).Width(100);
Table.AddColumn(c => c.TotalAmount).Width(100).Sum();
Table.AddColumn(c => c.Note).Width(200);
if (!ReadOnly)
{
Table.AddAction(nameof(Delete));
}
}
public void New() { }
public void DeleteM() { }
public void Edit(JxBillHead row) { }
public void Delete(JxBillHead row) { }
private Task<PagingResult<JxBillHead>> QueryBillsAsync(PagingCriteria criteria)
{
criteria.Parameters[nameof(BillQueryType)] = BillQueryType.Account;
criteria.SetQuery("BizId", QueryType.Equal, Account.Id);
return Service.QueryBillsAsync(criteria);
}
}
10. 表單組件
再在JxcLite.Client項目Pages\Finance文件夾下面添加AccountForm.cs文件蛉拙，該組件為對賬單彈窗表單組件，分表頭信息和對賬明細(xì)兩個標(biāo)簽大咱，代碼如下：
namespace JxcLite.Client.Pages.Finance;
class AccountForm : BaseTabForm
{
[Parameter] public FormModel<JxAccountHead> Model { get; set; }
protected override async Task OnInitFormAsync()
{
await base.OnInitFormAsync();
Tab.AddTab("表頭信息", BuildHead);
Tab.AddTab("對賬明細(xì)", BuildList);
Tab.Right = b => b.Tag(Model.Data.Status);
}
private void BuildHead(RenderTreeBuilder builder)
{
builder.Component<AccountHead>().Set(c => c.Model, Model).Build();
}
private void BuildList(RenderTreeBuilder builder)
{
builder.Component<BillHeadTable>()
.Set(c => c.ReadOnly, Model.IsView)
.Set(c => c.Account, Model.Data)
.Build();
}
}
