diff --git a/frontend/babel.config.js b/frontend/babel.config.js
index ba179669a1..119f81f9ee 100644
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
     '@vue/app'
-  ]
+  ],
+  plugins: ['@babel/plugin-proposal-optional-chaining']
 }
diff --git a/frontend/package.json b/frontend/package.json
index ff69f74ec5..c42f945220 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -76,6 +76,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.4.0-0",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.6",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "^3.9.1",
diff --git a/frontend/src/components/AsyncComponent/index.vue b/frontend/src/components/AsyncComponent/index.vue
index b1d4964692..9e1e53a1ae 100644
--- a/frontend/src/components/AsyncComponent/index.vue
+++ b/frontend/src/components/AsyncComponent/index.vue
@@ -11,7 +11,6 @@
 <script>
 import { uuid } from 'vue-uuid'
 import { get } from '@/api/system/dynamic'
-
 export default {
   name: 'AsyncComponent',
   inheritAttrs: true,
@@ -43,8 +42,49 @@ export default {
           window.SyncComponentCache = {}
         }
         let res
+        console.log(1, this.$route);
+        const urlMap = {
+            'system-role': 'SystemRole',
+            'system-dept': 'SystemDept',
+            'system-auth': 'SystemAuth',
+            'email-task': 'TaskEmail',
+            'system-dept-form': 'SystemDeptFormn',
+            'system-role-form': 'SystemRoleForm',
+            'email-task-form': 'TaskEmailForm',
+            'system-ukey': 'SystemUkey'
+        }
+
+        // if (this.$route.name === 'system-role') {
+        //   this.mode = () => import('de-plugins/src/views/xpack/role/index.vue');
+        //   return
+        // }
+
+        // if (this.$route.name === 'system-role-form') {
+        //   this.mode = () => import('de-plugins/src/views/xpack/role/form.vue');
+        //   return
+        // }
+
+        // if (this.$route.name === 'dataset') {
+        //   this.mode = () => import('de-plugins/src/views/xpack/dataset/rowpermissions/rowPermissions.vue');
+        //   return
+        // }
+
+        // if (this.$route.name === 'system-dept') {
+        //   this.mode = () => import('de-plugins/src/views/xpack/dept/index.vue');
+        //   return
+        // }
+
+        // if (this.$route.name === 'system-auth') {
+        //   this.mode = () => import('de-plugins/src/views/xpack/auth/index.vue');
+        //   return
+        // }
+
         if (!window.SyncComponentCache[this.url]) {
-          window.SyncComponentCache[this.url] = get(this.url)
+          if (urlMap[this.$route.name]) {
+            window.SyncComponentCache[this.url] = get(`/static/${urlMap[this.$route.name]}.js`)
+          }
+
+          // window.SyncComponentCache[this.url] = get(this.url)
 
           // window.SyncComponentCache[this.url] = Axios.get(this.url)
           res = await window.SyncComponentCache[this.url]
@@ -52,8 +92,10 @@ export default {
           res = await window.SyncComponentCache[this.url]
         }
 
+        console.log(1, res)
+
         const Fn = Function
-        this.mode = new Fn(`return ${res.data || res}`)()
+        this.mode = new Fn(`return ${res}`)()
         /* if (res && res.data) {
           const Fn = Function
           this.mode = new Fn(`return ${res.data || res}`)()
diff --git a/frontend/src/components/back-button/index.vue b/frontend/src/components/back-button/index.vue
index 65f860fd03..791f4cbe1c 100644
--- a/frontend/src/components/back-button/index.vue
+++ b/frontend/src/components/back-button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-icon name="back" class="back-button" @click.native="jump" />
+  <i class="el-icon-arrow-left back-button" @click="jump" />
 </template>
 
 <script>
@@ -34,7 +34,7 @@ export default {
 
 .back-button {
   cursor: pointer;
-  margin-right: 10px;
+  margin-right: 18px;
   font-weight: 600;
 
   &:active {
diff --git a/frontend/src/components/business/DeLayoutContent.vue b/frontend/src/components/business/DeLayoutContent.vue
new file mode 100644
index 0000000000..33aa2760da
--- /dev/null
+++ b/frontend/src/components/business/DeLayoutContent.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="layout-container">
+    <p class="route-title">
+      <back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
+      <span>{{ routeTitle }}</span>
+    </p>
+    <div class="container-wrapper" :class="[isDept ? 'dept-padding' : '']">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import BackButton from '@/components/back-button'
+
+export default {
+  name: 'DeLayoutContent',
+  components: { BackButton },
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    header: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backPath: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backName: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backTo: Object
+  },
+  computed: {
+    routeTitle() {
+      return this.header || this.$route.meta?.title || ''
+    },
+    showBack({ backPath, backName, backTo }) {
+      return backPath || backName || backTo
+    },
+    isDept() {
+      return ['system-dept', 'system-dept-form'].includes(this.$route.name)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.layout-container {
+  transition: 0.3s;
+  background-color: var(--ContentBG);
+  overflow: auto;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 14%);
+  box-sizing: border-box;
+  background: #f5f6f7;
+  overflow: hidden;
+  padding: 24px 24px 24px 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .route-title {
+    font-family: PingFang SC;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    text-align: left;
+    color: #1F2329;
+    width: 100%;
+    margin: 0;
+  }
+  .container-wrapper {
+    width: 100%;
+    overflow: auto;
+    background: #fff;
+    margin-top: 24px;
+    padding: 24px;
+    flex: 1;
+  }
+
+  .dept-padding {
+    padding: 0;
+    margin-top: 16px;
+  }
+}
+</style>
diff --git a/frontend/src/components/dataease/DeAsideContainer.vue b/frontend/src/components/dataease/DeAsideContainer.vue
index 7b53d3a455..25ea438df6 100644
--- a/frontend/src/components/dataease/DeAsideContainer.vue
+++ b/frontend/src/components/dataease/DeAsideContainer.vue
@@ -5,7 +5,7 @@
     :style="{'margin-left': !asideHidden ? 0 : '-' + currentWidth}"
   >
     <slot />
-    <de-horizontal-drag-bar v-if="showDragBar" :type="type" />
+    <de-horizontal-drag-bar v-if="isSystem" :type="type" />
   </el-aside>
 </template>
 
@@ -20,6 +20,10 @@ export default {
       type: String,
       default: '260px'
     },
+    isCollapseWidth: {
+      type: String,
+      default: ''
+    },
     enableAsideHidden: {
       type: Boolean,
       default: true
@@ -28,6 +32,10 @@ export default {
       type: Boolean,
       default: true
     },
+    isTemplate: {
+      type: Boolean,
+      default: false
+    },
     type: {
       type: String,
       default: null
@@ -40,7 +48,11 @@ export default {
   },
   computed: {
     currentWidth() {
-      return this.type && getLayout(this.type) || this.width
+      return this.isCollapseWidth || this.type && getLayout(this.type) || this.width
+    },
+    isSystem() {
+      // 系统管理不需要拖拽菜单
+      return this.isTemplate || (!this.$route.fullPath.includes('system') && this.showDragBar)
     }
   }
 }
@@ -50,15 +62,19 @@ export default {
 
   .ms-aside-container {
     /* border: 1px solid #E6E6E6; */
-    padding: 10px;
     border-radius: 2px;
     box-sizing: border-box;
     background-color: var(--SiderBG, #FFF);
     height: calc(100vh - 56px);
     border-right: 0px;
     position: relative;
+    padding-bottom: 50px;
   }
 
+  /* .collapse-style {
+    height: calc(100vh - 56px);
+  } */
+
   .hiddenBottom {
     width: 8px;
     height: 50px;
diff --git a/frontend/src/components/gridTable/index.vue b/frontend/src/components/gridTable/index.vue
new file mode 100644
index 0000000000..711977679f
--- /dev/null
+++ b/frontend/src/components/gridTable/index.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="flex-table">
+    <el-table
+      ref="table"
+      v-bind="$attrs"
+      v-on="tableEvent"
+      height="2000"
+      :data="tableData"
+      :style="{ width: '100%' }"
+    >
+      <table-body :columns="columns">
+        <slot></slot>
+      </table-body>
+      <slot name="__operation"></slot>
+    </el-table>
+    <div class="pagination-cont">
+      <el-pagination
+        background
+        v-bind="paginationDefalut"
+        v-on="paginationEvent"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import tableBody from "./tableBody";
+export default {
+  components: { tableBody },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    multipleSelection: {
+      type: Array,
+      default: () => [],
+    },
+    pagination: {
+      type: Object,
+      default: () => {},
+    },
+    isRememberSelected: {
+      type: Boolean,
+      default: false,
+    },
+    selectedFlags: {
+      type: String,
+      default: "id",
+    },
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      paginationEvent: {},
+      paginationDefalut: {
+        currentPage: 1,
+        pageSizes: [10, 20, 30, 40],
+        pageSize: 10,
+        layout: "total, prev, pager, next, sizes, jumper",
+        total: 0,
+      },
+      multipleSelectionCach: [],
+      tableEvent: {},
+    };
+  },
+  created() {
+    this.handleListeners();
+  },
+  computed: {
+    multipleSelectionAll() {
+      return [...this.multipleSelectionCach, ...this.multipleSelection];
+    },
+  },
+  watch: {
+    pagination: {
+      handler() {
+        this.paginationDefalut = {
+          ...this.paginationDefalut,
+          ...this.pagination,
+        };
+      },
+      deep: true,
+      immediate: true,
+    },
+    tableData: {
+      handler() {
+        this.$nextTick(() => {
+          this.$refs.table.doLayout();
+        });
+        if (!this.isRememberSelected) return;
+        // 先拷贝 重新加载数据会触发SelectionChange 导致this.multipleSelection为空
+        const multipleSelection = [...this.multipleSelection];
+        this.$nextTick(() => {
+          this.handlerSelected(multipleSelection);
+        });
+      },
+      deep: true,
+    },
+    columns: {
+      handler() {
+        this.$nextTick(() => {
+          this.$refs.table.doLayout();
+        });
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    handlerSelected(multipleSelection) {
+      this.multipleSelectionCach = [
+        ...this.multipleSelectionCach,
+        ...multipleSelection,
+      ];
+      const flags = this.multipleSelectionCach.map(
+        (ele) => ele[this.selectedFlags]
+      );
+      // 当前页的选中项索引
+      const notCurrenArr = [];
+      this.tableData.forEach((ele) => {
+        const resultIndex = flags.indexOf(ele[this.selectedFlags]);
+        if (resultIndex !== -1) {
+          this.$refs.table.toggleRowSelection(ele, true);
+          notCurrenArr.push(resultIndex);
+        }
+      });
+      notCurrenArr.sort().reduceRight((pre, next) => {
+        this.multipleSelectionCach.splice(next, 1);
+      }, 0);
+    },
+    handleListeners() {
+      Object.keys(this.$listeners).forEach((key) => {
+        if (
+          [
+            "size-change",
+            "current-change",
+            "prev-click",
+            "next-click",
+          ].includes(key)
+        ) {
+          this.paginationEvent[key] = this.$listeners[key];
+        } else {
+          this.tableEvent[key] = this.$listeners[key];
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flex-table {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+
+  ::v-deep .el-table__header-wrapper {
+    background-color: #f5f6f7;
+    // border-top: 1px solid rgba(31, 35, 41, 0.15);
+  }
+   ::v-deep .el-table__fixed-header-wrapper {
+    th {
+        background-color: var(--TableBG, #f5f6f7) !important;
+    }
+  }
+
+  ::v-deep .el-table__fixed-body-wrapper {
+    tr {
+        background-color: var(--TableBG, #ffffff) !important;
+    }
+  }
+  .pagination-cont {
+    text-align: right;
+    margin-top: 10px;
+    ::v-deep .el-pager li {
+      background-color: #fff;
+      border: 1px solid #bbbfc4;
+      border-radius: 4px;
+      color: #1f2329;
+      box-sizing: border-box;
+      line-height: 26px;
+      font-family: SF Pro Text;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    ::v-deep .btn-prev,
+    ::v-deep .btn-next {
+      background: #fff;
+      background-color: #fff;
+      border: 1px solid #bbbfc4;
+      border-radius: 4px;
+      color: #bbbfc4;
+    }
+
+    ::v-deep .el-pagination__total {
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #1f2329;
+      line-height: 28px;
+    }
+
+    ::v-deep .number.active,
+    ::v-deep .el-input__inner:hover {
+      border-color: #3370ff;
+      color: #3370ff !important;
+      background-color: #fff !important;
+    }
+
+    ::v-deep .el-icon-more {
+      border: none !important;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/gridTable/tableBody.vue b/frontend/src/components/gridTable/tableBody.vue
new file mode 100644
index 0000000000..f34a63a077
--- /dev/null
+++ b/frontend/src/components/gridTable/tableBody.vue
@@ -0,0 +1,24 @@
+<script>
+export default {
+  name: "TableBody",
+  functional: true,
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  render(h, context) {
+    const nodes = [];
+    const { columns } = context.props;
+    const { children = [] } = context;
+    if (!columns?.length) return children;
+        children.forEach(ele => {
+            if (columns.includes(ele.componentOptions.propsData.prop)) {
+                nodes.push(ele)
+            }
+        })
+    return nodes;
+  },
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/icons/svg/field_time.svg b/frontend/src/icons/svg/field_time.svg
index 3a2e07c6ff..77a79164c4 100644
--- a/frontend/src/icons/svg/field_time.svg
+++ b/frontend/src/icons/svg/field_time.svg
@@ -1 +1,4 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618217742324" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7205" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 831.712c-211.584 0-383.712-172.16-383.712-383.712 0-211.584 172.128-383.712 383.712-383.712 211.552 0 383.712 172.128 383.712 383.712 0 211.552-172.16 383.712-383.712 383.712z" p-id="7206"></path><path d="M671.968 512H512V288.064c0-17.76-14.24-32.128-32-32.128s-32 14.4-32 32.128V544c0 17.76 14.272 32 32 32h191.968c17.76 0 32.128-14.24 32.128-32s-14.368-32-32.128-32z" p-id="7207"></path></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.83301 1.33301C5.10915 1.33301 5.33301 1.55687 5.33301 1.83301V1.99967H10.6663V1.83301C10.6663 1.55687 10.8902 1.33301 11.1663 1.33301H11.4997C11.7758 1.33301 11.9997 1.55687 11.9997 1.83301V1.99967H13.9997C14.3679 1.99967 14.6663 2.29815 14.6663 2.66634V13.9997C14.6663 14.3679 14.3679 14.6663 13.9997 14.6663H1.99967C1.63148 14.6663 1.33301 14.3679 1.33301 13.9997L1.33301 2.66634C1.33301 2.29815 1.63148 1.99967 1.99967 1.99967H3.99967V1.83301C3.99967 1.55687 4.22353 1.33301 4.49967 1.33301H4.83301ZM10.6663 3.33301H5.33301V3.49967C5.33301 3.77582 5.10915 3.99967 4.83301 3.99967H4.49967C4.22353 3.99967 3.99967 3.77582 3.99967 3.49967V3.33301H2.66634V13.333H13.333V3.33301H11.9997V3.49967C11.9997 3.77582 11.7758 3.99967 11.4997 3.99967H11.1663C10.8902 3.99967 10.6663 3.77582 10.6663 3.49967V3.33301ZM5.99967 6.83301C5.99967 6.55687 5.77582 6.33301 5.49967 6.33301H4.49967C4.22353 6.33301 3.99967 6.55687 3.99967 6.83301V7.83301C3.99967 8.10915 4.22353 8.33301 4.49967 8.33301H5.49967C5.77582 8.33301 5.99967 8.10915 5.99967 7.83301V6.83301ZM6.99967 6.83301C6.99967 6.55687 7.22353 6.33301 7.49967 6.33301H8.49967C8.77582 6.33301 8.99967 6.55687 8.99967 6.83301V7.83301C8.99967 8.10915 8.77582 8.33301 8.49967 8.33301H7.49967C7.22353 8.33301 6.99967 8.10915 6.99967 7.83301V6.83301ZM5.99967 9.83301C5.99967 9.55687 5.77582 9.33301 5.49967 9.33301H4.49967C4.22353 9.33301 3.99967 9.55687 3.99967 9.83301V10.833C3.99967 11.1092 4.22353 11.333 4.49967 11.333H5.49967C5.77582 11.333 5.99967 11.1092 5.99967 10.833V9.83301ZM6.99967 9.83301C6.99967 9.55687 7.22353 9.33301 7.49967 9.33301H8.49967C8.77582 9.33301 8.99967 9.55687 8.99967 9.83301V10.833C8.99967 11.1092 8.77582 11.333 8.49967 11.333H7.49967C7.22353 11.333 6.99967 11.1092 6.99967 10.833V9.83301ZM11.9997 6.83301C11.9997 6.55687 11.7758 6.33301 11.4997 6.33301H10.4997C10.2235 6.33301 9.99967 6.55687 9.99967 6.83301V7.83301C9.99967 8.10915 10.2235 8.33301 10.4997 8.33301H11.4997C11.7758 8.33301 11.9997 8.10915 11.9997 7.83301V6.83301Z" fill="#3370FF"/>
+<path d="M11.9997 9.83301C11.9997 9.55687 11.7758 9.33301 11.4997 9.33301H10.4997C10.2235 9.33301 9.99967 9.55687 9.99967 9.83301V10.833C9.99967 11.1092 10.2235 11.333 10.4997 11.333H11.4997C11.7758 11.333 11.9997 11.1092 11.9997 10.833V9.83301Z" fill="#3370FF"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 6dbcdf12a3..6cfe191bcb 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -131,9 +131,13 @@ export default {
     default_login: 'Normal'
   },
   commons: {
+    manage_member: 'Managing members',
+    user_confirm_remove_cancel:'Are you sure you want to remove the user from the role?',
+    confirm_remove_cancel: 'Are you sure to delete the role?',
     default_value: 'Default Value',
     params_value: 'Param Value',
     publish: 'publish',
+    input_role_name: 'Enter a role name',
     unpublished: 'unpublished',
     default_pwd: 'Default Pwd',
     stop: 'Stop',
@@ -159,6 +163,7 @@ export default {
     button: 'Button',
     man: 'Man',
     woman: 'Woman',
+    keep_secret: 'keep secret',
     nick_name: 'Name',
     confirmPassword: 'Confirm Password',
     upload: 'Upload',
@@ -210,6 +215,8 @@ export default {
     member: 'Member',
     email: 'Email',
     phone: 'Phone',
+    mobile_phone: 'Please enter your mobile phone number',
+    mobile_phone_number: 'Phone number',
     role: 'Role',
     personal_info: 'Personal Info',
     api_keys: 'API Keys',
@@ -503,7 +510,7 @@ export default {
     please_choose_member: 'Please choose member',
     search_by_name: 'Search by name',
     modify_personal_info: 'Modify personal info',
-    edit_password: 'Edit Password',
+    edit_password: 'Reset Password',
     edit_information: 'Edit Information',
     input_name: 'Input Name',
     input_email: 'Input Email',
@@ -525,6 +532,12 @@ export default {
     modify: 'Modify User',
     input_name: 'Please enter user name',
     input_id: 'Please enter user ID',
+    id_mandatory: 'id is mandatory',
+    name_mandatory: 'name is mandatory',
+    email_mandatory: 'email is mandatory',
+    role_mandatory: 'role is mandatory',
+    phone_format: 'mobile phone number format is incorrect',
+    select_gender: 'Please select gender',
     input_email: 'Please input email',
     input_password: 'Please input a password',
     input_phone: 'Please enter the phone number',
@@ -536,7 +549,8 @@ export default {
     apikey_delete_confirm: 'Confirm to delete this API key?',
     input_id_placeholder: 'Please enter ID (Chinese is not supported)',
     source: 'User Source',
-    choose_org: 'Choose Organization',
+    choose_org: 'Please select a role',
+    choose_role: '请选择角色',
     reset_password: 'Reset Password',
     current_user: 'Current User',
     origin_passwd: 'Origin Password',
@@ -601,7 +615,20 @@ export default {
     confirm_delete: 'Confirm delete role ',
     role_name: 'Role Name ',
     search_by_name: 'Search by name',
-    pls_input_name: 'please input name'
+    pls_input_name: 'please input name',
+    search_by_name_email: 'Search by name or email',
+    api_role: 'API role',
+    role_exist: 'Failed to add, the role already exists',
+    add_api_role: 'Add API role',
+    can_not_move: `Can't be removed, keep at least one administrator`,
+    manage_can_not_move: 'Administrator is a preset role of the system. By default, he has all the permissions of system management and cannot be deleted',
+    manage_can_not_update: 'Administrator is a preset role of the system. By default, he has all the permissions of system management and cannot be edit',
+    role_name: 'Role name',
+    role_description: 'Role description',
+    editer_role: 'Edit role',
+    add_role: 'Add role',
+    role_name_exist: 'The role name already exists',
+    search_by_role: 'Search by role name',
   },
   menu: {
     parent_category: 'Parent Category',
@@ -636,7 +663,26 @@ export default {
     select_organization: 'Please select organization',
     search_by_name: 'Search by name',
     special_characters_are_not_supported: 'Format error (special characters are not supported and cannot start and end with \'-\')',
-    select: 'Select organization'
+    select: 'Select organization',
+    member: 'member',
+    organization: 'organization',
+    add_user: 'Add user',
+    search_by_name: 'Search by organization name',
+    sure_move_user: 'Are you sure to remove this user from the organization?',
+    move_success: 'Removed successfully',
+    user: 'user',
+    add_organization: 'Add organization',
+    defalut_organization_canot_move: 'The default organization cannot be deleted',
+    organization_name: 'Organization name',
+    input_organization_name: 'Please enter the organization name',
+    relate_top_organization: 'Associated parent organization',
+    organization_name_exist: 'Organization name already exists',
+    canot_delete: 'Cannot delete',
+    remove_user_first: 'Please remove all users in the organization before deleting the organization',
+    sure_delete_organization: 'Are you sure to delete this organization?',
+    delete: 'delete',
+    add_child_org: 'Add sub organization',
+    edite_organization: 'Edit organization',
   },
   system_parameter_setting: {
     mailbox_service_settings: 'Mail Settings',
@@ -1834,6 +1880,7 @@ export default {
     dept: 'Dept',
     role: 'Role',
     user: 'User',
+    set_rules: 'Set rules',
     sysParams_type: {
       user_id: 'User ID',
       user_name: 'User Name',
@@ -1857,7 +1904,34 @@ export default {
     view: 'View',
     use: 'Use',
     export: 'Export',
-    manage: 'Manage'
+    manage: 'Manage',
+    row_column: 'Row and column permission settings',
+    row_permission: 'Row permission rules',
+    enable_row: 'Enable row permissions',
+    add_condition: 'Add condition',
+    add_relationship: 'Add relationship',
+    white_list: 'White list',
+    white_user_not: 'The above permission rules do not take effect for white list users',
+    organization_or_role: 'Please select an organization or role',
+    column_permission: 'Column permission rule',
+    enable_column: 'Enable column permissions',
+    search_by_field: 'Search by field name',
+    add_condition: 'Add condition',
+    add_relationship: 'Add relationship',
+    filter_fields: 'Filter fields',
+    selct_filter_fields: 'Please select a filter field',
+    enter_keywords: 'Please enter keywords',
+    screen_method: 'Screening method',
+    select: 'Please select',
+    fixed_value: 'Fixed value',
+    defalut_method: 'Default condition',
+    select_all: 'Select all',
+    added: 'Added',
+    manual_input: 'Manual input',
+    please_fill: 'Please fill in one line and add 500 at most. Duplicate options and added options will be automatically filtered when identifying and entering',
+    close: 'close',
+    add: 'add to',
+    sure: 'determine',
   },
   about: {
     auth_to: 'Authorized to',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index ad13363808..7d8a88d4c5 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -131,9 +131,13 @@ export default {
     default_login: '普通登錄'
   },
   commons: {
+    manage_member: '管理成員',
+    user_confirm_remove_cancel: '確定將該用戶從角色中移除嗎?',
+    confirm_remove_cancel: '確定刪除該角色嗎?',
     default_value: '默認值',
     params_value: '参数值',
     publish: '發布',
+    input_role_name: '請輸入角色名稱',
     unpublished: '取消發布',
     default_pwd: '初始密碼',
     stop: '停止',
@@ -159,6 +163,7 @@ export default {
     gender: '性別',
     man: '男',
     woman: '女',
+    keep_secret: '保密',
     nick_name: '姓名',
     confirmPassword: '確認密碼',
     upload: '上傳',
@@ -210,6 +215,8 @@ export default {
     member: '成員',
     email: '郵箱',
     phone: '電話',
+    mobile_phone: '請輸入手機號',
+    mobile_phone_number: '手機號碼',
     role: '角色',
     personal_info: '個人信息',
     api_keys: 'API Keys',
@@ -503,7 +510,7 @@ export default {
     please_choose_member: '請選擇成員',
     search_by_name: '根據名稱搜索',
     modify_personal_info: '修改個人信息',
-    edit_password: '修改密碼',
+    edit_password: '重置密码',
     edit_information: '編輯信息',
     input_name: '請輸入名稱',
     input_email: '請輸入郵箱',
@@ -525,6 +532,12 @@ export default {
     modify: '修改用戶',
     input_name: '請輸入用戶姓名',
     input_id: '請輸入ID',
+    id_mandatory: 'ID為必填',
+    name_mandatory: '姓名為必填',
+    email_mandatory: '郵箱為必填',
+    role_mandatory: '角色為必填',
+    phone_format: '手機號碼格式錯誤',
+    select_gender: '請選擇性別',
     input_email: '請輸入郵箱',
     input_password: '請輸入密碼',
     input_phone: '請輸入電話號碼',
@@ -537,7 +550,7 @@ export default {
     apikey_delete_confirm: '這個 API Key 確定要刪除嗎?',
     input_id_placeholder: '請輸入ID (不支持中文)',
     source: '用戶來源',
-    choose_org: '選擇組織',
+    choose_org: '請選擇組織',
     reset_password: '重置密碼',
     current_user: '當前用戶',
     origin_passwd: '原始密碼',
@@ -603,7 +616,20 @@ export default {
     confirm_delete: '確認刪除角色 ',
     role_name: '角色名稱',
     search_by_name: '按名稱搜索',
-    pls_input_name: '請輸入名稱'
+    pls_input_name: '請輸入名稱',
+    search_by_name_email: '通過姓名或郵箱搜索',
+    api_role: 'API角色',
+    role_exist: '添加失敗，該角色已存在',
+    add_api_role: '添加API角色',
+    can_not_move: '不可移除，至少保留一位管理員',
+    manage_can_not_move: '管理員是系統預置角色，默認擁有系統管理全部權限，無法刪除',
+    manage_can_not_update: '管理員是系統預置角色，默認擁有系統管理全部權限，無法編輯',
+    role_name: '角色名稱',
+    role_description: '角色描述',
+    editer_role: '編輯角色',
+    add_role: '添加角色',
+    role_name_exist: '該角色名稱已存在',
+    search_by_role: '通過角色名稱搜索',
   },
   menu: {
     parent_category: '上級目錄',
@@ -638,7 +664,26 @@ export default {
     select_organization: '請選擇組織',
     search_by_name: '根據名稱搜索',
     special_characters_are_not_supported: '格式錯誤(不支持特殊字符，且不能以\'-\'開頭結尾)',
-    select: '選擇組織'
+    select: '選擇組織',
+    member: '成員',
+    organization: '組織',
+    add_user: '添加用戶',
+    search_by_name: '通過組織名稱搜索',
+    sure_move_user: '確定將該用戶從組織中移除嗎？',
+    move_success: '移除成功',
+    user: '用戶',
+    add_organization: '添加組織',
+    defalut_organization_canot_move: '默認組織無法刪除',
+    organization_name: '組織名稱',
+    input_organization_name: '請輸入組織名稱',
+    relate_top_organization: '關聯上級組織',
+    organization_name_exist: '組織名稱已存在',
+    canot_delete: '無法刪除',
+    remove_user_first: '請先移除組織中所有用戶，再進行刪除組織操作。',
+    sure_delete_organization: '確定刪除該組織嗎？',
+    delete: '刪除',
+    add_child_org: '添加子組織',
+    edite_organization: '編輯組織',
   },
   system_parameter_setting: {
     mailbox_service_settings: '郵件設置',
@@ -1844,6 +1889,7 @@ export default {
     dept: '組織',
     role: '角色',
     user: '用戶',
+    set_rules: '設置規則',
     sysParams: '系統變量',
     sysParams_type: {
       user_id: '用戶ID',
@@ -1869,7 +1915,34 @@ export default {
     view: '查看',
     use: '使用',
     export: '導出',
-    manage: '管理'
+    manage: '管理',
+    row_column: '行列權限設置',
+    row_permission: '行權限規則',
+    enable_row: '啟用行權限',
+    add_condition: '添加條件',
+    add_relationship: '添加關系',
+    white_list: '白名單',
+    white_user_not: '以上權限規則對白名單用戶不生效',
+    organization_or_role: '請選擇組織或角色',
+    column_permission: '列權限規則',
+    enable_column: '啟用列權限',
+    search_by_field: '通過字段名稱搜索',
+    add_condition: '添加條件',
+    add_relationship: '添加關系',
+    filter_fields: '篩選字段',
+    selct_filter_fields: '請選擇篩選字段',
+    enter_keywords: '請輸關鍵字',
+    screen_method: '篩選方式',
+    select: '請選擇',
+    fixed_value: '固定值',
+    defalut_method: '默認條件',
+    select_all: '全 選',
+    added: '已添加',
+    manual_input: '手工輸入',
+    please_fill: '請一行填一個，最多添加500個,識別錄入時會自動過濾重復的選項和已經添加過的選項',
+    close: '關 閉',
+    add: '添 加',
+    sure: '確 定',
   },
   about: {
     auth_to: '授權給',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index d0776d6fa7..bb46e8a0a4 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -131,8 +131,12 @@ export default {
     default_login: '普通登录'
   },
   commons: {
+    manage_member: '管理成员',
+    confirm_remove_cancel: '确定删除该角色吗?',
+    user_confirm_remove_cancel:'确定将该用户从角色中移除吗?',
     default_value: '默认值',
     params_value: '参数值',
+    input_role_name: '请输入角色名称',
     publish: '发布',
     unpublished: '取消发布',
     default_pwd: '初始密码',
@@ -159,6 +163,7 @@ export default {
     gender: '性别',
     man: '男',
     woman: '女',
+    keep_secret: '保密',
     nick_name: '姓名',
     confirmPassword: '确认密码',
     upload: '上传',
@@ -211,6 +216,8 @@ export default {
     member: '成员',
     email: '邮箱',
     phone: '电话',
+    mobile_phone: '请输入手机号',
+    mobile_phone_number: '手机号码',
     role: '角色',
     personal_info: '个人信息',
     api_keys: 'API Keys',
@@ -504,7 +511,7 @@ export default {
     please_choose_member: '请选择成员',
     search_by_name: '根据名称搜索',
     modify_personal_info: '修改个人信息',
-    edit_password: '修改密码',
+    edit_password: '重置密码',
     edit_information: '编辑信息',
     input_name: '请输入名称',
     input_email: '请输入邮箱',
@@ -522,15 +529,21 @@ export default {
     no_such_user: '无此用户信息, 请输入正确的用户 ID 或者 用户邮箱！'
   },
   user: {
-    create: '新建用户',
-    modify: '修改用户',
-    input_name: '请输入用户姓名',
+    create: '添加用户',
+    modify: '编辑用户',
+    input_name: '请输入姓名',
     input_id: '请输入ID',
+    id_mandatory: 'ID为必填',
+    name_mandatory: '姓名为必填',
+    email_mandatory: '邮箱为必填',
+    role_mandatory: '角色为必填',
+    phone_format: '手机号码格式错误',
     input_email: '请输入邮箱',
     input_password: '请输入密码',
     input_phone: '请输入电话号码',
     input_roles: '请选择角色',
     select_users: '请选择用户',
+    select_gender: '请选择性别',
     special_characters_are_not_supported: '不支持特殊字符',
     mobile_number_format_is_incorrect: '手机号码格式不正确',
     email_format_is_incorrect: '邮箱格式不正确',
@@ -538,7 +551,7 @@ export default {
     apikey_delete_confirm: '这个 API Key 确定要删除吗?',
     input_id_placeholder: '请输入ID (不支持中文)',
     source: '用户来源',
-    choose_org: '选择组织',
+    choose_org: '请选择组织',
     reset_password: '重置密码',
     current_user: '当前用户',
     origin_passwd: '原始密码',
@@ -604,7 +617,20 @@ export default {
     confirm_delete: '确认删除角色 ',
     role_name: '角色名称',
     search_by_name: '按名称搜索',
-    pls_input_name: '请输入名称'
+    pls_input_name: '请输入名称',
+    search_by_name_email: '通过姓名或邮箱搜索',
+    api_role: 'API角色',
+    role_exist: '添加失败，该角色已存在',
+    add_api_role: '添加API角色',
+    can_not_move: '不可移除，至少保留一位管理员',
+    manage_can_not_move: '管理员是系统预置角色，默认拥有系统管理全部权限，无法删除',
+    manage_can_not_update: '管理员是系统预置角色，默认拥有系统管理全部权限，无法编辑',
+    role_name: '角色名称',
+    role_description: '角色描述',
+    editer_role: '编辑角色',
+    add_role: '添加角色',
+    role_name_exist: '该角色名称已存在',
+    search_by_role: '通过角色名称搜索',
   },
   menu: {
     parent_category: '上级目录',
@@ -639,7 +665,26 @@ export default {
     select_organization: '请选择组织',
     search_by_name: '根据名称搜索',
     special_characters_are_not_supported: '格式错误(不支持特殊字符，且不能以\'-\'开头结尾)',
-    select: '选择组织'
+    select: '选择组织',
+    member: '成员',
+    organization: '组织',
+    add_user: '添加用户',
+    search_by_name: '通过组织名称搜索',
+    sure_move_user: '确定将该用户从组织中移除吗？',
+    move_success: '移除成功',
+    user: '用户',
+    add_organization: '添加组织',
+    defalut_organization_canot_move: '默认组织无法删除',
+    organization_name: '组织名称',
+    input_organization_name: '请输入组织名称',
+    relate_top_organization: '关联上级组织',
+    organization_name_exist: '组织名称已存在',
+    canot_delete: '无法删除',
+    remove_user_first: '请先移除组织中所有用户，再进行删除组织操作。',
+    sure_delete_organization: '确定删除该组织吗？',
+    delete: '删除',
+    add_child_org: '添加子组织',
+    edite_organization: '编辑组织',
   },
   system_parameter_setting: {
     mailbox_service_settings: '邮件设置',
@@ -1853,6 +1898,7 @@ export default {
     dept: '组织',
     role: '角色',
     user: '用户',
+    set_rules: '设置规则',
     sysParams: '系统变量',
     sysParams_type: {
       user_id: '用户ID',
@@ -1878,7 +1924,34 @@ export default {
     view: '查看',
     use: '使用',
     export: '导出',
-    manage: '管理'
+    manage: '管理',
+    row_column: '行列权限设置',
+    row_permission: '行权限规则',
+    enable_row: '启用行权限',
+    add_condition: '添加条件',
+    add_relationship: '添加关系',
+    white_list: '白名单',
+    white_user_not: '以上权限规则对白名单用户不生效',
+    organization_or_role: '请选择组织或角色',
+    column_permission: '列权限规则',
+    enable_column: '启用列权限',
+    search_by_field: '通过字段名称搜索',
+    add_condition: '添加条件',
+    add_relationship: '添加关系',
+    filter_fields: '筛选字段',
+    selct_filter_fields: '请选择筛选字段',
+    enter_keywords: '请输关键字',
+    screen_method: '筛选方式',
+    select: '请选择',
+    fixed_value: '固定值',
+    defalut_method: '默认条件',
+    select_all: '全 选',
+    added: '已添加',
+    manual_input: '手工输入',
+    please_fill: '请一行填一个，最多添加500个,识别录入时会自动过滤重复的选项和已经添加过的选项',
+    close: '关 闭',
+    add: '添 加',
+    sure: '确 定',
   },
   about: {
     auth_to: '授权给',
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index cfbac3949c..aa711cb469 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -1,60 +1,147 @@
 <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 }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-menu
       :default-active="activeMenu"
       :collapse="isCollapse"
       :unique-opened="false"
       :collapse-transition="false"
-
       mode="vertical"
     >
-      <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+      <sidebar-item
+        v-for="route in routes"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+      />
     </el-menu>
+    <div
+      :style="{ width: isCollapse ? '64px' : '260px' }"
+      class="sidebar-collapse-btn"
+      @click="changeSideWidth"
+    >
+      <i
+        :style="{ transform: isCollapse ? 'rotate(90deg)' : 'rotate(-90deg)' }"
+        class="el-icon-upload2"
+      ></i>
+      {{ isCollapse ? "" : "收起导航" }}
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Logo from './Logo'
-import SidebarItem from './SidebarItem'
-import variables from '@/styles/variables.scss'
+import { mapGetters } from "vuex";
+import Logo from "./Logo";
+import SidebarItem from "./SidebarItem";
+import variables from "@/styles/variables.scss";
+import path from "path";
+import { isExternal } from "@/utils/validate";
 export default {
   components: { SidebarItem, Logo },
 
   computed: {
-
-    ...mapGetters([
-      'sidebar'
-    ]),
+    ...mapGetters(["sidebar"]),
     routes() {
       // return this.$router.options.routes
-      return this.$store.state.permission.currentRoutes.children
+      if (this.isCollapse) {
+        return this.flatterRouter(
+          this.$store.state.permission.currentRoutes.children
+        );
+      }
+      return this.$store.state.permission.currentRoutes.children;
     },
     activeMenu() {
-      const route = this.$route
-      const { meta, path } = route
+      const route = this.$route;
+      const { meta, path } = route;
       // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
-        return meta.activeMenu
+        return meta.activeMenu;
       }
-      return path
+      return path;
     },
     showLogo() {
-      return this.$store.state.settings.sidebarLogo
+      return this.$store.state.settings.sidebarLogo;
     },
     variables() {
-      return variables
+      return variables;
     },
-    isCollapse() {
-      return false
-    }
-
-  }
-}
+  },
+  data() {
+    return {
+      isCollapse: false,
+    };
+  },
+  methods: {
+    changeSideWidth() {
+      this.isCollapse = !this.isCollapse;
+      this.$emit("changeSideWidth", this.isCollapse ? "70px" : "");
+    },
+    resolvePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath;
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath;
+      }
+      const currentRoutes = this.$store.state.permission.currentRoutes;
+      if (currentRoutes && currentRoutes.path) {
+        return path.resolve(currentRoutes.path, this.basePath, routePath);
+      }
+    },
+    flatterRouter(arr = [], route = [], path = "") {
+      arr.forEach((ele) => {
+        this.formaterRoutePath(ele, path, route);
+      });
+      return route;
+    },
+    pathEndwith(path = "") {
+      return path.endsWith("/") || !path ? path : path + "/";
+    },
+    formaterRoutePath(ele, routePath = "", route) {
+      if (!ele.hidden) {
+        if (!ele.children?.length) {
+          ele.path = routePath + ele.path;
+          route.push(ele);
+        } else {
+          this.flatterRouter(ele.children, route, this.pathEndwith(ele.path));
+        }
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.sidebar-collapse-btn {
+  height: 48px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #1f232926;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  //styleName: 中文/桌面端/正文 14 22 Regular;
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-weight: 400;
+  color: #646a73;
+  background: #fff;
+  cursor: pointer;
 
+  i {
+    margin-right: 8.8px;
+  }
+}
+::v-deep .el-menu {
+  .el-menu-item,
+  .el-submenu__title {
+    height: 48px;
+    line-height: 48px;
+  }
+  .el-tooltip {
+    padding-left: 25px !important;
+  }
+}
 </style>
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 221a405f0d..d48b87825d 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -4,8 +4,8 @@
     <topbar v-if="!fullHeightFlag && finishLoad" :show-tips="showTips" />
 
     <de-container :style="mainStyle">
-      <de-aside-container v-if="!sidebar.hide" type="system" class="le-aside-container">
-        <sidebar class="sidebar-container" />
+      <de-aside-container v-if="!sidebar.hide" :isCollapseWidth="sideWidth" type="system" class="le-aside-container">
+        <sidebar @changeSideWidth="(side) => sideWidth = side"  class="sidebar-container" />
       </de-aside-container>
 
       <de-main-container class="la-main-container" :class="{'full-height':fullHeightFlag}">
@@ -51,7 +51,8 @@ export default {
       componentName: 'PanelMain',
       showTips: false,
       finishLoad: false,
-      buttonDisable: false
+      buttonDisable: false,
+      sideWidth: "",
     }
   },
   computed: {
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index f823d8a86c..5c1dd3d73b 100644
--- a/frontend/src/styles/variables.scss
+++ b/frontend/src/styles/variables.scss
@@ -21,6 +21,7 @@ $--border-color-lighter: #e6ebf5;
 $--table-border: 1px solid #dfe6ec;
 
 $--font-path: "~element-ui/lib/theme-chalk/fonts";
+$--color-primary: #3370ff;
 
 @import "~element-ui/packages/theme-chalk/src/index";
 // topBar
diff --git a/frontend/src/views/panel/template/index.vue b/frontend/src/views/panel/template/index.vue
index 786f244dbd..b128637e71 100644
--- a/frontend/src/views/panel/template/index.vue
+++ b/frontend/src/views/panel/template/index.vue
@@ -1,6 +1,6 @@
 <template>
   <de-container>
-    <de-aside-container>
+    <de-aside-container isTemplate>
       <el-tabs v-model="currentTemplateType" @tab-click="handleClick">
         <el-tab-pane name="self">
           <span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.user_template') }}</span>
diff --git a/frontend/src/views/system/plugin/dynamic.vue b/frontend/src/views/system/plugin/dynamic.vue
index eefb31c3ba..bca7a95527 100644
--- a/frontend/src/views/system/plugin/dynamic.vue
+++ b/frontend/src/views/system/plugin/dynamic.vue
@@ -1,10 +1,10 @@
 <template>
-  <layout-content v-if="!noLayout" v-loading="jsname && !innerLoadingNames.includes(jsname) && $store.getters.loadingMap[$store.getters.currentPath]" :header="header" :back-name="backName">
+  <de-layout-content v-if="!noLayout" v-loading="jsname && !innerLoadingNames.includes(jsname) && $store.getters.loadingMap[$store.getters.currentPath]" :header="header" :back-name="backName">
     <async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
     <div v-else>
       <h1>未知组件无法展示</h1>
     </div>
-  </layout-content>
+  </de-layout-content>
   <div v-else>
     <async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
     <div v-else>
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import LayoutContent from '@/components/business/LayoutContent'
+import DeLayoutContent from '@/components/business/DeLayoutContent'
 import AsyncComponent from '@/components/AsyncComponent'
 import i18n from '@/lang'
 import bus from '@/utils/bus'
@@ -23,7 +23,7 @@ import { execute } from '@/api/system/dynamic'
 export default {
   name: 'Dynamic',
   components: {
-    LayoutContent,
+    DeLayoutContent,
     AsyncComponent
   },
   props: {
@@ -69,8 +69,8 @@ export default {
           options.callBack(res)
         }
       }).catch(e => {
-        if (options.callBack) {
-          options.callBack(e)
+        if (options.error) {
+          options.error(e)
         }
       })
     },
diff --git a/frontend/src/views/system/user/filterUser.vue b/frontend/src/views/system/user/filterUser.vue
new file mode 100644
index 0000000000..c93967f5e2
--- /dev/null
+++ b/frontend/src/views/system/user/filterUser.vue
@@ -0,0 +1,363 @@
+<template>
+  <el-drawer
+    title="筛选条件"
+    :visible.sync="userDrawer"
+    custom-class="user-drawer"
+    size="680px"
+    direction="rtl"
+  >
+    <div class="filter">
+      <span>状态</span>
+      <div class="filter-item">
+        <span
+          @click="statusChange(ele.id)"
+          :class="[activeStatus.includes(ele.id) ? 'active' : '']"
+          :key="ele.id"
+          v-for="ele in status"
+          >{{ ele.label }}</span>
+      </div>
+    </div>
+    <div class="filter">
+      <span>组织</span>
+      <div class="filter-item">
+        <span
+          @click="activeDeptChange(ele.id)"
+          :class="[activeDept.includes(ele.id) ? 'active' : '']"
+          :key="ele.id"
+          v-for="ele in selectDepts"
+          >{{ ele.label }}</span>
+        <el-popover
+          placement="bottom"
+          popper-class="user-popper"
+          width="200"
+          trigger="click"
+        >
+          <el-popover
+            placement="bottom"
+            popper-class="user-popper dept"
+            width="200"
+            trigger="click"
+          >
+            <el-tree
+              :load="loadNode"
+              :lazy="true"
+              :expand-on-click-node="false"
+              :data="depts"
+              :props="defaultProps"
+              @node-click="handleNodeClick"
+            ></el-tree>
+
+            <el-select
+              ref="roleSelect"
+              v-model="selectDepts"
+              slot="reference"
+              popper-class="tree-select"
+              multiple
+              :placeholder="$t('commons.please_select')"
+              @change="changeRole"
+              @remove-tag="changeRole"
+              value-key="id"
+            >
+            <el-option
+              v-for="item in selectDepts"
+              :key="item.label"
+              :label="item.label"
+              :value="item"
+            />
+            </el-select>
+          </el-popover>
+          <span slot="reference">+ 更多</span>
+        </el-popover>
+      </div>
+    </div>
+    <div class="filter">
+      <span>角色</span>
+      <div class="filter-item">
+        <span
+          @click="activeRoleChange(ele.id)"
+          :class="[activeRole.includes(ele.id) ? 'active' : '']"
+          :key="ele.id"
+          v-for="ele in rolesValue"
+          >{{ ele.name }}</span
+        >
+        <el-popover
+          placement="bottom"
+          popper-class="user-popper"
+          width="200"
+          trigger="click"
+        >
+          <el-select
+            ref="roleSelect"
+            v-model="rolesValue"
+            multiple
+            :placeholder="$t('commons.please_select')"
+            @change="changeRole"
+            @remove-tag="changeRole"
+            value-key="id"
+          >
+            <el-option
+              v-for="item in roles"
+              :key="item.name"
+              :label="item.name"
+              :value="item"
+            />
+          </el-select>
+
+          <span slot="reference">+ 更多</span>
+        </el-popover>
+      </div>
+    </div>
+    <div class="foot">
+        <el-button class="btn normal" @click="reset">{{
+            $t("commons.reset")
+            }}</el-button>
+        <el-button type="primary" class="btn" @click="search">{{
+            $t("commons.adv_search.search")
+            }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+// import bus from '@/utils/bus'
+import { allRoles } from "@/api/system/user";
+import { getDeptTree, treeByDeptId } from "@/api/system/dept";
+
+export default {
+  data() {
+    return {
+      value: [],
+      roles: [],
+      status: [{
+        id: 1,
+        label: '启用'
+      },{
+        id: 0,
+        label: '禁用'
+      }],
+      activeStatus: [],
+      rolesValue: [],
+      activeRole: [],
+      depts: [],
+      selectDepts: [],
+      activeDept: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+        isLeaf: "leaf",
+      },
+      userDrawer: false
+    };
+  },
+  mounted() {
+    this.initRoles();
+  },
+  methods: {
+    // 获取弹窗内部门数据
+    treeByDeptId() {
+      treeByDeptId(0).then((res) => {
+        this.depts = res.data || [];
+      });
+    },
+    changeRole() {
+      const roles = this.rolesValue.map((item) => item.id);
+      this.activeRole = this.activeRole.filter((ele) => roles.includes(ele));
+    },
+    activeRoleChange(id) {
+      const roleIndex = this.activeRole.findIndex((ele) => ele === id);
+      if (roleIndex === -1) {
+        this.activeRole.push(id);
+      } else {
+        this.activeRole.splice(roleIndex, 1);
+      }
+    },
+    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();
+      }
+    },
+    activeDeptChange(id) {
+        const deptIndex = this.activeDept.findIndex((ele) => ele === id);
+      if (deptIndex === -1) {
+        this.activeDept.push(id);
+      } else {
+        this.activeDept.splice(deptIndex, 1);
+      }
+    },
+    statusChange(id) {
+        const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
+      if (statusIndex === -1) {
+        this.activeStatus.push(id);
+      } else {
+        this.activeStatus.splice(statusIndex, 1);
+      }
+    },
+    changeDepts() {
+        const depts = this.selectDepts.map((item) => item.id);
+        this.activeDept = this.activeDept.filter((ele) => depts.includes(ele));
+    },
+    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,
+        leaf: !node.hasChildren,
+      };
+    },
+    initRoles() {
+      allRoles().then((res) => {
+        this.roles = res.data;
+      });
+    },
+    search() {
+      this.userDrawer = false;
+      this.$emit('search', this.formatCondition())
+    },
+    formatCondition() {
+      const fildMap = {'r.role_id': this.activeRole, 'd.dept_id': this.activeDept, 'u.enabled': this.activeStatus}
+      const conditions = []
+      Object.keys(fildMap).forEach(ele => {
+        if (fildMap[ele].length) {
+          conditions.push({
+            field: ele,
+            operator: 'in',
+            value: fildMap[ele]
+          })
+        }
+      })
+      return conditions;
+    },
+    init() {
+      this.userDrawer = true;
+    },
+    reset() {
+      this.activeStatus = [];
+      this.activeRole = [];
+      this.activeDept = [];
+      this.search()
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.user-drawer {
+  .el-drawer__header {
+    padding: 16px 21px 16px 24px;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0px;
+    text-align: left;
+    color: #1f2329;
+    border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+    margin: 0;
+  }
+
+  .el-drawer__body {
+    padding: 12px 24px 24px 24px;
+    position: relative;
+  }
+
+  .filter {
+    display: flex;
+    align-items: center;
+    height: 46px;
+    > :nth-child(1) {
+      margin-right: 88px;
+      color: #1f2329;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+    }
+    .filter-item {
+      span {
+        font-family: PingFang SC;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        margin-right: 12px;
+        text-align: center;
+        padding: 1px 6px;
+        background: #f5f6f7;
+        border-radius: 2px;
+        cursor: pointer;
+        span {
+          margin-right: 0;
+          padding: 0;
+          span {
+            margin-right: 0;
+            padding: 0;
+          }
+        }
+      }
+
+      .active {
+        background: rgba(51, 112, 255, 0.1);
+        color: #0c296e;
+      }
+    }
+  }
+  .btn {
+    border-radius: 4px;
+    padding: 5px 26px 5px 26px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0px;
+    text-align: center;
+    border: none;
+    box-sizing: border-box;
+  }
+
+  .normal {
+    color: #1f2329;
+    border: 1px solid #bbbfc4;
+    margin-left: 12px;
+  }
+
+  .foot {
+    position: absolute;
+    right: 24px;
+    bottom: 24px;
+    text-align: right;
+  }
+}
+.user-popper {
+  background: transparent;
+  padding: 0;
+  .popper__arrow {
+    display: none;
+  }
+}
+.tree-select {
+  .el-select-dropdown__empty,
+  .popper__arrow {
+    display: none;
+  }
+}
+
+.user-popper.dept {
+  height: 400px;
+  overflow: auto;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/user/form.vue b/frontend/src/views/system/user/form.vue
deleted file mode 100644
index b3d5fcfe98..0000000000
--- a/frontend/src/views/system/user/form.vue
+++ /dev/null
@@ -1,352 +0,0 @@
-<template>
-  <layout-content :header="formType=='add' ? $t('user.create') : $t('user.modify')" back-name="system-user">
-    <el-form ref="createUserForm" :model="form" :rules="rule" size="small" label-width="80px" label-position="right">
-      <el-form-item label="ID" prop="username">
-        <el-input v-model="form.username" :disabled="formType !== 'add'" />
-      </el-form-item>
-      <el-form-item :label="$t('commons.phone')" prop="phone">
-        <el-input v-model="form.phone" />
-      </el-form-item>
-      <el-form-item :label="$t('commons.nick_name')" prop="nickName">
-        <el-input v-model="form.nickName" />
-      </el-form-item>
-      <el-form-item :label="$t('commons.email')" prop="email">
-        <el-input v-model="form.email" />
-      </el-form-item>
-      <!-- <el-form-item v-if="formType !== 'modify'" :label="$t('commons.password')" prop="password">
-        <el-input v-model="form.password" autocomplete="off" show-password />
-      </el-form-item>
-      <el-form-item v-if="formType !== 'modify'" :label="$t('commons.confirmPassword')" prop="confirmPassword">
-        <el-input v-model="form.confirmPassword" autocomplete="off" show-password />
-      </el-form-item> -->
-
-      <el-form-item :label="$t('commons.gender')" prop="gender">
-        <el-radio-group v-model="form.gender" style="width: 178px">
-          <el-radio :label="$t('commons.man')">{{ $t('commons.man') }}</el-radio>
-          <el-radio :label="$t('commons.woman')">{{ $t('commons.woman') }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item :label="$t('commons.status')" prop="enabled">
-        <el-radio-group v-model="form.enabled" :disabled="formType !== 'add' && form.isAdmin" style="width: 140px">
-          <el-radio :label="1">{{ $t('commons.enable') }}</el-radio>
-          <el-radio :label="0">{{ $t('commons.disable') }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-show="isPluginLoaded" :label="$t('commons.organization')" prop="deptId">
-        <treeselect
-          ref="deptTreeSelect"
-          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"
-        />
-      </el-form-item>
-      <el-form-item v-show="isPluginLoaded" :label="$t('commons.role')" prop="roleIds">
-        <el-select
-          ref="roleSelect"
-          v-model="form.roleIds"
-          style="width: 100%"
-          :disabled="formType !== 'add' && form.isAdmin"
-          multiple
-          :placeholder="$t('commons.please_select')"
-          @remove-tag="deleteTag"
-          @change="changeRole"
-        >
-          <el-option
-            v-for="item in roles"
-            :key="item.name"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
-        <el-button @click="reset">{{ $t('commons.reset') }}</el-button>
-      </el-form-item>
-
-      <el-form-item v-if="formType === 'add'">
-        <!-- <el-link class="pwd-tips" type="danger" :underline="false">{{ $t('commons.default_pwd') + '：' + defaultPWD }}</el-link> -->
-        <el-button class="pwd-tips" type="text">{{ $t('commons.default_pwd') + '：' + defaultPWD }}</el-button>
-        <el-button
-          v-clipboard:copy="defaultPWD"
-          v-clipboard:success="onCopy"
-          v-clipboard:error="onError"
-          type="text"
-        >
-          {{ $t('commons.copy') }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-
-  </layout-content>
-</template>
-
-<script>
-import LayoutContent from '@/components/business/LayoutContent'
-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'
-export default {
-
-  components: { LayoutContent },
-  data() {
-    return {
-      form: {
-        roles: [{
-          id: ''
-        }]
-      },
-      rule: {
-        username: [
-          { required: true, message: this.$t('user.input_id'), trigger: 'blur' },
-          { min: 1, max: 50, message: this.$t('commons.input_limit', [1, 50]), trigger: 'blur' },
-          {
-            required: true,
-            pattern: '^[^\u4e00-\u9fa5]+$',
-            message: this.$t('user.special_characters_are_not_supported'),
-            trigger: 'blur'
-          }
-        ],
-        nickName: [
-          { required: true, message: this.$t('user.input_name'), trigger: 'blur' },
-          { min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur' },
-          {
-            required: true,
-            message: this.$t('user.special_characters_are_not_supported'),
-            trigger: 'blur'
-          }
-        ],
-        phone: [
-          {
-            pattern: PHONE_REGEX,
-            message: this.$t('user.mobile_number_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        email: [
-          { required: true, message: this.$t('user.input_email'), trigger: 'blur' },
-          {
-            required: true,
-            pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-            message: this.$t('user.email_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        password: [
-          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
-          {
-            required: true,
-            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-            message: this.$t('member.password_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        confirmPassword: [
-          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
-          { required: true, validator: this.repeatValidator, trigger: 'blur' }
-        ],
-        newPassword: [
-          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
-          {
-            required: true,
-            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-            message: this.$t('member.password_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        roleIds: [{ required: true, message: this.$t('user.input_roles'), trigger: 'change' }],
-        deptId: [],
-        gender: [],
-        enable: []
-
-      },
-      defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null, roleIds: [2] },
-      depts: null,
-      roles: [],
-      roleDatas: [],
-      userRoles: [],
-      formType: 'add',
-      isPluginLoaded: false,
-      defaultPWD: 'DataEase123..'
-    }
-  },
-
-  created() {
-    if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
-      const row = this.$router.currentRoute.params
-      this.edit(row)
-    } else {
-      this.create()
-    }
-    this.initRoles()
-  },
-  mounted() {
-    this.bindKey()
-  },
-  destroyed() {
-    this.unBindKey()
-  },
-  beforeCreate() {
-    pluginLoaded().then(res => {
-      this.isPluginLoaded = res.success && res.data
-    })
-    defaultPwd().then(res => {
-      if (res && res.data) {
-        this.defaultPWD = res.data
-      }
-    })
-  },
-  methods: {
-    entryKey(event) {
-      const keyCode = event.keyCode
-      if (keyCode === 13) {
-        this.save()
-      }
-    },
-    bindKey() {
-      document.addEventListener('keypress', this.entryKey)
-    },
-    unBindKey() {
-      document.removeEventListener('keypress', this.entryKey)
-    },
-    repeatValidator(rule, value, callback) {
-      if (value !== this.form.password) {
-        callback(new Error(this.$t('member.inconsistent_passwords')))
-      } else {
-        callback()
-      }
-    },
-    create() {
-      this.depts = null
-      this.formType = 'add'
-      this.form = Object.assign({}, this.defaultForm)
-    },
-    edit(row) {
-      this.depts = null
-      this.formType = 'modify'
-      this.dialogVisible = true
-      this.form = Object.assign({}, row)
-      this.form.password = ''
-      if (this.form.deptId === 0) {
-        this.form.deptId = null
-      }
-      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()
-        })
-      }
-
-      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()
-        })
-      }
-    },
-    normalizer(node) {
-      if (node.hasChildren) {
-        node.children = null
-      }
-      return {
-        id: node.deptId,
-        label: node.name,
-        children: node.children
-      }
-    },
-    deleteTag(value) {
-      this.userRoles.forEach(function(data, index) {
-        if (data.id === value) {
-          this.userRoles.splice(index, value)
-        }
-      }.bind(this))
-    },
-    changeRole(value) {
-      this.userRoles = []
-      value.forEach(function(data, index) {
-        const role = { id: data }
-        this.userRoles.push(role)
-      }.bind(this))
-    },
-    reset() {
-      this.$refs.createUserForm.resetFields()
-    },
-    save() {
-      this.$refs.createUserForm.validate(valid => {
-        if (valid) {
-          // !this.form.deptId && (this.form.deptId = 0)
-          const method = this.formType === 'add' ? addUser : editUser
-          method(this.form).then(res => {
-            this.$success(this.$t('commons.save_success'))
-            this.backToList()
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    backToList() {
-      this.$router.push({ name: 'system-user' })
-    },
-    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'))
-    },
-    onError(e) {}
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 1c7486137e..3ee38f3059 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -1,142 +1,212 @@
 <template>
-  <layout-content>
-    <complex-table
-      v-if="canLoadDom"
-      v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
-      :data="data"
-      :columns="columns"
-      :search-config="searchConfig"
-      :pagination-config="paginationConfig"
-      @select="select"
-      @search="search"
-      @sort-change="sortChange"
-    >
-      <template #toolbar>
-        <el-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" @click="create">{{ $t('user.create') }}</el-button>
-
-        <!-- <el-button v-permission="['user:import']" icon="el-icon-download" @click="importLdap">{{ $t('user.import_ldap') }}</el-button> -->
-        <!-- <el-button v-if="openLdap" v-permission="['user:import']" icon="el-icon-download" @click="importLdap">{{ $t('user.import_ldap') }}</el-button> -->
-      </template>
-
-      <el-table-column prop="username" label="ID" />
-      <el-table-column :show-overflow-tooltip="true" prop="nickName" sortable="custom" :label="$t('commons.nick_name')" />
-      <!-- <el-table-column prop="gender" :label="$t('commons.gender')" width="60" /> -->
-      <el-table-column prop="from" :label="$t('user.source')" width="80">
-        <template slot-scope="scope">
-          <div>{{ scope.row.from === 0 ? 'LOCAL' : scope.row.from === 1 ? 'LDAP' : 'OIDC' }}</div>
-        </template>
-      </el-table-column>
-
-      <el-table-column :show-overflow-tooltip="true" prop="email" :label="$t('commons.email')" />
-      <el-table-column v-if="isPluginLoaded" :show-overflow-tooltip="true" prop="dept" sortable="custom" :label="$t('commons.organization')">
-        <template slot-scope="scope">
-          <div>{{ scope.row.dept && scope.row.dept.deptName }}</div>
-        </template>
-      </el-table-column>
-      <el-table-column v-if="isPluginLoaded" prop="roles" :label="$t('commons.role')">
-        <template slot-scope="scope">
-          <div v-if="scope.row.roles && scope.row.roles.length <= 2">
-            <div v-for="role in scope.row.roles" :key="role.roleId">{{ role.roleName }}</div>
-          </div>
-          <div v-if="scope.row.roles && scope.row.roles.length > 2">
-            <el-tooltip placement="top">
-              <div slot="content">
-                <div v-for="role in scope.row.roles" :key="role.roleId">{{ role.roleName }}</div>
-              </div>
-              <div>
-                <div v-for="(role,index) in scope.row.roles" v-if="index < 2" :key="role.roleId">{{ role.roleName }}</div>
-                <div>...</div>
-              </div>
-            </el-tooltip>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="status" sortable="custom" :label="$t('commons.status')" width="80">
-        <template v-slot:default="scope">
-          <el-switch v-model="scope.row.enabled" :active-value="1" :inactive-value="0" :disabled="!checkPermission(['user:edit']) || scope.row.isAdmin" inactive-color="#DCDFE6" @change="changeSwitch(scope.row)" />
-        </template>
-      </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" prop="createTime" sortable="custom" :label="$t('commons.create_time')" width="180">
-        <template v-slot:default="scope">
-          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-        </template>
-      </el-table-column>
-      <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
-    </complex-table>
-
-    <el-dialog
-      append-to-body
-      :close-on-click-modal="false"
-      :title="formType=='add' ? $t('user.create') : $t('user.modify')"
-      :visible.sync="dialogVisible"
-      width="570px"
-      :destroy-on-close="true"
-      @closed="handleClose"
-    >
-      <el-form ref="createUserForm" :inline="true" :model="form" :rules="rule" size="small" label-width="66px">
-
-        <el-form-item :label="$t('commons.name')" prop="username">
-          <el-input v-model="form.username" />
-        </el-form-item>
-        <el-form-item :label="$t('commons.phone')" prop="phone">
-          <el-input v-model="form.phone" />
-        </el-form-item>
-        <el-form-item :label="$t('commons.nick_name')" prop="nickName">
-          <el-input v-model="form.nickName" />
-        </el-form-item>
-        <el-form-item :label="$t('commons.email')" prop="email">
-          <el-input v-model="form.email" />
-        </el-form-item>
-
-        <el-form-item :label="$t('commons.gender')">
-          <el-radio-group v-model="form.gender" style="width: 178px">
-            <el-radio :label="$t('commons.man')">{{ $t('commons.man') }}</el-radio>
-            <el-radio :label="$t('commons.woman')">{{ $t('commons.woman') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('commons.status')">
-          <el-radio-group v-model="form.enabled" style="width: 140px">
-            <el-radio :label="1">{{ $t('commons.enable') }} </el-radio>
-            <el-radio :label="0"> {{ $t('commons.disable') }} </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('commons.organization')" prop="dept">
-          <treeselect
-            v-model="form.deptId"
-            :options="depts"
-            :load-options="loadDepts"
-            style="width: 430px"
-            :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')"
-          />
-        </el-form-item>
-        <el-form-item style="margin-bottom: 0;" :label="$t('commons.role')" prop="roleIds">
-          <el-select
-            v-model="form.roleIds"
-            style="width: 430px"
-            multiple
-            required="true"
-            :placeholder="$t('commons.please_select')"
-            @remove-tag="deleteTag"
-            @change="changeRole"
+  <de-layout-content>
+    <el-row class="top-operate">
+      <el-col :span="12">
+        <el-button
+          class="btn"
+          type="primary"
+          v-permission="['user:add']"
+          icon="el-icon-plus"
+          @click="create"
+          >{{ $t("user.create") }}</el-button
+        >
+      </el-col>
+      <el-col :span="12" class="right-user">
+        <el-input
+          :placeholder="$t('role.search_by_name_email')"
+          prefix-icon="el-icon-search"
+          class="name-email-search"
+          size="small"
+          clearable
+          ref="search"
+          v-model="nikeName"
+          @blur="initSearch"
+          @clear="initSearch"
+        >
+        </el-input>
+        <el-button
+          class="normal btn"
+          icon="el-icon-setting"
+          @click="filterShow"
+          >筛选</el-button
+        >
+        <el-dropdown trigger="click" :hide-on-click="false">
+          <el-button class="normal btn" icon="el-icon-setting"
+            >列表项</el-button
           >
-            <el-option
-              v-for="item in roles"
-              :key="item.name"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="createUser('createUserForm')">{{ $t('commons.confirm') }}</el-button>
-      </div>
-    </el-dialog>
+          <el-dropdown-menu class="list-colums-slect" slot="dropdown">
+            <p class="title">请选择列表中要展示的信息</p>
+            <el-checkbox
+              :indeterminate="isIndeterminate"
+              v-model="checkAll"
+              @change="handleCheckAllChange"
+              >全选</el-checkbox
+            >
+            <el-checkbox-group
+              v-model="checkedColumnNames"
+              @change="handleCheckedColumnNamesChange"
+            >
+              <el-checkbox v-for="column in columnNames" :label="column.props" :key="column.props">{{
+               $t(column.label)
+              }}</el-checkbox>
+            </el-checkbox-group>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col>
+    </el-row>
+    <div class="table-container">
+      <grid-table
+        v-if="canLoadDom"
+        v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+        :tableData="data"
+        :columns="checkedColumnNames"
+        :pagination="paginationConfig"
+        @sort-change="sortChange"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <el-table-column prop="username" label="ID" />
+        <el-table-column
+          show-overflow-tooltip
+          key="nickName"
+          prop="nickName"
+          sortable="custom"
+          :label="$t('commons.nick_name')"
+        />
+        <!-- <el-table-column prop="gender" :label="$t('commons.gender')" width="60" /> -->
+        <el-table-column prop="from" :label="$t('user.source')" width="80">
+          <template slot-scope="scope">
+            <div>
+              {{
+                scope.row.from === 0
+                  ? "LOCAL"
+                  : scope.row.from === 1
+                  ? "LDAP"
+                  : "OIDC"
+              }}
+            </div>
+          </template>
+        </el-table-column>
 
+        <el-table-column
+          show-overflow-tooltip
+          key="email"
+          prop="email"
+          :label="$t('commons.email')"
+        />
+        <el-table-column
+          v-if="isPluginLoaded"
+          show-overflow-tooltip
+          key="dept"
+          prop="dept"
+          sortable="custom"
+          :label="$t('commons.organization')"
+        >
+          <template slot-scope="scope">
+            <div>{{ scope.row.dept && scope.row.dept.deptName || "-" }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="isPluginLoaded"
+          prop="roles"
+          :formatter="filterRoles"
+          key="roles"
+          show-overflow-tooltip
+          :label="$t('commons.role')"
+        >
+        </el-table-column>
+        <el-table-column
+          key="status"
+          prop="status"
+          sortable="custom"
+          :label="$t('commons.status')"
+          width="80"
+        >
+          <template v-slot:default="scope">
+            <el-switch
+              v-model="scope.row.enabled"
+              :active-value="1"
+              :inactive-value="0"
+              :disabled="!checkPermission(['user:edit']) || scope.row.isAdmin"
+              inactive-color="#DCDFE6"
+              @change="changeSwitch(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          prop="createTime"
+          key="createTime"
+          sortable="custom"
+          :label="$t('commons.create_time')"
+          width="180"
+        >
+          <template v-slot:default="scope">
+            <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="__operation" label="操作" fixed="right" width="168">
+          <template slot-scope="scope">
+            <el-button
+              v-permission="['user:edit']"
+              @click="edit(scope.row)"
+              class="text-btn"
+              type="text"
+              >{{ $t("commons.edit") }}</el-button
+            >
+            <el-popover
+              placement="left"
+              width="321"
+              :ref="'initPwd' + scope.row.userId"
+              popper-class="reset-pwd"
+              trigger="hover"
+            >
+              <i class="el-icon-warning"></i>
+              <div class="tips">是否恢复为初始密码?</div>
+              <div class="editer-form-title">
+                <span class="pwd" type="text">{{
+                  $t("commons.default_pwd") + "：" + defaultPWD
+                }}</span>
+                <el-button
+                  v-clipboard:copy="defaultPWD"
+                  v-clipboard:success="onCopy"
+                  v-clipboard:error="onError"
+                  class="btn-text"
+                  type="text"
+                >
+                  {{ $t("commons.copy") }}
+                </el-button>
+              </div>
+              <div class="foot">
+                <!-- <el-button class="btn normal">{{
+                  $t("fu.search_bar.cancel")
+                }}</el-button> -->
+                <el-button @click="resetPwd(scope.row.userId)" type="primary" class="btn">{{
+                  $t("fu.search_bar.ok")
+                }}</el-button>
+              </div>
+
+              <el-button
+                slot="reference"
+                v-permission="['user:editPwd']"
+                class="text-btn mar16"
+                @click="editPassword(scope.row)"
+                type="text"
+                >{{ $t("member.edit_password") }}</el-button
+              >
+            </el-popover>
+            <el-button
+              v-permission="['user:del']"
+              @click="del(scope.row)"
+              class="text-btn"
+              type="text"
+              >{{ $t("commons.delete") }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </grid-table>
+    </div>
     <el-dialog
       :close-on-click-modal="false"
       :title="$t('member.edit_password')"
@@ -156,372 +226,576 @@
         @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-item>
-          <el-input v-model="ruleForm.userId" autocomplete="off" :disabled="true" style="display:none" />
+          <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>
+        <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>
-  </layout-content>
+    <keep-alive>
+      <filterUser ref="filterUser" @search="filterDraw" ></filterUser>
+    </keep-alive>
+    <user-editer @saved="search" ref="userEditer" ></user-editer>
+  </de-layout-content>
 </template>
 
 <script>
-import LayoutContent from '@/components/business/LayoutContent'
-import ComplexTable from '@/components/business/complex-table'
-import { formatCondition, formatQuickCondition, addOrder, formatOrders } from '@/utils/index'
-import { PHONE_REGEX } from '@/utils/validate'
-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'
-import { pluginLoaded } from '@/api/user'
+import userEditer from './userEditer.vue'
+const columnOptions = [{
+  label: 'ID',
+  props: 'username'
+},{
+  label: 'commons.nick_name',
+  props: 'nickName'
+},{
+  label: 'user.source',
+  props: 'from'
+},{
+  label: 'commons.email',
+  props: 'email'
+},{
+  label: 'commons.organization',
+  props: 'dept'
+},{
+  label: 'commons.role',
+  props: 'roles'
+},{
+  label: 'commons.status',
+  props: 'status'
+},{
+  label: 'commons.create_time',
+  props: 'createTime'
+},];
+import DeLayoutContent from "@/components/business/DeLayoutContent";
+import {
+  addOrder,
+  formatOrders,
+} from "@/utils/index";
+import { pluginLoaded, defaultPwd } from "@/api/user";
 /* import { ldapStatus, pluginLoaded } from '@/api/user' */
-import { userLists, addUser, editUser, delUser, editPassword, editStatus, allRoles } from '@/api/system/user'
-import { getDeptTree, treeByDeptId } from '@/api/system/dept'
-import { mapGetters } from 'vuex'
+import {
+  userLists,
+  delUser,
+  editPassword,
+  editStatus,
+  allRoles,
+} from "@/api/system/user";
+import { mapGetters } from "vuex";
+import filterUser from "./filterUser.vue";
+import GridTable from "@/components/gridTable/index.vue";
 export default {
-
-  components: { ComplexTable, LayoutContent, Treeselect },
+  components: { DeLayoutContent, GridTable, filterUser, userEditer },
   data() {
     return {
-      header: '',
-      columns: [],
-      buttons: [
-        {
-          label: this.$t('commons.edit'), icon: 'el-icon-edit', type: 'primary', click: this.edit,
-          show: this.checkPermission(['user:edit'])
-        }, {
-          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
-          disabled: this.btnDisabled,
-          show: this.checkPermission(['user:del'])
-        }, {
-          label: this.$t('member.edit_password'), icon: 'el-icon-s-tools', type: 'success', click: this.editPassword,
-          show: this.checkPermission(['user:editPwd'])
-        }
-
-      ],
-      searchConfig: {
-        useQuickSearch: true,
-        useComplexSearch: true,
-        quickPlaceholder: this.$t('user.search_by_name'),
-        components: [
-          { field: 'nick_name', label: this.$t('commons.nick_name'), component: 'DeComplexInput' },
-          {
-            field: 'u.enabled',
-            label: this.$t('commons.status'),
-            component: 'DeComplexSelect',
-            options: [
-              { label: this.$t('commons.enable'), value: '1' },
-              { label: this.$t('commons.disable'), value: '0' }
-            ],
-            multiple: false
-          }
-
-        ]
-      },
-      extraFilterComponents: [
-        { field: 'd.name', label: this.$t('commons.organization'), component: 'DeComplexInput' },
-        { field: 'r.name', label: this.$t('commons.role'), component: 'DeComplexInput' }
-      ],
+      checkAll: true,
+      checkedColumnNames: columnOptions.map(ele => ele.props),
+      columnNames: columnOptions,
+      isIndeterminate: false,
       paginationConfig: {
         currentPage: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
       data: [],
-
       dialogVisible: false,
       editPasswordVisible: false,
       form: {
-        roles: [{
-          id: ''
-        }]
+        roles: [
+          {
+            id: "",
+          },
+        ],
       },
-      checkPasswordForm: {},
       ruleForm: {},
       rule: {
-        username: [
-          { required: true, message: this.$t('user.input_id'), trigger: 'blur' },
-          { min: 1, max: 50, message: this.$t('commons.input_limit', [1, 50]), trigger: 'blur' },
-          {
-            required: true,
-            pattern: '^[^\u4e00-\u9fa5]+$',
-            message: this.$t('user.special_characters_are_not_supported'),
-            trigger: 'blur'
-          }
-        ],
-        nickName: [
-          { required: true, message: this.$t('user.input_name'), trigger: 'blur' },
-          { min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur' },
-          {
-            required: true,
-            message: this.$t('user.special_characters_are_not_supported'),
-            trigger: 'blur'
-          }
-        ],
-        phone: [
-          {
-            pattern: PHONE_REGEX,
-            message: this.$t('user.mobile_number_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        email: [
-          { required: true, message: this.$t('user.input_email'), trigger: 'blur' },
-          {
-            required: true,
-            pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-            message: this.$t('user.email_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
-        password: [
-          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
-          {
-            required: true,
-            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-            message: this.$t('member.password_format_is_incorrect'),
-            trigger: 'blur'
-          }
-        ],
         newPassword: [
-          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
+          {
+            required: true,
+            message: this.$t("user.input_password"),
+            trigger: "blur",
+          },
           {
             required: true,
             pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-            message: this.$t('member.password_format_is_incorrect'),
-            trigger: 'blur'
-          }
+            message: this.$t("member.password_format_is_incorrect"),
+            trigger: "blur",
+          },
         ],
-        roleIds: [{ required: true, message: this.$t('user.input_roles'), trigger: 'blur' }]
-
       },
-      defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null },
+      cacheCondition: [],
       depts: null,
       roles: [],
-      roleDatas: [],
+      nikeName: "",
       userRoles: [],
-      formType: 'add',
-      permission: {
-        add: ['user:add'],
-        edit: ['user:edit'],
-        del: ['user:del'],
-        editPwd: ['user:editPwd']
-      },
       orderConditions: [],
-      last_condition: null,
-      openLdap: false,
       isPluginLoaded: false,
-      canLoadDom: false
-    }
+      defaultPWD: "DataEase123..",
+      canLoadDom: false,
+    };
   },
   computed: {
-    ...mapGetters([
-      'user'
-    ])
+    ...mapGetters(["user"]),
   },
   mounted() {
-    this.allRoles()
-    this.search()
+    this.allRoles();
+    this.search();
+    document.addEventListener('keypress', this.entryKey)
   },
   beforeCreate() {
-    pluginLoaded().then(res => {
-      this.isPluginLoaded = res.success && res.data
-      if (this.isPluginLoaded) {
-        this.searchConfig.components.push(...this.extraFilterComponents)
-      }
-      this.canLoadDom = true
-    }).catch(e => {
-      this.canLoadDom = true
-    })
-  },
-
-  methods: {
-    sortChange({ column, prop, order }) {
-      this.orderConditions = []
-      if (!order) {
-        this.search(this.last_condition)
-        return
-      }
-      if (prop === 'dept') {
-        prop = 'u.deptId'
-      }
-      if (prop === 'status') {
-        prop = 'u.enabled'
-      }
-      this.orderConditions = []
-      addOrder({ field: prop, value: order }, this.orderConditions)
-      this.search(this.last_condition)
-    },
-    select(selection) {
-    },
-
-    search(condition) {
-      this.last_condition = condition
-      condition = formatQuickCondition(condition, 'nick_name')
-      const temp = formatCondition(condition)
-      const param = temp || {}
-      param['orders'] = formatOrders(this.orderConditions)
-      const { currentPage, pageSize } = this.paginationConfig
-      userLists(currentPage, pageSize, param).then(response => {
-        this.data = response.data.listObject
-        this.paginationConfig.total = response.data.itemCount
+    pluginLoaded()
+      .then((res) => {
+        this.isPluginLoaded = res.success && res.data;
+        if (this.isPluginLoaded) {
+          // this.searchConfig.components.push(...this.extraFilterComponents);
+        }
+        this.canLoadDom = true;
       })
+      .catch((e) => {
+        this.canLoadDom = true;
+      });
+    defaultPwd().then((res) => {
+      if (res && res.data) {
+        this.defaultPWD = res.data;
+      }
+    });
+  },
+  destroyed () {
+    document.removeEventListener('keypress', this.entryKey)
+  },
+  methods: {
+    entryKey (event) {
+      const keyCode = event.keyCode
+      if (keyCode === 13) {
+        this.$refs.search.blur()
+      }
+    },
+    filterRoles(row, column, cellValue) {
+      const roleNames = cellValue.map(ele => ele.roleName);
+      return roleNames.length ? roleNames.join() : "-";
+    },
+    initSearch() {
+      this.handleCurrentChange(1);
+    },
+    filterShow() {
+      this.$refs.filterUser.init();
+    },
+    handleCheckAllChange(val) {
+      this.checkedColumnNames = val ? columnOptions.map(ele => ele.props) : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedColumnNamesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.columnNames.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.columnNames.length;
+    },
+    resetPwd(userId) {
+      editPassword({ userId, newPassword: this.defaultPWD }).then((res) => {
+            this.$success(this.$t("commons.modify_success"));
+            this.initSearch();
+          }).finally(() => {
+            this.$refs['initPwd' + userId].doClose();
+          });
+    },
+    sortChange({ column, prop, order }) {
+      this.orderConditions = [];
+      if (!order) {
+        this.initSearch();
+        return;
+      }
+      if (prop === "dept") {
+        prop = "u.deptId";
+      }
+      if (prop === "status") {
+        prop = "u.enabled";
+      }
+      this.orderConditions = [];
+      addOrder({ field: prop, value: order }, this.orderConditions);
+      this.initSearch();
+    },
+    onCopy(e) {
+      this.$success(this.$t("commons.copy_success"));
+    },
+    onError(e) {},
+    handleSizeChange(pageSize) {
+      this.paginationConfig.pageSize = pageSize;
+      this.search();
+    },
+    handleCurrentChange(currentPage) {
+      this.paginationConfig.currentPage = currentPage;
+      this.search();
+    },
+    filterDraw(condition) {
+      this.cacheCondition = condition;
+      this.initSearch()
+    },
+    search() {
+      const param = {
+        orders: formatOrders(this.orderConditions),
+        conditions: [...this.cacheCondition],
+      };
+      if (this.nikeName) {
+        param.conditions.push({
+            field: `concat(nick_name, ',' , email)`,
+            operator: 'like',
+            value: this.nikeName
+          })
+      }
+      const { currentPage, pageSize } = this.paginationConfig;
+      userLists(currentPage, pageSize, param).then((response) => {
+        this.data = response.data.listObject;
+        this.paginationConfig.total = response.data.itemCount;
+      });
     },
     create() {
-      this.$router.push({ name: 'system-user-form' })
+      this.$refs.userEditer.init();
     },
 
     edit(row) {
-      this.$router.push({ name: 'system-user-form', params: row })
+      this.$refs.userEditer.init(row);
     },
-    showAuth(row) {
-      this.$router.push({ name: 'system-user-form', params: row })
-    },
-
     editPassword(row) {
-      this.editPasswordVisible = true
-      const tempForm = Object.assign({}, row)
-      this.ruleForm = { userId: tempForm.userId }
+      this.editPasswordVisible = true;
+      const tempForm = Object.assign({}, row);
+      this.ruleForm = { userId: tempForm.userId };
     },
     del(row) {
-      this.$confirm(this.$t('user.delete_confirm'), '', {
-        confirmButtonText: this.$t('commons.confirm'),
-        cancelButtonText: this.$t('commons.cancel'),
-        type: 'warning'
-      }).then(() => {
-        delUser(encodeURIComponent(row.userId)).then(res => {
-          this.$success(this.$t('commons.delete_success'))
-          this.search()
+      this.$confirm(this.$t("确定删除该用户吗？"), "", {
+        confirmButtonText: this.$t("commons.delete"),
+        cancelButtonText: this.$t("commons.cancel"),
+        cancelButtonClass: "de-confirm-fail-btn de-confirm-fail-cancel",
+        confirmButtonClass: "de-confirm-fail-btn de-confirm-fail-confirm",
+        customClass: "de-confirm de-confirm-fail",
+        iconClass: "el-icon-warning",
+      })
+        .then(() => {
+          delUser(encodeURIComponent(row.userId)).then((res) => {
+            this.openMessageSuccess();
+            this.initSearch();
+          });
         })
-      }).catch(() => {
-        this.$info(this.$t('commons.delete_cancel'))
-      })
+       .catch(() => {
+          this.$info(this.$t("commons.delete_cancel"));
+        });
     },
-    createUser(createUserForm) {
-      this.$refs[createUserForm].validate(valid => {
-        if (valid) {
-          const method = this.formType === 'add' ? addUser : editUser
-          method(this.form).then(res => {
-            this.$success(this.$t('commons.save_success'))
-            this.search()
-            this.dialogVisible = false
-          })
-        } else {
-          return false
-        }
-      })
+    openMessageSuccess() {
+      const h = this.$createElement;
+      this.$message({
+        message: h("p", null, [h("span", null, this.$t("commons.delete_success"))]),
+        iconClass: "el-icon-success",
+        customClass: "de-message-success de-message",
+      });
     },
-
     editUserPassword(editPasswordForm) {
-      this.$refs[editPasswordForm].validate(valid => {
+      this.$refs[editPasswordForm].validate((valid) => {
         if (valid) {
-          editPassword(this.ruleForm).then(res => {
-            this.$success(this.$t('commons.modify_success'))
-            this.editPasswordVisible = false
-            this.search()
-            this.user && this.user.userId && (this.user.userId === editPasswordForm.userId) && window.location.reload()
-          })
+          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
+          return false;
         }
-      })
+      });
     },
     handleClose() {
-      this.depts = null
-      this.formType = 'add'
-      this.form = {}
-      this.editPasswordVisible = false
-      this.dialogVisible = false
+      this.depts = null;
+      this.formType = "add";
+      this.form = {};
+      this.editPasswordVisible = false;
+      this.dialogVisible = false;
     },
     changeSwitch(row) {
-      const { userId, enabled } = row
-      const param = { userId: userId, enabled: enabled }
-      editStatus(param).then(res => {
-        this.$success(this.$t('commons.modify_success'))
-      })
-    },
-
-    initDeptTree() {
-      treeByDeptId(this.form.deptId || 0).then(res => {
-        const results = res.data.map(node => {
-          if (node.hasChildren && !node.children) {
-            node.children = null
-          }
-          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()
-        })
-      }
-
-      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()
-        })
-      }
-    },
-    normalizer(node) {
-      if (node.hasChildren) {
-        node.children = null
-      }
-      return {
-        id: node.deptId,
-        label: node.name,
-        children: node.children
-      }
-    },
-    deleteTag(value) {
-      this.userRoles.forEach(function(data, index) {
-        if (data.id === value) {
-          this.userRoles.splice(index, value)
-        }
-      }.bind(this))
-    },
-    changeRole(value) {
-      this.userRoles = []
-      value.forEach(function(data, index) {
-        const role = { id: data }
-        this.userRoles.push(role)
-      }.bind(this))
+      const { userId, enabled } = row;
+      const param = { userId: userId, enabled: enabled };
+      editStatus(param).then((res) => {
+        this.$success(this.$t("commons.modify_success"));
+      });
     },
     allRoles() {
-      allRoles().then(res => {
-        this.roles = res.data
-      })
+      allRoles().then((res) => {
+        this.roles = res.data;
+      });
     },
-    btnDisabled(row) {
-      return row.userId === 1
-    },
-    importLdap() {
-      this.$router.push({ name: 'system-user-import' })
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.table-container {
+  height: calc(100% - 50px);
+
+  .text-btn {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: center;
+    margin-left: 2px;
+    border: none;
+    padding: 2px 4px;
+  }
+
+  .text-btn:hover {
+    background: rgba(51, 112, 255, 0.1);
+  }
+  .disable-btn {
+    color: #bbbfc4;
+  }
+
+  .mar16 {
+    margin: 0 -2px 0 4px;
+  }
+}
+.top-operate {
+  margin-bottom: 16px;
+
+  .btn {
+    border-radius: 4px;
+    padding: 5px 12px 5px 12px;
+    //styleName: 中文/桌面端/正文 14 22 Regular;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0px;
+    text-align: center;
+    border: none;
+    box-sizing: border-box;
+  }
+
+  .normal {
+    color: #1f2329;
+    border: 1px solid #bbbfc4;
+    margin-left: 12px;
+  }
+
+  .right-user {
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+
+    .el-input--medium .el-input__icon {
+      line-height: 32px;
+    }
+  }
+
+  .name-email-search {
+    width: 240px;
+  }
+}
+</style>
+<style lang="scss">
+.reset-pwd {
+  padding: 20px 24px !important;
+  display: flex;
+  flex-wrap: wrap;
+
+  .tips {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    margin-left: 8.67px;
+    color: #1f2329;
+  }
+
+  i {
+    font-size: 14.666666030883789px;
+    color: #ff8800;
+    line-height: 22px;
+  }
+  .editer-form-title {
+    margin: 4px 0 16px 24px;
+
+    .pwd,
+    .btn-text {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      text-align: left;
+    }
+
+    .pwd {
+      margin-right: 8px;
+      color: #1f2329;
+    }
+
+    .btn-text {
+      border: none;
+    }
+  }
+
+  .foot {
+    text-align: right;
+    width: 100%;
+    .btn {
+      border-radius: 4px;
+      padding: 4px 12px 4px 12px;
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: 0px;
+      text-align: center;
+      border: none;
+      box-sizing: border-box;
+    }
+
+    .normal {
+      color: #1f2329;
+      border: 1px solid #bbbfc4;
+      margin-left: 12px;
     }
   }
 }
-</script>
+.list-colums-slect {
+  padding: 8px 11px !important;
+  width: 238px;
 
-<style scoped>
+  .title,
+  .el-checkbox {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 5px 0;
+    margin: 0;
+    color: #8f959e;
+  }
 
+  .el-checkbox {
+    color: #1f2329;
+    width: 100%;
+  }
+}
+</style>
+<style lang="scss">
+.de-message {
+  min-width: 20px !important;
+  padding: 16px 20px !important;
+  flex-direction: row;
+  box-shadow: 0px 4px 8px 0px #1F23291A;
+  span {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+    color: #1f2329;
+  }
+
+  i {
+    height: 14.666666984558105px;
+    width: 14.666669845581055px;
+    margin-right: 8.67px;
+  }
+}
+.de-message-fail {
+  border: 1px solid #f54a45 !important;
+  background: #fef1f1 !important;
+  i {
+    color: #f54a45;
+  }
+}
+
+.de-message-success {
+  border: 1px solid #34c724 !important;
+  background: #f0fbef !important;
+  i {
+    color: #34c724;
+  }
+}
+</style>
+<style lang="scss">
+.de-confirm {
+  border: none;
+  .el-message-box__header {
+    display: none;
+  }
+
+  .el-message-box__content {
+    padding: 24px;
+  }
+
+  .el-message-box__container {
+    display: flex;
+    align-items: center;
+  }
+  .el-message-box__status {
+    height: 22px;
+    width: 22px;
+    font-size: 22px !important;
+    margin-right: 17px;
+  }
+
+  .el-message-box__message {
+    //styleName: 中文/桌面端/四级标题 16 24 Medium;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0px;
+    text-align: left;
+    color: #1f2329;
+  }
+
+  .el-message-box__btns {
+    padding: 0;
+  }
+
+  .de-confirm-fail-btn {
+    height: 32px;
+    width: 80px;
+    border-radius: 4px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    text-align: center;
+    padding: 0;
+  }
+
+  .de-confirm-fail-cancel {
+    background: #ffffff;
+    border: 1px solid #bbbfc4;
+    color: #1f2329;
+  }
+
+  .de-confirm-fail-confirm,
+  .de-confirm-fail-confirm:hover {
+    background: #f54a45 !important;
+    border: none;
+    color: #ffffff;
+  }
+
+}
+
+.de-confirm-fail {
+  padding: 0 24px 24px 0 !important;
+  .el-message-box__status {
+    color: #ff8800 !important;
+  }
+}
 </style>
diff --git a/frontend/src/views/system/user/userEditer.vue b/frontend/src/views/system/user/userEditer.vue
new file mode 100644
index 0000000000..d416887bb0
--- /dev/null
+++ b/frontend/src/views/system/user/userEditer.vue
@@ -0,0 +1,578 @@
+<template>
+  <!-- <layout-content :header="formType=='add' ? $t('user.create') : $t('user.modify')" back-name="system-user">
+  </layout-content> -->
+  <el-dialog
+    :title="formType == 'add' ? $t('user.create') : $t('user.modify')"
+    :visible.sync="dialogVisible"
+    class="user-editer-form"
+    width="840px"
+    :before-close="reset"
+  >
+    <div v-if="formType === 'add'" class="editer-form-title">
+      <i class="el-icon-info"></i>
+      <span class="pwd" type="text">{{
+        $t("commons.default_pwd") + "：" + defaultPWD
+      }}</span>
+      <el-button
+        v-clipboard:copy="defaultPWD"
+        v-clipboard:success="onCopy"
+        v-clipboard:error="onError"
+        class="btn-text"
+        type="text"
+      >
+        {{ $t("commons.copy") }}
+      </el-button>
+    </div>
+
+    <el-form
+      ref="createUserForm"
+      :model="form"
+      :rules="rule"
+      size="small"
+      label-width="80px"
+      label-position="right"
+    >
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item :label="$t('commons.nick_name')" prop="nickName">
+            <el-input
+              :placeholder="$t('user.input_name')"
+              v-model="form.nickName"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="ID" prop="username">
+            <el-input
+              :placeholder="$t('user.input_id')"
+              v-model="form.username"
+              :disabled="formType !== 'add'"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item :label="$t('commons.email')" prop="email">
+            <el-input
+              :placeholder="$t('user.input_email')"
+              v-model="form.email"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('commons.mobile_phone_number')" prop="phone">
+            <el-input
+              :placeholder="$t('commons.mobile_phone')"
+              v-model="form.phone"
+              class="input-with-select"
+            >
+              <el-select
+                v-model="form.phonePrefix"
+                slot="prepend"
+                :placeholder="$t('fu.search_bar.please_select')"
+              >
+                <el-option label="+86" value="+86"></el-option>
+              </el-select>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item :label="$t('commons.gender')" prop="gender">
+            <el-select
+              class="form-gender-select"
+              v-model="form.gender"
+              :placeholder="$t('user.select_gender')"
+            >
+              <el-option :label="$t('commons.man')" value="男"> </el-option>
+              <el-option :label="$t('commons.woman')" value="女"> </el-option>
+              <el-option :label="$t('commons.keep_secret')" value="保密">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            v-show="isPluginLoaded"
+            :label="$t('commons.organization')"
+            prop="deptId"
+          >
+            <treeselect
+              ref="deptTreeSelect"
+              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"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- <el-form-item v-if="formType !== 'modify'" :label="$t('commons.password')" prop="password">
+        <el-input v-model="form.password" autocomplete="off" show-password />
+      </el-form-item>
+      <el-form-item v-if="formType !== 'modify'" :label="$t('commons.confirmPassword')" prop="confirmPassword">
+        <el-input v-model="form.confirmPassword" autocomplete="off" show-password />
+      </el-form-item> -->
+      <el-form-item
+        v-show="isPluginLoaded"
+        :label="$t('commons.role')"
+        prop="roleIds"
+      >
+        <el-select
+          ref="roleSelect"
+          v-model="form.roleIds"
+          style="width: 100%"
+          :disabled="formType !== 'add' && form.isAdmin"
+          multiple
+          :placeholder="$t('user.input_roles')"
+          @remove-tag="deleteTag"
+          @change="changeRole"
+        >
+          <el-option
+            v-for="item in roles"
+            :key="item.name"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('commons.status')" prop="enabled">
+        <el-switch
+          :disabled="formType !== 'add' && form.isAdmin"
+          v-model="form.enabled"
+          :active-value="1"
+          :inactive-value="0"
+        >
+        </el-switch>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button class="btn normal" @click="reset">{{
+        $t("commons.cancel")
+      }}</el-button>
+      <el-button class="btn" type="primary" @click="save">{{
+        $t("commons.confirm")
+      }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+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 {
+      form: {
+        roles: [
+          {
+            id: "",
+          },
+        ],
+      },
+      rule: {
+        username: [
+          {
+            required: true,
+            message: this.$t("user.id_mandatory"),
+            trigger: "blur",
+          },
+          {
+            min: 1,
+            max: 50,
+            message: this.$t("commons.input_limit", [1, 50]),
+            trigger: "blur",
+          },
+          {
+            required: true,
+            pattern: "^[^\u4e00-\u9fa5]+$",
+            message: this.$t("user.special_characters_are_not_supported"),
+            trigger: "blur",
+          },
+        ],
+        nickName: [
+          {
+            required: true,
+            message: this.$t("user.name_mandatory"),
+            trigger: "blur",
+          },
+          {
+            min: 2,
+            max: 50,
+            message: this.$t("commons.input_limit", [2, 50]),
+            trigger: "blur",
+          },
+          {
+            required: true,
+            message: this.$t("user.special_characters_are_not_supported"),
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          {
+            pattern: PHONE_REGEX,
+            message: this.$t("user.phone_format"),
+            trigger: "blur",
+          },
+        ],
+        email: [
+          {
+            required: true,
+            message: this.$t("user.email_mandatory"),
+            trigger: "blur",
+          },
+          {
+            required: true,
+            pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+            message: this.$t("user.email_format_is_incorrect"),
+            trigger: "blur",
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: this.$t("user.input_password"),
+            trigger: "blur",
+          },
+          {
+            required: true,
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
+            message: this.$t("member.password_format_is_incorrect"),
+            trigger: "blur",
+          },
+        ],
+        confirmPassword: [
+          {
+            required: true,
+            message: this.$t("user.input_password"),
+            trigger: "blur",
+          },
+          { required: true, validator: this.repeatValidator, trigger: "blur" },
+        ],
+        newPassword: [
+          {
+            required: true,
+            message: this.$t("user.input_password"),
+            trigger: "blur",
+          },
+          {
+            required: true,
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
+            message: this.$t("member.password_format_is_incorrect"),
+            trigger: "blur",
+          },
+        ],
+        roleIds: [
+          {
+            required: true,
+            message: this.$t("user.role_mandatory"),
+            trigger: "change",
+          },
+        ],
+        deptId: [],
+        gender: [],
+        enabled: [{ required: true, trigger: "change" }],
+      },
+      defaultForm: {
+        id: null,
+        username: null,
+        nickName: null,
+        gender: "男",
+        email: null,
+        enabled: 1,
+        deptId: null,
+        phone: null,
+        phonePrefix: "+86",
+        roleIds: [2],
+      },
+      depts: null,
+      roles: [],
+      roleDatas: [],
+      userRoles: [],
+      formType: "add",
+      isPluginLoaded: false,
+      defaultPWD: "DataEase123..",
+      dialogVisible: false,
+    };
+  },
+  beforeCreate() {
+    pluginLoaded().then((res) => {
+      this.isPluginLoaded = res.success && res.data;
+    });
+    defaultPwd().then((res) => {
+      if (res && res.data) {
+        this.defaultPWD = res.data;
+      }
+    });
+  },
+  methods: {
+    repeatValidator(rule, value, callback) {
+      if (value !== this.form.password) {
+        callback(new Error(this.$t("member.inconsistent_passwords")));
+      } else {
+        callback();
+      }
+    },
+    create() {
+      this.depts = null;
+      this.formType = "add";
+      this.form = Object.assign({}, this.defaultForm);
+    },
+    init(row) {
+      this.initRoles();
+      this.dialogVisible = true;
+      if (!row) {
+        this.create();
+        return;
+      }
+      this.depts = null;
+      this.formType = "modify";
+      this.dialogVisible = true;
+      this.form = Object.assign({}, row);
+      this.form.password = "";
+      if (this.form.deptId === 0) {
+        this.form.deptId = null;
+      }
+
+      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();
+        });
+      }
+
+      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();
+        });
+      }
+    },
+    normalizer(node) {
+      if (node.hasChildren) {
+        node.children = null;
+      }
+      return {
+        id: node.deptId,
+        label: node.name,
+        children: node.children,
+      };
+    },
+    deleteTag(value) {
+      this.userRoles.forEach(
+        function (data, index) {
+          if (data.id === value) {
+            this.userRoles.splice(index, value);
+          }
+        }.bind(this)
+      );
+    },
+    changeRole(value) {
+      this.userRoles = [];
+      value.forEach(
+        function (data, index) {
+          const role = { id: data };
+          this.userRoles.push(role);
+        }.bind(this)
+      );
+    },
+    reset() {
+      this.$refs.createUserForm.resetFields();
+      this.dialogVisible = false;
+    },
+    save() {
+      this.$refs.createUserForm.validate((valid) => {
+        if (valid) {
+          // !this.form.deptId && (this.form.deptId = 0)
+          const method = this.formType === "add" ? addUser : editUser;
+          method(this.form).then((res) => {
+            this.$success(this.$t("commons.save_success"));
+            this.reset();
+            this.$emit('saved')
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    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"));
+    },
+    onError(e) {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-editer-form {
+  ::v-deep .el-dialog__body {
+    padding: 0 24px 24px 24px;
+  }
+
+  ::v-deep .el-dialog__header {
+    padding: 24px 24px 16px 24px;
+  }
+
+  ::v-deep .el-dialog__footer {
+    padding-top: 0;
+  }
+
+  .editer-form-title {
+    width: 100%;
+    border-radius: 4px;
+    background: #e1eaff;
+    padding: 9px 16px;
+    margin-bottom: 16px;
+
+    i {
+      color: #3370ff;
+      font-size: 14.666666030883789px;
+    }
+
+    .pwd,
+    .btn-text {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      text-align: left;
+      color: #1f2329;
+    }
+
+    .pwd {
+      margin: 0 8px;
+    }
+
+    .btn-text {
+      padding: 0;
+      border: none;
+    }
+  }
+
+  ::v-deep .el-form-item__label {
+    width: 100% !important;
+    text-align: left;
+  }
+
+  ::v-deep
+    .el-form-item.is-required:not(.is-no-asterisk)
+    > .el-form-item__label:before {
+    display: none;
+  }
+
+  ::v-deep
+    .el-form-item.is-required:not(.is-no-asterisk)
+    > .el-form-item__label::after {
+    content: "*";
+    color: #f54a45;
+    margin-left: 2px;
+  }
+
+  ::v-deep .el-form-item__content {
+    margin-left: 0 !important;
+  }
+
+  .input-with-select {
+    ::v-deep .el-input-group__prepend {
+      background-color: #fff;
+    }
+    .el-select {
+      ::v-deep .el-input__inner {
+        width: 72px;
+      }
+    }
+  }
+
+  .btn {
+    border-radius: 4px;
+    padding: 5px 26px 5px 26px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0px;
+    text-align: center;
+    border: none;
+    box-sizing: border-box;
+  }
+
+  .normal {
+    color: #1f2329;
+    border: 1px solid #bbbfc4;
+    margin-left: 12px;
+  }
+
+  .form-gender-select {
+    width: 100%;
+  }
+
+  .btn {
+  }
+}
+</style>