本文介绍如何实现进销存管理系统的财务对账模块，财务对账模块包括供应商对账和客户对账2个菜单页面。供应商和客户对账字段相同，因此可共用一个页面组件类。

• 项目代码：JxcLite
• 开源地址： https://gitee.com/known/JxcLite

1. 配置模块

运行项目，在【系统管理-模块管理】中配置如下模块菜单，配置教程参考之前的教程。

2. 实体类

在JxcLite项目Entities文件夹下面添加JxAccountHead.cs和JxAccountList.cs两个实体类文件，实体类代码可以直接复制模块管理中由模型设置生成的代码。文章中只简单描述一下实体类的定义，具体代码参见开源，代码定义如下：

namespace JxcLite.Entities;

/// <summary>
/// 对账单表头信息类。
/// </summary>
public class JxAccountHead : EntityBase { }

/// <summary>
/// 对账单表体信息类。
/// </summary>
public class JxAccountList : EntityBase { }

3. 建表脚本

打开JxcLite.Web项目Resources文件夹下的Tables.sql资源文件，复制粘贴由【模块管理-模型设置】中生成的建表脚本。文章中只简单描述一下建表脚本，具体脚本参见开源，内容如下：

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. 服务接口

在JxcLite项目Services文件夹下面添加财务管理模块服务接口，文件名定义为IFinanceService.cs，该接口定义前后端交互的Api访问方法，包括分页查询、批量删除实体、保存实体。具体方法定义如下：

namespace JxcLite.Services;

public interface IFinanceService : IService
{
    //分页查询客户或供应商对账单，通过查询条件Type字段筛选
    Task<PagingResult<JxAccountHead>> QueryAccountsAsync(PagingCriteria criteria);
    //根据账单类型获取默认对账单信息
    Task<JxAccountHead> GetDefaultAccountAsync(string type);
    //批量删除对账单表头及表体信息
    Task<Result> DeleteAccountsAsync(List<JxAccountHead> models);
    //保存对账单表头信息
    Task<Result> SaveAccountAsync(UploadInfo<JxAccountHead> info);
}

5. 服务实现

在JxcLite.Web项目Services文件夹下面添加财务管理模块服务接口的实现类，文件名定义为FinanceService.cs，文章中只简单描述一下实现类的定义和继承，具体实现参见开源，定义如下：

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方法中注册服务类，前端组件可以通过依赖注入工厂创建服务的实例。代码如下：

public static class AppWeb
{
    public static void AddJxcLiteCore(this IServiceCollection services)
    {
        services.AddScoped<IFinanceService, FinanceService>();
    }
}

6. 数据依赖

在JxcLite.Web项目Repositories文件夹下面添加财务管理模块数据依赖类，文件名定义为FinanceRepository.cs，文章中只简单描述一下依赖类的定义，具体实现参见开源，定义如下：

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) { }
    //根据前缀获取最大业务单号
    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单据列表组件，该组件是客户和供应商对账单的列表组件共用类，具体实现参见开源，部分代码如下：

namespace JxcLite.Client.Pages.Finance;

public class AccountList : BaseTablePage<JxAccountHead>
{
    private IFinanceService Service;
    //取得对账类型（客户、供应商），由具体对账单页面重写该类型
    protected virtual string Type { get; }
    
    protected override async Task OnPageInitAsync()
    {
        await base.OnPageInitAsync();
        Service = await CreateServiceAsync<IFinanceService>();//创建服务
        Table.FormType = typeof(AccountForm);//自定义表单类型
        Table.OnQuery = QueryAccountsAsync;  //查询方法
        //下面是设置列表栏位显示的模板
        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);
    //导出
    public async void Export() => await ExportDataAsync();
    
    private Task<PagingResult<JxAccountHead>> QueryAccountsAsync(PagingCriteria criteria)
    {
        //设置对账单类型查询条件
        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文件，具体实现参见开源，部分代码如下：

@inherits BaseForm<JxAccountHead>

<AccountHeadTypeForm Form="Model" ShowAction>
    <AntRow>
        <DataItem Span="8" Label="对账单号" Required>
            <AntInput Disabled @bind-Value="@context.AccountNo" />
        </DataItem>
        <DataItem Span="8" Label="单证状态">
            <KTag Text="@context.Status" />
        </DataItem>
        <DataItem Span="8" Label="对账日期" Required>
            <AntDatePicker @bind-Value="@context.AccountDate" />
        </DataItem>
    </AntRow>
    <AntRow>
        <DataItem Span="8" Label="商业伙伴" Required>
            <PartnerPicker Value="@context.Partner" AllowClear Type="@context.Type"
                           ValueChanged="e=>context.Partner=e[0].Name" />
        </DataItem>
        <DataItem Span="8" Label="业务日期" 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="发票号">
            <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. 业务单表格组件

再在JxcLite.Client项目Shared文件夹下面添加BillHeadTable.cs文件，该组件为对账单明细列表，具体实现参见开源，部分代码如下：

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文件，该组件为对账单弹窗表单组件，分表头信息和对账明细两个标签，代码如下：

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("对账明细", 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();
    }
}