bri-components 1.5.22 → 1.6.1

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

@@ -1,293 +1,296 @@
-<template>
-    <div class="departMenu">
-        <div
-            v-if="!parent && canEdit"
-            :class="{
-                'departMenu-item': true,
-                'departMenu-item-select': departSelected._key === 'noDepart' || departSelected === null
-            }"
-        >
-            <div
-                :class="{
-                    'departMenu-item-name': true,
-                    'departMenu-item-name-select': departSelected._key === 'noDepart' || departSelected === null
-                }"
-                @click="departClick({'_key': 'noDepart'})"
-            >
-                无部门员工
-            </div>
-        </div>
-
-        <div
-            v-for="(depart, departIndex) in list"
-            :key="depart._key"
-            :class="{
-                'departMenu-item': true,
-                'departMenu-item-select': departSelected._key ===  depart._key
-            }"
-        >
-            <div
-                :class="{
-                    'departMenu-item-name': true,
-                    'departMenu-item-name-select': departSelected._key === depart._key
-                }"
-                @click.stop="departClick(depart)"
-            >
-                <span>
-                    <Icon
-                        v-if="depart.children && depart.children.length"
-                        :type="getIcon(depart)"
-                        @click.stop="toggleChildren(depart)"
-                    />
-                    <span v-else style="margin-right:1px"></span>
-                    <Icon
-                        v-if="useIcon"
-                        custom="bico-font bri-qiye bico-qiye"
-                    />
-                    <span class="departMenu-item-name-text">
-                        {{ depart.name }}
-                    </span>
-                </span>
-
-                <dsh-dropdown
-                    v-if="canEdit"
-                    trigger="hover"
-                    :list="dropdownList"
-                    @click="$dispatchEvent($event, undefined, depart, departIndex, parent)"
-                ></dsh-dropdown>
-            </div>
-
-            <template v-if="depart.isShowChildren">
-                <depart-menu
-                    style="margin-left: 20px"
-                    :canEdit="canEdit"
-                    :list="depart.children"
-                    :parent="depart"
-                    :propSelect="departSelected"
-                    :propsDropdownList="propsDropdownList"
-                    :company="company"
-                    @showAddModal="showAddModal"
-                    @showChange="showChilrenChange"
-                    @deleteDepart="deleteDepart"
-                    @departClick="departClick"
-                    @removeDepartment="removeDepartment"
-                    @upDownDepartment="upDownDepartment"
-                ></depart-menu>
-            </template>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "departMenu",
-        props: {
-            canEdit: {
-                type: Boolean,
-                default: false
-            },
-            useIcon: {
-                type: Boolean,
-                default: true
-            },
-
-            parent: Object,
-            list: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            propSelect: {
-                type: Object,
-                default: () => {
-                    return {
-                        _key: "noDepart"
-                    };
-                }
-            },
-            company: {
-                type: Object,
-                default: () => {
-                    return {};
-                }
-            },
-            propsDropdownList: Array
-        },
-        data () {
-            return {
-                deleteModal: true,
-                initDropdownList: [
-                    {
-                        name: "修改部门信息",
-                        type: "change",
-                        event: "showChange",
-                        icon: "ios-create-outline"
-                    }
-                ]
-            };
-        },
-        computed: {
-            departSelected: {
-                get () {
-                    return this.propSelect;
-                },
-                set (val) {
-                    this.propSelect._key = val._key;
-                }
-            },
-
-            dropdownList () {
-                if (this.propsDropdownList) {
-                    return this.propsDropdownList;
-                } else {
-                    return this.company.allowAddDepartment
-                        ? [
-                            {
-                                name: "添加下级部门",
-                                type: "addSub",
-                                event: "addSubDepartment",
-                                icon: "ios-add-circle-outline"
-                            },
-                            ...this.initDropdownList,
-                            {
-                                name: "删除部门",
-                                type: "delete",
-                                event: "tipDelete",
-                                icon: "ios-trash-outline"
-                            },
-                            {
-                                name: "移动部门",
-                                type: "remove",
-                                event: "removeDepartment",
-                                icon: "ios-move"
-                            },
-                            {
-                                name: "向上移动",
-                                type: "up",
-                                event: "upDownDepartment",
-                                icon: "md-arrow-up"
-                            },
-                            {
-                                name: "向下移动",
-                                type: "down",
-                                event: "upDownDepartment",
-                                icon: "md-arrow-down"
-                            }
-                        ]
-                        : this.initDropdownList;
-                }
-            }
-        },
-        created () {},
-        methods: {
-            addSubDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
-                this.$emit("showAddModal", current);
-            },
-            addPeerDepartment () {
-                this.$emit("showAddModal", this.parent);
-            },
-            departClick (department) {
-                this.departSelected = department;
-                this.$emit("departClick", department);
-            },
-            toggleChildren (depart) {
-                depart.isShowChildren = !depart.isShowChildren;
-                this.$forceUpdate();
-            },
-            showAddModal (parent) {
-                this.$emit("showAddModal", parent);
-            },
-            deleteDepart (current) {
-                this.departSelected = {_key: "noDepart"};
-                this.$emit("deleteDepart", current);
-            },
-            // 提示删除
-            tipDelete (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
-                this.$Modal.confirm({
-                    title: "警告",
-                    content: "确定要删除该部门吗？",
-                    onOk: () => {
-                        this.deleteDepart(current);
-                    },
-                    onCancel: () => {
-                        this.$Message.info("已取消！");
-                    }
-                });
-            },
-            // 修改部门
-            showChange (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
-                this.$emit("showChange", current);
-            },
-            showChilrenChange (depart) {
-                this.$emit("showChange", depart);
-            },
-            // 移动部门
-            removeDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
-                this.$emit("removeDepartment", dropdownItem, dropdownIndex, current, currentUserIndex, parent);
-            },
-            // 向上移动部门
-            upDownDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
-                this.$emit("upDownDepartment", dropdownItem, dropdownIndex, current, currentUserIndex, parent);
-            },
-
-            getIcon (depart) {
-                return depart.isShowChildren ? "ios-arrow-down" : "ios-arrow-forward";
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .departMenu {
-        font-size: 14px;
-
-        &-item {
-            width: 100%;
-            line-height: 38px;
-            text-align: left;
-            cursor: pointer;
-            overflow: hidden;
-            border-radius: 6px;
-
-            .ivu-icon {
-                color: @textColor;
-            }
-
-            &-name {
-                display: flex;
-                justify-content: space-between;
-                align-items: flex-start;
-                padding: 8px 5px 8px 20px;
-                line-height: 24px;
-                font-weight: 400;
-                font-size: 16px;
-                color: @textColor;
-
-                &:hover {
-                    background-color: rgba(36, 36, 63, 0.03);
-                }
-
-                &-select {
-                    background-color: rgba(36, 36, 63, 0.03);
-                    font-weight: 500;
-                    color: @themeColor;
-                    position: relative;
-
-                    &::before {
-                        position: absolute;
-                        left: 0px;
-                        top: 5px;
-                        bottom: 5px;
-
-                        content: "";
-                        display: block;
-                        width: 4px;
-                        border-radius: 2px 0px 0px 2px;
-                        background-color: @themeColor;
-                    }
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div class="departMenu">
+        <div
+            v-if="!parent && canEdit"
+            :class="{
+                'departMenu-item': true,
+                'departMenu-item-select': departSelected._key === 'noDepart' || departSelected === null
+            }"
+        >
+            <div
+                :class="{
+                    'departMenu-item-name': true,
+                    'departMenu-item-name-select': departSelected._key === 'noDepart' || departSelected === null
+                }"
+                @click="departClick({'_key': 'noDepart'})"
+            >
+                无部门员工
+            </div>
+        </div>
+
+        <div
+            v-for="(depart, departIndex) in list"
+            :key="depart._key"
+            :class="{
+                'departMenu-item': true,
+                'departMenu-item-select': departSelected._key ===  depart._key
+            }"
+        >
+            <div
+                :class="{
+                    'departMenu-item-name': true,
+                    'departMenu-item-name-select': departSelected._key === depart._key
+                }"
+                @click.stop="departClick(depart)"
+            >
+                <span>
+                    <Icon
+                        v-if="depart.children && depart.children.length"
+                        :type="getIcon(depart)"
+                        @click.stop="toggleChildren(depart)"
+                    />
+                    <span
+                        v-else
+                        style="margin-right:1px"
+                    ></span>
+                    <Icon
+                        v-if="useIcon"
+                        custom="bico-font bri-qiye bico-qiye"
+                    />
+                    <span class="departMenu-item-name-text">
+                        {{ depart.name }}
+                    </span>
+                </span>
+
+                <dsh-dropdown
+                    v-if="canEdit"
+                    trigger="hover"
+                    :list="dropdownList"
+                    @click="$dispatchEvent($event, undefined, depart, departIndex, parent)"
+                ></dsh-dropdown>
+            </div>
+
+            <template v-if="depart.isShowChildren">
+                <depart-menu
+                    style="margin-left: 20px"
+                    :canEdit="canEdit"
+                    :list="depart.children"
+                    :parent="depart"
+                    :propSelect="departSelected"
+                    :propsDropdownList="propsDropdownList"
+                    :company="company"
+                    @showAddModal="showAddModal"
+                    @showChange="showChilrenChange"
+                    @deleteDepart="deleteDepart"
+                    @departClick="departClick"
+                    @removeDepartment="removeDepartment"
+                    @upDownDepartment="upDownDepartment"
+                ></depart-menu>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "departMenu",
+        props: {
+            canEdit: {
+                type: Boolean,
+                default: false
+            },
+            useIcon: {
+                type: Boolean,
+                default: true
+            },
+
+            parent: Object,
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propSelect: {
+                type: Object,
+                default: () => {
+                    return {
+                        _key: "noDepart"
+                    };
+                }
+            },
+            company: {
+                type: Object,
+                default: () => {
+                    return {};
+                }
+            },
+            propsDropdownList: Array
+        },
+        data () {
+            return {
+                deleteModal: true,
+                initDropdownList: [
+                    {
+                        name: "修改部门信息",
+                        type: "change",
+                        event: "showChange",
+                        icon: "ios-create-outline"
+                    }
+                ]
+            };
+        },
+        computed: {
+            departSelected: {
+                get () {
+                    return this.propSelect;
+                },
+                set (val) {
+                    this.propSelect._key = val._key;
+                }
+            },
+
+            dropdownList () {
+                if (this.propsDropdownList) {
+                    return this.propsDropdownList;
+                } else {
+                    return this.company.allowAddDepartment
+                        ? [
+                            {
+                                name: "添加下级部门",
+                                type: "addSub",
+                                event: "addSubDepartment",
+                                icon: "ios-add-circle-outline"
+                            },
+                            ...this.initDropdownList,
+                            {
+                                name: "删除部门",
+                                type: "delete",
+                                event: "tipDelete",
+                                icon: "ios-trash-outline"
+                            },
+                            {
+                                name: "移动部门",
+                                type: "remove",
+                                event: "removeDepartment",
+                                icon: "ios-move"
+                            },
+                            {
+                                name: "向上移动",
+                                type: "up",
+                                event: "upDownDepartment",
+                                icon: "md-arrow-up"
+                            },
+                            {
+                                name: "向下移动",
+                                type: "down",
+                                event: "upDownDepartment",
+                                icon: "md-arrow-down"
+                            }
+                        ]
+                        : this.initDropdownList;
+                }
+            }
+        },
+        created () {},
+        methods: {
+            addSubDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$emit("showAddModal", current);
+            },
+            addPeerDepartment () {
+                this.$emit("showAddModal", this.parent);
+            },
+            departClick (department) {
+                this.departSelected = department;
+                this.$emit("departClick", department);
+            },
+            toggleChildren (depart) {
+                depart.isShowChildren = !depart.isShowChildren;
+                this.$forceUpdate();
+            },
+            showAddModal (parent) {
+                this.$emit("showAddModal", parent);
+            },
+            deleteDepart (current) {
+                this.departSelected = { _key: "noDepart" };
+                this.$emit("deleteDepart", current);
+            },
+            // 提示删除
+            tipDelete (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$Modal.confirm({
+                    title: "警告",
+                    content: "确定要删除该部门吗？",
+                    onOk: () => {
+                        this.deleteDepart(current);
+                    },
+                    onCancel: () => {
+                        this.$Message.info("已取消！");
+                    }
+                });
+            },
+            // 修改部门
+            showChange (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$emit("showChange", current);
+            },
+            showChilrenChange (depart) {
+                this.$emit("showChange", depart);
+            },
+            // 移动部门
+            removeDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$emit("removeDepartment", dropdownItem, dropdownIndex, current, currentUserIndex, parent);
+            },
+            // 向上移动部门
+            upDownDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$emit("upDownDepartment", dropdownItem, dropdownIndex, current, currentUserIndex, parent);
+            },
+
+            getIcon (depart) {
+                return depart.isShowChildren ? "ios-arrow-down" : "ios-arrow-forward";
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .departMenu {
+        font-size: 14px;
+
+        &-item {
+            width: 100%;
+            line-height: 38px;
+            text-align: left;
+            cursor: pointer;
+            overflow: hidden;
+            border-radius: 6px;
+
+            .ivu-icon {
+                color: @textColor;
+            }
+
+            &-name {
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-start;
+                padding: 8px 5px 8px 20px;
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 16px;
+                color: @textColor;
+
+                &:hover {
+                    background-color: rgba(36, 36, 63, 0.03);
+                }
+
+                &-select {
+                    background-color: rgba(36, 36, 63, 0.03);
+                    font-weight: 500;
+                    color: @themeColor;
+                    position: relative;
+
+                    &::before {
+                        position: absolute;
+                        left: 0px;
+                        top: 5px;
+                        bottom: 5px;
+
+                        content: "";
+                        display: block;
+                        width: 4px;
+                        border-radius: 2px 0px 0px 2px;
+                        background-color: @themeColor;
+                    }
+                }
+            }
+        }
+    }
+</style>