(本组件开发,基于 frontend-ui-startkit 脚手架)
dependencies 为发布依赖包集合
:::dependencies { "dependencies": { "antd": "~3.26.13", "classnames": "^2.2.6" }, "devDependencies": {} } :::dependencies
@ewell/OrganizationCascader
@ewell/OrganizationCascader
护理管理组织架构筛选,有多选、单选、排班定制(单选)三个模式
代码演示
:::护理管理组织架构筛选演示代码块。
import { Multiple, Single } from "@ewell/OrganizationCascader";
const loadData = () => {
return new Promise(async (resolve) => {
const { status, object: data } = await request({
url:
"http://server-sit.317hu.com/api/nurse-staff-web/nurseUnit/read/queryUnitTreeNode/privilege",
options: {
method: "GET",
},
});
if (status === 1) {
resolve({
data: data.children || [],
});
} else {
resolve({ data: [] });
}
});
};
return (
<>
<Multiple
style={{ width: 200 }}
type="filter"
filterContent="大科"
load={loadData}
/>
<Single
style={{ width: 200 }}
load={this.loadData}
// defaultActiveFirstOption={true}
defaultValue={"915bca0503e34d6f8e7311e123bfdf1a"}
/>
<Single
style={{ width: 200 }}
load={loadData}
type="scheduleCustom"
value={this.state.scheduleCustom}
onChange={({ id }) => {
const list = [...this.state.scheduleCustom];
list.push(id);
this.setState({
scheduleCustom: list,
});
}}
/>
</>
);
:::
API
共同的 API
以下 API 为 Single,Multiple 共享的 API
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
dataSource | 数据源 | Data[] | 无 | |
disabled | 禁用 | boolean | false | |
allowClear | 是否支持清除 | boolean | false | |
column | 展示几列 | number | 3 | |
disabledEmptyChildren | 没有子级的是否需要 disabled,跟 column 搭配使用 | boolean | true | |
expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | hover | |
hideOnSingleBranch | 组织架构只有一个院区时是否隐藏院区显示 | boolean | false | |
load | 获取数据源的方法,返回 promise | () => any | 无 | |
onChange | 选择完成后的回调 | (value) => void | 无 |
Single
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
defaultValue | 默认选中的项 | string | 无 | |
value | 指定选中项,type 为 scheduleCustom 传入数组 | string / string[] | 无 | |
type | 定制化展示,可选 'scheduleCustom' | string | 无 | |
defaultActiveFirstOption | 是否默认选中第一个选项 | boolean | false | |
changeOnSelect | 当此项为 true 时,点选每级菜单选项值都会发生变化 | boolean | false | |
showLastOption | 是否只显示选中的最后一项 | boolean | true | |
showCheckAll | 是否在起始增加一项全院 | boolean | false | 0.0.2 |
checkAllContent | 增加的全院的文字 | string | 全院 | 0.0.2 |
Multiple
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
defaultValue | 默认选中的项 | Values[] | 无 | |
value | 指定选中项 | Values[] | 无 | |
fixedHeight | 是否固定高度,一行显示,并且没有搜索功能 | boolean | false | |
type | 定制化展示,可选 'filter' | string | 无 | |
filterContent | type 为'filter'展示的文字 | string | 病区 |
dataSource
interface DataSourceProps {
bizId: string;
bizName: string;
children?: Data[];
}
Multiple Value
interface ValueProps {
id: string;
name: string;
}