员工管理-角色管理

src/views/platform/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>