Known框架實戰演練——進銷存財務管理

本文介紹如何實現進銷存管理系統的財務對賬模組，財務對賬模組包括供應商對賬和客戶對賬2個選單頁面。供應商和客戶對賬欄位相同，因此可共用一個頁面元件類。

• 專案程式碼：JxcLite
• 開源地址： https://gitee.com/known/JxcLite

1. 配置模組

執行專案，在【系統管理-模組管理】中配置如下模組選單，配置教程參考之前的教程。

一級模組	二級模組	程式碼	圖示	Url	描述
財務管理		Finance	property-safety
客戶對賬單	CustomerAccount	unordered-list	/fms/CustomerAccount	查詢和維護客戶對賬單資訊。
供應商對賬單	SupplierAccount	unordered-list	/fms/SupplierAccount	查詢和維護供應商對賬單資訊。

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();
    }
}