主题样式修改 03-28

src/assets/styles/archives-manage.scss

@@ -576,10 +576,10 @@
 
 // 借阅管理
 .el-dialog .el-dialog__body{
-  .el-button{
-    background-color: #3A99FD;
-    border-color: #3A99FD;
-  }
+  // .el-button{
+  //   background-color: #3A99FD;
+  //   border-color: #3A99FD;
+  // }
   .el-button.is-disabled,
   .el-button.is-disabled:hover,
   .el-button.is-disabled:focus{
@@ -722,15 +722,17 @@
 }
 
 .el-tag.el-tag--info {
-  height: 26px;
-  line-height: 26px;
-  background-color: #13439E;
+  margin: 0 0 0 8px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 12px;
+  background-color: #E8F2FF;
   border: none;
-  color: #fff;
+  color: #0348F3;
 }
 
 .el-tag.el-tag--info .el-tag__close {
-  background-color: #fff;
+  background-color: #0348F3;
 }
 
 //出入库

src/assets/styles/mixin.scss

@@ -360,7 +360,7 @@
   }
 }
 
-
+// el-table
 @mixin elTable-style{
   [data-theme="dark"] & {
     background-color: #02255f;
@@ -435,4 +435,77 @@
       border-color: #fff;
     }
   }
+}
+
+// el-pagination
+@mixin pagination-font{
+  [data-theme="dark"] & {
+    color: $mainColor;
+  }
+  [data-theme="light"] & {
+    color: #545B65;
+  }
+}
+
+@mixin pagination-input{
+  @include pagination-font;
+  [data-theme="dark"] & {
+    border-color: $mainColor;
+  }
+  [data-theme="light"] & {
+    border-color: #E3E7EE;
+  }
+}
+
+@mixin pagination-active{
+  [data-theme="dark"] & {
+    background-color: #2072D2;
+    border-color: #2072D2;
+  }
+  [data-theme="light"] & {
+    background-color:#0348F3;
+    border-color: #0348F3;
+  }
+}
+
+@mixin pagination-paper{
+  @include pagination-font;
+  [data-theme="dark"] & {
+    border: 1px solid $mainColor;
+  }
+  [data-theme="light"] & {
+    border: 1px solid #E3E7EE;
+  }
+}
+
+@mixin pagination-paper-more{
+  [data-theme="dark"] & {
+    color: $mainColor;
+  }
+  [data-theme="light"] & {
+    color: #E3E7EE;
+  }
+}
+
+// switch
+@mixin switch-style{
+  [data-theme="dark"] &{
+    border-color: rgb(64, 158, 255);
+    background-color: rgb(64, 158, 255);
+  }
+  [data-theme="light"] & {
+    border-color: #0348F3 !important;
+    background-color: #0348F3 !important;
+  }
+}
+
+@mixin switch-disabled{
+  [data-theme="dark"] &{
+    border-color: rgb(64, 158, 255);
+    background-color: rgb(64, 158, 255);
+  }
+  [data-theme="light"] & {
+    border-color: #D6DBE7 !important;
+    background-color: #D6DBE7 !important;
+  }
 }

src/assets/styles/yxk-admin.scss

