在api/user/index.ts文件中配置删除接口delete请求

在views/user/Index.vue文件中，将getList()方法当作参数传递给useUser
给deleteBtn添加参数(scoped.row)

在compositions/user/useUser.ts文件中，
为deleteBtn添加后端接口对接

完成用户删除功能后端接口的对接

order-system/src/api/user/index.ts

@@ -15,3 +15,8 @@ export const getListApi = (parm:ListUserParm)=>{
 export const editUserApi = (parm:UserModel)=>{
   return http.put("/api/user", parm)
 }
+
+// 删除接口
+export const deleteUserApi = (userId:string)=>{
+  return http.delete(`/api/user/${userId}`)
+}

order-system/src/compositions/user/useUser.ts

@@ -1,19 +1,36 @@
 import type { UserModel } from "@/api/user/userModel";
 import { EditType } from "../../type/baseType";
+import type { FuncList } from "../../type/baseType";
 import { ref } from "vue"
+import useInstance from "@/hooks/useInstance";
+import { deleteUserApi } from "../../api/user/index";
+import { ElMessage } from "element-plus";
 
 // 抽取增删改的业务操作
-export default function useUser() {
+export default function useUser(getList:FuncList) {
+  const { global } = useInstance()
+
   // 获取AddUser里面的show方法
-  const showBtn = ref<{ show: (title: string, type: string, width?: number, height?: number, row?:UserModel) => {} }>();
+  const showBtn = ref<{ show: (title: string, type: string, width?: number, height?: number, row?: UserModel) => {} }>();
 
   // 增
   const addBtn = () => {
     showBtn.value?.show("新增", EditType.ADD, 630, 180)
   }
   // 删
-  const deleteBtn = () => {
+  const deleteBtn = async (row: UserModel) => {
+    let confirm = await global.$myconfirm('确定删除该数据吗？')
 
+    // 判断confirm返回true（用户确定删除）就进行删除（调用删除api）
+    if (confirm) {
+      let res = await deleteUserApi(row.userId)
+      if (res && res.code == 200) {
+        // 删除成功信息提示
+        ElMessage.success(res.msg)
+        // 删除后刷新列表
+        getList()
+      }
+    }
   }
   // 改
   // 传递row参数，将旧数据传递出去方便编辑

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

@@ -36,7 +36,7 @@
           <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>
+          <el-button type="danger" size="default" @click="deleteBtn(scoped.row)" icon="Delete">删除</el-button>
         </template>
       </el-table-column>
 
@@ -76,7 +76,7 @@ const { listParm,
 // 导入useUser,获取增删改相关业务
 import useUser from '@/compositions/user/useUser';
 
-const { showBtn, addBtn, deleteBtn, editBtn } = useUser()
+const { showBtn, addBtn, deleteBtn, editBtn } = useUser(getList)
 
 // 导入子组件AddUser,关联新增按钮
 import AddUser from './AddUser.vue';