bri-components 1.5.22 → 1.6.1

package/src/components/controls/senior/selectUsers/selectUsers.vue

@@ -1,712 +1,712 @@
-<template>
-    <!-- 编辑 -->
-    <div
-        v-if="canEdit"
-        class="selectUsers"
-    >
-        <bri-tooltip
-            :content="showVal"
-            :transfer="true"
-        >
-            <div @click="clickInput">
-                <slot>
-                    <dsh-control-input
-                        :class="commonClass"
-                        :value="curValShowList"
-                        :disabled="disabled"
-                        :heightAuto="isHeightAuto"
-                        :propsObj="selfPropsObj"
-                        @clickItem="clickItem"
-                        @deleteItem="clickDeleteItem"
-                        @clear="clickClear"
-                    ></dsh-control-input>
-                </slot>
-            </div>
-        </bri-tooltip>
-
-        <!-- 点击选中项后的自定义内容 -->
-        <dsh-render :render="itemTipRender"></dsh-render>
-
-        <!-- 搜索选择框 -->
-        <dsh-modal
-            v-if="modalInited"
-            class="selectUsers-modal"
-            v-model="showModal"
-            mode="custom"
-            :propsObj="modalPropsObj"
-            @cancel="clickCancel"
-        >
-            <div
-                v-if="showModalContent"
-                class="selectUsers-modal-wrap"
-            >
-                <!-- 上 -->
-                <div class="head">
-                    <!-- 左 -->
-                    <div class="head-left">
-                        <!-- 上 筛选 -->
-                        <div
-                            v-if="curDepart._key !== '_highSearch'"
-                            class="search"
-                        >
-                            <dsh-input
-                                :value="searchData"
-                                :propsObj="inputPropsObj"
-                                @inputChange="search"
-                            ></dsh-input>
-                        </div>
-
-                        <!-- 下 -->
-                        <div class="content">
-                            <!-- 左 部门 -->
-                            <depart-menu
-                                class="content-menu"
-                                :canEdit="false"
-                                :useIcon="false"
-                                :list="departShowList"
-                                @departClick="changeDepart"
-                            ></depart-menu>
-
-                            <!-- 右 部门对应的成员 -->
-                            <div class="content-users">
-                                <bri-loading v-if="loading" />
-                                <template v-else>
-                                    <!-- 有数据 -->
-                                    <div
-                                        v-if="userShowList.length"
-                                        class="content-users-list"
-                                    >
-                                        <!-- 上 全选 -->
-                                        <div
-                                            v-if="multipleMode"
-                                            class="content-users-list-check"
-                                        >
-                                            <Checkbox
-                                                :indeterminate="false"
-                                                :value="curCheckAll"
-                                                @click.prevent.native="clickCheckAll(curCheckAll)"
-                                            >全选</Checkbox>
-                                        </div>
-
-                                        <!-- 下 列表-->
-                                        <div class="content-users-list-selects">
-                                            <div
-                                                v-for="dataItem in userShowList"
-                                                :key="dataItem._key"
-                                                class="content-users-list-selects-item"
-                                            >
-                                                <Checkbox
-                                                    v-model="dataItem.checked"
-                                                    @on-change="changeSelect(dataItem)"
-                                                >
-                                                    {{ getShowName(dataItem) }}
-                                                </Checkbox>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <!-- 无数据 -->
-                                    <div
-                                        v-else
-                                        class="content-users-nodata"
-                                    >
-                                        <img
-                                            :src="$imageSrcMap.nodata"
-                                            alt="该部门暂无人员"
-                                        >
-                                        <div>
-                                            该部门暂无人员
-                                        </div>
-                                    </div>
-                                </template>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 中 图标 -->
-                    <div class="head-center">
-                        <Icon
-                            class="icon"
-                            type="ios-arrow-forward"
-                        />
-                    </div>
-
-                    <!-- 右 已选择项 -->
-                    <div class="head-right">
-                        <div class="list">
-                            <span
-                                v-for="(selectItem, selectIndex) in tmpValList"
-                                :key="selectIndex"
-                                class="list-item"
-                            >
-                                <span class="list-item-name">
-                                    {{ getShowName(selectItem) }}
-                                </span>
-
-                                <Icon
-                                    class="list-item-delete"
-                                    type="ios-close-circle"
-                                    @click="clickDeleteTmpItem(selectItem, selectIndex, tmpValList)"
-                                />
-                            </span>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- footer -->
-                <dsh-buttons
-                    class="footer"
-                    :list="$getOperationList(['canCancel', 'canConfirm'])"
-                    @click="$dispatchEvent($event)"
-                ></dsh-buttons>
-            </div>
-        </dsh-modal>
-    </div>
-
-    <!-- 查看 -->
-    <div
-        v-else
-        class="selectUsers-show"
-    >
-        <!-- 有值 -->
-        <template v-if="!$isEmptyData(curValShowList)">
-            <!-- 单元格查看 -->
-            <template v-if="isUnitShow">
-                <!-- 高度自由时 -->
-                <div
-                    v-if="isHeightAuto"
-                    :class="{
-                        ...commonClass,
-                        'selectUsers-show-auto': true,
-                        'selectUsers-show-unit': true
-                    }"
-                >
-                    <template v-for="item in curValShowList">
-                        <img
-                            :src="getAvatarUrl(item)"
-                            :key="item._key"
-                            class="selectUsers-show-unit-img"
-                        />
-                        <span
-                            :key="item._key + 'span'"
-                            class="selectUsers-show-unit-text"
-                        >
-                            {{ getShowName(item) }}
-                        </span>
-                    </template>
-                </div>
-
-                <!-- 高度不自由（不换行） -->
-                <bri-tooltip
-                    v-else
-                    :content="showVal"
-                    :transfer="true"
-                >
-                    <div :class="{
-                        ...commonClass,
-                        'selectUsers-show-ellipsis': true,
-                        'selectUsers-show-unit': true
-                    }">
-                        <template v-for="item in curValShowList">
-                            <img
-                                :src="getAvatarUrl(item)"
-                                :key="item._key"
-                                class="selectUsers-show-unit-img"
-                            />
-                            <span
-                                :key="item._key + 'span'"
-                                class="selectUsers-show-unit-text"
-                            >
-                                {{ getShowName(item) }}
-                            </span>
-                        </template>
-                    </div>
-                </bri-tooltip>
-            </template>
-
-            <!-- 表单查看 -->
-            <template v-else>
-                <!-- 高度自由时 -->
-                <dsh-tags
-                    v-if="isHeightAuto"
-                    :class="{
-                        ...commonClass,
-                        'selectUsers-show-auto': true
-                    }"
-                    itemClass="selectUsers-show-auto-tag"
-                    :list="curValShowList"
-                ></dsh-tags>
-
-                <!-- 高度不自由（不换行） -->
-                <bri-tooltip
-                    v-else
-                    :content="showVal"
-                    :transfer="true"
-                >
-                    <dsh-tags
-                        :class="{
-                            ...commonClass,
-                            'selectUsers-show-ellipsis': true
-                        }"
-                        itemClass="selectUsers-show-ellipsis-tag"
-                        :list="curValShowList"
-                    ></dsh-tags>
-                </bri-tooltip>
-            </template>
-        </template>
-
-        <!-- 无值 -->
-        <div
-            v-else
-            :class="commonClass"
-        >
-            {{ emptyShowVal }}
-        </div>
-    </div>
-</template>
-
-<script>
-    import userAndDepartMixin from "../../mixins/userAndDepartMixin.js";
-    import departMenu from "./departMenu.vue";
-
-    export default {
-        name: "selectUsers",
-        mixins: [
-            userAndDepartMixin
-        ],
-        components: {
-            departMenu
-        },
-        props: {},
-        data () {
-            return {
-                // 弹框
-                modalPropsObj: {
-                    title: "选择成员",
-                    showSlotClose: false,
-                    closable: true,
-                    class: "bri-modal-center"
-                },
-                inputPropsObj: {
-                    _name: "成员名称",
-                    _key: "name",
-                    _search: true,
-                    _clearable: false
-                },
-
-                curDepart: {
-                    _key: "",
-                    name: "全部",
-                    is_leaf: true,
-                    level: 1
-                },
-                highUserList: [
-                    {
-                        _key: "dyn_myself",
-                        realname: "当前用户"
-                    }
-                ],
-                userList: [],
-                highList: [
-                    {
-                        _key: "_highSearch",
-                        name: "高级选项",
-                        level: 1,
-                        is_leaf: true
-                    }
-                ],
-
-                imageResizeConfig: {
-                    m: "fixed",
-                    w: 18,
-                    h: 18
-                }
-            };
-        },
-        computed: {
-            selfBasePropsObj () {
-                return {
-                    _icon: this.propsObj._multiple === true ? "ios-people" : "ios-person"
-                };
-            },
-            isCompAdmin () {
-                return (JSON.parse(sessionStorage.getItem("userData")) || {}).isCompAdmin || this.selfPropsObj._isCompAdmin;
-            },
-
-            // 展示的部门
-            departShowList () {
-                return [
-                    ...(this.highSearch ? this.highList : []),
-                    {
-                        name: "全部",
-                        _key: "",
-                        level: 1,
-                        is_leaf: true
-                    },
-                    ...this.selfDepartList,
-                    ...(
-                        this.isCompAdmin
-                            ? [
-                                {
-                                    name: "离职人员",
-                                    _key: "_resign",
-                                    level: 1,
-                                    is_leaf: true
-                                }
-                            ]
-                            : []
-                    )
-                ];
-            },
-            allDepartShowKeys () {
-                const loop = (arr = []) => {
-                    return arr.reduce((totalList, item) => {
-                        return [
-                            ...totalList,
-                            item,
-                            ...loop(item.children)
-                        ];
-                    }, []);
-                };
-
-                return loop(this.departShowList).map(item => item._key);
-            },
-            userShowList () {
-                // 有部门过滤就只显示对应的部门，无过滤就涌全部用户（包含无部门用户）
-                let list = this.filterVals.length || this.cascaderVals.length
-                    ? this.userList.filter(item => this.allDepartShowKeys.includes(item.departmentKey))
-                    : this.userList;
-
-                list = this.curDepart._key === "_highSearch"
-                    ? this.highUserList
-                    : this.curDepart._key === "_resign"
-                        ? this.userList
-                        : !this.curDepart._key
-                            ? list
-                            : list.filter(item => item.departmentKey === this.curDepart._key);
-
-                return this.transformShowList(list, this.tmpValKeys);
-            },
-            userKeys () {
-                return this.userShowList.map(item => item._key);
-            },
-
-            curCheckAll () {
-                return this.userKeys.length && this.userKeys.every(userKey =>
-                    this.tmpValKeys.includes(userKey)
-                );
-            },
-            curValShowList () {
-                return this.curValList;
-            }
-        },
-        created () {},
-        methods: {
-            /* ---------- 弹框里 --------- */
-            // 选择部门
-            changeDepart (depart) {
-                if (this.curDepart._key !== depart._key) {
-                    if (depart._key === "_resign") {
-                        this.curDepart = depart;
-                        this.getListData();
-                    } else {
-                        if (this.curDepart._key === "_resign") {
-                            this.curDepart = depart;
-                            this.getListData();
-                        } else {
-                            this.curDepart = depart;
-                        }
-                    }
-                }
-            },
-            clickCheckAll (bool) {
-                this.tmpValList = bool
-                    ? this.tmpValList.filter(tmpItem => !this.userKeys.includes(tmpItem._key))
-                    : [
-                        ...this.tmpValList,
-                        ...this.userShowList.filter(dataItem => !this.tmpValKeys.includes(dataItem._key))
-                ];
-            },
-
-            /* ----------- 接口方法 ------------- */
-            // 获取显示名
-            getShowName (selectItem) {
-                return selectItem.realname || selectItem.name || selectItem.mobile;
-            },
-            // 获取头像
-            getAvatarUrl (selectItem) {
-                return selectItem.avatarurl
-                    ? this.$imageResize(selectItem.avatarurl, this.imageResizeConfig)
-                    : this.$imageSrcMap.system.boy;
-            },
-            getData () {
-                this.getDepartListData();
-                this.getListData();
-            },
-            getListData () {
-                this.loading = true;
-
-                this.$https({
-                    url: {
-                        module: "company",
-                        name: this.curDepart._key === "_resign" ? "userResign" : "userIndex"
-                    },
-                    params: {
-                        search: {
-                            realname: this.searchData.name
-                                ? {
-                                    $regex: `.*${this.$speciaWord(this.searchData.name)}.*`,
-                                    $options: "i"
-                                }
-                                : undefined
-                        },
-                        // department: this.curDepart._key,
-                        pagination: this.pagePropsObj
-                    },
-                    loadingName: "loading",
-                    callback: data => {
-                        this.loadinged = true;
-
-                        this.userList = data.list;
-                        this.total = data.total;
-                    }
-                });
-            },
-            getDepartListData () {
-                this.$https({
-                    url: {
-                        module: "company",
-                        name: "compDepartCascaderAll"
-                    },
-                    params: {
-                        searchString: this.propsObj.searchString
-                    },
-                    callback: data => {
-                        this.departList = data.list;
-                    }
-                });
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    @import url("../../control.less");
-
-    .selectUsers {
-        #control-show();
-
-        &-show {
-            &-auto,
-            &-ellipsis {
-                margin: 2px 0px;
-            }
-
-            &-unit {
-                &-img {
-                    width: 23px;
-                    height: 18px;
-                    padding-left: 5px;
-                    border-radius: 50%;
-                    vertical-align: middle;
-
-                    &:first-of-type {
-                        width: 18px;
-                        padding-left: 0px;
-                    }
-                }
-
-                &-text {
-                    vertical-align: middle;
-                }
-            }
-        }
-
-        // 提示框的
-        &-tip {
-            &-modal {
-                .wrap {
-                    width: 100%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-
-                    &-content {
-                        flex: 1;
-                        min-height: 0px;
-                        padding: 0px 12px;
-                        overflow: auto;
-                    }
-
-                    &-btns {
-                        margin: 10px;
-                        text-align: right;
-
-                        .ivu-btn {
-                            font-size: 16px;
-                            font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
-                            font-weight: 600;
-                            border-radius: 4px;
-                        }
-                    }
-                }
-            }
-        }
-
-        // 弹框部分
-        &-modal {
-            .ivu-modal {
-                width: 40%!important;
-                min-width: 900px!important;
-                height: 60%;
-                min-height: 600px;
-            }
-
-            &-wrap {
-                width: 100%;
-                height: 100%;
-                .dsh-flex-col-start-stretch();
-
-                .head {
-                    width: 100%;
-                    flex: 1;
-                    min-height: 100px;
-                    .dsh-flex-row-start-stretch();
-
-                    &-left {
-                        flex: 2;
-                        min-width: 300px;
-                        border: 1px solid #E5E5E5;
-                        background: @white;
-                        overflow-y: auto;
-
-                        .search {
-                            padding: 10px 20px;
-                        }
-
-                        .content {
-                            display: flex;
-                            height: calc(100% - 52px);
-                            border-top: 1px solid #E5E5E5;
-
-                            &-menu {
-                                flex: 4;
-                                height: 100%;
-                                overflow: auto;
-                            }
-
-                            &-users {
-                                flex: 3;
-                                border-left: 1px solid #E5E5E5;
-                                position: relative;
-
-                                .ivu-checkbox-checked .ivu-checkbox-inner {
-                                    border-color: @themeColor;
-                                    background-color: @themeColor;
-                                }
-
-                                &-list {
-                                    height: 100%;
-                                    display: flex;
-                                    flex-direction: column;
-
-                                    &-check {
-                                        height: 40px;
-                                        line-height: 40px;
-                                        border-bottom: 1px solid #E5E5E5;
-                                        padding-left: 15px;
-                                    }
-
-                                    &-selects {
-                                        flex: 1;
-                                        overflow: auto;
-                                        padding: 15px;
-
-                                        &-item {
-                                            margin-bottom: 5px;
-                                        }
-                                    }
-                                }
-
-                                &-nodata {
-                                    position: absolute;
-                                    top: 50%;
-                                    width: 100%;
-                                    text-align: center;
-                                    transform: translateY(-50%);
-                                }
-                            }
-                        }
-                    }
-
-                    &-center {
-                        width: 100px;
-                        height: 100%;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-
-                        .icon {
-                            width: 24px;
-                            height: 24px;
-                            line-height: 24px;
-                            font-size: 18px;
-                            background-color: @themeColor;
-                            border-radius: 50%;
-                            color: #fff;
-                            text-align: center;
-                        }
-                    }
-
-                    &-right {
-                        flex: 1;
-                        min-width: 200px;
-                        height: 100%;
-                        padding: 20px;
-                        margin-left: 10px;
-                        border: 1px solid #E5E5E5;
-                        background: @white;
-                        overflow: auto;
-                        display: flex;
-                        flex-direction: column;
-
-                        .list {
-                            display: flex;
-                            flex-wrap: wrap;
-                            align-items: center;
-
-                            &-item {
-                                max-width: 150px;
-                                height: 24px;
-                                padding: 2px 6px 2px 10px;
-                                margin: 3px 5px;
-                                border-radius: 20px;
-                                background-color: @themeColor;
-                                color: #ffffff;
-                                font-size: 12px;
-                                display: flex;
-                                align-items: center;
-
-                                &-name {
-                                    .dsh-ellipsis();
-                                }
-
-                                &-delete {
-                                    padding: 3px;
-                                    margin-left: 5px;
-                                    font-size: 14px;
-                                    cursor: pointer;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                .footer {
-                    padding-top: 12px;
-                    text-align: right;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <!-- 编辑 -->
+    <div
+        v-if="canEdit"
+        class="selectUsers"
+    >
+        <bri-tooltip
+            :content="showVal"
+            :transfer="true"
+        >
+            <div @click="clickInput">
+                <slot>
+                    <dsh-control-input
+                        :class="commonClass"
+                        :value="curValShowList"
+                        :disabled="disabled"
+                        :heightAuto="isHeightAuto"
+                        :propsObj="selfPropsObj"
+                        @clickItem="clickItem"
+                        @deleteItem="clickDeleteItem"
+                        @clear="clickClear"
+                    ></dsh-control-input>
+                </slot>
+            </div>
+        </bri-tooltip>
+
+        <!-- 点击选中项后的自定义内容 -->
+        <dsh-render :render="itemTipRender"></dsh-render>
+
+        <!-- 搜索选择框 -->
+        <dsh-modal
+            v-if="modalInited"
+            class="selectUsers-modal"
+            v-model="showModal"
+            mode="custom"
+            :propsObj="modalPropsObj"
+            @cancel="clickCancel"
+        >
+            <div
+                v-if="showModalContent"
+                class="selectUsers-modal-wrap"
+            >
+                <!-- 上 -->
+                <div class="head">
+                    <!-- 左 -->
+                    <div class="head-left">
+                        <!-- 上 筛选 -->
+                        <div
+                            v-if="curDepart._key !== '_highSearch'"
+                            class="search"
+                        >
+                            <dsh-input
+                                :value="searchData"
+                                :propsObj="inputPropsObj"
+                                @inputChange="search"
+                            ></dsh-input>
+                        </div>
+
+                        <!-- 下 -->
+                        <div class="content">
+                            <!-- 左 部门 -->
+                            <depart-menu
+                                class="content-menu"
+                                :canEdit="false"
+                                :useIcon="false"
+                                :list="departShowList"
+                                @departClick="changeDepart"
+                            ></depart-menu>
+
+                            <!-- 右 部门对应的成员 -->
+                            <div class="content-users">
+                                <bri-loading v-if="loading" />
+                                <template v-else>
+                                    <!-- 有数据 -->
+                                    <div
+                                        v-if="userShowList.length"
+                                        class="content-users-list"
+                                    >
+                                        <!-- 上 全选 -->
+                                        <div
+                                            v-if="multipleMode"
+                                            class="content-users-list-check"
+                                        >
+                                            <Checkbox
+                                                :indeterminate="false"
+                                                :value="curCheckAll"
+                                                @click.prevent.native="clickCheckAll(curCheckAll)"
+                                            >全选</Checkbox>
+                                        </div>
+
+                                        <!-- 下 列表-->
+                                        <div class="content-users-list-selects">
+                                            <div
+                                                v-for="dataItem in userShowList"
+                                                :key="dataItem._key"
+                                                class="content-users-list-selects-item"
+                                            >
+                                                <Checkbox
+                                                    v-model="dataItem.checked"
+                                                    @on-change="changeSelect(dataItem)"
+                                                >
+                                                    {{ getShowName(dataItem) }}
+                                                </Checkbox>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 无数据 -->
+                                    <div
+                                        v-else
+                                        class="content-users-nodata"
+                                    >
+                                        <img
+                                            :src="$imageSrcMap.nodata"
+                                            alt="该部门暂无人员"
+                                        >
+                                        <div>
+                                            该部门暂无人员
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 中 图标 -->
+                    <div class="head-center">
+                        <Icon
+                            class="icon"
+                            type="ios-arrow-forward"
+                        />
+                    </div>
+
+                    <!-- 右 已选择项 -->
+                    <div class="head-right">
+                        <div class="list">
+                            <span
+                                v-for="(selectItem, selectIndex) in tmpValList"
+                                :key="selectIndex"
+                                class="list-item"
+                            >
+                                <span class="list-item-name">
+                                    {{ getShowName(selectItem) }}
+                                </span>
+
+                                <Icon
+                                    class="list-item-delete"
+                                    type="ios-close-circle"
+                                    @click="clickDeleteTmpItem(selectItem, selectIndex, tmpValList)"
+                                />
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- footer -->
+                <dsh-buttons
+                    class="footer"
+                    :list="$getOperationList(['canCancel', 'canConfirm'])"
+                    @click="$dispatchEvent($event)"
+                ></dsh-buttons>
+            </div>
+        </dsh-modal>
+    </div>
+
+    <!-- 查看 -->
+    <div
+        v-else
+        class="selectUsers-show"
+    >
+        <!-- 有值 -->
+        <template v-if="!$isEmptyData(curValShowList)">
+            <!-- 单元格查看 -->
+            <template v-if="isUnitShow">
+                <!-- 高度自由时 -->
+                <div
+                    v-if="isHeightAuto"
+                    :class="{
+                        ...commonClass,
+                        'selectUsers-show-auto': true,
+                        'selectUsers-show-unit': true
+                    }"
+                >
+                    <template v-for="item in curValShowList">
+                        <img
+                            :src="getAvatarUrl(item)"
+                            :key="item._key"
+                            class="selectUsers-show-unit-img"
+                        />
+                        <span
+                            :key="item._key + 'span'"
+                            class="selectUsers-show-unit-text"
+                        >
+                            {{ getShowName(item) }}
+                        </span>
+                    </template>
+                </div>
+
+                <!-- 高度不自由（不换行） -->
+                <bri-tooltip
+                    v-else
+                    :content="showVal"
+                    :transfer="true"
+                >
+                    <div :class="{
+                        ...commonClass,
+                        'selectUsers-show-ellipsis': true,
+                        'selectUsers-show-unit': true
+                    }">
+                        <template v-for="item in curValShowList">
+                            <img
+                                :src="getAvatarUrl(item)"
+                                :key="item._key"
+                                class="selectUsers-show-unit-img"
+                            />
+                            <span
+                                :key="item._key + 'span'"
+                                class="selectUsers-show-unit-text"
+                            >
+                                {{ getShowName(item) }}
+                            </span>
+                        </template>
+                    </div>
+                </bri-tooltip>
+            </template>
+
+            <!-- 表单查看 -->
+            <template v-else>
+                <!-- 高度自由时 -->
+                <dsh-tags
+                    v-if="isHeightAuto"
+                    :class="{
+                        ...commonClass,
+                        'selectUsers-show-auto': true
+                    }"
+                    itemClass="selectUsers-show-auto-tag"
+                    :list="curValShowList"
+                ></dsh-tags>
+
+                <!-- 高度不自由（不换行） -->
+                <bri-tooltip
+                    v-else
+                    :content="showVal"
+                    :transfer="true"
+                >
+                    <dsh-tags
+                        :class="{
+                            ...commonClass,
+                            'selectUsers-show-ellipsis': true
+                        }"
+                        itemClass="selectUsers-show-ellipsis-tag"
+                        :list="curValShowList"
+                    ></dsh-tags>
+                </bri-tooltip>
+            </template>
+        </template>
+
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
+</template>
+
+<script>
+    import userAndDepartMixin from "../../mixins/userAndDepartMixin.js";
+    import departMenu from "./departMenu.vue";
+
+    export default {
+        name: "selectUsers",
+        mixins: [
+            userAndDepartMixin
+        ],
+        components: {
+            departMenu
+        },
+        props: {},
+        data () {
+            return {
+                // 弹框
+                modalPropsObj: {
+                    title: "选择成员",
+                    showSlotClose: false,
+                    closable: true,
+                    class: "bri-modal-center"
+                },
+                inputPropsObj: {
+                    _name: "成员名称",
+                    _key: "name",
+                    _search: true,
+                    _clearable: false
+                },
+
+                curDepart: {
+                    _key: "",
+                    name: "全部",
+                    is_leaf: true,
+                    level: 1
+                },
+                highUserList: [
+                    {
+                        _key: "dyn_myself",
+                        realname: "当前用户"
+                    }
+                ],
+                userList: [],
+                highList: [
+                    {
+                        _key: "_highSearch",
+                        name: "高级选项",
+                        level: 1,
+                        is_leaf: true
+                    }
+                ],
+
+                imageResizeConfig: {
+                    m: "fixed",
+                    w: 18,
+                    h: 18
+                }
+            };
+        },
+        computed: {
+            selfBasePropsObj () {
+                return {
+                    _icon: this.propsObj._multiple === true ? "ios-people" : "ios-person"
+                };
+            },
+            isCompAdmin () {
+                return (JSON.parse(sessionStorage.getItem("userData")) || {}).isCompAdmin || this.selfPropsObj._isCompAdmin;
+            },
+
+            // 展示的部门
+            departShowList () {
+                return [
+                    ...(this.highSearch ? this.highList : []),
+                    {
+                        name: "全部",
+                        _key: "",
+                        level: 1,
+                        is_leaf: true
+                    },
+                    ...this.selfDepartList,
+                    ...(
+                        this.isCompAdmin
+                            ? [
+                                {
+                                    name: "离职人员",
+                                    _key: "_resign",
+                                    level: 1,
+                                    is_leaf: true
+                                }
+                            ]
+                            : []
+                    )
+                ];
+            },
+            allDepartShowKeys () {
+                const loop = (arr = []) => {
+                    return arr.reduce((totalList, item) => {
+                        return [
+                            ...totalList,
+                            item,
+                            ...loop(item.children)
+                        ];
+                    }, []);
+                };
+
+                return loop(this.departShowList).map(item => item._key);
+            },
+            userShowList () {
+                // 有部门过滤就只显示对应的部门，无过滤就涌全部用户（包含无部门用户）
+                let list = this.filterVals.length || this.cascaderVals.length
+                    ? this.userList.filter(item => this.allDepartShowKeys.includes(item.departmentKey))
+                    : this.userList;
+
+                list = this.curDepart._key === "_highSearch"
+                    ? this.highUserList
+                    : this.curDepart._key === "_resign"
+                        ? this.userList
+                        : !this.curDepart._key
+                            ? list
+                            : list.filter(item => item.departmentKey === this.curDepart._key);
+
+                return this.transformShowList(list, this.tmpValKeys);
+            },
+            userKeys () {
+                return this.userShowList.map(item => item._key);
+            },
+
+            curCheckAll () {
+                return this.userKeys.length && this.userKeys.every(userKey =>
+                    this.tmpValKeys.includes(userKey)
+                );
+            },
+            curValShowList () {
+                return this.curValList;
+            }
+        },
+        created () {},
+        methods: {
+            /* ---------- 弹框里 --------- */
+            // 选择部门
+            changeDepart (depart) {
+                if (this.curDepart._key !== depart._key) {
+                    if (depart._key === "_resign") {
+                        this.curDepart = depart;
+                        this.getListData();
+                    } else {
+                        if (this.curDepart._key === "_resign") {
+                            this.curDepart = depart;
+                            this.getListData();
+                        } else {
+                            this.curDepart = depart;
+                        }
+                    }
+                }
+            },
+            clickCheckAll (bool) {
+                this.tmpValList = bool
+                    ? this.tmpValList.filter(tmpItem => !this.userKeys.includes(tmpItem._key))
+                    : [
+                        ...this.tmpValList,
+                        ...this.userShowList.filter(dataItem => !this.tmpValKeys.includes(dataItem._key))
+                ];
+            },
+
+            /* ----------- 接口方法 ------------- */
+            // 获取显示名
+            getShowName (selectItem) {
+                return selectItem.realname || selectItem.name || selectItem.mobile;
+            },
+            // 获取头像
+            getAvatarUrl (selectItem) {
+                return selectItem.avatarurl
+                    ? this.$imageResize(selectItem.avatarurl, this.imageResizeConfig)
+                    : this.$imageSrcMap.system.boy;
+            },
+            getData () {
+                this.getDepartListData();
+                this.getListData();
+            },
+            getListData () {
+                this.loading = true;
+
+                this.$https({
+                    url: {
+                        module: "company",
+                        name: this.curDepart._key === "_resign" ? "userResign" : "userIndex"
+                    },
+                    params: {
+                        search: {
+                            realname: this.searchData.name
+                                ? {
+                                    $regex: `.*${this.$speciaWord(this.searchData.name)}.*`,
+                                    $options: "i"
+                                }
+                                : undefined
+                        },
+                        // department: this.curDepart._key,
+                        pagination: this.pagePropsObj
+                    },
+                    loadingName: "loading",
+                    callback: data => {
+                        this.loadinged = true;
+
+                        this.userList = data.list;
+                        this.total = data.total;
+                    }
+                });
+            },
+            getDepartListData () {
+                this.$https({
+                    url: {
+                        module: "company",
+                        name: "compDepartCascaderAll"
+                    },
+                    params: {
+                        searchString: this.propsObj.searchString
+                    },
+                    callback: data => {
+                        this.departList = data.list;
+                    }
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    @import url("../../control.less");
+
+    .selectUsers {
+        #control-show();
+
+        &-show {
+            &-auto,
+            &-ellipsis {
+                margin: 2px 0px;
+            }
+
+            &-unit {
+                &-img {
+                    width: 23px;
+                    height: 18px;
+                    padding-left: 5px;
+                    border-radius: 50%;
+                    vertical-align: middle;
+
+                    &:first-of-type {
+                        width: 18px;
+                        padding-left: 0px;
+                    }
+                }
+
+                &-text {
+                    vertical-align: middle;
+                }
+            }
+        }
+
+        // 提示框的
+        &-tip {
+            &-modal {
+                .wrap {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+
+                    &-content {
+                        flex: 1;
+                        min-height: 0px;
+                        padding: 0px 12px;
+                        overflow: auto;
+                    }
+
+                    &-btns {
+                        margin: 10px;
+                        text-align: right;
+
+                        .ivu-btn {
+                            font-size: 16px;
+                            font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
+                            font-weight: 600;
+                            border-radius: 4px;
+                        }
+                    }
+                }
+            }
+        }
+
+        // 弹框部分
+        &-modal {
+            .ivu-modal {
+                width: 40%!important;
+                min-width: 900px!important;
+                height: 60%;
+                min-height: 600px;
+            }
+
+            &-wrap {
+                width: 100%;
+                height: 100%;
+                .dsh-flex-col-start-stretch();
+
+                .head {
+                    width: 100%;
+                    flex: 1;
+                    min-height: 100px;
+                    .dsh-flex-row-start-stretch();
+
+                    &-left {
+                        flex: 2;
+                        min-width: 300px;
+                        border: 1px solid #E5E5E5;
+                        background: @white;
+                        overflow-y: auto;
+
+                        .search {
+                            padding: 10px 20px;
+                        }
+
+                        .content {
+                            display: flex;
+                            height: calc(100% - 52px);
+                            border-top: 1px solid #E5E5E5;
+
+                            &-menu {
+                                flex: 4;
+                                height: 100%;
+                                overflow: auto;
+                            }
+
+                            &-users {
+                                flex: 3;
+                                border-left: 1px solid #E5E5E5;
+                                position: relative;
+
+                                .ivu-checkbox-checked .ivu-checkbox-inner {
+                                    border-color: @themeColor;
+                                    background-color: @themeColor;
+                                }
+
+                                &-list {
+                                    height: 100%;
+                                    display: flex;
+                                    flex-direction: column;
+
+                                    &-check {
+                                        height: 40px;
+                                        line-height: 40px;
+                                        border-bottom: 1px solid #E5E5E5;
+                                        padding-left: 15px;
+                                    }
+
+                                    &-selects {
+                                        flex: 1;
+                                        overflow: auto;
+                                        padding: 15px;
+
+                                        &-item {
+                                            margin-bottom: 5px;
+                                        }
+                                    }
+                                }
+
+                                &-nodata {
+                                    position: absolute;
+                                    top: 50%;
+                                    width: 100%;
+                                    text-align: center;
+                                    transform: translateY(-50%);
+                                }
+                            }
+                        }
+                    }
+
+                    &-center {
+                        width: 100px;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+
+                        .icon {
+                            width: 24px;
+                            height: 24px;
+                            line-height: 24px;
+                            font-size: 18px;
+                            background-color: @themeColor;
+                            border-radius: 50%;
+                            color: #fff;
+                            text-align: center;
+                        }
+                    }
+
+                    &-right {
+                        flex: 1;
+                        min-width: 200px;
+                        height: 100%;
+                        padding: 20px;
+                        margin-left: 10px;
+                        border: 1px solid #E5E5E5;
+                        background: @white;
+                        overflow: auto;
+                        display: flex;
+                        flex-direction: column;
+
+                        .list {
+                            display: flex;
+                            flex-wrap: wrap;
+                            align-items: center;
+
+                            &-item {
+                                max-width: 150px;
+                                height: 24px;
+                                padding: 2px 6px 2px 10px;
+                                margin: 3px 5px;
+                                border-radius: 20px;
+                                background-color: @themeColor;
+                                color: #ffffff;
+                                font-size: 12px;
+                                display: flex;
+                                align-items: center;
+
+                                &-name {
+                                    .dsh-ellipsis();
+                                }
+
+                                &-delete {
+                                    padding: 3px;
+                                    margin-left: 5px;
+                                    font-size: 14px;
+                                    cursor: pointer;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .footer {
+                    padding-top: 12px;
+                    text-align: right;
+                }
+            }
+        }
+    }
+</style>