1.0.10 • Published 6 years ago
ux-m-platform-userselector v1.0.10
组件使用、扩展文档
UserSelect人员选择(包含平台数据源),基于基础组件@beisen-cmps/ux-m-platform-user-select
let config = { //平台元数据
"cmp_id": "6845b532-9634-4831-9307-13b3d3307d02",
"cmp_name": "UserID",
"cmp_type": "BC_UserSelect",
"cmp_label": "人员",
"cmp_data": {
IsShowHeadPic: true,
cmp_state: "create",
cmp_status: "editable",
createdisplaystate: "editable",
dataType: "Text",
datasourcename: "BCStaffDataSource",
editdisplaystate: "editable",
field_name: "SharedId",
icon_name: "",
promptmessage: null,
refreshParams: null,
required: false,
showdisplaystate: "readonly",
singleSelect: false,
title: "共享人",
getSearchUserUrl:"",
datasourceurl: '{"getStaffUrl" : {"url": "/AppFSystemMRest/100000/UserControl/GetSubUsersByLevel?lv=2&isAuthorised=false&isWithoutDisabled=true&isOnlyStaff=true","method": "GET" }, "getDeptUrl" : {"url": "/AppFSystemMRest/100000/UserControl/GetSubDeptByLevel?departmentId=-2&level=10&isAuthorised=false&isWithoutDisabled=true","method": "GET" }, "getDeptUserUrl" : {"url": "/AppFSystemMRest/100000/UserControl/GetUsersByDeptId?department_id={department_id}&isAuthorised=false&isWithoutDisabled=true&isOnlyStaff=true","method": "GET" }, "getSearchUserUrl" : {"url": "/AppFSystemMRest/100000/UserControl/GetUsersByKeyword?filters={filters}&isAuthorised=false&isWithoutDisabled=true&isOnlyStaff=true","method": "GET" }}',
},
cmp_id: "d47a43e5-2751-4f16-81e5-be6007bbb98c",
cmp_label: "共享人",
cmp_name: "TargetManagementMObjective_SharedId",
cmp_type: "BC_UserSelect",
promptmessage: null,
search_data: null,
validators: {},
biz_data: {text: ""},
text: "",
}
const config1 = { //默认请求接口信息
useAddBtn:false, //两种模式
titaHost: "//cloud.italent.link",
tenantId: 100102,
userId: 112063045,
application: "TargetManagement",
cloudHost: "//cloud.italent.link" || '',// || '//cloud.italent.link',
recentContactsUrl:"",
actions:{
showTip:function(tipInfo){
console.log(tipInfo)
}
},
onChange: this.handleSignStaffChange,
avatars: this.state.assignes && this.state.assignes.avatars,
text: this.state.assignes && this.state.assignes.text,
value: this.state.assignes && this.state.assignes.value,
}
return <div>
<DefaultComponent {...config} {...config1}/>
</div>
用于人员选择
UI规则
分为导航栏、搜索区、选人区。
选人区域,点击一个人员后,展示在搜索区中的已选人员区域。
已选人员在搜索区展示,点击已选人员头像,删除该人。
在搜索框内,如没有输入搜索内容,点击删除,最后一个人置灰,连续点击两次删除键,删除该人。
如果当前有置灰的人,此时在列表中选择了一个新的人员,则置灰取消。
点击搜索区域搜索人员,输入后显示搜索结果,搜索内容高亮,选择后在搜索区展示已选人员。
人员单选,选择一个人员后,退出人员选择页面。
人员多选,选择人员后,点击确定,退出人员选择页面。
导航栏区域,人员多选,展示返回、清空、确定,三个按钮,人员单选,展示返回、清空两个按钮。点击按钮后退出人员选择页面
搜索图标:选择区域有人时、搜索框获取焦点时均不显示图标
API
TextArea props
name | description | type | default |
---|---|---|---|
cls | 自定义container css | String | '' |
style | 自定义container style | Object | {} |
title | 标题 | String | '' |
singleSelect | 是否为单选 | Boolean | |
pop_type | 弹层类型searchItem为筛选项 | String | |
usersList | 人员列表 | Array | [] |
defaultUsers | 默认人员列表 | Array | [] |
selectedDatas | 当前表单中已选中的人员 | Array | [] |
fetchDefaultUsers | 请求默认人员列表回调 | Function | |
fetchSearchUsers | 搜索人员时回调 | Function(value) | |
handleCancel | 点击取消回调 | Function | |
handleConfirm | 点击确定回调 | Function(event, data) | |
onClearValue | 点击清空回调 | Function | |