services

编写你的当前模块服务接口

1. 在 /src/services 目录下 新建 如：system.js

/**
 * time:2019/4/1
 * 作者:xzc
 * 功能:系统权限
 */
import { stringify } from 'qs';
import request from '@/utils/request';
//_____GET没带参数_______
// 获取菜单列表 /admin/sys/menu/nav
export async function getMenuList() {
  return request('/sys/menu/nav');
}
//_____GET带参数_______
// 上移 /admin/sys/menu/moveUp
export async function menuMoveUp(params) {
  return request(`/sys/menu/moveUp?${stringify(params)}`);
}
//_____POST不带参数_______
// 删除菜单 /admin/sys/menu/delete
export async function deleteMenu(menuId) {
  return request(`/sys/menu/delete/${menuId}`, {
    method: 'POST',
  });
}
//_____POST带参数_______
// 添加菜单 /admin/sys/menu/save
export async function addMenu(params) {
  return request('/sys/menu/save', {
    method: 'POST',
    body: {
      ...params,
    },
  });
}

1. 在文件中引用
   如 /src/pages/SystemManage/MenuManageindex.js

/**
 * time:2019/3/30
 * 作者:xzc
 * 功能:菜单管理
 */
// ...略
// @是/src文件的别名
import {updateMenu,menuMoveUp,menuMoveDown} from '@/services/system';

3.业务中使用

加载初始数据

// 在组件的componentDidMount生命周期中调用
componentDidMount() {
    // 调用封装后的方法
    this.getRoleMenuList();
  }
  // 可以进行稍微的封装
  getRoleMenuList(){
    // 调用接口 getRoleMenuList 获取数据
   return getRoleMenuList().then(res=>{
      if(res.code === 0){
        // 接口返回成功后进行 业务处理，比如给组件的state 赋值 使用 this.setState({...})
        const treeData = [{
          name:'根目录',
          parentId:-1,
          url:'/',
          menuId:0,
          list:res.data,
        }];
        this.setState({treeData},()=>{
          return Promise.resolve()
        })
      }
    })
  }

事件调用 （点击事件 如：onClick为主还有组件的自定义事件 如：onSelect ）

onSelect = (selectedKeys) => {
  // 可能你这里需要调用数据接口
  updateMenu().then(res=>{
    if(res.code === 0){
      // ...
    }
  })
};
// onSelect 事件 调用你自己封装的 onSelect 方法
// 如果onSelect不使用 箭头函数 则 需要this.onSelect.bind(this) 手动绑定当前的组件实例,
// 否则会出现找不到 this 的错误
?<Tree
    defaultExpandedKeys={['0']}
    onSelect={this.onSelect}
  >
    {this.renderTreeNodes(treeData)}
  </Tree>

1. 在 子组件 中调用(删除、清缓存等操作)
   一般的 table 都是一个组件，table 中使用到的时间如果和父组件的数据相关(如请求的参数，请求后需要更新组件)

import Table from './table';
// 删除 deleteRole
  deleteRole(roleId){
    const {filtercase} = this.state;
    // 调用数据接口
    deleteRole({roleId}).then(res=>{
      if(res.code === 0){
        this.setState({
          filtercase:filtercase+1,
          resetCurrent: null,
        });
        this.$addModal.hide();
        message.success('删除成功');
      }
    })
  }
  // 修改用户信息
  modifyRole(roleId){
    this.$editModal.show(roleId);
  }
<Table
  // filtercase={filtercase}
  // resetCurrent={resetCurrent}
  modifyRole={this.modifyRole.bind(this)}
  deleteRole={this.deleteRole.bind(this)}
  // params={{ ...params }}
/>
// table.js
// Table 组件接收的 deleteRole,modifyRole 这两个方法
const Table = ({ deleteRole,modifyRole }) => {
  const caseChangeDataTableProps = {
    scroll: { x: 900 }, // 小屏幕时，横滚长度
    resetCurrent,
    fetch: {
      // 略....
// 具体绑定 
// <a onClick={()=>modifyRole(d.roleId)}>修改</a>
{
    title: '操作',
    fixed: 'right',
    width: 150,
    dataIndex: 'action',
    key: 'action',
    render: (t, d) => {
      return (<div>
        {
          getPms('sys:role:update')
            ?<span>
              <a onClick={()=>modifyRole(d.roleId)}>修改</a>
              <Divider type="vertical" />
            </span>:null
        }
        {
          getPms('sys:role:delete')
          ?<Popconfirm title="确定要删除？" onConfirm={()=>deleteRole(d.roleId)}>
            <a>删除</a>
          </Popconfirm>:null
        }
      </div>);
    } },