调整样子

fhKeeper/formulahousekeeper/timesheet/src/views/quanx/quanx.vue

@@ -25,7 +25,7 @@
             <template slot-scope="scope">
                 <div>
                     <el-button type="primary" size="small" @click="handleAdd('编辑角色', '立即修改', scope.row)">编辑角色</el-button>
-                    <el-button type="primary" size="small" @click="shisha(scope.row.companyId),dialogVisible = true">分配权限</el-button>
+                    <el-button type="primary" size="small" @click="shisha(scope.row.id)">分配权限</el-button>
                     <el-button type="danger" size="small" @click="deteHand(scope.row)">删除</el-button>
                 </div>
             </template>
@@ -45,16 +45,21 @@
         </el-col> -->
         <!-- 分配权限弹窗 -->
         <el-dialog title="分配权限" :visible.sync="dialogVisible" width="600" :before-close="handleClose">
-            <div>
+            <div class="quanxians">
                 <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
                 <!-- <el-tree :data="data" show-checkbox node-key="id" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps"> </el-tree> -->
-                <el-form ref="form" :model="form" label-width="80px">
+                <el-form ref="form" :model="form" label-width="0px">
                 <!-- 分模块展示功能项 -->
                 <el-form-item>
                   <ul>
                     <li v-for="mainMenu in moduleList" :key="mainMenu.id">
+                      <div style="width: 20px; display: inline-block;height: 10px">
+                        <span v-if="mainMenu.children.length > 0" @click="dianji(mainMenu)" style="cursor:pointer;"><i :class="mainMenu.useState ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i></span>
+                      </div>
                       <el-checkbox :label="mainMenu.name" name="type" v-model="mainMenu.checked" style="font-weight:bold;" @change="mainChange(mainMenu)"></el-checkbox>
-                      <ul v-if="mainMenu.children">
+                      <span v-if="mainMenu.functionList && mainMenu.functionList.length > 0" style="margin-right:10px;margin-left:10px;">(功能:  
+                              <el-checkbox v-for="fun in mainMenu.functionList" :key="fun.id" :label="fun.name" name="type" v-model="fun.checked" @change="subChanges(fun, mainMenu.id)"></el-checkbox>)</span>
+                      <ul v-if="mainMenu.children && mainMenu.useState">
                         <li v-for="subMenu in mainMenu.children" :key="subMenu.id">
                         <el-checkbox :label="subMenu.name" name="type" v-model="subMenu.checked" style="font-weight:bold;" @change="subChange(subMenu)"></el-checkbox>
                             <span v-if="subMenu.functionList && subMenu.functionList.length > 0" style="margin-right:10px;margin-left:10px;">(功能:  
@@ -65,8 +70,10 @@
                   </ul>
                 </el-form-item>
                 </el-form>
-                <el-button type="primary" size="small" @click="saveList()">保存</el-button>
             </div>
+            <span slot="footer" class="dialog-footer">
+              <el-button type="primary" size="small" @click="saveList()">保存</el-button>
+            </span>
         </el-dialog>
         <!-- 添加角色弹窗 -->
         <el-dialog :title="titles" :visible.sync="addDialogVisible" width="600px" :before-close="handleClose">
@@ -161,6 +168,7 @@ export default {
             if (res.code == "ok") {
               console.log(res.data, '数据来源(990)')
               this.moduleList = res.data
+              this.dialogVisible = true
             } else {
                 this.$message({
                     message: res.msg,
@@ -284,6 +292,11 @@ export default {
                 f.checked = mainMenu.checked;
             });
         });
+        if(mainMenu.functionList) {
+          mainMenu.functionList.forEach(c=>{
+            c.checked = mainMenu.checked;
+          })
+        }
       },
       subChange(subMenu) {
         //二级选中，自动勾选对应的一级
@@ -309,6 +322,31 @@ export default {
           f.checked = subMenu.checked;
         })
       },
+      subChanges(subMenu, id) {
+        let mainMenuList = this.moduleList
+        mainMenuList.forEach(m=>{
+          if(m.id == id) {
+            //找到父菜单了
+            var hasChecked = false;
+            m.functionList.forEach(c=>{
+                if (c.checked) {
+                    hasChecked = true;
+                }
+            })
+            //当前点击的子菜单所有同级菜单是否有点中的，如果没有需要把父级取消勾选
+            m.checked = hasChecked;
+          }
+        });
+      },
+      dianji(item) {
+        console.log(item)
+        let mainMenuList = this.moduleList
+        mainMenuList.forEach(m=>{
+          if(m.id == item.id) {
+            m.useState = !m.useState
+          }
+        });
+      },
       saveList() {
         this.dialogVisible = false
         console.log(this.moduleList)
@@ -342,7 +380,16 @@ export default {
 </script>
 
 <style scoped>
+  ul {
+    padding: 0 0 0 30px;
+    margin: 0;
+  }
   li {
     list-style: none;
   }
+  .quanxians {
+    height: 400px;
+    width: 100%;
+    overflow: auto;
+  }
 </style>