修改

src/views/admin/system/userFaceApprove/index.vue

@@ -28,11 +28,10 @@
 								<el-button icon="Refresh" @click="resetQuery">重置</el-button>
 							</el-form-item>
 						</el-form>
-
-						<el-tabs class="flex-1" v-model="activeName" @tab-click="handleClickTabItem">
-							<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
-						</el-tabs>
 					</el-row>
+					<el-tabs class="flex-1" v-model="activeName" @tab-click="handleClickTabItem">
+						<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
+					</el-tabs>
 					<el-table
 						v-loading="state.loading"
 						:data="state.dataList"
@@ -42,8 +41,8 @@
 						:header-cell-style="tableStyle.headerCellStyle"
 					>
 						<el-table-column label="#" type="index" width="60" fixed="left" />
-						<el-table-column label="姓名" prop="username" fixed="left" show-overflow-tooltip></el-table-column>
-						<el-table-column label="手机号" prop="userMobile" show-overflow-tooltip></el-table-column>
+						<el-table-column label="姓名" prop="username" fixed="left" show-overflow-tooltip />
+						<el-table-column label="手机号" prop="userMobile" show-overflow-tooltip />
 						<el-table-column label="部门" prop="deptName" show-overflow-tooltip />
 						<el-table-column label="人脸">
 							<template #default="{ row }">
@@ -60,7 +59,7 @@
 						<el-table-column label="操作" min-width="160" fixed="right">
 							<template #default="scope">
 								<el-button type="primary" size="small" link icon="VideoPlay" @click="deal(scope.row)">开始处理</el-button>
-								<el-button v-auth="'userFace_sysUserFace_del'" link type="danger" @click="delFace(scope.row)">删除</el-button>
+								<el-button v-auth="'userFace_sysUserFace_del'" link type="danger" icon="Delete" @click="delFace(scope.row)">删除</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -82,6 +81,7 @@ import { useMessage } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { getDicts } from "/@/api/admin/dict"
 import * as userFaceApi from "/@/api/admin/userFace"
+import { ElLoading } from "element-plus"
 
 const { check_status } = useDict("check_status")
 const queryRef = ref()
@@ -90,6 +90,7 @@ const draggableDepTreeRef = ref() // 树组件ref引用
 const activeName = ref(null)
 const tabItems = ref<any>([{}])
 const processDrawerRef = ref()
+const loading = ref()
 
 // 定义表格查询、后台调用的API
 const state: BasicTableProps = reactive<BasicTableProps>({
@@ -143,15 +144,27 @@ const taskSubmitEvent = () => {
 	getDataList()
 }
 
+// 全屏loading
+const loadingStart = () => {
+	loading.value = ElLoading.service({
+		lock: true,
+		text: "删除中...",
+		background: "rgba(0, 0, 0, 0.7)",
+	})
+}
+
 // 删除人脸
 const delFace = async (row: any) => {
 	try {
 		await useMessage().delConfirm("是否删除人脸?")
-		await userFaceApi.delObjs([row.id])
+		loadingStart()
+		await userFaceApi.delObjs([row.id]).finally(() => loading.value.close())
 		useMessage().success("删除成功")
 		getDataList()
 	} catch (error) {
 		console.log(error)
+	} finally {
+		loading.value.close()
 	}
 }
 </script>