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,

4
src/views/demo/curd/config/content.ts
View File

@@ -112,12 +112,12 @@ const contentConfig: IContentConfig<UserPageQuery> = {
{
name: "detail",
text: "详情",
attrs: { icon: "Document" },
attrs: { icon: "Document", type: "primary" },
},
{
name: "reset_pwd",
text: "重置密码",
perm: "password:reset",
// perm: "password-reset",
attrs: {
icon: "refresh-left",
// color: "#626AEF", // 使用 text 属性，颜色不生效

15
src/views/demo/curd/config/content2.ts
View File

@@ -5,6 +5,7 @@ const contentConfig: IContentConfig = {
table: {
showOverflowTooltip: true,
},
pagePosition: "right",
toolbar: [],
indexAction: function (params) {
// 模拟发起网络请求获取列表数据
@@ -14,7 +15,7 @@ const contentConfig: IContentConfig = {
list: [
{
id: 1,
username: "tom",
username: "root",
avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
percent: 99,
price: 10,
@@ -115,14 +116,16 @@ const contentConfig: IContentConfig = {
width: 220,
templet: "tool",
operat: [
"view",
"edit",
{
name: "reset_pwd",
text: "重置密码",
perm: "password:reset",
attrs: { icon: "refresh-left", type: "primary" },
name: "delete",
text: "展示删除",
perm: "delete",
attrs: { icon: "delete", type: "danger" },
render(row) {
// 根据条件，显示或隐藏
return row.id === 1;
return row.id !== 1;
},
},
],

17
src/views/demo/curd/config/edit.ts
View File

@@ -2,6 +2,8 @@ import UserAPI, { type UserForm } from "@/api/system/user.api";
import type { IModalConfig } from "@/components/CURD/types";
import { DeviceEnum } from "@/enums/settings/device.enum";
import { useAppStore } from "@/store";
import DeptAPI from "@/api/system/dept.api";
import RoleAPI from "@/api/system/role.api";
const modalConfig: IModalConfig<UserForm> = {
permPrefix: "sys:user",
@@ -11,12 +13,12 @@ const modalConfig: IModalConfig<UserForm> = {
size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
},
pk: "id",
beforeSubmit(data) {
console.log("beforeSubmit", data);
},
formAction: function (data) {
return UserAPI.update(data.id as string, data);
},
beforeSubmit(data) {
console.log("提交之前处理", data);
},
formItems: [
{
label: "用户名",
@@ -49,12 +51,17 @@ const modalConfig: IModalConfig<UserForm> = {
"check-strictly": true,
"render-after-expand": false,
},
async initFn(formItem) {
// 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
formItem.attrs.data = await DeptAPI.getOptions();
},
},
{
type: "custom",
label: "性别",
prop: "gender",
initialValue: 1,
attrs: { style: { width: "100%" } },
},
{
label: "角色",
@@ -67,6 +74,9 @@ const modalConfig: IModalConfig<UserForm> = {
},
options: [],
initialValue: [],
async initFn(formItem) {
formItem.options = await RoleAPI.getOptions();
},
},
{
type: "input",
@@ -105,6 +115,7 @@ const modalConfig: IModalConfig<UserForm> = {
prop: "status",
type: "switch",
attrs: {
inlinePrompt: true,
activeText: "正常",
inactiveText: "禁用",
activeValue: 1,

105
src/views/demo/curd/config/edit2.ts Normal file
View File

@@ -0,0 +1,105 @@
import type { IModalConfig } from "@/components/CURD/types";
import { DeviceEnum } from "@/enums/settings/device.enum";
import { useAppStore } from "@/store";
const modalConfig: IModalConfig = {
permPrefix: "sys:user",
component: "drawer",
colon: true,
pk: "id",
drawer: {
title: "修改用户",
size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
},
form: { labelPosition: "right", labelWidth: "auto" },
beforeSubmit(data) {
console.log("beforeSubmit", data);
},
formAction: function (data) {
// return UserAPI.update(data.id as string, data);
// 模拟发起网络请求修改字段
ElMessage.success(JSON.stringify(data));
return Promise.resolve(null);
},
formItems: [
{
tips: { effect: "light", placement: "top", content: "自定义文字提示" },
type: "input",
label: "文本",
prop: "username",
attrs: { placeholder: "请输入", clearable: true },
},
{
type: "input-number",
label: "百分比",
prop: "percent",
attrs: { placeholder: "请输入", controls: false },
slotName: "suffix",
},
{
type: "input-number",
label: "货币符",
prop: "price",
attrs: { placeholder: "请输入", controls: false },
slotName: "prefix",
},
{
type: "input",
label: "链接",
prop: "url",
attrs: { placeholder: "请输入", clearable: true },
},
{
type: "icon-select",
label: "链接",
prop: "icon",
},
{
type: "custom",
label: "列表值",
prop: "gender",
slotName: "gender",
attrs: { style: { width: "100%" } },
},
{
type: "select",
label: "自定义",
prop: "status",
attrs: { placeholder: "全部", clearable: true },
options: [
{ label: "启用", value: 1 },
{ label: "禁用", value: 0 },
],
},
{
type: "switch",
label: "Switch",
prop: "status2",
attrs: {
inlinePrompt: true,
activeValue: 1,
inactiveValue: 0,
activeText: "启用",
inactiveText: "禁用",
},
},
{
type: "input-number",
label: "输入框",
prop: "sort",
attrs: { placeholder: "请输入", controls: false },
},
{
type: "date-picker",
label: "日期格式化",
prop: "createTime",
attrs: {
type: "datetime",
format: "YYYY/MM/DD hh:mm:ss",
"value-format": "x",
},
},
],
};
export default reactive(modalConfig);

106
src/views/demo/curd/index.vue
View File

@@ -26,11 +26,10 @@
ref="contentRef"
:content-config="contentConfig"
@add-click="handleAddClick"
@edit-click="handleEditClick"
@export-click="handleExportClick"
@search-click="handleSearchClick"
@toolbar-click="handleToolbarClick"
@operat-click="handleOperatClick"
@operate-click="handleOperateClick"
@filter-change="handleFilterChange"
>
<template #status="scope">
@@ -75,10 +74,11 @@
</template>
<template v-else>
<page-search ref="searchRef" :search-config="searchConfig2" @reset-click="handleResetClick" />
<page-content
ref="contentRef"
:content-config="contentConfig2"
@operat-click="handleOperatClick"
@operate-click="handleOperateClick2"
>
<template #status="scope">
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
@@ -86,20 +86,31 @@
</el-tag>
</template>
</page-content>
<page-modal ref="editModalRef" :modal-config="editModalConfig2">
<template #suffix>
<span style="color: black">%</span>
</template>
<template #prefix>
<span>$</span>
</template>
<template #gender="scope">
<Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
</template>
</page-modal>
</template>
</div>
</template>
<script setup lang="ts">
import UserAPI from "@/api/system/user.api";
import DeptAPI from "@/api/system/dept.api";
import RoleAPI from "@/api/system/role.api";
import type { IObject, IOperatData } from "@/components/CURD/types";
import type { IObject, IOperateData } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
import addModalConfig from "./config/add";
import contentConfig from "./config/content";
import contentConfig2 from "./config/content2";
import editModalConfig from "./config/edit";
import editModalConfig2 from "./config/edit2";
import searchConfig from "./config/search";
import searchConfig2 from "./config/search2";
@@ -111,7 +122,8 @@ const {
handleQueryClick,
handleResetClick,
// handleAddClick,
// handleEditClick,
handleEditClick,
handleViewClick,
handleSubmitClick,
handleExportClick,
handleSearchClick,
@@ -121,22 +133,8 @@ const {
// 新增
async function handleAddClick() {
addModalRef.value?.setModalVisible();
// 加载部门下拉数据源
addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
}
// 编辑
async function handleEditClick(row: IObject) {
editModalRef.value?.handleDisabled(false);
editModalRef.value?.setModalVisible();
// 加载部门下拉数据源
editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
// 根据id获取数据进行填充
const data = await UserAPI.getFormData(row.id);
editModalRef.value?.setFormData(data);
// 加载下拉数据源，建议在初始化配置项 initFn 中加载，避免多次请求
// addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
}
// 其他工具栏
function handleToolbarClick(name: string) {
@@ -145,11 +143,22 @@ function handleToolbarClick(name: string) {
ElMessage.success("点击了自定义1按钮");
}
}
// 其他操作列
async function handleOperatClick(data: IOperatData) {
console.log(data);
// 重置密码
if (data.name === "reset_pwd") {
// 表格工具栏
const handleOperateClick = (data: IObject) => {
if (data.name === "detail") {
editModalConfig.drawer = { ...editModalConfig.drawer, title: "查看" };
handleViewClick(data.row, async () => {
// 加载下拉数据源，建议在初始化配置项 initFn 中加载，避免多次请求
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
return await UserAPI.getFormData(data.row.id); // 根据ID获取详情
});
} else if (data.name === "edit") {
editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
handleEditClick(data.row, async () => {
return await UserAPI.getFormData(data.row.id); // 根据ID获取详情
});
} else if (data.name === "reset_pwd") {
ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
confirmButtonText: "确定",
cancelButtonText: "取消",
@@ -162,23 +171,32 @@ async function handleOperatClick(data: IOperatData) {
ElMessage.success("密码重置成功，新密码是：" + value);
});
});
} else if (data.name === "detail") {
// 禁用表单编辑
editModalRef.value?.handleDisabled(true);
// 打开抽屉
editModalRef.value?.setModalVisible();
// 修改抽屉标题
editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
// 加载部门下拉数据源
editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
// 根据id获取数据进行填充
const formData = await UserAPI.getFormData(data.row.id);
// 设置表单数据
editModalRef.value?.setFormData(formData);
} else if (data.name === "delete") {
ElMessageBox.confirm("确认删除?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
UserAPI.deleteByIds(data.row.id).then(() => {
ElMessage.success("删除成功");
contentRef.value?.handleRefresh(true); // 刷新列表
});
})
.catch(() => {});
}
}
};
const handleOperateClick2 = (data: IOperateData) => {
if (data.name === "view") {
editModalConfig.drawer = { ...editModalConfig.drawer, title: "查看" };
handleViewClick(data.row);
} else if (data.name === "edit") {
editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
handleEditClick(data.row);
} else if (data.name === "delete") {
ElMessage.success("模拟删除成功");
}
};
// 切换示例
const isA = ref(true);