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 @@
- * {{ props.label }}
+
+ * {{ props.label }}
+
+
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 @@