From e5098decfda23e0e4ee485202cab76c390d107eb Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Tue, 14 May 2024 15:03:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(PageModal):=20:sparkles:=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81drawer=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageModal/Form.vue  | 147 +++++++++++++
 src/components/PageModal/index.vue | 319 +++++++++--------------------
 src/components/PageModal/types.ts  |  57 ++++++
 3 files changed, 301 insertions(+), 222 deletions(-)
 create mode 100644 src/components/PageModal/Form.vue
 create mode 100644 src/components/PageModal/types.ts

diff --git a/src/components/PageModal/Form.vue b/src/components/PageModal/Form.vue
new file mode 100644
index 00000000..bf29a6dc
--- /dev/null
+++ b/src/components/PageModal/Form.vue
@@ -0,0 +1,147 @@
+<template>
+  <el-form
+    ref="formRef"
+    label-width="auto"
+    v-bind="form"
+    :model="formData"
+    :rules="formRules"
+  >
+    <template v-for="item in formItems" :key="item.prop">
+      <el-form-item v-show="!item.hidden" :label="item.label" :prop="item.prop">
+        <!-- Label -->
+        <template #label v-if="item.tips">
+          <span>
+            {{ item.label }}
+            <el-tooltip
+              placement="bottom"
+              effect="light"
+              :content="item.tips"
+              :raw-content="true"
+            >
+              <el-icon style="vertical-align: -0.15em" size="16">
+                <QuestionFilled />
+              </el-icon>
+            </el-tooltip>
+          </span>
+        </template>
+        <!-- Input 输入框 -->
+        <template v-if="item.type === 'input' || item.type === undefined">
+          <template v-if="item.attrs?.type === 'number'">
+            <el-input
+              v-model.number="formData[item.prop]"
+              v-bind="item.attrs"
+            />
+          </template>
+          <template v-else>
+            <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+          </template>
+        </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>
+        <!-- 自定义 -->
+        <template v-else-if="item.type === 'custom'">
+          <slot
+            :name="item.slotName ?? item.prop"
+            :prop="item.prop"
+            :formData="formData"
+            :attrs="item.attrs"
+          ></slot>
+        </template>
+      </el-form-item>
+    </template>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance, FormRules } from "element-plus";
+import { reactive, ref, watch } from "vue";
+import { IForm, IFormItems, IObject } from "./types";
+
+// 定义接收的属性
+const props = withDefaults(
+  defineProps<{
+    // 主键名(主要用于编辑数据,默认为id)
+    pk?: string;
+    // form组件属性
+    form?: IForm;
+    // 表单项
+    formItems: IFormItems;
+  }>(),
+  {
+    pk: "id",
+  }
+);
+
+const formRef = ref<FormInstance>();
+const formData = reactive<IObject>({});
+const formRules: FormRules = {};
+// 初始化
+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);
+      }
+    );
+  }
+}
+// 获取表单数据
+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, props.pk)) {
+    formData[props.pk] = data[props.pk];
+  }
+}
+// 设置表单项值
+function setFormItemData(key: string, value: any) {
+  formData[key] = value;
+}
+
+// 暴露的属性和方法
+defineExpose({ formRef, getFormData, setFormData, setFormItemData });
+</script>
diff --git a/src/components/PageModal/index.vue b/src/components/PageModal/index.vue
index 6f49e969..f371bd50 100644
--- a/src/components/PageModal/index.vue
+++ b/src/components/PageModal/index.vue
@@ -1,193 +1,87 @@
 <template>
-  <el-dialog
-    v-model="dialogVisible"
-    :align-center="true"
-    :append-to-body="true"
-    width="70vw"
-    v-bind="modalConfig.dialog"
-    style="padding-right: 0"
-    @close="closeDialog"
-  >
-    <!-- 滚动 -->
-    <el-scrollbar max-height="65vh">
+  <!-- drawer -->
+  <template v-if="props.modalConfig.component === 'drawer'">
+    <el-drawer
+      v-model="modalVisible"
+      :append-to-body="true"
+      v-bind="modalConfig.drawer"
+      @open="handleOpenModal"
+      @close="handleCloseModal"
+    >
       <!-- 表单 -->
