| <template> | 
|     <GlobalWindow | 
|         :title="title" | 
|         :visible.sync="visible" | 
|         :confirm-working="isWorking" | 
|         @confirm="confirm" | 
|     > | 
|         <el-form :model="form" ref="form" :rules="rules"> | 
|             <el-form-item label="权限类型" prop="type"> | 
|                 <el-select v-model="form.type" @change="form.customData === []" placeholder="请选择"> | 
|                     <el-option | 
|                         v-for="item in options" | 
|                         :key="item.value" | 
|                         :label="item.label" | 
|                         :value="item.value"> | 
|                     </el-option> | 
|                 </el-select> | 
|             </el-form-item> | 
|             <el-form-item label="自定义部门" prop="customData" v-if="form.type === 4"> | 
|                 <el-cascader | 
|                     :options="organization" | 
|                     v-model="form.customData" | 
|                     placeholder="请选择上级组织" | 
|                     :props="{ label: 'name', value: 'id', multiple: true, checkStrictly: true }" | 
|                     clearable /> | 
|             </el-form-item> | 
|         </el-form> | 
|     </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
|   import BaseOpera from '@/components/base/BaseOpera' | 
|   import GlobalWindow from '@/components/common/GlobalWindow' | 
|   import { tree } from '@/api/business/companyDepartment' | 
|   import { createRoleDataPermission } from '@/api/system/role' | 
|   export default { | 
|     name: 'Permissions', | 
|     extends: BaseOpera, | 
|     components: { GlobalWindow }, | 
|     data () { | 
|       return { | 
|         // 表单数据 | 
|         form: { | 
|           roleId: null, | 
|           type: '', | 
|           customData: [] | 
|         }, | 
|         // 验证规则 | 
|         rules: { | 
|           type: [ | 
|             { required: true, message: '请选择权限类型' } | 
|           ], | 
|           customData: [ | 
|             { required: true, message: '请选择部门' } | 
|           ] | 
|         }, | 
|         organization: [], | 
|         options: [ | 
|           { label: '全部', value: 0 }, | 
|           { label: '所属部门及下属部门', value: 1 }, | 
|           { label: '所属部门及其子孙部门', value: 2 }, | 
|           { label: '仅所属部门', value: 3 }, | 
|           { label: '自定义部门', value: 4 }, | 
|           { label: '仅自己', value: -1 } | 
|         ] | 
|       } | 
|     }, | 
|     methods: { | 
|       confirm () { | 
|         this.$refs.form.validate((valid) => { | 
|           if (!valid) { | 
|             return | 
|           } | 
|           this.isWorking = true | 
|           let obj = JSON.parse(JSON.stringify(this.form)) | 
|           if (obj.customData.length > 0) { | 
|             obj.customData = obj.customData.flat().join(',') | 
|           } else { | 
|             obj.customData = '' | 
|           } | 
|           createRoleDataPermission(obj) | 
|             .then(() => { | 
|               this.visible = false | 
|               this.$tip.apiSuccess('操作成功') | 
|               this.$emit('success') | 
|             }) | 
|             .catch(e => { | 
|               this.$tip.apiFailed(e) | 
|             }) | 
|             .finally(() => { | 
|               this.isWorking = false | 
|             }) | 
|         }) | 
|       }, | 
|       getTree() { | 
|         tree() | 
|           .then(records => { | 
|             this.organization = records | 
|           }) | 
|       }, | 
|       open (title, target) { | 
|         this.title = title | 
|         this.visible = true | 
|         this.getTree() | 
|         // 新建 | 
|         if (target == null) { | 
|           this.$nextTick(() => { | 
|             this.$refs.form.resetFields() | 
|             this.form[this.configData['field.id']] = null | 
|           }) | 
|           return | 
|         } | 
|         // 编辑 | 
|         this.$nextTick(() => { | 
|           for (const key in this.form) { | 
|             this.form[key] = target[key] | 
|           } | 
|         }) | 
|       } | 
|     }, | 
|     created () { | 
|       this.config({ | 
|         api: '/system/role' | 
|       }) | 
|     } | 
|   } | 
| </script> |