前端对接接口

Yi.Vue/src/views/AdmRoleMenu.vue

@@ -1,14 +1,18 @@
 <template>
   <v-row>
     <v-col cols="12">
-<material-card color="primary" icon="mdi-account-outline">
-    <template #title>
-      角色菜单分配管理 — <small class="text-body-1">你可以在这里多角色分配多菜单</small>
-    </template><app-btn  class="ma-4" @click="setMenu">确定分配</app-btn></material-card>
+      <material-card color="primary" icon="mdi-account-outline">
+        <template #title>
+          角色菜单分配管理 —
+          <small class="text-body-1"
+            >你可以在这里多角色分配多菜单/选中一个可查看</small
+          > </template
+        ><app-btn class="ma-4" @click="setMenu">确定分配</app-btn
+        ><app-btn class="my-4"  color="secondary" @click="clear">清空选择</app-btn></material-card
+      >
     </v-col>
     <v-col cols="12" md="4" lg="4">
       <v-card class="mx-auto" width="100%">
-        
         <v-treeview
           selectable
           :items="RoleItems"
@@ -25,6 +29,7 @@
     <v-col cols="12" md="8" lg="8">
       <v-card class="mx-auto" width="100%">
         <v-treeview
+          open-on-click
           selectable
           :items="Menuitems"
           selection-type="leaf"
@@ -47,36 +52,40 @@ import roleApi from "../api/roleApi";
 import menuApi from "../api/menuApi";
 export default {
   created() {
- this.init();
+    this.init();
   },
-watch: {
-     selectionRole:{
-         handler(val, oldVal){
-              if(val.length==1)
-              {
-                ////
-                this.selectionMenu=[{id:38},{id:39}]
-              }
-         },
-         deep:true
-     },
+  watch: {
+    selectionRole: {
+      handler(val, oldVal) {
+        if (val.length == 1) {
+          roleApi.getMenuByRloe(val[0].id).then((resp) => {
+            this.selectionMenu = resp.data;
+          });
+        }
+      },
+      deep: true,
+    },
   },
   methods: {
-    setMenu(){
-     var roleIds=[];
-     var menuIds=[];
-     this.selectionRole.forEach((ele)=>{
-       roleIds.push(ele.id)
-     })
-     this.selectionMenu.forEach((ele)=>{
-       menuIds.push(ele.id)
-     })
-      roleApi.setMenuByRole(roleIds,menuIds).then(resp=>{
-                this.$dialog.notify.info(resp.msg, {
+    clear() {
+      this.selectionMenu = [];
+      this.selectionRole = [];
+    },
+    setMenu() {
+      var roleIds = [];
+      var menuIds = [];
+      this.selectionRole.forEach((ele) => {
+        roleIds.push(ele.id);
+      });
+      this.selectionMenu.forEach((ele) => {
+        menuIds.push(ele.id);
+      });
+      roleApi.setMenuByRole(roleIds, menuIds).then((resp) => {
+        this.$dialog.notify.info(resp.msg, {
           position: "top-right",
           timeout: 5000,
         });
-      })
+      });
     },
     init() {
       roleApi.getRole().then((resp) => {