🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[warning] 使用前请务必在js页面引入**selector.js** #### 用户选择组件 >[info] selectUser: function (callback, options) {} * callback:确认选择后的回调函数 * options:初始化参数 * checked:已选择的人员 * max:可选人数的最大值 * selectMode:选择模式 radio-单选 checkbox-多选 * startOrgId:选择的起始组织机构节点编码 * checkLevel:可以选择的组织机构节点类型(此处配置可选择单位及科室) * title:弹出选择框标题 ```php { "checked":[ { UserId:"FDdQgC-CpiLcw-ETYFwo-mgJEsb", nickname: "彭杨" }, { UserId:"iqzgaO-IZULaJ-MmpCPo-ZrKBTu", nickname: "秦雪芳" } ], "max": 99999, "startOrgId":'HBDBKJ', "checkLevel":"2,3" } ``` >[success]回调函数 选择后的回调函数为二维数组,其格式如下: ```php [{ "avatar":"http://xxxx/bizmail/aULrLTrj5KHfQrSOOjPwQxsmoCun4L4UicwdWPcNTsvCnbPLFFsX3sg/0", "nickname":"管理员", "orgId":"80ee444d-b32b-475c-9ba3-cc4b80ecb53d", "orgName":"湖北道邦科技有限公司", "postId":"", "postName":''", "sysUserId":"768adc51-c0b0-4ccb-a8e6-d8300eb161b1", "userId":"1", "username":"admin" }] ``` >[success]示例代码 表单页面代码 ```html <div class="form-group"> <label class="col-xs-2 control-label">处理人:</label> <div class="col-xs-10"> <div class="input-group" style="width:80%;"> <input type="text" name="userNames" id="userNames" value="" class="form-control" data-rule="required" readonly="readonly" data-msg-required="请选择处理人" data-target="#err_user_ids" /> <input type="hidden" name="userIds" id="userIds" value="" /> <div class="input-group-btn"> <button type="button" name="btnUserSelector" id="btnUserSelector" class="btn btn-success"><i class="fa fa-user"></i> 选择</button> </div> </div> <div class="help-block" id="err_user_ids"></div> </div> </div> ``` js页面代码 ```js $('#btnUserSelector').on('click',function(){ var checkedUserId = $('#userIds').val(); var options= { selectMode: 'radio', title:'处理人', checked: checkedUserId }; Selector.api.selectUser(function (data) { if (data && data.length > 0) { var itemData = data[0]; $('#transferUserNames').val(itemData.nickname); $('#transferUserIds').val(itemData.sysUserId); }else{ $('#transferUserNames').val(''); $('#transferUserIds').val(''); } }, options); }); ```