feat:系统管理接口接完

src/api/apiPaths.ts

@@ -76,4 +76,5 @@ export const userApi = {
   addUser: '/user/insert',
   updateUser: '/user/update',
   deleteUser: '/user/delete',
+  batchDelete: '/user/batchDelete',
 } as const
\ No newline at end of file

src/api/user.ts

@@ -68,3 +68,12 @@ export function deleteUser(data: UserQueryParams) {
     data
   }) as unknown as Promise<ApiResponse>
 }
+
+// 批量删除用户
+export function batchDeleteUser(data: UserQueryParams) {
+  return request({
+    url: userApi.batchDelete,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
\ No newline at end of file

src/components/Delete/index.vue

@@ -17,24 +17,43 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import { defineProps } from 'vue';
+import { getUserList, addUser, deleteUser, updateUser, batchDeleteUser } from '@/api/user.ts'
 
 const props = defineProps({
 	dialogVisible: {
 		type: Boolean,
 		default: false
 	},
-	mode: {
+	deleteMode: {
 		type: String,
-		default: '1'
+		default: '0'
+	},
+	id: {
+		type: Number,
+		default: '0'
+	},
+	ids: {
+		type: Array,
+		default: []
 	}
 })
-const emit = defineEmits(['update:dialogVisible', 'confirm'])
+const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
 const deleteDialogVisible = ref(props.dialogVisible)
-
+const deleteMode = ref(props.deleteMode)
 // 删除方法
-const handleDelelte = () => {
-	emit('confirm')
+const handleDelelte = async () => {
+	if (props.deleteMode == '1') {
+		await deleteUser({ id: props.id })
+		emit('getUserList')
+		deleteDialogVisible.value = false
+
+	}
+	else if (props.deleteMode == '2') {
+		console.log(props.ids);
+		await batchDeleteUser({ ids: props.ids })
+		emit('getUserList')
 		deleteDialogVisible.value = false
+	}
 }
 // 关闭弹窗的方法
 const close = () => {
@@ -52,4 +71,16 @@ watch(() => deleteDialogVisible.value,
 		emit('update:dialogVisible', newVal)
 	}
 )
+// 监听父组件传过来的值
+watch(() => props.deleteMode,
+	(newVal) => {
+		deleteMode.value = newVal
+	}
+)
+// 监听组件内的值并向父组件更新
+watch(() => deleteMode.value,
+	(newVal) => {
+		emit('update:deleteMode', newVal)
+	}
+)
 </script>
\ No newline at end of file

src/utils/request.ts

@@ -107,4 +107,7 @@ export interface UserQueryParams {
   password?: string
   role?: number
   status?: boolean
+  id?: number
+  ids?: any
+
 }
\ No newline at end of file

src/views/os-system/index.vue

@@ -6,18 +6,17 @@
 					<el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button>
 				</el-form-item>
 				<el-form-item>
-					<el-button type="danger" plain @click="handleDelete">批量删除</el-button>
+					<el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
 				</el-form-item>
 			</el-form>
 		</div>
 		<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
-			:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }">
+			:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }" 
+			@selection-change="handleSelectionChange">
 			<el-table-column type="selection" width="40" />
 			<el-table-column property="number" label="序号" width="55" type="index" />
 			<el-table-column property="username" label="用户账号" show-overflow-tooltip />
 			<el-table-column property="nickname" label="用户名称" show-overflow-tooltip />
-			<!-- <el-table-column property="userRemark" label="备注" show-overflow-tooltip /> -->
-			<!-- <el-table-column property="userPassword" label="用户密码" show-overflow-tooltip /> -->
 			<el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip />
 			<el-table-column label="操作" width="220">
 				<template #default="scope">
@@ -32,13 +31,15 @@
 		</el-table>
 		<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
 			<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
-				@pagination="getData" />
+				@pagination="getUserListData" />
 		</div>
 		<!-- 删除弹窗组件 -->
-		<deleteDialog v-model:dialogVisible="showDeleteDialog" @mode="deleteMode" />
+		<deleteDialog v-model:dialogVisible="showDeleteDialog"  @get-user-list="getUserListData"
+			:ids="userIds" v-model:deleteMode="deleteMode" />
 		<!-- 创建用户弹窗组件 -->
-		<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :nick-name="nickName" :user-name="userName" :id="userId"
-			:user-role="userRole" :user-status="userStatus" :user-password="userPassword" @get-user-list="getUserListData" />
+		<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :nick-name="nickName" :user-name="userName"
+			:id="userId" :user-role="userRole" :user-status="userStatus" :user-password="userPassword"
+			@get-user-list="getUserListData" />
 	</div>
 </template>
 
@@ -47,16 +48,17 @@ import { ref, onMounted } from 'vue'
 import Pagination from '@/components/pagination/index.vue'
 import deleteDialog from '@/components/Delete/index.vue'
 import addUserDialog from './components/addUserDialog.vue'
-import { getUserList, addUser, deleteUser, updateUser } from '@/api/user.ts'
+import { getUserList, addUser, deleteUser, updateUser, batchDeleteUser } from '@/api/user.ts'
 
-const userId = ref(0)
+const userId = ref<any>([])
+const userIds = ref<any>()
 const nickName = ref('')
 const userName = ref('')
 const userRole = ref(0)
 const userStatus = ref(true)
 const userPassword = ref('')
 const showDeleteDialog = ref(false)
-const deleteMode = ref('2')
+const deleteMode = ref('0')
 const dialogVisible = ref(false)
 const mode = ref('1')
 const tableData = ref()
@@ -73,33 +75,40 @@ const handleEdit = async (row: any) => {
 	userStatus.value = row.status
 	userPassword.value = row.password
 	dialogVisible.value = true
+	userId.value = row.id
 	// console.log(row);
 }
 
-const handleDelete = (row: any) => {
+const handleDelete = async (row: any) => {
 	showDeleteDialog.value = true
+	deleteMode.value = '1'
+	userId.value = row.id
+	console.log(userId.value);
 }
-
-const getData = (number: number) => {
-	// console.log('getData');
-	console.log(number);
-
+const handleBatchDelete = async () => {
+	deleteMode.value = '2'
+	showDeleteDialog.value = true
 }
-
-const handleDeleteConfirm = () => {
-
+const handleSelectionChange = (data: any) => {
+	let array = []
+	for (let i = 0; i < data.length; i++) {
+		array.push(data[i].id)
+	}
+	userIds.value = array
 }
+
 const openAddUserDialog = () => {
 	mode.value = '1'
 	dialogVisible.value = true
 }
 const getUserListData = async () => {
 	const userList = await getUserList({
-		page: 1,
+		// page: 1,
 		size: 10
 	})
 	tableData.value = userList.data
-	console.log(tableData.value);
+	pageObj.value.total = tableData.value.length
+	console.log(tableData.value.length);
 
 }
 onMounted(async () => {