feat: 完善search组件demo

src/components/Form/src/Form.vue

@@ -340,7 +340,7 @@ export default defineComponent({
       <ElForm
         ref={elFormRef}
         {...getFormBindValue()}
-        model={props.isCustom ? props.model : formModel}
+        model={unref(getProps).isCustom ? unref(getProps).model : formModel}
         class={prefixCls}
       >
         {{

src/components/Search/src/Search.vue

@@ -37,7 +37,9 @@ const props = defineProps({
   model: {
     type: Object as PropType<Recordable>,
     default: () => ({})
-  }
+  },
+  searchLoading: propTypes.bool.def(false),
+  resetLoading: propTypes.bool.def(false)
 })
 
 const emit = defineEmits(['search', 'reset', 'register'])
@@ -48,9 +50,10 @@ const visible = ref(true)
 const formModel = ref<Recordable>({})
 
 const newSchema = computed(() => {
-  let schema: FormSchema[] = cloneDeep(unref(getProps).schema)
-  if (unref(getProps).showExpand && unref(getProps).expandField && !unref(visible)) {
-    const index = findIndex(schema, (v: FormSchema) => v.field === unref(getProps).expandField)
+  const propsComputed = unref(getProps)
+  let schema: FormSchema[] = cloneDeep(propsComputed.schema)
+  if (propsComputed.showExpand && propsComputed.expandField && !unref(visible)) {
+    const index = findIndex(schema, (v: FormSchema) => v.field === propsComputed.expandField)
     schema.map((v, i) => {
       if (i >= index) {
         v.hidden = true
@@ -60,7 +63,7 @@ const newSchema = computed(() => {
       return v
     })
   }
-  if (unref(getProps).layout === 'inline') {
+  if (propsComputed.layout === 'inline') {
     schema = schema.concat([
       {
         field: 'action',
@@ -71,9 +74,11 @@ const newSchema = computed(() => {
               return (
                 <div>
                   <ActionButton
-                    showSearch={unref(getProps).showSearch}
-                    showReset={unref(getProps).showReset}
-                    showExpand={unref(getProps).showExpand}
+                    showSearch={propsComputed.showSearch}
+                    showReset={propsComputed.showReset}
+                    showExpand={propsComputed.showExpand}
+                    searchLoading={propsComputed.searchLoading}
+                    resetLoading={propsComputed.resetLoading}
                     visible={visible.value}
                     onExpand={setVisible}
                     onReset={reset}
@@ -91,7 +96,7 @@ const newSchema = computed(() => {
 })
 
 const { formRegister, formMethods } = useForm()
-const { getElFormExpose, getFormData } = formMethods
+const { getElFormExpose, getFormData, getFormExpose } = formMethods
 
 // useSearch传入的props
 const outsideProps = ref<SearchProps>({})
@@ -171,8 +176,10 @@ const setSchema = (schemaProps: FormSetProps[]) => {
 }
 
 // 对表单赋值
-const setValues = (data: Recordable = {}) => {
+const setValues = async (data: Recordable = {}) => {
   formModel.value = Object.assign(unref(formModel), data)
+  const formExpose = await getFormExpose()
+  formExpose?.setValues(data)
 }
 
 const delSchema = (field: string) => {
@@ -227,6 +234,8 @@ defineExpose(defaultExpose)
         :show-reset="getProps.showReset"
         :show-search="getProps.showSearch"
         :show-expand="getProps.showExpand"
+        :search-loading="getProps.searchLoading"
+        :reset-loading="getProps.resetLoading"
         @expand="setVisible"
         @reset="reset"
         @search="search"

src/components/Search/src/components/ActionButton.vue

@@ -12,7 +12,9 @@ defineProps({
   showSearch: propTypes.bool.def(true),
   showReset: propTypes.bool.def(true),
   showExpand: propTypes.bool.def(false),
-  visible: propTypes.bool.def(true)
+  visible: propTypes.bool.def(true),
+  searchLoading: propTypes.bool.def(false),
+  resetLoading: propTypes.bool.def(false)
 })
 
 const onSearch = () => {
@@ -32,12 +34,18 @@ const onExpand = () => {
   <ElButton
     v-if="showSearch"
     type="primary"
+    :loading="searchLoading"
     :icon="useIcon({ icon: 'ep:search' })"
     @click="onSearch"
   >
     {{ t('common.query') }}
   </ElButton>
-  <ElButton v-if="showReset" :icon="useIcon({ icon: 'ep:refresh-right' })" @click="onReset">
+  <ElButton
+    v-if="showReset"
+    :loading="resetLoading"
+    :icon="useIcon({ icon: 'ep:refresh-right' })"
+    @click="onReset"
+  >
     {{ t('common.reset') }}
   </ElButton>
   <ElButton

src/hooks/web/useForm.ts

@@ -115,6 +115,11 @@ export const useForm = () => {
     getElFormExpose: async () => {
       await getForm()
       return unref(elFormRef)
+    },
+
+    getFormExpose: async () => {
+      await getForm()
+      return unref(formRef)
     }
   }
 

src/locales/en.ts

@@ -371,7 +371,13 @@ export default {
     left: 'left',
     center: 'center',
     right: 'right',
-    dynamicOptions: 'Dynamic options'
+    dynamicOptions: 'Dynamic options',
+    // 删除单选框
+    deleteRadio: 'Delete radio',
+    // 还原单选框
+    restoreRadio: 'Restore radio',
+    loading: 'Loading',
+    reset: 'Reset'
   },
   stickyDemo: {
     sticky: 'Sticky'

src/locales/zh-CN.ts

@@ -368,7 +368,13 @@ export default {
     left: '左',
     center: '中',
     right: '右',
-    dynamicOptions: '动态选项'
+    dynamicOptions: '动态选项',
+    // 删除单选框
+    deleteRadio: '删除单选框',
+    // 还原单选框
+    restoreRadio: '还原单选框',
+    loading: '加载中',
+    reset: '重置'
   },
   stickyDemo: {
     sticky: '黏性'

src/views/Components/Form/UseFormDemo.vue

@@ -306,7 +306,7 @@ const inoutValidation = async () => {
 </template>
 
 <style lang="less" scoped>
-.el-button + .el-button {
+.el-button {
   margin-top: 10px;
 }
 </style>

src/views/Components/Search.vue

@@ -11,7 +11,7 @@ import { useSearch } from '@/hooks/web/useSearch'
 const { t } = useI18n()
 
 const { searchRegister, searchMethods } = useSearch()
-const { setSchema, setProps } = searchMethods
+const { setSchema, setProps, setValues } = searchMethods
 
 const schema = reactive<FormSchema[]>([
   {
@@ -166,6 +166,48 @@ const getDictOne = async () => {
 const handleSearch = (data: any) => {
   console.log(data)
 }
+
+const delRadio = () => {
+  setSchema([
+    {
+      field: 'field3',
+      path: 'remove',
+      value: true
+    }
+  ])
+}
+
+const restoreRadio = () => {
+  setSchema([
+    {
+      field: 'field3',
+      path: 'remove',
+      value: false
+    }
+  ])
+}
+
+const setValue = () => {
+  setValues({
+    field1: 'Joy'
+  })
+}
+
+const searchLoading = ref(false)
+const changeSearchLoading = () => {
+  searchLoading.value = true
+  setTimeout(() => {
+    searchLoading.value = false
+  }, 2000)
+}
+
+const resetLoading = ref(false)
+const changeResetLoading = () => {
+  resetLoading.value = true
+  setTimeout(() => {
+    resetLoading.value = false
+  }, 2000)
+}
 </script>
 
 <template>
@@ -192,7 +234,17 @@ const handleSearch = (data: any) => {
       {{ t('searchDemo.bottom') }} {{ t('searchDemo.position') }}-{{ t('searchDemo.right') }}
     </ElButton>
     <ElButton @click="getDictOne">
-      {{ t('searchDemo.dynamicOptions') }}
+      {{ t('formDemo.select') }} {{ t('searchDemo.dynamicOptions') }}
+    </ElButton>
+    <ElButton @click="delRadio">{{ t('searchDemo.deleteRadio') }}</ElButton>
+    <ElButton @click="restoreRadio">{{ t('searchDemo.restoreRadio') }}</ElButton>
+    <ElButton @click="setValue">{{ t('formDemo.setValue') }}</ElButton>
+
+    <ElButton @click="changeSearchLoading">
+      {{ t('searchDemo.search') }} {{ t('searchDemo.loading') }}
+    </ElButton>
+    <ElButton @click="changeResetLoading">
+      {{ t('searchDemo.reset') }} {{ t('searchDemo.loading') }}
     </ElButton>
   </ContentWrap>
 
@@ -202,6 +254,8 @@ const handleSearch = (data: any) => {
       :is-col="isGrid"
       :layout="layout"
       :button-position="buttonPosition"
+      :search-loading="searchLoading"
+      :reset-loading="resetLoading"
       show-expand
       expand-field="field6"
       @search="handleSearch"
@@ -210,3 +264,9 @@ const handleSearch = (data: any) => {
     />
   </ContentWrap>
 </template>
+
+<style lang="less" scoped>
+.el-button {
+  margin-top: 10px;
+}
+</style>