@@ -344,14 +344,16 @@
 .el-pagination{
   display: flex;
   justify-content: flex-end;
-  // padding: 2px 10px;
+  padding: 0;
   margin: 64px 0 10px 0 !important;
   .el-pagination__total{
-    color: $mainColor;
+    font-size: 12px;
+    @include pagination-font;
   }
-  button{
-    height: 24px;
-    line-height: 24px;
+  button,
+  span:not([class*=suffix]){
+    height: 24px!important;
+    line-height: 24px!important;
     background-color: transparent;
     &:disabled{
       background-color: transparent;
@@ -360,224 +362,366 @@
   .el-pager li{
     min-width: 24px;
     height: 24px;
+    margin: 0 4px;
     line-height: 24px;
-    color: $mainColor;
+    border: 1px solid #fff;
+    font-size: 12px;
+    @include pagination-input;
     background-color: transparent;
+    &.more{
+      border: none;
+      @include pagination-paper-more;
+      &::before{
+        margin-right: 0 !important;
+        line-height: 24px !important;
+      }
+    }
   }
   .el-pager li.active{
     color: #fff;
-    background-color: #2072D2;
+    @include pagination-active;
+    &+li{
+     @include pagination-paper;
+    }
   }
-  .el-select .el-input .el-input__inner{
-    background-color: transparent;
-    color: $mainColor;
-    border-color: $mainColor;
+  .el-select .el-input {
+    width: 70px;
+    margin: 0 !important;
+    .el-input__inner{
+      height: 24px;
+      line-height: 24px;
+      padding-left: 6px;
+      padding-right: 18px !important;
+      font-size: 12px;
+      background-color: transparent;
+      border-radius: 0;
+      @include pagination-input;
+    }
   }
   .el-icon-arrow-right:before{
-    color: $mainColor;
+    @include pagination-font;
   }
   .btn-prev,
   .btn-next{
-    color: $mainColor;
+    @include pagination-font;
     background-color: transparent;
   }
   .el-select .el-input .el-select__caret{
-    color: $mainColor;
+    line-height: 24px;
+    @include pagination-font;
   }
 }
 
 // 弹框
 .el-dialog{
-  position: relative;
-  position: fixed;
-  width: 620px;
-  padding: 2px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  margin-top: 2vh !important;
-  background: linear-gradient(135deg, transparent 10px, $mainColor 0) top left, 
-              linear-gradient(-135deg, transparent 10px, $mainColor 0) top right, 
-              linear-gradient(-45deg, transparent 10px, $mainColor 0) bottom right, 
-              linear-gradient(45deg, transparent 10px, $mainColor 0) bottom left;
-  background-size: 50% 50%;
-  background-repeat: no-repeat;
-  &::before,
-  &::after,
-  .dialog-right-top,
-  .dialog-left-bottom{
-    position: absolute;
-    content: "";
-    width: 134px;
-    height: 63px;
-    z-index: 99;
-  }
-  &::before{
-    left: -6px;
-    top: -6px;
-    background: url(~@/assets/images/dialog_left_top.png) no-repeat;
-    background-size: contain;
-  }
-  &::after{
-    right: -18px;
-    bottom: -7px;
-    background: url(~@/assets/images/dialog_right_bottom.png) no-repeat;
-    background-size: contain;
-  }
-  .dialog-right-top{
-    right: -23px;
-    top: -6px;
-    background: url(~@/assets/images/dialog_right_top.png) no-repeat;
-    background-size: contain;
-  }
-  .dialog-left-bottom{
-    left: -6px;
-    bottom: -7px;
-    background: url(~@/assets/images/dialog_left_bottom.png) no-repeat;
-    background-size: contain;
-  }
+  width: 736px;
+  padding: 0 20px;
   .el-dialog__header{
-    position: absolute;
-    top: -40px;
-    left: 50%;
-    width: 360px;
-    padding: 0;
-    transform: translateX(-50%);
-    &::before{
-      position: absolute;
-      left: -23px;
-      top: 0;
-      content: "";
-      width: 23px;
-      height: 42px;
-      background: url(~@/assets/images/dialog_left.png) no-repeat;
-      background-size: cover;
-    }
-    &::after{
-      position: absolute;
-      right: -23px;
-      top: 0;
-      content: "";
-      width: 23px;
-      height: 42px;
-      background: url(~@/assets/images/dialog_right.png) no-repeat;
-      background-size: cover;
-    }
+    padding: 17px 0;
+    border-bottom: 1px solid #E6E8ED;
     .el-dialog__title{
-      display: block;
-      font-size: 18px;
-      font-weight: bold;
-      line-height: 38px;
-      color: #fff;
-      text-align: center;
-      background-color: $boxBg;
-      border-top: 2px solid $mainColor;
-      border-bottom: 2px solid $mainColor;
-    }
-    .el-dialog__headerbtn{
-      top: 4px;
-      right: -160px;
+      font-size: 16px;
     }
     .el-dialog__close{
       font-family: "iconfont" !important;
       font-style: normal;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      font-size: 24px;
-      color: $mainColor;
+      font-size: 14px;
+      color: #545B65;
       &::before{
-        content: "\e60c";
+        content: "\e61c";
       }
     }
   }
   .el-dialog__body{
-    width: 100%;
-    background-color: $boxBg;
-    // border: 2px solid $mainColor;
-    // min-height: 400px;
-    // background: linear-gradient(135deg, transparent 12px, $boxBg 0) top left, 
-    //           linear-gradient(-135deg, transparent 12px, $boxBg 0) top right, 
-    //           linear-gradient(-45deg, transparent 12px, $boxBg 0) bottom right, 
-    //           linear-gradient(45deg, transparent 12px, $boxBg 0) bottom left;
-    // background-size: 50% 50%;
-    // background-repeat: no-repeat;
-    // box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6);
-  }
-  .dialog-footer{
-    margin: 30px auto 0 auto;
-    text-align: center;
-    .el-button{
-      font-size: 16px;
-      padding: 8px 28px;
-    }
-    .el-button--primary{
-      background-color: $desPreviewColor;
-    }
-  }
-}
-.el-dialog,
-.right-preview{
-  .el-form{
-    .el-form-item__label{
-      color: $mainColor;
-    }
-    .el-input__inner{
-      color: #fff;
-      border: 1px solid $mainColor;
-      background-color: transparent !important;
-    }
-    .vue-treeselect__control, 
-    .vue-treeselect__placeholder,
-    .vue-treeselect__single-value{
-      height: 28px;
-      // line-height: 28px;
-      color: #fff;      
-    }
-    .vue-treeselect__control{
-      border: 1px solid $mainColor;
-      background-color: transparent;
-      .vue-treeselect__control-arrow{
-        color: $mainColor;
+    padding: 30px 0;
+    .el-form-item{
+      .el-form-item__label{
+        color: #0C0E1E;
+      }
+      .el-form-item__content{
+        width: 225px;
+        .el-input__inner{
+          border-color: #E6E8ED;
+          &:focus{
+            border-color:#0348F3;
+          }
+        }
+        .vue-treeselect__control{
+          height: 32px;
+          border-color: #E6E8ED;
+         .vue-treeselect__control,
+          .vue-treeselect__placeholder,
+          .vue-treeselect__single-value {
+            height: 32px;
+            line-height: 32px;
+          }
+        }
+        .el-icon-close{
+          border-radius: 0;
+          font-family: "iconfont" !important;
+          font-style: normal;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          background-color: transparent;
+          color: #0348F3;
+          &:before{
+            content: "\E61b";
+          }
+        }
+        .el-radio__inner::after{
+          width: 8px;
+          height: 8px;
+        }
+        .el-radio__input.is-checked{
+          .el-radio__inner{
+            border-color: #0348F3;
+            background: #0348F3;
+          }
+          &+.el-radio__label{
+            color: #545B65;
+          }
+        }
+        
+      }
+      &.is-error .el-input__inner, 
+      &.is-error .el-input__inner:focus, 
+      &.is-error .el-textarea__inner, 
+      &.is-error .el-textarea__inner:focus{
+        border-color:#ED4A41;
       }
     }
-    .el-radio{
-      color: #fff;
-    }
-    .el-textarea__inner{
-      color: #fff;
-      border: 1px solid $mainColor;
-      background-color: transparent;
+    .selecct-dropdown{
+      .el-select-dropdown{
+        padding: 6px 0;
+        margin-top: 0;
+        .el-select-dropdown__item{
+          height: 26px;
+          line-height: 26px;
+        }
+      }
     }
-    .el-input-number.is-controls-right[class*=small] [class*=increase], 
-    .el-input-number.is-controls-right[class*=small] [class*=decrease]{
+  }
+  .dialog-footer{
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 60px;
+    .el-button{
+      width: 76px;
+      height: 32px;
+      line-height: 32px;
+      padding: 0;
+      border-color: #E6E8ED;
       background-color: transparent;
-    }
-    .el-input-number__decrease,
-    .el-input-number__increase{
-      border-left-color: $mainColor;
-      &>i{
+      color: #545B65;
+      font-weight: normal;
+      &.el-button--primary{
         color: #fff;
+        background-color: #0348F3;
+        border-color: #0348F3;
       }
     }
-    .el-input-number__increase{
-      border-bottom-color: $mainColor;
-    }
-    .el-select .el-input .el-select__caret{
-      color: $mainColor;
-    }
-    .vue-treeselect .vue-treeselect__control:focus,
-    .vue-treeselect .vue-treeselect__control:hover{
-      border-color: $mainColor !important;
-    }
-    .vue-treeselect.vue-treeselect--disabled .vue-treeselect__control,
-    .el-input.is-disabled .el-input__inner,
-    .el-textarea.is-disabled .el-textarea__inner{
-      color: $desPreviewColor !important;
-      border: none !important;
-      background-color: #02255f!important;
-    }
-  }
+    
+  }
+  // position: relative;
+  // position: fixed;
+  // width: 620px;
+  // padding: 2px;
+  // left: 50%;
+  // top: 50%;
+  // transform: translate(-50%, -50%);
+  // margin-top: 2vh !important;
+  // background: linear-gradient(135deg, transparent 10px, $mainColor 0) top left, 
+  //             linear-gradient(-135deg, transparent 10px, $mainColor 0) top right, 
+  //             linear-gradient(-45deg, transparent 10px, $mainColor 0) bottom right, 
+  //             linear-gradient(45deg, transparent 10px, $mainColor 0) bottom left;
+  // background-size: 50% 50%;
+  // background-repeat: no-repeat;
+  // &::before,
+  // &::after,
+  // .dialog-right-top,
+  // .dialog-left-bottom{
+  //   position: absolute;
+  //   content: "";
+  //   width: 134px;
+  //   height: 63px;
+  //   z-index: 99;
+  // }
+  // &::before{
+  //   left: -6px;
+  //   top: -6px;
+  //   background: url(~@/assets/images/dialog_left_top.png) no-repeat;
+  //   background-size: contain;
+  // }
+  // &::after{
+  //   right: -18px;
+  //   bottom: -7px;
+  //   background: url(~@/assets/images/dialog_right_bottom.png) no-repeat;
+  //   background-size: contain;
+  // }
+  // .dialog-right-top{
+  //   right: -23px;
+  //   top: -6px;
+  //   background: url(~@/assets/images/dialog_right_top.png) no-repeat;
+  //   background-size: contain;
+  // }
+  // .dialog-left-bottom{
+  //   left: -6px;
+  //   bottom: -7px;
+  //   background: url(~@/assets/images/dialog_left_bottom.png) no-repeat;
+  //   background-size: contain;
+  // }
+  // .el-dialog__header{
+  //   position: absolute;
+  //   top: -40px;
+  //   left: 50%;
+  //   width: 360px;
+  //   padding: 0;
+  //   transform: translateX(-50%);
+  //   &::before{
+  //     position: absolute;
+  //     left: -23px;
+  //     top: 0;
+  //     content: "";
+  //     width: 23px;
+  //     height: 42px;
+  //     background: url(~@/assets/images/dialog_left.png) no-repeat;
+  //     background-size: cover;
+  //   }
+  //   &::after{
+  //     position: absolute;
+  //     right: -23px;
+  //     top: 0;
+  //     content: "";
+  //     width: 23px;
+  //     height: 42px;
+  //     background: url(~@/assets/images/dialog_right.png) no-repeat;
+  //     background-size: cover;
+  //   }
+  //   .el-dialog__title{
+  //     display: block;
+  //     font-size: 18px;
+  //     font-weight: bold;
+  //     line-height: 38px;
+  //     color: #fff;
+  //     text-align: center;
+  //     background-color: $boxBg;
+  //     border-top: 2px solid $mainColor;
+  //     border-bottom: 2px solid $mainColor;
+  //   }
+  //   .el-dialog__headerbtn{
+  //     top: 4px;
+  //     right: -160px;
+  //   }
+  //   .el-dialog__close{
+  //     font-family: "iconfont" !important;
+  //     font-style: normal;
+  //     -webkit-font-smoothing: antialiased;
+  //     -moz-osx-font-smoothing: grayscale;
+  //     font-size: 24px;
+  //     color: $mainColor;
+  //     &::before{
+  //       content: "\e60c";
+  //     }
+  //   }
+  // }
+  // .el-dialog__body{
+  //   width: 100%;
+  //   // background-color: $boxBg;
+  //   // border: 2px solid $mainColor;
+  //   // min-height: 400px;
+  //   // background: linear-gradient(135deg, transparent 12px, $boxBg 0) top left, 
+  //   //           linear-gradient(-135deg, transparent 12px, $boxBg 0) top right, 
+  //   //           linear-gradient(-45deg, transparent 12px, $boxBg 0) bottom right, 
+  //   //           linear-gradient(45deg, transparent 12px, $boxBg 0) bottom left;
+  //   // background-size: 50% 50%;
+  //   // background-repeat: no-repeat;
+  //   // box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6);
+  // }
+  // .dialog-footer{
+  //   margin: 30px auto 0 auto;
+  //   text-align: center;
+  //   .el-button{
+  //     font-size: 16px;
+  //     padding: 8px 28px;
+  //   }
+  //   .el-button--primary{
+  //     background-color: $desPreviewColor;
+  //   }
+  // }
+}
+// .el-dialog,
+// .right-preview{
+//   .el-form{
+//     .el-form-item__label{
+//       color: $mainColor;
+//     }
+//     .el-input__inner{
+//       color: #fff;
+//       border: 1px solid $mainColor;
+//       background-color: transparent !important;
+//     }
+//     .vue-treeselect__control, 
+//     .vue-treeselect__placeholder,
+//     .vue-treeselect__single-value{
+//       height: 28px;
+//       // line-height: 28px;
+//       color: #fff;      
+//     }
+//     .vue-treeselect__control{
+//       border: 1px solid $mainColor;
+//       background-color: transparent;
+//       .vue-treeselect__control-arrow{
+//         color: $mainColor;
+//       }
+//     }
+//     .el-radio{
+//       color: #fff;
+//     }
+//     .el-textarea__inner{
+//       color: #fff;
+//       border: 1px solid $mainColor;
+//       background-color: transparent;
+//     }
+//     .el-input-number.is-controls-right[class*=small] [class*=increase], 
+//     .el-input-number.is-controls-right[class*=small] [class*=decrease]{
+//       background-color: transparent;
+//     }
+//     .el-input-number__decrease,
+//     .el-input-number__increase{
+//       border-left-color: $mainColor;
+//       &>i{
+//         color: #fff;
+//       }
+//     }
+//     .el-input-number__increase{
+//       border-bottom-color: $mainColor;
+//     }
+//     .el-select .el-input .el-select__caret{
+//       color: $mainColor;
+//     }
+//     .vue-treeselect .vue-treeselect__control:focus,
+//     .vue-treeselect .vue-treeselect__control:hover{
+//       border-color: $mainColor !important;
+//     }
+//     .vue-treeselect.vue-treeselect--disabled .vue-treeselect__control,
+//     .el-input.is-disabled .el-input__inner,
+//     .el-textarea.is-disabled .el-textarea__inner{
+//       color: $desPreviewColor !important;
+//       border: none !important;
+//       background-color: #02255f!important;
+//     }
+//   }
+// }
+
+.el-form-item.is-error .el-input__inner, 
+.el-form-item.is-error .el-input__inner:focus, 
+.el-form-item.is-error .el-textarea__inner, 
+.el-form-item.is-error .el-textarea__inner:focus{
+  border-color:#ED4A41;
 }
+
 // el-tree 最终节点不显示箭头
 .is-leaf::before  {
   color: transparent;
@@ -779,29 +923,29 @@
     }
   }
 }
-.preview-dialog{
-  .el-dialog{
-    width: 680px !important;
-    .preview-content{
-      max-height: calc(100vh - 330px) !important;
-      overflow: hidden !important;
-      overflow-y: auto !important;
-      border: none !important;
-      .el-textarea__inner{
-        border: 1px solid $mainColor !important;
-        background-color: transparent !important;
-      }
-    }
-    .el-dialog__header{
-      width: 420px !important;
-    }
-  }
-}
-.preview-dialog{
-  .el-dialog__body{
-    padding: 30px 0 !important;
-  }
-}
+// .preview-dialog{
+//   .el-dialog{
+//     width: 680px !important;
+//     .preview-content{
+//       max-height: calc(100vh - 330px) !important;
+//       overflow: hidden !important;
+//       overflow-y: auto !important;
+//       border: none !important;
+//       .el-textarea__inner{
+//         border: 1px solid $mainColor !important;
+//         background-color: transparent !important;
+//       }
+//     }
+//     .el-dialog__header{
+//       width: 420px !important;
+//     }
+//   }
+// }
+// .preview-dialog{
+//   .el-dialog__body{
+//     padding: 30px 0 !important;
+//   }
+// }
 // 去除element ui 中el-input type=“number“的上下箭头
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
@@ -855,14 +999,14 @@ input[type ='number'] {
       right: -16px;
     }
     .el-icon-close{
-        font-family: "iconfont" !important;
-        font-style: normal;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        font-size: 24px;
-        color: $mainColor;
+      font-family: "iconfont" !important;
+      font-style: normal;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      font-size: 24px;
+      color: $mainColor;
       &::before{
-        content: "\E60C";
+        content: "\E61b";
       }
     }
   }
@@ -923,22 +1067,19 @@ input[type ='number'] {
   top: 46px !important;
 }
 .el-select-dropdown__item{
-  // color: $mainColor;
   @include icon_color;
 }
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover{
-  // background-color: #13439E;
   @include dropdown_bg_hover;
 }
 
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
   background-color: transparent;
-  color: #fff;
+  @include icon_color;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
-  background-color: #13439E;
-  color: #fff;
+  @include dropdown_bg_hover;
 }
 
 .el-popper[x-placement^=bottom] .popper__arrow{
@@ -1173,4 +1314,37 @@ input[type ='number'] {
     transform: translateY(-50%);
     background: url('~@/assets/images/warehouse_arrow_right.png') no-repeat;
   }
+}
+
+.el-switch.is-checked .el-switch__core{
+  @include switch-style;
+}
+
+.el-switch.is-disabled .el-switch__core{
+  @include switch-disabled;
+}
+
+.vue-treeselect--open-below .vue-treeselect__menu{
+  padding: 6px 0;
+  top: 4px !important;
+  margin-top: 0 !important;
+  border: none !important;
+  box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.17) !important;
+  border-radius: 3px !important;
+  .vue-treeselect__option{
+    height: 26px;
+    line-height: 26px;
+    .vue-treeselect__label{
+      font-weight: normal;
+      color: #545B65;
+    }
+    &.vue-treeselect__option--highlight,
+    &.vue-treeselect__option--selected{
+      background: #F5F9FC;
+      .vue-treeselect__label{
+        color:#0348F3;
+      }
+    }
+  }
+  
 }

src/components/Crud/Pagination.vue

@@ -5,7 +5,8 @@
     :total="page.total"
     :current-page.sync="page.page"
     style="margin-top: 8px;"
-    layout="total, prev, pager, next, sizes"
+    :page-sizes="[10, 20, 30, 40]"
+    layout="total, sizes, prev, pager, next"
     @size-change="crud.sizeChangeHandler($event)"
     @current-change="crud.pageChangeHandler"
   />

src/views/archivesManage/archivesSearch/module/detailDialog.vue

@@ -206,7 +206,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @import "~@/assets/styles/archives-manage.scss";
 ::v-deep .el-dialog{
   width: 820px;
 }

src/views/system/user/index.vue

@@ -35,50 +35,53 @@
           <span class="left-bottom-line" />
           <!--表单渲染-->
           <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
-            <span class="dialog-right-top" />
-            <span class="dialog-left-bottom" />
+            <!-- <span class="dialog-right-top" />
+            <span class="dialog-left-bottom" /> -->
             <div class="setting-dialog">
-              <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
-                <el-form-item label="用户名" prop="username">
+              <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px">
+                <el-form-item label="账号" prop="username">
                   <el-input v-model="form.username" @keydown.native="keydown($event)" />
                 </el-form-item>
                 <el-form-item label="电话" prop="phone">
                   <el-input v-model.number="form.phone" />
                 </el-form-item>
-                <el-form-item label="昵称" prop="nickName">
+                <el-form-item label="用户名" prop="nickName">
                   <el-input v-model="form.nickName" @keydown.native="keydown($event)" />
                 </el-form-item>
                 <el-form-item label="邮箱" prop="email">
                   <el-input v-model="form.email" />
                 </el-form-item>
-                <el-form-item label="部门" prop="dept.id">
-                  <treeselect v-model="form.dept.id" :options="depts" :load-options="loadDepts" style="width: 184px" placeholder="选择部门" />
+                <el-form-item label="所属全宗" prop="dept.id">
+                  <treeselect v-model="form.dept.id" :options="depts" placeholder="选择全宗" />
+                </el-form-item>
+                <el-form-item label="所属部门" prop="dept.id">
+                  <treeselect v-model="form.dept.id" :options="depts" :load-options="loadDepts" placeholder="选择部门" />
                 </el-form-item>
-                <el-form-item label="岗位" prop="jobs" class="is-required">
+                <!-- <el-form-item label="岗位" prop="jobs" class="is-required">
                   <el-select v-model="jobDatas" style="width: 184px" multiple placeholder="请选择" @remove-tag="deleteTag" @change="changeJob">
                     <el-option v-for="item in jobs" :key="item.name" :label="item.name" :value="item.id" />
                   </el-select>
-                </el-form-item>
-                <el-form-item label="性别">
-                  <el-radio-group v-model="form.gender" style="width: 184px">
+                </el-form-item> -->
+                <el-form-item label="性别" prop="gender">
+                  <el-radio-group v-model="form.gender">
                     <el-radio label="男">男</el-radio>
                     <el-radio label="女">女</el-radio>
                   </el-radio-group>
                 </el-form-item>
-                <el-form-item label="状态">
+                <el-form-item label="状态" prop="enabled">
                   <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
                     <el-radio v-for="item in dict.user_status" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
                   </el-radio-group>
                 </el-form-item>
-                <el-form-item style="margin-bottom: 0;" label="角色" prop="roles" class="is-required">
-                  <el-select v-model="roleDatas" style="width: 437px" multiple placeholder="请选择" @remove-tag="deleteTag" @change="changeRole">
+                <el-form-item style="margin-bottom: 0;" label="角色" prop="roles" class="is-required selecct-dropdown">
+                  <el-select v-model="roleDatas" style="width: 558px" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeRole">
                     <el-option v-for="item in roles" :key="item.name" :disabled="level !== 1 && item.level <= level" :label="item.name" :value="item.id" />
                   </el-select>
                 </el-form-item>
               </el-form>
               <div slot="footer" class="dialog-footer">
                 <el-button type="text" @click="crud.cancelCU">取消</el-button>
-                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button>
               </div>
             </div>
           </el-dialog>
@@ -215,6 +218,12 @@ export default {
         ],
         'dept.id': [
           { required: true, trigger: 'blur', message: '请选择部门' }
+        ],
+        gender: [
+          { required: true, trigger: 'change', message: '请选择性别' }
+        ],
+        enabled: [
+          { required: true, trigger: 'change', message: '请选择状态' }
         ]
         // ,
         // jobs: [
@@ -490,6 +499,7 @@ export default {
     @include table_height_min;
   }
 }
+
 .hideSidebar{
   // siderbar-收起 54 + 间距 60 + treeLeft 265
   .elect-cont-right{
@@ -502,14 +512,6 @@ export default {
     width: calc(100vw - 581px);
   }
 }
-
-::v-deep .vue-treeselect__control,
-::v-deep .vue-treeselect__placeholder,
-::v-deep .vue-treeselect__single-value {
-  height: 30px;
-  line-height: 30px;
-}
-
 .icon-zhuangtai{
   font-size: 14px;
 }