角色调整

src/views/system/role/index.vue

@@ -26,34 +26,9 @@
         <m-button class="pa-0" v-permission="['system:role:delete']" type="danger" text @click="onDelete(scope.row)">删除</m-button>
       </template>
     </MTable>
-    <MDialog ref="dialog" :title="itemData.id ? '编辑角色' : '新增角色'" @sure="handleSave">
-      <MForm ref="roleForm" :items="roleFormItems" v-model="roleFormValue"></MForm>
-    </MDialog>
-    <MDialog ref="menuDialog" title="菜单权限编辑" @sure="handleSaveMenu">
-      <MForm ref="menuForm">
-        <el-form-item label="角色名称">
-          <el-tag>{{ itemData.roleName }}</el-tag>
-        </el-form-item>
-        <el-form-item label="菜单权限" required>
-          <m-card shadow="never">
-            <el-tree
-              ref="menuTree"
-              :data="menuData"
-              show-checkbox
-              node-key="id"
-              :props="{
-                children: 'children',
-                label: 'label'
-              }"
-            >
-            </el-tree>
-          </m-card>
-        </el-form-item>
-      </MForm>
-    </MDialog>
-    <MDialog ref="dataDialog" title="数据权限编辑" @sure="handleSaveData">
-      <MForm ref="roleForm" :items="roleFormItems" v-model="roleFormValue"></MForm>
-    </MDialog>
+    <RoleEdit ref="dialog" @refresh="initPage"></RoleEdit>
+    <RoleMenu ref="menuRefs" @refresh="initPage"></RoleMenu>
+    <RoleData ref="dataRefs" @refresh="initPage"></RoleData>
   </div>
 </template>
 
@@ -61,30 +36,22 @@
 import {
   getRoleList,
   deleteRole,
-  getRoleDetails,
-  saveRole,
-  getMenuTree,
-  saveDataPermission
+  getRoleDetails
 } from '@/api/menu'
 import { dateFormat } from '@/utils/date'
