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

feat: 项目结构重构优化

Browse Source
This commit is contained in:
Ray.Hao
2025-12-26 12:35:37 +08:00
parent 65ad4fe59f
commit aa374dd2ba
164 changed files with 11305 additions and 3103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
<template>
<template>
<div
class="rounded bg-[var(--el-bg-color)] border border-[var(--el-border-color)] p-5 h-full md:flex flex-1 flex-col md:overflow-auto"
>
<!-- 表格工具栏 -->
<!-- 表格工具 -->
<div class="flex flex-col md:flex-row justify-between gap-y-2.5 mb-2.5">
<!-- 左侧工具栏 -->
<!-- 左侧工具 -->
<div class="toolbar-left flex gap-y-2.5 gap-x-2 md:gap-x-3 flex-wrap">
<template v-for="(btn, index) in toolbarLeftBtn" :key="index">
<el-button
@@ -17,7 +17,7 @@
</el-button>
</template>
</div>
<!-- 右侧工具栏 -->
<!-- 右侧工具 -->
<div class="toolbar-right flex gap-y-2.5 gap-x-2 md:gap-x-3 flex-wrap">
<template v-for="(btn, index) in toolbarRightBtn" :key="index">
<el-popover v-if="btn.name === 'filter'" placement="bottom" trigger="click">
@@ -62,7 +62,7 @@
<el-image
:src="item"
:preview-src-list="scope.row[col.prop]"
:initial-index="index"
:initial-index="Number(index)"
:preview-teleported="true"
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
/>
@@ -78,7 +78,7 @@
</template>
</template>
</template>
<!-- 根据行的selectList属性返回对应列表值 -->
<!-- 根据行的selectList属性返回对应列表 -->
<template v-else-if="col.templet === 'list'">
<template v-if="col.prop">
{{ (col.selectList ?? {})[scope.row[col.prop]] }}
@@ -92,7 +92,7 @@
</el-link>
</template>
</template>
<!-- 生成开关组件 -->
<!-- 生成开关组 -->
<template v-else-if="col.templet === 'switch'">
<template v-if="col.prop">
<!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
@@ -111,7 +111,7 @@
/>
</template>
</template>
<!-- 生成输入框组件 -->
<!-- 生成输入框组 -->
<template v-else-if="col.templet === 'input'">
<template v-if="col.prop">
<el-input
@@ -125,7 +125,7 @@
<!-- 格式化为价格 -->
<template v-else-if="col.templet === 'price'">
<template v-if="col.prop">
{{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
{{ `${col.priceFormat ?? ""}${scope.row[col.prop]}` }}
</template>
</template>
<!-- 格式化为百分比 -->
@@ -220,7 +220,7 @@
<el-form-item label="工作表名" prop="sheetname">
<el-input v-model="exportsFormData.sheetname" clearable />
</el-form-item>
<el-form-item label="数据源" prop="origin">
<el-form-item label="数据来源" prop="origin">
<el-select v-model="exportsFormData.origin">
<el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
<el-option
@@ -247,8 +247,8 @@
<!-- 弹窗底部操作按钮 -->
<template #footer>
<div style="padding-right: var(--el-dialog-padding-primary)">
<el-button type="primary" @click="handleExportsSubmit">确 定</el-button>
<el-button @click="handleCloseExportsModal">取 消</el-button>
<el-button type="primary" @click="handleExportsSubmit">确定</el-button>
<el-button @click="handleCloseExportsModal">取消</el-button>
</div>
</template>
</el-dialog>
@@ -270,7 +270,7 @@
:model="importFormData"
:rules="importFormRules"
>
<el-form-item label="文件名" prop="files">
<el-form-item label="文件" prop="files">
<el-upload
ref="uploadRef"
v-model:file-list="importFormData.files"
@@ -283,7 +283,7 @@
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
<span>将文件拖到此处，或</span>
<span>将文件拖到此处，或点击上传</span>
<em>点击上传</em>
</div>
<template #tip>
@@ -312,9 +312,9 @@
:disabled="importFormData.files.length === 0"
@click="handleImportSubmit"
>
确 定
确定
</el-button>
<el-button @click="handleCloseImportModal">取 消</el-button>
<el-button @click="handleCloseImportModal">取消</el-button>
</div>
</template>
</el-dialog>
@@ -427,7 +427,7 @@ const toolbarRightBtn = computed(() => {
const tableToolbar = config.value.cols[config.value.cols.length - 1].operat ?? ["edit", "delete"];
const tableToolbarBtn = createToolbar(tableToolbar, { link: true, size: "small" });
// 表格列
// 表格相关
const cols = ref(
props.contentConfig.cols.map((col) => {
if (col.initFn) {
@@ -517,7 +517,7 @@ function handleDelete(id?: number | string) {
.then(() => {
ElMessage.success("删除成功");
removeIds.value = [];
//清空选中项
// 清空选中项
tableRef.value?.clearSelection();
handleRefresh(true);
})
@@ -551,7 +551,7 @@ const exportsFormData = reactive({
});
const exportsFormRules: FormRules = {
fields: [{ required: true, message: "请选择字段" }],
origin: [{ required: true, message: "请选择数据源" }],
origin: [{ required: true, message: "请选择数据来源" }],
};
// 打开导出弹窗
function handleOpenExportsModal() {
@@ -709,7 +709,7 @@ function handleImports() {
fileReader.onload = (ev) => {
if (ev.target !== null && ev.target.result !== null) {
const result = ev.target.result as ArrayBuffer;
// 从 buffer中加载数据解析
// 从 buffer 中加载并解析数据
workbook.xlsx
.load(result)
.then((workbook) => {
@@ -753,7 +753,7 @@ function handleImports() {
};
}
// 操作栏
// 操作人"
function handleToolbar(name: string) {
switch (name) {
case "refresh":
@@ -786,7 +786,7 @@ function handleToolbar(name: string) {
}
}
// 操作列
// 操作人"
function handleOperate(data: IOperateData) {
switch (data.name) {
case "delete":

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

@@ -1,4 +1,4 @@
<template>
<template>
<div>
<!-- drawer -->
<template v-if="modalConfig.component === 'drawer'">
@@ -59,8 +59,8 @@
</el-form>
<template #footer>
<el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
<el-button v-if="!formDisable" type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleClose">关闭</el-button>
</template>
</el-drawer>
</template>
@@ -124,8 +124,8 @@
</el-form>
<template #footer>
<el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
<el-button v-if="!formDisable" type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleClose">关闭</el-button>
</template>
</el-dialog>
</template>
@@ -144,7 +144,7 @@ defineSlots<{ [key: string]: (_args: any) => any }>();
const props = defineProps<{ modalConfig: IModalConfig }>();
// 自定义事件
const emit = defineEmits<{ submitClick: []; customSubmit: [queryParams: IObject] }>();
// 组件映射表
// 组件映射
const componentMap = new Map<IComponentType, any>([
// @ts-ignore
@@ -173,14 +173,14 @@ const childrenMap = new Map<IComponentType, any>([
]);
const pk = props.modalConfig.pk ?? "id"; // 主键名，用于表单数据处理
const modalVisible = ref(false); // 弹窗显示状态
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 formDisable = ref(false); // 表单禁用状态"
// 获取tooltip提示框属性
// 获取 tooltip 提示框属性
const getTooltipProps = (tips: string | IObject) => {
return typeof tips === "string" ? { content: tips } : tips;
};
@@ -189,7 +189,7 @@ const handleClose = () => {
modalVisible.value = false;
formRef.value?.resetFields();
};
// 设置表单值
// 设置表单项
const setFormData = (data: IObject) => {
for (const key in formData) {
if (Object.prototype.hasOwnProperty.call(formData, key) && key in data) {
@@ -245,11 +245,11 @@ onMounted(() => {
// 暴露的属性和方法
defineExpose({
setFormData,
// 展示/因此 modal
// 展示/隐藏 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) => {

14
src/components/CURD/PageSearch.vue
View File

@@ -19,7 +19,7 @@
</span>
</template>
<!-- 自定义插槽 -->
<!-- 自定义æ<EFBFBD>’æ§?-->
<slot
v-if="item.type === 'custom'"
:name="item.slotName"
@@ -71,14 +71,14 @@ import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";
import InputTag from "@/components/InputTag/index.vue";
// 定义接收的属性
// 定义接收的属�
const props = defineProps<{ searchConfig: ISearchConfig }>();
// 自定义事件
// 自定义事�
const emit = defineEmits<{
queryClick: [queryParams: IObject];
resetClick: [queryParams: IObject];
}>();
// 组件映射表
// 组件映射�
const componentMap = new Map<ISearchComponent, any>([
// @ts-ignore
["input", markRaw(ElInput)], // @ts-ignore
@@ -105,7 +105,7 @@ const formItems = reactive(props.searchConfig?.formItems ?? []);
const isExpandable = ref(props.searchConfig?.isExpandable ?? true);
// 是å<C2AF>¦å·²å±•å¼€
const isExpand = ref(false);
// 表单项展示数量，若可展开，超出展示数量的表单项隐藏
// 表å<EFBFBD>•é¡¹å±•ç¤ºæ•°é‡<EFBFBD>，若å<EFBFBD>¯å±•å¼€ï¼Œè¶…出展示数é‡<EFBFBD>的表å<EFBFBD>•é¡¹éš<EFBFBD>è—?
const showNumber = computed(() =>
isExpandable.value ? (props.searchConfig?.showNumber ?? 3) : formItems.length
);
@@ -113,7 +113,7 @@ const showNumber = computed(() =>
const cardAttrs = computed<IObject>(() => {
return { shadow: "never", style: { "margin-bottom": "12px" }, ...props.searchConfig?.cardAttrs };
});
// 表单组件自定义属性（label位置、宽度、对齐方式等）
// 表å<EFBFBD>•ç»„件自定义属性（labelä½<EFBFBD>ç½®ã€<EFBFBD>宽度ã€<EFBFBD>对é½<EFBFBD>æ–¹å¼<EFBFBD>ç­‰ï¼?
const formAttrs = computed<IForm>(() => {
return { inline: true, ...props.searchConfig?.form };
});
@@ -124,7 +124,7 @@ const isGrid = computed(() =>
: "flex flex-wrap gap-x-8 gap-y-4"
);
// 获取tooltip提示框属性
// 获å<EFBFBD>–tooltipæ<EFBFBD><EFBFBD>示框属æ€?
const getTooltipProps = (tips: string | IObject) => {
return typeof tips === "string" ? { content: tips } : tips;
};

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

@@ -59,7 +59,7 @@ export interface IContentConfig<T = any> {
// 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验
permPrefix?: string;
// table组件属性
table?: Omit<TableProps<any>, "data">;
table?: Partial<Omit<TableProps<any>, "data">>;
// 分页组件位置(默认：left)
pagePosition?: "left" | "right";
// pagination组件属性