diff --git a/src/views/components/staff_management/employee_list.vue b/src/views/components/staff_management/employee_list.vue
new file mode 100644
index 0000000..ccb6a1e
--- /dev/null
+++ b/src/views/components/staff_management/employee_list.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="queryParams" label-width="80px" inline>
+      <el-form-item>
+        <el-input placeholder="请输入员工名称"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 240px">
+          <el-option v-for="dict in dict.type.employee_status" :key="dict.value" :label="dict.label"
+                     :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary">查询</el-button>
+        <el-button>重置</el-button>
+      </el-form-item>
+      <br/>
+      <el-button type="primary" @click="open=true">新增员工</el-button>
+      <el-button>批量锁定</el-button>
+      <el-button>批量开启</el-button>
+      <el-button>批量删除</el-button>
+      <el-table :data="dataList" border class="table">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column label="ID">1</el-table-column>
+        <el-table-column label="员工姓名">张三</el-table-column>
+        <el-table-column label="手机号">1888888888888</el-table-column>
+        <el-table-column label="角色">角色1、角色2</el-table-column>
+        <el-table-column label="状态">
+          <el-switch/>
+        </el-table-column>
+        <el-table-column label="操作">
+          <el-button type="text">编辑</el-button>
+          <el-button type="text">删除</el-button>
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <el-dialog :visible.sync="open" title="新增员工">
+      <el-form :model="addForm" inline label-width="100px">
+        <el-form-item label="员工名称">
+          <el-input placeholder="请输入"/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="手机号">
+          <el-input placeholder="请输入"/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="登陆密码">
+          <el-input placeholder="不填默认123456" type="password" show-password/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="角色">
+          <template v-for="(item,index) in addForm.roles">
+            <br v-if="index>0"/>
+            <el-select placeholder="选择角色" v-model="addForm.roles[index]" :class="{'mt':index>0}"/>
+            <i class="el-icon-plus" @click="addForm.roles.push(undefined)"/>
+            <i class="el-icon-minus" v-if="index>0" @click="addForm.roles.splice(index,1)"/>
+          </template>
+        </el-form-item>
+
+      </el-form>
+      <div class="text-center">
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button>重置</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmployeeList',
+  dicts: ['employee_status'],
+  data() {
+    return {
+      open: false,
+      dataList: [{}],
+      addForm: {
+        roles: [undefined]
+      },
+      queryParams: {
+        status: undefined
+      }
+    }
+  },
+  methods: {
+    save() {
+      this.$modal.msgSuccess('保存成功')
+      this.open = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.table {
+  margin-top: 10px;
+}
+
+.mt {
+  margin-top: 10px;
+}
+
+i {
+  color: #1684FC;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/views/components/staff_management/role_management.vue b/src/views/components/staff_management/role_management.vue
new file mode 100644
index 0000000..06a3548
--- /dev/null
+++ b/src/views/components/staff_management/role_management.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" inline>
+      <el-form-item>
+        <el-input placeholder="请输入角色名称"/>
+      </el-form-item>
+      <el-form-item>
+        <el-input placeholder="请输入角色ID"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary">查询</el-button>
+        <el-button>重置</el-button>
+
+      </el-form-item>
+
+    </el-form>
+    <el-button type="primary" @click="open=true"> 新增角色</el-button>
+    <el-button>批量锁定</el-button>
+    <el-button>批量开启</el-button>
+    <el-button>批量删除</el-button>
+    <el-table :data="dataList" border class="table">
+      <el-table-column type="selection" align="center"></el-table-column>
+      <el-table-column type="index" align="center" label="序号"></el-table-column>
+      <el-table-column align="center" label="角色名称">财务主管</el-table-column>
+      <el-table-column align="center" label="权限">首页、财务管理</el-table-column>
+      <el-table-column align="center" label="备注"></el-table-column>
+      <el-table-column align="center" label="创建时间">2022-12-31 12:31</el-table-column>
+      <el-table-column align="center" label="状态">
+        <el-switch/>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <el-button type="text">编辑</el-button>
+        <el-button type="text">删除</el-button>
+      </el-table-column>
+
+    </el-table>
+    <el-dialog :visible.sync="open" title="新增角色">
+      <el-form inline label-width="100px">
+        <el-form-item label="角色名称">
+          <el-input placeholder="请输入"></el-input>
+        </el-form-item>
+        <br/>
+        <el-form-item label="序号">
+          <el-input placeholder="数字越小排名越靠前"></el-input>
+        </el-form-item>
+        <br/>
+        <el-form-item label="是否禁用">
+          <el-switch/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="备注">
+          <el-input type="textarea" :autosize="{minRows:3}" placeholder="请输入"></el-input>
+        </el-form-item>
+        <br/>
+        <el-form-item label="选择权限">
+          <el-button type="text">全选</el-button>
+        </el-form-item>
+        <br/>
+        <el-form-item>
+          <el-tree :data="permissions" show-checkbox node-key="id"/>
+        </el-form-item>
+      </el-form>
+      <div class="text-center">
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button>重置</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RoleManagement',
+  data() {
+    return {
+      permissions: [{ id: 33, label: '首页' }, {
+        id: 1,
+        label: '用户管理',
+        children: [{
+          id: 4,
+          label: '编辑'
+        }, {
+          id: 5,
+          label: '查看'
+        }, {
+          id: 6,
+          label: '删除'
+        }]
+      }],
+      open: false,
+      dataList: [{}],
+      queryParams: {}
+    }
+  },
+  methods: {
+    save() {
+      this.$modal.msgSuccess('保存成功')
+      this.open = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.table {
+  margin-top: 10px;
+}
+</style>