StaffPerformance/wispro.sp.web/Pages/Organization/Department.razor

@page "/Department"

<PageContainer>
    <Breadcrumb>
        <Breadcrumb>
            <BreadcrumbItem>
                <a href="/Home"><Icon Type="home"></Icon></a>
            </BreadcrumbItem>
            <BreadcrumbItem>
                <Icon Type="setting"></Icon><span>基本信息管理</span>
            </BreadcrumbItem>
            <BreadcrumbItem>
                <Icon Type="user"></Icon><span>部门管理</span>
            </BreadcrumbItem>
        </Breadcrumb>
    </Breadcrumb>
    <Content>
        @*<Button Type="primary" Icon="folder-add" OnClick="()=>AddNew(null)" Style="float:right">添加</Button>*@

    </Content>
    <ChildContent>
        <AntDesign.Layout>
            <Sider Style="background-color:white" Width="300">
                <div style="width:fit-content">
                    @if (departments != null)
                    {
                        <Tree @ref="tree" Draggable BlockNode DefaultExpandParent AutoExpandParent
                              DataSource="GetChildren(null)"
                              TitleExpression="x => x.DataItem.Name"
                              ChildrenExpression="x => GetChildren(x.DataItem)"
                              IsLeafExpression="x => GetChildren(x.DataItem)?.Count == 0"
                              KeyExpression="x => x.DataItem.Id.ToString()"
                              TItem="wispro.sp.entity.Department" 
                              OnClick="OnSelect"
                              Style="width:250px;">
                            <TitleTemplate>
                                <wispro.sp.web.Components.RightMenuTreeNode 
                                                Department="@context.DataItem"
                                                OnCreate="()=>AddNew(context.DataItem)"
                                                OnEdit="()=>EditDept(context.DataItem)"
                                                OnDelete="() => DeleteDept(context.DataItem)" />

                            </TitleTemplate>
                        </Tree>
                    }
                    else
                    {
                        <Spin />
                    }
                </div>
            </Sider>
            <Content>
                <AntDesign.Layout Style=" padding: 0 24px 24px;">
                    <Content>
                        <div><Button Type="primary" Icon="user-add" OnClick="()=>AddNewUser()" Style="float:right">添加人员</Button></div>
                        @if (_loading)
                        {
                            <center><Spin /></center>
                        }
                        else
                        {

                            <AntDesign.Table @ref="table" @bind-PageIndex="_pageIndex" @bind-PageSize="_pageSize"
                                             TItem="Staff"
                                             Loading="_loading"
                                             DataSource="@forecasts"
                                             Total="_total"
                                             @bind-SelectedRows="selectedRows"
                                             OnRow="OnRow"
                                             Bordered=@true
                                             Size=@TableSize.Middle>
                                <ChildContent>
                                    <Selection Key="@(context.Name)" />
                                    <AntDesign.Column Title="序号" TData="int">
                                        @serialNumber(_pageIndex, _pageSize, context.Name)
                                    </AntDesign.Column>
                                    <AntDesign.Column Title="姓名" @bind-Field="@context.Name" Sortable Filterable />
                                    <AntDesign.Column Title="入职日期" @bind-Field="@context.EntyDate" Format="yyyy-MM-dd" Sortable Filterable />
                                    <AntDesign.Column Title="部门" @bind-Field="@context.Department" Sortable Filterable />
                                    <AntDesign.Column Title="工作地" Field="@context.WorkPlace" Sortable Filterable />

                                    <AntDesign.Column Title="备注" @bind-Field="@context.Memo" Sortable Filterable />
                                    <ActionColumn>
                                        <Space>
                                            <SpaceItem><Button Type="@ButtonType.Text" OnClick="()=>Edit(context)">编辑</Button></SpaceItem>
                                            <SpaceItem><Button Danger Type="@ButtonType.Text" OnClick="()=>Delete(context)">删除</Button></SpaceItem>
                                        </Space>
                                    </ActionColumn>
                                </ChildContent>
                                <PaginationTemplate>
                                    <div style="display: flex; align-items: center">
                                        <Pagination Class="my-custom-pagination"
                                                    Total="@_total"
                                                    PageSize="@_pageSize"
                                                    Current="@_pageIndex"
                                                    ShowSizeChanger="@true"
                                                    OnChange="HandlePageChange" />
                                    </div>
                                </PaginationTemplate>
                            </AntDesign.Table>

                        }
                    </Content>
                </AntDesign.Layout>
            </Content>
        </AntDesign.Layout>
    </ChildContent>
</PageContainer>

<Modal Title="部门添加/修改"
       Visible="@newModal"
       OnOk="@NewOk"
       OnCancel="@NewCancel">

    <Form Model="_editDepartment" LabelColSpan="6"
          WrapperColSpan="16">
        <FormItem Label="名称">
            <Input @bind-Value="@context.Name" />
        </FormItem>
        <FormItem Label="备注">
            <TextArea @bind-Value="@context.Memo" MinRows="4" />
        </FormItem>
    </Form>
</Modal>

<Modal Title="职员添加/修改"
       Visible="@_newUserModal"
       OnOk="@HandleOk"
       OnCancel="@HandleCancel">
    
    <Form Model="EditingStaff" LabelColSpan="6"
          WrapperColSpan="16">
        <FormItem Label="姓名">
            <Input @bind-Value="@context.Name" />
        </FormItem>
        <FormItem Label="岗位状态">
            <Input @bind-Value="@context.Status" />
        </FormItem>

        <FormItem Label="是否计算绩效">
            <Switch @bind-Value="@context.IsCalPerformsnce" />
        </FormItem>

        <FormItem Label="工程师等级">
            <wispro.sp.web.Components.UserGradeSelect @bind-StaffGradeId="@EditingStaff.StaffGradeId" />
        </FormItem>

        <FormItem Label="职位">
            <Select DataSource="@_allPositions"
                    DefaultValue="@PositionId"
                    LabelName="@nameof(wispro.sp.entity.Position.Name)"
                    ValueName="@nameof(wispro.sp.entity.Position.Id)"
                    Style="width: 200px"
                    Placeholder="请选择一个职位"
                    IgnoreItemChanges="false"
                    AllowClear
                    OnClearSelected="()=>OnSelectedItemChangedHandler(null)"
                    OnSelectedItemChanged="OnSelectedItemChangedHandler">
            </Select>
        </FormItem>

        <FormItem Label="工作地">
            <Select Mode="default"
                    DataSource="@_places"
                    @bind-Value="@context.WorkPlace">
            </Select>
        </FormItem>

        <FormItem Label="入职时间">
            <DatePicker @bind-Value="@context.EntyDate" />
        </FormItem>

        <FormItem Label="备注">
            <TextArea @bind-Value="@context.Memo" MinRows="4" />
        </FormItem>

        @if (_isAdd)
        {
            <FormItem Label="账号">
                <Input @bind-Value="@context.Account" />
            </FormItem>

            <FormItem Label="账号">
                <Input @bind-Value="@context.Password" Type="password" />
            </FormItem>
        }

    </Form>

</Modal>

<style>
    .my-custom-pagination {
        margin: 15px 0;
    }

        .my-custom-pagination .ant-pagination-item,
        .my-custom-pagination .ant-pagination-item-link {
            border-radius: 100%;
        }
</style>