@cainiaofe/cn-ui-m-lowcode
Version:
446 lines (437 loc) • 13.6 kB
JavaScript
import {
getFormItemDefaultProps,
getItem,
getItemDefaultProps,
getItemInitialValue,
getItemListByPosition,
getItemPrototypeListByPosition,
getItemStylePrototype,
} from '@/common/manager/filter-item';
import { createValidatorSetters } from '@/common/manager/validator';
import { createEventSetters } from '@/common/manager/event';
import { DisplayPosition } from '@/type/display-position';
import { __dataSource__, openDialogModeLabel } from '@/common/util/expr-const';
import {
getExprSetterSnippet,
getRequestExecuteSetter,
} from '@/common/manager/setter-snippet';
import { ParamSelectSetter } from '@/common/setter/param-select-setter';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import DefaultValueSetter from '@/common/setter/default-value-setter';
import { createRequestSuccessPrototype } from '@/common/manager/request';
import { __advancedCodeConfig__, allowQuickComponentList } from '@/common/util/const';
const { CnTooltip } = window.CNUI || {};
export function createFormItemSetters(config) {
const { position } = config || {};
const itemList = getItemListByPosition({ position });
let configure = [
{
name: 'id',
setter: 'StringSetter',
condition() {
return false;
},
},
{
name: 'label',
title: '字段名称',
display: 'inline',
editable: true,
isRequired: true,
setter: 'CnI18nSetter',
},
{
name: 'name',
title: '字段编码',
display: 'inline',
editable: true,
isRequired: true,
setter: 'StringSetter',
},
{
name: 'componentName',
title: '组件类型',
display: 'inline',
extraProps: {
setValue(target, value) {
const defaultProps = getItemDefaultProps(position, value);
if (defaultProps) {
target?.parent?.setPropValue?.('options', defaultProps);
} else {
target?.parent?.setPropValue?.('options', {});
}
const formItemDefaultProps = getFormItemDefaultProps(position, value);
if (formItemDefaultProps) {
target?.parent?.setPropValue?.('placeholder', undefined);
const keys = Object.keys(formItemDefaultProps);
keys.forEach((key) => {
target?.parent?.setPropValue?.(key, formItemDefaultProps[key]);
});
}
const quick = target?.parent?.getPropValue?.('quick');
if (quick && !allowQuickComponentList.includes(value)) {
target?.parent?.setPropValue?.('quick', false);
}
},
},
setter: {
componentName: 'SelectSetter',
// props: {
// showSearch: true,
// options: itemList,
// },
props: () => {
return {
showSearch: true,
options: getItemListByPosition({ position }),
};
},
},
},
];
configure.push({
name: 'options',
// display: 'accordion',
display: 'block',
title: '请完善组件的配置项',
condition(prop) {
const componentName = prop?.parent?.getPropValue?.('componentName');
if (componentName) {
const item = getItem(position, componentName) || {};
const { getPrototypeList, configure = [] } = item;
if (
(getPrototypeList && getPrototypeList()?.length > 0) ||
configure?.length > 0
) {
return true;
}
}
return false;
},
extraProps: {
defaultCollapsed: false,
},
setter: {
componentName: 'ObjectSetter',
props: () => {
return {
config: {
items: [...getItemPrototypeListByPosition({ position })],
},
};
},
},
});
if (position) {
configure = [
...configure,
...createValidatorSetters({
position: position.replace('display', 'validator'),
}),
...getItemStylePrototype({ position }),
];
const eventSetters = createEventSetters({
position: `${position.replace('display', 'btn')}ItemEvent`,
});
if (eventSetters?.length > 0) {
configure = [...configure, ...eventSetters];
}
}
configure = [
...configure,
{
title: '高级配置（请谨慎使用）',
name: __advancedCodeConfig__,
display: 'accordion',
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'handleProps',
title: '手动设置组件props',
display: 'inline',
setter: getJSExpressionPrototype({
type: 'props',
}),
},
],
},
},
},
},
];
return {
componentName: 'ArraySetter',
props: {
mode: 'list',
// extraProps: {
// renderFooter(props) {
// return <AddOneBtn {...props} />;
// },
// },
itemSetter: {
componentName: 'ObjectSetter',
initialValue(prop) {
return getItemInitialValue({
position,
prop,
componentName: itemList[0]?.value,
});
},
props: {
config: {
items: configure,
},
},
},
},
};
}
export function createFooterSetters() {
const titleSetter = 'CnI18nSetter';
const configure = [
{
name: 'children',
isRequired: true,
title: '标题',
setter: titleSetter,
},
{
name: 'type',
title: '按钮类型',
display: 'inline',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '普通',
value: 'normal',
},
{
title: '主要',
value: 'primary',
},
{
title: '次要',
value: 'secondary',
},
],
},
},
},
];
return configure;
}
export function createFormDefaultValueSetters(config) {
const { afterRequestSuccessPosition, position } = config || {};
const extraServiceProps = {};
if (DisplayPosition.formDialog === position) {
extraServiceProps.dynamicUrlTemplate = `function(state, { openDialogMode }) {
// openDialogMode: ${openDialogModeLabel}: 新增(new)、编辑(edit)、详情(detail)
return '/xxx';
}`;
}
let extraConfigSetter;
const requestExecuteSetter = getRequestExecuteSetter({
exprSetter: getExprSetterSnippet({
position: 'formDefaultValue',
}),
});
if (requestExecuteSetter) {
extraConfigSetter = [requestExecuteSetter];
}
const configure = [
{
name: 'defaultParams',
display: 'accordion',
title: '设置默认值（设置表单初始数据）',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'dataOrigin',
title: '数据来源',
display: 'inline',
extraProps: {
defaultValue: 'static',
},
defaultValue: 'static',
initialValue: 'static',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ title: '静态数据', value: 'static' },
{ title: '远程请求', value: 'request' },
],
},
},
},
{
name: 'requestConfig',
title: '查询服务',
display: 'inline',
setter: {
componentName: 'ServiceChoiceSetter',
props: {
buttonText: '选择请求API',
responseDom: (
<div style={{ paddingTop: '10px' }}>
请求返回结果的数据结构：
<CnTooltip align={'t'} trigger={<a>查看</a>}>
<div style={{ width: '200px', height: '170px' }}>
<img
style={{ width: '100%' }}
src='https://img.alicdn.com/imgextra/i4/O1CN0158wCxG1ddDBKBvDA7_!!6000000003758-0-tps-356-296.jpg'
/>
</div>
</CnTooltip>
</div>
),
resultProcessFuncTemplate: `function(res, state) {
return res;
}`,
params: {
env: 'pre',
pageSize: 999,
// serviceType: 'HSF',
},
extraConfigSetter,
paramSetter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
// dataKey: 'aa',
// labelKey: 'aa',
// valueKey: 'aa',
// groupName: '参数列表',
},
title: '选择参数',
},
{
componentName: 'StringSetter',
title: '字符串',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
...extraServiceProps,
},
},
condition(prop) {
return (
prop?.parent?.getPropValue?.('dataOrigin') !== 'static'
);
},
},
{
name: 'defaultValue',
title: '编辑默认值',
display: 'inline',
tip: '编辑静态展示数据',
className: 'cn-param-select-setter-style-fix',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'JsonSetter',
title: 'JSON编辑器',
},
{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
// dataKey: 'aa',
// labelKey: 'aa',
// valueKey: 'aa',
// groupName: '参数列表',
},
title: '从数据源选择',
},
{
title: '高级编辑器',
componentName: (
<DefaultValueSetter
dataKey={'config'}
labelKey={'label'}
valueKey={'name'}
groupName={'表单字段'}
position={position}
/>
),
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
condition(prop) {
return (
prop?.parent?.getPropValue?.('dataOrigin') === 'static'
);
},
},
],
},
},
},
},
];
if (afterRequestSuccessPosition) {
configure[0].setter.props.config.items.push(
createRequestSuccessPrototype(afterRequestSuccessPosition, {
afterRequestCondition(prop) {
return prop?.parent?.getPropValue?.('dataOrigin') !== 'static';
},
}),
);
}
if (
[
DisplayPosition.form,
DisplayPosition.formDialog,
DisplayPosition.filter,
].includes(position)
) {
configure[0].setter.props.config.items.push({
name: 'deferRender',
title: '请求完成后再渲染',
setter: 'BoolSetter',
condition(prop) {
return prop?.parent?.getPropValue?.('dataOrigin') === 'request';
},
});
}
return configure;
}