修改菜单权限弹框

chuanyi-admin/src/views/system/menu/menu-auth.vue

@@ -48,61 +48,24 @@
       @pagination="getTreeMenuList"
     />
 
-    <el-dialog title="分配菜单" :visible.sync="dialogVisible" width="40%">
-      <el-row>
-        <el-col>
-          <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            :disabled="distribution"
-            @click="distMenuAuthBtns"
-          >
-            批量分配</el-button>
-        </el-col>
-      </el-row>
-      <el-table ref="multipleTable" :data="addMenuAuthList" row-key="id" @selection-change="handelAddMenuAuth">
-        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
-        <el-table-column label="接口名称" prop="permissionUrl" :show-overflow-tooltip="true" align="center" />
-        <el-table-column label="备注" prop="permissionName" :show-overflow-tooltip="true" align="center" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-circle-plus"
-              size="mini"
-              :disabled="!distribution"
-              @click="distMenuAuthBtn(scope.row)"
-            >分配菜单
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-        v-show="addTotal > 0"
-        :total="addTotal"
-        :page.sync="allAuthQuery.page"
-        :limit.sync="allAuthQuery.limit"
-        @pagination="getAllAuthApi"
-      />
-    </el-dialog>
+    <menuDist ref="dialog" @handelUpdate="getTreeMenuList" />
   </div>
 </template>
 
 <script>
-import { getTreeMenuList, distMenuAuth, getAllAuthApi, delMenuAuth } from '@/api/system/menu'
+import { getTreeMenuList, delMenuAuth } from '@/api/system/menu'
+import menuDist from './menu-dist.vue'
 export default {
   name: 'MenuAuth',
+  components: {
+    menuDist
+  },
   data() {
     return {
       // 遮罩层
       loading: false,
       // 非多个禁用
       multiple: true,
-      // 添加菜单权限按钮禁用
-      distribution: true,
       // 总条数
       total: 0,
       // 菜单权限表格数据
@@ -113,27 +76,11 @@ export default {
         num: 10,
         id: null
       },
-      // 所有权限接口查询参数
-      allAuthQuery: {
-        page: 1,
-        limit: 10
-      },
       // 取消分配菜单权限参数
       delMenuAuthObj: {
         id: null,
         permissionList: []
-      },
-      // 分配菜单权限参数
-      menuAuthObj: {
-        id: null,
-        permissionList: []
-      },
-      // 弹出框
-      dialogVisible: false,
-      // 添加菜单权限数据
-      addMenuAuthList: [],
-      // 弹出框表格总数
-      addTotal: 0
+      }
     }
   },
   created() {
@@ -143,7 +90,6 @@ export default {
       this.getTreeMenuList()
     }
     this.delMenuAuthObj.permissionList = []
-    this.menuAuthObj.permissionList = []
   },
   methods: {
     /** 获取父级及自己所有菜单权限接口 */
@@ -155,14 +101,6 @@ export default {
         this.loading = false
       })
     },
-    /** 查看所有权限接口 */
-    getAllAuthApi() {
-      getAllAuthApi(this.allAuthQuery).then(res => {
-        const data = res.data
-        this.addMenuAuthList = data.permissionList
-        this.addTotal = data.count
-      })
-    },
     /** 返回按钮 */
     handleClose() {
       this.$router.push('/system/menu')
@@ -176,54 +114,9 @@ export default {
       })
       this.multiple = !selection.length
     },
-    /** 添加菜单权限多选框选中数据 */
-    handelAddMenuAuth(selection) {
-      selection.forEach(item => {
-        this.menuAuthObj.permissionList.push({ id: item.id })
-      })
-      this.menuAuthObj.permissionList = this._.uniqBy(this.menuAuthObj.permissionList, 'id')
-      this.distribution = !selection.length
-    },
     /** 添加菜单权限按钮 */
     handelAdd() {
-      this.getAllAuthApi()
-      this.allAuthQuery.page = 1
-      this.menuAuthObj.permissionList = []
-      this.dialogVisible = true
-      this.$nextTick(() => {
-        this.$refs.multipleTable.clearSelection()
-      })
-    },
-    /** 分配按钮操作 */
-    distMenuAuthBtn(row) {
-      this.$confirm('是否分配接口权限?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.menuAuthObj.permissionList.push({ id: row.id })
-        this.distMenuAuth()
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '取消操作'
-        })
-      })
-    },
-    /** 批量分配按钮操作 */
-    distMenuAuthBtns() {
-      this.$confirm('是否批量分配接口权限?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.distMenuAuth()
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '取消操作'
-        })
-      })
+      this.$refs.dialog.show()
     },
     /** 取消分配按钮操作 */
     cancelAuthMenu(row) {
@@ -256,19 +149,6 @@ export default {
         })
       })
     },
