diff --git a/src/config/getData2.js b/src/config/getData2.js
index c40033f..59e4671 100644
--- a/src/config/getData2.js
+++ b/src/config/getData2.js
@@ -76,3 +76,26 @@ export const sysRoleQuery = (page, size) => post('api/sysRole/query', {
   page: page,
   size: size
 })
+// 1.2 添加角色
+export const sysRoleAdd = (name, remark) => post('api/sysRole/add', {
+  name: name,
+  remark: remark
+})
+// 1.3 修改角色
+export const sysRoleEdit = (roleId, name, remark) => post('api/sysRole/edit', {
+  roleId: roleId,
+  name: name,
+  remark: remark
+})
+// 1.4 删除角色
+export const sysRoleDelete = (roleId) => post('api/sysRole/delete', {
+  rolesIds: roleId
+})
+// 1.5 保存菜单
+export const sysRoleMenu = (roleId, menus) => post('api/sysRole/menu', {
+  roleId: roleId,
+  menus: menus
+})
+// 1.6 查询菜单树
+export const menuQuery = (roleId, menus) => post('api/sysRole/menuQuery', {
+})
diff --git a/src/main.js b/src/main.js
index f0fce1a..5a1ba16 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,7 +9,7 @@ import fastClick from 'fastclick'
 import infiniteScroll from 'vue-infinite-scroll'
 import VueTouchKeyboard from 'vue-touch-keyboard'
 import 'vue-touch-keyboard/dist/vue-touch-keyboard.css'
-import { DatePicker, Select, Option, Radio, Menu, MenuItem } from 'element-ui'
+import { DatePicker, Select, Option, Radio, Menu, MenuItem, Tree } from 'element-ui'
 import { Pagination } from 'vant'
 // import '@style/layout.styl'
 import '@style/common.styl'
@@ -26,6 +26,7 @@ Vue.use(Option)
 Vue.use(Radio)
 Vue.use(Menu)
 Vue.use(MenuItem)
+Vue.use(Tree)
 Vue.use(Pagination)
 Vue.use(infiniteScroll)
 Vue.use(VueTouchKeyboard)
diff --git a/src/pages/modules/systemmanage/role.vue b/src/pages/modules/systemmanage/role.vue
index dc1728e..c01c584 100644
--- a/src/pages/modules/systemmanage/role.vue
+++ b/src/pages/modules/systemmanage/role.vue
@@ -19,13 +19,13 @@
             <td>
               <div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
             </td>
-            <td>超级管理员</td>
-            <td>垃圾分类几点睡浪费就冷冻机房蓝黛科技弗兰克</td>
-            <td>2023-05-05  08:50:08</td>
+            <td>{{ e.name }}</td>
+            <td>{{ e.remark }}</td>
+            <td>{{ e.createTime }}</td>
             <td>
               <div class="row">
-                <button class="button button--primary grid_button" @click="showDialog('2')">修改</button>
-                <button class="button button--primary grid_button" @click="showDialog('3')">删除</button>
+                <button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
+                <button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
               </div>
             </td>
           </tr>
@@ -34,45 +34,18 @@
       <div class="tree_wrapper">
         <div class="tree_header">
           <span>角色名称</span>
-          <button class="button button--primary grid_button button1">保存</button>
+          <button class="button button--primary grid_button button1" :disabled="disabled" @click="toSave">保存</button>
         </div>
         <div class="tree_body_container">
