bri-components 1.4.92 → 1.4.93

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

@@ -1,438 +1,438 @@
-<template>
-    <!-- 编辑 -->
-    <div
-        v-if="canEdit"
-        class="selectDepartments"
-    >
-        <bri-tooltip
-            :content="showVal"
-            :transfer="true"
-        >
-            <div @click="clickInput">
-                <slot>
-                    <!-- 编辑 -->
-                    <dsh-control-input
-                        v-if="canEdit"
-                        :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="selectDepartments-modal bri-modal-center"
-            mode="custom"
-            v-model="showModal"
-            :propsObj="modalPropsObj"
-            @cancel="clickCancel"
-        >
-            <div
-                v-if="showModalContent"
-                class="selectDepartments-modal-wrap"
-            >
-                <!-- 上 已选择项 -->
-                <div class="list">
-                    <span class="list-label">
-                        已选择{{ multipleMode ?  `(${tmpValList.length}个)` : "" }}：
-                    </span>
-
-                    <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 class="search">
-                    <dsh-input
-                        :value="searchData"
-                        :propsObj="inputPropsObj"
-                        @inputChange="search"
-                    ></dsh-input>
-                </div>
-
-                <!-- 中 列表 -->
-                <div class="center">
-                    <bri-loading v-if="loading" />
-                    <template v-else>
-                        <div
-                            v-if="departShowList.length"
-                            class="center-tree"
-                        >
-                            <bri-tree-item
-                                v-for="item in departShowList"
-                                :key="item._key"
-                                :value="item"
-                                :multiple="multipleMode"
-                                :changeOnSelect="changeOnSelect"
-                                @on-change="changeSelect"
-                            ></bri-tree-item>
-                        </div>
-
-                        <div
-                            v-else
-                            class="center-tree-nodata"
-                        >
-                            暂无数据…
-                        </div>
-                    </template>
-                </div>
-
-                <!-- 底部 按钮 -->
-                <dsh-buttons
-                    class="footer"
-                    :list="$getOperationList(['canCancel', 'canConfirm'])"
-                    @click="$dispatchEvent($event)"
-                ></dsh-buttons>
-            </div>
-        </dsh-modal>
-    </div>
-
-    <!-- 查看 -->
-    <div
-        v-else
-        class="selectDepartments-show"
-    >
-        <!-- 有值 -->
-        <template v-if="!$isEmptyData(curValShowList)">
-            <!-- 高度自由时 -->
-            <dsh-tags
-                v-if="isHeightAuto"
-                :class="{
-                    ...commonClass,
-                    'selectDepartments-show-auto': true
-                }"
-                itemClass="selectDepartments-show-auto-tag"
-                :list="curValShowList"
-            ></dsh-tags>
-
-            <!-- 高度不自由（不换行） -->
-            <bri-tooltip
-                v-else
-                :content="showVal"
-                :transfer="true"
-            >
-                <dsh-tags
-                    :class="{
-                        ...commonClass,
-                        'selectDepartments-show-ellipsis': true
-                    }"
-                    itemClass="selectDepartments-show-ellipsis-tag"
-                    :list="curValShowList"
-                ></dsh-tags>
-            </bri-tooltip>
-        </template>
-
-        <!-- 无值 -->
-        <div
-            v-else
-            :class="commonClass"
-        >
-            {{ emptyShowVal }}
-        </div>
-    </div>
-</template>
-
-<script>
-    import userAndDepartMixin from "../mixins/userAndDepartMixin.js";
-    import BriTreeItem from "../../list/BriTreeItem.vue";
-    import BriCard from "../../list/BriCard.vue";
-
-    export default {
-        name: "selectDepartments",
-        mixins: [
-            userAndDepartMixin
-        ],
-        components: {
-            BriTreeItem,
-            BriCard
-        },
-        props: {},
-        data () {
-            return {
-                modalPropsObj: {
-                    title: "选择部门",
-                    width: 600,
-                    showSlotClose: false,
-                    closable: true
-                },
-                inputPropsObj: {
-                    _name: "部门名称",
-                    _key: "name",
-                    _search: true,
-                    _clearable: false
-                },
-                highList: [
-                    {
-                        _key: "dyn_department",
-                        name: "当前部门"
-                    }
-                ]
-            };
-        },
-        computed: {
-            selfBasePropsObj () {
-                return {
-                    _icon: this.propsObj._multiple === true ? "ios-people" : "ios-person",
-                    _changeOnSelect: true,
-                    _useFullName: false, // 使用全名
-                    _expandLevel: 2 // 列表打开，默认展开到第几级
-                };
-            },
-
-            changeOnSelect () {
-                return this.selfPropsObj._changeOnSelect;
-            },
-            useFullName () {
-                return this.selfPropsObj._useFullName;
-            },
-            expandLevel () {
-                return this.selfPropsObj._expandLevel;
-            },
-
-            departShowList () {
-                const loop = (arr = [], filterVals = [], cascaderVals = [], reverseFilter = false) => {
-                    arr = cascaderVals.length
-                        ? arr.filter(item => {
-                            return reverseFilter
-                                ? !cascaderVals.some(cascaderItem =>
-                                    item.code && cascaderItem.code
-                                        ? item.code.length < cascaderItem.code.length
-                                            ? false
-                                            : item.code.startsWith(cascaderItem.code)
-                                        : false
-                                )
-                                : cascaderVals.some(cascaderItem =>
-                                    item.code && cascaderItem.code
-                                        ? item.code.length < cascaderItem.code.length
-                                            ? cascaderItem.code.startsWith(item.code)
-                                            : item.code.startsWith(cascaderItem.code)
-                                        : false
-                            );
-                        })
-                        : filterVals.length
-                            ? arr.filter(item =>
-                                reverseFilter
-                                    ? !filterVals.includes(item._key)
-                                    : filterVals.includes(item._key)
-                            )
-                            : arr;
-
-                    return arr.reduce((newArr, item) => {
-                        if (item.children && item.children.length) {
-                            item.children = loop(item.children, [], cascaderVals, reverseFilter);
-                        }
-
-                        return [
-                            ...newArr,
-                            item
-                        ];
-                    }, []);
-                };
-
-                const departList = [
-                    ...(this.highSearch ? this.highList : []),
-                    ...loop(this.departList, this.filterVals, this.cascaderVals, this.reverseFilter)
-                ];
-
-                return this.transformDepartList(departList, this.tmpValKeys);
-            },
-
-            curValShowList () {
-                return this.curValList.map(itemObj => {
-                    return {
-                        ...itemObj,
-                        full_name: this.useFullName ? this.getFullName(itemObj) : undefined
-                    };
-                });
-            }
-        },
-        created () {},
-        methods: {
-            /* ----------- 接口方法和加工方法 --------- */
-            // 获取显示名
-            getShowName (itemObj) {
-                return this.useFullName
-                    ? this.getFullName(itemObj)
-                    : itemObj.name;
-            },
-            getFullName (itemObj) {
-                return itemObj.full_name || this.$getTreeLinealDatasByNode(itemObj, this.departShowList, "_key").map(levelObj => levelObj.name).join("/") || itemObj.name;
-            },
-
-            getData () {
-                this.getListData();
-            },
-            // 接口 -获取部门列表数据
-            getListData () {
-                this.loading = true;
-
-                this.$https({
-                    url: {
-                        module: "company",
-                        name: "compDepartCascaderAll"
-                    },
-                    params: {
-                        search: this.searchData.name
-                            ? {
-                                name: {
-                                    $regex: `.*${this.$speciaWord(this.searchData.name)}.*`,
-                                    $options: "i"
-                                }
-                            }
-                            : undefined,
-                        searchString: this.searchString,
-                        nameSearchFlag: !this.changeOnSelect // 以整个链的数据返回匹配到的部门
-                    },
-                    loadingName: "loading",
-                    callback: data => {
-                        this.loadinged = true;
-
-                        this.departList = data.list;
-                    }
-                });
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    @import url("../control.less");
-
-    .selectDepartments {
-        #control-show();
-
-        &-show {
-            &-auto,
-            &-ellipsis {
-                margin: 2px 0px;
-            }
-        }
-
-        // 提示框的
-        &-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: 30%!important;
-                min-width: 600px!important;
-                height: 70%;
-                min-height: 600px;
-            }
-
-            &-wrap {
-                width: 100%;
-                height: 100%;
-                .dsh-flex-col-start-stretch();
-
-                .list {
-                    display: flex;
-                    flex-wrap: wrap;
-                    align-items: center;
-
-                    &-label {}
-
-                    &-item {
-                        height: auto;
-                        padding: 2px 6px 2px 10px;
-                        margin: 3px 5px;
-                        border-radius: 14px;
-                        background-color: @themeColor;
-                        color: #ffffff;
-                        display: flex;
-                        align-items: center;
-
-                        &-name {
-                            padding: 2px 0px;
-                            line-height: 16px;
-                            font-size: 12px;
-                            // .dsh-ellipsis();
-                        }
-
-                        &-delete {
-                            padding: 2px;
-                            margin-left: 5px;
-                            line-height: 16px;
-                            font-size: 14px;
-                            cursor: pointer;
-                        }
-                    }
-                }
-
-                .search {
-                    padding: 8px 0px 10px;
-                }
-
-                .center {
-                    flex: 1;
-                    min-height: 100px;
-                    padding: 5px 0 10px;
-                    overflow: auto;
-
-                    &-tree {
-                        &-nodata {
-                            #dsh-nodata();
-                        }
-                    }
-                }
-
-                .footer {
-                    padding-top: 12px;
-                    border-top: 1px solid @borderColor;
-                    text-align: right;
-                }
-            }
-        }
-}
-</style>
+<template>
+    <!-- 编辑 -->
+    <div
+        v-if="canEdit"
+        class="selectDepartments"
+    >
+        <bri-tooltip
+            :content="showVal"
+            :transfer="true"
+        >
+            <div @click="clickInput">
+                <slot>
+                    <!-- 编辑 -->
+                    <dsh-control-input
+                        v-if="canEdit"
+                        :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="selectDepartments-modal bri-modal-center"
+            mode="custom"
+            v-model="showModal"
+            :propsObj="modalPropsObj"
+            @cancel="clickCancel"
+        >
+            <div
+                v-if="showModalContent"
+                class="selectDepartments-modal-wrap"
+            >
+                <!-- 上 已选择项 -->
+                <div class="list">
+                    <span class="list-label">
+                        已选择{{ multipleMode ?  `(${tmpValList.length}个)` : "" }}：
+                    </span>
+
+                    <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 class="search">
+                    <dsh-input
+                        :value="searchData"
+                        :propsObj="inputPropsObj"
+                        @inputChange="search"
+                    ></dsh-input>
+                </div>
+
+                <!-- 中 列表 -->
+                <div class="center">
+                    <bri-loading v-if="loading" />
+                    <template v-else>
+                        <div
+                            v-if="departShowList.length"
+                            class="center-tree"
+                        >
+                            <bri-tree-item
+                                v-for="item in departShowList"
+                                :key="item._key"
+                                :value="item"
+                                :multiple="multipleMode"
+                                :changeOnSelect="changeOnSelect"
+                                @on-change="changeSelect"
+                            ></bri-tree-item>
+                        </div>
+
+                        <div
+                            v-else
+                            class="center-tree-nodata"
+                        >
+                            暂无数据…
+                        </div>
+                    </template>
+                </div>
+
+                <!-- 底部 按钮 -->
+                <dsh-buttons
+                    class="footer"
+                    :list="$getOperationList(['canCancel', 'canConfirm'])"
+                    @click="$dispatchEvent($event)"
+                ></dsh-buttons>
+            </div>
+        </dsh-modal>
+    </div>
+
+    <!-- 查看 -->
+    <div
+        v-else
+        class="selectDepartments-show"
+    >
+        <!-- 有值 -->
+        <template v-if="!$isEmptyData(curValShowList)">
+            <!-- 高度自由时 -->
+            <dsh-tags
+                v-if="isHeightAuto"
+                :class="{
+                    ...commonClass,
+                    'selectDepartments-show-auto': true
+                }"
+                itemClass="selectDepartments-show-auto-tag"
+                :list="curValShowList"
+            ></dsh-tags>
+
+            <!-- 高度不自由（不换行） -->
+            <bri-tooltip
+                v-else
+                :content="showVal"
+                :transfer="true"
+            >
+                <dsh-tags
+                    :class="{
+                        ...commonClass,
+                        'selectDepartments-show-ellipsis': true
+                    }"
+                    itemClass="selectDepartments-show-ellipsis-tag"
+                    :list="curValShowList"
+                ></dsh-tags>
+            </bri-tooltip>
+        </template>
+
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
+</template>
+
+<script>
+    import userAndDepartMixin from "../mixins/userAndDepartMixin.js";
+    import BriTreeItem from "../../list/BriTreeItem.vue";
+    import BriCard from "../../list/BriCard.vue";
+
+    export default {
+        name: "selectDepartments",
+        mixins: [
+            userAndDepartMixin
+        ],
+        components: {
+            BriTreeItem,
+            BriCard
+        },
+        props: {},
+        data () {
+            return {
+                modalPropsObj: {
+                    title: "选择部门",
+                    width: 600,
+                    showSlotClose: false,
+                    closable: true
+                },
+                inputPropsObj: {
+                    _name: "部门名称",
+                    _key: "name",
+                    _search: true,
+                    _clearable: false
+                },
+                highList: [
+                    {
+                        _key: "dyn_department",
+                        name: "当前部门"
+                    }
+                ]
+            };
+        },
+        computed: {
+            selfBasePropsObj () {
+                return {
+                    _icon: this.propsObj._multiple === true ? "ios-people" : "ios-person",
+                    _changeOnSelect: true,
+                    _useFullName: false, // 使用全名
+                    _expandLevel: 2 // 列表打开，默认展开到第几级
+                };
+            },
+
+            changeOnSelect () {
+                return this.selfPropsObj._changeOnSelect;
+            },
+            useFullName () {
+                return this.selfPropsObj._useFullName;
+            },
+            expandLevel () {
+                return this.selfPropsObj._expandLevel;
+            },
+
+            departShowList () {
+                const loop = (arr = [], filterVals = [], cascaderVals = [], reverseFilter = false) => {
+                    arr = cascaderVals.length
+                        ? arr.filter(item => {
+                            return reverseFilter
+                                ? !cascaderVals.some(cascaderItem =>
+                                    item.code && cascaderItem.code
+                                        ? item.code.length < cascaderItem.code.length
+                                            ? false
+                                            : item.code.startsWith(cascaderItem.code)
+                                        : false
+                                )
+                                : cascaderVals.some(cascaderItem =>
+                                    item.code && cascaderItem.code
+                                        ? item.code.length < cascaderItem.code.length
+                                            ? cascaderItem.code.startsWith(item.code)
+                                            : item.code.startsWith(cascaderItem.code)
+                                        : false
+                            );
+                        })
+                        : filterVals.length
+                            ? arr.filter(item =>
+                                reverseFilter
+                                    ? !filterVals.includes(item._key)
+                                    : filterVals.includes(item._key)
+                            )
+                            : arr;
+
+                    return arr.reduce((newArr, item) => {
+                        if (item.children && item.children.length) {
+                            item.children = loop(item.children, [], cascaderVals, reverseFilter);
+                        }
+
+                        return [
+                            ...newArr,
+                            item
+                        ];
+                    }, []);
+                };
+
+                const departList = [
+                    ...(this.highSearch ? this.highList : []),
+                    ...loop(this.departList, this.filterVals, this.cascaderVals, this.reverseFilter)
+                ];
+
+                return this.transformDepartList(departList, this.tmpValKeys);
+            },
+
+            curValShowList () {
+                return this.curValList.map(itemObj => {
+                    return {
+                        ...itemObj,
+                        full_name: this.useFullName ? this.getFullName(itemObj) : undefined
+                    };
+                });
+            }
+        },
+        created () {},
+        methods: {
+            /* ----------- 接口方法和加工方法 --------- */
+            // 获取显示名
+            getShowName (itemObj) {
+                return this.useFullName
+                    ? this.getFullName(itemObj)
+                    : itemObj.name;
+            },
+            getFullName (itemObj) {
+                return itemObj.full_name || this.$getTreeLinealDatasByNode(itemObj, this.departShowList, "_key").map(levelObj => levelObj.name).join("/") || itemObj.name;
+            },
+
+            getData () {
+                this.getListData();
+            },
+            // 接口 -获取部门列表数据
+            getListData () {
+                this.loading = true;
+
+                this.$https({
+                    url: {
+                        module: "company",
+                        name: "compDepartCascaderAll"
+                    },
+                    params: {
+                        search: this.searchData.name
+                            ? {
+                                name: {
+                                    $regex: `.*${this.$speciaWord(this.searchData.name)}.*`,
+                                    $options: "i"
+                                }
+                            }
+                            : undefined,
+                        searchString: this.searchString,
+                        nameSearchFlag: !this.changeOnSelect // 以整个链的数据返回匹配到的部门
+                    },
+                    loadingName: "loading",
+                    callback: data => {
+                        this.loadinged = true;
+
+                        this.departList = data.list;
+                    }
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    @import url("../control.less");
+
+    .selectDepartments {
+        #control-show();
+
+        &-show {
+            &-auto,
+            &-ellipsis {
+                margin: 2px 0px;
+            }
+        }
+
+        // 提示框的
+        &-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: 30%!important;
+                min-width: 600px!important;
+                height: 70%;
+                min-height: 600px;
+            }
+
+            &-wrap {
+                width: 100%;
+                height: 100%;
+                .dsh-flex-col-start-stretch();
+
+                .list {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+
+                    &-label {}
+
+                    &-item {
+                        height: auto;
+                        padding: 2px 6px 2px 10px;
+                        margin: 3px 5px;
+                        border-radius: 14px;
+                        background-color: @themeColor;
+                        color: #ffffff;
+                        display: flex;
+                        align-items: center;
+
+                        &-name {
+                            padding: 2px 0px;
+                            line-height: 16px;
+                            font-size: 12px;
+                            // .dsh-ellipsis();
+                        }
+
+                        &-delete {
+                            padding: 2px;
+                            margin-left: 5px;
+                            line-height: 16px;
+                            font-size: 14px;
+                            cursor: pointer;
+                        }
+                    }
+                }
+
+                .search {
+                    padding: 8px 0px 10px;
+                }
+
+                .center {
+                    flex: 1;
+                    min-height: 100px;
+                    padding: 5px 0 10px;
+                    overflow: auto;
+
+                    &-tree {
+                        &-nodata {
+                            #dsh-nodata();
+                        }
+                    }
+                }
+
+                .footer {
+                    padding-top: 12px;
+                    border-top: 1px solid @borderColor;
+                    text-align: right;
+                }
+            }
+        }
+}
+</style>