-      <el-form
-        ref="formRef"
-        label-width="auto"
-        v-bind="modalConfig.form"
-        style="padding-right: var(--el-dialog-padding-primary)"
-        :model="formData"
-        :rules="formRules"
-      >
-        <template v-for="item in modalConfig.formItems" :key="item.prop">
-          <el-form-item
-            v-show="!item.hidden"
-            :label="item.label"
-            :prop="item.prop"
-          >
-            <!-- Label -->
-            <template #label v-if="item.tips">
-              <span>
-                {{ item.label }}
-                <el-tooltip
-                  placement="bottom"
-                  effect="light"
-                  :content="item.tips"
-                  :raw-content="true"
-                >
-                  <el-icon style="vertical-align: -0.15em" size="16">
-                    <QuestionFilled />
-                  </el-icon>
-                </el-tooltip>
-              </span>
-            </template>
-            <!-- Input 输入框 -->
-            <template v-if="item.type === 'input' || item.type === undefined">
-              <template v-if="item.attrs?.type === 'number'">
-                <el-input
-                  v-model.number="formData[item.prop]"
-                  v-bind="item.attrs"
-                />
-              </template>
-              <template v-else>
-                <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
-              </template>
-            </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>
-            <!-- 自定义 -->
-            <template v-else-if="item.type === 'custom'">
-              <slot
-                :name="item.slotName ?? item.prop"
-                :prop="item.prop"
-                :formData="formData"
-                :attrs="item.attrs"
-              ></slot>
-            </template>
-          </el-form-item>
-        </template>
-      </el-form>
-    </el-scrollbar>
-    <!-- 弹窗底部操作按钮 -->
-    <template #footer>
-      <div style="padding-right: var(--el-dialog-padding-primary)">
-        <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        <el-button @click="closeDialog">取 消</el-button>
-      </div>
-    </template>
-  </el-dialog>
+      <page-form
+        ref="pageFormRef"
+        :form="modalConfig.form"
+        :form-items="modalConfig.formItems"
+      />
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div>
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="handleCloseModal">取 消</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </template>
+  <!-- dialog -->
+  <template v-else>
+    <el-dialog
+      v-model="modalVisible"
+      :align-center="true"
+      :append-to-body="true"
+      width="70vw"
+      v-bind="modalConfig.dialog"
+      style="padding-right: 0"
+      @open="handleOpenModal"
+      @close="handleCloseModal"
+    >
+      <!-- 滚动 -->
+      <el-scrollbar max-height="65vh">
+        <!-- 表单 -->
+        <page-form
+          ref="pageFormRef"
+          :form="modalConfig.form"
+          :form-items="modalConfig.formItems"
+          style="padding-right: var(--el-dialog-padding-primary)"
+        />
+      </el-scrollbar>
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="handleCloseModal">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </template>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
 import { useThrottleFn } from "@vueuse/core";
-import type {
-  DialogProps,
-  FormProps,
-  FormRules,
-  FormItemRule,
-} from "element-plus";
+import { ref } from "vue";
+import PageForm from "./Form.vue";
+import { IDialog, IDrawer, IForm, IFormItems, IObject } from "./types";
 
-// 对象类型
-type IObject = Record<string, any>;
 // 定义接收的属性
 export interface IModalConfig<T = any> {
   // 页面名称
   pageName?: string;
   // 主键名(主要用于编辑数据,默认为id)
   pk?: string;
+  // 组件类型
+  component?: "dialog" | "drawer";
   // dialog组件属性
-  dialog?: Partial<Omit<DialogProps, "modelValue">>;
+  dialog?: IDialog;
+  // drawer组件属性
+  drawer?: IDrawer;
   // form组件属性
-  form?: Partial<Omit<FormProps, "model" | "rules">>;
-  // 提交的网络请求函数(需返回promise)
-  formAction: (data: T) => Promise<any>;
+  form?: IForm;
+  // 表单项
+  formItems: IFormItems<T>;
   // 提交之前处理
   beforeSubmit?: (data: T) => void;
-  // 表单项
-  formItems: Array<{
-    // 组件类型(如input,select,radio,custom等，默认input)
-    type?:
-      | "input"
-      | "select"
-      | "radio"
-      | "checkbox"
-      | "tree-select"
-      | "date-picker"
-      | "input-number"
-      | "custom";
-    // 组件属性
-    attrs?: IObject;
-    // 组件可选项(适用于select,radio,checkbox组件)
-    options?: Array<{
-      label: string;
-      value: any;
-      disabled?: boolean;
-      [key: string]: any;
-    }>;
-    // 插槽名(适用于组件类型为custom)
-    slotName?: string;
-    // 标签文本
-    label: string;
-    // 标签提示
-    tips?: string;
-    // 键名
-    prop: string;
-    // 验证规则
-    rules?: FormItemRule[];
-    // 初始值
-    initialValue?: any;
-    // 是否隐藏
-    hidden?: boolean;
-    // 监听函数
-    watch?: (newValue: any, oldValue: any, data: T) => void;
-  }>;
+  // 提交的网络请求函数(需返回promise)
+  formAction: (data: T) => Promise<any>;
 }
 const props = defineProps<{
   modalConfig: IModalConfig;
@@ -196,72 +90,53 @@ const props = defineProps<{
 const emit = defineEmits<{
   submitClick: [];
 }>();
-// 暴露的属性和方法
-defineExpose({ setModalVisible, getFormData, setFormData });
 
-const pk = props.modalConfig.pk ?? "id";
-const dialogVisible = ref(false);
-const formRef = ref<InstanceType<typeof ElForm>>();
-const formData = reactive<IObject>({});
-const formRules: FormRules = {};
-// 初始化
-for (const item of props.modalConfig.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);
-      }
-    );
-  }
-}
+const modalVisible = ref(false);
+const pageFormRef = ref<InstanceType<typeof PageForm>>();
+let initialFormData = {};
 // 显示dialog
