People-selector NPM

选人组件Demo

线上地址

pc: https://static.educloud.qq.com/components/selector/demo/index.html#/pc?token=xxx \ h5: https://static.educloud.qq.com/components/selector/demo/index.html#/h5?token=xxx

依赖

框架：vue \ UI：element-ui、view-design（h5无需引入）\ 第三方库: axios \ 更换主题色：#0CB181

安装

npm 安装

npm i people-selector -S

使用（npm）

<template>
  <selector
    :options="selectorOptions"
    ref="selector"
    style="width: 720px">
  </selector>
</template>
<script>
  import 'people-selector/dist/1.1.3/index.css'; // 引入组件样式
  import { PeopleSelectorPc, PeopleSelectorH5, PeopleSelectorByRole } from 'people-selector';
  export default {
    components: {
      Selector: PeopleSelectorPc,
      SelectorH5: PeopleSelectorH5,
      SelectorByRole: PeopleSelectorByRole
    },
    data() {
      return {
        selectorOptions: {
          staticParams: {
            DepartmentType: '1,2,4,5,6,7,8',
            CheckType: 0,
            ShowUserType: 1,
            IsIncludeBranch: true
          },
          getTree(params, callback) {
            axios.get('https://iapi.campus.qq.com/campus/department/GetSelectTreeForAdmin', {
              params: params,
              headers: {
                Authorization: localStorage.getItem('token')
              }
            }).then(res => {
              callback(res.data);
            }).catch(err => {
              let res = err.response.data;
              callback(res);
            });
          }
        }
      }
    }
  }
</script>

CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="//static.educloud.qq.com/components/selector/element/style/index.css">
<link rel="stylesheet" type="text/css" href="//static.educloud.qq.com/components/selector/iview/style/iview.css">
<link rel="stylesheet" href="//static.educloud.qq.com/components/selector/dist/1.1.3/index.css">

<!-- 引入组件库 -->
<script src="//static.educloud.qq.com/vue/vue.js"></script>
<script src="//static.educloud.qq.com/components/selector/element/index.js"></script>
<script src="//static.educloud.qq.com/components/selector/iview/index.js"></script>
<script src="//static.educloud.qq.com/components/selector/dist/1.1.3/index.umd.min.js"></script>

使用（cdn）

<people-selector-pc
  ref="selector"
  style="width: 720px"
  :options="selectorOptions">
</people-selector-pc>
<script>
new window.Vue({
    el: '#app',
    data: {
      selectorOptions: {
        staticParams: {
          DepartmentType: '1,2,4,5,6,7,8',
          CheckType: 0,
          ShowUserType: 1,
          IsIncludeBranch: true
        },
        getTree(params, callback) {
          axios.get('https://iapi.campus.qq.com/campus/department/GetSelectTreeForAdmin', {
            params: params,
            headers: {
              Authorization: localStorage.getItem('token')
            }
          }).then(res => {
            callback(res.data);
          }).catch(err => {
            let res = err.response.data;
            callback(res);
          });
        }
      }
    }
  });
</script>

组件属性

options参数说明

参数	类型	示例	是否必填	默认值	说明
getTree	Function	见上图	是	否	应用侧获取组织架构接口
staticParams
staticParams.DepartmentType	String	1,2,3	是	否	组织架构类型 0学校 1学生 2教职工 4校友 5退休教师 6临时组 7虚拟组 8课程班
staticParams.CheckType	Integer	0	是	否	控制是否可勾选 0架构和用户均可勾选 1只用户可勾选 2只架构可勾选 3只班级可勾选
staticParams.ShowUserType	String	1	是	否	控制用户是否显示 0不显示用户 1显示架构用户 2班级节点用户显示老师 3班级节点用户显示家长 4班级节点用户都显示
staticParams.IsIncludeBranch	String	true	否	否	是否展示分校