人脸批量审批

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

@@ -0,0 +1,70 @@
+<template>
+	<el-dialog v-model="visible" title="批量审批" :width="400">
+		<el-input v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="请输入审核意见..." show-word-limit />
+		<template #footer>
+			<el-button size="large" type="danger" icon="Close" @click="submit(0)">拒绝</el-button>
+			<el-button size="large" type="primary" icon="Check" @click="submit(1)">提交</el-button>
+			<el-button size="large" @click="visible = false">取消</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { ElLoading } from "element-plus"
+import { useMessage } from "/@/hooks/message"
+import { batchCompleteTask } from "/@/api/flow/task"
+
+const emit = defineEmits<{
+	(e: "taskSubmitEvent"): void
+}>()
+
+const visible = ref(false)
+const submitDesc = ref("")
+const processIds = ref<string[]>([])
+const loading = ref<any>()
+
+const openDialog = (ids: string[]) => {
+	submitDesc.value = ""
+	visible.value = true
+	processIds.value = ids
+}
+
+// 全屏loading
+const loadingStart = () => {
+	loading.value = ElLoading.service({
+		lock: true,
+		text: "提交中...",
+		background: "rgba(0, 0, 0, 0.7)",
+	})
+}
+
+const submit = async (isSuccess: number) => {
+	const param = {
+		isSuccess,
+		processInstances: processIds.value,
+		taskLocalParamMap: {
+			approveDesc: submitDesc.value,
+		},
+	}
+	console.log(param)
+
+	try {
+		loadingStart()
+		const res = await batchCompleteTask(param).finally(() => loading.value.close())
+		if (res.code == 0) {
+			visible.value = false
+			emit("taskSubmitEvent")
+			useMessage().success("通过成功")
+			return
+		}
+		useMessage().error("通过失败")
+	} catch (error) {
+		useMessage().error("错误")
+	} finally {
+		loading.value.close()
+	}
+}
+
+defineExpose({ openDialog })
+</script>

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

@@ -26,6 +26,18 @@
 							<el-form-item>
 								<el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
 								<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+								<el-button
+									plain
+									v-auth="'sys_user_del'"
+									v-if="activeName == '1'"
+									:disabled="multiple"
+									class="ml10"
+									icon="VideoPlay"
+									type="primary"
+									@click="doBatchDeal"
+								>
+									审批
+								</el-button>
 							</el-form-item>
 						</el-form>
 					</el-row>
@@ -36,10 +48,12 @@
 						v-loading="state.loading"
 						:data="state.dataList"
 						row-key="userId"
+						@selection-change="handleSelectionChange"
 						border
 						:cell-style="tableStyle.cellStyle"
 						:header-cell-style="tableStyle.headerCellStyle"
 					>
+						<el-table-column :selectable="handleSelectable" type="selection" width="40" />
 						<el-table-column label="#" type="index" width="60" fixed="left" />
 						<el-table-column label="姓名" prop="username" fixed="left" show-overflow-tooltip />
 						<el-table-column label="手机号" prop="userMobile" show-overflow-tooltip />
@@ -65,8 +79,9 @@
 									link
 									icon="VideoPlay"
 									@click="deal(row)"
-									>开始处理</el-button
 								>
+									开始处理
+								</el-button>
 								<el-button v-auth="'userFace_sysUserFace_del'" link type="danger" icon="Delete" @click="delFace(row)">删除</el-button>
 							</template>
 						</el-table-column>
@@ -78,6 +93,9 @@
 
 		<!-- 审批抽屉 -->
 		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
+
+		<!-- 批量审批对话框 -->
+		<batch-deal ref="batchDealRef" @task-submit-event="taskSubmitEvent" />
 	</div>
 </template>
 
@@ -91,6 +109,8 @@ import { getDicts } from "/@/api/admin/dict"
 import * as userFaceApi from "/@/api/admin/userFace"
 import { ElLoading } from "element-plus"
 
+const BatchDeal = defineAsyncComponent(() => import("./batchDeal.vue"))
+
 const { check_status } = useDict("check_status")
 const queryRef = ref()
 const showSearch = ref(true)
@@ -98,8 +118,14 @@ const draggableDepTreeRef = ref() // 树组件ref引用
 const activeName = ref("2")
 const tabItems = ref<any>([{}])
 const processDrawerRef = ref()
+const batchDealRef = ref()
 const loading = ref()
 
+// 多选rows
+const selectObjs = ref([]) as any
+// 是否可以多选
+const multiple = ref(true)
+
 // 定义表格查询、后台调用的API
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
@@ -141,6 +167,24 @@ const handleClickTabItem = (e: any) => {
 	getDataList()
 }
 
+// 是否可以多选
+const handleSelectable = (row: any) => {
+	return row.username !== "admin"
+}
+
+// 多选事件
+const handleSelectionChange = (objs: { userId: string; processId: string | null }[]) => {
+	selectObjs.value = objs.map(({ userId, processId }) => ({ userId, processId }))
+	multiple.value = !objs.length
+}
+
+// 批量开始处理
+const doBatchDeal = () => {
+	if (!selectObjs.value.length) return useMessage().warning("流程id不存在")
+	const processIds = selectObjs.value.filter((item: any) => item.processId).map((item: any) => item.processId)
+	batchDealRef.value.openDialog(processIds)
+}
+
 // 点击开始处理
 const deal = (row: any) => {
 	if (!row.processId) return useMessage().warning("流程id不存在")