diff --git a/packages/dnd-design/src/components/form-shell/form-shell.scss b/packages/dnd-design/src/components/form-shell/form-shell.scss
index afee6c73b609bb2f958a21e8d3fcbc1cfef86d94..cf6bf994790075af4e7843859a0d20c1fb6c6fca 100644
--- a/packages/dnd-design/src/components/form-shell/form-shell.scss
+++ b/packages/dnd-design/src/components/form-shell/form-shell.scss
@@ -2,24 +2,8 @@
@include b(form-shell) {
width: 100%;
height: 100%;
- @include b(form-tab-panel) {
- &.el-tabs {
- .el-tabs__active-bar {
- bottom: 0;
- height: 2px;
- background-color: getCssVar(form-tab-panel, active, border-color) !important;
- }
- .el-tabs__header.is-top .el-tabs__item.is-top.is-active {
- color: getCssVar(form-tab-panel, active, text-color) !important;
- background-color: getCssVar(form-tab-panel, active, bg-color) !important;
- }
- }
- &.el-tabs--top {
- .el-tabs__item.is-top:nth-child(2) {
- padding-left: 0 !important;
- }
- }
- }
+ font-size: 16px;
+ line-height: normal;
}
@include b(light-theme-shell) {
@@ -48,8 +32,4 @@
}
}
}
-
- .el-checkbox__input .el-checkbox__inner{
- border-color:getCssVar(color, primary);
- }
-}
\ No newline at end of file
+}
diff --git a/packages/dnd-design/src/components/form-shell/form-shell.tsx b/packages/dnd-design/src/components/form-shell/form-shell.tsx
index 093b6e3721a8d768973197ffd5c3038632874409..249bb1d637fbb31de9f6566a9c5d5d1d3cf4b85f 100644
--- a/packages/dnd-design/src/components/form-shell/form-shell.tsx
+++ b/packages/dnd-design/src/components/form-shell/form-shell.tsx
@@ -71,6 +71,20 @@ export default defineComponent({
});
};
+ // 转换编辑器参数
+ const transformEditorParams = (val?: string) => {
+ if (!val) {
+ return {};
+ }
+ const params = val.split('\n');
+ const editorParams: IData = {};
+ params.forEach(param => {
+ const [key, value] = param.split('=');
+ editorParams[key] = value;
+ });
+ return editorParams;
+ };
+
/**
* 解析表单成员
*
@@ -96,7 +110,11 @@ export default defineComponent({
detailStyle: item.detailstyle,
layout: {
appId: props.context.srfappid,
- layout: item.layoutmode || item.playoutmode || 'TABLE_24COL',
+ layout:
+ item.layoutmode ||
+ item.playoutmode ||
+ parent?.layoutmode ||
+ 'TABLE_24COL',
// flex布局
dir: item.flexdir,
align: item.flexalign,
@@ -104,7 +122,11 @@ export default defineComponent({
} as ILayout,
layoutPos: {
appId: props.context.srfappid,
- layout: item.layoutmode || item.playoutmode || 'TABLE_24COL',
+ layout:
+ item.layoutmode ||
+ item.playoutmode ||
+ parent?.layoutmode ||
+ 'TABLE_24COL',
// 栅格布局
colXS: item.col_xs || parent?.child_col_xs,
colXSOffset: item.col_xs_os,
@@ -130,7 +152,7 @@ export default defineComponent({
allowEmpty: item.allowempty !== 0,
hidden: item.editortype === 'HIDDEN',
valueFormat: item.valueformat,
- enableCond: item.enablecond,
+ // enableCond: item.enablecond,
enableItemPriv: item.enableitempriv,
resetItemNames: item.resetitemname
? item.resetitemname.split(';')
@@ -144,6 +166,21 @@ export default defineComponent({
: undefined,
editorHeight: item.ctrlheight,
editorWidth: item.ctrlwidth,
+ editorParams: {
+ enumOptions: [
+ {
+ appId: props.context.srfappid,
+ text: '选项1',
+ value: 'option1',
+ },
+ {
+ appId: props.context.srfappid,
+ text: '选项2',
+ value: 'option2',
+ },
+ ],
+ ...transformEditorParams(item.editorparams),
+ },
},
} as IDEFormItem;
break;
@@ -194,6 +231,49 @@ export default defineComponent({
contentType: item.mdctrltype,
} as IDEFormMDCtrl;
break;
+ case 'FORMITEMEX':
+ detail = {
+ ...detail,
+ detailType: 'FORMITEM',
+ emptyCaption: item.emptycaption,
+ labelPos: item.labelpos || 'LEFT',
+ labelWidth: item.labelwidth,
+ allowEmpty: item.allowempty !== 0,
+ hidden: item.editortype === 'HIDDEN',
+ // enableCond: item.enablecond,
+ enableItemPriv: item.enableitempriv,
+ compositeItem: true,
+ editor: {
+ id: detail.id,
+ appId: props.context.srfappid,
+ editorType: item.editortype || 'TEXTBOX',
+ editorHeight: item.ctrlheight,
+ editorWidth: item.ctrlwidth,
+ editorParams: {
+ enumOptions: [
+ {
+ appId: props.context.srfappid,
+ text: '选项1',
+ value: 'option1',
+ },
+ {
+ appId: props.context.srfappid,
+ text: '选项2',
+ value: 'option2',
+ },
+ ],
+ ...transformEditorParams(item.editorparams),
+ },
+ editorItems:
+ item.psdeformdetails?.map((editorItem: IData) => {
+ return {
+ appId: props.context.srfappid,
+ id: editorItem.psdeformdetailname,
+ };
+ }) || [],
+ },
+ } as IDEFormMDCtrl;
+ break;
default:
break;
}
diff --git a/packages/dnd-design/src/panel-items/dnd-design/dnd-design.scss b/packages/dnd-design/src/panel-items/dnd-design/dnd-design.scss
index 0dec1043808acbcc24e4b201c98f52e563ddca59..e1419eeb29aa6b6cbb09cf36d9c93e4b658b4e82 100644
--- a/packages/dnd-design/src/panel-items/dnd-design/dnd-design.scss
+++ b/packages/dnd-design/src/panel-items/dnd-design/dnd-design.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable selector-class-pattern */
/* stylelint-disable color-function-notation */
@include b(dnd-design) {
position: relative;
@@ -33,6 +35,7 @@
width: 100%;
height: 100%;
padding: 0 6px;
+ overflow: auto;
}
@include b(dnd-design-ghost) {
@@ -89,26 +92,91 @@
}
}
-@include b(dnd-design) {
- @include m(light) {
- background-color: getCssVar(color, white);
-
- --el-disabled-bg-color: var(--ibiz-color-disabled-fill);
- --ibiz-color-disabled-fill: rgba(var(--ibiz-grey-8), 0.04);
- --el-disabled-border-color: var(--ibiz-color-disabled-border);
- --ibiz-color-disabled-border: rgba(var(--ibiz-grey-1), 1);
- --el-disabled-text-color: #{getCssVar(color, disabled, text)};
- --el-text-color-placeholder: #{getCssVar(color, text, 3)};
-
- .el-button {
- --el-button-bg-color: var(--ibiz-color-primary);
- --el-button-text-color: var(--ibiz-color-primary-text);
-
- color: var(--ibiz-color-primary-text);
- background-color: var(--ibiz-color-primary);
+.#{bem('dnd-design', '', 'light')},
+.#{bem('form-shell', '', 'light')} {
+ color: getCssVar(color, text, 0);
+ background-color: getCssVar(color, white);
+
+ --el-disabled-bg-color: var(--ibiz-color-disabled-fill);
+ --ibiz-color-disabled-fill: rgba(var(--ibiz-grey-8), 0.04);
+ --el-disabled-border-color: var(--ibiz-color-disabled-border);
+ --ibiz-color-disabled-border: rgba(var(--ibiz-grey-1), 1);
+ --el-disabled-text-color: #{getCssVar(color, disabled, text)};
+ --el-text-color-placeholder: #{getCssVar(color, text, 3)};
+ --el-color-primary: #{getCssVar(color, primary)};
+ --el-bg-color: #{getCssVar(color, bg, 0)};
+ --el-border-color: #{getCssVar(color, border)};
+ --el-text-color-primary: #{getCssVar(color, text, 0)};
+ --el-font-size-base: #{getCssVar(font-size, regular)};
+ --el-border-radius-base: #{getCssVar(border, radius, small)};
+ --el-border: var(--el-border-width) var(--el-border-style)
+ var(--el-border-color);
+ --el-fill-color-light: #{getCssVar(color, bg, 2)};
+ --el-border-color-darker: #{getCssVar(color, border)};
+
+ .el-button {
+ --el-button-bg-color: var(--ibiz-color-primary);
+ --el-button-text-color: var(--ibiz-color-primary-text);
+
+ color: var(--ibiz-color-primary-text);
+ background-color: var(--ibiz-color-primary);
+ }
+
+ .el-tabs.el-tabs.el-tabs .el-tabs__nav-scroll {
+ --el-tabs-header-height: 40px;
+ }
+
+ .el-tabs.el-tabs.el-tabs .el-tabs__active-bar {
+ bottom: 0;
+ height: 2px;
+ background-color: getCssVar('form-page', 'active-border-color') !important;
+
+ &.is-left,
+ &.is-right {
+ bottom: auto;
+ height: auto;
+ }
+ }
+
+ .el-tabs.el-tabs.el-tabs .el-tabs__item {
+ padding: 0 20px;
+ color: getCssVar(color, text, 2) !important;
+
+ &:hover,
+ &.is-active {
+ color: var(--el-color-primary) !important;
}
+ }
+
+ .el-input-number.el-input-number.el-input-number
+ .el-input-number__decrease:hover {
+ color: var(--el-color-primary);
+ }
+
+ .el-input-number.el-input-number.el-input-number.is-disabled
+ .el-input-number__decrease:hover {
+ color: var(--el-disabled-border-color);
+ }
- #{getCssVarName(editor, default, text-color)}: getCssVar(color, text, 3);
- #{getCssVarName(editor, default, border-color)}: getCssVar(color, border);
+ .el-input-number.el-input-number.el-input-number
+ .el-input-number__increase:hover {
+ color: var(--el-color-primary);
}
+
+ .el-input-number.el-input-number.el-input-number.is-disabled
+ .el-input-number__increase:hover {
+ color: var(--el-disabled-border-color);
+ }
+
+ .el-input.el-input.el-input {
+ --el-input-focus-border-color: var(--el-color-primary);
+ }
+
+ #{getCssVarName(editor, default, text-color)}: getCssVar(color, text, 0);
+ #{getCssVarName(editor, default, border-color)}: getCssVar(color, border);
+ #{getCssVarName(editor, hover, border-color)}: getCssVar(
+ color,
+ primary,
+ hover
+ );
}
diff --git a/packages/dnd-design/src/panel-items/dnd-design/dnd-design.tsx b/packages/dnd-design/src/panel-items/dnd-design/dnd-design.tsx
index d73b880be2bb6f3706c1be24606cc601d0aee700..8134c8d6da0dd735fad7e5884f9f08e9f19a6db0 100644
--- a/packages/dnd-design/src/panel-items/dnd-design/dnd-design.tsx
+++ b/packages/dnd-design/src/panel-items/dnd-design/dnd-design.tsx
@@ -184,12 +184,14 @@ export default defineComponent({
>
-
+ {isPreview && previewData ? (
+
+ ) : null}