-          <div class="tree">
-            <div class="tree-node is-expanded is-focusable" v-for="(e, i) in tree" :key="i">
-              <div class="tree-node__content" style="padding-left: 0">
-                <span class="icon_tree-node__expand icon_caret_right"></span>
-                <div class="checkbox__input" @click="toCheck(e, tree)">
-                  <i class="icon_checkbox" :class="{'icon_checkbox_checked': e.checked}"></i>
-                  <input type="checkbox" class="checkbox__original" v-model="e.id">
-                </div>
-                <span class="tree-node__label">{{e.label}}</span>
-              </div>
-              <div class="tree-node__children">
-                <div class="tree-node is-expanded is-focusable" v-for="(el, j) in e.children" :key="j">
-                  <div class="tree-node__content" style="padding-left: 24px">
-                    <span class="icon_tree-node__expand icon_caret_right"></span>
-                    <div class="checkbox__input" @click="toCheck(el, e.children)">
-                      <i class="icon_checkbox" :class="{'icon_checkbox_checked': el.checked}"></i>
-                      <input type="checkbox" class="checkbox__original" v-model="el.id">
-                    </div>
-                    <span class="tree-node__label">{{el.label}}</span>
-                  </div>
-                  <div class="tree-node__children">
-                    <div class="tree-node is-expanded is-focusable" v-for="(ele, t) in el.children" :key="t">
-                      <div class="tree-node__content" style="padding-left: 48px">
-                        <span class="icon_tree-node__expand icon_caret_right"></span>
-                        <div class="checkbox__input" @click="toCheck(ele, el.children)">
-                          <i class="icon_checkbox" :class="{'icon_checkbox_checked': ele.checked}"></i>
-                          <input type="checkbox" class="checkbox__original" v-model="ele.id">
-                        </div>
-                        <span class="tree-node__label">{{ ele.label }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          <el-tree
+            :data="tree"
+            show-checkbox
+            default-expand-all
+            node-key="menuId"
+            ref="tree"
+            highlight-current
+            :props="defaultProps">
+          </el-tree>
         </div>
       </div>
     </div>
@@ -80,6 +53,7 @@
     ref="child"
     :title="title"
     :type="type"
+    :unclick="unclick"
     @toSure="toSureDialog"
     >
     <div v-if="type === '1' || type === '2'" class="form_wraper">
@@ -87,7 +61,7 @@
         <div class="form_item">
           <div class="form_item__label"><i>*</i>角色名称</div>
           <div class="form_item__content">
-            <input type="text" class="form_item__input">
+            <input type="text" class="form_item__input" v-model="rolename">
           </div>
         </div>
       </div>
@@ -107,114 +81,27 @@
 
 <script>
 import jxDialog from '@components/dialog.vue'
+import { sysRoleQuery, sysRoleAdd, sysRoleEdit, sysRoleDelete, menuQuery, sysRoleMenu } from '@config/getData2.js'
 export default {
   components: {
     jxDialog
   },
   data () {
     return {
-      datalist: [{name: ''}, {name: 'a'}, {name: 'a'}, {name: ''}, {name: 'a'}, {name: 'a'}],
+      datalist: [],
       active: false,
       type: '',
       title: '',
+      rolename: '',
       remark: '',
-      tree: [{
-        id: '1',
-        label: '智能搬运车系统',
-        checked: false,
-        children: [{
-          id: '1-1',
-          label: '首页',
-          checked: false,
-          children: [{
-            id: '1-1-1',
-            label: '首页',
-            checked: false
-          }]
-        }, {
-          id: '1-2',
-          label: '任务管理',
-          checked: false,
-          children: [{
-            id: '1-2-1',
-            label: '搬运起点',
-            checked: false
-          }, {
-            id: '1-2-2',
-            label: '任务列表',
-            checked: false
-          }, {
-            id: '1-2-3',
-            label: '任务操作',
-            checked: false
-          }]
-        }, {
-          id: '1-3',
-          label: '故障管理',
-          checked: false,
-          children: [{
-            id: '1-3-1',
-            label: '故障处理',
-            checked: false
-          }]
-        }, {
-          id: '1-4',
-          label: '车辆信息',
-          checked: false,
-          children: [{
-            id: '1-4-1',
-            label: '车辆状态',
-            checked: false
-          }, {
-            id: '1-4-2',
-            label: '传感器状态',
-            checked: false
-          }, {
-            id: '1-4-3',
-            label: 'AGV',
-            checked: false
-          }, {
-            id: '1-5',
-            label: '示教',
-            checked: false,
-            children: [{
-              id: '1-5-1',
-              label: '地图',
-              checked: false
-            }, {
-              id: '1-5-2',
-              label: '绘制路线',
-              checked: false
-            }, {
-              id: '1-5-3',
-              label: '地图演示',
-              checked: false
-            }]
-          }, {
-            id: '1-6',
-            label: '系统管理',
-            checked: false,
-            children: [{
-              id: '1-6-1',
-              label: '用户管理',
-              checked: false
-            }, {
-              id: '1-6-2',
-              label: '角色管理',
-              checked: false
-            }, {
-              id: '1-6-3',
-              label: '系统参数',
-              checked: false
-            }, {
-              id: '1-6-4',
-              label: '开发者选项',
-              checked: false
-            }]
-          }]
-        }]
-      }]
-
+      tree: [],
+      defaultProps: {
+        children: 'children',
+        label: 'title'
+      },
+      pkObj: {},
+      unclick: false,
+      disabled: false
     }
   },
   watch: {
@@ -232,34 +119,134 @@ export default {
         default:
           this.title = ''
       }
+    },
+    rolename (val) {
+      if ((this.type === '1' || this.type === '2') && val === '') {
+        this.unclick = true
+      } else {
+        this.unclick = false
+      }
     }
   },
+  created () {
+    this._sysRoleQuery()
+    this._menuQuery()
+  },
   methods: {
-    showDialog (type) {
+    async _sysRoleQuery () {
+      let res = await sysRoleQuery('0', '100')
+      this.datalist = [...res]
+    },
+    async _menuQuery () {
+      let res = await menuQuery()
+      this.tree = [...res]
+    },
+    showDialog (type, e) {
       this.type = type
       this.$refs.child.active = true
+      switch (type) {
+        case '1':
+          this.rolename = ''
+          this.remark = ''
+          this.unclick = true
+          break
+        case '2':
+          this.pkObj = e
+          this.rolename = e.name
+          this.remark = e.remark
+          if (this.rolename === '') {
+            this.unclick = true
+          }
+          break
+        case '3':
+          this.pkObj = e
+          this.unclick = false
+          break
+      }
     },
     toSureDialog (type) {
       switch (type) {
         case '1':
-          console.log(type)
+          this._sysRoleAdd()
           break
         case '2':
-          console.log(type)
+          this._sysRoleEdit()
           break
         case '3':
-          console.log(type)
+          this._sysRoleDelete()
           break
-        default:
-          console.log(type)
       }
     },
-    toCheck (e, arr) {
-      arr.map(el => {
-        if (e.id === el.id) {
-          e.checked = !e.checked
+    async _sysRoleAdd () {
+      this.$refs.child.disabled = true
+      if (!this.rolename) {
+        this.toast('角色名称不能为空')
+        this.$refs.child.disabled = false
+        return
+      }
+      try {
+        await sysRoleAdd(this.rolename, this.remark)
+        this.toast('操作成功')
+        this._sysRoleQuery()
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      } catch (e) {
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      }
+    },
+    async _sysRoleEdit () {
+      this.$refs.child.disabled = true
+      if (!this.rolename) {
+        this.toast('角色名称不能为空')
+        this.$refs.child.disabled = false
+        return
+      }
+      try {
+        await sysRoleEdit(this.pkObj.roleId, this.rolename, this.remark)
+        this.toast('操作成功')
+        this._sysRoleQuery()
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      } catch (e) {
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      }
+    },
+    async _sysRoleDelete () {
+      this.$refs.child.disabled = true
+      try {
+        await sysRoleDelete([this.pkObj.roleId])
+        this.toast('操作成功')
+        this._sysRoleQuery()
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      } catch (e) {
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      }
+    },
+    async _sysRoleMenu (arr) {
+      this.disabled = true
+      try {
+        let res = await sysRoleMenu(arr)
+        if (res.code === '1') {
+          this.toast(res.desc)
+        } else {
+          this.toast(res.desc)
         }
+        this.disabled = false
+      } catch (e) {
+        this.disabled = false
+      }
+    },
+    toSave () {
+      let arr = this.$refs.tree.getCheckedKeys()
+      let arr1 = []
+      arr.map(el => {
+        arr1.push({menuId: el})
       })
+      this._sysRoleMenu(arr1)
     }
   }
 }
@@ -282,7 +269,8 @@ export default {
   _wh(calc(50% - 10px), 100%)
   overflow-y auto
 .tree_header
-  position relative
+  position sticky
+  top -1px
   z-index 99
   background #d7d7d7
   _font(14px, 23px, #323232, bold, center)
diff --git a/src/pages/modules/systemmanage/user.vue b/src/pages/modules/systemmanage/user.vue
index 1655dcf..65e4cf6 100644
--- a/src/pages/modules/systemmanage/user.vue
+++ b/src/pages/modules/systemmanage/user.vue
@@ -149,15 +149,18 @@ export default {
       }
     },
     username (val) {
-      if (this.type === '1' && this.password !== '' && val !== '') {
-        this.unclick = false
-      }
-      if (this.type === '2' && val !== '') {
+      if (this.type === '1' && (this.password === '' || val === '')) {
+        this.unclick = true
+      } else if (this.type === '2' && val === '') {
+        this.unclick = true
+      } else {
         this.unclick = false
       }
     },
     password (val) {
-      if (this.type === '1' && this.password !== '' && val !== '') {
+      if (this.type === '1' && (this.password === '' || val === '')) {
+        this.unclick = true
+      } else {
         this.unclick = false
       }
     }
@@ -199,7 +202,7 @@ export default {
               this.value = el.roleId
             }
           })
-          if (this.username && this.password) {
+          if (this.username === '') {
             this.unclick = true
           }
           break
diff --git a/src/style/common.styl b/src/style/common.styl
index 906cabd..de3d9fe 100644
--- a/src/style/common.styl
+++ b/src/style/common.styl
@@ -356,69 +356,11 @@
   padding 6px 12px
 
 // tree
-.tree
-  position: relative;
-  cursor: default;
-  background: #fff;
-  color: #606266;
-.tree-node
-  white-space: nowrap;
-  outline: none;
-.tree-node__content
-  display: flex;
-  align-items: center;
-  height: 26px;
-  cursor: pointer;
-.icon_tree-node__expand
-  cursor: pointer;
-  color: #c0c4cc;
-  font-size: 12px;
-  transform: rotate(0deg);
-  transition: transform .3s ease-in-out;
-  padding: 6px;
-  &::before
-    content: '\e65b'
-.icon_caret_right
-  transform rotate(-90deg)
-.checkbox__input
-  color: #606266;
-  font-weight: 500;
-  font-size: 12px;
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  white-space: nowrap;
-  user-select: none;
-  margin-right: 8px
-  cursor: pointer;
-.icon_checkbox
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  display: inline-block;
-  padding: 2px;
-  position: relative;
-  vertical-align: middle;
-  color #fff
-  border: 1px solid $green1
-  background-color: #fff;
-  border-radius 3px
-  &::before
-    content: '\E608'
-.icon_checkbox_checked
+.el-checkbox__inner:hover, .el-checkbox__input.is-focus .el-checkbox__inner
+  border-color $green1
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner
   background-color $green1
-.checkbox__original
-  opacity: 0;
-  outline: none;
-  position: absolute;
-  margin: 0;
-  width: 0;
-  height: 0;
-  z-index: -1;
-.tree-node__label
-  font-size: 14px
-.tree-node__children
-  overflow hidden
+  border-color $green1
 
 // 车辆信息
 .content_wrap