@cainiaofe/cn-ui-lowcode
Version:
317 lines (314 loc) • 8.89 kB
JavaScript
import { Bundle } from '@ali/visualengine';
import React from 'react';
// import { createSlot } from '@ali/vu-slot-property';
import Icon from './logo.tsx';
import { handleI18nLabel, uuid } from '@/common/util/util';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import IdSetter from '@/common/setter/id-setter';
import { createButtonListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/common/manager/position/button-position';
import { createDataSourceSetters } from '@/lowcode/cn-form-alc/prototype/form-item';
import {
getDataOriginSetterSnippet,
getStepShapeSetterSnippet,
} from '@/common/manager/setter-snippet';
import { createEventSetters } from '@/common/manager/event';
import { __dataSource__ } from '@/common/util/expr-const';
const CnStepBundle = Bundle.createPrototype({
title: '步骤条（CnStep）',
componentName: 'CnStep',
category: '反馈',
icon: Icon,
docUrl:
'https://cone.cainiao-inc.com/market/awesome?business=internationality&id=3313',
isContainer: false,
canHovering: true,
canSelecting: true,
canDragging: true,
enableCopy: true,
snippets: [
{
screenshot:
'https://img.alicdn.com/tfs/TB1gaZrr.T1gK0jSZFhXXaAtVXa-1048-366.png',
label: 'CnStep',
schema: {
componentName: 'CnStep',
props: {},
},
},
],
configure: [
{
name: 'isCnStep',
title: 'isCnStep',
initialValue: true,
display: 'none',
},
{
name: '_context',
title: '上下文',
initialValue: {
type: 'JSExpression',
value: 'this',
},
display: 'none',
},
{
name: 'title',
title: '步骤条名称',
display: 'inline',
initialValue: '步骤条1',
tip: '当前步骤条的名称，方便检索使用',
setter: 'StringSetter',
},
getDataOriginSetterSnippet({
title: '步骤项配置',
}),
{
name: 'steps',
title: '步骤条配置',
display: 'plain',
initialValue: [
{
title: '标题',
content: '描述',
key: uuid(6),
},
],
setter: {
componentName: 'ArraySetter',
props: {
mode: 'list',
itemSetter: {
componentName: 'ObjectSetter',
initialValue(prop) {
return {
title: '标题',
content: '描述',
key: uuid(6),
};
},
props: {
config: {
items: [
{
name: 'title',
title: '标题',
setter: 'CnI18nSetter',
isRequired: true,
},
{
name: 'hidden',
title: '是否隐藏',
isRequired: true,
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'BoolSetter',
title: '布尔（true/false）',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
{
name: 'content',
title: '内容',
setter: 'CnI18nSetter',
},
{
name: 'key',
title: '步骤项编码',
setter: 'StringSetter',
},
],
},
},
},
},
},
hidden(value) {
return this?.parent?.parent?.getPropValue?.('dataOrigin') === 'request';
},
},
{
name: 'requestConfig',
title: '查询服务',
display: 'inline',
// className:'cn-inline-setter-reduce',
setter: {
componentName: 'ServiceChoiceSetter',
props: {
buttonText: '选择请求API',
params: {
env: 'pre',
pageSize: 999,
// serviceType: 'HSF',
},
paramSetter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'ParamSelectSetter',
props: {
dataKey: 'aa',
labelKey: 'aa',
valueKey: 'aa',
groupName: '参数列表',
},
title: '选择参数',
},
{
componentName: 'StringSetter',
title: '字符串',
},
],
},
},
},
},
hidden(value) {
return this?.parent?.parent?.getPropValue?.('dataOrigin') !== 'request';
},
},
{
name: 'current',
title: '当前步骤',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'NumberSetter',
title: '第几步',
},
{
componentName: 'StringSetter',
title: '填写步骤编码',
},
{
componentName: 'VariableSetter',
title: '变量绑定'
},
{
componentName: 'ParamSelectSetter',
props: {
configList: [
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '从数据源选择',
},
getJSExpressionPrototype({ type: 'base' }),
// {
// componentName: 'SelectSetter',
// title: '选择步骤',
// props(prop){
// const list = []
// const temp = prop?.getNode?.()?.getPropValue('steps');
// if(Array.isArray(temp) && temp.length > 0) {
// temp.forEach(item=>{
// const { key, title } = item;
// const realTitle = handleI18nLabel(title)
// if(key) {
// list.push({
// label: realTitle,
// value: key,
// })
// }
// })
// }
// return {
// options:list
// }
// }
// },
],
},
},
hidden(value) {
return this?.parent?.parent?.getPropValue?.('dataOrigin') === 'request';
},
},
{
name: 'leftButtons',
title: '底部左侧按钮栏',
display: 'accordion',
// collapsed:false,
initialValue: [],
// supportVariable: true,
setter: createButtonListSetters({ position: ButtonPosition.step }),
},
{
name: 'rightButtons',
title: '底部右侧按钮栏',
display: 'accordion',
// collapsed:false,
initialValue: [],
// supportVariable: true,
setter: createButtonListSetters({ position: ButtonPosition.step }),
},
{
name: 'stepStyle',
display: 'accordion',
title: '步骤条样式',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
getStepShapeSetterSnippet(),
{
name: 'direction',
title: '步骤条的展示方向',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '水平排列',
value: 'hoz',
},
{
title: '竖直排列',
value: 'ver',
},
],
},
},
},
],
},
},
},
},
...createEventSetters({
position: ButtonPosition.stepEvent,
initialValue: {
optType: 'flowAction',
},
title: '配置step的回调',
}),
{
title: '高级配置',
type: 'group',
collapsed: true,
display: 'accordion',
items: [...createDataSourceSetters()],
},
],
});
export default CnStepBundle;