feat: Search component add expand attribute and expandField attribute

src/components/Form/src/Form.vue

@@ -66,7 +66,7 @@ export default defineComponent({
     const formModel = ref<Recordable>({})
 
     onMounted(() => {
-      emit('register', elFormRef.value?.$parent, elFormRef.value)
+      emit('register', unref(elFormRef)?.$parent, unref(elFormRef))
     })
 
     // 对表单赋值

src/components/Search/src/Search.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { Form } from '@/components/Form'
-import { PropType, computed, unref, CSSProperties } from 'vue'
+import { PropType, computed, unref, CSSProperties, ref } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
+import { findIndex } from '@/utils'
+import { cloneDeep } from 'lodash-es'
 
 const { t } = useI18n()
 
@@ -25,14 +27,21 @@ const props = defineProps({
     .validate((v: string) => ['left', 'center', 'right'].includes(v))
     .def('center'),
   showSearch: propTypes.bool.def(true),
-  showReset: propTypes.bool.def(true)
+  showReset: propTypes.bool.def(true),
+  // 是否显示伸缩
+  expand: propTypes.bool.def(false),
+  // 伸缩的界限字段
+  expandField: propTypes.string.def('')
 })
 
 const emit = defineEmits(['search', 'reset'])
 
+const visible = ref(true)
+
 const newSchema = computed(() => {
+  let schema: FormSchema[] = []
   if (props.layout === 'inline') {
-    return props.schema.concat([
+    schema = cloneDeep(props.schema).concat([
       {
         field: 'action',
         formItemProps: {
@@ -41,8 +50,15 @@ const newSchema = computed(() => {
       }
     ])
   } else {
-    return props.schema
+    schema = cloneDeep(props.schema)
+  }
+  if (props.expand && props.expandField && !unref(visible)) {
+    const index = findIndex(schema, (v: FormSchema) => v.field === props.expandField)
+    if (index > -1) {
+      schema.splice(0, index + 1)
+    }
   }
+  return schema
 })
 
 const { register, elFormRef, methods } = useForm()
@@ -92,6 +108,10 @@ const bottonButtonStyle = computed(() => {
           <Icon icon="ep:refresh-right" class="mr-5px" />
           {{ t('common.reset') }}
         </ElButton>
+        <ElButton v-if="showReset" type="text" @click="visible = !visible">
+          {{ t(visible ? 'common.shrink' : 'common.expand') }}
+          <Icon :icon="visible ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
+        </ElButton>
       </div>
     </template>
   </Form>
@@ -106,6 +126,10 @@ const bottonButtonStyle = computed(() => {
         <Icon icon="ep:refresh-right" class="mr-5px" />
         {{ t('common.reset') }}
       </ElButton>
+      <ElButton v-if="showReset" type="text" @click="visible = !visible">
+        {{ t(visible ? 'common.shrink' : 'common.expand') }}
+        <Icon :icon="visible ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
+      </ElButton>
     </div>
   </template>
 </template>

src/locales/en.ts

@@ -31,7 +31,9 @@ export default {
     tool: 'Tool',
     toolDes: 'Used to set up custom systems',
     query: 'Query',
-    reset: 'Reset'
+    reset: 'Reset',
+    shrink: 'Put away',
+    expand: 'Expand'
   },
   setting: {
     projectSetting: 'Project setting',

src/locales/zh-CN.ts

@@ -31,7 +31,9 @@ export default {
     tool: '工具',
     toolDes: '用于设置定制系统',
     query: '查询',
-    reset: '重置'
+    reset: '重置',
+    shrink: '收起',
+    expand: '展开'
   },
   setting: {
     projectSetting: '项目配置',

src/views/Components/Search.vue

@@ -63,6 +63,94 @@ const schema = reactive<FormSchema[]>([
     field: 'field6',
     component: 'TimeSelect',
     label: t('formDemo.timeSelect')
+  },
+  {
+    field: 'field8',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field9',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field10',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field11',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field12',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field13',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field14',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field15',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field16',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field17',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
+  },
+  {
+    field: 'field18',
+    label: t('formDemo.input'),
+    component: 'Input',
+    formItemProps: {
+      rules: [required]
+    }
   }
 ])
 
@@ -109,6 +197,13 @@ const changePosition = (position: string) => {
   </ContentWrap>
 
   <ContentWrap :title="t('searchDemo.search')" :message="t('searchDemo.searchDes')">
-    <Search :schema="schema" :is-col="isGrid" :layout="layout" :buttom-position="buttomPosition" />
+    <Search
+      :schema="schema"
+      :is-col="isGrid"
+      :layout="layout"
+      :buttom-position="buttomPosition"
+      expand
+      expand-field="field6"
+    />
   </ContentWrap>
 </template>