新增角色增加pid

src/views/product/components/InfoEditDialog.vue

@@ -66,7 +66,7 @@
             :fileLimit="6"
             :fileSize="50"
             listType="picture-card"
-            :fileType="['png', 'jpeg', 'jpg']"
+            :fileType="['png', 'jpeg', 'jpg','webp']"
             ref="images"
           />
         </el-form-item>

src/views/role/components/InfoEditDialog.vue

@@ -24,16 +24,24 @@
             placeholder="请输入角色名称"
           ></el-input>
         </el-form-item>
-        <el-form-item label="状态" :label-width="formLabelWidth">
-          <el-switch v-model="status"> </el-switch>
-        </el-form-item>
-        <el-form-item label="备注" :label-width="formLabelWidth">
-          <el-input
-            type="textarea"
-            placeholder="请输入备注"
-            v-model="dialogForm.remark"
+        <el-form-item
+          label="所属父角色"
+          :label-width="formLabelWidth"
+          prop="pid"
+        >
+          <el-tree
+            :data="allRole"
+            show-checkbox
+            check-on-click-node
+            check-strictly
+            node-key="id"
+            @check="roleParentTreeCheck"
+            ref="roleParentTree"
+            highlight-current
+            :props="{ label: 'name' }"
+            :default-checked-keys="[dialogForm.pid]"
           >
-          </el-input>
+          </el-tree>
         </el-form-item>
         <el-form-item label="菜单权限" :label-width="formLabelWidth">
           <el-tree
@@ -42,10 +50,20 @@
             show-checkbox
             :props="props"
             node-key="id"
-            @check-change="handleCheckChange"
           >
           </el-tree>
         </el-form-item>
+        <el-form-item label="状态" :label-width="formLabelWidth">
+          <el-switch v-model="status"> </el-switch>
+        </el-form-item>
+        <el-form-item label="备注" :label-width="formLabelWidth">
+          <el-input
+            type="textarea"
+            placeholder="请输入备注"
+            v-model="dialogForm.remark"
+          >
+          </el-input>
+        </el-form-item>
       </el-form>
     </div>
     <div class="dialog-footer">
@@ -62,7 +80,9 @@ import {
   addRole,
   upadateRole,
   getPermissionTreeAll,
+  getUserOwnRolesV1,
 } from "@/api/user";
+import { mapGetters } from "vuex";
 export default {
   name: "InfoEditDialog",
   props: {
@@ -76,6 +96,7 @@ export default {
     },
   },
   computed: {
+    ...mapGetters(["userInfo"]),
     title() {
       if (this.dialogForm.id) {
         return "修改角色信息";
@@ -97,8 +118,9 @@ export default {
           that.setPer();
           // debugger
         } else {
-          that.getDefaultTree();
+          that.getAllMenuTree();
         }
+        that.getAllRoleTree();
       },
       immediate: true,
       deep: true,
@@ -133,7 +155,15 @@ export default {
             trigger: "blur",
           },
         ],
+        pid: [
+          {
+            required: true,
+            message: "请选择所属角色",
+            trigger: "blur",
+          },
+        ],
       },
+      allRole: [],
     };
   },
 
@@ -147,13 +177,18 @@ export default {
       const { name, remark } = this.dialogForm;
       let status = this.status ? 1 : 0;
       let permissions = this.$refs.tree.getCheckedKeys();
+
       const params = {
         name,
         status,
         permissions,
         remark,
       };
-
+      let parentIdArr = this.$refs.roleParentTree.getCheckedKeys();
+      if (parentIdArr.length > 0) {
+        let pid = parentIdArr.toString();
+        params.pid = pid;
+      }
       if (this.dialogForm.id) {
         params.id = this.dialogForm.id;
         let res = await upadateRole(params);
@@ -184,9 +219,6 @@ export default {
         .catch((_) => {});
     },
 
-    handleCheckChange(data, checked, indeterminate) {
-      console.log(data, checked, indeterminate);
-    },
 
     setPer() {
       let checkedIds = [];
@@ -209,10 +241,24 @@ export default {
       }, 100);
     },
 
-    async getDefaultTree() {
+    async getAllMenuTree() {
       let res = await getPermissionTreeAll();
       this.$set(this.dialogForm, "permissionRespNodes", res.data);
     },
+
+    async getAllRoleTree() {
+      const { id } = this.userInfo;
+      let res = await getUserOwnRolesV1(id);
+      const { allRole } = res.data;
+      this.allRole = allRole;
+    },
+
+    roleParentTreeCheck(node, list) {
+      if (list.checkedKeys.length == 2) {
+        //单选实现
+        this.$refs.roleParentTree.setCheckedKeys([node.id]);
+      }
+    },
   },
 };
 </script>