❤
npm
Sign UpSign In

user-picker

2.0.17 • Public • Published

User Picker 选人组件

User Picker Components for Vue 2.0

Installation

# 正式版： 
npm install user-picker  --save
 
# 测试版 
npm install user-picker@2.0.10-beta.0

Usage

Import all components.

1.依赖 View-Design

2.依赖 Element UI 的 tree 组件

import Vue from 'vue';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);
 
import { Tree } from 'element-ui';
Vue.component(Tree.name, Tree);
 
## 引入 UserPicker
import UserPicker from 'user-picker';
Vue.use(UserPicker);
 


引入 view-design，参考其官网

【重要】(查看文档 view-design)

引入 element-ui 按需加载配置，参考其官网

【重要】(查看文档 element-ui)




CDN 待实现

html cdn引入方式 TODO

Documentation 选人组件 UserPicker

可配置参数列表 UserPicker

字段 说明 类型 默认值 示例
load-data 加载tree的方法 Function - -
search-data 搜索加载tree的方法 Function - -
required 是否必填 Boolean false -
disabled 是否可编辑 Boolean true -
preload 是否开启预加载 Boolean false -
auto-params 非首次加载tree 自动带上的点击的当前节点的数据 Array ['Id', 'SelectNodeType'] ["id","type"]
static-params 每次加载tree需要带上的静态参数 json - {}
search-params 每次搜索需要带上的静态参数 json - {}
limit 限制可选择的个数 String 不限 -
placeholder 搜索框的默认文案 String '请输入关键字搜索' -
treeRangeTitle 选择范围的title String '选择范围' -
treeRangeList 选择范围，树顶部的筛选范围 Array [] 见下面treeRangeList
treeRangeValue 选择范围，默认选中的value String '' '2,4'
upkClassName 选人组件弹框的自定义样式类 Array [] ['custom-upk']
plusClassName 加号的自定义样式类 Array [] ['custom-style']

角色筛选数据格式 treeRangeList

[
    {
        label: '局校',
        value: 1,
        isChecked: false
    },
    {
        label: '教职工',
        value: 2,
        isChecked: true
    },
    {
        label: '学生',
        value: 3,
        isChecked: false
    },
    {
        label: '家长',
        value: 4,
        isChecked: false
    }
]

组件提供方法

方法名 说明 参数 返回值 -
userPickerInit 初始化选人组件，自定义slot场景下，点击加号时调用，this.$refs.TODORef.userPickerInit(); [] - -
buildParams 搜索时需要调用此方法获取ajax参数，this.$refs.TODORef.buildParams(); [] - -

组件提供事件

事件名 说明 参数 返回值 -
on-user-picker-change 选人结果变化事件 - arr 监听此事件可以实时获取选人结果
on-user-picker-del 页面选人框里删除事件 - arr -
on-click-ok modal点击确定事件 - arr -

接口上传参数

示例

参数 值 说明
Id - -
CheckType - -
DepartmentType - -
ShowUserType - -
IsIncludeBranch - -
IsIncludeOfficeSchool - -
SelectNodeType - -
ShowDepartmentByUser - -
Key - -
IsList - -

...

接口最少返回字段(重要)

字段名 值 说明
Name 张三 显示文本
QId 1 节点唯一标识QID
Disabled true true表示不可选，false表示可选
Icon ios-folder 需要显示的icon, 就是iview icon的type
IsLeaf true 是否是叶子节点，true是叶子，false非叶子节点
SearchName 张三 搜索时返回，前端用于显示的name

说明：以上字段都需要返回 。

返回数据示例

{
    "ErrorCode": "OK",
    "RequestId": "1",
    "Data": {
        "Nodes": [
            {
                "Id": 1117748,
                "OrgId": 100096,
                "Name": "测试教育局",
                "ParentId": 0,
                "Children": [],
                "Path": [],
                "PathString": "",
                "SearchName": "测试<em>教育</em>局",
                "Disabled": true,
                "IsLeaf": false,
                "Icon": "ios-folder",
                "QId": "BASIC_100096_1117748",
                "Parents": [],
                "Extra": "",
                "SelectNodeType": 1
            }
        ]
    }
}

业务项目引用完整示例 --- start ---

  1. 入口文件main.js引入相关库
import Vue from 'vue';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);
 
import { Tree } from 'element-ui';
Vue.component(Tree.name, Tree);
 
import UserPicker from 'user-picker';
Vue.use(UserPicker);
 
  1. vue文件引入UserPicker组件
