diff --git a/src/Login.vue b/src/Login.vue
index 508430c6..d67da580 100644
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -24,6 +24,7 @@ export default {
     login () {
       post('sys/login', { username: this.username, pin: this.pin }).then(res => {
         if (res.code === 200) {
+          localStorage.setItem('cn-username', this.username)
           this.loginSuccess(res)
         }
       })
diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue
new file mode 100644
index 00000000..bab40f35
--- /dev/null
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -0,0 +1,196 @@
+<template>
+  <div v-click-outside="{object: editRole, func: esc}" class="right-box right-box-role">
+    <div class="right-box__header">
+      <div class="header__title">{{editRole.id ? $t('config.roles.editRole') : $t('config.roles.createRole')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{object: editRole, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form :disabled="detail" :model="editRole" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" ref="roleForm">
+          <!--name-->
+          <el-form-item :label="$t('config.roles.name')" prop="name">
+            <el-input  maxlength="64" placeholder="" id="role-box-input-name"
+                       show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('overall.remark')">
+            <el-input maxlength="256" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
+          </el-form-item>
+
+          <el-form-item :label="$t('config.roles.permission')">
+            <!--<div class="tree-option">
+              <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
+              <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
+            </div>-->
+            <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
+              <template #default="{ node, data }">
+              <span>
+                <i v-if="data.type == '1'" class="el-icon-menu"></i>
+                <i v-if="data.type == '2'" class="el-icon-edit"></i>
+              </span>
+                {{$t(data.i18n)}}
+              </template>
+            </el-tree>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import rightBoxMixin from '@/mixins/rightBox'
+  import { get, post, put } from '@/utils/http'
+export default {
+  name: 'userBox',
+  mixins: [rightBoxMixin],
+  components: {
+  },
+  props: {
+    object: {
+      type: Object
+    },
+    detail: Boolean
+  },
+  data () {
+    return {
+      editRole: {},
+      url: 'sys/role',
+      rightBox: { model: { show: false } },
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      menus: [],
+      selectedIds: [],
+      selectAllFlag: false,
+      expandAllFlag: true
+    }
+  },
+  watch: {
+    object: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editRole = JSON.parse(JSON.stringify(n))
+        if (this.editRole.roles && this.editRole.roles.length > 0) {
+          this.editRole.roleIds = this.editRole.roles.map(t => t.id)
+        }
+      }
+    }
+  },
+  mounted () {
+    this.getMenus().then(() => {
+      if (this.$refs.menuTree && this.selectedIds && this.selectedIds.length > 0) {
+        this.$refs.menuTree.setCheckedKeys(this.selectedIds, true)
+      }
+    })
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    getMenus: function () {
+      const self = this
+      return new Promise(resolve => {
+        self.menus = []
+        if (self.editRole.id) {
+          get('/sys/role/menu/' + self.editRole.id).then(response => {
+            if (response.code == 200) {
+              self.menus = response.data.menus
+              self.selectedIds = response.data.selectedIds
+            } else {
+              self.$message.error('load menu faild')
+            }
+            resolve()
+          })
+        } else {
+          get('/sys/menu').then(response => {
+            if (response.code == 200) {
+              self.menus = response.data.list
+            } else {
+              self.$message.error('load menu faild')
+            }
+            resolve()
+          })
+        }
+      })
+    },
+    labelFormatter: function (data, node) {
+      return data && data.i18n ? this.$t(data.i18n) : data.name
+    },
+    selectChange: function (data, isCheck, childIsCheck) {
+      if (this.$refs.menuTree) {
+        this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true)
+      }
+    },
+    selectAllOrNone: function () {
+      if (this.$refs.menuTree) {
+        if (!this.selectAllFlag) {
+          this.$refs.menuTree.setCheckedNodes(this.menus)
+        } else {
+          this.$refs.menuTree.setCheckedNodes([])
+        }
+        this.selectAllFlag = !this.selectAllFlag
+      }
+    },
+    expandAllOrNone: function () {
+      this.expandAllFlag = !this.expandAllFlag
+      const $self = this
+      if (this.$refs.menuTree) {
+        this.menus.forEach(t => {
+          $self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag
+        })
+      }
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+
+      this.$refs.roleForm.validate((valid) => {
+        if (valid) {
+          if (this.editRole.id) {
+            put(this.url, this.editRole).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            post(this.url, this.editRole).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/rightBox/settings/UserBox.vue b/src/components/rightBox/settings/UserBox.vue
index 89202cb3..af8b5c3e 100644
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -56,8 +56,12 @@
           </el-form-item>
           <!--enable-->
           <el-form-item :label="$t('config.user.enable')">
-            <el-switch id="account-input-status" v-model="editObject.status" :disabled="isCurrentUser(editObject.username) || (editObject.username==='admin' && editObject.id==1) " active-color="#ee9d3f" active-value="1"
-                       inactive-value="0">
+            <el-switch
+               id="account-input-status"
+               v-model="editObject.status"
+               :disabled="(editObject.username === loginName) || (editObject.username==='admin' && editObject.id==1)"
+               :active-value="1"
+               :inactive-value="0">
             </el-switch>
           </el-form-item>
 
@@ -98,6 +102,7 @@ export default {
     }
     return {
       url: 'sys/user',
+      loginName: localStorage.getItem('cn-username'),
       rules: { // 表单校验规则
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -142,10 +147,8 @@ export default {
     this.getRoleData()
   },
   methods: {
-    isCurrentUser () {
-      return function (username) {
-        return localStorage.getItem('cn-username') === username
-      }
+    isCurrentUser (username) {
+      return localStorage.getItem('cn-username') === username
     },
     /* 密码失去焦点 检验确认密码 */
     pinBlur () {
@@ -188,12 +191,23 @@ export default {
     },
    getRoleData (){
      get('sys/role?pageSize=-1').then(response => {
-        console.log(response);
         if (response.code === 200) {
           this.roleData = response.data.list
         }
       })
     }
+  },
+  watch: {
+    object: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editObject = JSON.parse(JSON.stringify(n))
+        if ( !this.editObject.roleIds && this.editObject.roles ) {
+          this.editObject.roleIds = this.editObject.roles[0].id
+        }
+      }
+    }
   }
 }
 </script>
diff --git a/src/components/table/settings/RoleTable.vue b/src/components/table/settings/RoleTable.vue
new file mode 100644
index 00000000..396c801a
--- /dev/null
+++ b/src/components/table/settings/RoleTable.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-table
+    id="roleTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template  #default="scope" :column="item">
+        <template v-if="item.prop === 'name'">
+          <template v-if="scope.row.i18n">
+            <span>{{$t(scope.row.i18n)}}</span>
+          </template>
+          <template v-else-if="scope.row.name">
+            <span>{{scope.row.name}}</span>
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <span v-else>{{scope.row[item.prop]}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+            :resizable="false"
+            :width="operationWidth"
+            fixed="right">
+      <template #header>
+        <div class="table-operation-title">{{$t('overall.option')}}</div>
+      </template>
+      <template #default="scope">
+        <div class="table-operation-items">
+          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-view1"></i></button>
+          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+            <div class="table-operation-item table-operation-item--more">
+              <i class="nz-icon nz-icon-more3"></i>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu >
+                <el-dropdown-item v-has="'user_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+                <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  import table from '@/mixins/table'
+  import { put } from '@/utils/http'
+export default {
+  name: 'roleTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable:'custom'
+        }, {
+          label: this.$t('config.roles.name'),
+          prop: 'name',
+          show: true,
+          sortable:'custom'
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/components/table/settings/UserTable.vue b/src/components/table/settings/UserTable.vue
index eb1789b5..2a6b37c2 100644
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -45,6 +45,7 @@
                   v-model="scope.row.status"
                   :active-color="theme.themeColor"
                   active-value="1"
+                  :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
                   inactive-value="0"
                   @change="()=>{statusChange(scope.row)}">
           </el-switch>
@@ -88,6 +89,7 @@ export default {
   mixins: [table],
   data () {
     return {
+      loginName: localStorage.getItem('cn-username'),
       tableTitle: [ // 原始table列
         {
           label: 'ID',
diff --git a/src/mixins/common.js b/src/mixins/common.js
index 7bee27a0..5c779ad9 100644
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -11,7 +11,15 @@ export default {
         refresh: false,
         query: false
       },
-      theme: theme // scss主题变量
+      theme: theme, // scss主题变量
+      prevent_opt: {
+        save: false,
+        import: false,
+        duplicate: false,
+        delete: false,
+        refresh: false,
+        query: false
+      }
     }
   },
   methods: {
diff --git a/src/router/index.js b/src/router/index.js
index a423a401..8c845c76 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,10 @@ const routes = [
       {
         path: '/user',
         component: () => import('@/views/settings/User')
+      },
+      {
+        path: '/roles',
+        component: () => import('@/views/settings/Roles')
       }
     ]
   }
diff --git a/src/views/settings/Roles.vue b/src/views/settings/Roles.vue
new file mode 100644
index 00000000..4d18061f
--- /dev/null
+++ b/src/views/settings/Roles.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <cn-data-list
+            ref="dataList"
+            v-model:custom-table-title="tools.customTableTitle"
+            :api="url"
+            :from="fromRoute.roles"
+            :layout="['columnCustomize']"
+    >
+      <template v-slot:top-tool-right>
+        <button id="roles-add" v-has="'role_add'" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
+                type="button" @click="add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+        <delete-button id="role-list-batch-delete" v-has="'role_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot:default="slotProps">
+        <roles-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @delete="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></roles-table>
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <transition name="right-box">
+      <role-box v-if="rightBox.show" :object="object" @close="closeRightBox"></role-box>
+    </transition>
+  </div>
+</template>
+<script>
+  import cnDataList from '@/components/table/CnDataList'
+  import dataListMixin from '@/mixins/dataList'
+  import rolesTable from '@/components/table/settings/RoleTable'
+  import roleBox from '@/components/rightBox/settings/RoleBox'
+  import { put } from '@/utils/http'
+
+export default {
+  name: 'roles',
+  components: {
+    cnDataList,
+    roleBox,
+    rolesTable,
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: 'sys/role',
+      tableId: 'rolesTable', // 需要分页的table的id，用于记录每页数量
+      blankObject: { // 空白对象
+        name: ''
+      },
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: this.$t('config.roles.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }]
+      }
+    }
+  },
+  methods: {
+    edit (row) {
+      this.object = { ...row }
+      this.rightBox.show = true
+    }
+  }
+}
+</script>
diff --git a/src/views/settings/User.vue b/src/views/settings/User.vue
index 15911c2c..afb0c5b0 100644
--- a/src/views/settings/User.vue
+++ b/src/views/settings/User.vue
@@ -26,7 +26,7 @@
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
-          @del="del"
+          @delete="del"
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"
@@ -72,7 +72,7 @@ export default {
         email: '',
         pin: '',
         mobile: '',
-        status: '1',
+        status: 1,
         roleIds: '',
         pinChange: ''
       },