优化角色权限编辑页面

src/components/Crud/crud.js

@@ -291,7 +291,7 @@ function CRUD(options) {
       if (!delAll) {
         dataStatus.delete = CRUD.STATUS.PROCESSING
       }
-      return crud.crudMethod.del(delAll ? { idArray: ids } : singleId).then(() => {
+      return crud.crudMethod.del(delAll ? { ids: ids } : singleId).then(() => {
         if (!delAll) {
           dataStatus.delete = CRUD.STATUS.PREPARED
         }

src/main.js

@@ -31,6 +31,9 @@ import adaptive from './directive/el-table'
 import vueqr from 'vue-qr'
 import JSONView from 'vue-json-viewer'
 import { checkPermission } from './utils/permission'
+
+import Cookies from 'js-cookie'
+
 Vue.use(JSONView)
 Vue.use(permission)
 
@@ -49,7 +52,10 @@ Vue.use(CellGroup)
 Vue.use(Cell)
 Vue.use(Col)
 
-Vue.use(ElementUI, { locale })
+Vue.use(ElementUI, {
+  locale,
+  size: Cookies.get('size') || 'small' // set element-ui default size
+})
 
 // 全局的常量
 Vue.prototype.checkPermission = checkPermission

src/styles/index.scss

@@ -87,7 +87,45 @@ a:hover {
 }
 
 .app-container {
-  padding: 5px 20px;
+  padding: 20px 20px 5px 20px;
+}
+
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}
+
+.head-container {
+  padding-bottom: 10px;
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 3px 10px 0;
+  }
+  .el-button+.el-button {
+    margin-left: 0 !important;
+  }
+  .el-select__caret.el-input__icon.el-icon-arrow-up{
+    line-height: 30.5px;
+  }
+  .date-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+    height: 30.5px;
+    width: 223px !important;
+  }
 }
 
 fieldset {

src/views/user/role.vue

@@ -18,8 +18,10 @@
     </CustomTable>
     <pagination />
     <!--弹出框内容-->
-    <el-dialog
-      width="80%"
+    <el-drawer
+      ref="roleDrawer"
+      direction="rtl"
+      size="90%"
       :before-close="crud.cancelCU"
       :visible="crud.status.editor > 0"
       :title="crud.status.title"
@@ -33,14 +35,15 @@
         </el-form-item>
         <el-form-item label="功能权限：">
           <el-table
-            ref="menuList"
-            :data="menuList"
+            ref="permissions"
+            :data="permissions"
             border
             fit
+            height="680"
             highlight-current-row
             row-key="permission.id"
-            :default-expand-all="true"
             :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+            style="width: 99%;"
           >
             <el-table-column label="菜单名称" width="400">
               <template slot-scope="scope">
@@ -63,15 +66,27 @@
           </el-table>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="crud.cancelCU">
-          取 消
-        </el-button>
+      <el-row :gutter="20">
+        <el-col :span="4" :offset="2">
+          <el-select v-model="showMode" @change="changeShowMode">
+            <el-option
+              v-for="(item, index) in showModes"
+              :key="index"
+              :label="item"
+              :value="index"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="4" :offset="14">
           <el-button type="primary" @click="crud.submitCU">
             确 认
           </el-button>
-      </div>
-    </el-dialog>
+          <el-button @click="crud.cancelCU">
+            取 消
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-drawer>
   </div>
 </template>
 
@@ -98,7 +113,7 @@ const defaultForm = form({
   id: null,
   roleName: '',
   roleCode: '',
-  menuOptionIds: {}
+  resourcePermissionIds: {}
 })
 
 export default {
@@ -107,7 +122,7 @@ export default {
   mixins: [defaultCrud, defaultForm, header()],
   data() {
     return {
-      menuList: [],
+      permissions: [],
       colConfigs: [
         { prop: 'roleName', label: '角色名称', align: 'center' },
         { prop: 'roleCode', label: '角色代码', align: 'center' },
@@ -126,7 +141,9 @@ export default {
           { required: true, message: '请输入角色代码', trigger: 'blur' }
         ]
       },
-      checkedIds: new Set()
+      checkedIds: new Set(),
+      showMode: 0,
+      showModes: ['合并所有', '展开所有', '全部勾选', '取消勾选']
     }
   },
   mounted() {
@@ -135,7 +152,7 @@ export default {
   methods: {
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU]() {
-      this.clearChecked(this.menuList)
+      this.clearChecked(this.permissions)
       this.checkedIds.clear()
     },
     // 编辑框打开后做的操作
@@ -144,18 +161,55 @@ export default {
     },
     // 提交前的验证
     [CRUD.HOOK.afterValidateCU]() {
-      this.form.menuOptionIds = Array.from(this.checkedIds)
+      this.form.resourcePermissionIds = Array.from(this.checkedIds)
+    },
+    /**
+     * 改变展示方式
+     */
+    changeShowMode(val) {
+      switch (val) {
+        case 0:
+          this.permissions.forEach(row => {
+            setTimeout(() => {
+              this.$refs.permissions.toggleRowExpansion(row, false)
+            }, 1000)
+          })
+          break
+        case 1:
+          this.permissions.forEach(row => {
+            setTimeout(() => {
+              this.$refs.permissions.toggleRowExpansion(row, true)
+            }, 1000)
+          })
+          break
+        case 2:
+          this.permissions.forEach(row => {
+            row.checked = true
+            row.indeterminate = false
+            this.handleCheckAllChange(row, true)
+          })
+          break
+        case 3:
+          this.permissions.forEach(row => {
+            row.checked = false
+            row.indeterminate = false
+            this.handleCheckAllChange(row, false)
+          })
+          break
+        default:
+          break
+      }
     },
     // 获取菜单树
     getAllMenu() {
       getTree().then(data => {
-        this.menuList = data
+        this.permissions = data
       })
     },
     getRoleMenuList(roleId) {
       getPermissionsByRoleId(roleId).then(data => {
         data = data.map(row => row.resourcePermissionId)
-        this.menuList.forEach(permission => {
+        this.permissions.forEach(permission => {
           if (permission.children.length > 0) {
             this.echoChildren(permission.children, data)
           } else {
@@ -167,11 +221,13 @@ export default {
     handleCheckAllChange(val, checked) {
       // 有下级去处理下级
       if (val.children.length > 0) {
+        if (val.resourcePermissions.length) {
           if (checked) {
             this.checkedIds.add(val.resourcePermissions[0].id)
           } else {
             this.checkedIds.delete(val.resourcePermissions[0].id)
           }
+        }
         this.findChildren(val.children, checked)
       } else {
         // 无下级处理本级
@@ -186,7 +242,7 @@ export default {
       }
       // 处理上级
       if (val.permission.pid !== 0) {
-        this.findParent(this.menuList, val.permission.pid)
+        this.findParent(this.permissions, val.permission.pid)
       }
       val.indeterminate = false
     },
@@ -205,7 +261,7 @@ export default {
       val.indeterminate = checkedLength > 0 && checkedLength < length
       // 处理上级
       if (val.permission.pid !== 0) {
-        this.findParent(this.menuList, val.permission.pid)
+        this.findParent(this.permissions, val.permission.pid)
       }
     },
     findChildren(list, checked) {
@@ -250,7 +306,7 @@ export default {
           }
           // 如果还有上级，继续操作
           if (result.permission.pid !== 0) {
-            this.findParent(this.menuList, result.permission.pid)
+            this.findParent(this.permissions, result.permission.pid)
           }
         } else if (result.children.length > 0) {
           this.findParent(result.children, pid)
@@ -281,8 +337,8 @@ export default {
       }
     },
     // 递归清空菜单和选项
-    clearChecked(menuList) {
-      menuList.forEach(permission => {
+    clearChecked(permissions) {
+      permissions.forEach(permission => {
         permission.checked = false
         permission.indeterminate = false
         permission.resourcePermissions.forEach(options => {