Merge pull request youlaitech#99 from cshaptx4869/patch-61

feat(PageModal): ✨ 表单项增加computed和watchEffect配置

Author: haoxianrui

Diff for: 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 for: 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 for: 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;
 }>;