user-picker

v2.0.17

Published

2 years ago

A high quality components with Vue.js

Downloads

0High
0Medium
0Low

csig_edu

vue vue.js component components ui framework

User Picker 选人组件

User Picker Components for Vue 2.0

Installation

# 正式版：
npm install user-picker  --save

# 测试版
npm install [email protected]

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

字段|说明|类型|默认值|示例 ---|---|---|---|--- 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 ---

入口文件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);

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