|
@@ -0,0 +1,285 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-form :model="form" label-position="left" label-width="80px">
|
|
|
+ <el-form-item :model="form.roleName" label="角色名称:">
|
|
|
+ <el-input placeholder="决策组-1" type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :model="form.roleDesc" label="角色描述:">
|
|
|
+ <el-input type="textarea" placeholder="请输入" v-model="textarea" maxlength="200" show-word-limit></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="permissionType">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="PC端" name="pc"></el-tab-pane>
|
|
|
+ <el-tab-pane label="移动端" name="mobile"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-collapse v-model="activeNames" @change="handChange">
|
|
|
+ <el-collapse-item name="1">
|
|
|
+ <template slot="title">
|
|
|
+ <i :class="isActive('1') !== -1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>前端
|
|
|
+ </template>
|
|
|
+ <div style="display: flex; margin-left: 20px;">
|
|
|
+ <div>
|
|
|
+ <el-tree :data="data1" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ <el-tree :data="data2" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+
|
|
|
+ <el-tree :data="data3" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 200px">
|
|
|
+ <el-tree :data="data4" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ <el-tree :data="data5" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ <el-tree :data="data6" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="2">
|
|
|
+ <template slot="title">
|
|
|
+ <i :class="isActive('2') !== -1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>后端
|
|
|
+ </template>
|
|
|
+ <div style="display: flex; margin-left: 20px;">
|
|
|
+ <div>
|
|
|
+ <el-tree :data="data7" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ <el-tree :data="data8" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 137px;">
|
|
|
+ <el-tree :data="data9" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ <el-tree :data="data10" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <el-button>删除</el-button>
|
|
|
+ <el-button>编辑</el-button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ textarea: '',
|
|
|
+ activeName: 'pc',
|
|
|
+ activeNames: ['1','2'],
|
|
|
+ data1: [{
|
|
|
+ label: '智能看板-[数据查看][数据导出]',
|
|
|
+ children: [{
|
|
|
+ label: '数据查看',
|
|
|
+ }, {
|
|
|
+ label: '数据导出',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data2: [{
|
|
|
+ label: '智慧办公-[数据查看][数据导出]',
|
|
|
+ children: [{
|
|
|
+ label: '数据查看',
|
|
|
+ }, {
|
|
|
+ label: '数据导出',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data3: [{
|
|
|
+ label: '智慧安防-[数据查看][数据导出][设备交互]',
|
|
|
+ children: [{
|
|
|
+ label: '数据查看',
|
|
|
+ }, {
|
|
|
+ label: '数据导出',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '设备交互',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data4: [{
|
|
|
+ label: '智享生活-[数据查看][数据导出]',
|
|
|
+ children: [{
|
|
|
+ label: '数据查看',
|
|
|
+ }, {
|
|
|
+ label: '数据导出',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data5: [{
|
|
|
+ label: '数智双碳-[数据查看][数据导出]',
|
|
|
+ children: [{
|
|
|
+ label: '数据查看',
|
|
|
+ }, {
|
|
|
+ label: '数据导出',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data6: [{
|
|
|
+ label: '智慧场景-[数据查看][数据导出][策略配置][设备交互]',
|
|
|
+ children: [{
|
|
|
+ label: '数据查看',
|
|
|
+ }, {
|
|
|
+ label: '数据导出',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '策略配置',
|
|
|
+ }, {
|
|
|
+ label: '设备交互',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data7: [{
|
|
|
+ label: '人员管理-[信息查看][人员添加][人员更新][人员删除]',
|
|
|
+ children: [{
|
|
|
+ label: '信息查看',
|
|
|
+ }, {
|
|
|
+ label: '人员添加',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '人员更新',
|
|
|
+ }, {
|
|
|
+ label: '人员删除',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data8: [{
|
|
|
+ label: '角色管理-[信息查看][角色添加][角色更新][角色删除]',
|
|
|
+ children: [{
|
|
|
+ label: '信息查看',
|
|
|
+ }, {
|
|
|
+ label: '角色添加',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '角色更新',
|
|
|
+ }, {
|
|
|
+ label: '角色删除',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data9: [{
|
|
|
+ label: '组织管理-[信息查看][人员添加][人员更新][人员删除]',
|
|
|
+ children: [{
|
|
|
+ label: '信息查看',
|
|
|
+ }, {
|
|
|
+ label: '人员添加',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '人员更新',
|
|
|
+ }, {
|
|
|
+ label: '人员删除',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ data10: [{
|
|
|
+ label: '权限管理-[信息查看][权限添加][权限更新][权限删除]',
|
|
|
+ children: [{
|
|
|
+ label: '信息查看',
|
|
|
+ }, {
|
|
|
+ label: '权限添加',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '权限更新',
|
|
|
+ }, {
|
|
|
+ label: '权限删除',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+
|
|
|
+
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick() {
|
|
|
+ //
|
|
|
+ },
|
|
|
+ isActive(data) {
|
|
|
+ return this.activeNames.indexOf(data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.el-form {
|
|
|
+ //margin: 40px 0 0 0;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ padding-top: 10px;
|
|
|
+ margin-inline: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-form-item__label {
|
|
|
+ padding: 0;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-textarea__inner {
|
|
|
+ height: 80px;
|
|
|
+ width: 1174px;
|
|
|
+ min-height: 50px !important;
|
|
|
+ max-height: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.permissionType {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 90%;
|
|
|
+ height: 460px;
|
|
|
+ margin-left: 5%;
|
|
|
+ background-color: rgb(247, 245, 243);
|
|
|
+
|
|
|
+ .el-collapse {
|
|
|
+ /deep/.el-collapse-item__arrow {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-collapse-item__content {
|
|
|
+ height: 150px;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-collapse-item__wrap {
|
|
|
+ border-bottom: 0;
|
|
|
+ background-color: rgb(247, 245, 243);
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-collapse-item__header {
|
|
|
+ padding-left: 30px;
|
|
|
+ border-bottom: 0;
|
|
|
+ background-color: rgb(247, 245, 243);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-tabs__nav {
|
|
|
+ left: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree {
|
|
|
+ margin: 5px;
|
|
|
+ background-color: rgb(247, 245, 243);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-button {
|
|
|
+ height: 30px;
|
|
|
+ width: 100px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-inline: 40px;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+</style>
|