|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <GlobalWindow | 
|---|
|  |  |  | :title="title" | 
|---|
|  |  |  | width="60%" | 
|---|
|  |  |  | :visible.sync="visible" | 
|---|
|  |  |  | :confirm-working="isWorking" | 
|---|
|  |  |  | @confirm="confirm" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <p class="tip">正在为角色【 <em>{{role.name || '-'}}</em>】 配置数据权限</p> | 
|---|
|  |  |  | <GlobalWindow :title="title" width="80%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"> | 
|---|
|  |  |  | <p class="tip">正在为角色【 <em>{{ role.name || '-' }}</em>】 配置数据权限</p> | 
|---|
|  |  |  | <p class="tip-warn"><i class="el-icon-warning"></i>提醒:权限配置后需重新登录后生效</p> | 
|---|
|  |  |  | <el-form :model="form" ref="form" style="margin-top:15px"> | 
|---|
|  |  |  | <el-form-item label="权限类型:" prop="type"> | 
|---|
|  |  |  | <el-select v-model="form.type" clearable filterable placeholder="请选择权限类型"> | 
|---|
|  |  |  | <el-option | 
|---|
|  |  |  | v-for="(item, index) in options" | 
|---|
|  |  |  | :key="index" | 
|---|
|  |  |  | :label="item.name" | 
|---|
|  |  |  | :value="item.id" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id"> | 
|---|
|  |  |  | </el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="form.type == 4" label="自定义部门:" prop="customData"> | 
|---|
|  |  |  | <el-cascader | 
|---|
|  |  |  | :options="departments" | 
|---|
|  |  |  | v-model="form.customData" | 
|---|
|  |  |  | :props=defaultProps | 
|---|
|  |  |  | clearable | 
|---|
|  |  |  | ></el-cascader> | 
|---|
|  |  |  | <el-cascader :options="departments" v-model="form.customData" :props=defaultProps clearable></el-cascader> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | 
|---|
|  |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
|---|
|  |  |  | import { createRoleDataPermission } from '@/api/system/role' | 
|---|
|  |  |  | import { fetchList } from '@/api/business/company' | 
|---|
|  |  |  | // import the styles | 
|---|
|  |  |  | // import the styles | 
|---|
|  |  |  | import '@riophae/vue-treeselect/dist/vue-treeselect.css' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'OperaSystemRoleWindow', | 
|---|
|  |  |  | extends: BaseOpera, | 
|---|
|  |  |  | components: { GlobalWindow }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | options: [ | 
|---|
|  |  |  | { name: '全部', id: 0 }, | 
|---|
|  |  |  | { name: '所属部门及下属部门', id: 1 }, | 
|---|
|  |  |  | { name: '所属部门及其子孙部门', id: 2 }, | 
|---|
|  |  |  | { name: '仅所属部门', id: 3 }, | 
|---|
|  |  |  | { name: '自定义部门', id: 4 } | 
|---|
|  |  |  | { name: '自定义部门', id: 4 }, | 
|---|
|  |  |  | { name: '只看自己', id: -1 }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | // 表单数据 | 
|---|
|  |  |  | form: { | 
|---|
|  |  |  | 
|---|
|  |  |  | value: 'id', | 
|---|
|  |  |  | emitPath: false | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | role:{}, | 
|---|
|  |  |  | role: {}, | 
|---|
|  |  |  | departments: [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created () { | 
|---|
|  |  |  | created() { | 
|---|
|  |  |  | this.config({ | 
|---|
|  |  |  | api: '/system/role', | 
|---|
|  |  |  | 'field.id': 'id' | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | // 部门树状结构数据 | 
|---|
|  |  |  | treeComList () { | 
|---|
|  |  |  | treeComList() { | 
|---|
|  |  |  | fetchList() | 
|---|
|  |  |  | .then(res => { | 
|---|
|  |  |  | // this.departments = this.tree([res]) | 
|---|
|  |  |  | this.departments =this.newTree(res) | 
|---|
|  |  |  | this.departments = this.newTree(res) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | open (title, target,role) { | 
|---|
|  |  |  | open(title, target, role) { | 
|---|
|  |  |  | // console.log(title, target) | 
|---|
|  |  |  | this.title = title | 
|---|
|  |  |  | this.visible = true | 
|---|
|  |  |  | this.role=role | 
|---|
|  |  |  | this.role = role | 
|---|
|  |  |  | // 新建 | 
|---|
|  |  |  | if (target == null) { | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | 
|---|
|  |  |  | for (const key in this.form) { | 
|---|
|  |  |  | this.form[key] = target[key] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | console.log(target); | 
|---|
|  |  |  | if (target.customData === undefined ||target.customData === null || target.customData === '') { | 
|---|
|  |  |  | console.log(target) | 
|---|
|  |  |  | if (target.customData === undefined || target.customData === null || target.customData === '') { | 
|---|
|  |  |  | this.form.customData = [] | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | const customD  = this.form.customData.split(',') | 
|---|
|  |  |  | const customD = this.form.customData.split(',') | 
|---|
|  |  |  | this.form.customData = customD.map((item) => { return parseInt(item) }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | newTree(tree) { | 
|---|
|  |  |  | if(tree ==null){ | 
|---|
|  |  |  | if (tree == null) { | 
|---|
|  |  |  | return [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return tree.map(item => { | 
|---|
|  |  |  | let newItem = {...item} | 
|---|
|  |  |  | if(newItem){ | 
|---|
|  |  |  | newItem.children=newItem.childList | 
|---|
|  |  |  | let newItem = { ...item } | 
|---|
|  |  |  | if (newItem) { | 
|---|
|  |  |  | newItem.children = newItem.childList | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (item.children && item.children.length == 0) { | 
|---|
|  |  |  | this.$delete( newItem, 'children' ) | 
|---|
|  |  |  | this.$delete(newItem, 'children') | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | newItem.children = this.newTree(newItem.children) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return newItem | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | __confirmCreate () { | 
|---|
|  |  |  | __confirmCreate() { | 
|---|
|  |  |  | // console.log(JSON.stringify(this.form.customData)); | 
|---|
|  |  |  | // return | 
|---|
|  |  |  | this.$refs.form.validate((valid) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | __confirmEdit () { | 
|---|
|  |  |  | __confirmEdit() { | 
|---|
|  |  |  | // console.log(JSON.stringify(this.form.customData)); | 
|---|
|  |  |  | // return | 
|---|
|  |  |  | this.$refs.form.validate((valid) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | <style scoped lang="scss"> | 
|---|
|  |  |  | .transfer { | 
|---|
|  |  |  | height: 600px; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | ::v-deep .el-transfer-panel { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | ::v-deep .el-transfer-panel__body { | 
|---|
|  |  |  | height: 500px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | ::v-deep .el-transfer-panel__list.is-filterable { | 
|---|
|  |  |  | height: 480px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|