iuap-sandbox-modal
v1.0.75
Published
配置迁移弹窗组件
Downloads
18
Readme
安装
安装方法：
npm安装：
npm install iuap-sandbox-modal
yarn安装：
yarn add iuap-sandbox-modal
ynpm安装：
ynpm install iuap-sandbox-modal
引入方法
React环境
import Assembly from 'iuap-sandbox-modal'
import 'iuap-sandbox-modal/lib/index.css'
onOk = (type) => {
// 代表请求成功或失败
}
<Assembly visible={showAddBox} onCancel={this.onCancel} onOk={this.onOk} />
非React环境（如：Vue环境）import { VuePlugin } from 'vuera'
Vue.use(VuePlugin)
import Assembly from 'iuap-sandbox-modal/build/index.js' // 非react环境
import 'iuap-sandbox-modal/build/index.css'
onOk = (type) => {
// 代表请求成功或失败
}
<Assembly visible={showAddBox} onCancel={this.onCancel} onOk={this.onOk} />
API
| 参数 | 说明 | 类型 | 默认值 | | :---------------------- | :------------------------------------------ | :------------- | :---------------- | | visible | 弹窗是否打开(建议再回调参数中控制) | boolean | false | | onOk | 确定按钮触发时间有回调告知请求成功与否 | function | - | | onCancel | 取消按钮点击触发的事件 | function | - | | onRemove | 移除数据触发回调(可重新获取storage数据)渲染数量 | function |- | | thirdName | 三级表头（thirdName）对应的表头名字 | string | 原子服务/业务对象| | popupContainer | modal挂载节点 | function | null
jDiwork判断切换页签
大量使用轮询同步数量可能会造成性能问题 可以用以下的方案步数量
利用jDiwork的能力可以监听到切换页签事件 当切换到自己页签的时候 可以再其中获取最新的数量以达到同步数量的目的
有些情况下updateService直接触发updateService会无效 可以放在setTimeout延迟1000处理
jDiwork.updateService({ serviceCode: '自己服务的serviceCode' }, { customActiveTab: true })
<!-- 去iframe -->
jDiwork.onData(serviceCode, (data) => {
})
<!-- iframe中 -->
jDiwork.onData((data) => {
})
data.action 中changeTabs 能够监听到页签切换事件判断是否为专属化
再公共参数中 配置迁移打开之后 获取值为true
cb.rest.AppContext.getCommonOptionValue('enableMigration')ui模板使用的SVG
import React from 'react';
注意：下面ui模板引用例子也有更改需要看。现在是用的是svg(数量)这种样式，最多999条之后显示999+
const SvgSLoad = () => (
<svg
width="20"
height="20"
viewBox="0 0 20 18"
class="design-iconfont"
>
<g fill-rule="nonzero" fill="none">
<path
d="M13.7451997,0.000133770412 C13.7595448,-0.000137799658 13.7739172,3.29607715e-06 13.7882987,0.0005645908 L13.842956,0.00150551888 C14.1621528,0.00150551888 14.4347766,0.200908508 14.5430551,0.481942321 L19.2803301,5.2786394 C19.3040817,5.30239098 19.3262476,5.32772822 19.3466554,5.35447871 C19.450874,5.48835359 19.4993905,5.64199615 19.5014338,5.79363485 L19.5,5.80896948 L19.5,14.7515055 C19.5,16.2702886 18.2687831,17.5015055 16.75,17.5015055 L4.75,17.5015055 C3.23121694,17.5015055 2,16.2702886 2,14.7515055 L2,12.8160505 C2,12.401837 2.33578644,12.0660505 2.75,12.0660505 C3.16421356,12.0660505 3.5,12.401837 3.5,12.8160505 L3.5,14.7515055 C3.5,15.4418615 4.05964406,16.0015055 4.75,16.0015055 L16.75,16.0015055 C17.4403559,16.0015055 18,15.4418615 18,14.7515055 L18,6.558 L13.7538136,6.55896948 C13.3741179,6.55896948 13.0603227,6.2768156 13.0106603,5.91074004 L13.0038136,5.80896948 L13.003,1.501 L4.75,1.50150552 C4.05964406,1.50150552 3.5,2.06114958 3.5,2.75150552 L3.5,6.8185003 C3.5,7.23271387 3.16421356,7.5685003 2.75,7.5685003 C2.33578644,7.5685003 2,7.23271387 2,6.8185003 L2,2.75150552 C2,1.23272246 3.23121694,0.00150551888 4.75,0.00150551888 Z M14.5038136,2.57750552 L14.5038136,5.05850552 L16.9548136,5.05850552 L14.5038136,2.57750552 Z"
fill="#505767"
/>
<path
d="M12.3409903,7.2818356 L14.4623106,9.40315595 C14.7552038,9.69604917 14.7552038,10.1709229 14.4623106,10.4638161 L12.3409903,12.5851365 C12.048097,12.8780297 11.5732233,12.8780297 11.2803301,12.5851365 C10.9874369,12.2922432 10.9874369,11.8173695 11.2803301,11.5244763 L12.102,10.7011657 L0.75,10.7015055 C0.335786438,10.7015055 0,10.3657191 0,9.95150552 C0,9.53729196 0.335786438,9.20150552 0.75,9.20150552 L12.138,9.20116569 L11.2803301,8.34249578 C10.9874369,8.04960256 10.9874369,7.57472882 11.2803301,7.2818356 C11.5732233,6.98894239 12.048097,6.98894239 12.3409903,7.2818356 Z"
fill="#E23"
/>
</g>
</svg>
);
导出组件后可直接使用SVG
export default SvgSLoad;表格数据 ui模板例子
[
{
"labelCode": "PF", // 第一级 domainCode 领域编码（如果迁移的配置服务管理节点本身有左树，则传递用户选择的树一级节点；如果没有左树则填写当前节点所属应用一级节点）
"labelName": "数字化建模", // 第一级 name 领域名称（如果迁移的配置服务管理节点本身有左树，则传递用户选择的树一级节点；如果没有左树则填写当前节点所属应用一级节点）
"appCode": "AT17C1647005000004", // 第二级 appCode 应用编码（如果迁移的配置服务管理节点本身有左树，则传递用户选择的树二级节点；如果没有左树则填写当前节点所属应用二级节点）
"appName": "规则引擎（李红）-202301", // 第二级 name 应用名称（如果迁移的配置服务管理节点本身有左树，则传递用户选择的树二级节点；如果没有左树则填写当前节点所属应用二级节点）
"thirdName": 1, // 第三级名称 业务对象/原子服务/单据类型名称应用名称（如果迁移的配置服务管理节点本身有左树，则传递用户选择的树三级节点；如果没有左树则填写当前节点所属应用三级节点）
"thirdType": 'service', // 见下表《thirdType枚举》
"thirdCode": "1711890933975875591", // 第三级 serviceCode 业务对象/原子服务/单据类型编码（如果迁移的配置服务管理节点本身有左树，则传递用户选择的树三级节点；如果没有左树则填写当前节点所属应用三级节点）
"domainCode": "developplatform" // 第三级 domain 除非特殊特殊说明 传空串
"dataPk": "1711890117929992217", // 迁移数据id
"name": "规则引擎测试页面002详情-页面模板", // 迁移数据名称
"code": 'tmp01' // 迁移数据编码
"type": 'ui_template', // 见下表《type枚举》
"extData": {} 对接的时候确定
注：extData只需要添加跟后端确定好的字段，不要加入不相关数据，容易对数据库造成负担
}
]
注意：dataPk如果传的不是id，extData里面在写一下type枚举
v3版本根据下表全集，
compare版本通过按照下方进行处理
领域按照业务对象或者原子服务的接入方式：
领域前端接入方式：
1. 业务对象接入
thirdType：busi_obj
thirdCode：业务对象编码
thirdName：业务对象对应的名称
type： 业务对象编码
2. 原子服务接入
thirdType：service
thirdCode：工作台原子服务编码
thirdName：工作台原子服务名称
type： 工作台原子服务编码
3. 在配置迁移注册界面注册分类
thirdType：service
thirdCode：工作台原子服务编码
thirdName：工作台原子服务名称
type： 注册分类编码 "contract_template": "合同模板",
"contract_term": "合同条款",
"trans_type": "交易类型",
"business_stage": "业务活动规则",
"custom_doc_define": "自定义档案定义",
"custom_doc": "自定义档案维护",
"import_template": "导入导出模板",
"ui_template": "UI模板",
"message_template": "消息模板",
"business_message": "业务消息配置",
"message_policy": "消息发送策略",
"print_template": "打印模板",
"code_rule": "编码规则",
"character_class": "特征分类",
"characteristics": "特征组",
"character": "特征",
"mulitlang": "多语资源",
"businessflow_convert":"业务流单据转换规则",
"businessflow_design":'业务流定义转换规则',
"businessflow_cooperate":"业务流内部购销协同设置",
"workflow_design":"工作流设计",
"workflow_cooperate":"工作流协作关系",
"workflow_common_use":"工作流常用语设置",
"workflow_proxy":"工作流代理设置",
"workflow_my_proxy":"工作流我的代理",
"designer_script":"函数",
"migration_ruleengine":"相关性规则",
"role_management":"角色管理",
"migration_ruleengine_jcb":"决策表"
thirdType枚举
"原子服务":"service",
"交易类型":"trans_type",
"单据类型":"bill_type",
"业务对象":"busi_obj",
"自定义数据":"custom"注入sessionStorage
<script src="/mdf/resource?mdfrefer=true"></script>
cb 不存在使用可使用上面的链接
打开组件后统一从sessionStorage获取数据
该方法再引入组件的时候已经直接挂载到window上可直接使用
参数说明 objData 注入对象
dataPk 唯一值用来去重
function addToSandboxList(objData) {
const baseKey = `${cb.context.getTenantId()}-${cb.context.getUserId()}`;
const sandboxListObj = JSON.parse(sessionStorage.getItem('sandboxListObj')) || {};
// 如果传入的是单个对象，将其转换为数组
if (!Array.isArray(objData)) {
objData = [objData];
}
objData.forEach(obj => {
if (!sandboxListObj[baseKey]) {
sandboxListObj[baseKey] = [obj];
} else {
const isObjDataExists = sandboxListObj[baseKey].find(o => (
o.dataPk === obj.dataPk && o.thirdCode ==obj.thirdCode
));
if (!isObjDataExists) {
sandboxListObj[baseKey].push(obj);
} else {
Message.destroy()
Message.create({ content: '数据重复请检查数据', color: 'warning' })
console.log('重复数据');
}
}
});
sessionStorage.setItem('sandboxListObj', JSON.stringify(sandboxListObj));
}ui模板引用组件示例代码示例代码
import Assembly from 'iuap-sandbox-modal'
import 'iuap-sandbox-modal/lib/index.css'
import SvgSLoad from './svgLoad';
class SandboxBtn extends Component {
constructor(props) {
super(props);
this.intervalId = null
this.state = {
showBtn: false,
showAddBox: false,
count: 0
};
}
componentDidMount() {
setTimeout(() => {
jDiwork.updateService({ serviceCode: 'GZTTMP012' }, { customActiveTab: true })
<!-- 去iframe -->
jDiwork.onData('GZTTMP012', (data) => {
if (data.action == 'changeTabs') {
_this.getCount()
}
})
<!-- iframe中 -->
jDiwork.onData((data) => {
if (data.action == 'changeTabs') {
_this.getCount()
}
})
}, 1000)
const self = this;
cb.events.un("showSandboxBadge");
cb.events.on("showSandboxBadge", function (args) {
self.getCount()
self.setState({
showBtn: true,
});
});
}
componentWillUnmount() {
}
componentDidUpdate(prevProps, prevState) {
}
getCount = () => {
const baseKey = `${cb.context.getTenantId()}-${cb.context.getUserId()}`;
const sandboxListObj = JSON.parse(sessionStorage.getItem('sandboxListObj'))
let newCount = 0
if (sandboxListObj && sandboxListObj[baseKey]) {
newCount = sandboxListObj[baseKey].length
}
this.setState({
count: newCount
})
}
show = () => {
const{showAddBox} =this.state
this.setState({
showAddBox: true
})
}
onCancel = () => {
this.setState({
showAddBox: false
})
}
onOk = (type) => {
this.setState({
showAddBox: !type,
showBtn: !type
})
}
render() {
const { showBtn, showAddBox, count } = this.state
let useCount = count >999 ? '999+':count
return (
<div className="sandbox-group">
{
showBtn ? <span className="btn" onClick={this.show}><SvgSLoad />({useCount})</span>:null
}
<Assembly
visible={showAddBox}
onCancel={this.onCancel}
onOk={this.onOk}
onRemove={this.getCount}
popupContainer={ document.getElementsByClassName('query_templatelist')[0]} />
</div>
)
}
}