From fe295bcbba9e00624f695f23164baa3c13ba4325 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E5=87=A1?= <2508779859@qq.com>
Date: Tue, 22 Apr 2025 21:19:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84pageForm=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 | 155 -------------------------------
 src/components/CURD/types.ts     |   2 -
 src/types/components.d.ts        |   1 -
 src/views/demo/curd/index.vue    |   5 +-
 4 files changed, 3 insertions(+), 160 deletions(-)
 delete mode 100644 src/components/CURD/PageForm.vue

diff --git a/src/components/CURD/PageForm.vue b/src/components/CURD/PageForm.vue
deleted file mode 100644
index d879d899..00000000
--- a/src/components/CURD/PageForm.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <el-form ref="formRef" label-width="auto" v-bind="form" :model="formData" :rules="formRules">
-    <el-row :gutter="20">
-      <template v-for="item in formItems" :key="item.prop">
-        <el-col v-show="!item.hidden" v-bind="item.col">
-          <el-form-item :label="item.label" :prop="item.prop">
-            <!-- Label -->
-            <template #label>
-              <span class="flex-y-center">
-                {{ item?.label || "" }}
-                <el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
-                  <QuestionFilled class="w-4 h-4 mx-1" />
-                </el-tooltip>
-              </span>
-            </template>
-
-            <!-- Input 输入框 -->
-            <template v-if="item.type === 'input' || item.type === undefined">
-              <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
-            </template>
-            <!-- Select 选择器 -->
-            <template v-else-if="item.type === 'select'">
-              <el-select v-model="formData[item.prop]" v-bind="item.attrs">
-                <template v-for="option in item.options" :key="option.value">
-                  <el-option v-bind="option" />
-                </template>
-              </el-select>
-            </template>
-            <!-- Radio 单选框 -->
-            <template v-else-if="item.type === 'radio'">
-              <el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
-                <template v-for="option in item.options" :key="option.value">
-                  <el-radio v-bind="option" />
-                </template>
-              </el-radio-group>
-            </template>
-            <!-- Checkbox 多选框 -->
-            <template v-else-if="item.type === 'checkbox'">
-              <el-checkbox-group v-model="formData[item.prop]" v-bind="item.attrs">
-                <template v-for="option in item.options" :key="option.value">
-                  <el-checkbox v-bind="option" />
-                </template>
-              </el-checkbox-group>
-            </template>
-            <!-- Input Number 数字输入框 -->
-            <template v-else-if="item.type === 'input-number'">
-              <el-input-number v-model="formData[item.prop]" v-bind="item.attrs" />
-            </template>
-            <!-- TreeSelect 树形选择 -->
-            <template v-else-if="item.type === 'tree-select'">
-              <el-tree-select v-model="formData[item.prop]" v-bind="item.attrs" />
-            </template>
-            <!-- DatePicker 日期选择器 -->
-            <template v-else-if="item.type === 'date-picker'">
-              <el-date-picker v-model="formData[item.prop]" v-bind="item.attrs" />
-            </template>
-            <!-- Text 文本 -->
-            <template v-else-if="item.type === 'text'">
-              <el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
-            </template>
-            <!-- 自定义 -->
-            <template v-else-if="item.type === 'custom'">
-              <slot
-                :name="item.slotName ?? item.prop"
-                :prop="item.prop"
-                :form-data="formData"
-                :attrs="item.attrs"
-              />
-            </template>
-          </el-form-item>
-        </el-col>
-      </template>
-    </el-row>
-  </el-form>
-</template>
-
-<script setup lang="ts">
-import type { FormInstance, FormRules } from "element-plus";
-import { reactive, ref, watch, watchEffect } from "vue";
-import { IObject, IPageForm } from "./types";
-
-// 定义接收的属性
-const props = withDefaults(defineProps<IPageForm>(), {
-  pk: "id",
-});
-
-const formRef = ref<FormInstance>();
-const formItems = reactive<any>(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 ?? "";
-  formRules[item.prop] = item.rules ?? [];
-
-  if (item.watch !== undefined) {
-    prepareFuncs.push(() => {
-      watch(
-        () => formData[item.prop],
-        (newValue, oldValue) => {
-          item.watch && item.watch(newValue, oldValue, formData, formItems);
-        }
-      );
-    });
-  }
-
-  if (item.computed !== undefined) {
-    prepareFuncs.push(() => {
-      watchEffect(() => {
-        item.computed && (formData[item.prop] = item.computed(formData));
-      });
-    });
-  }
-
-  if (item.watchEffect !== undefined) {
-    prepareFuncs.push(() => {
-      watchEffect(() => {
-        item.watchEffect && item.watchEffect(formData);
-      });
-    });
-  }
-}
-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.prototype.hasOwnProperty.call(formData, key) && key in data) {
-      formData[key] = data[key];
-    }
-  }
-  if (Object.prototype.hasOwnProperty.call(data, props.pk)) {
-    formData[props.pk] = data[props.pk];
-  }
-}
-
-// 设置表单项值
-function setFormItemData(key: string, value: any) {
-  formData[key] = value;
-}
-
-// 获取tooltip提示框属性
-const getTooltipProps = (tips: string | IObject) => {
-  return typeof tips === "string" ? { content: tips } : tips;
-};
-
-// 暴露的属性和方法
-defineExpose({ formRef, getFormData, setFormData, setFormItemData });
-</script>
diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts
index 375f06e8..12ae896c 100644
--- a/src/components/CURD/types.ts
+++ b/src/components/CURD/types.ts
@@ -1,7 +1,6 @@
 import type { DialogProps, DrawerProps, FormItemRule, PaginationProps } from "element-plus";
 import type { FormProps, TableProps, ColProps, ButtonProps, CardProps } from "element-plus";
 import type PageContent from "./PageContent.vue";
