人脸审批管理

src/api/admin/userFaceApprove.ts

@@ -0,0 +1,19 @@
+import request from "/@/utils/request"
+
+// 获取人脸审批列表
+export function getUserFaceList(params?: object) {
+	return request({
+		url: "/admin/user-face/page-join",
+		method: "get",
+		params,
+	})
+}
+
+// 开始处理人脸审批
+export function userFaceApprove(params?: object) {
+	return request({
+		url: "/admin/user-face/apply",
+		method: "get",
+		params,
+	})
+}

src/components/processDrawer/agree.vue

@@ -1,14 +1,30 @@
+<template>
+	<el-dialog v-model="dialogVisible" title="提交审核" :width="400">
+		<el-input v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="请输入审核意见..." show-word-limit />
+
+		<template #footer>
+			<el-button @click="dialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="submit">确定</el-button>
+		</template>
+	</el-dialog>
+</template>
+
 <script setup lang="ts">
 import { ref } from "vue"
 import { completeTask } from "/@/api/flow/task"
 import type { FlowFormItem, TaskData, TaskSubmitParam } from "./types"
 import { useMessage } from "/@/hooks/message"
+import { ElLoading } from "element-plus"
+
+const emit = defineEmits<{
+	(e: "taskSubmitEvent"): void
+}>()
 
 const dialogVisible = ref(false)
 const submitDesc = ref("")
 const currentData = ref<TaskData>()
 const currentOpenFlowForm = ref<FlowFormItem[]>()
