From 2b03b2d2290a4d85017d759212988788b004bbb8 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Thu, 13 Jun 2024 14:24:51 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E5=90=8C=E6=AD=A5CURD?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CURD/PageForm.vue  | 16 ++++----
 src/components/CURD/PageModal.vue | 64 +++++++++++++++----------------
 2 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/src/components/CURD/PageForm.vue b/src/components/CURD/PageForm.vue
index 9f8243c0..969457c7 100644
--- a/src/components/CURD/PageForm.vue
+++ b/src/components/CURD/PageForm.vue
@@ -84,8 +84,8 @@
 
 <script setup lang="ts">
 import type { FormInstance, FormRules } from "element-plus";
-import { reactive, ref, watch, computed, watchEffect } from "vue";
-import { IPageForm, IObject } from "./types";
+import { reactive, ref, watch, watchEffect } from "vue";
+import { IObject, IPageForm } from "./types";
 
 // 定义接收的属性
 const props = withDefaults(defineProps<IPageForm>(), {
@@ -97,7 +97,6 @@ const formItems = reactive(props.formItems);
 const formData = reactive<IObject>({});
 const formRules: FormRules = {};
 const prepareFuncs = [];
-// 初始化
 for (const item of formItems) {
   item.initFn && item.initFn(item);
   formData[item.prop] = item.initialValue ?? "";
@@ -116,12 +115,8 @@ for (const item of formItems) {
 
   if (item.computed !== undefined) {
     prepareFuncs.push(() => {
-      formData[item.prop] = computed({
-        get() {
-          return item.computed ? item.computed(formData) : undefined;
-        },
-        // TODO
-        set() {},
+      watchEffect(() => {
+        item.computed && (formData[item.prop] = item.computed(formData));
       });
     });
   }
@@ -135,10 +130,12 @@ for (const item of formItems) {
   }
 }
 prepareFuncs.forEach((func) => func());
+
 // 获取表单数据
 function getFormData(key?: string) {
   return key === undefined ? formData : formData[key] ?? undefined;
 }
+
 // 设置表单值
 function setFormData(data: IObject) {
   for (const key in formData) {
@@ -150,6 +147,7 @@ function setFormData(data: IObject) {
     formData[props.pk] = data[props.pk];
   }
 }
+
 // 设置表单项值
 function setFormItemData(key: string, value: any) {
   formData[key] = value;
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index 2069c3b6..b2a34c45 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -265,8 +265,6 @@ const formItems = reactive(props.modalConfig.formItems);
 const formData = reactive<IObject>({});
 const formRules: FormRules = {};
 const prepareFuncs = [];
-
-// 初始化
 for (const item of formItems) {
   item.initFn && item.initFn(item);
   formData[item.prop] = item.initialValue ?? "";
@@ -301,6 +299,37 @@ for (const item of formItems) {
 }
 prepareFuncs.forEach((func) => func());
 
+// 获取表单数据
+function getFormData(key?: string) {
+  return key === undefined ? formData : formData[key] ?? undefined;
+}
+
+// 设置表单值
+function setFormData(data: IObject) {
+  for (const key in formData) {
+    if (Object.hasOwn(formData, key) && key in data) {
+      formData[key] = data[key];
+    }
+  }
+  if (Object.hasOwn(data, pk)) {
+    formData[pk] = data[pk];
+  }
+}
+
+// 设置表单项值
+function setFormItemData(key: string, value: any) {
+  formData[key] = value;
+}
+
+// 显示modal
+function setModalVisible(data: IObject = {}) {
+  modalVisible.value = true;
+  // nextTick解决赋值后重置表单无效问题
+  nextTick(() => {
+    Object.values(data).length > 0 && setFormData(data);
+  });
+}
+
 // 表单提交
 const handleSubmit = useThrottleFn(() => {
   formRef.value?.validate((valid: boolean) => {
@@ -336,37 +365,6 @@ function handleCloseModal() {
   });
 }
 
-// 显示modal
-function setModalVisible(data: IObject = {}) {
-  modalVisible.value = true;
-  // nextTick解决赋值后重置表单无效问题
-  nextTick(() => {
-    Object.values(data).length > 0 && setFormData(data);
-  });
-}
-
-// 获取表单数据
-function getFormData(key?: string) {
-  return key === undefined ? formData : formData[key] ?? undefined;
-}
-
-// 设置表单值
-function setFormData(data: IObject) {
-  for (const key in formData) {
-    if (Object.hasOwn(formData, key) && key in data) {
-      formData[key] = data[key];
-    }
-  }
-  if (Object.hasOwn(data, pk)) {
-    formData[pk] = data[pk];
-  }
-}
-
-// 设置表单项值
-function setFormItemData(key: string, value: any) {
-  formData[key] = value;
-}
-
 // 暴露的属性和方法
 defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData });
 </script>