分配角色权限

src/components/menu-permission.vue

@@ -99,11 +99,6 @@ export default {
 };
 </script>
 
-<style scoped>
-.menu_permission {
-  margin-top: 20px;
-}
-</style>
 
 <style>
 .menu_permission .el-table__header-wrapper {

src/pages/authority/addroles.vue

 <template>
   <div class="detail_contain">
     <p class="now_page_title">
-      权限管理  /  角色管理  /    
-      <span>{{$route.path.indexOf('edit')!==-1?'角色类型':$route.path.indexOf('add')!==-1?'新增角色':'分配权限'}}</span>
+      权限管理 / 角色管理 /
+      <span>{{
+        $route.path.indexOf("edit") !== -1
+          ? "角色类型"
+          : $route.path.indexOf("add") !== -1
+          ? "新增角色"
+          : "分配权限"
+      }}</span>
     </p>
     <div class="info_contain">
-        <p v-if="$route.path.indexOf('allot')!==-1" class="borerd"><span></span>基本信息</p>
+      <p v-if="$route.path.indexOf('allot') !== -1" class="borerd">
+        <span></span>基本信息
+      </p>
       <el-form ref="form" :rules="rules" :model="form" label-width="0px">
         <el-form-item prop="name">
           <p class="formname">角色名称：</p>
@@ -26,102 +34,234 @@
           <p class="formname">登记日期：</p>
           <el-input v-model="form.date" disabled></el-input>
         </el-form-item>
-        
+
         <el-form-item class="bottom-btn">
-          <el-button type="primary" @click="onSubmit('form')" class="right">保存</el-button>
+          <el-button type="primary" @click="onSubmit('form')" class="right"
+            >保存</el-button
+          >
           <el-button class="right">取消</el-button>
         </el-form-item>
       </el-form>
 
-       <p v-if="$route.path.indexOf('allot')!==-1" class="borerd"><span></span>菜单权限</p>
-       <div v-if="$route.path.indexOf('allot')!==-1" style="margin-bottom:60px;margin-top:20px;">
-           菜单权限
-       </div>
+      <p v-if="$route.path.indexOf('allot') !== -1" class="borerd">
+        <span></span>菜单权限
+      </p>
+      <div
+        v-if="$route.path.indexOf('allot') !== -1"
+        style="margin-bottom:100px;margin-top:20px;"
+      >
+        <menu-permission
+          v-model="permission"
+          :data="permissionData"
+          @change-permissions="changePermissions"
+        ></menu-permission>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import uploadFile from '@/components/upload_file'
 import { getRole } from "@/utils/common";
+import menuPermission from "@/components/menu-permission";
 export default {
   props: {},
   components: {
-    uploadFile
+    menuPermission,
   },
   data() {
     return {
-        form: {
-          name: '',
-          desc:'',
-          person:'',
-          date:'',
+      form: {
+        name: "",
+        desc: "",
+        person: "",
+        date: "",
+      },
+      now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
+      permission: {
+        value1: [11, 13],
+        value2: [],
+        value3: [31, 32, 33],
+        value4: [],
+        value5: [],
+      },
+      permissionData: [
+        {
+          name: "权限管理1",
+          prop: "value1",
+          children: [
+            {
+              name: "权限管理1",
+              value: 11,
+            },
+            {
+              name: "权限管理2",
+              value: 12,
+            },
+            {
+              name: "权限管理3",
+              value: 13,
+            },
+          ],
         },
-        now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员 
-        rules:{
-          name:[
-            { required: true, message: '请输入角色名称', trigger: 'blur' },
+        {
+          name: "权限管理2",
+          prop: "value2",
+          children: [
+            {
+              name: "权限管理1",
+              value: 21,
+            },
+            {
+              name: "权限管理2",
+              value: 22,
+            },
+            {
+              name: "权限管理3",
+              value: 23,
+            },
+            {
+              name: "权限管理4",
+              value: 24,
+            },
+            {
+              name: "权限管理5",
+              value: 25,
+            },
+            {
+              name: "权限管理6",
+              value: 26,
+            },
+            {
+              name: "权限管理7",
+              value: 27,
+            },
+            {
+              name: "权限管理8",
+              value: 28,
+            },
+            {
+              name: "权限管理9",
+              value: 29,
+            },
           ],
-          desc:[
-            { required: true, message: '请输入角色描述', trigger: 'blur' },
-            { max: 200, message: '长度小于200个字符', trigger: 'blur' }
+        },
+        {
+          name: "权限管理3",
+          prop: "value3",
+          children: [
+            {
+              name: "权限管理1",
+              value: 31,
+            },
+            {
+              name: "权限管理2",
+              value: 32,
+            },
+            {
+              name: "权限管理3",
+              value: 33,
+            },
           ],
-          
-        }
+        },
+        {
+          name: "权限管理4",
+          prop: "value4",
+          children: [
+            {
+              name: "权限管理1",
+              value: 41,
+            },
+            {
+              name: "权限管理2",
+              value: 42,
+            },
+            {
+              name: "权限管理4",
+              value: 43,
+            },
+          ],
+        },
+        {
+          name: "权限管理5",
+          prop: "value5",
+          children: [
+            {
+              name: "权限管理1",
+              value: 51,
+            },
+            {
+              name: "权限管理2",
+              value: 52,
+            },
+            {
+              name: "权限管理5",
+              value: 53,
+            },
+          ],
+        },
+      ],
+      rules: {
+        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+        desc: [
+          { required: true, message: "请输入角色描述", trigger: "blur" },
+          { max: 200, message: "长度小于200个字符", trigger: "blur" },
+        ],
+      },
     };
   },
   watch: {},
   computed: {},
   created() {
-    this.now_user = this.$store.state.role
-    getRole().then(data => {
-        this.now_user = data;
-        this.$store.commit('rolefun',data)
-        this.now_page()
+    this.now_user = this.$store.state.role;
+    getRole().then((data) => {
+      this.now_user = data;
+      this.$store.commit("rolefun", data);
+      this.now_page();
     });
     console.log(this.$route);
   },
   mounted() {},
   methods: {
-      onSubmit(formName) {
-        console.log('submit!');
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      now_page(){
-          if(this.$route.path.indexOf('edit')!==-1){
-              this.getInfo()
-          }
-          if(this.$route.path.indexOf('allot')!==-1){
-              this.getInfo()
-          }
-      },
-      getInfo(){
-          console.log('111');
+    onSubmit(formName) {
+      console.log("submit!");
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    now_page() {
+      if (this.$route.path.indexOf("edit") !== -1) {
+        this.getInfo();
+      }
+      if (this.$route.path.indexOf("allot") !== -1) {
+        this.getInfo();
       }
-      
-  }
+    },
+    getInfo() {
+      console.log("111");
+    },
+    changePermissions(values) {
+      console.log(values);
+    },
+  },
 };
 </script>
 
-
 <style>
-.info_contain .el-input__inner{
+.info_contain .el-input__inner {
   background-color: #f7f8f9;
   width: 1022px;
 }
-.info_contain .el-textarea__inner{
+.info_contain .el-textarea__inner {
   background-color: #f7f8f9;
   width: 1022px;
 }
-.info_contain .el-input.is-disabled .el-input__inner{
-    background-color: #e3e4e6;
+.info_contain .el-input.is-disabled .el-input__inner {
+  background-color: #e3e4e6;
 }
 </style>
 
@@ -138,8 +278,8 @@ export default {
   box-shadow: 0px 3px 6px 0px #f4f7fc;
   border-radius: 12px;
   min-height: calc(100% - 20px);
-    margin-bottom: 20px;
-    position: relative;
+  margin-bottom: 20px;
+  position: relative;
 }
 .now_page_title {
   margin: 15px 0;
@@ -148,14 +288,14 @@ export default {
 .now_page_title span {
   color: #242c43;
 }
-.formname{
+.formname {
   color: #58617a;
 }
-.right{
+.right {
   float: right;
   margin-left: 20px;
 }
-.removepic{
+.removepic {
   display: inline-block;
   margin-top: -40px;
   float: left;
@@ -169,16 +309,16 @@ export default {
   color: #e6ebfe;
   cursor: pointer;
 }
-.edit_change{
+.edit_change {
   width: 100%;
   border-bottom: 2px solid #f4f7fc;
   overflow: hidden;
 }
-.edit_change_box{
+.edit_change_box {
   width: 163px;
   height: 48px;
   line-height: 48px;
-	background-color: #e3e5ef;
+  background-color: #e3e5ef;
   border-radius: 8px;
   color: #8890a7;
   text-align: center;
@@ -189,81 +329,81 @@ export default {
   font-size: 16px;
   cursor: pointer;
 }
-.edit_change_box img{
+.edit_change_box img {
   vertical-align: -3px;
   margin-right: 5px;
 }
-.safe_title{
-    width: 100%;
-    height: 65px;
-    line-height: 65px;
-    border-bottom: 2px solid #f4f7fc;
+.safe_title {
+  width: 100%;
+  height: 65px;
+  line-height: 65px;
+  border-bottom: 2px solid #f4f7fc;
 }
-.safe_select{
-    float: left;
-    width: auto;
-    margin-right: 40px;
-    height: 65px;
-    cursor: pointer;
+.safe_select {
+  float: left;
+  width: auto;
+  margin-right: 40px;
+  height: 65px;
+  cursor: pointer;
 }
-.safe_box_select{
-    padding: 30px 10px 10px 10px;
-    width: 100%;
-    height: 100%;
+.safe_box_select {
+  padding: 30px 10px 10px 10px;
+  width: 100%;
+  height: 100%;
 }
-.openbgc{
+.openbgc {
   width: 56px;
-	height: 23px;
-  background-image: url('~@/assets/imgs/btn_on_hov.png');
-  background-size:contain;
+  height: 23px;
+  background-image: url("~@/assets/imgs/btn_on_hov.png");
+  background-size: contain;
   cursor: pointer;
 }
-.formtitle{
+.formtitle {
   color: #58617a;
   margin: 15px 0;
 }
 
-.savebtn{
+.savebtn {
   position: absolute;
   right: 20px;
-  bottom:20px;
+  bottom: 20px;
   width: 278px;
   overflow: hidden;
 }
-.btnsty{
+.btnsty {
   width: 124px;
-	height: 44px;
+  height: 44px;
   line-height: 44px;
-	background-color: rgba(195, 202, 248, 0.5);
-	border-radius: 8px;
+  background-color: rgba(195, 202, 248, 0.5);
+  border-radius: 8px;
   color: rgba(15, 38, 131, 1);
   text-align: center;
   float: left;
   margin-right: 30px;
   cursor: pointer;
 }
-.savebtn .btnsty:nth-last-of-type(1){
+.savebtn .btnsty:nth-last-of-type(1) {
   margin-right: 0px;
   background-color: rgba(15, 38, 131, 1);
   color: rgba(248, 249, 253, 1);
 }
 
-.bottom-btn{
-    position: absolute;
-    bottom:20px;
-    right: 50px;
+.bottom-btn {
+  position: absolute;
+  bottom: 20px;
+  right: 50px;
 }
-.borerd{
-    color: #58617a;
-    font-size: 16px;
+.borerd {
+  color: #58617a;
+  font-size: 16px;
 }
-.borerd span{
-    display: inline-block;
-    width: 4px;
-	height: 16px;
-	background-color: #515fe7;
-	border-radius: 2px;
-    margin-right: 10px;
-    vertical-align: -2px;
+.borerd span {
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background-color: #515fe7;
+  border-radius: 2px;
+  margin-right: 10px;
+  vertical-align: -2px;
 }
 </style>