From f181597b035159c63fff549f86be974664f210d1 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Tue, 14 May 2024 20:51:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(PageModal):=20:sparkles:=20=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B9=E5=A2=9E=E5=8A=A0computed=E5=92=8CwatchEffec?=
 =?UTF-8?q?t=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageModal/Form.vue  | 40 ++++++++++++++++++++++++------
 src/components/PageModal/index.vue |  4 ++-
 src/components/PageModal/types.ts  |  4 +++
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/PageModal/Form.vue b/src/components/PageModal/Form.vue
index bf29a6dc..d24d734e 100644
--- a/src/components/PageModal/Form.vue
+++ b/src/components/PageModal/Form.vue
@@ -88,7 +88,7 @@
 
 <script setup lang="ts">
 import type { FormInstance, FormRules } from "element-plus";
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch, computed, watchEffect } from "vue";
 import { IForm, IFormItems, IObject } from "./types";
 
 // 定义接收的属性
@@ -109,19 +109,45 @@ const props = withDefaults(
 const formRef = ref<FormInstance>();
 const formData = reactive<IObject>({});
 const formRules: FormRules = {};
+const watchArr = [];
+const computedArr = [];
+const watchEffectArr = [];
 // 初始化
 for (const item of props.formItems) {
   formData[item.prop] = item.initialValue ?? "";
   formRules[item.prop] = item.rules ?? [];
   if (item.watch !== undefined) {
-    watch(
-      () => formData[item.prop],
-      (newValue, oldValue) => {
-        item.watch?.(newValue, oldValue, formData);
-      }
-    );
+    watchArr.push({ field: item.prop, func: item.watch });
+  }
+  if (item.computed !== undefined) {
+    computedArr.push({ field: item.prop, func: item.computed });
+  }
+  if (item.watchEffect !== undefined) {
+    watchEffectArr.push(item.watchEffect);
   }
 }
+watchArr.forEach(({ field, func }) => {
+  watch(
+    () => formData[field],
+    (newValue, oldValue) => {
+      func(newValue, oldValue, formData);
+    }
+  );
+});
+computedArr.forEach(({ field, func }) => {
+  formData[field] = computed({
+    get() {
+      return func(formData);
+    },
+    // TODO
+    set() {},
+  });
+});
+watchEffectArr.forEach((func) => {
+  watchEffect(() => {
+    func(formData);
+  });
+});
 // 获取表单数据
 function getFormData(key?: string) {
   return key === undefined ? formData : formData[key] ?? undefined;
diff --git a/src/components/PageModal/index.vue b/src/components/PageModal/index.vue
index 991dcf7c..998304c5 100644
--- a/src/components/PageModal/index.vue
+++ b/src/components/PageModal/index.vue
@@ -11,6 +11,7 @@
       <!-- 表单 -->
       <page-form
         ref="pageFormRef"
+        :pk="modalConfig.pk"
         :form="modalConfig.form"
         :form-items="modalConfig.formItems"
       />
@@ -40,6 +41,7 @@
         <!-- 表单 -->
         <page-form
           ref="pageFormRef"
+          :pk="modalConfig.pk"
           :form="modalConfig.form"
           :form-items="modalConfig.formItems"
           style="padding-right: var(--el-dialog-padding-primary)"
@@ -94,7 +96,7 @@ const emit = defineEmits<{
 const modalVisible = ref(false);
 const pageFormRef = ref<InstanceType<typeof PageForm>>();
 let initialFormData = {};
-// 显示dialog
+// 显示modal
 function setModalVisible(data: IObject = {}) {
   modalVisible.value = true;
   initialFormData = data;
diff --git a/src/components/PageModal/types.ts b/src/components/PageModal/types.ts
index dfd8a317..6688b036 100644
--- a/src/components/PageModal/types.ts
+++ b/src/components/PageModal/types.ts
@@ -54,4 +54,8 @@ export type IFormItems<T = any> = Array<{
   hidden?: boolean;
   // 监听函数
   watch?: (newValue: any, oldValue: any, data: T) => void;
+  // 计算属性函数
+  computed?: (data: T) => any;
+  // 监听收集函数
+  watchEffect?: (data: T) => void;
 }>;