[Feat 0000] TableForm通用表单组件支持表单项分组

src/components/Form/src/TableForm.vue

@@ -1,13 +1,14 @@
 <template>
   <Flex class="mb-6px" align="center" justify="space-between">
-    <slot name="formTitle"> </slot>
+    <FormGroup v-model:value="currentGroup" :groups="getBindValue.schemaGroupNames"></FormGroup>
+
     <FormAction v-bind="getFormActionBindProps" :form-item-props="{ noStyle: true }" @toggle-advanced="handleToggleAdvanced">
       <template #[item]="data" v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']">
         <slot :name="item" v-bind="data || {}"></slot>
       </template>
     </FormAction>
   </Flex>
-  <AForm v-bind="getBindValue" :class="getFormClass" ref="formElRef" :model="formModel" @keypress.enter="handleEnterPress">
+  <AForm v-show="currentGroup" v-bind="getBindValue" :class="getFormClass" ref="formElRef" :model="formModel" @keypress.enter="handleEnterPress">
     <Row v-bind="getRow">
       <template v-for="schema in getSchema" :key="schema.field">
         <FormItem
@@ -42,6 +43,7 @@
   import { Form, Row, Flex } from 'ant-design-vue';
   import FormItem from './components/FormItem.vue';
   import FormAction from './components/FormAction.vue';
+  import FormGroup from './components/FormGroup.vue';
 
   import { dateItemType } from './helper';
   import { dateUtil } from '/@/utils/dateUtil';
@@ -66,7 +68,7 @@
 
   export default defineComponent({
     name: 'BasicForm',
-    components: { FormItem, AForm: Form, Row, FormAction, Flex },
+    components: { FormItem, AForm: Form, Row, FormAction, Flex, FormGroup },
     props: basicProps,
     emits: ['advanced-change', 'reset', 'submit', 'register'],
     setup(props, { emit, attrs }) {
@@ -136,6 +138,7 @@
         return bindValue;
       });
 
+      const currentGroup = ref();
       const getSchema = computed((): FormSchema[] => {
         const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
         for (const schema of schemas) {
@@ -184,10 +187,12 @@
             }
           }
         }
+
+        const schemasByGroup = schemas.filter((schema) => !schema.groupName || schema.groupName === currentGroup.value);
         if (unref(getProps).showAdvancedButton) {
-          return schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[];
+          return schemasByGroup.filter((schema) => schema.component !== 'Divider') as FormSchema[];
         } else {
-          return schemas as FormSchema[];
+          return schemasByGroup as FormSchema[];
         }
       });
 
@@ -358,6 +363,7 @@
         getRow,
         getProps,
         formElRef,
+        currentGroup,
         getSchema,
         formActionType: formActionType as any,
         setFormModel,

src/components/Form/src/components/FormGroup.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
+-->
+<template>
+  <Space v-bind="attrs">
+    <template v-for="(item, i) in groups" :key="`fmgrp${i}`">
+      <AButton :class="{ 'form-group-actived': value === item }" @click="handleClick(item)">
+        {{ item }}
+      </AButton>
+    </template>
+  </Space>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import { Space, Button } from 'ant-design-vue';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+
+  export default defineComponent({
+    name: 'RadioButtonGroup',
+    components: {
+      Space,
+      AButton: Button,
+    },
+    props: {
+      value: {
+        type: String,
+      },
+      groups: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+      },
+    },
+    emits: ['update:value'],
+    setup(props, { emit }) {
+      const attrs = useAttrs();
+
+      function handleClick(value?: string) {
+        if (props.value === value) {
+          emit('update:value', undefined);
+        } else {
+          emit('update:value', value);
+        }
+      }
+
+      return { attrs, handleClick };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .form-group-actived {
+    color: @white;
+    background: @gradient-primary-color;
+  }
+  .form-group-actived:hover {
+    color: @white;
+  }
+</style>

src/components/Form/src/props.ts

@@ -4,7 +4,7 @@ import type { ColEx } from './types';
 import type { TableActionType } from '/@/components/Table';
 import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 import type { RowProps } from 'ant-design-vue/lib/grid/Row';
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
 import { propTypes } from '/@/utils/propTypes';
 import componentSetting from '/@/settings/componentSetting';
 
@@ -115,7 +115,12 @@ export const basicProps = {
   labelAlign: propTypes.string,
 
   rowProps: Object as PropType<RowProps>,
-  
+
   // 当表单是查询条件的时候 当表单改变后自动查询，不需要点击查询按钮
   autoSearch: propTypes.bool.def(false),
+
+  schemaGroupNames: {
+    type: [Array] as PropType<string[]>,
+    default: () => [],
+  },
 };

src/components/Form/src/types/form.ts

@@ -41,7 +41,7 @@ export interface FormActionType {
   validateFields: (nameList?: NamePath[], options?: ValidateOptions) => Promise<any>;
   validate: (nameList?: NamePath[]) => Promise<any>;
   scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;
-  getSchemaComponentProps: (schema: FormSchema) => Recordable
+  getSchemaComponentProps: (schema: FormSchema) => Recordable;
 }
 
 export type RegisterFn = (formInstance: FormActionType) => void;
@@ -125,6 +125,8 @@ export interface FormProps {
   submitFunc?: () => Promise<void>;
   transformDateFunc?: (date: any) => string;
   colon?: boolean;
+
+  schemaGroupNames: string[];
 }
 export interface FormSchema {
   // Field name
@@ -200,16 +202,18 @@ export interface FormSchema {
   dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
   // 设置组件props的key
   dynamicPropskey?: string;
-  dynamicPropsVal?: ((renderCallbackParams: RenderCallbackParams) => any);
+  dynamicPropsVal?: (renderCallbackParams: RenderCallbackParams) => any;
 
   // 这个属性自定义的 用于自定义的业务 比如在表单打开的时候修改表单的禁用状态，但是又不能重写componentProps，因为他的内容太多了，所以使用dynamicDisabled和buss实现
   buss?: any;
-  
+
   //label字数控制（label宽度）
   labelLength?: number;
   // update-begin--author:liaozhiyang---date:20240529---for【TV360X-460】basicForm支持v-auth指令(权限控制显隐)
   auth?: string;
   // update-end--author:liaozhiyang---date:20240529---for【TV360X-460】basicForm支持v-auth指令(权限控制显隐)
+  // 组别名称
+  groupName?: string;
 }
 export interface HelpComponentProps {
   maxWidth: string;
@@ -226,3 +230,9 @@ export interface HelpComponentProps {
   // Positioning
   position: any;
 }
+
+// export interface SchemaGroup {
+//   name: string;
+//   label: string;
+//   disabled?: boolean;
+// }