@cainiaofe/cn-ui-m-lowcode
Version:
349 lines (347 loc) • 13.5 kB
JSX
import React from 'react';
import { Bundle } from '@ali/visualengine';
import Icon from './logo';
import {
createDataSource,
generateIndex,
getDataSourceById,
getDataSourceList,
uuid,
} from '@/common/util/util';
import {
dataOriginRequest,
dataOriginStatic,
pageDataSource,
} from '@/common/util/const';
import IdSetter from '@/common/setter/id-setter';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import { createFlowListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/type/button-position';
import CheckboxSetter from '@/common/setter/checkbox-setter';
import ExprSetter from '@/common/setter/expr-setter';
import { __dataSource__ } from '@/common/util/expr-const';
import {
getDataOriginSetterSnippet,
getStaticDataSourceSnippet,
} from '@/common/manager/setter-snippet';
export default Bundle.createPrototype({
title: '页面',
componentName: 'CnPage',
// category: '自定义',
canOperating: false,
icon: Icon,
docUrl: '',
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',
items: [
{
name: 'noPadding',
title: '页面无内边距模式',
display: 'inline',
setter: 'BoolSetter',
},
{
name: 'hasCnFormFooterSubmit',
title: '预留表单吸底按钮空间',
display: 'inline',
setter: 'BoolSetter',
},
],
},
{
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' }),
],
},
},
},
{
name: 'dataSource',
title: '编辑静态数据',
display: 'plain',
className: 'cn-datasource-relative-setter',
setter: getStaticDataSourceSnippet(),
condition(prop) {
return (
prop?.parent?.getValue?.().dataOrigin ===
dataOriginStatic
);
},
},
{
// condition(prop){
// return prop?.parent?.getValue?.().dataOrigin !== dataOriginStatic
// },
name: 'deferPageRender',
display: 'inline',
title: '请求完成后再渲染页面',
setter: 'BoolSetter',
},
],
},
},
},
},
},
},
{
title: '页面初始动作列表',
name: 'actionList',
display: 'block',
setter: createFlowListSetters({
position: ButtonPosition.pageDidMount,
activeSetter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: (
<ExprSetter
configList={[
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
]}
/>
),
title: '简单表达式',
},
{
componentName: <CheckboxSetter />,
title: '启用/禁用',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
}),
},
],
},
},
},
},
],
});