w-form内置的分组组件w-form-group增加layout属性

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;

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;
 }

io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue

@@ -1,10 +1,27 @@
 <template>
-  <span :style="props.size ? 'font-size:' + props.size + 'px;' : ''"> <span v-if="props.required" style="color: red">*</span> {{ props.label }} </span>
+  <span :style="styleComputed">
+    <span v-if="props.required" style="color: red">*</span> {{ props.label }}
+    <slot name="after"></slot>
+  </span>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue';
+
 const props = defineProps({
   required: { type: Boolean, default: false },
   label: { type: String, default: '' },
   size: { type: Number, default: undefined },
+  light: { type: Boolean, default: false },
+});
+
+const styleComputed = computed(() => {
+  const style = {};
+  if (props.size) {
+    style['font-size'] = props.size + 'px';
+  }
+  if (props.light) {
+    style['font-weight'] = 700;
+  }
+  return style;
 });
 </script>

io.sc.platform.core.frontend/src/platform/components/radio/WExtRadio.vue

@@ -1,9 +1,14 @@
 <template>
   <div v-show="fieldMethodsClass.getShow(props, modelValue)" class="w-ext-radio">
-    <w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label" :size="16"></w-label>
+    <w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label" :size="16" :light="lightLabelComputed">
+      <template v-if="props.hideOptions" #after>
+        <q-btn flat round color="primary" icon="expand" size="xs" @click="expandOptionsModelValue = !expandOptionsModelValue" />
+      </template>
+    </w-label>
     <div class="w-ext-radios">
       <template v-for="opt in props.options" :key="opt.value">
         <q-radio
+          v-show="!props.hideOptions || opt['value'] === modelValue || expandOptionsModelValue"
           v-model="modelValue"
           :val="opt['value']"
           :dense="props.dense"
@@ -30,20 +35,23 @@
   </div>
 </template>
 <script setup lang="ts">
+import { ref, useAttrs, computed, onMounted } from 'vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
-import { ref, useAttrs } from 'vue';
 import { FormFieldMethods } from '../form/FormField';
 
 const radioRef = ref();
 const attrs = useAttrs();
 const modelValue = defineModel<string | boolean | number>();
 const descModelValue = ref('');
+const expandOptionsModelValue = ref(false);
 
 interface FieldProps extends FormFieldProps {
   dense?: boolean;
   options: Array<() => void>;
   selectedColor?: string;
   selectedLabelColor?: string;
+  hideOptions?: boolean; // 隐藏选项
+  lightNotHideOptionsLabel?: boolean; // 高亮非隐藏选项的label
 }
 const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
@@ -53,6 +61,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   },
   selectedColor: undefined,
   selectedLabelColor: undefined,
+  hideOptions: false,
+  lightNotHideOptionsLabel: false,
 });
 class FieldMethods extends FormFieldMethods {
   updateValue = (value_) => {
@@ -84,14 +94,29 @@ const getDescValue = () => {
 const setDescValue = (val: any) => {
   descModelValue.value = val;
 };
+const getExpandOptionsModelValue = () => {
+  return expandOptionsModelValue.value;
+};
+const setExpandOptionsModelValue = (val: boolean) => {
+  expandOptionsModelValue.value = val;
+};
+
+const lightLabelComputed = computed(() => {
+  if (props.lightNotHideOptionsLabel && !props.hideOptions) {
+    return true;
+  }
+  return false;
+});
 
 defineExpose({
   validate: fieldMethodsClass.validate,
   setValue: fieldMethodsClass.setValue,
   getValue: fieldMethodsClass.getValue,
   clearValue: fieldMethodsClass.clearValue,
-  getDescValue: getDescValue,
+  getDescValue,
-  setDescValue: setDescValue,
+  setDescValue,
+  getExpandOptionsModelValue,
+  setExpandOptionsModelValue,
 });
 </script>