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

<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-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"
						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 label="手机号" prop="userMobile" show-overflow-tooltip />
						<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="createTime" show-overflow-tooltip min-width="160" />
						<el-table-column label="审核时间" prop="processTime" show-overflow-tooltip min-width="160" />
						<el-table-column label="操作" min-width="160" fixed="right">
							<template #default="{ row }">
								<el-button type="primary" v-if="row.isCheckUser" size="small" link icon="VideoPlay" @click="deal(row)">开始处理</el-button>
								<el-button v-auth="'userFace_sysUserFace_del'" link type="danger" icon="Delete" @click="delFace(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"
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()
const showSearch = ref(true)
const draggableDepTreeRef = ref() // 树组件ref引用
const activeName = ref("2")
const tabItems = ref<any>([{}])
const processDrawerRef = ref()
const loading = ref()

// 定义表格查询、后台调用的API
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		deptId: "",
		username: "",
		phone: "",
		isDeepDept: false,
		processStatus: "2",
	},
	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()
}

onMounted(async () => {
	const { data } = await getDicts("check_status")
	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().warning("流程id不存在")
	processDrawerRef.value.openProcessDrawer(row)
}

// 审批提交事件
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("是否删除人脸?")
		loadingStart()
		await userFaceApi.delObjs([row.id]).finally(() => loading.value.close())
		useMessage().success("删除成功")
		getDataList()
	} catch (error) {
		console.log(error)
	} finally {
		loading.value.close()
	}
}
</script>