From 30dea302a96da3fd2814fc9dc1da5be887bc8b7a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 10 Mar 2023 21:24:20 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9A=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=20formData=20=E4=BD=BF=E7=94=A8=20ref=E3=80=82=E5=8E=9F?=
 =?UTF-8?q?=E5=9B=A0=E6=98=AF=EF=BC=8C=E5=8E=9F=E6=9C=AC=E7=9A=84=20reacti?=
 =?UTF-8?q?ve=20=E6=97=A0=E6=B3=95=E6=95=B4=E4=B8=AA=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/views/infra/config/form.vue b/src/views/infra/config/form.vue
index d9071e36..5a45c83c 100644
--- a/src/views/infra/config/form.vue
+++ b/src/views/infra/config/form.vue
@@ -40,6 +40,7 @@
 </template>
 <script setup lang="ts">
 import * as ConfigApi from '@/api/infra/config'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -47,7 +48,7 @@ const modelVisible = ref(false) // 弹窗的是否展示
 const modelTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = reactive({
+const formData = ref({
   id: undefined,
   category: '',
   name: '',
@@ -75,9 +76,7 @@ const openModal = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      const data = await ConfigApi.getConfig(id)
-      // TODO 规范纠结点：因为用 reactive，所以需要使用 Object；可以替换的方案，1）把 reactive 改成 ref；
-      Object.assign(formData, data)
+      formData.value = await ConfigApi.getConfig(id)
     } finally {
       formLoading.value = false
     }
@@ -95,7 +94,7 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData as ConfigApi.ConfigVO
+    const data = formData.value as ConfigApi.ConfigVO
     if (formType.value === 'create') {
       await ConfigApi.createConfig(data)
       message.success(t('common.createSuccess'))
@@ -104,6 +103,7 @@ const submitForm = async () => {
       message.success(t('common.updateSuccess'))
     }
     modelVisible.value = false
+    // 发送操作成功的事件
     emit('success')
   } finally {
     formLoading.value = false
@@ -112,7 +112,7 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = () => {
-  Object.assign(formData, {
+  formData.value = {
     id: undefined,
     category: '',
     name: '',
@@ -120,7 +120,7 @@ const resetForm = () => {
     value: '',
     visible: true,
     remark: ''
-  })
+  }
   formRef.value?.resetFields()
 }
 </script>