refactor: ♻️ 同步CURD表单组件

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;

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>