泛微二开系列(九)ecode自定义页面&APi返回重写

一、自定义页面

1.1前置init.js

//注册和绑定新页面前端实现接口
ecodeSDK.rewriteRouteQueue.push({
  fn:(params)=>{
    const {Com,Route,nextState} = params;
    const cpParams = {
      path:'main/cs/app', //路由地址
      appId:'${appId}',
      name:'metting_doc', //具体页面应用id
      node:'app', //渲染的路由节点,这里渲染的是app这个节点
      Route,
      nextState
    }    
    if(ecodeSDK.checkPath(cpParams)) {
      const acParams = {
        appId:cpParams.appId,
        name:cpParams.name, //模块名称
        props:params, //参数
        isPage:true, //是否是路由页面
        noCss:true //是否禁止单独加载css,通常为了减少css数量,css默认前置加载
      }
      //异步加载模块${appId}下的子模块Page1
      return ecodeSDK.getAsyncCom(acParams);
    }
    return null;
  },
  order:2,
  desc:'PC新页面'
});


/*
版本要求:kb1906以上
配置路由地址:
/main/cs/app/2691fe12cc344bb5afc88eb94b3b53f7_metting_doc
浏览器访问地址:
/wui/index.html#/main/cs/app/073798b90c25412b880302baf155cf04_metting_doc
/spa/custom/static/index.html#/main/cs/app/073798b90c25412b880302baf155cf04_metting_doc
*/

1.2编写index.js

const { Provider } = mobxReact;
const MettingDocListStore = ecodeSDK.imp(MettingDocListStore);

const MettingDocListPage = ecodeSDK.imp(MettingDocListPage);

//实例化store,并通过provider注入所有组件中
const allMyMapStore = {
  mettingDocListStore: new MettingDocListStore(),
}



class MyMettingDocList extends React.Component {
  render() {

   
   
    return (



      <Provider {...allMyMapStore}>
        {
           <MettingDocListPage {...this.props}  /> 

        }
      </Provider>
    )
  }
}

//发布模块
ecodeSDK.setCom('${appId}','metting_doc',MyMettingDocList);

1.3、api/MeetDocApi.js

const { Provider } = mobxReact;
const MettingDocListStore = ecodeSDK.imp(MettingDocListStore);

const MettingDocListPage = ecodeSDK.imp(MettingDocListPage);

//实例化store,并通过provider注入所有组件中
const allMyMapStore = {
  mettingDocListStore: new MettingDocListStore(),
}



class MyMettingDocList extends React.Component {
  render() {

   
   
    return (



      <Provider {...allMyMapStore}>
        {
           <MettingDocListPage {...this.props}  /> 

        }
      </Provider>
    )
  }
}

//发布模块
ecodeSDK.setCom('${appId}','metting_doc',MyMettingDocList);

1.4、stores/MeetingDocListStore.js

const {observable,action} = mobx;
const {Card, Row, Col, Tag} = antd;

const MettingDocApi = ecodeSDK.imp(MettingDocApi);

class MettingDocListStore { 

  @observable billid = -1;  
  @observable page = 1;  
  @observable size = 10;  
  @observable total = 0;

  @observable date_ = [];
  @observable columns = [];

  @action
  setBillid = (billid)=>{
    this.billid = billid;
  }
  @action
  setPage = (page)=>{
    this.page = page;
  }
  @action
  setSize = (size)=>{
    this.size = size;
  }

  @action
  setTotal = (total)=>{
    this.total = total;
  }
  
  @action
  getListData = ()=>{

    MettingDocApi.getReportData({pageNo: this.page,pageSize:this.size}).then(action(res=>{
            this.date_ = res;
      var  columnsField = [
        {title:"id",dataIndex:"cid"},
        {title:"流程名称",dataIndex:"requestName",render: (text,record) => {
              var href = "/spa/workflow/static4form/index.html#/main/workflow/req?requestid="+record.requestId;

            
              return  <a href={href}  target="_blank">{text}</a>;
            }
        },
        {title:"创建人",dataIndex:"creatorName"},
        {title:"当前节点",dataIndex:"currentNodeName"},
        {title:"创建时间",dataIndex:"createTime"}
        ];
      this.columns = columnsField;


     
    })).catch(err=>{
      antd.message.info("加载出错!");
      console.log("err",err);
    })
    
  }


  @action
  getCount = ()=>{

    MettingDocApi.getCount({}).then(action(res=>{

      this.total = res;
     
    })).catch(err=>{
      antd.message.info("加载出错!");
      console.log("err",err);
    })
    
  }
}

ecodeSDK.exp(MettingDocListStore);

1.5、pages/MettingDocListPageV1.js

const { Provider,inject,observer } = mobxReact;
const { WeaBrowser, WeaTop ,WeaDateGroup, WeaSelectGroup, WeaDatePicker,WeaRangePicker} = ecCom;
const { Button, Card, Table} = antd;


@inject("mettingDocListStore")
@observer
class MettingDocListPage1 extends React.Component {

  constructor(props) {
    super(props);
  }

  // 
  componentDidMount() {
    this.initMap();

  }

  componentWillReceiveProps(nextProps) {

    if (this.props.location.key !== nextProps.location.key) { // 手动刷新、切换菜单 重新初始化
        // 清理表单
        //myReLianStore.clear();

        // 初始化
      this.initMap();

    }

  }

  initMap = ()=> {

    const {mettingDocListStore} = this.props;

    const {query} = this.props.location;

    const {billid} = query;



    mettingDocListStore.setBillid(billid);
    mettingDocListStore.getListData();

    
  }
  click = ()=>{

  }

  
  
  render(){
    const {mettingDocListStore} = this.props;

    const { columns, date_ } = mettingDocListStore;
    const rowSelection = {
      // onChange(selectedRowKeys, selectedRows) {
      //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      // },
      // onSelect(record, selected, selectedRows) {
      //   console.log(record, selected, selectedRows);
      // },
      // onSelectAll(selected, selectedRows, changeRows) {
      //   console.log(selected, selectedRows, changeRows);
      // }
    };



    return (
      <div id="report" style={{height: "100%"}}>
        <WeaTop
          title="会议附件列表" // 文字
          icon={<i className='icon-coms-shouwen' />} // 左侧图标

          iconBgcolor='rgb(150, 53, 138)' // 左侧图标背景色
          showDropIcon={true} // 是否显示下拉按钮

          loading={true} // 头部加载进度条
        >
        <Table 
          columns={columns} 
          dataSource={date_}
          pagination={false} 
          className="table_repoart"    
          rowSelection={rowSelection}  
        />
        </WeaTop>

      </div>
    )
  }

}

ecodeSDK.exp(MettingDocListPage1);

二、重写API返回的data

2.1 编写前置的index.js

需求:将转换地址从IP转换成当前OA的host:8106

let enable = true;

ecodeSDK.rewriteApiDataQueueSet({
  fn: (url, params, data) => {
    if(!enable) return ; 
    const {hash} = window.location;
    if(!hash.startsWith('#/main/document/detail')) return;  // //判断页面地址
    if (url.includes('/api/doc/acc/getAccFileConvert')) { //拦截首页流程中心的待办接口 做到替换某个指定流程的跳转链接
        const host = window.location.host;
        const port = window.location.port;
        const protocol = window.location.protocol;
        const newhost = host.replace(":"+port,"")+":8106"
        if(data.result==0){
          data.data.map(v=>{
            console.log(v.path);
            const newUrl = v.path.replace('120.79.250.152:8080', `${newhost}`);
            v.path=newUrl;
            return v;
          })

        }
    }
  }
})