本文摘要
介绍在泛微 Ecology 流程转数据配置页通过 ecodeSDK 注入重置字段映射按钮并复写保存请求、实现一键清空字段映射的二开方案。因映射下拉框实为 Table 组件无法直接复写，作者改用拦截请求参数的迂回思路实现，第二版还支持按表选择清空范围、修复状态未复位问题并限定按钮仅在字段映射页签显示，适合 Ecology 运维与 ecode 开发者参考。
A.引言
还记得去年某天我在讨论群里问清空字段映射的操作，今晚实现啦#(哭泣)
回想那天，我还正面对着屏幕上的几百个字段映射在发愁。#(想一想)
做这个功能主要是为了练手，好久没写ecode了；
如果你正巧需要，这能减轻你的运维工作量，那便更有意义了！
如果你还在学习路上，配合泛微 EC9 之 ecodeSDK API 文档食用更佳~
B.功能演示
C.曲折过程
很烦！遇到了坑！
这个页面的数据字段下拉框，竟然不能通过Select或WeaSelect组件复写！！！
一开始我做这个需求的时候，还感觉很简单，喵的，不就是个下拉框嘛，分分钟！
令我没想到的是，怎么查也没查到组件名。。。。
最终还是靠我的泛微 ecode 开发辅助 - ecode 组件全局检索
发现竟然用的非标准Select组件，而是，一整个Table组件！！！😓
ecodeSDK.overwritePropsFnQueueMapSet('Select', { fn: (newProps) => { if (window.location.hash.indexOf('#/workflowengine/path/pathSet/pathDetail/advanceSet/workflowToMode') < 0) return; console.log('"Select newProps":', newProps); console.log('!找到Select组件啦！！！！！！'); },});
ecodeSDK.overwritePropsFnQueueMapSet('WeaSelect', { fn: (newProps) => { if (window.location.hash.indexOf('#/workflowengine/path/pathSet/pathDetail/advanceSet/workflowToMode') < 0) return; console.log('"WeaSelect newProps":', newProps); console.log('!找到WeaSelect组件啦！！！！！！'); },});再看Table组件，好家伙，这个组件没有存值！😒
好好好，改DOM结构试试！也不行！🤮
a~~ #(皱眉)怎么办呢？思索片刻，行！我直接‘迂回策略’~复写请求!，开搞！
D.最终代码
V1版本（历史）：只清空/重置全部字段映射
let isClearButtonClicked = false;
ecodeSDK.overwritePropsFnQueueMapSet('WeaDialog', { fn: (newProps) => { if (window.location.hash.indexOf('#/workflowengine/path/pathSet/pathDetail/advanceSet/workflowToMode') < 0) return;
if (newProps.title && newProps.title.includes('流程转数据：')) { const { Tooltip, Button } = antd; newProps.buttons.unshift( <Tooltip placement="topLeft" title="（注：第一个字段映射为空时，将初始化为自动映射，不为空则清空所有字段映射）"> <Button key="clearMapping" onClick={handleClearMapping}> 重置字段映射 </Button> </Tooltip> );
function handleClearMapping() { if (window.antd && window.antd.Modal) { window.antd.Modal.warning({ title: '风险提示', content: '即将重置字段映射配置，请谨慎操作！', okText: '确认重置', cancelText: '取消操作', onOk: () => { isClearButtonClicked = true; const saveButton = newProps.buttons.find(button => button.props.children === "保存"); if (saveButton && saveButton.props.onClick) { saveButton.props.onClick(); } }, }); } } } },});
ecodeSDK.rewriteApiParamsQueueSet({ fn: (url, method, params) => { if (isClearButtonClicked && url.indexOf("/api/cube/mode/mode/saveWorkflowToMode") !== -1) { Object.keys(params).forEach(key => { if (key.startsWith('wffieldid') && key !== 'wffieldid_0_0') { params[key] = ''; } }); }
return { url: url, method: method, params: params }; }});2024年3月29日 15:10:54 丸子根据今日收到的需求，感觉比较合理，所以更新了第二版本 更新内容如下：
- 增加选择清空表功能————可以根据情况，选择自己需要清空的表
- 修复点击重置字段映射按钮后没有取消重置状态的BUG
- 修改为只在字段映射页签显示按钮
emmmm增加选择表功能后，其实可以通过逻辑来处理掉 需要选择主表第一个字段映射的问题，但是，嘿嘿，我就不，略略略！😉
let isClearButtonClicked = false;let mainActiveKey = '';let selectOptions = '';let selectValue = '';let clearButton = '';
ecodeSDK.overwritePropsFnQueueMapSet('WeaDialog', { fn: (newProps) => { if (window.location.hash.indexOf('#/workflowengine/path/pathSet/pathDetail/advanceSet/workflowToMode') < 0) return;
if (newProps.title && newProps.title.includes('流程转数据：')) { const { Tooltip, Button,Select } = antd; newProps.buttons.unshift( <Tooltip placement="topLeft" title="（注：重置全部映射时，若主表第一个字段映射为空，将初始化为自动映射）"> <Button key="clearMapping" onClick={handleClearMapping} className="clear-button" > 重置字段映射 </Button> </Tooltip> );
function handleClearMapping() { if (window.antd && window.antd.Modal) { console.log("selectValue 默认值为：", selectValue); const content = ( <div> <div>重置字段映射配置，请谨慎操作！</div> <div>即将清空以下字段映射：</div> <Select defaultValue={selectOptions.map(option => option.key)} multiple style={{ width: '100%' }} onChange={value => { selectValue = value; }}> {selectOptions.map(option => ( <Select.Option key={option.key} value={option.key}>{option.value}</Select.Option> ))} </Select> </div> ); window.antd.Modal.warning({ title: '风险提示', content: content, okText: '确认重置', cancelText: '取消操作', onOk: () => { isClearButtonClicked = true; const saveButton = newProps.buttons.find(button => button.props.children === "保存"); if (saveButton && saveButton.props.onClick) { saveButton.props.onClick(); } }, }); } } } },});
ecodeSDK.rewriteApiParamsQueueSet({ fn: (url, method, params) => { if (isClearButtonClicked && url.indexOf("/api/cube/mode/mode/saveWorkflowToMode") !== -1) { Object.keys(params).forEach(key => { if (key.startsWith('wffieldid') && key !== 'wffieldid_0_0') { if (selectValue.includes(key.split('_')[1])) { params[key] = ''; } } }); isClearButtonClicked = false; }
return { url: url, method: method, params: params }; }});
ecodeSDK.overwritePropsFnQueueMapSet('Tabs', { fn: (newProps) => { if (window.location.hash.indexOf('#/workflowengine/path/pathSet/pathDetail/advanceSet/workflowToMode') < 0) return; if (newProps.children && newProps.children.length > 0 && newProps.children[0].props.tab === '基础信息') { mainActiveKey = newProps.activeKey; clearButton = clearButton || document.querySelector('.clear-button'); clearButton && (clearButton.style.display = mainActiveKey !== '2' ? "none" : ""); }
if (newProps.children && newProps.children.length > 0 && newProps.children[0].props.tab === '主表') { selectOptions = newProps.children.map(child => ({ key: child.key, value: child.props.tab })); selectValue = selectOptions.map(option => option.key); } },});✅
成功的关键在于不断探索和尝试，直到找到解决问题的方法。