feat: ✨ 增加CURD配置化实现
This commit is contained in:
cshaptx4869
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