OnlineEducation-student-front/src/views/InventoryReview/index.vue

<template>
	<a-card>
		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane key="pending" tab="待审核"></a-tab-pane>
			<a-tab-pane key="approved" tab="已审核"></a-tab-pane>
		</a-tabs>
		<a-row :gutter="16" style="margin-bottom: 16px">
			<a-col :span="2">
				<a-select v-model:value="formState.examineStatus" style="width: 100px" placeholder="请选择状态">
					<a-select-option value="pending">待审核</a-select-option>
					<a-select-option value="approved">已审核</a-select-option>
				</a-select>
			</a-col>
			<a-col :span="4">
				<a-select v-model:value="formState.orgName" style="width: 200px" placeholder="请选择组织结构">
					<a-select-option value="0">待审核</a-select-option>
					<a-select-option value="1">已审核</a-select-option>
				</a-select>
			</a-col>
			<a-col :span="6">
				<a-input v-model:value="formState.fileName" placeholder="请输入关键词搜索" />
			</a-col>
			<a-col :span="6">
				<a-button type="primary" @click="handleSearch">搜索</a-button>
				<a-button style="margin-left: 8px" @click="handleBatchApprove">批量审核</a-button>
				<a-button style="margin-left: 8px" @click="handleExportDetails">导出详情</a-button>
			</a-col>
		</a-row>
		<a-table
			:row-selection="rowSelection"
			:columns="columns"
			:data-source="dataSource"
			:pagination="false"
			:loading="loading"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'resourceName'">
					<div class="resource-item">
						<img :src="record.thumbnail" alt="Thumbnail" class="thumbnail" />
						<span>{{ record.resourceName }}</span>
					</div>
				</template>
				<template v-else-if="column.key === 'size'">
					{{ formatSize(record.size) }}
				</template>
				<template v-else-if="column.key === 'applicant'">
					{{ record.applicant }} ({{ record.applicantAccount }})
				</template>
				<template v-else-if="column.key === 'applyTime'">
					{{ formatDate(record.applyTime) }}
				</template>
				<template v-else-if="column.key === 'aiAudit'">
					<span :style="{ color: record.aiAudit === '审核失败' ? 'red' : 'green' }">{{ record.aiAudit }}</span>
				</template>
				<template v-else-if="column.key === 'operation'">
					<a-button type="link" @click="handleAudit(record, 1)">同意</a-button>
					<a-button type="link" style="color: red" @click="handleAudit(record, 0)">驳回</a-button>
				</template>
			</template>
		</a-table>
		<a-modal v-model:visible="judgeVisible" title="审核" @ok="handleOk" @cancel="handleCancel">
			<p style="text-align: center">
				审核结果:
				<a-select
					v-model:value="finalResult"
					style="width: 100px"
					:options="classify_results"
					placeholder="请选择审核结果"
				>
				</a-select>
			</p>
		</a-modal>
		<div class="dis-flex-end margin-top">
			<CustomPagination
				:total="pagination.total"
				:current="pagination.pageNum"
				:pageSize="pagination.pageSize"
				:showQuickJumper="true"
				:showSizeChanger="true"
				:showTotal="(total) => `共 ${total} 条数据`"
				@change="handlePageChange"
				@showSizeChange="handlePageSizeChange"
			/>
		</div>
	</a-card>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import InventoryReviewApi from '@/api/InventoryReview.js'
	import CustomPagination from '@/components/customPagination.vue'
	// 状态管理
	const activeKey = ref('pending')
	const loading = ref(false)
	const judgeVisible = ref(false)
	const finalResult = ref(null)
	const formState = reactive({
		fileName: null,
		examineStatus: null,
		orgName: null
	})
	// 表格数据
	const columns = [
		{
			title: '资源名称',
			key: 'fileName',
			dataIndex: 'fileName',
			width: 200,
			align: 'center'
		},
		{
			title: '大小',
			key: 'fileSizeNum',
			dataIndex: 'fileSizeNum',
			width: 100,
			align: 'center'
		},
		{
			title: '申请人',
			key: 'createUser',
			dataIndex: 'createUser',
			width: 200,
			align: 'center'
		},
		{
			title: '组织结构',
			key: 'orgName',
			dataIndex: 'orgName',
			width: 150,
			align: 'center'
		},
		{
			title: '申请时间',
			key: 'createTime',
			dataIndex: 'createTime',
			width: 150,
			align: 'center'
		},
		{
			title: '智能审核',
			key: 'examineReason',
			dataIndex: 'examineReason',
			width: 100,
			align: 'center'
		},
		{
			title: '待审核人',
			key: 'auditor',
			dataIndex: 'auditor',
			width: 150,
			align: 'center'
		},
		{
			title: '操作',
			key: 'operation',
			width: 100,
			align: 'center'
		}
	]

	const dataSource = ref([])
	const classify_results = ref([
		{ value: '1', label: '通过' },
		{ value: '0', label: '驳回' }
	])

	const pagination = reactive({
		pageSize: 10,
		pageNum: 1,
		total: 0
	})
	//勾选的ID列表
	const selectedRowKeys = ref([])
	//列表勾选
	const rowSelection = computed(() => {
		return {
			selectedRowKeys: unref(selectedRowKeys),
			onChange: onSelectChange,
			hideDefaultSelections: true
		}
	})
	//勾选方法
	const onSelectChange = (changaRowKeys) => {
		selectedRowKeys.value = changaRowKeys
	}

	// 翻页
	const handlePageChange = (page) => {
		pagination.pageNum = page
		getListData()
	}
	// 每页条数
	const handlePageSizeChange = (pageNum, size) => {
		pagination.pageNum = 1
		pagination.pageSize = size
		getListData()
	}
	const getListData = () => {
		let params = {
			pageNum: pagination.pageNum,
			pageSize: pagination.pageSize,
			orgName: formState.orgName,
			examineStatus: formState.examineStatus,
			fileName: formState.fileName
		}
		InventoryReviewApi.queryList(params)
			.then((res) => {
				console.log(res, '审核列表')
				dataSource.value = res.data
				pagination.total = res.total
			})
			.catch((err) => {
				console.log(err)
			})
	}

	// 方法
	const handleSearch = () => {
		// 处理搜索逻辑
		getListData()
	}

	//批量审批
	const handleBatchApprove = () => {
		judgeVisible.value = true
	}
	const handleOk = () => {
		if (!finalResult.value) {
			message.error('请选择审核类型')
		}
		const idList = selectedRowKeys.value
		const params = []
		idList.forEach((res) => {
			params.push({
				id: res,
				result: finalResult.value
			})
		})
		loading.value = true
		return
	}

	const handleExportDetails = () => {
		// 处理导出详情逻辑
	}

	const handleAudit = (record, state) => {
		// 处理单个审核逻辑
		console.log('审核记录:', record)
		if (state == 0) {
			let params = {
				targetId: record.id,
				examineReason: 'asdasd'
			}
			InventoryReviewApi.reject(params)
				.then((res) => {
					console.log(res, '驳回')
				})
				.catch((err) => {
					console.log(err)
				})
		} else {
			let params = {
				targetId: record.id,
				examineReason: 'asdasd'
			}
			InventoryReviewApi.reject(params)
				.then((res) => {
					console.log(res, '通过')
				})
				.catch((err) => {
					console.log(err)
				})
		}
	}

	const formatSize = (size) => {
		if (size < 1024) return `${size}B`
		else if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)}KB`
		else if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(2)}MB`
		else return `${(size / (1024 * 1024 * 1024)).toFixed(2)}GB`
	}

	const formatDate = (dateStr) => {
		return new Date(dateStr).toLocaleString()
	}
	onMounted(() => {
		getListData()
	})
</script>
<style scoped>
	.resource-item {
		display: flex;
		align-items: center;
	}

	.thumbnail {
		width: 40px;
		height: 40px;
		margin-right: 8px;
	}

	@media (max-width: 768px) {
		.resource-item {
			flex-direction: column;
			align-items: flex-start;
		}

		.thumbnail {
			margin-right: 0;
			margin-bottom: 8px;
		}
	}
</style>