泛微RESTful接口说明 泛微e9

文章目录

• 泛微 weaver E9 前端梳理

• 一、建模相关

• 1. 建模拓展按钮显示弹框方法
• 2. 建模查询列表方法
• 3. 建模查询自定义按钮

• 二、流程相关

• 1. 获取右上角操作按钮组方法

• 三、ecode 开发

• 1. config 变量设置和引用

• 变量设置
• 变量引用

• 2. 复写组件
• 3. 复写接口
• 4. 编写 ecode 组件

• 新建 register.js 注册绑定页面（js 文件需要前置加载）
• 创建 index.js 编写组件

• 5. 将 ecode 组件绑定到元素上

• 四、js 加载 eocde 组件(流程、建模可用)
• 五、隐藏头部方法
• 六、关闭页面方法

泛微 weaver E9 前端梳理

一、建模相关

1. 建模拓展按钮显示弹框方法

显示弹框可通过 ecCom.WeaTools.createDialog 方法来创建

ecCom.WeaTools.createDialog(
  {
    title: "车辆使用申请",
    url: "/spa/cube/index.jsp#/main/cube/card?type=1&modeId=3&formId=-33",
    icon: "icon-coms-workflow",
    iconBgcolor: "#0079DE",
    style: { width: "600px", height: 600 },
    destroyBodyOnClose: true, // 当点击关闭后是否卸载 body 内容 默认为false，关闭后会重新执行，设为true解决重复执行页面js
    callback: (datas) => {
      // 数据通信
      console.log("弹窗回传值", datas);
    },
    onCancel: () => {
      // 关闭通信
      console.log("关闭通信");
    },
  },
  undefined,
  (dialog) => {
    // 由于组件异步化可能导致第一次没有加载到组件，所以需要在回调中调用
    dialog.show();
  }
);

2. 建模查询列表方法

使用ModeList变量
例如：
1、列表刷新方法 ModeList.reloadTableAll()
2、列表获取搜索条件方法 ModeList.getHighSearchDatas()
3、所有数据导出为excel ModeList.getAllExcelOut()

3. 建模查询自定义按钮

// 链接目标方式: 手动输入

// javascript方法名: 例如 javascript:onUrl();

// javascript方法参数: 例如 id,dqzt,cph

// javascript方法体
function onUrl(id, params) {
  params = params.split("+");
  console.log("sss", id, params);
  antd.Modal.confirm({
    title: `修改车牌号${params[2]}当前状态`,
    content: `请确认是否修改为${params[1] == "1" ? "可用" : "不可用"}`,
    onOk() {
      console.log("确定");
      ModeList.reloadTable();
    },
    onCancel() {},
  });
}

二、流程相关

E9 流程表单前端接口 API

1. 获取右上角操作按钮组方法

// 获取右上角操作按钮组方法
mobx.toJS(wfform.getGlobalStore().rightMenu.rightMenus);

三、ecode 开发

ecode 开发文档地址

E9PC 端组件库地址

1. config 变量设置和引用

变量设置

需写在config文件夹下面的config.js

// 变量设置
const configs = {
  customid: 163,
};

ecodeSDK.setCom("${appId}", "configs", configs);

变量引用

// 变量引用
const configs = ecodeSDK.getCom("${appId}", "configs");

// 例如通过 configs.customid 即可拿到定义好的值

2. 复写组件

场景例如：特定流程顶部添加按钮

// WeaReqTop组件复写
const workflowid = 676; //指定流程

ecodeSDK.overwritePropsFnQueueMapSet("WeaReqTop", {
  //组件名
  fn: (newProps) => {
    //newProps代表组件参数

    const { hash } = window.location;

    // 根据特定参数去执行
    if (!~hash.indexOf("/main/workflow/req")) return newProps;

    if (window.wfform && wfform.getBaseInfo().workflowid == workflowid) {
      const { Button } = antd;

      newProps.buttons.push(
        <Button type="primary" onClick={() => {}}>
          按钮
        </Button>
      );
    }

    return newProps;
  },
  order: 1, //排序字段，如果存在同一个页面复写了同一个组件，控制顺序时使用
  desc: "WeaReqTop组件复写",
});

3. 复写接口

场景例如：复写接口 流程表单 添加删除人员操作后 刷新页面

// 复写接口  流程表单  添加删除人员操作后  刷新页面
ecodeSDK.rewriteApiDataQueueSet({
  fn: function fn(url, params, data) {
    if (
      url.indexOf("/main/workflow/req") == -1 &&
      url.indexOf("/api/workflow/freeFlow/saveFreeNodeInfo") == -1
    )
      return data;

    const { hash } = window.location;
    let urlParams = parseParam(hash);

    if (urlParams.isRemarkRecording != 1) return data;

    console.log(
      "urlParams.isRemarkRecording==>",
      urlParams.isRemarkRecording,
      url,
      params
    );

    window.onbeforeunload = function (e) {
      return null; // onbeforeunload 钩子中如果返回null的话，就不会弹出对话框（"系统可能不会保存您所做的更改"）。
    };

    setTimeout(() => {
      window.location.reload();
    });

    return data;
  },
});