<template>
    <Form
        :label-width="120"
        ref="editAritcleForm"
        :model="articleModel"
        class="pb200 pt10"
        :rules="articleRulesConfig">
    
        <!-- 学校发消息选人  -->
        <FormItem label="发送给" prop="range" required v-if="bgType != 3">
            <UserPicker
                :load-data="loadData"
                :search-data="searchData"
                :static-params="staticParams"
                tree-range-title="通知范围"
                :tree-range-list="treeRangeList"
                :tree-range-value="articleModel.notifyRange"
                placeholder="搜索部门或者人员"
                ref="XXXRef"
                :disabled="status == '1'"
                @on-click-ok="userPickerOk"
                v-model="articleModel.range" />
        </FormItem>
        <!-- 上级单位选人 -->
        <FormItem label="发送给" prop="range" required v-if="bgType == 3" >
            <UserPicker
                :load-data="loadData"
                :search-data="searchData"
                :static-params="staticParams"
                tree-range-title="通知范围"
                :tree-range-list="treeRangeList"
                :tree-range-value="articleModel.notifyRange"
                placeholder="搜索部门或者人员"
                ref="XXXRef"
                :disabled="status == '1'"
                @on-click-ok="userPickerOk"
                v-model="articleModel.range" />
        </FormItem>
        <FormItem label="标题" prop="title">
            <Input v-model="articleModel.title" :disabled="id!='0' && status == '1'"  :maxlength="50" placeholder="请输入标题" />
        </FormItem>
        <FormItem label="正文" prop="content">
            <quill-editor
                class="quill-editor"
                ref="articleQuillEditor"
                v-model.trim="articleModel.content">
            </quill-editor>
        </FormItem>
        <FormItem label="作者" prop="Author" v-if="bgType == 3">
            <Input style="width:300px;" v-model="articleModel.Author" :disabled="id!='0' && status == '1'"  :maxlength="20" placeholder="请输入作者名称" />
        </FormItem>
    </Form>
</template>
<script>
export default {
    mixins: [],
    data() {
        return {
            status: this.$route.params.status || 0,
            // bgType 3 上级单位
            bgType: this.$route.params.bgType || 3,
            id: this.$route.params.id || 0,
            articleModel: {
                name: '',
                range: [],
                title: '',
                content: '',
                Author: '',
                notifyRange: ''
            },
            articleRulesConfig: {
                // 数组需要自定义校验方式
                range: [
                    {
                        validator: (rules, value, callback) => {
                            if (value.length == 0) {
                                return callback(new Error('请选择接收通知的人群'));
                            } else {
                                return callback();
                            }
                        }
                    }
                ],
                title: [
                    {
                        required: true,
                        message: '请填写标题'
                    }
                ],
                content: [
                    {
                        required: true,
                        message: '请填写正文'
                    }
                ]
            },
            // placeholder: '选择通知接收人员',
            staticParams: {
                // IsDepartmentTypeNode: true,
                DepartmentType: '1,2,4,5,6,7,8,9,10',
                CheckType: '0',
                ShowUserType: '3',
                // 如果是上级单位，此字段传true的话会拉管理的学校列表和下属上级单位列表
                IsIncludeOfficeSchool: true
            },
            // treeRangeText: '通知范围',
            // 上级单位才有筛选角色
            treeRangeList: [
                // 暂时没有这个选项，等后台支持了，放开即可
                // {
                //     label: '局内职工',
                //     value: 1,
                //     isChecked: true
                // },
                {
                    label: '教师',
                    value: 2,
                    isChecked: true
                },
                // {
                //     label: '学生',
                //     value: 3,
                //     isChecked: false
                // },
                {
                    label: '家长',
                    value: 4,
                    isChecked: false
                }
            ]
        };
    },
    methods: {
        loadData (item, resolve) {
            this.getTreeData(item, resolve);
        },
        searchData (item, resolve) {
            this.getTreeData(item, resolve);
        },
        async getTreeData (item, resolve) {
            let resp = await app.get('https:// TODO', this.$refs.XXXRef.buildParams(item));
            if (resp.ErrorCode === app.global.ErrorCode) {
                let nodes = resp.Data.Nodes;
                resolve(nodes);
            } else {
                resolve([], resp.ErrorMsg);
            }
        },
        userPickerOk (res) {
            this.articleModel.notifyRange = res.treeRangeValue;
        }
    },
    mounted() {
    },
    components: {
    }
};
</script>

业务项目引用完整示例 --- end ---



附：

自定义button，调起选人组件示例
模板：
<UserPicker
    :load-data="loadData"
    :search-data="searchData"
    ref="XXXRef"
    @on-click-ok="userPickerOk"
    v-model="articleModel.range" >
    <Button type="primary" @click="initUserPicker">自定义选人组件按钮</Button>
< /UserPicker>
事件：
methods: {
    initUserPicker () {
        // 调起选人组件，注意Ref要对应
        this.$refs.XXXRef.userPickerInit();
    },
    loadData (item, resolve) {
        this.getTreeData(item, resolve);
    },
    searchData (item, resolve) {
        this.getTreeData(item, resolve);
    },
    async getTreeData (item, resolve) {
        let resp = await app.get('https:// TODO', this.$refs.XXXRef.buildParams(item));
        if (resp.ErrorCode === app.global.ErrorCode) {
            let nodes = resp.Data.Nodes;
            resolve(nodes);
        } else {
            resolve([], resp.ErrorMsg);
        }
    },
    userPickerOk (res) {
        // 获取到选人结果
        this.articleModel.notifyRange = res.treeRangeValue;
    }
}

Contribution

Please make sure to read the [Contributing Guide] before making a pull request.

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i user-picker

Weekly Downloads

4

Version

2.0.17

License

MIT

Unpacked Size

2.18 MB

Total Files

85

Last publish

Collaborators

  • csig_edu
Try on RunKit
Report malware