@cainiaofe/cn-ui-lowcode
Version:
677 lines (674 loc) • 25.5 kB
JavaScript
import VisualEngine, { Bundle } from '@ali/visualengine';
import React from 'react';
// import { createSlot } from '@ali/vu-slot-property';
import Icon from './logo.tsx';
import {
condition,
createDataSource,
generateIndex,
getDataSourceById,
getDataSourceList,
uuid,
} from '@/common/util/util';
import IdSetter from '@/common/setter/id-setter';
import {
dataOriginRequest,
dataOriginStatic,
pageDataSource,
} from '@/common/util/const';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import { ButtonPosition } from '@/common/manager/position/button-position';
import {
createButtonListSetters,
createFlowListSetters,
getItem,
} from '@/common/manager/button';
import ExprSetter from '@/common/setter/expr-setter';
import CheckboxSetter from '@/common/setter/checkbox-setter';
import { __dataSource__ } from '@/common/util/expr-const';
import {
getDataOriginSetterSnippet,
getStaticDataSourceSnippet,
} from '@/common/manager/setter-snippet';
const CnPageBundle = Bundle.createPrototype({
title: '页面（CnPage）',
componentName: 'CnPage',
category: null,
canOperating: false,
// disableBehaviors: ['copy', 'remove'],
icon: Icon,
docUrl:
'https://cone.cainiao-inc.com/market/awesome?business=internationality&id=3313',
hasSlot: true,
isInline: false,
isContainer: true,
snippets: [
{
screenshot:
'https://img.alicdn.com/tfs/TB1gaZrr.T1gK0jSZFhXXaAtVXa-1048-366.png',
label: 'CnPage',
schema: {
componentName: 'CnPage',
props: {},
},
},
],
configure: [
{
name: 'isCnPage',
title: 'isCnPage',
initialValue: true,
display: 'none',
},
{
name: '_context',
title: '上下文',
initialValue: {
type: 'JSExpression',
value: 'this',
},
display: 'none',
},
{
title: '样式',
type: 'group',
display: 'accordion',
collapsed: true,
items: [
{
name: 'embeddable',
title: 'Tab卡片模式',
display: 'inline',
setter: 'BoolSetter',
// supportVariable: true,
},
{
name: 'noCard',
title: '无卡片模式',
display: 'inline',
setter: 'BoolSetter',
// supportVariable: true,
},
{
name: 'noPadding',
title: '页面无内边距模式',
display: 'inline',
setter: 'BoolSetter',
// supportVariable: true,
},
{
name: 'hasCnFormFooterSubmit',
title: '预留表单吸底按钮空间',
display: 'inline',
setter: 'BoolSetter',
// supportVariable: true,
},
{
name: 'flexDirection',
title: 'FTP场景下支持表格滚动',
display: 'inline',
setter: 'BoolSetter',
// supportVariable: true,
},
],
},
{
title: '面包屑配置',
name: 'breadcrumb',
display: 'block',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'dataOrigin',
title: '数据来源',
display: 'inline',
defaultValue: 'static',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '使用底座提供的面包屑数据',
value: 'useStandard',
},
{ title: '静态数据', value: 'static' },
{ title: '远程请求', value: 'request' },
],
},
},
},
{
name: 'requestConfig',
title: '查询服务',
display: 'inline',
setter: {
componentName: 'ServiceChoiceSetter',
props: {
mockDataTemplate: {
success: true,
data: [
{
label: '选项一',
value: 'first',
children: [
{
label: '子选项一',
value: 'sub1',
},
],
},
{
label: '选项二',
value: 'second',
},
],
},
paramTitleDom: <div className=''>请求参数配置：</div>,
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: '字符串',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
resultProcessFuncTemplate: `function(res) {
// 需要返回的如下的数据结构
// return {
// success: true,
// data: [
// {
// children:"xx"
// }
// ]
// }
return res;
}`,
// paramSetter:{
// componentName: 'ParamSelectSetter',
// props:{
// dataKey: 'config',
// labelKey: 'label',
// valueKey: 'name',
// groupName: '参数列表',
// },
// title:'选择参数',
// },
},
},
// hidden:hidden('Select'),
condition(prop) {
return (
prop?.parent?.getPropValue?.('dataOrigin') === 'request'
);
},
},
{
name: 'dataSource',
display: 'plain',
condition(prop) {
return (
prop?.parent?.getPropValue?.('dataOrigin') === 'static'
);
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
title: '设置静态数据',
componentName: 'ArraySetter',
props: {
mode: 'list',
itemSetter: {
componentName: 'ObjectSetter',
initialValue: {
children: '页面',
},
props: {
config: {
items: [
{
title: '节点名称',
isRequired: true,
name: 'children',
setter: 'CnI18nSetter',
},
{
title: '链接',
display: 'plain',
name: 'link',
setter: {
componentName: 'ObjectSetter',
props: () => {
const linkGetPrototypeList = getItem(
ButtonPosition.form,
'link',
'getPrototypeList',
);
return {
config: {
items: [
...linkGetPrototypeList(
ButtonPosition.form,
),
],
},
};
},
},
},
],
},
},
},
},
},
getJSExpressionPrototype({ type: 'breadcrumb' }),
],
},
},
},
],
},
},
},
},
{
title: '右上角按钮栏',
name: 'action',
display: 'accordion',
collapsed: true,
setter: createButtonListSetters({
position: ButtonPosition.pageRightButton,
}),
},
{
title: '页面渲染完成的回调',
name: 'componentDidMount',
display: 'plain',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'requestList',
title: '页面数据源列表（state）',
display: 'block',
extraProps: {
setValue(target, value) {
if (value && Array.isArray(value)) {
let dataSourceList = getDataSourceList() || [];
dataSourceList = dataSourceList.filter((item) => {
if (
item?.dataSourceId &&
item.dataSourceId?.startsWith?.(pageDataSource)
) {
return true;
}
});
const existPageDataSourceMap = {};
const toRemovePageDataSourceMap = {};
dataSourceList.forEach((item) => {
const { dataSourceId } = item;
if (dataSourceId) {
existPageDataSourceMap[dataSourceId] = item;
toRemovePageDataSourceMap[dataSourceId] = item;
}
});
for (const item of value) {
if (item) {
const { id, name, description } = item;
if (id) {
if (existPageDataSourceMap[id]) {
const {
value: dsValue,
label,
id: realDsId,
} = existPageDataSourceMap[id];
delete toRemovePageDataSourceMap[id];
if (label === description && name === dsValue) {
} else {
const ds = getDataSourceById(realDsId);
if (ds) {
const oldDsConfig = ds.getConfig();
if (oldDsConfig) {
ds.setConfig({
...oldDsConfig,
name,
description,
});
}
}
}
} else {
const newDs = createDataSource(item);
}
}
}
}
for (const pageDsId in toRemovePageDataSourceMap) {
const toRemoveItem =
toRemovePageDataSourceMap[pageDsId];
if (toRemoveItem?.id) {
VisualEngine?.context
?.getManager?.('dataPool')
?.removeItem?.(toRemoveItem.id);
}
}
}
},
},
// mutator(value) {
// },
setter: {
componentName: 'ArraySetter',
props: {
mode: 'list',
itemSetter: {
componentName: 'ObjectSetter',
initialValue(prop) {
const defaultName = 'data';
const defaultDescription = '数据';
const initialValue = {
id: `${pageDataSource}_${uuid(6)}`,
description: defaultDescription,
name: defaultName,
dataOrigin: dataOriginRequest,
};
if (prop) {
const existFields = prop.getValue() || [];
if (existFields?.length > 0) {
const newNameIndex = generateIndex(
existFields,
defaultName,
'name',
);
initialValue.description = `${defaultDescription}${newNameIndex}`;
initialValue.name = `${defaultName}${newNameIndex}`;
}
}
return initialValue;
},
props: {
config: {
items: [
{
name: 'id',
title: 'id',
display: 'inline',
setter: <IdSetter />,
},
{
name: 'description',
display: 'inline',
title: '数据名称',
isRequired: true,
setter: 'StringSetter',
},
{
name: 'name',
display: 'inline',
title: '数据编码',
isRequired: true,
setter: 'StringSetter',
},
getDataOriginSetterSnippet({
initialValue: 'request',
display: 'inline',
defaultValue: 'request',
}),
{
condition(prop) {
return (
prop?.parent?.getValue?.().dataOrigin !==
dataOriginStatic
);
},
name: 'requestConfig',
display: 'inline',
isRequired: true,
title: '请求API',
setter: {
componentName: 'ServiceChoiceSetter',
props: {
mockDataTemplate: {
success: true,
data: {
tableData: [
{
name: 'aa',
age: 18,
},
],
paging: {
currentPage: 1,
pageSize: 10,
totalCount: 1,
},
},
},
buttonText: 'API',
params: {
env: 'pre',
pageSize: 999,
// serviceType: 'HSF',
},
resultProcessFuncTemplate: `function(res, state) {
// 当前函数会将请求结果存储到当前数据上
return res.data;
}`,
paramSetter: [
{
componentName: 'ParamSelectSetter',
props: {
dataKey: 'aa',
labelKey: 'aa',
valueKey: 'aa',
groupName: '参数列表',
},
title: '选择参数',
},
{
componentName: 'StringSetter',
title: '字符串',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
{
condition(prop) {
return (
prop?.parent?.getValue?.().dataOrigin !==
dataOriginStatic
);
},
name: 'isAsync',
display: 'inline',
title: '开启异步请求',
setter: 'BoolSetter',
},
{
condition(prop) {
return (
prop?.parent?.getValue?.().dataOrigin !==
dataOriginStatic &&
prop?.parent?.getValue?.().isAsync !== true
);
},
name: 'deferPageRender',
display: 'inline',
title: '请求完成后再渲染页面',
setter: 'BoolSetter',
},
{
condition(prop) {
return (
prop?.parent?.getValue?.().dataOrigin !==
dataOriginStatic &&
prop?.parent?.getValue?.().isAsync === true
);
},
name: 'asyncCompleteActionList',
display: 'inline',
title: '配置数据加载完的操作',
setter: createFlowListSetters({
position:
ButtonPosition.pageAsyncRequestComplete,
activeSetter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: <CheckboxSetter />,
title: '启用/禁用',
},
{
componentName: (
<ExprSetter
configList={[
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
]}
/>
),
title: '简单表达式',
},
getJSExpressionPrototype({
type: 'base',
}),
],
},
},
}),
},
{
name: 'dataSource',
title: '编辑静态数据',
display: 'plain',
className: 'cn-datasource-relative-setter',
setter: getStaticDataSourceSnippet(),
condition(prop) {
return (
prop?.parent?.getValue?.().dataOrigin ===
dataOriginStatic
);
},
},
],
},
},
},
},
},
},
{
title: '页面初始动作列表',
name: 'actionList',
display: 'block',
setter: createFlowListSetters({
position: ButtonPosition.pageDidMount,
activeSetter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: <CheckboxSetter />,
title: '启用/禁用',
},
{
componentName: (
<ExprSetter
configList={[
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
]}
/>
),
title: '简单表达式',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
}),
},
],
},
},
},
},
{
title: '高级',
type: 'group',
display: 'accordion',
// collapsed: true,
// extraProps: {
// defaultCollapsed: true,
// },
items: [
{
name: 'title',
title: '标题',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'CnI18nSetter',
title: '纯文本',
},
getJSExpressionPrototype({
type: 'base',
}),
],
},
},
// supportVariable: true,
},
{
name: 'handleProps',
title: '手动设置组件props',
display: 'inline',
setter: getJSExpressionPrototype({
type: 'props',
}),
},
],
},
],
});
export default CnPageBundle;