|  |  | 
 |  |  |         <p class="tip" v-if="form.parent != null && form.id == null">为 <em>{{parentName}}</em> 新建子菜单</p> | 
 |  |  |         <el-form :model="form" ref="form" :rules="rules"> | 
 |  |  |             <el-form-item label="上级菜单" prop="parentId"> | 
 |  |  |                 <MenuSelect v-if="visible" type="1" v-model="form.parentId" placeholder="请选择上级菜单" :exclude-id="excludeMenuId" clearable :inline="false"/> | 
 |  |  |                 <MenuSelect v-if="visible" :type="form.type" v-model="form.parentId" placeholder="请选择上级菜单" :exclude-id="excludeMenuId" clearable :inline="false"/> | 
 |  |  |             </el-form-item> | 
 |  |  |             <el-form-item label="菜单名称" prop="name" required> | 
 |  |  |                 <el-input v-model="form.name" placeholder="请输入菜单名称" v-trim maxlength="50"/> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  |     import BaseOpera from '@/components/base/BaseOpera' | 
 |  |  |     import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  |     import MenuSelect from '@/components/common/MenuSelect' | 
 |  |  |     import icons from '@/utils/icons' | 
 |  |  |     export default { | 
 |  |  |         name: 'OperaMenuWindow', | 
 |  |  |         extends: BaseOpera, | 
 |  |  |         components: { MenuSelect, GlobalWindow }, | 
 |  |  |         data () { | 
 |  |  |             return { | 
 |  |  |                 icons, | 
 |  |  |                 // 上级菜单名称 | 
 |  |  |                 parentName: '', | 
 |  |  |                 // 需排除选择的菜单ID | 
 |  |  |                 excludeMenuId: null, | 
 |  |  |                 // 表单数据 | 
 |  |  |                 form: { | 
 |  |  |                     id: null, | 
 |  |  |                     parentId: null, | 
 |  |  |                     name: '', | 
 |  |  |                     path: '', | 
 |  |  |                     icon: '', | 
 |  |  |                     remark: '', | 
 |  |  |                     type: '1' | 
 |  |  |                 }, | 
 |  |  |                 // 验证规则 | 
 |  |  |                 rules: { | 
 |  |  |                     name: [ | 
 |  |  |                         { required: true, message: '请输入菜单名称' } | 
 |  |  |                     ] | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }, | 
 |  |  |         methods: { | 
 |  |  |             /** | 
 |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
 |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  | import MenuSelect from '@/components/common/MenuSelect' | 
 |  |  | import icons from '@/utils/icons' | 
 |  |  | export default { | 
 |  |  |   name: 'OperaMenuWindow', | 
 |  |  |   extends: BaseOpera, | 
 |  |  |   components: { MenuSelect, GlobalWindow }, | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       icons, | 
 |  |  |       // 上级菜单名称 | 
 |  |  |       parentName: '', | 
 |  |  |       // 需排除选择的菜单ID | 
 |  |  |       excludeMenuId: null, | 
 |  |  |       // 表单数据 | 
 |  |  |       form: { | 
 |  |  |         id: null, | 
 |  |  |         parentId: null, | 
 |  |  |         name: '', | 
 |  |  |         path: '', | 
 |  |  |         icon: '', | 
 |  |  |         remark: '', | 
 |  |  |         type: '1' | 
 |  |  |       }, | 
 |  |  |       // 验证规则 | 
 |  |  |       rules: { | 
 |  |  |         name: [ | 
 |  |  |           { required: true, message: '请输入菜单名称' } | 
 |  |  |         ] | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     /** | 
 |  |  |              * @title: 窗口标题 | 
 |  |  |              * @target: 编辑的菜单对象 | 
 |  |  |              * @parent: 新建时的上级菜单 | 
 |  |  |              */ | 
 |  |  |             open (title, target, parent) { | 
 |  |  |                 this.title = title | 
 |  |  |                 this.visible = true | 
 |  |  |                 // 新建,menu为空时表示新建菜单 | 
 |  |  |                 if (target == null) { | 
 |  |  |                     this.excludeMenuId = null | 
 |  |  |                     this.$nextTick(() => { | 
 |  |  |                         this.$refs.form.resetFields() | 
 |  |  |                         this.form.id = null | 
 |  |  |                         this.form.type = parent.type | 
 |  |  |                         this.form.parentId = parent == null ? null : parent.id | 
 |  |  |                         this.parentName = parent == null ? null : parent.name | 
 |  |  |                     }) | 
 |  |  |                     return | 
 |  |  |                 } | 
 |  |  |                 // 编辑 | 
 |  |  |                 this.$nextTick(() => { | 
 |  |  |                     this.excludeMenuId = target.id | 
 |  |  |                     for (const key in this.form) { | 
 |  |  |                         this.form[key] = target[key] | 
 |  |  |                     } | 
 |  |  |                 }) | 
 |  |  |             } | 
 |  |  |         }, | 
 |  |  |         created () { | 
 |  |  |             this.config({ | 
 |  |  |                 api: '/system/menu' | 
 |  |  |             }) | 
 |  |  |     open (title, target, parent, type) { | 
 |  |  |       this.title = title | 
 |  |  |       this.visible = true | 
 |  |  |       this.form.type = type || 1 | 
 |  |  |       // 新建,menu为空时表示新建菜单 | 
 |  |  |       if (target == null) { | 
 |  |  |         this.excludeMenuId = null | 
 |  |  |         this.$nextTick(() => { | 
 |  |  |           this.$refs.form.resetFields() | 
 |  |  |           this.form.id = null | 
 |  |  |           this.form.type = parent != null ? parent.type : (type || 1) | 
 |  |  |           this.form.parentId = parent == null ? null : parent.id | 
 |  |  |           this.parentName = parent == null ? null : parent.name | 
 |  |  |         }) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       // 编辑 | 
 |  |  |       this.$nextTick(() => { | 
 |  |  |         this.excludeMenuId = target.id | 
 |  |  |         for (const key in this.form) { | 
 |  |  |           this.form[key] = target[key] | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |     this.config({ | 
 |  |  |       api: '/system/menu' | 
 |  |  |     }) | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style scoped lang="scss"> |