本文摘要
针对泛微 Ecology EC9 流程保存按钮无法在后台直接关闭的需求，文章给出隐藏该按钮的方案演变：推荐做法是借助 CSS 的 :has 选择器隐藏顶部按钮与右键菜单中的保存项，仅做视觉隐藏、保存功能仍可被代码触发；同时回顾了通过 ecode SDK 复写 WeaReqTop 等组件属性来过滤按钮的旧方案，因其引发连锁 BUG 已不建议使用，供 EC9 二次开发人员参考。

2024年11月15日 14:33:10 最新解决方案

代码块如下

根据评论区小明的方案启发（感谢），故出此方案： 注意，该方案仅隐藏按钮，无法直接操作，不去除”保存”功能（使用代码等依旧可以触发）

<style type="text/css">
.ant-menu-item:has(.wea-right-menu-item span[title="保存"]) {
    display: none !important;
}


button[title="保存"] {
    display: none !important;
}
</style>

实现效果： 2024-11-15T06:33.png

历史ecode处理记录（方案违规）

🚨 不建议使用该方案告知！！！

2023年9月21日 10:58:07 经测试存在较大连锁BUG导致其他功能不可用，丸子已不建议使用该方案！

🚨 文章暂未完成告知

丸子暂时还未完成该文章，为提前公布代码故将草稿开放。

1. 前言

故事&起源

有一天，丸子在公司接到这样一个需求：“把那个流程的保存按钮！关了！”，起始十分疑惑，后来得知，有员工一直在反馈同一个问题：“？为什么我点了保存，那个台账上看不到我填的详情信息。”

（因为在流程保存时，没有做触发更新台账（建模应用）信息，只有用户提交时才会将信息更新到台账。）

保存按钮

丸子想了蛮久，感觉直接取消这个按钮并不是很好，但最后，奈何咱比较懒，还是选择了既然懒得解决问题，那就解决出问题的人#(暗地观察)直接取消按钮：“不就是一个开关一关就完事了嘛！”，就它了，直接取消按钮！

然鹅！！#(咽气) 这个选择框，竟然是！灰的！灰的！灰的！

灰色的保存选择框

交流群提问，暂时没有什么好办法，只能ecode了！ 可我，还没写过，但！既然选择了路，哭着也要走完！#(喜极而泣) 开整！

⚠️ 寻找大佬

如果有大佬有什么更方便，或者能直接将选择框改为可选的办法，请留言！

似乎有更简单的办法了

今天是2023年7月26日（一个月后），我找到了直接ecode拦截复写响应数据的办法，可以直接复写按钮请求返回数据达到目的。

2. 实现步骤

分析

  • 修改代码：展示如何在代码中实现隐藏保存按钮的功能。
  • 调试与测试：描述代码调试和功能测试的过程。

实现

丸子近期较忙，暂不梳理该小项目过程，且暂不提供帮助，以下代码回复可见，有问题请留言或一起在下面讨论区交流。

[hide]

let enable = true;
const allowedWorkflowIds = [83, 85]; // 允许的流程ID列表


const runScript = () => {
  // 代码块钩子，类似放在代码块中或者jquery.ready
  // 可操作WfForm，以及部分表单dom hiden、ReactDOM.render
  console.log('runScript!');
  isRun = true; // 确保只执行一次
};


//判断条件
const checkConditions = () => {
  const { hash } = window.location;
  if (!hash.startsWith('#/main/workflow/req')) return false; // 判断页面地址
  if (!ecCom.WeaTools.Base64) return false; // 完整组件库加载完成
  if (!WfForm) return false; // 表单sdk加载完成
  const baseInfo = WfForm.getBaseInfo();
  const { workflowid } = baseInfo;
  return allowedWorkflowIds.includes(workflowid); // 判断流程id是否在允许的列表中
};


//复写下拉菜单
const overwriteDropMenuDatas = (newProps) => {
  if (newProps && newProps.dropMenuDatas) {
    console.log('dropMenuDatas:', newProps.dropMenuDatas);
    const { dropMenuDatas } = newProps;
    newProps.dropMenuDatas = dropMenuDatas.filter(item => item.key !== 'BTN_WFSAVE_1');
    console.log('newdropMenuDatas:', newProps.dropMenuDatas);
  }
};


//复写右侧按钮
const overwriteButtons = (newProps) => {
  if (newProps && newProps.buttons) {
    console.log('buttons:', newProps.buttons);
    const { buttons } = newProps;
    newProps.buttons = buttons.filter(button => button.props.title !== '保存');
  }
};


//复写右键菜单
const overwriteRightMenuDatas = (newProps) => {
  if (newProps && newProps.datas) {
    console.log('datas:', newProps.datas);
    const { datas } = newProps;
    newProps.datas = datas.filter(item => item.key !== 'BTN_WFSAVE_1');
    console.log('newdropMenuDatas:', newProps.datas);
  }
};


ecodeSDK.overwritePropsFnQueueMapSet('WeaReqTop', {
  fn: (newProps) => {
    if (!enable || !checkConditions()) return; // 开关打开、条件不满足
    overwriteDropMenuDatas(newProps);
    overwriteButtons(newProps);
    // runScript(); // 此处可执行代码块
    return newProps;
  },
});


ecodeSDK.overwritePropsFnQueueMapSet('WeaRightMenu', {
  fn: (newProps) => {
    if (!enable || !checkConditions()) return; // 开关打开、条件不满足
    overwriteRightMenuDatas(newProps);
    return newProps;
  },
});

[/hide]

优化

发现存在有些右键菜单中的保存按钮item.key并不是BTN_WFSAVE_1，但肯定包含BTN_WFSAVE，故需修改两处，以保证所有保存按钮均被排除：

// newProps.dropMenuDatas = dropMenuDatas.filter(item => item.key !== 'BTN_WFSAVE_1');
newProps.dropMenuDatas = dropMenuDatas.filter(item => !item.key.includes('BTN_WFSAVE'));
// newProps.datas = datas.filter(item => item.key !== 'BTN_WFSAVE_1');
newProps.datas = datas.filter(item => !item.key.includes('BTN_WFSAVE'));

3. 效果展示

  • 展示功能效果：使用截图或视频展示隐藏按钮功能实现后的效果。

4. 遇到挑战

没有挑战难度！

  • 不假思索的、直接臆想的、肯定绝决的，那个，答复，害了我（也带给了我经验）这就是最大的挑战。

5. 总总结结

  • 功能回顾：简要回顾“隐藏流程保存按钮”功能的实现。
  • 收获：分享在实现过程中所学到的经验和收获。

6. 致敬未来

  • 优化方向：讨论如何进一步改进和优化功能。
  • 新功能展望：探讨未来可能添加的其他功能和改进。