Browse Source

权限菜单控制

lilei 2 years ago
parent
commit
d76cc95cb3
2 changed files with 141 additions and 43 deletions
  1. 101 32
      src/views/power/role/menuModal.vue
  2. 40 11
      src/views/power/role/roleList.vue

+ 101 - 32
src/views/power/role/menuModal.vue

@@ -18,16 +18,17 @@
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
         >
-          <div style="height: 500px;overflow-y: scroll;">
+         <div style="height: 500px;overflow-y: auto;">
             <a-tree
-              checkable
-              @check="onCheck"
-              @expand="onExpand"
-              :expandedKeys="expandedKeys"
-              :autoExpandParent="autoExpandParent"
-              v-model="checkedKeys"
-              :treeData="treeData"
-            />
+            checkable
+            :selectable="false"
+            @check="onCheck"
+            @expand="onExpand"
+            :expandedKeys="expandedKeys"
+            :autoExpandParent="autoExpandParent"
+            v-model="checkedKeys"
+            :treeData="treeData"
+          />
           </div>
           <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
             <a-button type="primary" id="roleMenuEdit-save" @click="handleSubmit()" :style="{ marginRight: '8px' }">保存</a-button>
@@ -65,11 +66,20 @@ export default {
     return {
       spinning: false,
       treeData: [],
+      priceOptions:[
+        {label:'售价',value:'salesPrice'},
+        {label:'成本价',value:'costPrice'},
+        {label:'省级价',value:'provincePrice'},
+        {label:'市级价',value:'cityPrice'},
+        {label:'特约价',value:'specialPrice'}
+      ],
       titleText: '',
       expandedKeys: [],
       autoExpandParent: true,
       checkedKeys: [],
+      halfCheckedKeys: [],
       checkedData: [],
+      authPriceData:[],
       isshow: this.visible,
       formItemLayout: {
         labelCol: { span: 6 },
@@ -77,16 +87,18 @@ export default {
       },
       form: {},
       rules: {},
+      authType: '1',
       id: '' // 角色id
     }
   },
   methods: {
     onExpand (expandedKeys) {
       this.expandedKeys = expandedKeys
-      this.autoExpandParent = false
+      // this.autoExpandParent = false
     },
     onCheck (checkedKeys, info) {
-      this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
+      console.log(checkedKeys, info.halfCheckedKeys)
+      this.halfCheckedKeys = info.halfCheckedKeys
       this.checkedKeys = checkedKeys
     },
     // 保存提交
@@ -94,12 +106,14 @@ export default {
       const _this = this
       this.$refs.ruleForm.validate(valid => {
         if (valid) {
-          if (this.checkedData.length == 0) {
+          if (this.checkedKeys.length == 0) {
             return this.$message.warning('请先选择菜单')
           }
-          const arr = this.checkedData.join(',')
+          const arr = [...this.checkedKeys, ...this.halfCheckedKeys, ...this.checkedData].filter((x, index,self)=>self.indexOf(x)===index) 
+          console.log(arr,this.checkedData)
+
           _this.spinning = true
-          addMenuPower({ id: this.id, menuIds: arr }).then(res => {
+          addMenuPower({ id: this.id, menuIds: arr.join(',') }).then(res => {
             if (res.status == 200) {
               _this.$message.success(res.message)
               _this.$emit('refresh')
@@ -124,23 +138,80 @@ export default {
       this.checkedKeys = []
       this.expandedKeys = []
     },
-    // 选中已勾选菜单
+    isPriceNode(node){
+      const a = node.code.split('_')
+      const c = this.priceOptions.find(item => item.value == a[a.length-1])
+      return c
+    },
+    // 查找叶子节点
     findLeaf (data, arr) {
+      const _this = this
       for (let i = 0; i < data.length; i++) {
         const node = data[i]
-        if (node.children) {
+        if (node.children && node.children.length) {
           this.findLeaf(node.children, arr)
         } else {
+          if(_this.isPriceNode(node)){
+            data.splice(i,1)
+          }else{
+            const hasNode = arr.find(item => item == node.id)
+            const hasCheck = _this.checkedKeys.find(item => item == node.id)
+            if (hasNode && !hasCheck) {
+              this.expandedKeys.push(node.id)
+              this.checkedKeys.push(node.id)
+            }
+          }
+        }
+      }
+    },
+    // 查找有价格权限的菜单
+    findPrice(data, arr){
+      const _this = this
+      for (let i = 0; i < data.length; i++) {
+        const node = data[i]
+        if(!_this.isPriceNode(node)){
+          // 删除此节点
+          node.checkable = false
+          if(!node.children||node.children.length==0){
+            data.splice(i,1)
+          }
+        }else{
           node.class = 'leafNode'
-          const hasNode = arr.find(item => {
-            return item == node.id
-          })
-          if (hasNode) {
-            this.expandedKeys.push(node.id)
-            this.checkedKeys.push(node.id)
+          _this.expandedKeys.push(node.id)
+          // 已选节点勾选
+          const hasNode = arr.find(item => item == node.id)
+          const hasCheck = _this.checkedKeys.find(item => item == node.id)
+          if (hasNode && !hasCheck) {
+            _this.checkedKeys.push(node.id)
           }
         }
+
+        if (node.children && node.children.length) {
+          _this.findPrice(node.children, arr)
+        }
       }
+    },
+    pageInit(){
+      this.id = this.nowData.role.id
+      this.titleText = (this.nowData.type == 1 ? '功能权限分配': '价格权限分配') + '(' + this.nowData.role.name + ')'
+      // 已选节点
+      const arr = this.nowData.role.menuIds
+      // 权限类型, 1功能权限设置,0 价格权限设置
+      this.authType = this.nowData.type
+      this.checkedData = arr ? arr.split(',') : []
+      // 找出叶子节点
+      const treeData = this.nowData.allMenuList
+      this.expandedKeys.push(treeData.id)
+      if(this.authType == 1){
+        this.findLeaf(treeData, this.checkedData)
+      }
+      if(this.authType == 0){
+        this.findPrice(treeData, this.checkedData)
+      }
+      this.checkedData = this.checkedData.filter(item => !this.checkedKeys.includes(item))
+      // console.log(this.checkedData)
+      // console.log(this.checkedKeys)
+      this.treeData = treeData
     }
   },
   watch: {
@@ -160,15 +231,7 @@ export default {
     nowData: {
       handler (newValue, oldValue) {
         if (this.isshow && newValue) {
-          this.id = this.nowData.role.id
-          this.titleText = '分配权限' + '(' + this.nowData.role.name + ')'
-          // 已选节点
-          const arr = this.nowData.role.menuIds
-          this.checkedData = arr ? arr.split(',') : []
-          // 找出叶子节点
-          this.findLeaf(this.nowData.allMenuList, this.checkedData)
-          this.treeData = this.nowData.allMenuList
-          console.log(this.treeData)
+          this.pageInit()
         }
       },
       deep: true
@@ -177,7 +240,8 @@ export default {
 }
 </script>
 
-<style >
+<style lang="less">
+.roleMenuEdit-modal{
   .ant-modal-title{
     padding-right: 30px;
   }
@@ -202,5 +266,10 @@ export default {
   }
   .leafNode{
     display: inline-block;
+    .ant-tree-node-content-wrapper{
+      color: red;
+    }
   }
+}
+  
 </style>

+ 40 - 11
src/views/power/role/roleList.vue

@@ -59,14 +59,42 @@
         </template>
         <!-- 操作 -->
         <span slot="action" slot-scope="text, record">
-          <a-icon type="setting" title="菜单权限" v-if="$hasPermissions('M_power_role_menu')" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="openMenuModal(record)" />
-          <a-icon type="edit" title="编辑" v-if="$hasPermissions('B_power_role_edit')" :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}" @click="handleEdit(record)" />
-          <a-icon
-            type="delete"
-            title="删除"
-            :style="{fontSize: '20px',color: '#f00',padding: '0 10px'}"
-            v-if="!record.isEnable && $hasPermissions('B_power_role_del')"
-            @click="delect(record)" />
+          <a-button
+              size="small"
+              type="link"
+              class="button-info"
+              v-if="$hasPermissions('M_power_role_menu')"
+              @click="openMenuModal(record,1)"
+            >
+            功能权限
+            </a-button>
+            <a-button
+              size="small"
+              type="link"
+              class="button-info"
+              v-if="$hasPermissions('M_power_role_menu')"
+              @click="openMenuModal(record,0)"
+            >
+            价格权限
+            </a-button>
+            <a-button
+              size="small"
+              type="link"
+              class="button-info"
+              v-if="$hasPermissions('B_power_role_edit')"
+              @click="handleEdit(record)"
+            >
+            编辑
+            </a-button>
+            <a-button
+              size="small"
+              type="link"
+              class="button-error"
+              v-if="!record.isEnable && $hasPermissions('B_power_role_del')"
+              @click="delect(record)"
+            >
+            删除
+            </a-button>
           <span v-if="!$hasPermissions('M_power_role_menu') && !$hasPermissions('B_power_role_edit') && (record.isEnable && !$hasPermissions('B_power_role_del'))">--</span>
         </span>
       </s-table>
@@ -168,17 +196,18 @@ export default {
       this.itemData = {}
     },
     // 打开分配权限弹窗
-    openMenuModal (row) {
-      this.getMenuList(row.id)
+    openMenuModal (row, type) {
+      this.getMenuList(row.id, type)
     },
     // 获取菜单树列表
-    getMenuList (id) {
+    getMenuList (id,type) {
       const _this = this
       getMenuList({
         id: id
       }).then(res => {
         if (res.status == 200) {
           _this.menuData = res.data
+          _this.menuData.type = type
           this.showMenuModal = true
         }
       })