当前位置：首页>前端>正文

泛微RESTful接口说明泛微e9

前端2024-04-20 00:17:23

文章目录

泛微 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();

查看全文

https://www.xamrdz.com/web/2t21923263.html

文章目录

泛微 weaver E9 前端梳理

一、建模相关

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

2. 建模查询列表方法

3. 建模查询自定义按钮

二、流程相关

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

三、ecode 开发

1. config 变量设置和引用

变量设置

变量引用

2. 复写组件

3. 复写接口

4. 编写 ecode 组件

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

创建 index.js 编写组件

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

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

五、隐藏头部方法

六、关闭页面方法

相关文章：