YonYou - 开发流程原创

按钮注册

在前端添加一个按钮并不像之前的普通项目，button、文字。而是利用先利用网页创建一个按钮存入数据库，再在自己的项目使用。

首先在网页（后端 8088 或者前端 3006）里登录，然后左上角找到动态建模平台/开发配置/应用管理/应用注册，注册一个按钮，类型是 command，并记住按钮的 key

进入 hotwebs/src/模块名/模块名/main/index.js

URLS 对象中添加后端能响应按钮的 action 类，例子：

const URLS = {
  // 后台请求路径
  AddUrl: "/nccloud/emm/tang_lsp/AddTang_liuspAction.do", // 新增时请求默认值 Action
  SaveUrl: "/nccloud/emm/tang_lsp/SaveTang_liuspAction.do", // 保存 Action
  QueryUrl: "/nccloud/emm/tang_lsp/ListTang_liuspAction.do", // 查询 Action
  PrintUrl: "/nccloud/emm/tang_lsp/PrintTang_liuspAction.do", // 打印 Action
};

ACTIONS 里添加自己的按钮，例子：

const ACTIONS = {
  // 按钮编码
  ADD: "Add", // 新增
  EDIT: "Edit", // 修改
  DELETE: "Delete", // 删除
  SAVE: "Save", // 保存
  CANCEL: "Cancel", // 取消
  REFRESH: "Refresh", // 刷新
  PRINT: "Print", // 打印
  OUTPUT: "Output", // 打印输出
};

key 随便去，规范是大写，然后 value 就是在网页添加按钮的 key。

添加按钮的可见性，否则页面上不会显示改按钮，例子：

// 按钮显隐性控制
this.props.button.setButtonsVisible({
  [ACTIONS.ADD]: true,
  [ACTIONS.DELETE]: true,
  [ACTIONS.EDIT]: isBrowse,
  [ACTIONS.SAVE]: isEdit,
  [ACTIONS.CANCEL]: isEdit,
  [ACTIONS.REFRESH]: isBrowse,
  [ACTIONS.PRINT]: isBrowse,
});

添加按钮的点击事件，例子：

onButtonClick = (props, btncode, record, index) => {
  let selectedRows =
    this.props.editTable.getCheckedRows(this.state.table.area) || [];
  let pks =
    selectedRows.length > 0 &&
    selectedRows.map((row) => row.data.values[FIELDS.PRIMARYKEY].value);
  // let { pks } = this.getPksByShowMode();
  switch (btncode) {
    case ACTIONS.ADD: // 新增
      this.onAdd();
      break;
    case ACTIONS.EDIT: // 编辑
      this.onEdit();
      break;
    case ACTIONS.DELETE: // 删除
      record ? this.onRowDelete(record, index) : this.onDelete();
      break;
    case ACTIONS.SAVE: // 保存
      this.onSave();
      break;
    case ACTIONS.CANCEL: // 取消
      this.onCancel();
      break;
    case ACTIONS.REFRESH: // 刷新
      this.onRefresh();
      break;
    case ACTIONS.PRINT: // 打印
      this.onPrint(pks);
      break;
    case ACTIONS.OUTPUT: // 打印输出
      this.onOutPut(pks);
      break;
    default:
      break;
  }
};
// 函数太多，这里演示一个
onPrint = (pkarray, callback = EMPTY_FN) => {
  print(
    "pdf", // 支持两类: 'html' 为模板打印,' pdf' 为 pdf 打印
    URLS.PrintUrl, // 打印请求的 url
    {
      uncode: this.config.moduleid, // 功能节点编码
      nodekey: nodeKey, // 模板节点标识
      oids: pkarray, // 需要打印的单据主键
    }
  );
};

注意：print 内部其实有个 ajax 请求，其中 url 是 URLS.xxx，要能响应后端处理的 Action 类。

后端处理

按钮注册并且写好了点击事件，下面开始配置后端，放回给前端。

找到自己的 public、client、private 模块
- public 专门写 Service 接口
- client 专门写 Action 类，Action 类类似于 SpringBoot 的 Controller
- private 专门 Service 的实现类

首先在 client 的 yyconfig 的 action 包添加前端访问的 url 请求

xml

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<actions>
    <action>
        <name>emm.tang_lsp.SaveTang_liuspAction</name>
        <label>保存动作</label>
        <clazz>nccloud.web.emm.tang_lsp.tang_lsp.action.SaveTang_liuspAction</clazz>
    </action>
    <action>
        <name>emm.tang_lsp.Tang_lspTreeRefAction</name>
        <label>档案特性默认树型参照</label>
        <clazz>nccloud.web.emm.tang_lsp.tang_lsp.action.Tang_lspTreeRefAction</clazz>
    </action>
    <action>
        <name>emm.tang_lsp.ListTang_liuspAction</name>
        <label>列表查询动作</label>
        <clazz>nccloud.web.emm.tang_lsp.tang_lsp.action.ListTang_liuspAction</clazz>
    </action>
    <action>
        <name>emm.tang_lsp.Tang_lspGridRefAction</name>
        <label>档案特性默认表型参照</label>
        <clazz>nccloud.web.emm.tang_lsp.tang_lsp.action.Tang_lspGridRefAction</clazz>
    </action>
    <action>
        <name>emm.tang_lsp.Tang_lspDefaultGridRefAction</name>
        <label>默认表型参照（非档案特性生成）</label>
        <clazz>nccloud.web.emm.tang_lsp.tang_lsp.action.Tang_lspDefaultGridRefAction</clazz>
    </action>
    <action>
        <name>emm.tang_lsp.AddTang_liuspAction</name>
        <label>新增动作</label>
        <clazz>nccloud.web.emm.tang_lsp.tang_lsp.action.AddTang_liuspAction</clazz>
    </action>
    <action>
        <name>emm.tang_lsp.PrintTang_liuspAction</name>
        <label>打印动作</label>
        <clazz>nccloud.web.emm.tang_lsp.tang_lsp.action.PrintTang_liuspAction</clazz>
    </action>
</actions>

其中 name 对应前端的 url，前缀 /nccloud 是是项目固定的前缀。

当前端的请求对应上某个 name，则去找到对应的 clazz。

下面给每个 Action 类进行授权，否则找到 clazz 类，也无法进行处理，在 client 的 yyconfig 的 authorize 包授权

xml

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<authorizes>
    <authorize>
        <appcode>*</appcode>
        <actions>
            <action>emm.tang_lsp.SaveTang_liuspAction</action>
            <action>emm.tang_lsp.Tang_lspTreeRefAction</action>
            <action>emm.tang_lsp.ListTang_liuspAction</action>
            <action>emm.tang_lsp.Tang_lspGridRefAction</action>
            <action>emm.tang_lsp.Tang_lspDefaultGridRefAction</action>
            <action>emm.tang_lsp.AddTang_liuspAction</action>
            <action>emm.tang_lsp.PrintTang_liuspAction</action>
        </actions>
    </authorize>
</authorizes>

然后编写 Action 类，继承 BaseAction：

java

public class ListTang_liuspAction extends BaseAction {
    @Override
    public Object doAction(IRequest request, RequstParamWapper paramWapper) throws Throwable{
		// ...，调用 Service 实现类
    }
}

Service 实现类与 Dao 层交互，Dao 因为已经封装好了（类似于 Mybatis-Plus），所以继承封装好的 Dao 类即可：
java
```
public class ServiceImpl extends ServiceSupport implements Service接口 {
    // ....
}
```
1
2
3

YonYou - 开发流程 原创 ​

按钮注册 ​

后端处理 ​

YonYou - 开发流程原创

按钮注册

后端处理