新建utils文件夹，新建myConfirm.ts文件

从Element-plus中导入消息弹出框组件

新建type文件夹，新建baseType.ts文件
定义通用函数类型，新增和编辑的状态数字

在main.ts文件下从myConfirm.ts文件中引入消息弹出框组件，进行全局注册

在api/user/index.ts文件中配置编辑接口put请求

在views/user/AddUser.vue文件中
改写show函数，增加判断，
当row值不为空时，此时调用者为编辑按钮
添加回显数据功能
改写表单提交事件
通过type判断，使新增、编辑功能分别对应各自接口

完成用户编辑功能后端接口的对接

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("编辑用户失败！");
     }

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)
 }

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;

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 {

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
+  }
+}

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
+

order-system/src/type/baseType.ts

@@ -0,0 +1,8 @@
+// 通用函数类型
+export type FuncList = () => any
+
+// 新增和编辑的状态
+export enum EditType{
+  ADD = '0',   //新增
+  EDIT = '1'    //编辑
+}

order-system/src/utils/myConfirm.ts

@@ -0,0 +1,12 @@
+// 从Element-plus中导入消息弹出框组件
+import { ElMessageBox } from 'element-plus'
+
+export default function myConfirm(text: string): Promise<boolean> {
+  return ElMessageBox.confirm(text, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+  .then(() => true)
+  .catch(() => false)
+}

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<UserModel>({
+  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()
       }
-      
+
     }
   })
 }

order-system/src/views/user/Index.vue

@@ -32,8 +32,8 @@
 
       <!-- 为表格添加编辑、删除按钮 -->
       <el-table-column label="操作" min-width="100" align="center">
-        <template #default>
-          <el-button type="primary" size="default" @click="editBtn" icon="Edit">
+        <template #default="scoped">
+          <el-button type="primary" size="default" @click="editBtn(scoped.row)" icon="Edit">
             编辑
           </el-button>
           <el-button type="danger" size="default" @click="deleteBtn" icon="Delete">删除</el-button>
@@ -51,18 +51,17 @@
   </el-main>
 
   <!-- 新增、编辑按钮弹框 -->
-  <AddUser ref="showBtn"></AddUser>
+  <AddUser ref="showBtn" @onFresh="getList"></AddUser>
 </template>
 
 <script setup lang="ts">
 
-import { Search, Close, Plus, Edit, Delete } from '@element-plus/icons-vue'
+import { Search, Close, Plus } from '@element-plus/icons-vue'
 // 导入useUserTable,获取表格相关业务
 // 第一次导入在vite-env.d.ts中添加路径别名支持
 import useUserTable from '@/compositions/user/useUserTable';
 
-// 导入onMounted方法
-import { onMounted } from 'vue';
+
 
 // 获取表格相关业务
 const { listParm,
@@ -82,10 +81,6 @@ const { showBtn, addBtn, deleteBtn, editBtn } = useUser()
 // 导入子组件AddUser,关联新增按钮
 import AddUser from './AddUser.vue';
 
-// 在组件挂载时加载数据
-onMounted(() => {
-  getList()
-})
 </script>
 
 <style scoped></style>

order-system/src/vite-env.d.ts

@@ -21,6 +21,19 @@ interface PromiseConstructor {
 // 添加全局 Promise 声明
 declare var Promise: PromiseConstructor;
 
+// 扩展全局 Object 接口声明
+interface ObjectConstructor {
+  /**
+   * 将一个或多个源对象的可枚举属性复制到目标对象
+   * @param target 目标对象
+   * @param sources 一个或多个源对象
+   */
+  assign<T, U>(target: T, source: U): T & U;
+  assign<T, U, V>(target: T, source1: U, source2: V): T & U & V;
+  assign<T, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
+  assign(target: object, ...sources: any[]): any;
+}
+
 // 声明 Vue 文件模块
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
@@ -69,12 +82,13 @@ declare module '@/api/user/userModel' {
   }
 
   export type UserModel = {
-  userId: string;
-  username: string;
-  password: string;
-  phone: string;
-  email: string;
-  sex: string;
-  name: string;
-}
+    type: string,
+    userId: string;
+    username: string;
+    password: string;
+    phone: string;
+    email: string;
+    sex: string;
+    name: string;
+  }
 }

order-system/tsconfig.app.json

@@ -12,7 +12,7 @@
       "@/api/*": ["src/api/*"]
     },
     // 添加必要的库支持
-    "lib": ["ES2015", "ES2015.Promise", "DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["ES2020", "ES2015.Promise", "DOM", "DOM.Iterable", "ESNext"],
     
     // 添加模块解析配置
     "module": "ESNext",