|
|
|
|
@ -45,14 +45,18 @@ |
|
|
|
|
<el-form-item prop="role" label="角色权限"> |
|
|
|
|
<div style="max-height: 300px; overflow: auto"> |
|
|
|
|
<el-tree |
|
|
|
|
ref="per" |
|
|
|
|
:data="permissions" |
|
|
|
|
show-checkbox |
|
|
|
|
default-expand-all |
|
|
|
|
node-key="id" |
|
|
|
|
:default-expanded-keys="checkedIds" |
|
|
|
|
:default-checked-keys="checkedIds" |
|
|
|
|
:props="defaultProps"> |
|
|
|
|
ref="per" |
|
|
|
|
:data="permissions" |
|
|
|
|
show-checkbox |
|
|
|
|
default-expand-all |
|
|
|
|
node-key="id" |
|
|
|
|
:default-expanded-keys="checkedIds" |
|
|
|
|
:default-checked-keys="checkedIds" |
|
|
|
|
:props="defaultProps"> |
|
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
|
|
|
<span>{{ node.label }}</span> |
|
|
|
|
<span v-if="datas.includes(node.label)" class="data" @click.stop="showData(data)">数据权限</span> |
|
|
|
|
</span> |
|
|
|
|
</el-tree> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
@ -62,6 +66,18 @@ |
|
|
|
|
<el-button type="primary" @click="saveData">确 定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<el-dialog title="数据权限设置" :visible.sync="dataVisible" width="500px" class="data-dia" :close-on-click-modal="false"> |
|
|
|
|
<p class="title">请选择要关联的供应商系统</p> |
|
|
|
|
<div class="checks"> |
|
|
|
|
<el-checkbox v-model="dataCheckAll" @change="checkAll">全部</el-checkbox> |
|
|
|
|
<el-checkbox v-for="(item, i) in suppliers" :key="i" v-model="item.check">{{ item.supplierName }}</el-checkbox> |
|
|
|
|
</div> |
|
|
|
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
|
|
|
|
<el-button @click="dataVisible = false">取 消</el-button> |
|
|
|
|
<el-button type="primary" @click="dataSubmit">确 定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -91,7 +107,12 @@ export default { |
|
|
|
|
roleVisible: false, |
|
|
|
|
permissions: [], |
|
|
|
|
checkedIds: [], |
|
|
|
|
roleNameReapeat: false // 角色名称是否重复 |
|
|
|
|
roleNameReapeat: false, // 角色名称是否重复 |
|
|
|
|
datas: ['客户管理', '订单管理', '课程管理', '服务配置'], // 需要勾选数据权限的模块 |
|
|
|
|
dataVisible: false, |
|
|
|
|
suppliers: [], |
|
|
|
|
dataCheckAll: false, |
|
|
|
|
curData: {} |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
@ -205,6 +226,32 @@ export default { |
|
|
|
|
this.permissions.length && this.$refs.per.setCheckedNodes([]); |
|
|
|
|
this.roleVisible = true; |
|
|
|
|
}, |
|
|
|
|
// 数据权限全选 |
|
|
|
|
checkAll(val) { |
|
|
|
|
this.suppliers.map(e => e.check = val) |
|
|
|
|
}, |
|
|
|
|
// 展示数据权限弹框 |
|
|
|
|
showData(data) { |
|
|
|
|
this.curData = data |
|
|
|
|
this.dataVisible = true |
|
|
|
|
this.$get(this.api.getSupplierList).then(res => { |
|
|
|
|
const list = res.supplierList |
|
|
|
|
const ids = data.supplierIds |
|
|
|
|
list.map(e => e.check = ids ? ids.includes(e.supplierId) : false) |
|
|
|
|
this.suppliers = list |
|
|
|
|
this.dataCheckAll = !list.find(e => !e.check) |
|
|
|
|
console.log("🚀 ~ file: role.vue ~ line 235 ~ showData ~ data", data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
// 数据权限确定 |
|
|
|
|
dataSubmit() { |
|
|
|
|
const { id } = this.curData |
|
|
|
|
this.permissions[0].children.map(e => { |
|
|
|
|
// 给当前选择的权限赋上供应商id，提交的时候一起处理 |
|
|
|
|
if (e.id == id) e.supplierIds = this.suppliers.filter(e => e.check).map(e => e.supplierId) |
|
|
|
|
}) |
|
|
|
|
this.dataVisible = false |
|
|
|
|
}, |
|
|
|
|
// 递归处理勾选的权限 |
|
|
|
|
handleRolePer(data, permissions) { |
|
|
|
|
let result = data; |
|
|
|
|
@ -238,33 +285,57 @@ export default { |
|
|
|
|
this.roleVisible = true; |
|
|
|
|
}, |
|
|
|
|
async saveData() { |
|
|
|
|
if (!this.form.roleName) return this.$message.warning("请填写角色名称"); |
|
|
|
|
if (!this.form.remark) return this.$message.warning("请填写角色描述"); |
|
|
|
|
if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限"); |
|
|
|
|
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
|
|
|
|
let permissionId = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()]; |
|
|
|
|
let data = { |
|
|
|
|
...this.form, |
|
|
|
|
permissionId, |
|
|
|
|
platformId: Setting.platformId, |
|
|
|
|
}; |
|
|
|
|
if (this.form.id) { |
|
|
|
|
this.$post(this.api.saveOrUpdate, data).then(res => { |
|
|
|
|
this.$message.success("修改成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
this.roleVisible = false; |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
const { form } = this |
|
|
|
|
if (!form.roleName) return this.$message.warning("请填写角色名称"); |
|
|
|
|
if (!form.remark) return this.$message.warning("请填写角色描述"); |
|
|
|
|
const tree = this.$refs.per |
|
|
|
|
if (!tree.getCheckedKeys().length) return this.$message.warning("请选择角色权限"); |
|
|
|
|
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
|
|
|
|
const checks = [...this.$refs.per.getHalfCheckedNodes(), ...this.$refs.per.getCheckedNodes()]; |
|
|
|
|
const ids = [] |
|
|
|
|
const roleId = form.id |
|
|
|
|
checks.map(e => { |
|
|
|
|
if (e.supplierIds) { |
|
|
|
|
e.supplierIds.map(n => { |
|
|
|
|
ids.push({ |
|
|
|
|
permissionId: e.id, |
|
|
|
|
roleId, |
|
|
|
|
supplierId: n |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
this.$post(this.api.saveOrUpdate, data).then(res => { |
|
|
|
|
this.$message.success("新增成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
this.roleVisible = false; |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
ids.push({ |
|
|
|
|
permissionId: e.id, |
|
|
|
|
roleId |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
console.log("🚀 ~ file: role.vue ~ line 296 ~ saveData ~ checks", checks, ids) |
|
|
|
|
let data = { |
|
|
|
|
...this.form, |
|
|
|
|
dataPermissionList: ids, |
|
|
|
|
platformId: Setting.platformId, |
|
|
|
|
}; |
|
|
|
|
debugger |
|
|
|
|
this.$post(this.api.saveOrUpdate, data).then(res => { |
|
|
|
|
this.$message.success(form.id ? "修改成功" : "新增成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
this.roleVisible = false; |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
|
|
.data { |
|
|
|
|
margin-left: 50px; |
|
|
|
|
&:hover { |
|
|
|
|
color: #9076FF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.data-dia { |
|
|
|
|
.title { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
