对JEECG菜单生成器的一个小完善：自动输入非叶子节点或外链的组件

在官方文档的菜单配置说明 · JeecgBoot 开发文档 · 看云中：

前端组件配置说明：

• 1、非叶子菜单（即没有下级的菜单）配置固定 前端组件layouts/RouteView

• 2、需要跳转到第三页面的菜单 前端组件固定为：layouts/IframePageView，比如跳转百度：https://www.baidu.comwhttps://www.baidu.com/

但是，每次新建菜单时，都需要手动输入这两个前端组件，即使复制粘贴，也很麻烦，如下图所示fi： 

新建菜单的时候，从下拉框直接选择这两个组件，肯定会大大提高效率。甚至直接加入这两种菜单类型，也不是不可以的。
第二种方法我没实现，我对jeecg的前端代码做了点修改，实现了在前端组件输入框下方显示两个提示单选框，点击即自动填写前端组件。如下图所示：

 

 
具体作法是，在src/views/system/modules/PermissionModal.vue源码添加以下两处代码：

  1.在label=‘前端组件'这个表单项后面添加：

   <a-form-model-item
          v-show="show"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="前端组件辅助选择">
          <a-radio-group button-style="solid">
        <a-radio-button @click="helpComponent('layouts/RouteView')" value="layouts/RouteView">非叶子节点组件</a-radio-button>
        <a-radio-button @click="helpComponent('layouts/IframePageView')" value="layouts/IframePageView">外链组件</a-radio-button>
      </a-radio-group>
        </a-form-model-item>

2.在handleOK()代码前添加以下代码

 helpComponent(value) {
        const that = this;
        this.$set(this.model,'component',value)
      },

注意：之所以使用this.$set()语法，是因为jeecg的菜单管理代码中，model在初始化的时候是{}空的，所以里面的属性无法进行双向绑定，所以需要用这个语法更新。

jeecg菜单管理代码中model的初始化情况如下：

    data () {
      return {
        drawerWidth:700,
        treeData:[],
        title:"操作",
        visible: false,
        disableSubmit:false,
        model: {},
        show:true,//根据菜单类型，动态显示隐藏表单元素
        menuLabel:'菜单名称',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        iconChooseVisible: false,
        validateStatus:""
      }
    },

如此修改之后，管理菜单的时候就不用记忆或者到处找非叶子菜单或外链对应的组件类型，也不需要记得这两菜单需要特殊处理，对于我这种不是专职程序员产的老同志来说 ，还是省了不少事的。