feat: ✨ 增加CURD配置化实现
This commit is contained in:
cshaptx4869
320
src/components/PageContent/index.vue
Normal file
320
src/components/PageContent/index.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="table-container">
|
||||
<template #header>
|
||||
<!-- 表格左上方工具栏 -->
|
||||
<template v-for="item in contentConfig.toolbar" :key="item">
|
||||
<template v-if="typeof item === 'string'">
|
||||
<!-- 刷新 -->
|
||||
<template v-if="item === 'refresh'">
|
||||
<el-button
|
||||
type="info"
|
||||
icon="refresh"
|
||||
@click="handleToolbar(item)"
|
||||
/>
|
||||
</template>
|
||||
<!-- 新增 -->
|
||||
<template v-else-if="item === 'add'">
|
||||
<el-button
|
||||
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
|
||||
type="success"
|
||||
icon="plus"
|
||||
@click="handleToolbar(item)"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 删除 -->
|
||||
<template v-else-if="item === 'delete'">
|
||||
<el-button
|
||||
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
|
||||
type="danger"
|
||||
icon="delete"
|
||||
:disabled="removeIds.length === 0"
|
||||
@click="handleToolbar(item)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 导出 -->
|
||||
<template v-else-if="item === 'export'">
|
||||
<el-button
|
||||
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
|
||||
type="primary"
|
||||
icon="download"
|
||||
@click="handleToolbar(item)"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 其他 -->
|
||||
<template v-else-if="typeof item === 'object'">
|
||||
<template v-if="item.auth">
|
||||
<el-button
|
||||
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
|
||||
:icon="item.icon"
|
||||
type="default"
|
||||
@click="handleToolbar(item.name)"
|
||||
>
|
||||
{{ item.text }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button
|
||||
:icon="item.icon"
|
||||
type="default"
|
||||
@click="handleToolbar(item.name)"
|
||||
>
|
||||
{{ item.text }}
|
||||
</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 列表 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="pageData"
|
||||
:border="true"
|
||||
:highlight-current-row="true"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template v-for="col in contentConfig.cols" :key="col.prop">
|
||||
<!-- 列操作栏 -->
|
||||
<template v-if="col.templet === 'tool'">
|
||||
<el-table-column v-bind="col">
|
||||
<template #default="scope">
|
||||
<template v-for="item in col.operat" :key="item">
|
||||
<template v-if="typeof item === 'string'">
|
||||
<!-- 编辑/删除 -->
|
||||
<template v-if="item === 'edit' || item === 'delete'">
|
||||
<el-button
|
||||
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
|
||||
:type="item === 'edit' ? 'primary' : 'danger'"
|
||||
:icon="item"
|
||||
size="small"
|
||||
link
|
||||
@click="
|
||||
handleOperat({
|
||||
name: item,
|
||||
row: scope.row,
|
||||
column: scope.column,
|
||||
$index: scope.$index,
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ item === "edit" ? "编辑" : "删除" }}
|
||||
</el-button>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 其他 -->
|
||||
<template v-else-if="typeof item === 'object'">
|
||||
<template v-if="item.auth">
|
||||
<el-button
|
||||
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
|
||||
:icon="item.icon"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click="
|
||||
handleOperat({
|
||||
name: item.name,
|
||||
row: scope.row,
|
||||
column: scope.column,
|
||||
$index: scope.$index,
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ item.text }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button
|
||||
:icon="item.icon"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click="
|
||||
handleOperat({
|
||||
name: item.name,
|
||||
row: scope.row,
|
||||
column: scope.column,
|
||||
$index: scope.$index,
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ item.text }}
|
||||
</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="col.templet === 'custom'">
|
||||
<el-table-column v-bind="col">
|
||||
<template #default="scope">
|
||||
<slot
|
||||
:name="col.slotName ?? col.prop"
|
||||
:prop="col.prop"
|
||||
v-bind="scope"
|
||||
></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<!-- 其他 -->
|
||||
<template v-else>
|
||||
<el-table-column v-bind="col" />
|
||||
</template>
|
||||
</template>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
v-model:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handlePagination"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
|
||||
// 定义接收的属性
|
||||
interface IOperatData {
|
||||
name: string;
|
||||
row: any;
|
||||
column: any;
|
||||
$index: number;
|
||||
}
|
||||
const props = defineProps<{
|
||||
contentConfig: {
|
||||
pageName: string;
|
||||
indexAction: (data: any) => Promise<any>;
|
||||
deleteAction: (data: any) => Promise<any>;
|
||||
pk?: string;
|
||||
toolbar: any[];
|
||||
cols: any[];
|
||||
};
|
||||
}>();
|
||||
// 定义自定义事件
|
||||
const emit = defineEmits<{
|
||||
addClick: [];
|
||||
exportClick: [];
|
||||
toolbarClick: [name: string];
|
||||
editClick: [id: number];
|
||||
operatClick: [data: IOperatData];
|
||||
}>();
|
||||
// 暴露的属性和方法
|
||||
defineExpose({ fetchPageData });
|
||||
|
||||
// 主键
|
||||
const pk = props.contentConfig.pk ?? "id";
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
// 删除ID集合 用于批量删除
|
||||
const removeIds = ref([]);
|
||||
// 数据总数
|
||||
const total = ref(0);
|
||||
// 列表数据
|
||||
const pageData = ref([]);
|
||||
// 每页条数
|
||||
const pageSize = 1;
|
||||
// 搜索参数
|
||||
const queryParams = reactive<any>({
|
||||
pageNum: 1,
|
||||
pageSize: pageSize,
|
||||
});
|
||||
// 上一次搜索条件
|
||||
let lastFormData = {};
|
||||
// 获取分页数据
|
||||
function fetchPageData(formData: any = {}, isRestart = false) {
|
||||
loading.value = true;
|
||||
lastFormData = formData;
|
||||
if (isRestart) {
|
||||
queryParams.pageNum = 1;
|
||||
queryParams.pageSize = pageSize;
|
||||
}
|
||||
props.contentConfig
|
||||
.indexAction({ ...queryParams, ...formData })
|
||||
.then((res: any) => {
|
||||
total.value = res.total;
|
||||
pageData.value = res.list;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
fetchPageData();
|
||||
|
||||
// 行选中
|
||||
function handleSelectionChange(selection: any) {
|
||||
removeIds.value = selection.map((item: any) => item[pk]);
|
||||
}
|
||||
// 刷新
|
||||
function handleRefresh() {
|
||||
fetchPageData({}, true);
|
||||
}
|
||||
// 删除
|
||||
function handleDelete(id?: number | string) {
|
||||
const ids = [id || removeIds.value].join(",");
|
||||
if (!ids) {
|
||||
ElMessage.warning("请勾选删除项");
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm("确认删除?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(function () {
|
||||
props.contentConfig.deleteAction(ids).then(() => {
|
||||
ElMessage.success("删除成功");
|
||||
handleRefresh();
|
||||
});
|
||||
});
|
||||
}
|
||||
// 分页
|
||||
function handlePagination() {
|
||||
fetchPageData(lastFormData);
|
||||
}
|
||||
// 操作栏
|
||||
function handleToolbar(name: string) {
|
||||
switch (name) {
|
||||
case "refresh":
|
||||
handleRefresh();
|
||||
break;
|
||||
case "add":
|
||||
emit("addClick");
|
||||
break;
|
||||
case "delete":
|
||||
handleDelete();
|
||||
break;
|
||||
case "export":
|
||||
emit("exportClick");
|
||||
break;
|
||||
default:
|
||||
emit("toolbarClick", name);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 操作列
|
||||
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;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
128
src/components/PageModal/index.vue
Normal file
128
src/components/PageModal/index.vue
Normal file
@@ -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>
|
||||
97
src/components/PageSearch/index.vue
Normal file
97
src/components/PageSearch/index.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="search-container" v-hasPerm="[`${searchConfig.pageName}:query`]">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<template v-for="item in searchConfig.formItems" :key="item.prop">
|
||||
<el-form-item :label="item.label" :prop="item.prop">
|
||||
<!-- Select 选择器 -->
|
||||
<template v-if="item.type === 'select'">
|
||||
<el-select v-model="queryParams[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>
|
||||
<!-- DatePicker 日期选择器 -->
|
||||
<template v-else-if="item.type === 'date-picker'">
|
||||
<el-date-picker
|
||||
v-model="queryParams[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
<template v-else>
|
||||
<el-input
|
||||
v-model="queryParams[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<i-ep-search />搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset"><i-ep-refresh />重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import type { ElForm } from "element-plus";
|
||||
|
||||
// 定义接收的属性/自定义事件
|
||||
interface IProps {
|
||||
searchConfig: {
|
||||
pageName: string;
|
||||
formItems: Array<{
|
||||
type: string;
|
||||
label: string;
|
||||
prop: string;
|
||||
attrs?: any;
|
||||
initialValue?: any;
|
||||
options?: { label: string; value: any }[];
|
||||
}>;
|
||||
};
|
||||
}
|
||||
const props = defineProps<IProps>();
|
||||
const emit = defineEmits<{
|
||||
queryClick: [queryParams: any];
|
||||
resetClick: [queryParams: any];
|
||||
}>();
|
||||
// 暴露的属性和方法
|
||||
defineExpose({ getQueryParams });
|
||||
|
||||
const queryFormRef = ref<InstanceType<typeof ElForm>>();
|
||||
// 定义form的数据
|
||||
const queryParams = reactive<any>({});
|
||||
for (const item of props.searchConfig.formItems) {
|
||||
queryParams[item.prop] = item.initialValue ?? "";
|
||||
}
|
||||
// 重置操作
|
||||
function handleReset() {
|
||||
queryFormRef.value?.resetFields();
|
||||
emit("resetClick", queryParams);
|
||||
}
|
||||
// 查询操作
|
||||
function handleQuery() {
|
||||
emit("queryClick", queryParams);
|
||||
}
|
||||
// 获取分页数据
|
||||
function getQueryParams() {
|
||||
return queryParams;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-container {
|
||||
padding: 18px 0 0 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user