From 2b6a2108556fb1182b59ed835c77f750c322efe8 Mon Sep 17 00:00:00 2001 From: cshaptx4869 <994774638@qq.com> Date: Fri, 26 Apr 2024 21:43:16 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E5=AE=8C=E5=96=84CURD?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=B3=A8=E9=87=8A=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/user.mock.ts | 2 + src/components/PageContent/index.vue | 16 ++++-- src/components/PageModal/index.vue | 19 +++++-- src/components/PageSearch/index.vue | 13 ++++- src/typings/components.d.ts | 18 ++----- src/views/demo/curd/config/add.ts | 6 ++- src/views/demo/curd/config/content.ts | 18 ++++--- src/views/demo/curd/config/edit.ts | 6 ++- src/views/demo/curd/index.vue | 72 ++++++++++++++++++++------- 9 files changed, 118 insertions(+), 52 deletions(-) diff --git a/mock/user.mock.ts b/mock/user.mock.ts index b14ef24a..27ba0483 100644 --- a/mock/user.mock.ts +++ b/mock/user.mock.ts @@ -33,6 +33,8 @@ export default defineMock([ "sys:menu:edit", "sys:dict:add", "sys:role:add", + "sys:user:query", + "sys:user:export", ], }, msg: "一切ok", diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue index bfe6faae..7196df4e 100644 --- a/src/components/PageContent/index.vue +++ b/src/components/PageContent/index.vue @@ -192,11 +192,17 @@ interface IOperatData { } const props = defineProps<{ contentConfig: { + // 页面名称(参与组成权限标识,如sys:user:xxx) pageName: string; + // 列表的网络请求函数(需返回promise) indexAction: (data: any) => Promise; + // 删除的网络请求函数(需返回promise) deleteAction: (data: any) => Promise; + // 主键名(默认为id) pk?: string; + // 表格工具栏(默认支持refresh,add,delete,export,也可自定义) toolbar: any[]; + // table组件列属性(额外的属性templet,operat) cols: any[]; }; }>(); @@ -205,7 +211,7 @@ const emit = defineEmits<{ addClick: []; exportClick: []; toolbarClick: [name: string]; - editClick: [id: number]; + editClick: [row: any]; operatClick: [data: IOperatData]; }>(); // 暴露的属性和方法 @@ -222,7 +228,7 @@ const total = ref(0); // 列表数据 const pageData = ref([]); // 每页条数 -const pageSize = 1; +const pageSize = 10; // 搜索参数 const queryParams = reactive({ pageNum: 1, @@ -240,9 +246,9 @@ function fetchPageData(formData: any = {}, isRestart = false) { } props.contentConfig .indexAction({ ...queryParams, ...formData }) - .then((res: any) => { - total.value = res.total; - pageData.value = res.list; + .then(({ data }) => { + total.value = data.total; + pageData.value = data.list; }) .finally(() => { loading.value = false; diff --git a/src/components/PageModal/index.vue b/src/components/PageModal/index.vue index 1890af16..3db08aa8 100644 --- a/src/components/PageModal/index.vue +++ b/src/components/PageModal/index.vue @@ -67,27 +67,42 @@ import { ref, reactive } from "vue"; import { useThrottleFn } from "@vueuse/core"; import type { FormRules, ElForm } from "element-plus"; -// 定义接收的属性/自定义事件 +// 定义接收的属性 const props = defineProps<{ modalConfig: { + // dialog组件属性 dialog: any; + // 页面名称 pageName?: string; + // 提交的网络请求函数(需返回promise) formAction: (data: any) => Promise; + // 表单项 formItems: Array<{ + // 组件类型(如input,select,radio等) type: string; + // 标签文本 label: string; + // 键名 prop: string; + // 组件属性 attrs?: any; + // 初始值 initialValue?: any; + // 可选项(适用于select,radio组件) options?: { label: string; value: any }[]; + // 插槽名(适用于组件类型为custom) slotName?: string; }>; + // 表单验证规则 formRules: FormRules; }; }>(); +// 自定义事件 const emit = defineEmits<{ submitClick: []; }>(); +// 暴露的属性和方法 +defineExpose({ setModalVisible }); const dialogVisible = ref(false); const formRef = ref>(); @@ -121,8 +136,6 @@ function closeDialog() { formRef.value?.resetFields(); formRef.value?.clearValidate(); } -// 暴露的属性和方法 -defineExpose({ setModalVisible }); diff --git a/src/components/PageSearch/index.vue b/src/components/PageSearch/index.vue index 1010f2b7..6e302491 100644 --- a/src/components/PageSearch/index.vue +++ b/src/components/PageSearch/index.vue @@ -42,21 +42,30 @@ import { ref, reactive } from "vue"; import type { ElForm } from "element-plus"; -// 定义接收的属性/自定义事件 +// 定义接收的属性 interface IProps { searchConfig: { + // 页面名称(参与组成权限标识,如sys:user:xxx) pageName: string; + // 表单项 formItems: Array<{ + // 组件类型(如input,select等) type: string; + // 标签文本 label: string; + // 键名 prop: string; + // 组件属性 attrs?: any; + // 初始值 initialValue?: any; + // 可选项(适用于select组件) options?: { label: string; value: any }[]; }>; }; } const props = defineProps(); +// 自定义事件 const emit = defineEmits<{ queryClick: [queryParams: any]; resetClick: [queryParams: any]; @@ -65,7 +74,7 @@ const emit = defineEmits<{ defineExpose({ getQueryParams }); const queryFormRef = ref>(); -// 定义form的数据 +// 搜索表单数据 const queryParams = reactive({}); for (const item of props.searchConfig.formItems) { queryParams[item.prop] = item.initialValue ?? ""; diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts index c4ce98f1..7c38be9a 100644 --- a/src/typings/components.d.ts +++ b/src/typings/components.d.ts @@ -14,7 +14,6 @@ declare module "vue" { DeptTree: (typeof import("./../views/system/user/components/dept-tree.vue"))["default"]; Dictionary: (typeof import("./../components/Dictionary/index.vue"))["default"]; DictItem: (typeof import("./../views/system/dict/components/dict-item.vue"))["default"]; - ElAlert: (typeof import("element-plus/es"))["ElAlert"]; ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"]; ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"]; ElButton: (typeof import("element-plus/es"))["ElButton"]; @@ -32,15 +31,11 @@ declare module "vue" { ElForm: (typeof import("element-plus/es"))["ElForm"]; ElFormItem: (typeof import("element-plus/es"))["ElFormItem"]; ElIcon: (typeof import("element-plus/es"))["ElIcon"]; - ElImage: (typeof import("element-plus/es"))["ElImage"]; ElInput: (typeof import("element-plus/es"))["ElInput"]; - ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"]; - ElLink: (typeof import("element-plus/es"))["ElLink"]; ElMenu: (typeof import("element-plus/es"))["ElMenu"]; ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"]; ElOption: (typeof import("element-plus/es"))["ElOption"]; ElPagination: (typeof import("element-plus/es"))["ElPagination"]; - ElPopover: (typeof import("element-plus/es"))["ElPopover"]; ElRadio: (typeof import("element-plus/es"))["ElRadio"]; ElRadioGroup: (typeof import("element-plus/es"))["ElRadioGroup"]; ElRow: (typeof import("element-plus/es"))["ElRow"]; @@ -51,10 +46,7 @@ declare module "vue" { ElSwitch: (typeof import("element-plus/es"))["ElSwitch"]; ElTable: (typeof import("element-plus/es"))["ElTable"]; ElTableColumn: (typeof import("element-plus/es"))["ElTableColumn"]; - ElTabPane: (typeof import("element-plus/es"))["ElTabPane"]; - ElTabs: (typeof import("element-plus/es"))["ElTabs"]; ElTag: (typeof import("element-plus/es"))["ElTag"]; - ElText: (typeof import("element-plus/es"))["ElText"]; ElTooltip: (typeof import("element-plus/es"))["ElTooltip"]; ElTree: (typeof import("element-plus/es"))["ElTree"]; ElTreeSelect: (typeof import("element-plus/es"))["ElTreeSelect"]; @@ -64,20 +56,14 @@ declare module "vue" { GithubCorner: (typeof import("./../components/GithubCorner/index.vue"))["default"]; Hamburger: (typeof import("./../components/Hamburger/index.vue"))["default"]; IconSelect: (typeof import("./../components/IconSelect/index.vue"))["default"]; - IEpCaretBottom: (typeof import("~icons/ep/caret-bottom"))["default"]; - IEpCaretTop: (typeof import("~icons/ep/caret-top"))["default"]; IEpClose: (typeof import("~icons/ep/close"))["default"]; - IEpCollection: (typeof import("~icons/ep/collection"))["default"]; IEpDelete: (typeof import("~icons/ep/delete"))["default"]; IEpDownload: (typeof import("~icons/ep/download"))["default"]; IEpEdit: (typeof import("~icons/ep/edit"))["default"]; IEpPlus: (typeof import("~icons/ep/plus"))["default"]; - IEpPosition: (typeof import("~icons/ep/position"))["default"]; - IEpQuestionFilled: (typeof import("~icons/ep/question-filled"))["default"]; IEpRefresh: (typeof import("~icons/ep/refresh"))["default"]; IEpRefreshLeft: (typeof import("~icons/ep/refresh-left"))["default"]; IEpSearch: (typeof import("~icons/ep/search"))["default"]; - IEpSetting: (typeof import("~icons/ep/setting"))["default"]; IEpTop: (typeof import("~icons/ep/top"))["default"]; IEpUploadFilled: (typeof import("~icons/ep/upload-filled"))["default"]; LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"]; @@ -86,10 +72,12 @@ declare module "vue" { NavBar: (typeof import("./../layout/components/NavBar/index.vue"))["default"]; NavbarLeft: (typeof import("./../layout/components/NavBar/components/NavbarLeft.vue"))["default"]; NavbarRight: (typeof import("./../layout/components/NavBar/components/NavbarRight.vue"))["default"]; + PageContent: (typeof import("./../components/PageContent/index.vue"))["default"]; + PageModal: (typeof import("./../components/PageModal/index.vue"))["default"]; + PageSearch: (typeof import("./../components/PageSearch/index.vue"))["default"]; Pagination: (typeof import("./../components/Pagination/index.vue"))["default"]; PieChart: (typeof import("./../views/dashboard/components/PieChart.vue"))["default"]; RadarChart: (typeof import("./../views/dashboard/components/RadarChart.vue"))["default"]; - RightPanel: (typeof import("./../components/RightPanel/index.vue"))["default"]; RouterLink: (typeof import("vue-router"))["RouterLink"]; RouterView: (typeof import("vue-router"))["RouterView"]; Settings: (typeof import("./../layout/components/Settings/index.vue"))["default"]; diff --git a/src/views/demo/curd/config/add.ts b/src/views/demo/curd/config/add.ts index 39cc1b6b..a3747ec2 100644 --- a/src/views/demo/curd/config/add.ts +++ b/src/views/demo/curd/config/add.ts @@ -8,7 +8,11 @@ const modalConfig = { formAction: function (data: any) { console.log("add", data); return new Promise((resolve, reject) => { - resolve("新增成功"); + resolve({ + code: "00000", + data: null, + msg: "新增成功", + }); }); }, formItems: [ diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts index 8b538ec4..ab227bb5 100644 --- a/src/views/demo/curd/config/content.ts +++ b/src/views/demo/curd/config/content.ts @@ -3,9 +3,9 @@ const contentConfig = { indexAction: function (data: any) { console.log("index", data); return new Promise((resolve, reject) => { - setTimeout(() => { - resolve({ - total: 2, + resolve({ + code: "00000", + data: { list: [ { id: 2, @@ -36,14 +36,20 @@ const contentConfig = { createTime: "2021-06-05", }, ], - }); - }, 800); + total: 2, + }, + msg: "一切ok", + }); }); }, deleteAction: function (id: string) { console.log("delete", id); return new Promise((resolve, reject) => { - resolve("删除成功"); + resolve({ + code: "00000", + data: null, + msg: "删除成功", + }); }); }, pk: "id", diff --git a/src/views/demo/curd/config/edit.ts b/src/views/demo/curd/config/edit.ts index 2463d0d4..9096cd85 100644 --- a/src/views/demo/curd/config/edit.ts +++ b/src/views/demo/curd/config/edit.ts @@ -8,7 +8,11 @@ const modalConfig = { formAction: function (data: any) { console.log("edit", data); return new Promise((resolve, reject) => { - resolve("编辑成功"); + resolve({ + code: "00000", + data: null, + msg: "修改成功", + }); }); }, formItems: [ diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue index f1a84d59..7f731ce2 100644 --- a/src/views/demo/curd/index.vue +++ b/src/views/demo/curd/index.vue @@ -64,13 +64,14 @@ function handleResetClick() { } // 新增 function handleAddClick() { - console.log("add"); //显示添加表单 addModalRef.value?.setModalVisible(); } // 导出 function handleExportClick() { - console.log("export", searchRef.value?.getQueryParams()); + console.log("export"); + // 可以根据检索条件去导出数据 + console.log(searchRef.value?.getQueryParams()); } // 其他工具栏 function handleToolbarClick(name: string) { @@ -78,30 +79,63 @@ function handleToolbarClick(name: string) { } // 编辑 const editModalRef = ref>(); -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 handleEditClick(row: any) { + //显示编辑表单 根据id获取的数据进行填充 + const idMap: Record = { + 2: { + 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], + }, + 3: { + id: 3, + username: "test", + nickname: "测试小用户", + mobile: "17621210366", + gender: 1, + avatar: + "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif", + email: "youlaitech@163.com", + status: 1, + deptId: 3, + roleIds: [3], + }, + }; + editModalRef.value?.setModalVisible(idMap[row.id]); } // 其他操作列 function handleOperatClick(data: any) { - console.log(data.name, data.row); + console.log(data); + // 重置密码 + if (data.name === "reset_pwd") { + ElMessageBox.prompt( + "请输入用户「" + data.row.username + "」的新密码", + "重置密码", + { + confirmButtonText: "确定", + cancelButtonText: "取消", + } + ).then(({ value }) => { + if (!value) { + ElMessage.warning("请输入新密码"); + return false; + } + // 发送网络请求 + ElMessage.success("密码重置成功，新密码是：" + value); + }); + } } // 表单提交 function handleSubmitClick() { //刷新别表数据 - console.log("submit"); contentRef.value?.fetchPageData({}, true); }