+import RoleEdit from './roleEdit'
+import RoleMenu from './roleMenu'
+import RoleData from './roleData'
 export default {
   name: 'role-manage-role',
+  components: {
+    RoleEdit,
+    RoleMenu,
+    RoleData
+  },
   data () {
     return {
       itemData: {},
-      roleFormItems: [
-        {
-          label: '角色名称',
-          prop: 'roleName',
-          type: 'input',
-          rules: [
-            { required: true, message: '请输入角色名称', trigger: 'blur' }
-          ]
-        }
-      ],
-      roleFormValue: {
-        roleName: null
-      },
       searchValues: {
         roleName: null
       },
@@ -98,10 +65,7 @@ export default {
           type: 'input'
         }
       ],
-      menuData: [],
       itemDataPermission: {},
-      show: false,
-      showMenu: false,
       headers: [
         { label: '角色', prop: 'roleName' },
         { label: '创建时间', prop: 'createTime' },
@@ -117,27 +81,10 @@ export default {
       loading: false
     }
   },
-  // computed: {
-  //   defaultCheckedKeys () {
-  //     if (Object.keys(this.itemData).length === 0) {
-  //       return []
-  //     }
-  //     return this.itemData.menuIds.split(',').map(e => +e)
-  //   }
-  // },
   created () {
-    this.getMenu()
+    this.initPage()
   },
   methods: {
-    async getMenu () {
-      try {
-        const { data } = await getMenuTree({})
-        this.menuData = data.routes
-        this.initPage()
-      } catch (error) {
-        this.$message.error(error)
-      }
-    },
     async initPage () {
       this.loading = true
       try {
@@ -161,10 +108,6 @@ export default {
       }
     },
     onAdd () {
-      this.roleFormValue = {
-        roleName: null
-      }
-      this.itemData = {}
       this.$refs.dialog.open()
     },
     async onEdit (item) {
@@ -172,30 +115,24 @@ export default {
       if (!data) {
         return
       }
-      this.roleFormValue = {
-        roleName: data.roleName
-      }
-      this.itemData = data
-      this.$refs.dialog.open()
+      this.$refs.dialog.open({
+        roleName: data.roleName,
+        id: data.id
+      })
     },
     async onMenu (item) {
       const data = await this.getDetails(item.id)
       if (!data) {
         return
       }
-      this.itemData = data
-      this.$refs.menuDialog.open()
-      this.$nextTick(() => {
-        this.$refs.menuTree.setCheckedKeys(data.menuIds.split(',').map(e => +e))
-      })
+      this.$refs.menuRefs.open(data)
     },
     async onPermission (item) {
       const data = await this.getDetails(item.id)
       if (!data) {
         return
       }
-      this.itemData = data
-      this.$refs.dataDialog.open()
+      this.$refs.dataRefs.open(data)
     },
     onDelete (item) {
       this.$confirm('是否确定删除该选项', '提示', {
@@ -212,61 +149,6 @@ export default {
         }
       }).catch(_ => {})
     },
-    handleData (item) {
-      this.itemDataPermission = item
-      this.showMenu = true
-    },
-    handleSave () {
-      this.$refs.roleForm.validate(async (valid) => {
-        if (!valid) {
-          return
-        }
-        const obj = {
-          ...this.roleFormValue,
-          menuIds: '-9999'
-        }
-        try {
-          await saveRole(obj)
-          this.$message.success(this.itemData.id ? '编辑成功' : '添加成功')
-          this.$refs.dialog.close()
-          this.initPage()
-        } catch (error) {
-          this.$message.error(error)
-        }
-      })
-    },
-    async handleSaveMenu () {
-      const menuIds = this.$refs.menuTree.getCheckedKeys(true)
-      if (!menuIds.length) {
-        this.$message.warning('请选择菜单')
-        return
-      }
-      const obj = {
-        id: this.itemData.id,
-        menuIds: menuIds.join(',')
-      }
-      try {
-        await saveRole(obj)
-        this.$message.success('保存成功')
-        this.$refs.menuDialog.close()
-        this.initPage()
-      } catch (error) {
-        this.$message.error(error)
-      }
-    },
-    async handleSaveData () {
-      try {
-        await saveDataPermission({
-          roleId: this.itemData.id
-          // menuIds: menuIds.join(',')
-        })
-        this.$message.success('保存成功')
-        this.showMenu = false
-        this.initPage()
-      } catch (error) {
-        this.$message.error(error)
-      }
-    },
     handlePageChange (page) {
       this.pageInfo.current = page
       this.initPage()

src/views/system/role/roleData.vue

@@ -0,0 +1,43 @@
+<template>
+  <MDialog ref="menuDialog" title="数据权限编辑" @sure="handleSave">
+    <MForm ref="menuForm">
+      <el-form-item label="角色名称">
+        <el-tag>{{ item.roleName }}</el-tag>
+      </el-form-item>
+    </MForm>
+  </MDialog>
+</template>
+
+<script>
+import { saveDataPermission } from '@/api/menu'
+export default {
+  name: 'role-data',
+  data () {
+    return {
+      item: {}
+    }
+  },
+  methods: {
+    open (item) {
+      this.item = item
+      this.$refs.menuDialog.open()
+    },
+    async handleSave () {
+      try {
+        await saveDataPermission({
+          roleId: this.item.id
+          // menuIds: menuIds.join(',')
+        })
+        this.$message.success('保存成功')
+        this.$emit('refresh')
+      } catch (error) {
+        this.$message.error(error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/system/role/roleEdit.vue

@@ -0,0 +1,70 @@
+<template>
+  <MDialog ref="dialog" :title="roleFormValue.id ? '编辑角色' : '添加角色'" @sure="handleSave">
+    <MForm ref="roleForm" :items="roleFormItems" v-model="roleFormValue"></MForm>
+  </MDialog>
+</template>
+
+<script>
+import {
+
+  saveRole
+} from '@/api/menu'
+export default {
+  name: 'role-edit',
+  data () {
+    return {
+      roleFormItems: [
+        {
+          label: '角色名称',
+          prop: 'roleName',
+          type: 'input',
+          options: {
+            placeholder: '请输入角色名称'
+          },
+          rules: [
+            { required: true, message: '请输入角色名称', trigger: 'blur' }
+          ]
+        }
+      ],
+      roleFormValue: {
+        roleName: null
+      }
+    }
+  },
+  methods: {
+    open (item) {
+      if (!item) {
+        this.roleFormValue = {
+          roleName: null
+        }
+      } else {
+        this.roleFormValue = item
+      }
+      this.$refs.dialog.open()
+    },
+    handleSave () {
+      this.$refs.roleForm.validate(async (valid) => {
+        if (!valid) {
+          return
+        }
+        const obj = {
+          ...this.roleFormValue,
+          menuIds: '-9999'
+        }
+        try {
+          await saveRole(obj)
+          this.$message.success(this.roleFormValue.id ? '编辑成功' : '添加成功')
+          this.$refs.dialog.close()
+          this.$emit('refresh')
+        } catch (error) {
+          this.$message.error(error)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/system/role/roleMenu.vue

@@ -0,0 +1,83 @@
+<template>
+  <MDialog ref="menuDialog" title="菜单权限编辑" @sure="handleSaveMenu">
+    <MForm ref="menuForm">
+      <el-form-item label="角色名称">
+        <el-tag>{{ item.roleName }}</el-tag>
+      </el-form-item>
+      <el-form-item label="菜单权限" required>
+        <m-card shadow="never">
+          <el-tree
+            ref="menuTree"
+            :data="menuData"
+            show-checkbox
+            node-key="id"
+            :props="{
+              children: 'children',
+              label: 'label'
+            }"
+          >
+          </el-tree>
+        </m-card>
+      </el-form-item>
+    </MForm>
+  </MDialog>
+</template>
+
+<script>
+import {
+  getMenuTree,
+  saveRole
+} from '@/api/menu'
+export default {
+  name: 'role-menu',
+  data () {
+    return {
+      item: {},
+      menuData: []
+    }
+  },
+  methods: {
+    async open (item) {
+      this.item = item
+      this.$refs.menuDialog.open()
+      const check = await this.getMenu()
+      if (!check) return
+      this.$nextTick(() => {
+        this.$refs.menuTree.setCheckedKeys(item.menuIds.split(',').map(e => +e))
+      })
+    },
+    async getMenu () {
+      try {
+        const { data } = await getMenuTree({})
+        this.menuData = data.routes
+        return true
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    async handleSaveMenu () {
+      const menuIds = this.$refs.menuTree.getCheckedKeys(true)
+      if (!menuIds.length) {
+        this.$message.warning('请选择菜单')
+        return
+      }
+      const obj = {
+        id: this.item.id,
+        menuIds: menuIds.join(',')
+      }
+      try {
+        await saveRole(obj)
+        this.$message.success('保存成功')
+        this.$refs.menuDialog.close()
+        this.$emit('refresh')
+      } catch (error) {
+        this.$message.error(error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>