V5产品文档

# 常规使用

使用ctpui2.0、ctpui3.0、ctpui4.0的页面可以使用这种方式调用选人组件

$.selectPeople({
    // 选人参数
    type:'selectPeople',
    panels:'Department,Post,Team,Node,BusinessDepartment',
    selectType:'Member,Node',
    maxSize:1,
    minSize:1,
    params : {
        // 已选数据回填
        value: "Member|12121,Department|2313",
        text:"树琦、信创中心"
    },
    callback:function(ret){
     // 选人确定回调
    }
})

使用完整示例代码

 {{code language="html"}}<%--
 Author shuqi
 Rev
 Date: 2022-03-09 22:46
 
 Copyright (C) 2022 Seeyon, Inc. All rights reserved.
 
 This software is the proprietary information of Seeyon, Inc.
 Use is subject to license terms.
 @company seeyon.com
 @since V5 V8.1SP1
 @author shuqi
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/jsp/common/common_header.jsp" %>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <meta name="renderer" content="webkit|ie-comp|ie-stand">
 <title>ctpui 选人测试代码</title>
</head>
<body>
</body>
<%@include file="/WEB-INF/jsp/common/common_footer.jsp" %>
<script>
$(function(){
 $.selectPeople({
 type:'selectPeople',//固定
 panels:'Department,Post,Team,Role',//定义显示的页签
 selectType:'Member,Department',//定义可以选择那些类型的数据
 params : {
 // 已选数据回填
 value: "Member|12121,Department|2313",
 text:"树琦、信创中心"
 },
 callback:function(ret){
 // 选人确定回调
 console.log(ret.text);//"树琦、信创中心"
 console.log(ret.value);//"Member|12121,Department|2313"
 }
 })
});
</script>
</html>

1.0.1 Comp组件调用

这种使用方式和上一种是一样，只是页面渲染、事件绑定有ctpui自动完成。同样如果你愿意也可以动态生成 input框，设置好属性并使用$("jQuerySelector").compThis();

简单示例如下:

<input
 type="text" 
 class="comp" //固定
 comp="type:'selectPeople',panels:'Department,Post,Team,Role',selectType:'Member,Department'" // 传入选人参
数
/>

动态组件示例：

$(function(){
 var $input = $("<input type='text' id='selectorgDemo1'/>");
 $input.addClass("comp");
 
 $input.attr("comp","type:'selectPeople',panels:'Department,Post,Team,Role',selectType:'Member,Department'");
 $("body").append($input);
 $input.compThis();
});

完整的页面示例：

<%--
 Author shuqi
 Rev
 Date: 2022-03-09 22:46
 
 Copyright (C) 2022 Seeyon, Inc. All rights reserved.
 
 This software is the proprietary information of Seeyon, Inc.
 Use is subject to license terms.
 @company seeyon.com
 @since V5 V8.1SP1
 @author shuqi
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
 <%@include file="/WEB-INF/jsp/common/common_header.jsp" %>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <meta name="renderer" content="webkit|ie-comp|ie-stand">
 <title>ctpui 选人测试代码</title>
</head>
<body>
<input
 type="text"
 class="comp"
 comp="type:'selectPeople',panels:'Department,Post,Team,Role',selectType:'Member,Department'"
/>
</body>
<%@include file="/WEB-INF/jsp/common/common_footer.jsp" %>
<script>
$(function(){
 var $input = $("<input type='text' id='selectorgDemo1'/>");
 $input.addClass("comp");
 
$input.attr("comp","type:'selectPeople',panels:'Department,Post,Team,Role',selectType:'Member,Department'");
 $("body").append($input);
 $input.compThis();
});
</script>
</html>

1.0.1 V3x框架使用

如果你的页面使用的是v3x老框架，同样也可以使用选人。PS:v3x属于过时的老页面，建议尽快改完新框架 1、引入v3x命名空间

<%@ taglib uri="http://v3x.seeyon.com/taglib/core" prefix="v3x"%>

2、申明选人组件 提供的参数不全，可以通过扩展参数的方式设置。

<v3x:selectPeople
 id="manager"
 showMe="true"
 panels="Department,Post,Level,Team"
 selectType="Department,Post,Level,Team"
 memberId=""
 departmentId=""
 postId=""
 levelId=""
 maxSize="1"
 minSize="1"
 selectNode4EdocWorkflow=""
 showAllAccount=""
 include=""
 originalElements="Member|123"
 jsFunction="setBulPeopleFields(elements,'managerUserIds','managerUserNames')"
 maxSize="50"
></v3x:selectPeople>

3、扩展参数

如果需要设置全部参数，可以添加全局变量： 参数名_组件Id = xxx_ 如 var onlyLoginAccount_manager=true

//支持的扩展参数
['accountId', 'departmentId', 'memberId', 'postId', 'levelId', 'elements', 'showOriginalElement', 
'excludeElements', 'isNeedCheckLevelScope', 'onlyLoginAccount', 'showAccountShortname', 
'showConcurrentMember', 'hiddenPostOfDepartment', 'hiddenRoleOfDepartment', 'hiddenMetadataOfDepartment', 
'onlyCurrentDepartment', 'showDeptPanelOfOutworker', 'unallowedSelectEmptyGroup', 'showTeamType', 
'hiddenOtherMemberOfTeam', 'hiddenAccountIds', 'isCanSelectGroupAccount', 'showAllOuterDepartment', 
'hiddenRootAccount', 'hiddenGroupLevel', 'showDepartmentsOfTree', 'showDepartmentsNoChildrenOfTree', 
'hiddenSaveAsTeam', 'hiddenMultipleRadio', 'showAdminTypes', 'includeElements', 'extParameters', 
'showSecondMember', 'isAllowContainsChildDept', 'isCheckInclusionRelations', 'showRecent', 
'notShowAccountRole']
//示例
var onlyLoginAccount_manager=true;

1.0.1 Vue场景使用

vue要使用选人需要引入： ${contextpath}/common/js/selectOrgSdk.js

selectOrgSdk.showSelectOrg({
 panels: 'Department,JoinOrganization',
 selectType: 'Member',
 minSize: 0,
 onlyLoginAccount: true,
 targetWindow: getA8Top(),
 params: {
 value: _selectRoleIds
 },
 callback: function(ret) {
 // 选人确定回调
 console.log(ret.text);//"树琦、信创中心"
 console.log(ret.value);//"Member|12121,Department|2313"
 }
});

1.0.1 Vjoin使用

$.SeeyonSelectPeople({
 panels: 'Department,JoinOrganization',
 selectType: 'Member',
 minSize: 0,
 onlyLoginAccount: true,
 targetWindow: getA8Top(),
 params: {
 value: _selectRoleIds
 },
 callback: function(ret) {
 $(thisDom).val(ret.text);
 $(thisDom).parent().children(":first").val(ret.value);
 }
});
  1. 选人界面参数

编撰人：yinyanting、admin

快速跳转

← 三员分立调试 →