@beisen/ocean-tree

Usage no npm install needed!

<script type="module">
  import beisenOceanTree from 'https://cdn.skypack.dev/@beisen/ocean-tree';
</script>

README

概述

Ocean PC端组织机构选择基础交互组件

使用方式

    npm install --save @beisen/ocean-tree

API说明

参数 说明 类型 默认值 必须

| visible | 是否显示 | boolean | false | Yes | | defaultData | 默认选中的值 | Array [id: 组织id, name: 组织名称] | 无 | Yes | | getDataUrl | 数据常量请求链接 | String | "/Recruitment/Job/GetJobListQ?r=e122e476-b663-4c6f-bcf7-255f3492e41e&u=114079111&sig=0h4CqYEdJis9rmKn0y2szickJN8%3d&selectedTenantId=100102" | No | | requestHost | 当前请求的location.origin | String | "https://biset.italent.link" | No | | showStop | 显示 停用 | boolean | true | No | | searchDefaultData | 默认搜索请求的body体 | Object | 无 | No | | onSubmit | 确定方法 | Function | 无 | Yes | | translation | 多语言数据结构 | 中文 | 无 | no | | fetchDataPromise |用于外部处理需要渲染的数据, 忽略getDataUrl，requestHost | () => Promise| 无 | no | | isSingleSelect |是否单选模式 | boolean | false | no | | showSelectAll |是否显示全选 | boolean | true | no | | showContainSub |是否显示包含下级 | boolean | true | no | | getPopupContainer | 容器| Function| null | no |

多语言数据处理

let translation = {
        cancelText: "取消",
        submitText: "确定",
        emptyText: "暂无搜索结果～",
        showStatusText: "显示停用",
        hideStatusText: "隐藏停用",
        searchText: "搜索",
        selectAllText: "全选",
        includeChildrenText: '包含下级',
    };

onSubmit 回调

onSubmit(data, includeChildren) {
    console.log(data);
}
//output
[{id: "100000",name: "工程师"}]

数据格式注意

  • getDataUrl 现在是纯中文版本，如果是其他语言版本需要自己拼接链接，数据返回的内容格式如下：
{
    code: '200',
    data: [{
        id: "1001",
        name: "北京市"
        children: []
    }]
}

Change log

  • 2.0.8
    由非受控修改为受控，去掉validate，validate