| <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="module"> | 
|         <el-input v-model="form.module" placeholder="请输入权限模块" v-trim maxlength="500"/> | 
|         <FormItemTip>多个模块可以通过"/"分割,例如"日志管理/操作日志"</FormItemTip> | 
|       </el-form-item> | 
|     </el-form> | 
|   </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
| import BaseOpera from '@/components/base/BaseOpera' | 
| import GlobalWindow from '@/components/common/GlobalWindow' | 
| import FormItemTip from '@/components/common/FormItemTip' | 
| import { updateByIdInBatch } from '@/api/system/permission' | 
|   | 
| export default { | 
|   name: 'OperaModuleWindow', | 
|   extends: BaseOpera, | 
|   components: { FormItemTip, GlobalWindow }, | 
|   data () { | 
|     return { | 
|       // 行数据 | 
|       row: null, | 
|       // 表单数据 | 
|       form: { | 
|         module: '' | 
|       }, | 
|       // 验证规则 | 
|       rules: { | 
|         module: [ | 
|           { validator: this.__checkModule, trigger: 'blur' } | 
|         ] | 
|       } | 
|     } | 
|   }, | 
|   methods: { | 
|     /** | 
|      * 打开窗口 | 
|      * | 
|      * @param title 标题 | 
|      * @param target 行对象(仅编辑需该参数) | 
|      */ | 
|     open (title, target) { | 
|       this.title = title | 
|       this.row = target | 
|       this.visible = true | 
|       // 编辑 | 
|       this.$nextTick(() => { | 
|         this.form.module = target.name | 
|       }) | 
|     }, | 
|     /** | 
|      * 确认 | 
|      */ | 
|     confirm () { | 
|       this.$refs.form.validate(valid => { | 
|         if (!valid) { | 
|           return | 
|         } | 
|         const pool = [] | 
|         this.__fillPool(pool, this.row.children, this.form.module) | 
|         this.isWorking = true | 
|         updateByIdInBatch(pool) | 
|           .then(() => { | 
|             this.visible = false | 
|             this.$emit('success') | 
|           }) | 
|           .catch(e => { | 
|             this.$tip.apiFailed(e) | 
|           }) | 
|           .finally(() => { | 
|             this.isWorking = false | 
|           }) | 
|       }) | 
|     }, | 
|     /** | 
|      * 填充权限池,将所有权限的模块前缀调整为新权限模块后丢入pool中 | 
|      * | 
|      * @param pool 权限池 | 
|      * @param list 权限列表 | 
|      * @param newModule 新权限模块 | 
|      */ | 
|     __fillPool (pool, list, newModule) { | 
|       if (list == null) { | 
|         return | 
|       } | 
|       for (const child of list) { | 
|         if (child.type !== 'module') { | 
|           const modulePaths = child.module.split('/') | 
|           modulePaths[this.row.level] = newModule | 
|           child.module = modulePaths.join('/') | 
|           pool.push(child) | 
|           continue | 
|         } | 
|         this.__fillPool(pool, child.children, newModule) | 
|       } | 
|     }, | 
|     /** | 
|      * 验证模块 | 
|      * | 
|      * @param rule 规则 | 
|      * @param value 值 | 
|      * @param callback 回调 | 
|      * @returns {*} | 
|      * @private | 
|      */ | 
|     __checkModule (rule, value, callback) { | 
|       if (value == null || value === '') { | 
|         return callback() | 
|       } | 
|       // 不允许包含空格 | 
|       if (value.indexOf(' ') !== -1) { | 
|         return callback(new Error('不允许包含空格')) | 
|       } | 
|       // 不允许使用"/"开头或结尾 | 
|       if (value.startsWith('/') || value.endsWith('/')) { | 
|         return callback(new Error('请勿使用"/"开头或结尾')) | 
|       } | 
|       return callback() | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       api: '/system/permission' | 
|     }) | 
|   } | 
| } | 
| </script> |