请到{' '}
图标库
{' '}
中寻找想用的图标,填写图标type即可。
体验Demo
}
/>
),
position: [ButtonPosition.cnCardItemsSubAction],
};
const colSpan = {
name: 'colSpan',
title: '当前组件在一行占几列',
display: 'inline',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ title: '无', value: undefined },
{ title: '一', value: 1 },
{ title: '二', value: 2 },
{ title: '三', value: 3 },
{ title: '四', value: 4 },
{ title: '五', value: 5 },
{ title: '六', value: 6 },
],
},
},
position: [DisplayPosition.formDialog, DisplayPosition.form],
};
const allStyleMap = {
quick,
// size,
// width,
type,
tableOperateHidden,
tableOperateDisabled,
// span,
required,
requiredMessage,
hidden,
placeholder,
tip,
extra,
hasClear,
// disabled,
filterItemHidden,
// filterItemNotSubmitWhenHidden,
filterItemDisabled,
filterItemReadOnly,
labelAlign,
// readOnly,
tableToolbarHidden,
tableToolbarDisabled,
formButtonHidden,
formButtonDisabled,
arrayTableOperateHidden,
arrayTableOperateDisabled,
stepButtonDisabled,
stepButtonHidden,
iconType,
iconTypeHelp,
// colSpan,
};
// 获取列表
export function getStyleListByPosition(position) {
const defaultStyleList = Object.keys(allStyleMap);
const result = [];
if (position !== undefined) {
defaultStyleList.forEach((name) => {
let item = allStyleMap[name];
if (typeof item === 'function') {
item = item(position);
}
if (item && item.position && item.position.includes(position)) {
result.push(item);
}
});
}
return result;
}
export function getJSExpressionPrototype(config) {
const { type: configType, prototypeConfig } = config || {};
if (configType === 'form') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(formValues, state) => {
return formValues.xxxx === "xxxx";
}`,
tip: `当前函数需要返回 true/false。
formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'table') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(record, state, index) => {
return record.id === "xxxx";
}`,
tip: `当前函数需要返回 true/false。
record:表格当前行的数据。
state:全部的数据,在左侧列表中选择使用。
index:表格当前行的位置。
`,
});
} else if (configType === 'formRequest') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(formValues, state) => {
// return formValues.xxxx;
}`,
tip: `formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'tableRequest') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(record, state, index) => {
// return record.xxxx;
}`,
tip: `record:表格当前行的数据。
state:全部的数据,在左侧列表中选择使用。
index:表格当前行的位置。
`,
});
} else if (configType === 'formJSX') {
return {
title: 'JSX代码',
componentName: 'CnRowDataSetter',
props: () => {
const stateList = getDataSourceListWithAllPath({
needChildren: true,
prototypeConfig,
});
return {
list: stateList,
initialCode: `(formValues, state) => {
// return xxx字段的数据是:{formValues.xxxx}
;
}`,
tip: `formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
`,
};
},
};
} else if (configType === 'select') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(state) => {
// 需要返回数组,格式如下
return [
{
label: '选项一',
value: 'first'
}
]
}`,
tip: `当前函数需要返回数组。
`,
});
} else if (configType === 'tableBatchArea') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(formValues, state, selectedRowKeys, selectedRowRecords) => {
// return formValues.xxxx;
}`,
tip: `formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
selectedRowKeys:当前选择的数据主键列表。
selectedRowRecords:当前选择的数据列表。
`,
});
} else if (configType === 'base') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(arg, state) => {
// return state.urlParams.xxx;
}`,
tip: `
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'arrayTable') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(formValues, state, record) => {
return record.xxxx === "xxxx";
}`,
tip: `当前函数需要返回 true/false。
formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
record:表格当前行数据。
`,
});
} else if (configType === 'breadcrumb') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `() => {
// 需要返回数组,格式如下
return [
{
children: '页面1',
},
{
children: '页面2'
}
]
}`,
tip: `当前函数需要返回数组。
`,
});
} else if (configType === 'datepicker') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(date, mode, formValues, state) => {
}`,
tip: `formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'step') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(current, state) => {
return current === 0;
}`,
tip: `当前函数需要返回 true/false。
current:当前步骤条。
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'arrayTableOperate') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(record, state, index, formValues) => {
return record.id === "xxxx";
}`,
tip: `当前函数需要返回 true/false。
record:表格当前行的数据。
state:全部的数据,在左侧列表中选择使用。
index:表格当前行的位置。
formValues:当前表单的数据。
`,
});
} else if (configType === 'tab') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(currentSelectTab, state) => {
// return state.urlParams.xxx;
}`,
tip: `
currentSelectTab:当前选中的tab项。
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'formDialogTitle') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(openDialogMode, state) => {
// return openDialogMode;
}`,
tip: `
openDialogMode:本次打开的弹窗的用途: 新增(new)、编辑(edit)、详情(detail)。
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'tableInitRequest') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(formValues, state, { currentPage, pageSize }) => {
// return formValues.xxxx;
}`,
tip: `formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
currentPage:${currentPageLabel}。
pageSize:${pageSizeLabel}。
`,
});
} else if (configType === 'messageContent') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(formValues, state) => {
// success::成功;warning:警告;error:错误;notice:通知;help:帮助;
// return 'success';
}`,
tip: `formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'arrayTableCurrentRow') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(formValues, state, { ${__arrayTableCurrentRow__} }) => {
return formValues.xxxx === "xxxx";
}`,
tip: `当前函数需要返回 true/false。
formValues:当前筛选栏/表单的数据。
state:全部的数据,在左侧列表中选择使用。
__arrayTableCurrentRow__:可编辑表格当前行的数据。
`,
});
} else if (configType === 'headers') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(arg, state) => {
// return { }
}`,
tip: `
返回值(return)必须是JSON对象格式
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'props') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(oldProps, state) => {
// 返回额外的props属性即可,返回值将会和原props合并;
// return {};
}`,
tip: `
oldProps: 组件的原始oldProps
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'enterPointsItemClick') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(enterPointsItem, state) => {
return enterPointsItem.xxxx;
}`,
tip: `
enterPointsItem:当前点击项数据。
state:全部的数据,在左侧列表中选择使用。
`,
});
} else if (configType === 'listItemClick') {
return getJSExpressionPrototypeTemplate({
prototypeConfig,
initialCode: `(listItem, state) => {
return listItem.xxxx;
}`,
tip: `
listItem:当前点击项数据。
state:全部的数据,在左侧列表中选择使用。
`,
});
}
return {};
}
export function getParamSetterPrototype(config) {
const { type, prototypeConfig } = config || {};
const { flowList, currentFlowIndex, additionalPosition } =
prototypeConfig || {};
if (type === 'formDialog') {
return {
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
dataKey: 'config',
labelKey: 'label',
valueKey: 'name',
groupName: '当前表单',
},
{
groupName: formDialogStateLabel,
handleCustomGroup: (extra) => {
if (Array.isArray(extra?.children)) {
extra.children.push({
label: openDialogModeLabel,
value: `${__extraParam__}.openDialogMode`,
});
}
},
},
{
groupName: '动作编排的数据',
groupExprName: __flowData__,
needSecondParam: true,
flowList,
currentFlowIndex,
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
};
} else if (type === 'form') {
return {
componentName: 'ParamSelectSetter',
// props: {
// dataKey: 'config',
// labelKey: 'label',
// valueKey: 'name',
// groupName: '当前表单',
// },
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
dataKey: 'config',
labelKey: 'label',
valueKey: 'name',
groupName: '当前表单',
},
{
groupName: '动作编排的数据',
groupExprName: __flowData__,
needSecondParam: true,
flowList,
currentFlowIndex,
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
};
} else if (type === 'table') {
const configList = [
{
dataKey: 'columns',
labelKey: 'title',
valueKey: 'dataIndex',
groupName: '当前行数据',
// groupExprName: __tableCurrentRow__,
needSecondParam: false,
},
{
groupName: '动作编排的数据',
groupExprName: __flowData__,
needSecondParam: true,
flowList,
currentFlowIndex,
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
];
if (additionalPosition === ButtonPosition.childTableOperate) {
configList[0] = {
groupName: '当前行数据',
groupExprName: __record__,
handleCustomGroup: (extra, field) => {
if (Array.isArray(extra?.children) && field) {
const originList = field
?.getNode?.()
?.getPropValue?.('childTable')?.columns;
if (isArrayNotEmpty(configList)) {
extra.children = handleOriginList(
originList,
'title',
'dataIndex',
__record__,
);
}
}
},
};
}
return {
componentName: 'ParamSelectSetter',
// props: {
// dataKey: 'columns',
// labelKey: 'title',
// valueKey: 'dataIndex',
// groupName: '当前行数据',
// },
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList,
},
title: '选择参数',
};
} else if (type === 'filter') {
return {
componentName: 'ParamSelectSetter',
props: {
dataKey: 'config',
labelKey: 'label',
valueKey: 'name',
groupName: '筛选栏',
relativeDataSourceName: '_bindFilterDataSourceName',
relativeDataSourceNameKey: '_dataSourceName',
},
// props: {
// configList:[
// {
// dataKey: 'config',
// labelKey: 'label',
// valueKey: 'name',
// groupName: '筛选栏',
// relativeDataSourceName: '_bindFilterDataSourceName',
// relativeDataSourceNameKey: '_dataSourceName',
// },
// {
// groupName:'动作编排的数据',
// groupExprName: __flowData__,
// needSecondParam:true,
// flowList,
// currentFlowIndex,
// },
// {
// groupName:'其他数据',
// groupExprName: __dataSource__,
// needSecondParam:true,
// },
// ]
// },
title: '选择参数',
};
} else if (type === 'arrayTable') {
return {
componentName: 'ParamSelectSetter',
props: {
dataKey: 'arrayTable',
labelKey: 'label',
valueKey: 'name',
groupName: '当前行数据',
},
title: '选择参数',
};
} else if (type === 'arrayTableItemEvent') {
return {
componentName: 'ParamSelectSetter',
// props: {
// dataKey: 'arrayTable',
// labelKey: 'label',
// valueKey: 'name',
// groupName: '当前行数据',
// },
props: {
configList: [
{
groupName: '当前行数据',
groupExprName: __arrayTableCurrentRow__,
handleCustomGroup: (extra, field) => {
const path = field?.path;
if (
Array.isArray(path) &&
path.length > 5 &&
path[0] === 'config' &&
path[2] === 'options' &&
(path[3] === 'config' || path[3] === 'buttons')
) {
const arrayTableIndex = path[1];
if (typeof arrayTableIndex === 'number') {
const formConfig = field
?.getNode?.()
?.getPropValue?.('config');
const arrayTableConfig = formConfig?.[arrayTableIndex] || {};
if (
isRecursionComponent(arrayTableConfig?.componentName) &&
arrayTableConfig?.options?.config?.length > 0
) {
const originList = arrayTableConfig?.options?.config;
const tempList = handleOriginList(
originList,
'label',
'name',
`${__extraParam__}.${__arrayTableCurrentRow__}`,
);
if (isArrayNotEmpty(tempList)) {
extra.children = tempList;
}
}
}
}
},
},
{
groupName: '动作编排的数据',
groupExprName: __flowData__,
needSecondParam: true,
flowList,
currentFlowIndex,
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
};
} else if (type === 'base') {
return {
componentName: 'ParamSelectSetter',
// props: {
// dataKey: 'aa',
// labelKey: 'aa',
// valueKey: 'aa',
// groupName: '参数列表',
// },
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
groupName: '动作编排的数据',
groupExprName: __flowData__,
needSecondParam: true,
flowList,
currentFlowIndex,
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
};
} else if (type === 'filterWithPagination') {
return {
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: currentPageLabel,
value: `${__extraParam__}.currentPage`,
});
extra.children.push({
label: pageSizeLabel,
value: `${__extraParam__}.pageSize`,
});
}
},
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
};
} else if (type === 'tree') {
return {
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
groupName: leftTreeStateLabel,
handleCustomGroup: (extra) => {
if (Array.isArray(extra?.children)) {
extra.children.push({
label: leftTreeAfterDropDataSourceLabel,
value: `${__extraParam__}.afterDropDataSource`,
});
}
},
},
{
groupName: '动作编排的数据',
groupExprName: __flowData__,
needSecondParam: true,
flowList,
currentFlowIndex,
},
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
};
}
}
function getJSExpressionPrototypeTemplate(config) {
const { title, initialCode, tip, prototypeConfig } = config || {};
return {
title: title || '写js表达式',
componentName: 'CnRowDataSetter',
props: () => {
const stateList = getDataSourceListWithAllPath({
needChildren: true,
prototypeConfig,
});
return {
list: stateList,
initialCode,
tip,
};
},
};
}