基于 NetModular 框架开发前端记录

详情请了解  => 官方文档：https://docs.17mkh.com/

由于公司项目用这个框架作为初始开发版本，后台 .net,前端vue 。此框架后台配置之后，会自动生成前后端基本代码，在开发过程中只需要修改就可以。但是遇到与原框架不吻合的需求，会变得很麻烦。

由于开发中遇到一些问题，所以在此记录一下。

一：关于 nm-list 组件； 此组件封装了element 的table 大部分功能。

    1）表格数据自定义请求和过滤数据

       组件的表格数据必须通过action 调用 api.query 方法 ，然后返回 Promise ,并且返回的数据格式必须是 {rows:[ ],totlal:X },之后调用 this.$refs.list.refresh()  之后才会刷新视图；大致代码如下：

action: api.query, 改为 action: this.getList,   // 把原action的指向改为 自己的方法

// 编辑，添加 页面覆盖原有方法 ，把action 里面的方法指向自己的方法 ，然后retuen Promise
actions: { add, edit, update } 改为 actions: { add:this.add, edit, update:this.update }


getList() {
        return new Promise(res => {
            api.query(this.params).then(data => {
            //自己的逻辑

            res(data)  //data 为自己组好的数据格式，必须为{rows:[],total:XX} 格式
            this.$refs.list.refresh()
            })
        })
      },

如果不返回Promise ，会报以下错误

二：自定义登录页，头部的方法

1. 首先定义自己的组件

2.在index.js 里面引入组件，注意一定要以nm-login-开头（登录页面），其余组件也要以nm-开头

3.启动系统，在系统配置页面选择登录组件 。其余组件直接重新启动

官方文档：https://docs.17mkh.com/frendEnd/Login.html

 

三：关于接口添加，接口权限配置的地方

1）添加接口：在api ->components里面找到对应的文件夹，定义urls,对应的接口方法，然后return 出去。如下：

 const urls = {
    appointQuerybydate: 'admin/patientappoint/querybydate',
    patientappointUpdate: 'admin/patientappoint/update'
  }

  const appointQuerybydate = (params) => {
    return $http.get(urls.appointQuerybydate, params)
  }
  const patientappointUpdate = (params) => {
    return $http.post(urls.patientappointUpdate, params)
  }
  return {
    patientappointUpdate,
    appointQuerybydate,
    ...crud
  }

2）接口添加权限的方法

找到当前页面views 下的当前页面，下的page.js 。把接口地址添加到关联权限哪里。注意最后添加_post 或者_get ;(如果当前页面需要用到别的页面的有权限的接口，直接把接口地址加到下面，注意改变this.name) 如下:

// 关联权限
  this.permissions = [`${this.name}_query_get`,`${this.name}_appointQuerybydate_get`,`${this.name}_patientappointUpdate_post`]

3)  在项目管理的权限列表里面先 同步，然后到菜单管理，找到修改的对应菜单，点击编辑，然后确定。然后重新登录。此时，新加的有权限的接口就会生效。直接通过 $api.admin.文件夹名字.接口名 就可以访问