表格优化提交

io.sc.platform.core.frontend/src/platform/components/form/WForm.vue

@@ -79,6 +79,7 @@ const fiedType = {
   textarea: 'w-textarea',
   'text-btn': 'w-text-btn',
   password: 'w-password',
+  'option-group': 'w-option-group',
 };
 
 const defaultValueHandler = (field) => {
@@ -86,6 +87,12 @@ const defaultValueHandler = (field) => {
     return field.defaultValue;
   } else if (field.type === 'checkbox' || field.type === 'w-checkbox') {
     return false;
+  } else if (field.type === 'option-group' || field.type === 'w-option-group') {
+    if (field.optionType === 'radio') {
+      return null;
+    } else {
+      return [];
+    }
   }
   return null;
 };

io.sc.platform.core.frontend/src/platform/components/form/elements/WOptionGroup.vue

@@ -0,0 +1,52 @@
+<template>
+  <div v-show="showIfComputed" class="border-solid border">
+    <div style="color: rgba(0, 0, 0, 0.6)" class="px-1">
+      {{ label }}
+    </div>
+    <q-separator />
+    <q-option-group v-bind="attrs" :type="optionType" :disable="disableIfComputed" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+
+const attrs = useAttrs();
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  optionType: {
+    type: String,
+    default: 'radio',
+  },
+  showIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  form: {
+    type: Object,
+    default: undefined,
+  },
+});
+
+const showIfComputed = computed(() => {
+  return props.showIf(props.form);
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf(props.form);
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/index.ts

@@ -21,6 +21,7 @@ import WDate from './form/elements/WDate.vue';
 import WCheckbox from './form/elements/WCheckbox.vue';
 import WTextBtn from './form/elements/WTextBtn.vue';
 import WPassword from './form/elements/WPassword.vue';
+import WOptionGroup from './form/elements/WOptionGroup.vue';
 
 import WInfoPanel from './panel/WInfoPanel.vue';
 
@@ -52,6 +53,7 @@ export default {
     app.component('WCheckbox', WCheckbox);
     app.component('WTextBtn', WTextBtn);
     app.component('WPassword', WPassword);
+    app.component('WOptionGroup', WOptionGroup);
 
     app.component('WInfoPanel', WInfoPanel);
 
@@ -82,6 +84,7 @@ export {
   WCheckbox,
   WTextBtn,
   WPassword,
+  WOptionGroup,
   WGrid,
   WToolbar,
   WEnableTag,