From b8c062434216ec7959f566c7c821223145795182 Mon Sep 17 00:00:00 2001
From: pengjun <158915633@qq.com>
Date: Mon, 26 Feb 2024 17:07:16 +0800
Subject: [PATCH] menuinfo

---
 .../customerOrg/customerOrgTree.vue           |  22 +-
 src/components/menuPage/MenuPageEdit.vue      |  17 +-
 src/components/menuPage/MenuPageSet.vue       | 240 ++++++++++++++++++
 src/router/index.js                           |   1 -
 src/store/index.js                            |  14 +-
 src/utlis/tree.js                             |   5 +
 src/views/Home.vue                            |   2 +-
 src/views/menuPage/menuPage.vue               |   2 +-
 src/views/user-list/Role.vue                  |  57 +++--
 src/views/user-list/UserList.vue              |  36 ++-
 10 files changed, 370 insertions(+), 26 deletions(-)
 create mode 100644 src/components/menuPage/MenuPageSet.vue

diff --git a/src/components/customerOrg/customerOrgTree.vue b/src/components/customerOrg/customerOrgTree.vue
index 5f63cf1..2b798fc 100644
--- a/src/components/customerOrg/customerOrgTree.vue
+++ b/src/components/customerOrg/customerOrgTree.vue
@@ -7,7 +7,23 @@
       <el-tree :data="customerOrg.customerOrgTree" :props="customerOrg.treeprops" 
         node-key="id" :filter-node-method="filterNode"
         :default-expanded-keys="customerOrg.defaultExpandedKeys" 
-        @node-click="treeclick" highlight-current ref="customerOrgTree"/>
+        @node-click="treeclick" highlight-current ref="customerOrgTree">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <div>
+            <span class="treeicons">
+              <!-- <i
+                class="el-icon-document-remove"
+                v-if="data.parentId == null"
+              ></i> -->
+              <img style="width:20px;height:20px;vertical-align: sub;" src="@/assets/images/order.png" v-if="data.parentId == null"/>
+            </span>
+            <span
+              :class="data.parentId == null ? 'maxtitle' : 'mintitle'"
+              >{{ node.label }}
+            </span>
+          </div>
+        </span>
+      </el-tree>
     </div>
   </div>
 </template>
