From 7540a4e2e7f5b5fdcfba49bf94420d69d96504b4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 9 Mar 2023 22:58:54 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E4=BF=AE=E5=A4=8D=E5=8C=96=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=AE=A1=E7=90=86=E7=9A=84=20formRef=20=E6=9C=89?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E7=9A=84=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/infra/config/form.vue | 52 +++++++++------------------------
 1 file changed, 14 insertions(+), 38 deletions(-)

diff --git a/src/views/infra/config/form.vue b/src/views/infra/config/form.vue
index 6a80ae74..157917db 100644
--- a/src/views/infra/config/form.vue
+++ b/src/views/infra/config/form.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog :title="modelTitle" v-model="modelVisible">
     <el-form
-      ref="ruleFormRef"
+      ref="formRef"
       :model="formData"
       :rules="formRules"
       label-width="80px"
@@ -33,24 +33,20 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-        <el-button @click="colseForm(ruleFormRef)">取 消</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
       </div>
     </template>
   </Dialog>
 </template>
 <script setup lang="ts">
 import * as ConfigApi from '@/api/infra/config'
-// import type { FormExpose } from '@/components/Form'
-import type { FormInstance } from 'element-plus'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-// const { proxy } = getCurrentInstance()
 
 const modelVisible = ref(false) // 弹窗的是否展示
 const modelTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的 Loading 加载：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-// let formRef = ref() // 表单的 Ref
 const formData = reactive({
   id: undefined,
   category: '',
@@ -67,9 +63,7 @@ const formRules = reactive({
   value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
 })
-let ruleFormRef = ref<FormInstance>() // 表单 Ref
-
-const { proxy } = getCurrentInstance() as any
+const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
 const openModal = async (type: string, id?: number) => {
@@ -94,15 +88,9 @@ defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
-  if (true) {
-    formLoading.value = true
-    console.log('1111')
-    return
-  }
-  const formRef = proxy.$refs['formRef']
   // 校验表单
   if (!formRef) return
-  const valid = await formRef.validate()
+  const valid = await formRef.value.validate()
   if (!valid) return
   // 提交请求
   formLoading.value = true
@@ -124,27 +112,15 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = () => {
-  formData.id = undefined
-  formData.category = ''
-  formData.name = ''
-  formData.key = ''
-  formData.value = ''
-  formData.visible = true
-  formData.remark = ''
-  // 重置表单
-  console.log(ruleFormRef)
-  console.log(ruleFormRef.value)
-  // proxy.$refs['ruleFormRef'].resetFields()
-  // setTimeout(() => {
-  // console.log(ruleFormRef.value, 'formRef.value')
-  // formRef.value.resetFields() // TODO 芋艿：为什么拿不到 formRef 呢？ 表单还没加载出来
-  // ruleFormRef.value?.resetFields()
-  // }, 100)
-}
-/** 取消添加 */
-const colseForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-  modelVisible.value = false
+  Object.assign(formData, {
+    id: undefined,
+    category: '',
+    name: '',
+    key: '',
+    value: '',
+    visible: true,
+    remark: ''
+  })
+  formRef.value?.resetFields()
 }
 </script>