人脸审批状态tab

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

@@ -28,6 +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-table
 						v-loading="state.loading"
@@ -54,7 +58,7 @@
 						<el-table-column label="审核时间" prop="processTime" show-overflow-tooltip min-width="160" />
 						<el-table-column label="操作" min-width="100" fixed="right">
 							<template #default="scope">
-								<el-button type="primary" size="small" link icon="VideoPlay" @click="deal(scope.row)"> 开始处理 </el-button>
+								<el-button type="primary" size="small" link icon="VideoPlay" @click="deal(scope.row)">开始处理</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -74,12 +78,15 @@ import ProcessDrawer from "/@/components/processDrawer/index.vue"
 import { getUserFaceList } from "/@/api/admin/userFaceApprove"
 import { useMessage } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
+import { getDicts } from "/@/api/admin/dict"
 
 const { check_status } = useDict("check_status")
-const processDrawerRef = ref()
 const queryRef = ref()
 const showSearch = ref(true)
 const draggableDepTreeRef = ref() // 树组件ref引用
+const activeName = ref(null)
+const tabItems = ref<any>([{}])
+const processDrawerRef = ref()
 
 // 定义表格查询、后台调用的API
 const state: BasicTableProps = reactive<BasicTableProps>({
@@ -110,8 +117,21 @@ const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepT
 	getDataList()
 }
 
+onMounted(async () => {
+	const { data } = await getDicts("check_status")
+	data.unshift({ label: "全部", value: null })
+	tabItems.value = data
+})
+
+// tab点击切换
+const handleClickTabItem = (e: any) => {
+	state.queryForm.processStatus = tabItems.value[e.index].value
+	getDataList()
+}
+
+// 点击开始处理
 const deal = (row: any) => {
-	if (!row.processId) return useMessage().info("流程id不存在")
+	if (!row.processId) return useMessage().warning("流程id不存在")
 	processDrawerRef.value.openProcessDrawer(row)
 }