user-picker v2.0.17

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

• https://xxx/lib/index.js
• https://xxx/lib/style.css

Documentation 选人组件 UserPicker

可配置参数列表 UserPicker

角色筛选数据格式 treeRangeList

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

组件提供方法

组件提供事件

接口上传参数

示例

...

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

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

返回数据示例

{
    "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);

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 ---

附：

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