|  |  | 
 |  |  | <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> |