|
@@ -18,25 +18,25 @@
|
|
|
:label-col="formItemLayout.labelCol"
|
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
|
>
|
|
|
- <div style="display:flex;justify-content: flex-end;align-items: center;" v-if="authType==0">
|
|
|
- <div style="width:270px;text-align: right;flex:1;">快捷全选:</div>
|
|
|
- <div style="padding:0 10px;">
|
|
|
- <a-checkbox-group :value="authAllPrice" :options="priceOptions" @change="onPriceChange" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="height: 500px;overflow-y: auto;">
|
|
|
+ <div style="display:flex;justify-content: flex-end;align-items: center;" v-if="authType==0">
|
|
|
+ <div style="width:270px;text-align: right;flex:1;">快捷全选:</div>
|
|
|
+ <div style="padding:0 10px;">
|
|
|
+ <a-checkbox-group :value="authAllPrice" :options="priceOptions" @change="onPriceChange" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 500px;overflow-y: auto;">
|
|
|
<a-tree
|
|
|
- checkable
|
|
|
- :selectable="false"
|
|
|
- @check="onCheck"
|
|
|
- @expand="onExpand"
|
|
|
- :expandedKeys="expandedKeys"
|
|
|
- :autoExpandParent="autoExpandParent"
|
|
|
- v-model="checkedKeys"
|
|
|
- :treeData="treeData"
|
|
|
- >
|
|
|
- <a-icon v-if="authType == 0" slot="switcherIcon" type="file" />
|
|
|
- </a-tree>
|
|
|
+ checkable
|
|
|
+ :selectable="false"
|
|
|
+ @check="onCheck"
|
|
|
+ @expand="onExpand"
|
|
|
+ :expandedKeys="expandedKeys"
|
|
|
+ :autoExpandParent="autoExpandParent"
|
|
|
+ v-model="checkedKeys"
|
|
|
+ :treeData="treeData"
|
|
|
+ >
|
|
|
+ <a-icon v-if="authType == 0" slot="switcherIcon" type="file" />
|
|
|
+ </a-tree>
|
|
|
</div>
|
|
|
<a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;margin: 18px 0 0;">
|
|
|
<a-button id="roleMenuEdit-cancel" :style="{ marginRight: '10px' }" @click="isshow=false">取消</a-button>
|
|
@@ -74,23 +74,23 @@ export default {
|
|
|
return {
|
|
|
spinning: false,
|
|
|
treeData: [],
|
|
|
- priceOptions:[],
|
|
|
+ priceOptions: [],
|
|
|
titleText: '',
|
|
|
expandedKeys: [],
|
|
|
autoExpandParent: true,
|
|
|
checkedKeys: [],
|
|
|
halfCheckedKeys: [],
|
|
|
checkedData: [],
|
|
|
- authPriceData:[],
|
|
|
+ authPriceData: [],
|
|
|
isshow: this.visible,
|
|
|
formItemLayout: {
|
|
|
labelCol: { span: 6 },
|
|
|
wrapperCol: { span: 16 }
|
|
|
},
|
|
|
authAllPrice: [],
|
|
|
- leafNode:[],
|
|
|
- checkLeafNode:[],
|
|
|
- priceCheckNode:[],
|
|
|
+ leafNode: [],
|
|
|
+ checkLeafNode: [],
|
|
|
+ priceCheckNode: [],
|
|
|
form: {},
|
|
|
rules: {},
|
|
|
authType: '1',
|
|
@@ -111,52 +111,52 @@ export default {
|
|
|
info.checkedNodes.map(item => {
|
|
|
const node = item.data.props
|
|
|
const a = node.code.split('_')
|
|
|
- this.checkLeafNode.push({pr:a[a.length-1],id:node.id})
|
|
|
+ this.checkLeafNode.push({ pr: a[a.length - 1], id: node.id })
|
|
|
})
|
|
|
this.hasAllSelect()
|
|
|
},
|
|
|
// 判断某分类是否全选
|
|
|
- hasAllSelect(){
|
|
|
+ hasAllSelect () {
|
|
|
// console.log(this.leafNode)
|
|
|
// console.log(this.checkLeafNode)
|
|
|
this.authAllPrice = []
|
|
|
this.priceOptions.map(item => {
|
|
|
const a = this.leafNode.filter(n => n.pr == item.value)
|
|
|
const b = this.checkLeafNode.filter(n => n.pr == item.value)
|
|
|
- if(a&&b&&a.length == b.length && !this.authAllPrice.find(d => d==item.value)){
|
|
|
+ if (a && b && a.length == b.length && !this.authAllPrice.find(d => d == item.value)) {
|
|
|
this.authAllPrice.push(item.value)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 全选某分类价格
|
|
|
- allSelect(data,authPrice,flag){
|
|
|
+ allSelect (data, authPrice, flag) {
|
|
|
const _this = this
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
const node = data[i]
|
|
|
const a = node.code.split('_')
|
|
|
- if(a[a.length-1] == authPrice){
|
|
|
+ if (a[a.length - 1] == authPrice) {
|
|
|
// 全选
|
|
|
- if(flag){
|
|
|
+ if (flag) {
|
|
|
_this.checkedKeys.push(node.id)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
// 取消
|
|
|
_this.checkedKeys = _this.checkedKeys.filter(item => item != node.id)
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
if (node.children && node.children.length) {
|
|
|
_this.allSelect(node.children, authPrice, flag)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- onPriceChange(val){
|
|
|
+ onPriceChange (val) {
|
|
|
// 全选
|
|
|
- if(this.authAllPrice.length < val.length){
|
|
|
- let tempVal = val.filter(item=>!this.authAllPrice.includes(item))
|
|
|
+ if (this.authAllPrice.length < val.length) {
|
|
|
+ const tempVal = val.filter(item => !this.authAllPrice.includes(item))
|
|
|
console.log(tempVal)
|
|
|
this.allSelect(this.nowData.allMenuList, tempVal[0], true)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
// 取消
|
|
|
- let tempVal = this.authAllPrice.filter(item=>!val.includes(item))
|
|
|
+ const tempVal = this.authAllPrice.filter(item => !val.includes(item))
|
|
|
this.allSelect(this.nowData.allMenuList, tempVal[0], false)
|
|
|
}
|
|
|
this.authAllPrice = val
|
|
@@ -170,13 +170,13 @@ export default {
|
|
|
const checkData = this.authType == 1 ? this.priceCheckNode : this.checkedData.filter(item => !this.priceCheckNode.includes(item))
|
|
|
// 功能权限时,首次半选节点拿不到值(this.halfCheckedKeys为空时),
|
|
|
// 此时通过从所有已选checkedData数据中过滤当前选择的功能菜单和已选的价格菜单,剩下的就是半选节点
|
|
|
- let halfCheckedKeys = this.halfCheckedKeys.length ? this.halfCheckedKeys : this.checkedData.filter(item => ![...this.checkedKeys,...checkData].includes(item))
|
|
|
+ let halfCheckedKeys = this.halfCheckedKeys.length ? this.halfCheckedKeys : this.checkedData.filter(item => ![...this.checkedKeys, ...checkData].includes(item))
|
|
|
// 功能权限没有选择任何菜单或价格权限时,halfCheckedKeys 半选节点为空
|
|
|
- if(this.checkedKeys.length==0 || this.authType == 0){
|
|
|
+ if (this.checkedKeys.length == 0 || this.authType == 0) {
|
|
|
halfCheckedKeys = []
|
|
|
}
|
|
|
// 最终保存的节点,包括当前已选的和半选的节点
|
|
|
- const arr = [...this.checkedKeys, ...halfCheckedKeys, ...checkData].filter((x, index,self)=>self.indexOf(x)===index)
|
|
|
+ const arr = [...this.checkedKeys, ...halfCheckedKeys, ...checkData].filter((x, index, self) => self.indexOf(x) === index)
|
|
|
console.log(arr, '--444--')
|
|
|
_this.spinning = true
|
|
|
addMenuPower({ id: this.id, menuIds: arr.join(',') }).then(res => {
|
|
@@ -204,9 +204,9 @@ export default {
|
|
|
this.checkedKeys = []
|
|
|
this.expandedKeys = []
|
|
|
},
|
|
|
- isPriceNode(node){
|
|
|
+ isPriceNode (node) {
|
|
|
const a = node.code.split('_')
|
|
|
- const c = this.priceOptions.find(item => item.value == a[a.length-1])
|
|
|
+ const c = this.priceOptions.find(item => item.value == a[a.length - 1])
|
|
|
return c
|
|
|
},
|
|
|
// 查找叶子节点
|
|
@@ -217,9 +217,9 @@ export default {
|
|
|
if (node.children && node.children.length) {
|
|
|
this.findLeaf(node.children, arr)
|
|
|
} else {
|
|
|
- if(_this.isPriceNode(node)){
|
|
|
- data.splice(i,1)
|
|
|
- }else{
|
|
|
+ if (_this.isPriceNode(node)) {
|
|
|
+ data.splice(i, 1)
|
|
|
+ } else {
|
|
|
node.class = 'isLeaf'
|
|
|
const hasNode = arr.find(item => item == node.id)
|
|
|
const hasCheck = _this.checkedKeys.find(item => item == node.id)
|
|
@@ -232,33 +232,33 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 查找有价格权限的菜单
|
|
|
- findPrice(data, arr){
|
|
|
+ findPrice (data, arr) {
|
|
|
const _this = this
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
const node = data[i]
|
|
|
const a = node.code.split('_')
|
|
|
// 已选节点勾选
|
|
|
const hasNode = arr.find(item => item == node.id)
|
|
|
- if(!_this.isPriceNode(node)){
|
|
|
+ if (!_this.isPriceNode(node)) {
|
|
|
// 删除此节点
|
|
|
node.checkable = false
|
|
|
- node.title = node.title.replace('(必选)','')
|
|
|
- if(!node.children||node.children.length==0){
|
|
|
- data.splice(i,1)
|
|
|
+ node.title = node.title.replace('(必选)', '')
|
|
|
+ if (!node.children || node.children.length == 0) {
|
|
|
+ data.splice(i, 1)
|
|
|
}
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
node.class = 'leafNode'
|
|
|
_this.expandedKeys.push(node.id)
|
|
|
// 默认回显已选节点
|
|
|
const hasCheck = _this.checkedKeys.find(item => item == node.id)
|
|
|
if (hasNode && !hasCheck) {
|
|
|
_this.checkedKeys.push(node.id)
|
|
|
- _this.checkLeafNode.push({pr:a[a.length-1],id:node.id})
|
|
|
+ _this.checkLeafNode.push({ pr: a[a.length - 1], id: node.id })
|
|
|
}
|
|
|
// 统计价格节点
|
|
|
const hasLeaf = _this.leafNode.find(item => item.id == node.id)
|
|
|
- if(!hasLeaf){
|
|
|
- _this.leafNode.push({pr:a[a.length-1],id:node.id})
|
|
|
+ if (!hasLeaf) {
|
|
|
+ _this.leafNode.push({ pr: a[a.length - 1], id: node.id })
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -268,12 +268,12 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 根据id查找是否价格菜单
|
|
|
- getPriceTreeNode(data, arr){
|
|
|
+ getPriceTreeNode (data, arr) {
|
|
|
const _this = this
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
const node = data[i]
|
|
|
- if(_this.isPriceNode(node)){
|
|
|
- // 默认回显已选节点
|
|
|
+ if (_this.isPriceNode(node)) {
|
|
|
+ // 默认回显已选节点
|
|
|
const hasCheck = _this.priceCheckNode.find(item => item == node.id)
|
|
|
// 已选节点勾选
|
|
|
const hasNode = arr.find(item => item == node.id)
|
|
@@ -286,9 +286,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- pageInit(){
|
|
|
+ pageInit () {
|
|
|
this.id = this.nowData.role.id
|
|
|
- this.titleText = (this.nowData.type == 1 ? '功能权限分配': '价格权限分配') + '(' + this.nowData.role.name + ')'
|
|
|
+ this.titleText = (this.nowData.type == 1 ? '功能权限分配' : '价格权限分配') + '(' + this.nowData.role.name + ')'
|
|
|
// 已选节点
|
|
|
const arr = this.nowData.role.menuIds
|
|
|
// 权限类型, 1功能权限设置,0 价格权限设置
|
|
@@ -303,33 +303,32 @@ export default {
|
|
|
this.getPriceTreeNode(treeData, this.checkedData)
|
|
|
|
|
|
// 功能权限设置
|
|
|
- if(this.authType == 1){
|
|
|
+ if (this.authType == 1) {
|
|
|
this.findLeaf(treeData, this.checkedData)
|
|
|
}
|
|
|
// 价格权限设置
|
|
|
- if(this.authType == 0){
|
|
|
+ if (this.authType == 0) {
|
|
|
this.findPrice(treeData, this.checkedData)
|
|
|
this.hasAllSelect()
|
|
|
}
|
|
|
// console.log(this.checkedKeys)
|
|
|
// console.log(this.checkedData)
|
|
|
-
|
|
|
+
|
|
|
this.treeData = treeData
|
|
|
|
|
|
- if(this.authType == 0){
|
|
|
+ if (this.authType == 0) {
|
|
|
let leafNodes = []
|
|
|
- setTimeout(()=>{
|
|
|
- if(leafNodes.length == 0){
|
|
|
+ setTimeout(() => {
|
|
|
+ if (leafNodes.length == 0) {
|
|
|
leafNodes = document.querySelectorAll('ul > li.leafNode:first-child')
|
|
|
- for(let i=0;i<leafNodes.length;i++){
|
|
|
+ for (let i = 0; i < leafNodes.length; i++) {
|
|
|
const cn = leafNodes[i].parentNode.className
|
|
|
- leafNodes[i].parentNode.className += cn.indexOf('leafParent')<0 ? ' leafParent' : ''
|
|
|
+ leafNodes[i].parentNode.className += cn.indexOf('leafParent') < 0 ? ' leafParent' : ''
|
|
|
leafNodes[i].parentNode.parentNode.style.padding = '6px 0'
|
|
|
}
|
|
|
}
|
|
|
- },100)
|
|
|
+ }, 100)
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -348,7 +347,7 @@ export default {
|
|
|
this.checkedKeys = []
|
|
|
this.expandedKeys = []
|
|
|
this.titleText = '新增角色'
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.priceOptions = this.$store.state.app.priceAuthOptions
|
|
|
}
|
|
|
},
|
|
@@ -391,20 +390,25 @@ export default {
|
|
|
.ant-tree li ul{
|
|
|
white-space: pre-wrap;
|
|
|
}
|
|
|
-
|
|
|
+ .ant-tree li{
|
|
|
+ border-left:1px solid #eee;
|
|
|
+ }
|
|
|
.leafParent{
|
|
|
display: inline-block;
|
|
|
width: 80%;
|
|
|
float: right;
|
|
|
}
|
|
|
-
|
|
|
- .isLeaf{
|
|
|
+
|
|
|
+ .ant-tree li.isLeaf{
|
|
|
display: inline-block;
|
|
|
width: 25%;
|
|
|
+ border:0;
|
|
|
}
|
|
|
- .leafNode{
|
|
|
+
|
|
|
+ .ant-tree li.leafNode{
|
|
|
display: inline-block;
|
|
|
padding: 0;
|
|
|
+ border:0;
|
|
|
&:first-child{
|
|
|
padding: 0;
|
|
|
}
|
|
@@ -413,5 +417,5 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
</style>
|