bri-components 1.2.50 → 1.2.52

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

@@ -12,8 +12,7 @@
                     <bri-control-input
                         v-if="canEdit"
                         :class="{
-                            ...commonClass,
-                            'selectDepartments-edit': true
+                            ...commonClass
                         }"
                         :canEdit="finalCanEdit"
                         :value="curValList"
@@ -27,8 +26,7 @@
                     <div
                         v-else
                         :class="{
-                            ...commonClass,
-                            'selectDepartments-show': true
+                            ...commonClass
                         }"
                     >
                         <dsh-tags
@@ -318,3 +316,79 @@
         }
     };
 </script>
+
+<style lang="less">
+    .selectDepartments {
+        width: 100%;
+
+        &-list {
+            height: 500px;
+            .dsh-flex-col-start-stretch();
+
+            .list {
+                &-selected {
+                    padding: 0 15px;
+                    line-height: 30px;
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+
+                    &-label {}
+
+                    .item {
+                        max-width: 230px;
+                        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;
+                        }
+                    }
+                }
+
+                &-search {
+                    padding: 10px 15px;
+                }
+
+                &-center {
+                    flex: 1;
+                    min-height: 100px;
+                    padding: 5px 0 10px;
+                    overflow: auto;
+
+                    &-tree {
+                        .tree {
+                            &-nodata {
+                                #dsh-nodata();
+                            }
+                        }
+                    }
+
+                    &-card {
+                        .card {
+                            &-high-title {
+                                padding: 10px 0px;
+                                clear: both;
+                                text-align: left;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>

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

@@ -39,6 +39,7 @@
                         :type="getIcon(depart)"
                         @click.stop="toggleChildren(depart)"
                     />
+                    <Icon custom="bico-font bri-qiye bico-qiye" />
                     <span class="DepartmentMenu-item-name-text">
                         {{ depart.name }}
                     </span>
@@ -54,16 +55,19 @@
 
             <template v-if="depart.isShowChildren">
                 <department-menu
+                    style="margin-left: 15px"
+                    :canEdit="canEdit"
                     :list="depart.children"
-                    style="margin-left:15px"
                     :parent="depart"
                     :propSelect="departSelected"
-                    :canEdit="canEdit"
+                    :propsDropdownList="propsDropdownList"
+                    :company="company"
                     @showAddModal="showAddModal"
                     @showChange="showChilrenChange"
                     @deleteDepart="deleteDepart"
                     @departClick="departClick"
                     @removeDepartment="removeDepartment"
+                    @upDownDepartment="upDownDepartment"
                 ></department-menu>
             </template>
         </div>
@@ -90,45 +94,29 @@
                 default: () => {
                     return {_key: "noDepart"};
                 }
-            }
+            },
+            company: {
+                type: Object,
+                default: () => {
+                    return {};
+                }
+            },
+            propsDropdownList: Array
         },
         data () {
             return {
                 deleteModal: true,
-                dropdownList: [
-                    {
-                        name: "添加下级部门",
-                        type: "addSub",
-                        event: "addSubDepartment",
-                        icon: "ios-add-circle-outline"
-                    },
+                initDropdownList: [
                     {
                         name: "修改部门信息",
                         type: "change",
                         event: "showChange",
                         icon: "ios-create-outline"
-                    },
-                    {
-                        name: "删除部门",
-                        type: "delete",
-                        event: "tipDelete",
-                        icon: "ios-trash-outline"
-                    },
-                    {
-                        name: "移动部门",
-                        type: "remove",
-                        event: "removeDepartment",
-                        icon: "ios-move"
                     }
                 ]
             };
         },
         computed: {
-            getIcon () {
-                return function (depart) {
-                    return depart.isShowChildren ? "ios-arrow-down" : "ios-arrow-forward";
-                };
-            },
             departSelected: {
                 get () {
                     return this.propSelect;
@@ -136,10 +124,51 @@
                 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 () {
-        },
+        created () {},
         methods: {
             addSubDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
                 this.$emit("showAddModal", current);
@@ -185,7 +214,69 @@
             // 移动部门
             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">
+    .DepartmentMenu {
+        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>

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

@@ -12,8 +12,7 @@
                     <bri-control-input
                         v-if="canEdit"
                         :class="{
-                            ...commonClass,
-                            'selectUsers-edit': true
+                            ...commonClass
                         }"
                         :canEdit="finalCanEdit"
                         :value="curValList"
@@ -55,8 +54,7 @@
                     <div
                         v-else
                         :class="{
-                            ...commonClass,
-                            'selectUsers-show': true
+                            ...commonClass
                         }"
                     >
                         <dsh-tags
@@ -111,7 +109,6 @@
                         <!-- 右 部门对应的成员 -->
                         <div class="content-users">
                             <bri-loading v-if="loading" />
-
                             <template v-else>
                                 <!-- 有数据 -->
                                 <div
@@ -470,3 +467,180 @@
         }
     };
 </script>
+
+<style lang="less">
+    .selectUsers {
+        width: 100%;
+
+        &-unit {
+            .dsh-ellipsis();
+            padding-left: 5px;
+
+            &-img {
+                width: 18px;
+                height: 18px;
+                vertical-align: middle;
+                margin-left: -5px;
+                border-radius: 50%;
+            }
+
+            &-text {
+                vertical-align: middle;
+            }
+        }
+
+        // 弹框部分
+        &-modal {
+            &-wrap {
+                display: flex;
+                height: 500px;
+
+                &-left {
+                    width: 520px;
+                    overflow-y: auto;
+                    background: @white;
+                    border: 1px solid #E5E5E5;
+
+                    .search {
+                        padding: 10px 20px;
+                    }
+
+                    .content {
+                        display: flex;
+                        height: calc(100% - 52px);
+                        border-top: 1px solid #E5E5E5;
+
+                        &-menu {
+                            flex: 3;
+                            height: 100%;
+                            overflow: auto;
+                        }
+
+                        &-users {
+                            flex: 2;
+                            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;
+
+                                &-checkAll {
+                                    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;
+                    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;
+                    width: 0px;
+                    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-bottom: 10px;
+
+                    .DshButtons {
+                        text-align: right;
+                        padding-right: 24px;
+
+                        .ivu-btn {
+                            width: 70px;
+                            height: 32px;
+                            margin-right: 13px;
+                        }
+                    }
+                }
+            }
+
+            .ivu-modal {
+                width: 900px !important;
+            }
+        }
+    }
+</style>

package/src/components/controls/special/DshBack.vue

@@ -35,7 +35,7 @@
     };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
     .DshBack {
 
     }

package/src/components/controls/special/DshUndeveloped.vue

@@ -34,7 +34,7 @@
     };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
     .DshUndeveloped {
 
     }