树容器刷新节点

分栏布局及树容器交互

描述

树容器的基础实践，本文描述了以下场景

在树节点上操作成功后如何刷新父节点信息
在分栏结构下详情中操作后如何刷新树节点信息

基本布局

树容器 xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- 声明 pageId 用于查找原页面 -->
<View title="指标" pageId="TreeContainer" forModel="partner_IndicatorBO" name="指标" menuView="true" type="List" version="2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://trantor-docs-dev.app.terminus.io/static/v0.18.x/schema/base.xsd">
    <Tree key="TreeKey" model="partner_IndicatorBO" onSelect="onSelectedMethod" searchable="#{true}" depthLimit="4" parentField="parent">
        <Fields>
            <Field name="name"/>
        </Fields>
        <Actions>
            <!-- 创建一级节点按钮 -->
            <Action type="Create" targetView="createModalViewKey" openViewType="Dialog" openViewSize="s"/>
        </Actions>

        <RecordActions>
            <Action key="onSelectedMethod" openViewType="Columns" env="#{{id:this.record.id}}" targetView="partner_IndicatorBO_IndicatorDetail"/>
            <!-- 删除当前节点 -->
            <Action type="Delete" confirm="确认删除？" logicFunc="xxxxxx" after="#{afterDelete}"/>
            <!-- 创建子节点 -->
            <Action type="Create" targetView="createNodeView" label="创建子节点" openViewType="Dialog" />
        </RecordActions>
    </Tree>
</View>

树容器 ts

import {Controller} from '@terminus/nusi-sdk'

export default class extends Controller {

}

createNodeView 新建节点弹窗xml

<?xml version="1.0" encoding="UTF-8"?>
<View title="创建节点" forModel="partner_IndicatorBO" menuView="true" type="Form" version="2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://trantor-docs-dev.app.terminus.io/static/v0.18.x/schema/base.xsd">
    <Form model="modelKey">
        <Fields>
            <Field name="name"/>
            <Field name="othor"/>
        </Fields>
        <Actions>
            <Action type="Cancel" action="Close" />
            <!-- 创建后去刷新树节点 -->
            <Action type="Submit" logicFlow="flowKey" after="#{() => afterRefresh(pageRecord)}" label="提交"/>
        </Actions>
    </Form>
</View>

createNodeView 新建节点弹窗 ts

import {Controller} from '@terminus/nusi-sdk'

export default class extends Controller {
    afterRefresh = (node) => {
        const page = this.getSourceView('TreePage')
        // 新增刷新父节点的父节点
        page.getContainerByKey('TreeKey').refresh(node.parent?.id)
        // 关闭弹窗
        this.closePage()
    }
}

节点详情 xml

<?xml version="1.0" encoding="UTF-8"?>
<View title="创建节点" forModel="partner_IndicatorBO" menuView="true" type="Form" version="2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://trantor-docs-dev.app.terminus.io/static/v0.18.x/schema/base.xsd">
    <Detail model="modelKey">
        <Fields>
            <Field name="name"/>
            <Field name="othor"/>
        </Fields>
        <Actions>
            <!-- 创建下级节点按钮 -->
            <Action type="Create" targetView="createNodeView" record="#{pageRecord}" openViewType="Dialog" label="新建" />
            <!-- 删除当前节点 -->
            <Action type="Delete" logicFlow="flowKey" confirm="确认删除吗？" after="#{() => afterRefresh(pageRecord)}" label="删除"/>
            <!-- 更新操作，需要刷新当前详情页，以及刷新树节点 -->
            <Action logicFlow="flowKey" after="#{() => updateAndRefresh(pageRecord)}" label="更新状态"/>
            <!-- 弹窗后操作更新 -->
            <Action targetView="updateNodeModal" record="#{pageRecord}" openViewType="Dialog" label="更新信息"/>
        </Actions>
    </Detail>
</View>

节点详情 ts

import {Controller} from '@terminus/nusi-sdk'

export default class extends Controller {
    afterRefresh = (node) => {
        const page = this.getSourceView('TreePage')
        // 新增刷新父节点
        page.getContainerByKey('TreeKey').refresh(node.parent?.id)
    }

    updateAndRefresh = (node) => {
        const page = this.getSourceView('TreePage')
        // 新增刷新父节点
        page.getContainerByKey('TreeKey').refresh(node.parent?.id)
        // 关闭弹窗
        this.closePage()
    }
}

updateNodeModal 详情更新弹窗 xml

<?xml version="1.0" encoding="UTF-8"?>
<View title="更新节点弹窗" forModel="partner_IndicatorBO" menuView="true" type="Form" version="2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://trantor-docs-dev.app.terminus.io/static/v0.18.x/schema/base.xsd">
    <Form model="modelKey">
        <Fields>
            <Field name="name"/>
            <Field name="othor"/>
        </Fields>
        <Actions>
            <Action type="Cancel" action="Close" />
            <!-- 创建后去刷新树节点 -->
            <Action type="Submit" logicFlow="flowKey" after="#{() => updateAndRefresh(pageRecord)}" label="提交"/>
        </Actions>
    </Form>
</View>

createNodeView 详情更新弹窗 ts

import {Controller} from '@terminus/nusi-sdk'

export default class extends Controller {
    updateAndRefresh = (node) => {
        const page = this.getSourceView('TreePage')
        // 新增刷新父节点的父节点
        page.getContainerByKey('TreeKey').refresh(node.parent?.id)
        // 回退到详情页并更新
        this.goBack()
    }
}