-function setModalVisible(initData: IObject = {}) {
-  dialogVisible.value = true;
-  for (const key in formData) {
-    if (Object.hasOwn(formData, key) && key in initData) {
-      formData[key] = initData[key];
-    }
-  }
-  if (Object.hasOwn(initData, pk)) {
-    formData[pk] = initData[pk];
-  }
+function setModalVisible(data: IObject = {}) {
+  modalVisible.value = true;
+  initialFormData = data;
 }
 // 表单提交
 const handleSubmit = useThrottleFn(() => {
-  formRef.value?.validate((valid: boolean) => {
+  pageFormRef.value?.formRef?.validate((valid: boolean) => {
     if (valid) {
+      const formData = pageFormRef.value?.getFormData();
       if (typeof props.modalConfig.beforeSubmit === "function") {
         props.modalConfig.beforeSubmit(formData);
       }
       props.modalConfig.formAction(formData).then(() => {
-        ElMessage.success(
-          props.modalConfig.dialog?.title
-            ? `${props.modalConfig.dialog.title}成功`
-            : "操作成功"
-        );
+        let msg = "操作成功";
+        if (props.modalConfig.component === "drawer") {
+          if (props.modalConfig.drawer?.title) {
+            msg = props.modalConfig.drawer?.title;
+          }
+        } else {
+          if (props.modalConfig.dialog?.title) {
+            msg = props.modalConfig.dialog?.title;
+          }
+        }
+        ElMessage.success(msg);
         emit("submitClick");
-        closeDialog();
+        handleCloseModal();
       });
     }
   });
 }, 3000);
+// 打开弹窗
+function handleOpenModal() {
+  pageFormRef.value?.setFormData(initialFormData);
+}
 // 关闭弹窗
-function closeDialog() {
-  dialogVisible.value = false;
-  formRef.value?.resetFields();
-  formRef.value?.clearValidate();
-}
-// 获取表单数据
-function getFormData(key?: string) {
-  return key === undefined ? formData : formData[key] ?? undefined;
-}
-// 设置表单值
-function setFormData(key: string, value: any) {
-  formData[key] = value;
+function handleCloseModal() {
+  modalVisible.value = false;
+  pageFormRef.value?.formRef?.resetFields();
+  pageFormRef.value?.formRef?.clearValidate();
 }
+// 暴露的属性和方法
+defineExpose({ setModalVisible });
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/PageModal/types.ts b/src/components/PageModal/types.ts
new file mode 100644
index 00000000..dfd8a317
--- /dev/null
+++ b/src/components/PageModal/types.ts
@@ -0,0 +1,57 @@
+import type {
+  DialogProps,
+  DrawerProps,
+  FormProps,
+  FormItemRule,
+} from "element-plus";
+
+// dialog组件属性
+export type IDialog = Partial<Omit<DialogProps, "modelValue">>;
+
+// drawer组件属性
+export type IDrawer = Partial<Omit<DrawerProps, "modelValue">>;
+
+// form组件属性
+export type IForm = Partial<Omit<FormProps, "model" | "rules">>;
+
+// 对象类型
+export type IObject = Record<string, any>;
+
+// 表单项
+export type IFormItems<T = any> = Array<{
+  // 组件类型(如input,select,radio,custom等，默认input)
+  type?:
+    | "input"
+    | "select"
+    | "radio"
+    | "checkbox"
+    | "tree-select"
+    | "date-picker"
+    | "input-number"
+    | "custom";
+  // 组件属性
+  attrs?: IObject;
+  // 组件可选项(适用于select,radio,checkbox组件)
+  options?: Array<{
+    label: string;
+    value: any;
+    disabled?: boolean;
+    [key: string]: any;
+  }>;
+  // 插槽名(适用于组件类型为custom)
+  slotName?: string;
+  // 标签文本
+  label: string;
+  // 标签提示
+  tips?: string;
+  // 键名
+  prop: string;
+  // 验证规则
+  rules?: FormItemRule[];
+  // 初始值
+  initialValue?: any;
+  // 是否隐藏
+  hidden?: boolean;
+  // 监听函数
+  watch?: (newValue: any, oldValue: any, data: T) => void;
+}>;