feat(PageModal): ✨ 支持drawer模式
This commit is contained in:
cshaptx4869
147
src/components/PageModal/Form.vue
Normal file
147
src/components/PageModal/Form.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
57
src/components/PageModal/types.ts
Normal file
57
src/components/PageModal/types.ts
Normal file
@@ -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;
|
||||
}>;
|
||||
Reference in New Issue
Block a user