diff --git a/frontend/src/components/gridTable/index.vue b/frontend/src/components/gridTable/index.vue
index 711977679f..536dcd454e 100644
--- a/frontend/src/components/gridTable/index.vue
+++ b/frontend/src/components/gridTable/index.vue
@@ -169,6 +169,15 @@ export default {
     }
   }
 
+  .el-table::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    border-top: 1px solid rgba(31, 35, 41, 0.15);;
+  }
+
   ::v-deep .el-table__fixed-body-wrapper {
     tr {
         background-color: var(--TableBG, #ffffff) !important;
diff --git a/frontend/src/directive/index.js b/frontend/src/directive/index.js
index 1273bd4c9e..346a665ab9 100644
--- a/frontend/src/directive/index.js
+++ b/frontend/src/directive/index.js
@@ -64,6 +64,36 @@ export const bottom2TopDrag = {
   }
 }
 
+const closePress =  {
+  inserted: function (el) {
+    el.querySelector('.el-drawer__close-btn').onmousedown = function (e) {
+      e.currentTarget.style.background = '#d2d3d4';
+    }
+    el.querySelector('.el-drawer__close-btn').onmouseup = function (e) {
+      e.currentTarget.style.background = 'none';
+    }
+  }
+}
+
+// const btnPress =  {
+//   inserted: function (el) {
+//     el.onmousedown = function () {
+//       el.style.background = '#EFF0F1';
+//     }
+//     el.onmouseenter = function () {
+//       el.style.background = '#F5F6F7 !important';
+//     }
+//     el.onmouseleave = function () {
+//       el.style.background = 'none';
+//     }
+//     el.onmouseup = function () {
+//       el.style.background = 'none';
+//     }
+//   }
+// }
+
+// #EFF0F1
+
 export default {
   install(Vue) {
     // Vue.directive('data-permission', dataPermission)
@@ -71,6 +101,8 @@ export default {
     Vue.directive('left-to-right-drag', left2RightDrag)
     Vue.directive('right-to-left-drag', right2LeftDrag)
     Vue.directive('bottom-to-top-drag', bottom2TopDrag)
+    Vue.directive('closePress', closePress)
+    // Vue.directive('btnPress', btnPress)
   }
 }
 
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index aa711cb469..1fd71d9501 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -1,12 +1,13 @@
 <template>
   <!-- <div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}"> -->
-  <div :class="{ 'has-logo': showLogo }">
+  <div :class="{ 'has-logo': showLogo }" class="de-sidebar-container">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-menu
       :default-active="activeMenu"
       :collapse="isCollapse"
       :unique-opened="false"
       :collapse-transition="false"
+      class="de-el-menu"
       mode="vertical"
     >
       <sidebar-item
@@ -31,7 +32,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import Logo from "./Logo";
 import SidebarItem from "./SidebarItem";
 import variables from "@/styles/variables.scss";
@@ -39,9 +40,11 @@ import path from "path";
 import { isExternal } from "@/utils/validate";
 export default {
   components: { SidebarItem, Logo },
-
   computed: {
     ...mapGetters(["sidebar"]),
+    ...mapState({
+      isCollapse: state => state.isCollapse,
+    }),
     routes() {
       // return this.$router.options.routes
       if (this.isCollapse) {
@@ -67,14 +70,9 @@ export default {
       return variables;
     },
   },
-  data() {
-    return {
-      isCollapse: false,
-    };
-  },
   methods: {
     changeSideWidth() {
-      this.isCollapse = !this.isCollapse;
+      this.$store.commit('setIsCollapse', !this.isCollapse);
       this.$emit("changeSideWidth", this.isCollapse ? "70px" : "");
     },
     resolvePath(routePath) {
@@ -113,9 +111,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.de-sidebar-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.de-el-menu {
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
 .sidebar-collapse-btn {
   height: 48px;
-  position: fixed;
+  position: absolute;
   bottom: 0;
   left: 0;
   border-top: 1px solid #1f232926;
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index d48b87825d..5b68500c6e 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -175,13 +175,13 @@ export default {
   }
   .le-aside-container {
       .sidebar-container {
-        width: 100% !important;
-        position: initial !important;
-        height: calc(100vh - 80px) !important;
-        overflow-x: hidden !important;
-        overflow-y: auto !important;
+        width: 100%;
+        position: relative !important;
+        height: 100%;
+        top: 0 !important;
         background-color: var(--SiderBG) !important;
       }
+      overflow: hidden;
   }
   .full-height {
     height: 100vh !important;
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 2f1c155c04..1f4fc2dce9 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -108,6 +108,8 @@ const data = {
       y: 600
     },
     scrollAutoMove: 0,
+     // 系统管理菜单是否收缩
+    isCollapse: false,
     // 视图是否编辑记录
     panelViewEditInfo: {},
     // 仪表板视图明细
@@ -151,7 +153,9 @@ const data = {
     setEditMode(state, mode) {
       state.editMode = mode
     },
-
+    setIsCollapse(state, isCollapse) {
+      state.isCollapse = isCollapse
+    },
     setCanvasStyle(state, style) {
       if (style) {
         style['selfAdaption'] = true
diff --git a/frontend/src/views/system/datasource/ApiHttpRequestForm.vue b/frontend/src/views/system/datasource/ApiHttpRequestForm.vue
index 6f47410375..c6ebdc874c 100644
--- a/frontend/src/views/system/datasource/ApiHttpRequestForm.vue
+++ b/frontend/src/views/system/datasource/ApiHttpRequestForm.vue
@@ -391,4 +391,9 @@ export default {
   float: right;
   margin-right: 45px;
 }
+
+::v-deep .el-tabs__nav-wrap::after,
+::v-deep .el-tabs__active-bar {
+  height: 1px !important;
+}
 </style>
diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index deb9f97656..75529cbfc2 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -407,6 +407,7 @@
       :visible.sync="edit_api_item"
       custom-class="api-datasource-drawer"
       size="840px"
+      v-closePress
       :before-close="closeEditItem"
       direction="rtl"
     >
@@ -463,7 +464,7 @@
           </el-form-item>
 
           <div v-loading="loading">
-            <div class="row-rules">
+            <div class="row-rules mr40">
               <span>{{ $t("datasource.req_param") }}</span>
             </div>
             <!-- HTTP 请求参数 -->
@@ -977,7 +978,6 @@ export default {
     },
     closeEditItem() {
       this.active = 0;
-      console.log(1, this.$refs.apiItem);
       this.$refs.apiItem.clearValidate();
       this.edit_api_item = false;
     },
@@ -1008,7 +1008,6 @@ export default {
       );
     },
     handleCheckAllChange(row) {
-      console.log(row);
       this.handleCheckChange(row);
       this.apiItem.fields = [];
       this.handleFiledChange();
@@ -1102,14 +1101,30 @@ export default {
 <style lang="scss">
 .api-datasource-drawer {
   .el-drawer__header {
-    padding: 24px;
+    padding: 16px 24px;
     margin: 0;
     font-family: PingFang SC;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
     color: #1f2329;
+    position: relative;
     border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
   }
   .el-drawer__body {
     padding: 0 24px 81px 24px;
@@ -1124,7 +1139,7 @@ export default {
     font-weight: 500;
     line-height: 22px;
     padding-left: 10px;
-    margin: 24px 0;
+    margin: 24px 0 16px 0;
 
     &::before {
       content: "";
@@ -1141,8 +1156,10 @@ export default {
   .input-with-select {
     .el-input-group__prepend {
       background-color: #fff;
+      border-color: #bbbfc4;
       .el-select {
         width: 84px !important;
+        color: #1f2329;
       }
     }
   }
@@ -1195,6 +1212,7 @@ export default {
       line-height: 22px;
       text-align: center;
       color: #1f2329;
+      margin-top: 4px;
     }
 
     .is-process {
@@ -1224,6 +1242,18 @@ export default {
     margin-left: 0 !important;
   }
 
+  .el-form-item {
+    margin-bottom: 28px;
+  }
+
+  .el-form-item__label {
+    padding-bottom: 8px;
+  }
+
+  .mr40 {
+    margin-top: 40px;
+  }
+
   .btn {
     border-radius: 4px;
     padding: 5px 26px 5px 26px;
diff --git a/frontend/src/views/system/user/filterUser.vue b/frontend/src/views/system/user/filterUser.vue
index c93967f5e2..79c7a8f098 100644
--- a/frontend/src/views/system/user/filterUser.vue
+++ b/frontend/src/views/system/user/filterUser.vue
@@ -4,6 +4,7 @@
     :visible.sync="userDrawer"
     custom-class="user-drawer"
     size="680px"
+    v-closePress
     direction="rtl"
   >
     <div class="filter">
@@ -24,7 +25,7 @@
           @click="activeDeptChange(ele.id)"
           :class="[activeDept.includes(ele.id) ? 'active' : '']"
           :key="ele.id"
-          v-for="ele in selectDepts"
+          v-for="ele in selectDeptsCahe"
           >{{ ele.label }}</span>
         <el-popover
           placement="bottom"
@@ -42,7 +43,7 @@
               :load="loadNode"
               :lazy="true"
               :expand-on-click-node="false"
-              :data="depts"
+              :data="deptsComputed"
               :props="defaultProps"
               @node-click="handleNodeClick"
             ></el-tree>
@@ -54,8 +55,6 @@
               popper-class="tree-select"
               multiple
               :placeholder="$t('commons.please_select')"
-              @change="changeRole"
-              @remove-tag="changeRole"
               value-key="id"
             >
             <el-option
@@ -77,7 +76,7 @@
           @click="activeRoleChange(ele.id)"
           :class="[activeRole.includes(ele.id) ? 'active' : '']"
           :key="ele.id"
-          v-for="ele in rolesValue"
+          v-for="ele in rolesValueCopy"
           >{{ ele.name }}</span
         >
         <el-popover
@@ -96,7 +95,7 @@
             value-key="id"
           >
             <el-option
-              v-for="item in roles"
+              v-for="item in rolesComputed"
               :key="item.name"
               :label="item.name"
               :value="item"
@@ -126,7 +125,8 @@ import { getDeptTree, treeByDeptId } from "@/api/system/dept";
 export default {
   data() {
     return {
-      value: [],
+      roleCahe: [],
+      deptCahe: [],
       roles: [],
       status: [{
         id: 1,
@@ -140,6 +140,7 @@ export default {
       activeRole: [],
       depts: [],
       selectDepts: [],
+      selectDeptsCahe: [],
       activeDept: [],
       defaultProps: {
         children: "children",
@@ -149,6 +150,17 @@ export default {
       userDrawer: false
     };
   },
+  computed: {
+    rolesComputed() {
+      return this.roles.filter(ele => !this.activeRole.includes(ele.id))
+    },
+    rolesValueCopy() {
+      return this.roleCahe.filter(ele => this.activeRole.includes(ele.id))
+    },
+    deptsComputed() {
+      return this.depts.filter(ele => !this.activeDept.includes(ele.id))
+    }
+  },
   mounted() {
     this.initRoles();
   },
@@ -156,37 +168,53 @@ export default {
     // 获取弹窗内部门数据
     treeByDeptId() {
       treeByDeptId(0).then((res) => {
-        this.depts = res.data || [];
+        this.depts =  (res.data || []).map(ele =>  {
+        return {
+            ...ele,
+            leaf: !ele.hasChildren,
+          }
+        })
       });
     },
     changeRole() {
-      const roles = this.rolesValue.map((item) => item.id);
-      this.activeRole = this.activeRole.filter((ele) => roles.includes(ele));
+      if (this.roleCahe.length > this.rolesValue.length + this.activeRole.length) {
+        this.roleCahe = this.roleCahe.filter(ele => this.rolesValue.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
+        return;
+      }
+      const roleIdx = this.rolesValue.findIndex(ele => !this.roleCahe.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
+      if (roleIdx === -1) return
+      this.activeRole.push(this.rolesValue[roleIdx].id)
+      this.roleCahe.push(this.rolesValue[roleIdx]);
+      this.rolesValue.splice(roleIdx, 1)
     },
     activeRoleChange(id) {
       const roleIndex = this.activeRole.findIndex((ele) => ele === id);
       if (roleIndex === -1) {
         this.activeRole.push(id);
+        this.rolesValue = this.rolesValue.filter((ele) => ele.id !== id);
       } else {
         this.activeRole.splice(roleIndex, 1);
+        const role = this.roleCahe.find((ele) => ele.id === id);
+        this.rolesValue.push(role);
       }
     },
     handleNodeClick({ id, label }) {
-      const deptIndex = this.selectDepts.findIndex((ele) => ele.id === id);
-      if (deptIndex === -1) {
-        this.selectDepts.push({ id, label });
-      } else {
-        this.selectDepts.splice(deptIndex, 1);
-        this.changeDepts();
+      const deptIdx = this.selectDepts.findIndex((ele) => ele.id === id);
+      if (deptIdx !== -1) {
+        this.selectDepts.splice(deptIdx, 1);
+        this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
+        this.deptCahe = this.deptCahe.filter(ele => ele.id !== id)
+        return;
       }
+      this.activeDept.push(id)
+      this.selectDeptsCahe.push({ id, label });
+      this.deptCahe.push({ id, label });
     },
     activeDeptChange(id) {
-        const deptIndex = this.activeDept.findIndex((ele) => ele === id);
-      if (deptIndex === -1) {
-        this.activeDept.push(id);
-      } else {
-        this.activeDept.splice(deptIndex, 1);
-      }
+      const dept = this.deptCahe.find((ele) => ele.id === id)
+      this.selectDepts.push(dept);
+      this.activeDept = this.activeDept.filter(ele => ele !== id)
+      this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
     },
     statusChange(id) {
         const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
@@ -206,8 +234,9 @@ export default {
         return;
       }
       getDeptTree(node.data.id).then((res) => {
+        const filterDept = (res.data || []).filter(ele => !this.activeDept.includes(ele.deptId))
         resolve(
-          res.data.map((dept) => {
+          filterDept.map((dept) => {
             return this.normalizer(dept);
           })
         );
@@ -227,7 +256,21 @@ export default {
     },
     search() {
       this.userDrawer = false;
-      this.$emit('search', this.formatCondition())
+      this.$emit('search', this.formatCondition(), this.formatText())
+    },
+    formatText() {
+      const params = [];
+      if (this.activeStatus.length) {
+        let str = `状态:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label  + '、' +  pre, '')}`;
+        params.push(str.slice(0, str.length - 1 ))
+      }
+      if (this.activeDept.length) {
+        params.push(`组织:${this.selectDeptsCahe.reduce((pre,next) =>  pre.label  + '、' + next.label)}`)
+      }
+      if (this.activeRole.length) {
+        params.push(`角色:${this.rolesValueCopy.reduce((pre,next) => pre.label  + '、' +  next.labele)}`)
+      }
+      return params;
     },
     formatCondition() {
       const fildMap = {'r.role_id': this.activeRole, 'd.dept_id': this.activeDept, 'u.enabled': this.activeStatus}
@@ -259,16 +302,33 @@ export default {
 <style lang="scss">
 .user-drawer {
   .el-drawer__header {
-    padding: 16px 21px 16px 24px;
+   padding: 16px 24px;
+    margin: 0;
     font-family: PingFang SC;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
-    letter-spacing: 0px;
-    text-align: left;
     color: #1f2329;
+    position: relative;
+    box-sizing: border-box;
+    height: 57px;
+    mix-blend-mode: normal;
     border-bottom: 1px solid rgba(187, 191, 196, 0.5);
-    margin: 0;
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
   }
 
   .el-drawer__body {
@@ -351,8 +411,9 @@ export default {
 }
 .tree-select {
   .el-select-dropdown__empty,
+  .el-scrollbar__wrap,
   .popper__arrow {
-    display: none;
+    display: none !important;
   }
 }
 
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 3ee38f3059..67c7638800 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -26,9 +26,12 @@
         </el-input>
         <el-button
           class="normal btn"
-          icon="el-icon-setting"
+          icon="iconfont icon-icon-filter"
           @click="filterShow"
-          >筛选</el-button
+          >筛选<template v-if="filterTexts.length">
+            ({{ filterTexts.length }})
+          </template>
+          </el-button
         >
         <el-dropdown trigger="click" :hide-on-click="false">
           <el-button class="normal btn" icon="el-icon-setting"
@@ -54,7 +57,18 @@
         </el-dropdown>
       </el-col>
     </el-row>
-    <div class="table-container">
+    <div class="filter-texts" v-if="filterTexts.length">
+      <span class="sum">{{ paginationConfig.total }}</span>
+      <span class="title">个结果</span>
+       <el-divider direction="vertical"></el-divider>
+      <p class="text" v-for="ele in filterTexts" :key="ele">{{ ele }} <i class="el-icon-close"></i></p>
+      <el-button
+          type="text"
+          icon="el-icon-delete"
+          @click="clearFilter"
+          >{{ $t("user.create") }}</el-button>
+    </div>
+    <div class="table-container" :class="[filterTexts.length ? 'table-container-filter' : '']">
       <grid-table
         v-if="canLoadDom"
         v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
@@ -160,7 +174,7 @@
               width="321"
               :ref="'initPwd' + scope.row.userId"
               popper-class="reset-pwd"
-              trigger="hover"
+              trigger="click"
             >
               <i class="el-icon-warning"></i>
               <div class="tips">是否恢复为初始密码?</div>
@@ -207,44 +221,6 @@
         </el-table-column>
       </grid-table>
     </div>
-    <el-dialog
-      :close-on-click-modal="false"
-      :title="$t('member.edit_password')"
-      :visible.sync="editPasswordVisible"
-      width="30%"
-      :destroy-on-close="true"
-      left
-      @close="handleClose"
-    >
-      <el-form
-        ref="editPasswordForm"
-        :model="ruleForm"
-        label-position="right"
-        label-width="120px"
-        :rules="rule"
-        class="demo-ruleForm"
-        @keypress.enter.native="editUserPassword('editPasswordForm')"
-      >
-        <el-form-item :label="$t('member.new_password')" prop="newPassword">
-          <el-input
-            v-model="ruleForm.newPassword"
-            type="password"
-            autocomplete="off"
-            show-password
-          />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="editPasswordVisible = false">{{
-          $t("commons.cancel")
-        }}</el-button>
-        <el-button
-          type="primary"
-          @click="editUserPassword('editPasswordForm')"
-          >{{ $t("commons.confirm") }}</el-button
-        >
-      </div>
-    </el-dialog>
     <keep-alive>
       <filterUser ref="filterUser" @search="filterDraw" ></filterUser>
     </keep-alive>
@@ -310,8 +286,8 @@ export default {
         total: 0,
       },
       data: [],
+      filterTexts: [],
       dialogVisible: false,
-      editPasswordVisible: false,
       form: {
         roles: [
           {
@@ -376,6 +352,9 @@ export default {
     document.removeEventListener('keypress', this.entryKey)
   },
   methods: {
+    clearFilter() {
+
+    },
     entryKey (event) {
       const keyCode = event.keyCode
       if (keyCode === 13) {
@@ -438,8 +417,9 @@ export default {
       this.paginationConfig.currentPage = currentPage;
       this.search();
     },
-    filterDraw(condition) {
+    filterDraw(condition, filterTexts = []) {
       this.cacheCondition = condition;
+      this.filterTexts = filterTexts;
       this.initSearch()
     },
     search() {
@@ -467,11 +447,6 @@ export default {
     edit(row) {
       this.$refs.userEditer.init(row);
     },
-    editPassword(row) {
-      this.editPasswordVisible = true;
-      const tempForm = Object.assign({}, row);
-      this.ruleForm = { userId: tempForm.userId };
-    },
     del(row) {
       this.$confirm(this.$t("确定删除该用户吗？"), "", {
         confirmButtonText: this.$t("commons.delete"),
@@ -499,23 +474,6 @@ export default {
         customClass: "de-message-success de-message",
       });
     },
-    editUserPassword(editPasswordForm) {
-      this.$refs[editPasswordForm].validate((valid) => {
-        if (valid) {
-          editPassword(this.ruleForm).then((res) => {
-            this.$success(this.$t("commons.modify_success"));
-            this.editPasswordVisible = false;
-            this.initSearch();
-            this.user &&
-              this.user.userId &&
-              this.user.userId === editPasswordForm.userId &&
-              window.location.reload();
-          });
-        } else {
-          return false;
-        }
-      });
-    },
     handleClose() {
       this.depts = null;
       this.formType = "add";
@@ -566,12 +524,57 @@ export default {
     margin: 0 -2px 0 4px;
   }
 }
+
+.table-container-filter {
+  height: calc(100% - 110px);
+}
+.filter-texts {
+  display: flex;
+  align-items: center;
+  margin: 17px 0;
+  font-family: 'PingFang SC';
+  font-weight: 400;
+
+  .sum {
+    color: #1F2329;;
+  }
+
+  .title {
+    color: #999999;
+    margin-left: 8px;
+  }
+
+  .text {
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 1px 22px 1px 6px;
+    display: flex;
+    align-items: center;
+    color: #0C296E;
+    font-size: 14px;
+    line-height: 22px;
+    background: rgba(51, 112, 255, 0.1);
+    border-radius: 2px;
+    margin: 0;
+    margin-right: 8px;
+    position: relative;
+    i {
+      position: absolute;
+      right: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+}
 .top-operate {
   margin-bottom: 16px;
 
   .btn {
     border-radius: 4px;
-    padding: 5px 12px 5px 12px;
+    padding: 5px 12px;
     //styleName: 中文/桌面端/正文 14 22 Regular;
     font-family: PingFang SC;
     font-size: 14px;
@@ -581,6 +584,11 @@ export default {
     text-align: center;
     border: none;
     box-sizing: border-box;
+
+
+    ::v-deep span {
+      margin-left: 5px;
+    }
   }
 
   .normal {
@@ -602,6 +610,9 @@ export default {
 
   .name-email-search {
     width: 240px;
+    ::v-deep input {
+      border-color: #bbbfc4;
+    }
   }
 }
 </style>
diff --git a/frontend/src/views/system/user/userEditer.vue b/frontend/src/views/system/user/userEditer.vue
index 8dfe9bed70..ec066391ff 100644
--- a/frontend/src/views/system/user/userEditer.vue
+++ b/frontend/src/views/system/user/userEditer.vue
@@ -99,18 +99,39 @@
             :label="$t('commons.organization')"
             prop="deptId"
           >
-            <treeselect
-              ref="deptTreeSelect"
+            <el-popover
+            placement="bottom"
+            popper-class="user-popper dept"
+            width="384"
+            trigger="click"
+          >
+            <el-tree
+              v-if="dialogVisible"
+              :load="loadNode"
+              :lazy="true"
+              :expand-on-click-node="false"
+              :data="depts"
+              :props="defaultProps"
+              @node-click="handleNodeClick"
+            ></el-tree>
+
+            <el-select
+              ref="roleSelect"
               v-model="form.deptId"
-              :options="depts"
-              :load-options="loadDepts"
-              :auto-load-root-options="false"
-              :placeholder="$t('user.choose_org')"
-              :no-children-text="$t('commons.treeselect.no_children_text')"
-              :no-options-text="$t('commons.treeselect.no_options_text')"
-              :no-results-text="$t('commons.treeselect.no_results_text')"
-              @open="filterData"
+              clearable
+              slot="reference"
+              class="form-gender-select"
+              popper-class="tree-select"
+              :placeholder="$t('commons.please_select')"
+            >
+            <el-option
+              v-for="item in selectDepts"
+              :key="item.label"
+              :label="item.label"
+              :value="item.id"
             />
+            </el-select>
+            </el-popover>
           </el-form-item>
         </el-col>
       </el-row>
@@ -170,16 +191,15 @@ import { PHONE_REGEX } from "@/utils/validate";
 import { getDeptTree, treeByDeptId } from "@/api/system/dept";
 import { addUser, editUser, allRoles } from "@/api/system/user";
 import { pluginLoaded, defaultPwd } from "@/api/user";
-import {
-  LOAD_CHILDREN_OPTIONS,
-  LOAD_ROOT_OPTIONS,
-} from "@riophae/vue-treeselect";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
-  components: { Treeselect },
   data() {
     return {
+      defaultProps: {
+        children: "children",
+        label: "label",
+        isLeaf: "leaf",
+      },
+      selectDepts: [],
       form: {
         roles: [
           {
@@ -302,7 +322,7 @@ export default {
         phonePrefix: "+86",
         roleIds: [2],
       },
-      depts: null,
+      depts: [],
       roles: [],
       roleDatas: [],
       userRoles: [],
@@ -331,7 +351,6 @@ export default {
       }
     },
     create() {
-      this.depts = null;
       this.formType = "add";
       this.form = Object.assign({}, this.defaultForm);
     },
@@ -342,7 +361,8 @@ export default {
         this.create();
         return;
       }
-      this.depts = null;
+      const { deptId:id, deptName:label }  = row.dept;
+      this.selectDepts = [{id, label}]
       this.formType = "modify";
       this.dialogVisible = true;
       this.form = Object.assign({}, row);
@@ -354,59 +374,54 @@ export default {
       if (!this.form.phonePrefix) {
         this.form.phonePrefix = '+86';
       }
-      this.initDeptTree();
     },
     initRoles() {
       allRoles().then((res) => {
         this.roles = res.data;
       });
     },
-    initDeptTree() {
-      treeByDeptId(this.form.deptId || 0).then((res) => {
-        const results = res.data.map((node) => {
-          if (node.hasChildren && !node.children) {
-            node.children = null;
-            // delete node.children
-          }
-          return node;
-        });
-        this.depts = results;
-      });
-    },
-    // 获取弹窗内部门数据
-    loadDepts({ action, parentNode, callback }) {
-      if (action === "LOAD_ROOT_OPTIONS" && !this.form.deptId) {
-        const _self = this;
-        treeByDeptId(0).then((res) => {
-          const results = res.data.map((node) => {
-            if (node.hasChildren && !node.children) {
-              node.children = null;
-            }
-            return node;
-          });
-          _self.depts = results;
-          callback();
-        });
+    handleNodeClick({ id, label }) {
+      const [ dept ] = this.selectDepts;
+      if (!dept || dept.id !== id) {
+        this.selectDepts = [{ id, label }];
+        this.form.deptId = id
+        return
       }
 
-      if (action === "LOAD_CHILDREN_OPTIONS") {
-        const _self = this;
-        getDeptTree(parentNode.id).then((res) => {
-          parentNode.children = res.data.map(function (obj) {
-            return _self.normalizer(obj);
-          });
-          callback();
-        });
+      if (dept.id === id) {
+        this.selectDepts = [];
+        this.form.deptId = null
       }
     },
-    normalizer(node) {
-      if (node.hasChildren) {
-        node.children = null;
+    // 获取弹窗内部门数据
+    treeByDeptId() {
+      treeByDeptId(0).then((res) => {
+        this.depts =  (res.data || []).map(ele =>  {
+        return {
+            ...ele,
+            leaf: !ele.hasChildren,
+          }
+        })
+      });
+    },
+      loadNode(node, resolve) {
+      if (!this.depts.length) {
+        this.treeByDeptId();
+        return;
       }
+      getDeptTree(node.data.id).then((res) => {
+        resolve(
+          res.data.map((dept) => {
+            return this.normalizer(dept);
+          })
+        );
+      });
+    },
+    normalizer(node) {
       return {
         id: node.deptId,
         label: node.name,
-        children: node.children,
+        leaf: !node.hasChildren,
       };
     },
     deleteTag(value) {
@@ -428,6 +443,7 @@ export default {
       );
     },
     reset() {
+      this.depts = [];
       this.$refs.createUserForm.resetFields();
       this.dialogVisible = false;
     },
@@ -446,21 +462,6 @@ export default {
         }
       });
     },
-    filterData(instanceId) {
-      this.$refs.roleSelect &&
-        this.$refs.roleSelect.blur &&
-        this.$refs.roleSelect.blur();
-      if (!this.depts) {
-        return;
-      }
-      const results = this.depts.map((node) => {
-        if (node.hasChildren) {
-          node.children = null;
-        }
-        return node;
-      });
-      this.depts = results;
-    },
     onCopy(e) {
       this.$success(this.$t("commons.copy_success"));
     },
@@ -571,8 +572,22 @@ export default {
   .form-gender-select {
     width: 100%;
   }
+}
 
-  .btn {
+</style>
+<style lang="scss">
+.tree-select {
+  display: none !important;
+}
+.user-popper {
+  background: transparent;
+  padding: 0;
+  .popper__arrow {
+    display: none;
   }
 }
-</style>
+.user-popper.dept {
+  height: 300px;
+  overflow: auto;
+}
+</style>
\ No newline at end of file