diff --git a/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue b/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue index 6a14245a..1e437097 100644 --- a/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue +++ b/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue @@ -79,15 +79,16 @@ const props = defineProps({ class: { type: String, default: undefined }, // 分组div样式,card模式下作用在内容块div上,container模式下作用在整个分组div上 style: { type: String, default: undefined }, - // 内置分组div快速布局配置,支持left、right、center、between、form; + // 内置分组div快速布局配置,支持left、right、center、between; // 解释: // left = display: flex; justify-content: flex-start; // right = display: flex; justify-content: flex-end; // center = display: flex; justify-content: center; // between = display: flex; justify-content: space-between; - // form = 与 form 相同的布局方式(每行放置固定列数); // 注意:当class、style、align都配置的情况下,首先在div上配置class与style,align对应的样式会追加到style中 align: { type: String, default: undefined }, + // 快速布局 + layout: { type: String, default: Constant.FORM_GROUP_LAYOUT.ROW }, // 分组内一行放几个字段,仅 `align` 为 `form` 时有效,与 form 保持一致,可配置具体值,也可配置屏幕断点显示值 colsNum: { type: [Number, Object], default: 0 }, // 使用align配置布局时的x轴间隙(像素点) @@ -141,7 +142,7 @@ const jsonStyle2String = (json: any) => { }; /** - * 快速布局对应的样式 + * 内置`row`布局对应的对齐方式 */ const alignJson = { left: { @@ -160,10 +161,6 @@ const alignJson = { value: 'between', style: 'display:flex; justify-content: space-between;' + 'column-gap: ' + props.xGap + 'px;' + 'row-gap: ' + props.yGap + 'px;', }, - form: { - value: 'form', - style: jsonStyle2String(useFormLayoutStyleComputed.value), - }, }; /** @@ -216,7 +213,9 @@ const contentStyleComputed = computed(() => { // 初始化用户配置的样式,如果没有以分号结尾,增加分号 styleStr = props.style + (props.style.trim().endsWith(';') ? '' : ';'); } - if (props.align && Tools.hasOwnProperty(alignJson, props.align)) { + if (props.layout === Constant.FORM_GROUP_LAYOUT.FORM) { + styleStr += jsonStyle2String(useFormLayoutStyleComputed.value); + } else if (props.layout === Constant.FORM_GROUP_LAYOUT.ROW && props.align && Tools.hasOwnProperty(alignJson, props.align)) { styleStr += alignJson[props.align]['style']; } return styleStr; @@ -227,7 +226,7 @@ const formElementDivStyle = (field: any) => { if (field.style) { styleStr = field.style + (field.style.trim().endsWith(';') ? '' : ';'); } - if (props.align && props.align === alignJson.form.value) { + if (props.layout === Constant.FORM_GROUP_LAYOUT.FORM) { styleStr += jsonStyle2String(form.getFieldStyle(field)); } return styleStr; diff --git a/io.sc.platform.core.frontend/src/platform/components/form/ts/Constant.ts b/io.sc.platform.core.frontend/src/platform/components/form/ts/Constant.ts index 0c23bfe3..022e4259 100644 --- a/io.sc.platform.core.frontend/src/platform/components/form/ts/Constant.ts +++ b/io.sc.platform.core.frontend/src/platform/components/form/ts/Constant.ts @@ -9,6 +9,17 @@ class FormGroupMode { static CONTAINER = 'container'; } +class FormGroupLayout { + /** + * 应用form的布局方式(一行放固定列数) + */ + static FORM = 'form'; + /** + * 行布局方式(分组内所有元素放到一行) + */ + static ROW = 'row'; +} + /** * 常量 */ @@ -27,4 +38,8 @@ export class Constant { * `w-form-group`组件的模式 */ static FORM_GROUP_MODE = FormGroupMode; + /** + * `w-form-group`组件的内置布局 + */ + static FORM_GROUP_LAYOUT = FormGroupLayout; } diff --git a/io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue b/io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue index 84e9c06b..875849ec 100644 --- a/io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue +++ b/io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue @@ -1,10 +1,27 @@ diff --git a/io.sc.platform.core.frontend/src/platform/components/radio/WExtRadio.vue b/io.sc.platform.core.frontend/src/platform/components/radio/WExtRadio.vue index a25c11f3..5043a5e9 100644 --- a/io.sc.platform.core.frontend/src/platform/components/radio/WExtRadio.vue +++ b/io.sc.platform.core.frontend/src/platform/components/radio/WExtRadio.vue @@ -1,9 +1,14 @@