tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ pageModal组件，代码重构，更新使用案例

Browse Source
This commit is contained in:
超凡
2025-04-20 23:24:37 +08:00
parent bf16ca5963
commit ce748496c6
9 changed files with 407 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/CURD/PageContent.vue
View File

@@ -160,7 +160,7 @@
v-hasPerm="btn.perm ?? '*:*:*'"
v-bind="btn.attrs"
@click="
handleOperat({
handleOperate({
name: btn.name,
row: scope.row,
column: scope.column,
@@ -331,7 +331,7 @@ import {
} from "element-plus";
import ExcelJS from "exceljs";
import { reactive, ref, computed } from "vue";
import type { IContentConfig, IObject, IOperatData } from "./types";
import type { IContentConfig, IObject, IOperateData } from "./types";
import type { IToolsButton } from "./types";
// 定义接收的属性
@@ -343,55 +343,10 @@ const emit = defineEmits<{
searchClick: [];
toolbarClick: [name: string];
editClick: [row: IObject];
operatClick: [data: IOperatData];
filterChange: [data: IObject];
operateClick: [data: IOperateData];
}>();
// 按钮文本映射
const BUTTONS_TEXT: Record<string, string> = {
add: "新增",
delete: "删除",
import: "导入",
export: "导出",
refresh: "刷新",
filter: "筛选列",
search: "搜索",
imports: "批量导入",
exports: "批量导出",
view: "查看",
edit: "编辑",
};
// 按钮权限映射
const AUTH_MAP: Record<string, string> = {
add: "add",
delete: "delete",
import: "import",
export: "export",
refresh: "*:*:*",
filter: "*:*:*",
search: "search",
imports: "imports",
exports: "exports",
view: "view",
edit: "edit",
};
// 按钮图标映射
const BUTTONS_ICON: Record<string, string> = {
add: "plus",
delete: "delete",
import: "upload",
export: "download",
refresh: "refresh",
filter: "operation",
search: "search",
imports: "upload",
exports: "download",
view: "view",
edit: "edit",
};
// 表格工具栏按钮配置
const config = computed(() => props.contentConfig);
const buttonConfig = reactive<Record<string, IObject>>({
@@ -821,18 +776,8 @@ function handleToolbar(name: string) {
}
// 操作列
function handleOperat(data: IOperatData) {
switch (data.name) {
case "edit":
emit("editClick", data.row);
break;
case "delete":
handleDelete(data.row[pk]);
break;
default:
emit("operatClick", data);
break;
}
function handleOperate(data: IOperateData) {
emit("operateClick", data);
}
// 属性修改
@@ -953,7 +898,7 @@ function saveXlsx(fileData: any, fileName: string) {
}
// 暴露的属性和方法
defineExpose({ fetchPageData, exportPageData, getFilterParams, getSelectionData });
defineExpose({ fetchPageData, exportPageData, getFilterParams, getSelectionData, handleRefresh });
</script>
<style lang="scss" scoped>

479
src/components/CURD/PageModal.vue
View File

@@ -3,97 +3,55 @@
<template v-if="modalConfig.component === 'drawer'">
<el-drawer
v-model="modalVisible"
:append-to-body="true"
v-bind="modalConfig.drawer"
@close="handleCloseModal"
v-bind="{ destroyOnClose: true, ...modalConfig.drawer }"
@close="handleClose"
>
<!-- 表单 -->
<el-form
ref="formRef"
label-width="auto"
v-bind="modalConfig.form"
:model="formData"
:rules="formRules"
>
<el-form ref="formRef" v-bind="modalConfig.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 v-if="item.tips" #label>
<template #label>
<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>
{{ item?.label || "" }}
<el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
<QuestionFilled class="w-4 h-4 mx-1" />
</el-tooltip>
<span v-if="modalConfig.colon" class="ml-0.5">:</span>
</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>
<!-- switch 开关 -->
<template v-else-if="item.type === 'switch'">
<el-switch v-model="formData[item.prop]" inline-prompt v-bind="item.attrs" />
</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'">
<!-- components -->
<template v-if="item.type === 'custom'">
<slot
:name="item.slotName ?? item.prop"
:prop="item.prop"
:form-data="formData"
:attrs="item.attrs"
/>
style="width: 100%"
></slot>
</template>
<component
:is="componentMap.get(item.type)"
v-else
v-model.trim="formData[item.prop]"
v-bind="{ style: { width: '100%' }, ...item.attrs }"
>
<template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
<component
:is="childrenMap.get(item.type)"
v-for="opt in item.options"
:label="opt.label"
:value="opt.value"
></component>
</template>
<template v-if="item?.slotName && $slots[item.slotName]" #[item.slotName]>
<slot :name="item.slotName" />
</template>
</component>
</el-form-item>
</el-col>
</template>
@@ -101,13 +59,8 @@
</el-form>
<!-- 弹窗底部操作按钮 -->
<template #footer>
<div v-if="!formDisable">
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
<div v-else>
<el-button @click="handleClose">关闭</el-button>
</div>
<el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
</template>
</el-drawer>
</template>
@@ -115,115 +68,61 @@
<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"
@close="handleCloseModal"
v-bind="{ destroyOnClose: true, appendToBody: true, ...modalConfig.dialog }"
@close="handleClose"
>
<!-- 滚动 -->
<el-scrollbar max-height="60vh">
<!-- 表单 -->
<el-form
ref="formRef"
label-width="auto"
v-bind="modalConfig.form"
style="padding-right: var(--el-dialog-padding-primary)"
: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 v-if="item.tips" #label>
<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>
<!-- 表单 -->
<el-form ref="formRef" v-bind="modalConfig.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">
<QuestionFilled class="w-4 h-4 mx-1" />
</el-tooltip>
<span v-if="modalConfig.colon" class="ml-0.5">:</span>
</span>
</template>
<!-- components -->
<template v-if="item.type === 'custom'">
<slot
:name="item.slotName ?? item.prop"
:prop="item.prop"
:form-data="formData"
:attrs="item.attrs"
></slot>
</template>
<component
:is="componentMap.get(item.type)"
v-else
v-model.trim="formData[item.prop]"
v-bind="{ style: { width: '100%' }, ...item.attrs }"
>
<template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
<component
:is="childrenMap.get(item.type)"
v-for="opt in item.options"
:label="opt.label"
:value="opt.value"
>
<slot v-if="item.slotName" :name="item.slotName"></slot>
</component>
</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>
<!-- switch 开关 -->
<template v-else-if="item.type === 'switch'">
<el-switch v-model="formData[item.prop]" inline-prompt v-bind="item.attrs" />
</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>
</el-scrollbar>
</component>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form>
<!-- 弹窗底部操作按钮 -->
<template #footer>
<div style="padding-right: var(--el-dialog-padding-primary)">
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
<el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
</template>
</el-dialog>
</template>
@@ -232,67 +131,62 @@
<script setup lang="ts">
import { useThrottleFn } from "@vueuse/core";
import type { FormInstance, FormRules } from "element-plus";
import { nextTick, reactive, ref, watch, watchEffect } from "vue";
import type { IModalConfig, IObject } from "./types";
import InputTag from "@/components/InputTag/index.vue";
import IconSelect from "@/components/IconSelect/index.vue";
// 定义接收的属性
const props = defineProps<{
modalConfig: IModalConfig;
}>();
const props = defineProps<{ modalConfig: IModalConfig }>();
// 自定义事件
const emit = defineEmits<{
submitClick: [];
}>();
const emit = defineEmits<{ submitClick: [] }>();
// 组件映射表
/* eslint-disable */
const componentMap = new Map([
// @ts-ignore
["input", markRaw(ElInput)], // @ts-ignore
["select", markRaw(ElSelect)], // @ts-ignore
["switch", markRaw(ElSwitch)], // @ts-ignore
["cascader", markRaw(ElCascader)], // @ts-ignore
["input-number", markRaw(ElInputNumber)], // @ts-ignore
["input-tag", markRaw(InputTag)], // @ts-ignore
["time-picker", markRaw(ElTimePicker)], // @ts-ignore
["time-select", markRaw(ElTimeSelect)], // @ts-ignore
["date-picker", markRaw(ElDatePicker)], // @ts-ignore
["tree-select", markRaw(ElTreeSelect)], // @ts-ignore"
["custom-tag", markRaw(InputTag)], // @ts-ignore
["text", markRaw(ElText)], // @ts-ignore
["radio", markRaw(ElRadioGroup)], // @ts-ignore"
["checkbox", markRaw(ElCheckboxGroup)], // @ts-ignore"
["icon-select", markRaw(IconSelect)], // @ts-ignore"
["custom", ""],
]);
const childrenMap = new Map([
// @ts-ignore
["select", markRaw(ElOption)], // @ts-ignore
["radio", markRaw(ElRadio)], // @ts-ignore"
["checkbox", markRaw(ElCheckbox)],
]);
/* eslint-enable */
const pk = props.modalConfig.pk ?? "id";
const modalVisible = ref(false);
const formRef = ref<FormInstance>();
const formItems = reactive(props.modalConfig.formItems);
const formItems = reactive(props.modalConfig.formItems ?? []);
const formData = reactive<IObject>({});
const formRules: FormRules = {};
const formDisable = ref(false);
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);
}
// 获取tooltip提示框属性
const getTooltipProps = (tips: string | IObject) => {
return typeof tips === "string" ? { content: tips } : tips;
};
// 隐藏弹窗
const handleClose = () => {
modalVisible.value = false;
formRef.value?.resetFields();
};
// 设置表单值
function setFormData(data: IObject) {
const setFormData = (data: IObject) => {
for (const key in formData) {
if (Object.prototype.hasOwnProperty.call(formData, key) && key in data) {
formData[key] = data[key];
@@ -301,77 +195,74 @@ function setFormData(data: IObject) {
if (Object.prototype.hasOwnProperty.call(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) => {
if (valid) {
if (typeof props.modalConfig.beforeSubmit === "function") {
props.modalConfig.beforeSubmit(formData);
}
props.modalConfig.formAction(formData).then(() => {
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");
handleClose();
});
if (!valid) return;
if (typeof props.modalConfig.beforeSubmit === "function") {
props.modalConfig.beforeSubmit(formData);
}
if (!props.modalConfig?.formAction) {
ElMessage.error("未配置exportAction");
return;
}
props.modalConfig.formAction(formData).then(() => {
let msg = "操作成功";
if (props.modalConfig.component === "drawer") {
msg = `${props.modalConfig.drawer?.title}成功`;
} else {
msg = `${props.modalConfig.dialog?.title}成功`;
}
ElMessage.success(msg);
emit("submitClick");
handleClose();
});
});
}, 3000);
// 隐藏弹窗
function handleClose() {
modalVisible.value = false;
}
onMounted(() => {
formItems.forEach((item) => {
item.initFn && item.initFn(item);
formRules[item.prop] = item?.rules ?? [];
props.modalConfig.form = { labelWidth: "auto", ...props.modalConfig?.form };
// 关闭弹窗
function handleCloseModal() {
formRef.value?.resetFields();
nextTick(() => {
formRef.value?.clearValidate();
});
}
// 禁用表单--用于详情时候用
function handleDisabled(disable: boolean) {
formDisable.value = disable;
props.modalConfig.formItems.forEach((item) => {
if (item) {
if (item.attrs) {
item.attrs.disabled = disable;
} else {
item.attrs = { disabled: disable };
}
if (["input-tag", "custom-tag", "cascader"].includes(item.type)) {
formData[item.prop] = Array.isArray(item.initialValue) ? item.initialValue : [];
} else if (item.type === "input-number") {
formData[item.prop] = item.initialValue ?? null;
} else {
formData[item.prop] = item.initialValue ?? "";
}
});
}
});
// 暴露的属性和方法
defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled });
defineExpose({
setFormData,
// 展示/因此 modal
setModalVisible: (visible: boolean = true) => (modalVisible.value = visible),
// 获取表单数据
getFormData: (key: string) => formData[key] ?? formData,
// 设置表单项值
setFormItemData: (key: string, value: any) => (formData[key] = value),
// 禁用表单
handleDisabled: (disable: boolean) => {
formDisable.value = disable;
props.modalConfig.form = {
...props.modalConfig.form,
disabled: disable,
};
},
});
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
:deep(.el-input-number .el-input__inner) {
text-align: left;
}
:deep(.el-input-number.is-without-controls .el-input__wrapper) {
padding-right: 11px !important ;
padding-left: 11px !important;
}
</style>

26
src/components/CURD/types.ts
View File

@@ -15,7 +15,7 @@ export type IObject = Record<string, any>;
type DataComponent = "date-picker" | "time-picker" | "time-select" | "custom-tag" | "input-tag";
type InputComponent = "input" | "select" | "input-number" | "cascader" | "tree-select";
type OtherComponent = "text" | "radio" | "checkbox" | "switch" | "custom";
type OtherComponent = "text" | "radio" | "checkbox" | "switch" | "icon-select" | "custom";
export type ISearchComponent = DataComponent | InputComponent;
export type IComponentType = DataComponent | InputComponent | OtherComponent;
@@ -26,14 +26,12 @@ export type IToolsButton = {
name: string; // 按钮名称
text?: string; // 按钮文本
perm?: Array<string> | string; // 权限标识(可以是完整权限字符串如'sys:user:add'或操作权限如'add')
icon?: string; // 按钮图标
type?: string; // 按钮类型
attrs?: Partial<ButtonProps> & { style?: CSSProperties }; // 按钮属性
render?: (row: IObject) => boolean; // 条件渲染
};
export type IToolsDefault = ToolbarLeft | ToolbarRight | ToolbarTable | IToolsButton;
export interface IOperatData {
export interface IOperateData {
name: string;
row: IObject;
column: IObject;
@@ -184,9 +182,11 @@ export interface IContentConfig<T = any> {
export interface IModalConfig<T = any> {
// 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验
permPrefix?: string;
// 标签冒号(默认：false)
colon?: boolean;
// 主键名(主要用于编辑数据,默认为id)
pk?: string;
// 组件类型
// 组件类型(默认：dialog)
component?: "dialog" | "drawer";
// dialog组件属性
dialog?: Partial<Omit<DialogProps, "modelValue">>;
@@ -195,7 +195,7 @@ export interface IModalConfig<T = any> {
// form组件属性
form?: IForm;
// 表单项
formItems: IFormItems<T>;
formItems: IFormItems;
// 提交之前处理
beforeSubmit?: (data: T) => void;
// 提交的网络请求函数(需返回promise)
@@ -205,9 +205,9 @@ export interface IModalConfig<T = any> {
export type IForm = Partial<Omit<FormProps, "model" | "rules">>;
// 表单项
export type IFormItems<T = any> = Array<{
export type IFormItems = Array<{
// 组件类型(如input,select,radio,custom等，默认input)
type?: IComponentType;
type: IComponentType;
// 组件属性
attrs?: IObject;
// 组件可选项(适用于select,radio,checkbox组件)
@@ -222,7 +222,7 @@ export type IFormItems<T = any> = Array<{
// 标签文本
label: string;
// 标签提示
tips?: string;
tips?: string | IObject;
// 键名
prop: string;
// 验证规则
@@ -233,12 +233,8 @@ export type IFormItems<T = any> = Array<{
hidden?: boolean;
// layout组件Col属性
col?: Partial<ColProps>;
// 监听函数
watch?: (newValue: any, oldValue: any, data: T, items: IObject[]) => void;
// 计算属性函数
computed?: (data: T) => any;
// 监听收集函数
watchEffect?: (data: T) => void;
// 组件事件
events?: Record<string, (...args: any) => void>;
// 初始化数据函数扩展
initFn?: (item: IObject) => void;
}>;

16
src/components/CURD/usePage.ts
View File

@@ -23,9 +23,18 @@ function usePage() {
addModalRef.value?.setModalVisible();
}
// 编辑
function handleEditClick(row: IObject) {
//显示编辑表单 根据数据进行填充
editModalRef.value?.setModalVisible(row);
async function handleEditClick(row: IObject, callback?: (result?: IObject) => IObject) {
editModalRef.value?.setModalVisible();
editModalRef.value?.handleDisabled(false);
let from = await (callback?.(row) ?? Promise.resolve(row));
editModalRef.value?.setFormData(from ? from : row);
}
// 编辑
async function handleViewClick(row: IObject, callback?: (result?: IObject) => IObject) {
editModalRef.value?.setModalVisible();
editModalRef.value?.handleDisabled(true);
let from = await (callback?.(row) ?? Promise.resolve(row));
editModalRef.value?.setFormData(from ? from : row);
}
// 表单提交
function handleSubmitClick() {
@@ -58,6 +67,7 @@ function usePage() {
handleResetClick,
handleAddClick,
handleEditClick,
handleViewClick,
handleSubmitClick,
handleExportClick,
handleSearchClick,