@@ -164,4 +180,8 @@ export default {
 </script>
 <style scoped>
 @import "../../assets/css/global.css";
+.treeicons {
+  font-size: 20px;
+  margin-right: 5px;
+}
 </style>
diff --git a/src/components/menuPage/MenuPageEdit.vue b/src/components/menuPage/MenuPageEdit.vue
index 605d417..7551e4a 100644
--- a/src/components/menuPage/MenuPageEdit.vue
+++ b/src/components/menuPage/MenuPageEdit.vue
@@ -35,7 +35,7 @@
               </el-cascader>
             </el-form-item>
           </el-col>
-          <el-col :span="16">
+          <el-col :span="8">
             <el-form-item label="节点名称" prop="displayName">
               <el-input
                 class="enterToTab"
@@ -44,6 +44,15 @@
               />
             </el-form-item>
           </el-col>
+          <el-col :span="8">
+            <el-form-item label="排序" prop="displayOrder">
+              <el-input type="number"
+                class="enterToTab"
+                v-model="form.displayOrder"
+                placeholder="请输入排序值"
+              />
+            </el-form-item>
+          </el-col>          
         </el-row>
         <el-row>
           <el-col :span="8">
@@ -76,7 +85,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="启用" prop="isActive" label-width="56px">
+            <el-form-item label="启用" prop="isActive">
               <!--
               <el-radio v-model="form.isActive" label="Y">启用</el-radio>
               <el-radio v-model="form.isActive" label="N">停用</el-radio>              
@@ -181,6 +190,7 @@ export default {
 
       form: {
         displayName: "",
+        displayOrder:null,
         routeUrl: null,
         iconName: null,
         simpleCode: "QXGL",
@@ -364,6 +374,7 @@ export default {
         delete body.creationTime;
         delete body.lastModifierName;
         delete body.lastModificationTime;
+        if(!body.displayOrder) delete body.displayOrder
 
         if (typeof body.parentId === "string") {
           if (!body.parentId || body.parentId.length < 1) {
@@ -377,7 +388,7 @@ export default {
           }
         }
 
-        console.log("body", body, "this.form", this.form);
+        // console.log("body", body, "this.form", this.form);
 
         if (!this.form.id) {
           //id为空则新增
diff --git a/src/components/menuPage/MenuPageSet.vue b/src/components/menuPage/MenuPageSet.vue
new file mode 100644
index 0000000..0d8a49b
--- /dev/null
+++ b/src/components/menuPage/MenuPageSet.vue
@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <div style="margin:2px 2px 5px 2px;display: flex;justify-content:space-between;">
+      <div>
+        <el-input  placeholder="输入关键字进行过滤" v-model="filterText" size="small" />
+      </div>
+      <div v-show="isRole">
+        <el-button @click="btnSubmit" size="small">提交</el-button>
+      </div>
+    </div>
+    <div style="overflow: scroll;height:600px;">
+      <el-tree :data="menuInfoView" :props="customerOrg.treeprops" 
+        node-key="id" :filter-node-method="filterNode" show-checkbox
+        default-expand-all 
+        :default-expanded-keys="customerOrg.defaultExpandedKeys"         
+        @check-change="handleCheckChange" highlight-current ref="customerOrgTree"/>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapMutations } from "vuex";
+import { getapi, postapi, putapi, deletapi } from "@/api/api";
+import { tcdate,arrayExistObj } from "../../utlis/proFunc";
+import { getTreeNode, getTreeAllChildIdsByNode, getTreeAllChildIdsById, getTreePids } from "../../utlis/tree";
+
+
+export default {
+  components: {},
+  props:["params"], // params = { opra: role/user 用户/角色, idVal: roleId/userId}
+  data() {
+    return {
+      menuInfoView:[], //显示菜单
+      menuInfoSet:[],  //设置菜单
+      checkedKeys:[],  //勾选的菜单节点ID
+      filterText:''
+    };
+  },
+ 
+  computed: {
+    ...mapState(["window", "dataTransOpts", "customerOrg" ]),
+
+    // 是否角色
+    isRole(){      
+      let ret = true
+      if(this.params && this.params.opra == "user"){
+        ret = false
+      }
+      return ret      
+    },
+
+  },
+
+  //创建组件后
+  created() {    
+  },
+
+  //挂载组件完成
+  mounted() {
+    
+  },
+
+  methods: {
+    ...mapMutations(["setData"]),
+
+    // 初始化数据，获取菜单列表树信息 及角色的授权菜单
+    initData(roleOrUser_Id) {        
+      getapi("/api/app/menuinfo/getmenuinfotreelist").then((res) => {
+        if(res.code != -1){
+          this.menuInfoView = res.data             
+          tcdate(this.menuInfoView);
+          // 如果不是角色，则不允许编辑权限
+          if(!this.isRole){
+            this.setTreeDisabled(this.menuInfoView,"treeChildren")
+          }
+          if(this.isRole){
+            return getapi(`/api/app/rolemenuinfo/getrolemenuinfolist?RoleId=${roleOrUser_Id}`) //
+          }else{
+            return getapi(`/api/app/menuinfo/getmymenuinfolistinuser?UserId=${roleOrUser_Id}`)           
+          }
+        }
+      }).then(res =>{
+        if(res && res.code != -1){
+          // 勾选赋值
+          this.menuInfoSet = res.data
+          this.setCheckedKeys()
+        }
+      }).catch(err =>{
+        console.log(err)
+      });
+    },
+
+    // 用户只允查看权限，暂不允许修权限
+    setTreeDisabled(tree,childrenNodeName){
+      tree.forEach(e => {
+        e.disabled = true
+        if(e[childrenNodeName]) this.setTreeDisabled(e[childrenNodeName],childrenNodeName)
+      });
+    },
+
+    // 初始设置菜单勾选
+    setCheckedKeys(){  
+      this.checkedKeys = [] 
+      if(!this.isRole){
+        this.menuInfoSet.forEach(e => {
+          e.menuInfoId = e.id
+        });
+      }
+      this.menuInfoSet.forEach(e => {
+        // 无下级节点时，勾选；有下级节点时，所有下级节点全部勾选时，才勾选
+        let node = getTreeNode(this.menuInfoView, "treeChildren", "id", e.menuInfoId)
+        if(node.treeChildren){
+          //获取所有下级节点值
+          let menuInfoIds = getTreeAllChildIdsByNode(node, "treeChildren", "id")
+          let count = 0
+          menuInfoIds.forEach(item => {
+            let lfind = arrayExistObj(this.menuInfoSet,"menuInfoId",item)
+            if(lfind > -1) count++
+          });
+          if(menuInfoIds.length == count) this.checkedKeys.push(e.menuInfoId)
+        }else{
+          this.checkedKeys.push(e.menuInfoId)
+        }
+      });      
+      this.$refs["customerOrgTree"].setCheckedKeys(this.checkedKeys);
+    },
+
+    //提交按钮（保存角色权限）
+    btnSubmit(){
+      let body = {
+        roleId:this.dataTransOpts.tableS.adp_roles.id,
+        menuInfoIds:[]
+      }
+
+      this.menuInfoSet.forEach(e => {
+        if(e.menuInfoId) body.menuInfoIds.push(e.menuInfoId)
+      });
+   
+
+      postapi('/api/app/rolemenuinfo/setrolemenuinfo',body).then(res =>{
+        if(res.code != -1){
+          console.log('操作成功！')
+        }
+      })
+
+    },
+
+    //勾选节点
+    handleCheckChange(data, checked, indeterminate) {
+      console.log('data, checked, indeterminate,this.menuInfoSet',data, checked, indeterminate,this.menuInfoSet);
+      let lfind = 0,count = 0
+      if(checked){   
+        // 获取所有上级节点
+        let pids = getTreePids(this.menuInfoView, "treeChildren", "parentId", "id", data.id)
+        pids.push(data.id) //添加自身节点
+        pids.forEach(e => {
+          if(e){
+            lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',e)
+            if(lfind == -1) this.menuInfoSet.push({ menuInfoId:e })
+          }
+        }); 
+      }else if(!indeterminate){
+        // 取消授权时        
+        lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',data.id)
+        if(lfind > -1) this.menuInfoSet.splice(lfind,1)
+        // 如果有下级节点，则取消所有下级节点的授权      
+        // let node = getTreeNode(this.menuInfoView, "treeChildren", "id", data.id)
+        // if(node.treeChildren){       
+        //   let childs = getTreeAllChildIdsByNode(node, "treeChildren", "id")    
+        //   childs.forEach(id => {
+        //     lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',id)
+        //     if(lfind > -1) this.menuInfoSet.splice(lfind,1)
+        //   });
+        // }
+
+        // 所有平级节点都被取消时，上级节点也应取消
+        let parentIds = getTreePids(this.menuInfoView, "treeChildren", "parentId", "id", data.id)
+        parentIds.forEach(e => {
+          if(e){
+            let pNode = getTreeNode(this.menuInfoView, "treeChildren", "id", e)
+            count = pNode["treeChildren"].length
+            pNode["treeChildren"].forEach(item => {
+              lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',item.id)
+              if(lfind == -1) count--
+            });
+            if(count == 0){
+              lfind = arrayExistObj(this.menuInfoSet,'menuInfoId',e)
+              if(lfind > -1) this.menuInfoSet.splice(lfind,1)
+            }
+          }
+        }); 
+      }
+      console.log('this.menuInfoSet',this.menuInfoSet)
+    },
+
+    //树过滤
+    filterNode(value, data) {
+      //console.log(value,data)
+      if (!value) return true;
+      return data['displayName'].indexOf(value) !== -1 || data['simpleCode'].indexOf(value.toUpperCase()) !== -1;
+    }
+  },
+
+  watch: {
+    // 刷新菜单
+    "dataTransOpts.refresh.role_menu_info.M":{
+      immediate:true,
+      handler(newVal, oldVal) {        
+        let roleOrUser_Id
+        if(this.isRole){
+          roleOrUser_Id = this.dataTransOpts.tableS.adp_roles.id
+        }else{
+          roleOrUser_Id = this.dataTransOpts.tableS.adp_users.id
+        }
+        console.log(`watch ${this.isRole ? '角色':'用户'} 权限 newVal:${newVal} oldVal:${oldVal} registerCheckId: ${roleOrUser_Id}`); 
+
+        this.initData(roleOrUser_Id)
+      }
+    },
+
+    "customerOrg.treeCurrentNodekey"(newVal,oldVal){
+      //console.log('watch:customerOrg.treeCurrentNodekey',newVal,oldVal)
+      if(newVal && newVal != oldVal){
+        this.$nextTick(() => {
+          this.$refs['customerOrgTree'].setCurrentKey(newVal);
+        })
+      }
+    }, 
+
+    "filterText"(newVal,oldVal){ //过滤菜单
+      this.$refs['customerOrgTree'].filter(newVal);
+    }
+  },
+ 
+};
+</script>
+<style scoped>
+@import "../../assets/css/global.css";
+@import "../../assets/css/global_table.css";
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b12f898..3add664 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,7 +15,6 @@ const routes = [{
     {
         path: "/login",
         name: "login",
-
         component: () =>
             import ("../views/login/Login.vue"),
     },
diff --git a/src/store/index.js b/src/store/index.js
index 7886a08..96f99b0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -272,6 +272,8 @@ export default new Vuex.Store({
     dataTransOpts: {
       //强制刷新（如触发数据刷新的ID值没有变化时，但也想强制刷新数据： S--single 单记录刷新，M--more 多记录刷新）    
       refresh: {
+        adp_roles: { S: 0, M: 0 }, // 角色
+        adp_users: { S: 0, M: 0 }, // 用户
         asbitem: { S: 0, M: 0 }, // 组合项目
         customer_org_group: { S: 0, M: 0 }, // 单位分组
         menu_info: { S: 0, M: 0 }, // 菜单与页面
@@ -279,26 +281,33 @@ export default new Vuex.Store({
         register_asbitem: { S: 0, M: 0 },  // 体检人员登记的项目（合并前）
         register_check: { S: 0, M: 0 },   // 体检人员登记的项目（合并后）
         register_check_item: { S: 0, M: 0 },   // 体检人员登记的明细项目
+        role_menu_info: { S: 0, M: 0 }, // 角色对应的菜单
       },
       //表当前数据（单条记录 S--single）
       tableS: {
+        adp_roles: { id: '' }, // 角色
+        adp_users: { id: '' }, // 用户
         asbitem: { id: '' }, // 组合项目
         customer_org_group: { id: '' }, // 单位分组
         menu_info: { id: '' }, // 菜单与页面
         patient_register: { id: '' },
         register_asbitem: { id: '' },
         register_check: { id: '' },
-        register_check_item: { id: '' }
+        register_check_item: { id: '' },
+        role_menu_info: { id: '' }, // 角色对应的菜单
       },
       //表当前数据（多条记录 M--more）
       tableM: {
+        adp_roles: [], // 角色
+        adp_users: [], // 用户
         asbitem: [], // 组合项目
         customer_org_group: [], // 单位分组
         menu_info: [], // 菜单与页面
         patient_register: [],
         register_asbitem: [],
         register_check: [],
-        register_check_item: []
+        register_check_item: [],
+        role_menu_info: [], // 角色对应的菜单
       }
     },
 
@@ -306,6 +315,7 @@ export default new Vuex.Store({
     dialogWin: {
       PatientRegisterEditItemBatch: false, //批量调整项目
       PatientRegisterEditGroupBatch: false, //批量调整分组
+      MenuPageSet:false, // 设置角色菜单权限
     }
 
   },
diff --git a/src/utlis/tree.js b/src/utlis/tree.js
index 18ad64e..63e8d50 100644
--- a/src/utlis/tree.js
+++ b/src/utlis/tree.js
@@ -1,6 +1,11 @@
 //树对象相关操作 目前只支持单主键操作
 
 //将list数据，生成tree
+// dataSource:列表数据资源
+// childNodeName：子节点名称
+// pidName：父ID列名
+// idName：id列名
+// pidVal：父id初始值
 function madeTree(dataSource, childNodeName, pidName, idName, pidVal) {
     if (!dataSource || dataSource.length < 1) return [];
     let trees = []
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 681b41b..d3094ee 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -275,7 +275,7 @@
                   >体检单位设置</el-dropdown-item
                 >
                 <el-dropdown-item
-                  :command="beforeHandleCommand('examinationregistration', 'customerOrgGroupe')"
+                  :command="beforeHandleCommand('examinationregistration', 'customerOrgGroup')"
                   class="dropdownmain"
                   >单位分组设置</el-dropdown-item
                 >
diff --git a/src/views/menuPage/menuPage.vue b/src/views/menuPage/menuPage.vue
index 08b334a..b95d667 100644
--- a/src/views/menuPage/menuPage.vue
+++ b/src/views/menuPage/menuPage.vue
@@ -30,8 +30,8 @@
   </template>
   <script>
   import { mapState } from "vuex";
-  import MenuPageTree from "../../components/menuPage/MenuPageTree.vue";
   import MenuPageEdit from "../../components/menuPage/MenuPageEdit.vue";
+  import MenuPageTree from "../../components/menuPage/MenuPageTree.vue";
   export default {
     components: {
       MenuPageTree,
diff --git a/src/views/user-list/Role.vue b/src/views/user-list/Role.vue
index 298897e..62cca46 100644
--- a/src/views/user-list/Role.vue
+++ b/src/views/user-list/Role.vue
@@ -7,7 +7,7 @@
       >
       <el-table
         :data="tableData"
-        style="width: 100%; margin-top: 10px"
+        style="width: 100%; margin-top: 10px;"
         border=""
         :height="tableHeight"
       >
@@ -27,6 +27,9 @@
             <el-button type="primary" @click="authority(scope.row)"
               >设置权限</el-button
             >
+            <el-button type="primary" @click="btnMenuPageSet(scope.row)"
+              >菜单权限</el-button
+            >
             <el-button
               type="danger"
               icon="el-icon-delete"
@@ -143,6 +146,17 @@
         </span>
       </el-dialog>
     </el-card>
+
+    <!--设置菜单权限-->
+    <el-dialog
+        title="设置角色菜单权限"
+        :visible.sync="dialogWin.MenuPageSet"
+        width="300px"
+        :close-on-click-modal="false"
+      >
+      <MenuPageSet />
+    </el-dialog>
+    
   </div>
 </template>
 <style></style>
@@ -156,11 +170,16 @@ import {
   permissionconntro,
 } from "@/request/ruquset";
 import { getapi } from "@/api/api";
+
+import { mapState } from "vuex";
+import MenuPageSet from "../../components/menuPage/MenuPageSet.vue";
+
 export default {
+  components: {
+    MenuPageSet,
+  },
   data() {
     return {
-      tableHeight: window.innerHeight - 220, //表格动态高度
-      screenHeight: window.innerHeight, //内容区域高度
       allChecked: false, //所有权限
       allIndeterminate: false,
       allCheckedLength: 0,
@@ -192,26 +211,25 @@ export default {
       currenItem: [],
       title: "",
       activeTab: "0",
+      choosedRoleId:'', //当前选中（操作的角色id）
     };
   },
+
+  computed: {
+    ...mapState(["window", "dialogWin", "dataTransOpts", "customerOrg" ]),
+    tableHeight(){
+      return this.window.pageHeight - 200
+    }
+  },
+
   created() {
     this.getbolkeall();
   },
   mounted() {
-    window.onresize(() => {
-      return (() => {
-        // window.innerHeight:浏览器的可用高度
-        window.screenHeight = window.innerHeight;
-        this.screenHeight = window.screenHeight;
-      })();
-    });
+    
   },
   watch: {
-    // 监听screenHeight从而改变table的高度
-    screenHeight(val) {
-      this.screenHeight = val;
-      this.tableHeight = this.screenHeight - 220;
-    },
+    
   },
   methods: {
     //新增角色弹框
@@ -450,6 +468,15 @@ export default {
         console.log(res);
       });
     },
+
+    // 设置菜单权限
+    btnMenuPageSet(row){
+      this.dataTransOpts.tableS.adp_roles.id = row.id
+      this.dialogWin.MenuPageSet = true
+      setTimeout(() => {
+        this.dataTransOpts.refresh.role_menu_info.M++
+      }, 20);      
+    },
   },
 };
 </script>
diff --git a/src/views/user-list/UserList.vue b/src/views/user-list/UserList.vue
index 596ae69..f2b8aba 100644
--- a/src/views/user-list/UserList.vue
+++ b/src/views/user-list/UserList.vue
@@ -69,6 +69,9 @@
                   <el-button type="primary" @click="editpassword(scope.row)"
                   size="small">修改密码</el-button
                   >
+                  <el-button type="primary" @click="btnMenu(scope.row)"
+                  size="small">菜单权限</el-button
+                  >
                 </template>
               </el-table-column>
             </el-table>
@@ -483,6 +486,16 @@
           >
         </span>
       </el-dialog>
+
+      <!--查看用户菜单权限-->
+      <el-dialog
+          title="查看用户菜单权限"
+          :visible.sync="dialogWin.MenuPageSet"
+          width="300px"
+          :close-on-click-modal="false"
+        >
+        <MenuPageSet :params="dialogParams.MenuPageSet"/>
+      </el-dialog>
     </el-card>
   </div>
 </template>
@@ -507,6 +520,8 @@ import { mapState } from "vuex";
 import { isValid } from "@/utlis/validate";
 import { getapi, postapi } from "@/api/api";
 import { tcdate, deepCopy ,objCopy } from "../../utlis/proFunc";
+import MenuPageSet from "../../components/menuPage/MenuPageSet.vue";
+  
 
 // let validatePassword = (rule, value, callback) => {
 //   var reg1 =
@@ -520,8 +535,11 @@ import { tcdate, deepCopy ,objCopy } from "../../utlis/proFunc";
 //     callback();
 //   }
 // };
-let validatePassword = /^[a-zA-Z0-9@\$\^\.\*\\?]\{6,15}$/;
+// let validatePassword = /^[a-zA-Z0-9@\$\^\.\*\\?]\{6,15}$/;
 export default {
+  components: {
+    MenuPageSet,
+  },
   data() {
     return {
       treedata: [],
@@ -553,6 +571,10 @@ export default {
       option: [],
       crdetcascader: [], //绑定组织显示
 
+      dialogParams:{
+        MenuPageSet:{opra:'role'} //默认角色
+      },
+
       //表单校验
       rules: {
         password: [
@@ -645,7 +667,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["window","changepassword"]),
+    ...mapState(["window","dialogWin", "dataTransOpts", "changepassword"]),
   },
   created() {
     this.password = this.changepassword;
@@ -705,6 +727,16 @@ export default {
       this.passwordid = row.id;
       this.usersName = row.userName;
     },
+    // 查看用户菜单权限
+    btnMenu(row){
+      this.dialogParams.MenuPageSet.opra = 'user'
+      this.dataTransOpts.tableS.adp_users.id = row.id
+      this.dialogWin.MenuPageSet = true
+      setTimeout(() => {
+        this.dataTransOpts.refresh.role_menu_info.M++
+      }, 20);      
+    },
+
     //新增选择的
     ischesc() {
       console.log("333", this.$refs.tree.getCheckedKeys(true));