-import type PageForm from "./PageForm.vue";
 import type PageModal from "./PageModal.vue";
 import type PageSearch from "./PageSearch.vue";
 import { CSSProperties } from "vue";
@@ -9,7 +8,6 @@ import { CSSProperties } from "vue";
 export type PageSearchInstance = InstanceType<typeof PageSearch>;
 export type PageContentInstance = InstanceType<typeof PageContent>;
 export type PageModalInstance = InstanceType<typeof PageModal>;
-export type PageFormInstance = InstanceType<typeof PageForm>;
 
 export type IObject = Record<string, any>;
 
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 4b31280f..6347a7f0 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -76,7 +76,6 @@ declare module "vue" {
     NoticeDropdown: (typeof import("./../components/Notice/NoticeDropdown.vue"))["default"];
     LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
     PageContent: (typeof import("./../components/CURD/PageContent.vue"))["default"];
-    PageForm: (typeof import("./../components/CURD/PageForm.vue"))["default"];
     PageModal: (typeof import("./../components/CURD/PageModal.vue"))["default"];
     PageSearch: (typeof import("./../components/CURD/PageSearch.vue"))["default"];
     Pagination: (typeof import("./../components/Pagination/index.vue"))["default"];
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index 46fa472a..cc35325b 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -65,7 +65,7 @@
       </page-modal>
 
       <!-- 二级弹窗 -->
-      <page-modal ref="addModalRef2" :modal-config="addModalConfig2" @custom-click="secondSubmit">
+      <page-modal ref="addModalRef2" :modal-config="addModalConfig2" @custom-submit="secondSubmit">
         <template #gender="scope">
           <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
         </template>
@@ -198,7 +198,8 @@ const handleOperateClick2 = (data: IOperateData) => {
 const openSecondModal = () => {
   handleAddClick(addModalRef2 as Ref<PageModalInstance>);
 };
-const secondSubmit = () => {
+const secondSubmit = (formData: any) => {
+  console.log("secondSubmit", formData);
   ElMessage.success("二级弹窗提交成功");
 };