From 1acb4d7e8f449ba342699f1b4387ac2404a4c1fb Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Fri, 1 Jul 2022 17:50:11 +0800
Subject: [PATCH] perf: dynamic options demo

---
 src/views/Components/Form/RefForm.vue     | 18 ++++++++++++++++++
 src/views/Components/Form/UseFormDemo.vue | 19 +++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/src/views/Components/Form/RefForm.vue b/src/views/Components/Form/RefForm.vue
index 17b82a8..f6e7137 100644
--- a/src/views/Components/Form/RefForm.vue
+++ b/src/views/Components/Form/RefForm.vue
@@ -5,6 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { reactive, unref, ref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
+import { getDictOneApi } from '@/api/common'
 
 const { required } = useValidator()
 
@@ -213,6 +214,19 @@ const verifyReset = () => {
   const elFormRef = unref(formRef)?.getElFormRef()
   elFormRef?.resetFields()
 }
+
+const getDictOne = async () => {
+  const res = await getDictOneApi()
+  if (res) {
+    unref(formRef)?.setSchema([
+      {
+        field: 'field2',
+        path: 'componentProps.options',
+        value: res.data
+      }
+    ])
+  }
+}
 </script>
 
 <template>
@@ -244,6 +258,10 @@ const verifyReset = () => {
 
     <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
     <ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
+
+    <ElButton @click="getDictOne">
+      {{ t('searchDemo.dynamicOptions') }}
+    </ElButton>
   </ContentWrap>
   <ContentWrap :title="`RefForm ${t('formDemo.example')}`">
     <Form :schema="schema" ref="formRef" />
diff --git a/src/views/Components/Form/UseFormDemo.vue b/src/views/Components/Form/UseFormDemo.vue
index 3c700ea..61d87d8 100644
--- a/src/views/Components/Form/UseFormDemo.vue
+++ b/src/views/Components/Form/UseFormDemo.vue
@@ -6,6 +6,7 @@ import { useForm } from '@/hooks/web/useForm'
 import { reactive, unref, ref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
+import { getDictOneApi } from '@/api/common'
 
 const { required } = useValidator()
 
@@ -222,6 +223,20 @@ const formValidation = () => {
 const verifyReset = () => {
   unref(elFormRef)?.resetFields()
 }
+
+const getDictOne = async () => {
+  const res = await getDictOneApi()
+  if (res) {
+    const { setSchema } = methods
+    setSchema([
+      {
+        field: 'field2',
+        path: 'componentProps.options',
+        value: res.data
+      }
+    ])
+  }
+}
 </script>
 
 <template>
@@ -253,6 +268,10 @@ const verifyReset = () => {
 
     <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
     <ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
+
+    <ElButton @click="getDictOne">
+      {{ t('searchDemo.dynamicOptions') }}
+    </ElButton>
   </ContentWrap>
   <ContentWrap :title="`UseForm ${t('formDemo.example')}`">
     <Form @register="register" />