feat: ✨ 增加CURD配置化实现

src/components/PageModal/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    v-bind="modalConfig.dialog"
+    @close="closeDialog"
+  >
+    <!-- 表单 -->
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="modalConfig.formRules"
+      label-width="80px"
+    >
+      <template v-for="item in modalConfig.formItems" :key="item.prop">
+        <el-form-item :label="item.label" :prop="item.prop">
+          <!-- Select 选择器 -->
+          <template v-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 :label="option.label" :value="option.value" />
+              </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 :label="option.label" :value="option.value" />
+              </template>
+            </el-radio-group>
+          </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"
+              v-bind="item.attrs"
+            ></slot>
+          </template>
+          <!-- Input 输入框 -->
+          <template v-else>
+            <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+          </template>
+        </el-form-item>
+      </template>
+    </el-form>
+    <!-- 弹窗底部操作按钮 -->
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="closeDialog">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useThrottleFn } from "@vueuse/core";
+import type { FormRules, ElForm } from "element-plus";
+
+// 定义接收的属性/自定义事件
+const props = defineProps<{
+  modalConfig: {
+    dialog: any;
+    pageName?: string;
+    formAction: (data: any) => Promise<any>;
+    formItems: Array<{
+      type: string;
+      label: string;
+      prop: string;
+      attrs?: any;
+      initialValue?: any;
+      options?: { label: string; value: any }[];
+      slotName?: string;
+    }>;
+    formRules: FormRules;
+  };
+}>();
+const emit = defineEmits<{
+  submitClick: [];
+}>();
+
+const dialogVisible = ref(false);
+const formRef = ref<InstanceType<typeof ElForm>>();
+const formData = reactive<any>({});
+// 初始化
+function setModalVisible(initData: any = {}) {
+  dialogVisible.value = true;
+  for (const item of props.modalConfig.formItems) {
+    formData[item.prop] = initData[item.prop] ?? item.initialValue ?? "";
+  }
+}
+// 表单提交
+const handleSubmit = useThrottleFn(() => {
+  formRef.value?.validate((valid: any) => {
+    if (valid) {
+      props.modalConfig.formAction(formData).then(() => {
+        ElMessage.success(
+          props.modalConfig.dialog.title
+            ? `${props.modalConfig.dialog.title}成功`
+            : "操作成功"
+        );
+        emit("submitClick");
+        closeDialog();
+      });
+    }
+  });
+}, 3000);
+// 关闭弹窗
+function closeDialog() {
+  dialogVisible.value = false;
+  formRef.value?.resetFields();
+  formRef.value?.clearValidate();
+}
+// 暴露的属性和方法
+defineExpose({ setModalVisible });
+</script>
+
+<style lang="scss" scoped></style>