-const loading = ref(false)
+const loading = ref()
 
 const handle = (row: TaskData, formData: FlowFormItem[]) => {
 	submitDesc.value = ""
@@ -18,9 +34,15 @@ const handle = (row: TaskData, formData: FlowFormItem[]) => {
 }
 
 defineExpose({ handle })
-const emit = defineEmits<{
-	(e: "taskSubmitEvent"): void
-}>()
+
+// 全屏loading
+const loadingStart = () => {
+	loading.value = ElLoading.service({
+		lock: true,
+		text: "提交中...",
+		background: "rgba(0, 0, 0, 0.7)",
+	})
+}
 
 const submit = async () => {
 	if (!currentData.value || !currentOpenFlowForm.value) return
@@ -56,8 +78,8 @@ const submit = async () => {
 	}
 
 	try {
-		loading.value = true
-		const res = await completeTask(param).finally(() => (loading.value = false))
+		loadingStart()
+		const res = await completeTask(param).finally(() => loading.value.close())
 		if (res.code === 0) {
 			dialogVisible.value = false
 			emit("taskSubmitEvent")
@@ -66,31 +88,9 @@ const submit = async () => {
 		}
 		useMessage().error("通过失败")
 	} catch (error) {
-		loading.value = false
 		useMessage().error("错误")
+	} finally {
+		loading.value.close()
 	}
 }
 </script>
-
-<template>
-	<div>
-		<el-dialog v-model="dialogVisible" title="提交审核" :width="400" class="rounded-lg shadow-xl">
-			<div class="p-4 space-y-4" v-loading="loading">
-				<el-input
-					v-model="submitDesc"
-					type="textarea"
-					maxlength="100"
-					:rows="5"
-					placeholder="请输入审核意见..."
-					show-word-limit
-					class="w-full transition-all duration-300 focus:ring-2 focus:ring-primary"
-				/>
-
-				<div class="flex justify-end pt-4 space-x-3">
-					<el-button @click="dialogVisible = false" class="hover:bg-gray-100 dark:hover:bg-gray-700" :disabled="loading"> 取消 </el-button>
-					<el-button type="primary" @click="submit" class="bg-primary hover:bg-primary-focus" :disabled="loading"> 确定 </el-button>
-				</div>
-			</div>
-		</el-dialog>
-	</div>
-</template>

src/components/processDrawer/index.vue

@@ -1,18 +1,13 @@
 <template>
-	<!--审批抽屉-->
-	<el-drawer v-model="taskDrawerVisible" direction="rtl" size="400px">
+	<!-- 流程审批抽屉 -->
+	<el-drawer v-model="processDrawerVisible" direction="rtl" size="400px">
 		<template #header>
 			<h3>{{ curAssignTask?.processName }}</h3>
 		</template>
 		<template #default>
 			<div class="w-full h-full" v-loading="loading">
-				<el-card class="box-card">
-					<form-render
-						@addLayoutOneItem="addLayoutOneItem"
-						@deleteLayoutOneItem="deleteLayoutOneItem"
-						ref="formRenderRef"
-						:form-list="currentOpenFlowForm"
-					/>
+				<el-card class="box-card" v-if="curAssignTask.taskId">
+					<form-render ref="formRenderRef" :form-list="currentOpenFlowForm" />
 				</el-card>
 				<flow-node-format
 					:disableSelect="true"
@@ -45,76 +40,44 @@
 </template>
 
 <script setup lang="ts">
+import { FlowFormItem } from "./types"
 import FormRender from "/@/views/flow/form/render/FormRender.vue"
 import FlowNodeFormat from "/@/views/flow/form/tools/FlowNodeFormatData.vue"
 import AgreeHandle from "./agree.vue"
 import RefuseHandle from "./refuse.vue"
 import TransferHandle from "./transfer.vue"
-import other from "/@/utils/other"
-import { FlowFormItem } from "./types"
 import { queryAssignTaskOne, queryTask } from "/@/api/flow/task"
 
-const taskDrawerVisible = defineModel<boolean>()
-
-const props = withDefaults(
-	defineProps<{
-		processId: string
-	}>(),
-	{
-		processId: "",
-	},
-)
-
 const emit = defineEmits(["taskSubmitEvent"])
 
+const processDrawerVisible = ref<boolean>(false)
+const curAssignTask = ref<any>({})
+const currentOpenFlowForm = ref<FlowFormItem[]>([])
+const loading = ref(false)
 const agreeHandler = ref()
 const refuseHandler = ref()
 const transferHandler = ref()
-const currentOpenFlowForm = ref<FlowFormItem[]>([])
-const curAssignTask = ref<any>({})
-const loading = ref(false)
 
-watch(
-	() => taskDrawerVisible.value,
-	async (val) => {
-		if (val) {
-			loading.value = true
-			try {
-				const assignTask = await queryAssignTaskOne({ processInstanceId: props.processId })
-				if (assignTask.code === 0) {
-					curAssignTask.value = assignTask.data
-				}
+// 打开流程审批抽屉
+const openProcessDrawer = async (row: any) => {
+	processDrawerVisible.value = true
 
-				const res = await queryTask(curAssignTask.value.taskId, false).finally(() => (loading.value = false))
-				if (res.code === 0) {
-					currentOpenFlowForm.value = res.data.formItems
-				}
-			} catch (error) {
-				loading.value = false
-				currentOpenFlowForm.value = []
-				curAssignTask.value = {}
-			}
+	loading.value = true
+	try {
+		const assignTask = await queryAssignTaskOne({ processInstanceId: row.processId })
+		if (assignTask.code === 0) {
+			curAssignTask.value = assignTask.data
 		}
-	},
-)
 
-const addLayoutOneItem = (id: number | string) => {
-	for (const item of currentOpenFlowForm.value) {
-		if (item.id !== id) {
-			continue
+		const res = await queryTask(curAssignTask.value.taskId, false).finally(() => (loading.value = false))
+		if (res.code === 0) {
+			currentOpenFlowForm.value = res.data.formItems
 		}
-		let value = item.props.value
-		let oriForm = item.props.oriForm
-		value.push(other.deepClone(oriForm))
-		item.props.value = value
-	}
-}
-const deleteLayoutOneItem = (id: any, index: any) => {
-	for (const item of currentOpenFlowForm.value) {
-		if (item.id !== id) {
-			continue
-		}
-		item.props.value.splice(index, 1)
+	} catch (error) {
+		curAssignTask.value = {}
+		currentOpenFlowForm.value = []
+	} finally {
+		loading.value = false
 	}
 }
 
@@ -137,9 +100,13 @@ const taskSubmitEvent = () => emit("taskSubmitEvent")
 const formValue = computed(() => {
 	const obj: any = {}
 
-	for (var item of currentOpenFlowForm.value) {
+	for (let item of currentOpenFlowForm.value) {
 		obj[item.id] = item.props.value
 	}
 	return obj
 })
+
+defineExpose({
+	openProcessDrawer,
+})
 </script>

src/components/processDrawer/refuse.vue

@@ -1,29 +1,50 @@
+<template>
+	<el-dialog v-model="dialogVisible" title="拒绝审核" width="400px">
+		<el-input v-loading="loading" v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="审核意见" show-word-limit />
+		<template #footer>
+			<el-button @click="dialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="submit">确定</el-button>
+		</template>
+	</el-dialog>
+</template>
+
 <script setup lang="ts">
 import { defineExpose } from "vue"
 import { completeTask } from "/@/api/flow/task"
 import { useMessage } from "/@/hooks/message"
+import type { FlowFormItem, TaskData, TaskSubmitParam } from "./types"
+import { ElLoading } from "element-plus"
+
+const emit = defineEmits(["taskSubmitEvent"])
 
 const dialogVisible = ref(false)
 const submitDesc = ref("")
 const currentData = ref()
 const currentOpenFlowForm = ref()
-const loading = ref(false)
+const loading = ref()
 
-const handle = (row, formData) => {
+const handle = (row: TaskData, formData: FlowFormItem[]) => {
 	submitDesc.value = ""
 	currentData.value = row
 	currentOpenFlowForm.value = formData
-
 	dialogVisible.value = true
 }
 
+// 全屏loading
+const loadingStart = () => {
+	loading.value = ElLoading.service({
+		lock: true,
+		text: "提交中...",
+		background: "rgba(0, 0, 0, 0.7)",
+	})
+}
+
 defineExpose({ handle })
-const emit = defineEmits(["taskSubmitEvent"])
 
 const submit = async () => {
 	let value = currentOpenFlowForm.value
 
-	var formData = {}
+	let formData: any = {}
 	for (var item of value) {
 		formData[item.id] = item.props.value
 
@@ -53,8 +74,8 @@ const submit = async () => {
 		},
 	}
 	try {
-		loading.value = true
-		const res = await completeTask(param).finally(() => (loading.value = false))
+		loadingStart()
+		const res = await completeTask(param).finally(() => loading.value.close())
 		if (res.code === 0) {
 			useMessage().success("拒绝成功")
 			dialogVisible.value = false
@@ -64,21 +85,8 @@ const submit = async () => {
 		useMessage().error("拒绝失败")
 	} catch (error) {
 		useMessage().error("错误")
-		loading.value = false
+	} finally {
+		loading.value.close()
 	}
 }
 </script>
-
-<template>
-	<div>
-		<el-dialog v-model="dialogVisible" title="拒绝审核" width="400px">
-			<el-input v-loading="loading" v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="审核意见" show-word-limit />
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
-					<el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>

src/components/processDrawer/transfer.vue

@@ -1,8 +1,29 @@
+<template>
+	<el-dialog v-model="dialogVisible" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">
+		<label class="block pb-2">
+			<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1">选择转办人员</span>
+		</label>
+		<select-show v-model:orgList="userList" type="user" :multiple="true" />
+
+		<label class="block pb-2">
+			<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1">审核意见</span>
+		</label>
+		<el-input v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="请输入审核意见（2-100字）" show-word-limit />
+
+		<template #footer>
+			<el-button @click="dialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="submit">确定</el-button>
+		</template>
+	</el-dialog>
+</template>
+
 <script setup lang="ts">
-import { defineExpose, ref } from "vue"
+import { ref } from "vue"
 import { transferTask } from "/@/api/flow/task"
 import selectShow from "/@/components/OrgSelector/index.vue"
-import { ElMessage } from "element-plus"
+import { ElLoading, ElMessage } from "element-plus"
+
+const emit = defineEmits(["taskSubmitEvent"])
 
 interface FlowFormItem {
 	id: string
@@ -23,7 +44,16 @@ const submitDesc = ref("")
 const userList = ref<Array<{ id: string }>>([])
 const currentData = ref<TaskData>()
 const currentOpenFlowForm = ref<FlowFormItem[]>()
-const loading = ref(false)
+const loading = ref()
+
+// 全屏loading
+const loadingStart = () => {
+	loading.value = ElLoading.service({
+		lock: true,
+		text: "提交中...",
+		background: "rgba(0, 0, 0, 0.7)",
+	})
+}
 
 const handle = (row: TaskData, formData: FlowFormItem[]) => {
 	submitDesc.value = ""
@@ -33,7 +63,6 @@ const handle = (row: TaskData, formData: FlowFormItem[]) => {
 }
 
 defineExpose({ handle })
-const emit = defineEmits(["taskSubmitEvent"])
 
 const validateForm = (): boolean => {
 	if (userList.value.length === 0) {
@@ -91,8 +120,8 @@ const submit = async () => {
 		}
 
 		try {
-			loading.value = true
-			const res = await transferTask(param).finally(() => (loading.value = false))
+			loadingStart()
+			const res = await transferTask(param).finally(() => loading.value.close())
 			if (res.code === 0) {
 				ElMessage.success("转办成功")
 				dialogVisible.value = false
@@ -101,47 +130,15 @@ const submit = async () => {
 			}
 			ElMessage.error("转办失败")
 		} catch (error) {
-			loading.value = false
+			loading.value.close()
 			ElMessage.error("错误")
+		} finally {
+			loading.value.close()
 		}
 	} catch (error) {
 		ElMessage.error("转办失败，请重试")
+	} finally {
+		loading.value.close()
 	}
 }
 </script>
-
-<template>
-	<div>
-		<el-dialog v-model="dialogVisible" width="400px" :close-on-click-modal="false" :close-on-press-escape="false" class="transfer-dialog">
-			<div v-loading="loading" class="space-y-4">
-				<div class="w-full">
-					<label class="block pb-2">
-						<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1"> 选择转办人员 </span>
-					</label>
-					<select-show v-model:orgList="userList" type="user" :multiple="true"></select-show>
-				</div>
-
-				<div class="w-full">
-					<label class="block pb-2">
-						<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1"> 审核意见 </span>
-					</label>
-					<el-input
-						v-model="submitDesc"
-						type="textarea"
-						maxlength="100"
-						:rows="5"
-						placeholder="请输入审核意见（2-100字）"
-						show-word-limit
-					/>
-				</div>
-			</div>
-
-			<template #footer>
-				<span class="flex justify-end gap-2">
-					<el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
-					<el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>

src/components/processDrawer/types.ts

@@ -1,4 +1,3 @@
-// First let's create types for our form data
 export interface FlowFormItem {
 	id: string
 	type: string

src/views/admin/system/userFaceApprove/i18n/en.ts

@@ -0,0 +1,29 @@
+export default {
+	sysuser: {
+		index: '#',
+		username: 'username',
+		name: 'name',
+		phone: 'phone',
+		post: 'post',
+		role: 'role',
+		lockFlag: 'lockFlag',
+		createTime: 'createTime',
+		password: 'password',
+		dept: 'dept',
+		email: 'email',
+		nickname: 'nickname',
+		inputUsernameTip: 'input username',
+		inputPhoneTip: 'input phone',
+		inputPasswordTip: 'input password',
+		inputNameTip: 'input name',
+		importUserTip: 'user import',
+		deleteDisabledTip: 'admin are not allowed to delete',
+		noDataScopeTip: 'no data permissions',
+		passwordBtn: 'password',
+	},
+	personal: {
+		name: 'personal info',
+		passwordRule: 'The two passwords are inconsistent',
+		passwordScore: 'Password level is too low',
+	},
+};

src/views/admin/system/userFaceApprove/i18n/zh-cn.ts

@@ -0,0 +1,29 @@
+export default {
+	sysuser: {
+		index: '#',
+		username: '用户名',
+		name: '姓名',
+		phone: '手机号',
+		post: '岗位',
+		role: '角色',
+		lockFlag: '启用',
+		createTime: '创建时间',
+		password: '密码',
+		dept: '部门',
+		email: '邮箱',
+		nickname: '昵称',
+		inputUsernameTip: '请输入用户名',
+		inputPhoneTip: '请输入手机号',
+		inputNameTip: '请输入姓名',
+		inputPasswordTip: '请输入6-20位合法密码',
+		importUserTip: '用户导入',
+		deleteDisabledTip: 'admin 不允许被删除',
+		noDataScopeTip: '没有数据权限',
+		passwordBtn: '密码',
+	},
+	personal: {
+		name: '个人信息',
+		passwordRule: '两次输入密码不一致',
+		passwordScore: '密码等级太低',
+	},
+};

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

@@ -0,0 +1,122 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
+				<template #default>
+					<el-row v-show="showSearch">
+						<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+							<el-form-item style="width: 250px" label="用户" prop="userId">
+								<select-user v-model="state.queryForm.userId" clearable />
+							</el-form-item>
+							<el-form-item label="用户名" prop="username">
+								<el-input v-model="state.queryForm.username" placeholder="请输入用户名" clearable />
+							</el-form-item>
+							<el-form-item label="手机号" prop="phone">
+								<el-input v-model="state.queryForm.phone" placeholder="请输入手机号" clearable />
+							</el-form-item>
+							<el-form-item>
+								<el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
+								<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+							</el-form-item>
+						</el-form>
+					</el-row>
+					<el-table
+						v-loading="state.loading"
+						:data="state.dataList"
+						row-key="userId"
+						border
+						:cell-style="tableStyle.cellStyle"
+						: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="deptName" show-overflow-tooltip />
+						<el-table-column label="人脸">
+							<template #default="{ row }">
+								<preview-image :src="row.faceImg" />
+							</template>
+						</el-table-column>
+						<el-table-column label="审核状态" prop="processStatus" show-overflow-tooltip min-width="100">
+							<template #default="{ row }">
+								<dict-tag :options="check_status" :value="row.processStatus" />
+							</template>
+						</el-table-column>
+						<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>
+							</template>
+						</el-table-column>
+					</el-table>
+					<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
+				</template>
+			</DraggableDepTree>
+		</div>
+
+		<!-- 审批抽屉 -->
+		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import ProcessDrawer from "/@/components/processDrawer/index.vue"
+import { getUserFaceList } from "/@/api/admin/userFaceApprove"
+import { useMessage } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
+
+const { check_status } = useDict("check_status")
+const processDrawerRef = ref()
+const queryRef = ref()
+const showSearch = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
+
+// 定义表格查询、后台调用的API
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {
+		deptId: "",
+		username: "",
+		phone: "",
+		isDeepDept: false,
+	},
+	pageList: getUserFaceList,
+})
+const { getDataList, currentChangeHandle, sizeChangeHandle, postDownBlobFile, tableStyle } = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+	queryRef.value?.resetFields()
+	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
+	draggableDepTreeRef.value.resetData()
+	getDataList()
+}
+
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isInclude = !isDeepTree
+	getDataList()
+}
+
+const deal = (row: any) => {
+	if (!row.processId) return useMessage().info("流程id不存在")
+	processDrawerRef.value.openProcessDrawer(row)
+}
+
+// 审批提交事件
+const taskSubmitEvent = () => {
+	getDataList()
+}
+</script>

src/views/hard/hard-order/index.vue

@@ -288,7 +288,6 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
-const draggableDepTreeRef = ref() // 树组件ref引用
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},

src/views/wallet/wallet-recharge-apply/index.vue

@@ -142,8 +142,8 @@
 			@refreshDataList="getDataList(false)"
 		/>
 
-		<!-- 右侧抽屉 -->
-		<taskDrawer v-model="taskDrawerVisible" :process-id="currentData?.processId" @task-submit-event="taskSubmitEvent" />
+		<!-- 审批抽屉 -->
+		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
 	</div>
 </template>
 
@@ -153,7 +153,7 @@ import * as walletRechargeApplyApi from "/@/api/wallet/wallet-recharge-apply"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { ElLoading } from "element-plus"
-import taskDrawer from "/@/components/taskDrawer/index.vue"
+import ProcessDrawer from "/@/components/processDrawer/index.vue"
 
 const { push } = useRouter()
 
@@ -170,8 +170,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
-const taskDrawerVisible = ref<boolean>()
-const currentData = ref()
+const processDrawerRef = ref()
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -248,13 +247,12 @@ const handleDelete = async (ids: string[]) => {
  * @param row
  */
 const deal = (row: any) => {
-	currentData.value = row
-	taskDrawerVisible.value = true
+	if (!row.processId) return useMessage().info("流程id不存在")
+	processDrawerRef.value.openProcessDrawer(row)
 }
 
 // 任务提交事件
 const taskSubmitEvent = () => {
-	taskDrawerVisible.value = false
 	getDataList()
 }
 </script>