-    /** 分配菜单权限接口 */
-    distMenuAuth() {
-      this.menuAuthObj.id = this.queryParams.id
-      distMenuAuth(this.menuAuthObj).then(res => {
-        if (res.code === 200) {
-          this.getTreeMenuList()
-          this.$message({
-            type: 'success',
-            message: '已分配权限'
-          })
-        }
-      })
-    },
     /** 取消分配菜单权限接口 */
     delMenuAuth() {
       this.queryParams.page = 1

chuanyi-admin/src/views/system/menu/menu-dist.vue

@@ -0,0 +1,147 @@
+<template>
+  <!-- 分配菜单 -->
+  <el-dialog title="分配菜单" :visible.sync="dialogVisible" width="50%" top="10vh" append-to-body>
+    <el-row>
+      <el-col>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          :disabled="distribution"
+          @click="distMenuAuthBtns"
+        >
+          批量分配</el-button>
+      </el-col>
+    </el-row>
+    <el-table ref="multipleTable" :data="addMenuAuthList" row-key="id" @selection-change="handelAddMenuAuth">
+      <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
+      <el-table-column label="接口名称" prop="permissionUrl" :show-overflow-tooltip="true" align="center" />
+      <el-table-column label="备注" prop="permissionName" :show-overflow-tooltip="true" align="center" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-circle-plus"
+            size="mini"
+            :disabled="!distribution"
+            @click="distMenuAuthBtn(scope.row)"
+          >分配菜单
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="addTotal > 0"
+      :total="addTotal"
+      :page.sync="allAuthQuery.page"
+      :limit.sync="allAuthQuery.limit"
+      @pagination="getAllAuthApi"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { getAllAuthApi, distMenuAuth } from '@/api/system/menu'
+export default {
+  data() {
+    return {
+      // 所有权限接口查询参数
+      allAuthQuery: {
+        page: 1,
+        limit: 10
+      },
+      // 分配菜单权限参数
+      menuAuthObj: {
+        id: null,
+        permissionList: []
+      },
+      // 添加菜单权限数据
+      addMenuAuthList: [],
+      // 弹出框表格总数
+      addTotal: 0,
+      // 添加菜单权限按钮禁用
+      distribution: true,
+      // 开关弹框
+      dialogVisible: false
+    }
+  },
+  created() {
+    if (this.$route.params.userId) {
+      this.menuAuthObj.id = this.$route.params.userId
+    }
+  },
+  methods: {
+    /** 查看所有权限接口 */
+    getAllAuthApi() {
+      getAllAuthApi(this.allAuthQuery).then(res => {
+        const data = res.data
+        this.addMenuAuthList = data.permissionList
+        this.addTotal = data.count
+      })
+    },
+    /** 添加菜单权限多选框选中数据 */
+    handelAddMenuAuth(selection) {
+      selection.forEach(item => {
+        this.menuAuthObj.permissionList.push({ id: item.id })
+      })
+      this.menuAuthObj.permissionList = this._.uniqBy(this.menuAuthObj.permissionList, 'id')
+      this.distribution = !selection.length
+    },
+    /** 分配按钮操作 */
+    distMenuAuthBtn(row) {
+      this.$confirm('是否分配接口权限?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.menuAuthObj.permissionList.push({ id: row.id })
+        this.distMenuAuth()
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '取消操作'
+        })
+      })
+    },
+    /** 批量分配按钮操作 */
+    distMenuAuthBtns() {
+      this.$confirm('是否批量分配接口权限?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.distMenuAuth()
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '取消操作'
+        })
+      })
+    },
+    /** 分配菜单权限接口 */
+    distMenuAuth() {
+      distMenuAuth(this.menuAuthObj).then(res => {
+        if (res.code === 200) {
+          this.$message({
+            type: 'success',
+            message: '已分配权限'
+          })
+          this.$emit('handelUpdate')
+        }
+      })
+    },
+    /** 显示弹框 */
+    show() {
+      this.allAuthQuery.page = 1
+      this.menuAuthObj.permissionList = []
+      this.getAllAuthApi()
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.multipleTable.clearSelection()
+      })
+    }
+  }
+}
+</script>