# user-picker

> A high quality components with Vue.js

Latest version **2.0.17** (published 2020-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install user-picker
pnpm add user-picker
yarn add user-picker
bun add user-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.17 |
| Published | 2020-08-27 |
| First published | 2020-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.9.1 |
| Dependencies | 13 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | Jonasli |
| Maintainers | csig_edu |
| Keywords | vue, vue.js, component, components, ui, framework |

## Links

- npm: https://www.npmjs.com/package/user-picker
- npm.io page: https://npm.io/package/user-picker

## Dependencies (13)

- [deepmerge](https://npm.io/package/deepmerge.md) ^2.2.1
- [popper.js](https://npm.io/package/popper.js.md) ^1.14.6
- [element-ui](https://npm.io/package/element-ui.md) ^2.13.1
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1
- [js-calendar](https://npm.io/package/js-calendar.md) ^1.2.3
- [view-design](https://npm.io/package/view-design.md) ^4.2.0
- [cos-js-sdk-v5](https://npm.io/package/cos-js-sdk-v5.md) ^0.5.26
- [async-validator](https://npm.io/package/async-validator.md) ^1.10.0
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1
- [v-click-outside-x](https://npm.io/package/v-click-outside-x.md) ^3.7.1
- [http-proxy-middleware](https://npm.io/package/http-proxy-middleware.md) ^0.19.1
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.25.0
- [element-resize-detector](https://npm.io/package/element-resize-detector.md) ^1.2.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.0.17 (latest) — 2020-08-27
- 2.0.16-beta.5 (beta) — 2020-08-25
- 2.0.16-beta.4 — 2020-08-18
- 2.0.16-beta.3 — 2020-08-17
- 2.0.16-beta.2 — 2020-08-17
- 2.0.16-beta.1 — 2020-08-14
- 2.0.16 — 2020-07-24
- 2.0.15 — 2020-07-20
- 2.0.14 — 2020-06-28
- 2.0.13 — 2020-06-23
- 2.0.12 — 2020-06-22
- 2.0.11 — 2020-06-19
- 2.0.10-beta.0 — 2020-06-19
- 2.0.10 — 2020-06-18
- 2.0.9 — 2020-06-18
- … 8 more at https://npm.io/package/user-picker/versions

## README

# User Picker 选人组件

> User Picker Components for **Vue 2.0**

<!-- - [Homepage](https://google.com) -->
<!-- - [Documentation](http://campus.pages.oa.com) -->



## Installation
```shell
# 正式版：
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 组件

```javascript
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);

```
<br />
<br />

## 引入 view-design，参考其官网
### 【重要】(查看文档 [view-design](https://www.iviewui.com/docs/guide/start))

## 引入 element-ui 按需加载配置，参考其官网
### 【重要】(查看文档 [element-ui](https://element.eleme.io/#/zh-CN/component/quickstart))
  
<br />
<br />
<br />

## CDN 待实现
### html cdn引入方式 TODO
- https://xxx/lib/index.js
- https://xxx/lib/style.css
<br />
<br />

# 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
``` json
[
    {
        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

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

## 返回数据示例

``` json
{
    "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引入相关库
```javascript
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);

```
2. 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 ---

<br>
<br>

## 附：

```
自定义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

---
_Source: https://npm.io/package/user-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._