@cainiaofe/cn-ui-lowcode
Version:
1,113 lines (1,108 loc) • 38.3 kB
JavaScript
import React from 'react';
import { Bundle } from '@ali/visualengine';
import columnsPrototype from './prototype/columns';
import operatePrototype from './prototype/operate';
import pagePrototype from './prototype/page';
import rowSelectionPrototype from './prototype/rowSelection';
import toolbarPrototype from './prototype/toolbar';
import Icon from './logo.tsx';
import { CnTooltip } from '@cainiaofe/cn-ui';
import {
getJSExpressionPrototype,
getParamSetterPrototype,
} from '@/common/manager/common-style';
import IdSetter from '@/common/setter/id-setter';
import { initialContentJSX } from '@/common/manager/filter-item/message';
import {
generateDataSource,
getItemListByPosition,
getItemPrototypeListByPosition,
} from '@/common/util/util';
import { DisplayPosition } from '@/common/manager/position/display-position';
import {
createDataSourceSetters,
createFormStyleSetters,
} from '@/lowcode/cn-form-alc/prototype/form-item';
import {
__extraParam__,
__dataSource__,
currentPageLabel,
pageSizeLabel,
tableCurrentRowLabel,
} from '@/common/util/expr-const';
import { ParamSelectSetter } from '@/common/setter/param-select-setter';
import {
getJSXTemplate,
getObjectSetterSnippet,
getTableRemoteSnippet,
} from '@/common/manager/setter-snippet';
import { getItemListByPosition as getFilterItemListByPosition } from '@/common/manager/filter-item';
import DocLinkSetter from '@/common/setter/doc-link-setter';
import isPlainObject from 'lodash/isPlainObject';
import { createEventSetters } from '@/common/manager/event';
import { ButtonPosition } from '@/common/manager/position/button-position';
import { getBizExtendPrototype } from '@/common/manager/plugin';
const { ActionSetter } = window.VisualEngineUtils || {};
// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export default [
Bundle.createPrototype({
componentName: 'CnTable',
title: '表格（CnTable）',
category: 'FTP场景（列表页）',
icon: Icon,
cover: 'https://img.alicdn.com/tfs/TB1ZU1HuVT7gK0jSZFpXXaTkpXa-112-64.png',
docUrl: 'https://go.alibaba-inc.com/help3/vc-button',
isContainer: false,
canHovering: true,
canSelecting: true,
canDragging: true,
enableCopy: true,
snippets: [
{
screenshot:
'https://img.alicdn.com/tfs/TB1ZU1HuVT7gK0jSZFpXXaTkpXa-112-64.png',
label: '菜鸟表格',
schema: {
componentName: 'CnTable',
props: {},
},
},
],
configure: [
{
name: 'tableName',
title: '表格名称',
display: 'inline',
initialValue: '表格1',
tip: '当前表格的名称，方便检索使用',
setter: 'StringSetter',
// supportVariable: true,
},
{
name: 'doc',
title: '使用文档',
display: 'inline',
setter: (
<DocLinkSetter
link={
'https://alidocs.dingtalk.com/i/nodes/NkPaj7GAXdpWOkPeZ6p0Wqwgylnomz9B?iframeQuery=anchorId%3Dlc5v06n927eji44ij81i'
}
content={'点击查看表格的正确使用姿势'}
/>
),
},
// {
// name: 'showToolbar1',
// title: 'func',
// display:'inline',
// supportVariable: true,
// setter: "TextSetter",
// },
// {
// name: 'showToolbar1',
// title: 'func',
// display:'inline',
// setter: "FunctionSetter",
// },
// {
// name: 'showToolbar2',
// title: 'func',
// display:'inline',
// setter: "ExpressionSetter",
// },
{
name: '_context',
title: '上下文',
initialValue: {
type: 'JSExpression',
value: 'this',
},
display: 'none',
},
{
name: 'isCnTable',
title: 'cntable',
initialValue: true,
display: 'none',
},
{
name: '_bindFilterDataSourceName',
title: '绑定的Filter的数据源名称',
display: 'none',
},
{
name: 'remote',
title: '表格查询服务',
display: 'block',
initialValue: {},
setter: getTableRemoteSnippet(),
// supportVariable: true,
},
{
name: 'manual',
title: '表格初始时不请求',
display: 'inline',
defaultValue: false,
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
title: '是 / 否',
componentName: 'RadioGroupSetter',
props: {
options: [
{ title: '是', value: true },
{ title: '否', value: false },
],
},
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
columnsPrototype(),
operatePrototype(),
{
name: 'operateColumn',
display: 'plain',
title: '操作列',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'width',
title: '操作列宽度',
display: 'inline',
setter: 'NumberSetter',
className: 'cn-inline-setter-reduce',
},
],
},
},
},
},
toolbarPrototype(),
rowSelectionPrototype(),
pagePrototype(),
{
name: 'tableStyle',
display: 'accordion',
title: '表格样式',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
title: '数据为空时的展示文案',
name: 'emptyContent',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'CnI18nSetter',
title: '纯文本',
},
{
// componentName: <JSXSetter
// // mode={'javascript'}
// usePopup={true}
// // wordWrap={'off'}
// enableFullscreen={true}
// theme='vs'
// />,
componentName: 'CnJSXSetter',
props: {
usePopup: true,
enableFullscreen: true,
theme: 'vs',
},
title: 'React JSX代码',
initialValue: initialContentJSX,
},
],
},
},
},
{
name: 'showIndex',
title: '展示序号',
setter: 'BoolSetter',
},
{
name: 'isZebra',
title: '开启斑马线',
setter: 'BoolSetter',
},
{
name: 'hasBorder',
title: '开启表格边框',
defaultValue: true,
setter: 'BoolSetter',
},
{
name: 'defaultSize',
title: '默认尺寸',
display: 'inline',
defaultValue: 'medium',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ title: '紧凑', value: 'small' },
{ title: '正常', value: 'medium' },
{ title: '宽松', value: 'large' },
],
},
},
},
{
name: 'columnResize',
title: '允许列拖拽',
setter: 'BoolSetter',
},
],
},
},
},
},
{
name: 'slot',
display: 'accordion',
title: '数据汇总统计',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'statisticsInfo',
title: '顶部数据汇总',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
getJSXTemplate({
position: DisplayPosition.tableTopSlot,
}),
{
componentName: 'SelectSetter',
props: () => {
return {
showSearch: true,
options: getFilterItemListByPosition({
position: DisplayPosition.tableTopSlot,
}),
};
},
title: '选择业务组件',
},
],
},
},
},
{
name: 'statisticsInfoOptions',
// display: 'accordion',
display: 'block',
title: '顶部数据汇总业务组件额外配置项',
extraProps: {
defaultCollapsed: false,
},
setter: {
componentName: 'ObjectSetter',
props: () => {
return {
config: {
items: [
...getItemPrototypeListByPosition({
position: DisplayPosition.tableTopSlot,
primaryKey: 'statisticsInfo',
componentMap: {},
}),
],
},
};
},
},
},
// {
// name:'centerInPageAndTable',
// title:'底部数据汇总',
// display:'inline',
// setter:getJSXTemplate({
// position: DisplayPosition.tableTopSlot,
// }),
// }
],
},
},
},
},
{
name: 'treeTableAsyncRequestConfig',
display: 'accordion',
title: '树表格异步加载配置',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
title: '请求树表格的子级数据',
name: 'requestConfig',
setter: {
componentName: 'ServiceChoiceSetter',
props: {
paramTitleDom: (
<div>
请求参数配置{' '}
<span
style={{
fontWeight: 'bold',
color: 'red',
marginLeft: '30px',
}}
>
提示：表格请求时会默认带上筛选栏的数据作为参数，无需手动配置！
</span>
</div>
),
responseDom: (
<div style={{ paddingTop: '10px' }}>
请求返回结果的数据结构：
<a
target={'_blank'}
href='https://yuque.antfin.com/cn-framework-committee/cn-ui-data-structure/cn-table#YHipc'
rel='noreferrer'
>
接口文档
</a>{' '}
<CnTooltip v2 align={'t'} trigger={<a>接口预览</a>}>
<div style={{ width: '200px', height: '260px' }}>
<img
style={{ width: '100%' }}
src='https://img.alicdn.com/imgextra/i3/O1CN0126a4Lt1R3h4yUUvdW_!!6000000002056-0-tps-708-900.jpg'
/>
</div>
</CnTooltip>
</div>
),
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) {
// 需要返回的如下的数据结构
// return {
// success: true,
// data: {
// tableColumns: [{title:"xx",dataIndex:"xx"}],
// tableData: [],
// paging: {
// currentPage: 1,
// pageSize: 20,
// totalCount: 99,
// }
// }
// }
return res;
}`,
paramSetter: [
{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
dataKey: 'config',
labelKey: 'label',
valueKey: 'name',
groupName: '筛选栏',
relativeDataSourceName:
'_bindFilterDataSourceName',
relativeDataSourceNameKey: '_dataSourceName',
},
{
groupName: '当前表格的信息',
groupExprName: __extraParam__,
handleCustomGroup: (extra) => {
if (Array.isArray(extra?.children)) {
extra.children.push({
label: tableCurrentRowLabel,
value: `${__extraParam__}.record`,
handleExprConfig: (value, newV) => {
if (isPlainObject(newV)) {
newV.config = {
showSecondParam: true,
};
}
},
});
}
},
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
},
{
componentName: 'StringSetter',
title: '字符串',
},
getJSExpressionPrototype({
type: 'formRequestForTreeTableAsyncRequestConfig',
}),
],
},
},
},
],
},
},
},
},
{
name: 'childTable',
display: 'accordion',
title: '配置子母表的子表格',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'tableName',
title: '子表格名称',
display: 'inline',
defaultValue: '表格1',
setter: 'StringSetter',
// supportVariable: true,
},
{
name: 'remote',
title: '子表格查询服务',
display: 'inline',
initialValue: {},
setter: getTableRemoteSnippet({
needMockRequestInTable: false,
paramSelectSetter: [
{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
groupName: '当前表格的信息',
groupExprName: __extraParam__,
handleCustomGroup: (extra) => {
if (Array.isArray(extra?.children)) {
extra.children.push({
label: tableCurrentRowLabel,
value: `${__extraParam__}.record`,
handleExprConfig: (value, newV) => {
if (isPlainObject(newV)) {
newV.config = {
showSecondParam: true,
};
}
},
});
extra.children.push({
label: currentPageLabel,
value: `${__extraParam__}.currentPage`,
});
extra.children.push({
label: pageSizeLabel,
value: `${__extraParam__}.pageSize`,
});
}
},
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
},
{
componentName: 'StringSetter',
title: '字符串',
},
getJSExpressionPrototype({
type: 'childTableInitRequest',
}),
],
}),
// supportVariable: true,
},
columnsPrototype(),
operatePrototype({ isInChildTable: true }),
{
title: '分页设置',
type: 'group',
display: 'accordion',
extraProps: {
defaultCollapsed: true,
},
items: [
{
name: 'paging',
title: '是否开启',
display: 'inline',
initialValue: true,
defaultValue: true,
setter: 'BoolSetter',
},
{
name: 'pageSizeList',
title: '每页显示选择器可选值',
display: 'inline',
initialValue: [10, 20, 50],
defaultValue: [10, 20, 50],
condition(prop) {
return (
prop?.parent?.parent?.getPropValue?.('paging') ===
true
);
},
setter: 'JsonSetter',
},
{
name: 'defaultPageSize',
title: '默认的每页条数',
tip: '优先展示接口配置的数据',
display: 'inline',
condition(prop) {
return (
prop?.parent?.parent?.getPropValue?.('paging') ===
true
);
},
setter: 'NumberSetter',
},
],
},
{
title: '高级配置',
type: 'group',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
display: 'accordion',
items: [
{
name: 'primaryKey',
title: '数据主键',
display: 'inline',
defaultValue: 'id',
setter: 'StringSetter',
},
{
name: 'tree',
title: '开启树表格',
display: 'inline',
defaultValue: false,
initialValue: false,
setter: 'BoolSetter',
},
{
name: 'dataSource',
title: '静态数据',
display: 'inline',
tip: '编辑静态展示数据',
// initialValue: [],
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'JsonSetter',
props: {
label: '编辑静态展示数据',
},
},
getJSExpressionPrototype({ type: 'table' }),
],
},
},
},
{
name: 'openKeysConfig',
title: '展开配置',
display: 'inline',
tip: '编辑母子表展开受控',
// initialValue: [],
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'JsonSetter',
props: {
label: '编辑静态展示数据',
},
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
{
name: 'operateColumn',
display: 'plain',
title: '操作列',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'width',
title: '操作列宽度',
display: 'inline',
setter: 'NumberSetter',
},
],
},
},
},
},
{
name: 'rowProps',
title: '自定义行属性 rowProps',
display: 'inline',
setter: {
componentName: 'CnJSXSetter',
props: {
label: '编写rowProps回调',
usePopup: true,
enableFullscreen: true,
theme: 'vs',
},
initialValue: {
type: 'js',
source:
'function rowProps(record, index, state) { \n return {}; \n}',
compiled:
'function main(){\n \n "use strict";\n\nvar __compiledFunc__ = function rowProps(record, index, state) {\n return {}; \n};\n return __compiledFunc__.apply(this, arguments);\n }',
error: {},
},
},
},
{
name: 'cellProps',
title: '自定义单元格 cellProps',
display: 'inline',
setter: {
componentName: 'CnJSXSetter',
props: {
label: '编写cellProps回调',
usePopup: true,
enableFullscreen: true,
theme: 'vs',
},
initialValue: {
type: 'js',
source:
'function cellProps(rowIndex, colIndex, key, rowData) { \n return {}; \n}',
compiled:
'function main(){\n \n "use strict";\n\nvar __compiledFunc__ = function content() {\n return {}; \n};\n return __compiledFunc__.apply(this, arguments);\n }',
error: {},
},
},
},
{
name: 'handleProps',
title: '手动设置组件props',
display: 'inline',
setter: getJSExpressionPrototype({
type: 'props',
}),
},
],
},
],
},
},
},
},
...createEventSetters({
position: ButtonPosition.tableEvent,
initialValue: {},
title: '配置表格的回调',
}),
{
title: '一码多端配置项',
name: 'mobileProps',
display: 'accordion',
setter: getObjectSetterSnippet({
items: [
{
name: 'type',
title: '辅端展示效果',
display: 'inline',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ title: '卡片列表', value: 'CnCardItems' },
{ title: '表格', value: 'CnTable' },
],
},
},
},
{
name: 'entryTitle',
title: '辅端表格标题',
display: 'inline',
setter: 'CnI18nSetter',
},
],
}),
},
...getBizExtendPrototype({
componentName: 'CnTable',
}),
{
title: '高级配置',
type: 'group',
collapsed: true,
display: 'accordion',
items: [
{
name: '_nodeId',
title: '节点 ID',
display: 'inline',
initialValue() {
return this.getNode().id;
},
setter: <IdSetter />,
},
...createDataSourceSetters(),
{
name: 'cellCopyEnable',
title: '双击复制',
display: 'inline',
setter: 'BoolSetter',
// supportVariable: true,
},
{
name: 'columnCopyEnable',
title: '开启整列复制',
display: 'inline',
setter: 'BoolSetter',
},
{
name: 'primaryKey',
title: '数据主键',
display: 'inline',
initialValue: 'id',
tip: '',
setter: 'StringSetter',
// supportVariable: true,
},
{
name: 'dataSource',
title: '静态数据',
display: 'inline',
tip: '编辑静态展示数据',
// initialValue: [],
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'JsonSetter',
title: 'JSON编辑',
props: {
label: '编辑静态展示数据',
},
},
{
componentName: 'VariableSetter',
},
getJSExpressionPrototype({
type: 'base',
offlineTip: '动态控制数据推荐使用「变量绑定」设置该属性',
}),
],
},
},
},
{
name: 'tree',
title: '开启树表格',
display: 'inline',
defaultValue: false,
initialValue: false,
setter: 'BoolSetter',
// supportVariable: true,
},
{
name: 'openKeys',
title: '配置树表格的展开项',
display: 'inline',
setter: 'JsonSetter',
defaultValue: [],
// supportVariable: true,
},
{
name: 'asciiSort',
title: '排序方式',
display: 'inline',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ title: '前端排序', value: true },
{ title: '后端排序', value: false },
],
},
},
},
{
name: 'rowDetail',
title: '行详情（自定义行展示内容）',
display: 'plain',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
title: '行详情组件',
name: 'renderDetail',
setter: {
componentName: 'CnSelectSetter',
props: () => {
return {
options: getItemListByPosition({
position: DisplayPosition.tableRowDetail,
componentMap: {},
}),
selectProps: {
hasClear: true,
},
};
},
},
},
],
},
},
},
},
{
name: 'rowProps',
title: '自定义行属性 rowProps',
display: 'inline',
setter: {
componentName: 'CnJSXSetter',
props: {
label: '编写rowProps回调',
usePopup: true,
enableFullscreen: true,
theme: 'vs',
},
initialValue: {
type: 'js',
source:
'function rowProps(record, index, state) { \n return {}; \n}',
compiled:
'function main(){\n \n "use strict";\n\nvar __compiledFunc__ = function rowProps(record, index, state) {\n return {}; \n};\n return __compiledFunc__.apply(this, arguments);\n }',
error: {},
},
},
},
{
name: 'cellProps',
title: '自定义单元格 cellProps',
display: 'inline',
setter: {
componentName: 'CnJSXSetter',
props: {
label: '编写cellProps回调',
usePopup: true,
enableFullscreen: true,
theme: 'vs',
},
initialValue: {
type: 'js',
source:
'function cellProps(rowIndex, colIndex, key, rowData) { \n return {}; \n}',
compiled:
'function main(){\n \n "use strict";\n\nvar __compiledFunc__ = function content() {\n return {}; \n};\n return __compiledFunc__.apply(this, arguments);\n }',
error: {},
},
},
},
{
name: 'onGetStorage',
title: '获取习惯(onGetStorage)',
display: 'inline',
setter: (
<ActionSetter
supportTypes={['page']}
defaultCode={`/**
* onGetStorage
*
*/
function onGetStorage() {
}`}
defaultActionName='onGetStorage'
/>
),
},
{
name: 'onSetStorage',
title: '设置习惯(onSetStorage)',
display: 'inline',
setter: (
<ActionSetter
supportTypes={['page']}
defaultCode={`/**
* onSetStorage
*
* @param tableConfig
*/
function onSetStorage(tableConfig) {
}`}
defaultActionName='onSetStorage'
/>
),
},
{
name: 'handleProps',
title: '手动设置组件props',
display: 'inline',
setter: getJSExpressionPrototype({
type: 'props',
}),
},
],
},
{
name: '_fixDataSource',
display: 'plain',
defaultValue(field) {
if (field) {
const node = field.getNode();
const _dataSource = node?.getPropValue('_dataSource');
const _dataSourceName = node?.getPropValue('_dataSourceName');
if (!_dataSource && !_dataSourceName) {
const ds = generateDataSource({ componentName: 'CnTable' });
if (ds?.name) {
node?.setPropValue?.('_dataSourceName', ds.name);
node?.setPropValue?.('_dataSource', {
type: 'variable',
variable: `state.${ds.name}`,
});
}
}
}
},
initialValue() {},
setter() {
return <div className='' />;
},
},
// {
// type: 'group',
// title: '高级',
// display: 'accordion',
// collapsed: true,
// items: [
// uuid('CnTable'),
// ...events([
// {
// name: 'onSort',
// title: '排序时触发',
// initialValue: `/**
// * cn-table onSort
// * @param dataIndex 触发排序的列
// * @param type 排序方式（desc,asc）
// */
// function onSort(dataIndex, type) {
// // 前端排序
// return true;
// // 自定义排序 do sth
// // return false;
// }`,
// },
// {
// name: 'onPageChange',
// title: '翻页时触发',
// initialValue: `/**
// * cn-table onPageChange
// * @param pageInfo Object 分页信息
// */
// function onPageChange(pageInfo) {
// console.log(pageInfo);
// }`,
// },
// {
// name: 'loadingChange',
// title: '加载状态变化时触发',
// initialValue: `/**
// * cn-table loadingChange
// */
// function loadingChange() {
// console.log('loading');
// }`,
// },
// ]),
// ],
// },
],
}),
];