ux-m-platform-userselector

组件使用、扩展文档

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规则

1. 分为导航栏、搜索区、选人区。

2. 选人区域，点击一个人员后，展示在搜索区中的已选人员区域。

3. 已选人员在搜索区展示，点击已选人员头像，删除该人。

4. 在搜索框内，如没有输入搜索内容，点击删除，最后一个人置灰，连续点击两次删除键，删除该人。

5. 如果当前有置灰的人，此时在列表中选择了一个新的人员，则置灰取消。

6. 点击搜索区域搜索人员，输入后显示搜索结果，搜索内容高亮，选择后在搜索区展示已选人员。

7. 人员单选，选择一个人员后，退出人员选择页面。

8. 人员多选，选择人员后，点击确定，退出人员选择页面。

9. 导航栏区域，人员多选，展示返回、清空、确定，三个按钮，人员单选，展示返回、清空两个按钮。点击按钮后退出人员选择页面

10. 搜索图标：选择区域有人时、搜索框获取焦点时均不显示图标

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