From d472c8674b6a0e8230ae9007d843a70df6136e70 Mon Sep 17 00:00:00 2001 From: riverflow <3011499946@qq.com> Date: Thu, 14 Aug 2025 14:44:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BAutils=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=A4=B9=EF=BC=8C=E6=96=B0=E5=BB=BAmyConfirm.ts=E6=96=87?= =?UTF-8?q?=E4=BB=B6=20=E4=BB=8EElement-plus=E4=B8=AD=E5=AF=BC=E5=85=A5?= =?UTF-8?q?=E6=B6=88=E6=81=AF=E5=BC=B9=E5=87=BA=E6=A1=86=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新建type文件夹，新建baseType.ts文件 定义通用函数类型，新增和编辑的状态数字 在main.ts文件下从myConfirm.ts文件中引入消息弹出框组件，进行全局注册 在api/user/index.ts文件中配置编辑接口put请求 在views/user/AddUser.vue文件中 改写show函数，增加判断， 当row值不为空时，此时调用者为编辑按钮 添加回显数据功能 改写表单提交事件 通过type判断，使新增、编辑功能分别对应各自接口 完成用户编辑功能后端接口的对接 --- .../user/controller/SysUserController.java | 2 +- order-system/src/api/user/index.ts | 5 ++ order-system/src/api/user/userModel.ts | 1 + order-system/src/compositions/user/useUser.ts | 12 +++-- order-system/src/hooks/useInstance.ts | 12 +++++ order-system/src/main.ts | 5 ++ order-system/src/type/baseType.ts | 8 +++ order-system/src/utils/myConfirm.ts | 12 +++++ order-system/src/views/user/AddUser.vue | 49 ++++++++++++++----- order-system/src/views/user/Index.vue | 15 ++---- order-system/src/vite-env.d.ts | 30 +++++++++--- order-system/tsconfig.app.json | 2 +- 12 files changed, 118 insertions(+), 35 deletions(-) create mode 100644 order-system/src/hooks/useInstance.ts create mode 100644 order-system/src/type/baseType.ts create mode 100644 order-system/src/utils/myConfirm.ts diff --git a/api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/user/controller/SysUserController.java b/api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/user/controller/SysUserController.java index 7723513..919c396 100644 --- a/api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/user/controller/SysUserController.java +++ b/api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/user/controller/SysUserController.java @@ -47,7 +47,7 @@ public class SysUserController { @PutMapping public ResultVo editUser(@RequestBody SysUser sysUser){ if(sysUserService.updateById(sysUser)){ - return ResultUtils.success("编辑用户成功！"); + return ResultUtils.success("编辑用户成功！", sysUser); } return ResultUtils.error("编辑用户失败！"); } diff --git a/order-system/src/api/user/index.ts b/order-system/src/api/user/index.ts index 9e17d85..d3995e5 100644 --- a/order-system/src/api/user/index.ts +++ b/order-system/src/api/user/index.ts @@ -9,4 +9,9 @@ export const addUserApi = (parm:UserModel)=>{ // 列表查询 export const getListApi = (parm:ListUserParm)=>{ return http.get("api/user/list", parm) +} + +// 编辑接口 +export const editUserApi = (parm:UserModel)=>{ + return http.put("/api/user", parm) } \ No newline at end of file diff --git a/order-system/src/api/user/userModel.ts b/order-system/src/api/user/userModel.ts index 2dcd75d..25a025f 100644 --- a/order-system/src/api/user/userModel.ts +++ b/order-system/src/api/user/userModel.ts @@ -9,6 +9,7 @@ export type ListUserParm = { // 定义表单数据类型 export type UserModel = { + type: string; userId: string; username: string; password: string; diff --git a/order-system/src/compositions/user/useUser.ts b/order-system/src/compositions/user/useUser.ts index 07048c6..6b69972 100644 --- a/order-system/src/compositions/user/useUser.ts +++ b/order-system/src/compositions/user/useUser.ts @@ -1,21 +1,25 @@ +import type { UserModel } from "@/api/user/userModel"; +import { EditType } from "../../type/baseType"; import { ref } from "vue" // 抽取增删改的业务操作 export default function useUser() { // 获取AddUser里面的show方法 - const showBtn = ref<{ show: (title: string, width: number, height: number) => {} }>(); + const showBtn = ref<{ show: (title: string, type: string, width?: number, height?: number, row?:UserModel) => {} }>(); // 增 const addBtn = () => { - showBtn.value?.show("新增", 630, 180) + showBtn.value?.show("新增", EditType.ADD, 630, 180) } // 删 const deleteBtn = () => { } // 改 - const editBtn = () => { - + // 传递row参数，将旧数据传递出去方便编辑 + const editBtn = (row: UserModel) => { + console.log(row) + showBtn.value?.show("编辑", EditType.EDIT, 630, 180, row) } return { diff --git a/order-system/src/hooks/useInstance.ts b/order-system/src/hooks/useInstance.ts new file mode 100644 index 0000000..d17bef7 --- /dev/null +++ b/order-system/src/hooks/useInstance.ts @@ -0,0 +1,12 @@ +import { getCurrentInstance } from "vue"; +import type { ComponentInternalInstance } from "vue"; + +export default function useInstance() { + const { appContext, proxy } = getCurrentInstance() as ComponentInternalInstance + // 获取全局属性 + const global = appContext.config.globalProperties + return { + global, + proxy + } +} \ No newline at end of file diff --git a/order-system/src/main.ts b/order-system/src/main.ts index 992e427..c0c86ae 100644 --- a/order-system/src/main.ts +++ b/order-system/src/main.ts @@ -14,6 +14,8 @@ import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' // createApp(App).mount('#app') +// 引入消息弹出框组件 +import myConfirm from './utils/myConfirm' const pinia = createPinia() // 挂载路由 @@ -30,3 +32,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } +// 全局注册消息弹出框组件 +app.config.globalProperties.$myconfirm = myConfirm + diff --git a/order-system/src/type/baseType.ts b/order-system/src/type/baseType.ts new file mode 100644 index 0000000..ec48bfc --- /dev/null +++ b/order-system/src/type/baseType.ts @@ -0,0 +1,8 @@ +// 通用函数类型 +export type FuncList = () => any + +// 新增和编辑的状态 +export enum EditType{ + ADD = '0', //新增 + EDIT = '1' //编辑 +} \ No newline at end of file diff --git a/order-system/src/utils/myConfirm.ts b/order-system/src/utils/myConfirm.ts new file mode 100644 index 0000000..735cdc0 --- /dev/null +++ b/order-system/src/utils/myConfirm.ts @@ -0,0 +1,12 @@ +// 从Element-plus中导入消息弹出框组件 +import { ElMessageBox } from 'element-plus' + +export default function myConfirm(text: string): Promise { + return ElMessageBox.confirm(text, '系统提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => true) + .catch(() => false) +} \ No newline at end of file diff --git a/order-system/src/views/user/AddUser.vue b/order-system/src/views/user/AddUser.vue index 0fc02e4..835b227 100644 --- a/order-system/src/views/user/AddUser.vue +++ b/order-system/src/views/user/AddUser.vue @@ -70,25 +70,38 @@ import SysDialog from '@/components/SysDialog.vue'; // 引入弹窗组件相关方法 import useDialog from '@/hooks/useDialog'; -import { ref, reactive } from 'vue'; +import { ref, reactive, nextTick } from 'vue'; // 引入UserModel获取表单数据类型 import type { UserModel } from '@/api/user/userModel'; -import type { FormInstance } from 'element-plus'; +import { ElMessage, type FormInstance } from 'element-plus'; // 引入post的新增接口 -import { addUserApi } from '../../api/user/index'; +import { addUserApi, editUserApi } from '../../api/user/index'; +import { EditType } from '../../type/baseType'; // 获取弹窗组件属性 const { dialog, onClose, onConfirm, onShow } = useDialog() // 显示弹框，改写属性 -const show = (title: string, width: number, height: number) => { - // dialog.title: +const show = (title: string, type: string, width: number, height: number, row?: UserModel) => { + onShow(title, width, height) - // dialog.visible = true; + // 清空表单 addFormRef.value?.resetFields() + + // 编辑需要回显数据 + if (row) { + nextTick(() => { + Object.assign(addModel, row) + }) + + } + + // 获取本次操作是新增还是编辑 + addModel.type = type + } // 将显示弹框方法暴露给父组件 @@ -98,6 +111,7 @@ defineExpose({ // 表单绑定对象 const addModel = reactive({ + type: "", userId: "", username: "", password: "", @@ -139,17 +153,30 @@ const rules = reactive({ }] }) +// 注册刷新事件，通过子组件调用父组件 +const emits = defineEmits(['onFresh']) + // 表单提交 const commit = () => { - addFormRef.value?.validate(async(valid) => { - if(valid){ + addFormRef.value?.validate(async (valid) => { + if (valid) { // 调用addUserApi，将前端表单收集到的数据提交给数据库 - let res = await addUserApi(addModel) + let res = null + if(addModel.type == EditType.ADD){ + res = await addUserApi(addModel) + }else{ + res = await editUserApi(addModel) + } console.log(res) - if(res && res.code == 200){ + if (res && res.code == 200) { + // 成功信息提示 + ElMessage.success(res.msg) + // 刷新列表 + // getList() + emits('onFresh') onConfirm() } - + } }) } diff --git a/order-system/src/views/user/Index.vue b/order-system/src/views/user/Index.vue index 4d0695a..f64bc38 100644 --- a/order-system/src/views/user/Index.vue +++ b/order-system/src/views/user/Index.vue @@ -32,8 +32,8 @@ -