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>
|
||||
@@ -54,6 +54,23 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: "/curd",
|
||||
component: Layout,
|
||||
meta: {
|
||||
alwaysShow: false,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "index",
|
||||
component: () => import("@/views/demo/curd/index.vue"),
|
||||
meta: {
|
||||
title: "增删改查",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 外部链接
|
||||
// {
|
||||
// path: "/external-link",
|
||||
|
||||
145
src/views/demo/curd/config/add.ts
Normal file
145
src/views/demo/curd/config/add.ts
Normal file
@@ -0,0 +1,145 @@
|
||||
const modalConfig = {
|
||||
pageName: "sys:user",
|
||||
dialog: {
|
||||
title: "新增用户",
|
||||
width: 800,
|
||||
"append-to-body": true,
|
||||
},
|
||||
formAction: function (data: any) {
|
||||
console.log("add", data);
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve("新增成功");
|
||||
});
|
||||
},
|
||||
formItems: [
|
||||
{
|
||||
type: "input",
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
attrs: {
|
||||
placeholder: "请输入用户名",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "用户昵称",
|
||||
prop: "nickname",
|
||||
attrs: {
|
||||
placeholder: "请输入用户昵称",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "tree-select",
|
||||
label: "所属部门",
|
||||
prop: "deptId",
|
||||
attrs: {
|
||||
placeholder: "请选择所属部门",
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: "有来技术",
|
||||
children: [
|
||||
{
|
||||
value: 2,
|
||||
label: "研发部门",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "测试部门",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
filterable: true,
|
||||
"check-strictly": true,
|
||||
"render-after-expand": false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "性别",
|
||||
prop: "gender",
|
||||
attrs: {
|
||||
placeholder: "请选择",
|
||||
},
|
||||
options: [
|
||||
{ label: "男", value: 1 },
|
||||
{ label: "女", value: 2 },
|
||||
{ label: "未知", value: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "角色",
|
||||
prop: "roleIds",
|
||||
attrs: {
|
||||
placeholder: "请选择",
|
||||
multiple: true,
|
||||
},
|
||||
options: [
|
||||
{ label: "系统管理员", value: 2 },
|
||||
{ label: "系统管理员1", value: 4 },
|
||||
{ label: "系统管理员2", value: 5 },
|
||||
{ label: "系统管理员3", value: 6 },
|
||||
{ label: "系统管理员4", value: 7 },
|
||||
{ label: "系统管理员5", value: 8 },
|
||||
{ label: "系统管理员6", value: 9 },
|
||||
{ label: "系统管理员7", value: 10 },
|
||||
{ label: "系统管理员8", value: 11 },
|
||||
{ label: "访问游客", value: 3 },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "手机号码",
|
||||
prop: "mobile",
|
||||
attrs: {
|
||||
placeholder: "请输入手机号码",
|
||||
maxlength: 11,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "邮箱",
|
||||
prop: "email",
|
||||
attrs: {
|
||||
placeholder: "请输入邮箱",
|
||||
maxlength: 50,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "radio",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
options: [
|
||||
{ label: "正常", value: 1 },
|
||||
{ label: "禁用", value: 0 },
|
||||
],
|
||||
initialValue: 1,
|
||||
},
|
||||
],
|
||||
formRules: {
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
nickname: [
|
||||
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
|
||||
],
|
||||
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
||||
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
||||
email: [
|
||||
{
|
||||
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
|
||||
message: "请输入正确的邮箱地址",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default modalConfig;
|
||||
95
src/views/demo/curd/config/content.ts
Normal file
95
src/views/demo/curd/config/content.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
const contentConfig = {
|
||||
pageName: "sys:user",
|
||||
indexAction: function (data: any) {
|
||||
console.log("index", data);
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
total: 2,
|
||||
list: [
|
||||
{
|
||||
id: 2,
|
||||
username: "admin",
|
||||
nickname: "系统管理员",
|
||||
mobile: "17621210366",
|
||||
genderLabel: "男",
|
||||
avatar:
|
||||
"https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
|
||||
email: null,
|
||||
status: 1,
|
||||
deptName: "有来技术",
|
||||
roleNames: "系统管理员",
|
||||
createTime: "2019-10-10",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
username: "test",
|
||||
nickname: "测试小用户",
|
||||
mobile: "17621210366",
|
||||
genderLabel: "男",
|
||||
avatar:
|
||||
"https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
|
||||
email: null,
|
||||
status: 1,
|
||||
deptName: "测试部门",
|
||||
roleNames: "访问游客",
|
||||
createTime: "2021-06-05",
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 800);
|
||||
});
|
||||
},
|
||||
deleteAction: function (id: string) {
|
||||
console.log("delete", id);
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve("删除成功");
|
||||
});
|
||||
},
|
||||
pk: "id",
|
||||
toolbar: [
|
||||
"refresh",
|
||||
"add",
|
||||
"delete",
|
||||
"export",
|
||||
{
|
||||
name: "upload",
|
||||
icon: "upload",
|
||||
text: "导入",
|
||||
},
|
||||
],
|
||||
cols: [
|
||||
{ type: "selection", width: 50, align: "center" },
|
||||
{ label: "编号", align: "center", prop: "id", width: 100 },
|
||||
{ label: "用户名", align: "center", prop: "username" },
|
||||
{ label: "用户昵称", align: "center", prop: "nickname", width: 120 },
|
||||
{ label: "性别", align: "center", prop: "genderLabel", width: 100 },
|
||||
{ label: "部门", align: "center", prop: "deptName", width: 120 },
|
||||
{ label: "手机号码", align: "center", prop: "mobile", width: 120 },
|
||||
{
|
||||
label: "状态",
|
||||
align: "center",
|
||||
prop: "status",
|
||||
templet: "custom",
|
||||
},
|
||||
{ label: "创建时间", align: "center", prop: "createTime", width: 180 },
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 220,
|
||||
templet: "tool",
|
||||
operat: [
|
||||
{
|
||||
name: "reset_pwd",
|
||||
auth: "reset_pwd",
|
||||
icon: "refresh-left",
|
||||
text: "重置密码",
|
||||
},
|
||||
"edit",
|
||||
"delete",
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default contentConfig;
|
||||
146
src/views/demo/curd/config/edit.ts
Normal file
146
src/views/demo/curd/config/edit.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
const modalConfig = {
|
||||
pageName: "sys:user",
|
||||
dialog: {
|
||||
title: "修改用户",
|
||||
width: 800,
|
||||
"append-to-body": true,
|
||||
},
|
||||
formAction: function (data: any) {
|
||||
console.log("edit", data);
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve("编辑成功");
|
||||
});
|
||||
},
|
||||
formItems: [
|
||||
{
|
||||
type: "input",
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
attrs: {
|
||||
placeholder: "请输入用户名",
|
||||
readonly: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "用户昵称",
|
||||
prop: "nickname",
|
||||
attrs: {
|
||||
placeholder: "请输入用户昵称",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "tree-select",
|
||||
label: "所属部门",
|
||||
prop: "deptId",
|
||||
attrs: {
|
||||
placeholder: "请选择所属部门",
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: "有来技术",
|
||||
children: [
|
||||
{
|
||||
value: 2,
|
||||
label: "研发部门",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "测试部门",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
filterable: true,
|
||||
"check-strictly": true,
|
||||
"render-after-expand": false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "性别",
|
||||
prop: "gender",
|
||||
attrs: {
|
||||
placeholder: "请选择",
|
||||
},
|
||||
options: [
|
||||
{ label: "男", value: 1 },
|
||||
{ label: "女", value: 2 },
|
||||
{ label: "未知", value: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "角色",
|
||||
prop: "roleIds",
|
||||
attrs: {
|
||||
placeholder: "请选择",
|
||||
multiple: true,
|
||||
},
|
||||
options: [
|
||||
{ label: "系统管理员", value: 2 },
|
||||
{ label: "系统管理员1", value: 4 },
|
||||
{ label: "系统管理员2", value: 5 },
|
||||
{ label: "系统管理员3", value: 6 },
|
||||
{ label: "系统管理员4", value: 7 },
|
||||
{ label: "系统管理员5", value: 8 },
|
||||
{ label: "系统管理员6", value: 9 },
|
||||
{ label: "系统管理员7", value: 10 },
|
||||
{ label: "系统管理员8", value: 11 },
|
||||
{ label: "访问游客", value: 3 },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "手机号码",
|
||||
prop: "mobile",
|
||||
attrs: {
|
||||
placeholder: "请输入手机号码",
|
||||
maxlength: 11,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "邮箱",
|
||||
prop: "email",
|
||||
attrs: {
|
||||
placeholder: "请输入邮箱",
|
||||
maxlength: 50,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "radio",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
options: [
|
||||
{ label: "正常", value: 1 },
|
||||
{ label: "禁用", value: 0 },
|
||||
],
|
||||
initialValue: 1,
|
||||
},
|
||||
],
|
||||
formRules: {
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
nickname: [
|
||||
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
|
||||
],
|
||||
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
||||
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
||||
email: [
|
||||
{
|
||||
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
|
||||
message: "请输入正确的邮箱地址",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default modalConfig;
|
||||
50
src/views/demo/curd/config/search.ts
Normal file
50
src/views/demo/curd/config/search.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
const searchConfig = {
|
||||
pageName: "sys:user",
|
||||
formItems: [
|
||||
{
|
||||
type: "input",
|
||||
label: "关键字",
|
||||
prop: "keywords",
|
||||
attrs: {
|
||||
placeholder: "用户名/昵称/手机号",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
attrs: {
|
||||
placeholder: "全部",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "100px",
|
||||
},
|
||||
},
|
||||
options: [
|
||||
{ label: "启用", value: 1 },
|
||||
{ label: "禁用", value: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "date-picker",
|
||||
label: "创建时间",
|
||||
prop: "createAt",
|
||||
attrs: {
|
||||
type: "daterange",
|
||||
"range-separator": "~",
|
||||
"start-placeholder": "开始时间",
|
||||
"end-placeholder": "截止时间",
|
||||
"value-format": "YYYY-MM-DD",
|
||||
style: {
|
||||
width: "240px",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default searchConfig;
|
||||
107
src/views/demo/curd/index.vue
Normal file
107
src/views/demo/curd/index.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索 -->
|
||||
<page-search
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
/>
|
||||
|
||||
<!-- 列表 -->
|
||||
<page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
@add-click="handleAddClick"
|
||||
@edit-click="handleEditClick"
|
||||
@export-click="handleExportClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operat-click="handleOperatClick"
|
||||
>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">{{
|
||||
scope.row[scope.prop] == 1 ? "启用" : "禁用"
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
<page-modal
|
||||
ref="addModalRef"
|
||||
:modal-config="addModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
/>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import searchConfig from "./config/search";
|
||||
import contentConfig from "./config/content";
|
||||
import addModalConfig from "./config/add";
|
||||
import editModalConfig from "./config/edit";
|
||||
import type PageSearch from "@/components/PageSearch/index.vue";
|
||||
import type PageContent from "@/components/PageContent/index.vue";
|
||||
import type PageModal from "@/components/PageModal/index.vue";
|
||||
|
||||
const searchRef = ref<InstanceType<typeof PageSearch>>();
|
||||
const contentRef = ref<InstanceType<typeof PageContent>>();
|
||||
const addModalRef = ref<InstanceType<typeof PageModal>>();
|
||||
|
||||
// 搜索
|
||||
function handleQueryClick(queryParams: any) {
|
||||
contentRef.value?.fetchPageData(queryParams, true);
|
||||
}
|
||||
// 重置
|
||||
function handleResetClick() {
|
||||
contentRef.value?.fetchPageData({}, true);
|
||||
}
|
||||
// 新增
|
||||
function handleAddClick() {
|
||||
console.log("add");
|
||||
//显示添加表单
|
||||
addModalRef.value?.setModalVisible();
|
||||
}
|
||||
// 导出
|
||||
function handleExportClick() {
|
||||
console.log("export", searchRef.value?.getQueryParams());
|
||||
}
|
||||
// 其他工具栏
|
||||
function handleToolbarClick(name: string) {
|
||||
console.log(name);
|
||||
}
|
||||
// 编辑
|
||||
const editModalRef = ref<InstanceType<typeof PageModal>>();
|
||||
function handleEditClick() {
|
||||
//显示编辑表单或者根据id获取数据进行填充
|
||||
editModalRef.value?.setModalVisible({
|
||||
id: 2,
|
||||
username: "admin",
|
||||
nickname: "系统管理员",
|
||||
mobile: "17621210366",
|
||||
gender: 1,
|
||||
avatar:
|
||||
"https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
|
||||
email: "",
|
||||
status: 1,
|
||||
deptId: 1,
|
||||
roleIds: [2],
|
||||
});
|
||||
}
|
||||
// 其他操作列
|
||||
function handleOperatClick(data: any) {
|
||||
console.log(data.name, data.row);
|
||||
}
|
||||
// 表单提交
|
||||
function handleSubmitClick() {
|
||||
//刷新别表数据
|
||||
console.log("submit");
|
||||
contentRef.value?.fetchPageData({}, true);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user