• 按钮注册
• 后端处理

按钮注册

在前端添加一个按钮并不像之前的普通项目，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 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 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：

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

• Service 实现类与 Dao 层交互，Dao 因为已经封装好了（类似于 Mybatis-Plus），所以继承封装好的 Dao 类即可：

  public class ServiceImpl extends ServiceSupport implements Service接口 {
      // ....
  }