function parseParam(url) {
  const paramsStr = /.+\?(.+)$/.exec(url) ? /.+\?(.+)$/.exec(url)[1] : ""; // 将 ? 后面的字符串取出来
  const paramsArr = paramsStr.split("&"); // 将字符串以 & 分割后存到数组中
  let paramsObj = {};
  // 将 params 存到对象中
  paramsArr.forEach((param) => {
    if (/=/.test(param)) {
      // 处理有 value 的参数
      let [key, val] = param.split("="); // 分割 key 和 value
      val = decodeURIComponent(val); // 解码
      val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

      if (paramsObj.hasOwnProperty(key)) {
        // 如果对象有 key，则添加一个值
        paramsObj[key] = [].concat(paramsObj[key], val);
      } else {
        // 如果对象没有这个 key，创建 key 并设置值
        paramsObj[key] = val;
      }
    } else {
      // 处理没有 value 的参数
      paramsObj[param] = true;
    }
  });

  return paramsObj;
}

4. 编写 ecode 组件

新建 register.js 注册绑定页面（js 文件需要前置加载）

const routes = [
  {
    name: "TestK1",
    desc: "测试",
  },
  {
    name: "TestK2",
    desc: "测试",
  },
];

//注册和绑定新页面前端实现接口
routes.forEach((route) => {
  ecodeSDK.rewriteRouteQueue.push({
    fn: (params) => {
      const { Com, Route, nextState } = params;
      const cpParams = {
        path: "main/cs/app", //路由地址
        appId: "${appId}",
        name: route.name, //具体页面应用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: 1,
    desc: route.desc,
  });
});
/*
版本要求：kb1906以上
配置路由地址：
/spa/custom/static/index.html#/main/cs/app/123456789_TestK1
浏览器访问地址：
/wui/index.html#/main/cs/app/123456789_TestK1
*/

创建 index.js 编写组件

// TestK1
const { Row, Col, Button, Modal, message } = antd;
const { WeaTop, WeaTab } = ecCom;

class TestK1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "测试",
    };
  }

  componentDidMount() {}

  render() {
    const { title } = this.state;
    return (
      <div>
        <p>{title}</p>
        <Button
          onClick={() => {
            console.log("测试按钮点击");
          }}
        >
          按钮
        </Button>
      </div>
    );
  }
}

//要配合register.js来注册到对应业务场景
ecodeSDK.setCom("${appId}", "TestK1", TestK1);

5. 将 ecode 组件绑定到元素上

如上，只需改register.js 注册绑定成元素

//注册和绑定门户元素前端实现接口
const ebaseid = "Custom_1627443315510"; //元素id

ecodeSDK.rewritePortalCusEleQueue.push({
  fn: (params) => {
    const { props, options } = params;
    if (options.ebaseid === ebaseid) {
      const acParams = {
        appId: "${appId}",
        name: "MyCarousel", //模块名称
        params, //参数
        isPage: false, //是否是路由页面
        noCss: true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
      };
      //异步加载模块${appId}下的子模块CusEle
      return ecodeSDK.getAsyncCom(acParams);
    }
    return null;
  },
  order: 1,
  desc: "描述",
});

四、js 加载 eocde 组件(流程、建模可用)

// js加载eocde组件(流程、建模可用)
var params = {
  domId: "tishi", //渲染位置的domId，也就是表单上创建的
  id: "ecf759258a9f4159b2d9e4abc43a933d", //appId，也就是根目录的UUID，发布ID6e2d915798de4db59de2ad36a2e50c24
  name: "MyWeaHelpfulTip", //调用的组件名字，setCom时定义的
  cb: function () {
    //渲染完成回调
    console.log("success!");
  },
  noCss: true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
  props: {}, //表单的参数传入组件的方法
};
ecodeSDK.render(params);

五、隐藏头部方法

隐藏主题顶部和左侧的方法：
在地址中添加参数来隐藏顶部和左侧。
1、隐藏顶部参数：hideHeader=true
2、隐藏左侧参数：hideAside=true
例如：
1、主题下正常访问流程待办时的地址：/wui/index.html#/main/workflow/listDoing
2、隐藏顶部时添加对应参数的地址：/wui/index.html?hideHeader=true#/main/workflow/listDoing
3、隐藏顶部和左侧添加对应参数的地址：/wui/index.html?hideHeader=true&hideAside=true#/main/workflow/listDoing

隐藏建模顶部的方法：
在地址中添加参数来隐藏顶部。
1、隐藏顶部参数：hidetop=1

六、关闭页面方法

//关闭弹出窗口打开
window.close();
//关闭滑动窗口打开
window.parent.ModeForm.closePageBySlide();