@cainiaofe/cn-ui-m-lowcode
Version:
327 lines (325 loc) • 9.61 kB
JavaScript
import React from 'react';
import { Bundle } from '@ali/visualengine';
import Icon from './logo';
import {
createDataSourceSetters,
getArraySetterSnippet,
getCnSelectSetter,
getMixedSetterSnippet,
getTableRemoteSnippet,
} from '@/common/manager/setter-snippet';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import columnsPrototype from './prototype/columns';
import operatePrototype from './prototype/operate';
import toolbarPrototype from './prototype/toolbar';
import rowSelectionPrototype from './prototype/rowSelection';
import pagePrototype from './prototype/page';
import IdSetter from '@/common/setter/id-setter';
import { generateDataSource } from '@/common/util/util';
import {
getStatusDataSource,
getTypeDataSource,
} from '@/common/util/prototype-util';
import { createButtonListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/type/button-position';
// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export default Bundle.createPrototype({
title: '卡片列表',
componentName: 'CnTable',
category: 'FTP',
icon: Icon,
docUrl: '',
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: '_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: 'tableStyle',
display: 'accordion',
title: '表格样式',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
title:'点击卡片不展示详情',
name:'disableDetail',
setter: 'BoolSetter'
},
{
name: 'subTitle',
title: '卡片内标题',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'CnI18nSetter',
title: '字符串',
},
getJSExpressionPrototype({ type: 'tableRequest' }),
],
},
},
},
{
name: 'subAction',
title: '内标题右侧按钮',
display: 'inline',
// setter: getArraySetterSnippet({
// initialValue:(prop)=> {
// return {
// };
// },
// configure:[
// {
// title: '按钮文案',
// name: 'text',
// isRequired: true,
// setter: 'CnI18nSetter'
// },
// {
// title: '图标',
// name: 'icon',
// isRequired: true,
// setter: 'StringSetter'
// },
// ]
// })
setter: createButtonListSetters({
position: ButtonPosition.cnCardItemsSubAction,
childrenTitle: '按钮文案',
}),
},
{
name: 'tags',
title: '标签组',
display: 'inline',
setter: getMixedSetterSnippet({
setters: [
getArraySetterSnippet({
initialValue: (prop) => {
return {
text: '成功',
status: 'success',
};
},
configure: [
{
title: '标签文案',
name: 'text',
isRequired: true,
setter: getMixedSetterSnippet({
setters: [
{
title: '字符串',
componentName: 'CnI18nSetter',
},
getJSExpressionPrototype({
type: 'tableRequest',
}),
],
}),
},
{
title: '标签状态',
name: 'status',
isRequired: true,
setter: getCnSelectSetter({
options: getStatusDataSource(),
}),
},
{
title: '强调程度',
name: 'type',
setter: getCnSelectSetter({
options: getTypeDataSource(),
}),
},
],
}),
getJSExpressionPrototype({
type: 'tableRequest',
}),
],
}),
},
],
},
},
},
},
toolbarPrototype(),
rowSelectionPrototype(),
pagePrototype(),
{
title: '高级配置',
type: 'group',
collapsed: true,
display: 'accordion',
items: [
{
name: '_nodeId',
title: '节点 ID',
display: 'inline',
initialValue() {
return this.getNode().id;
},
setter: <IdSetter />,
},
...createDataSourceSetters(),
{
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',
props: {
label: '编辑静态展示数据',
},
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
// {
// name: 'asciiSort',
// title: '排序方式',
// display: 'inline',
// setter: {
// componentName: 'RadioGroupSetter',
// props: {
// options: [
// { title: '前端排序', value: true },
// { title: '后端排序', value: false },
// ],
// },
// },
// },
],
},
{
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='' />;
},
},
],
});