OnlineEducation-teacher-front/src/views/statisticalAnalysis/overviewLearningProgress/listViewStudyDetailCourseView.vue

<template>
	<a-modal v-model:visible="visible" width="600" @ok="handleOk" title="视频访问" :footer="null">
		<a-table
			ref="table"
			:columns="columns"
			:data-source="dataSources"
			:row-key="(record) => record.courseId"
			bordered
			:expand-row-by-click="true"
			:pagination="false"
			size="small"
		>
			<template #bodyCell="{ column, text, record }">
<!--				<template v-if="column.dataIndex === 'createTime'">-->
<!--					<span>{{ formatDateTime(record.createTime) }}</span>-->
<!--				</template>-->

<!--				<template v-if="column.dataIndex === 'action'">-->
<!--	&lt;!&ndash;				<a-button size="small" @click="handleDetail(record)" style="margin-right: 5px">详情</a-button>&ndash;&gt;-->
<!--	&lt;!&ndash;				<a-button size="small" @click="handleEdit(record)" style="margin-right: 5px">编辑</a-button>&ndash;&gt;-->
<!--					<a-popover v-model:visible="popoverVisibles[record.collegeId]" title="确定删除?" trigger="click">-->
<!--						<template #content>-->
<!--							<a-button style="margin-right: 10px" type="primary" @click="handleShelf(record,1)">确定-->
<!--							</a-button>-->
<!--							<a-button @click="()=>{	popoverVisibles[record.collegeId] = false}">取消</a-button>-->
<!--						</template>-->
<!--						&lt;!&ndash;					<a-button size="small" style="margin-right: 5px">选择</a-button>&ndash;&gt;-->
<!--						<a-button size="small" @click="handleDelete(record)" style="margin-right: 5px">删除</a-button>-->
<!--					</a-popover>-->
<!--				</template>-->
			</template>
		</a-table>
		<div style="display: flex; width: 100%; justify-content: flex-end; margin-top: 10px">
			<a-pagination
				v-model:current="pagination.current"
				v-model:pageSize="pagination.size"
				:total="total"
				show-less-items
				@change="handlerChange"
			/>
		</div>
	</a-modal>
</template>

<script setup>
import tool from '@/utils/tool'
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {parseTime} from "@/utils/exam";

const router = useRouter()
import { overviewLearningProgressApi } from '@/api/statisticalAnalysis/overviewLearningProgress'
const emit = defineEmits(['handleEdit'])
//发布按钮状态
const releaseVisible = ref(false)
const loading = ref(false) // 列表loading
const dataSources = ref([])
const popoverVisible = ref({})
const popoverVisibles = ref({})
const courseId = ref(null)
const visible = ref(false)
const formState = ref({
	name: '',
	loacl: ''
}) // 列表loading
const columns = [
	{
		title: '课程课时名称',
		dataIndex: 'courseHourName',
		// sorter: true,
		width: '15%'
	},
	{
		title: '学生名称',
		dataIndex: 'userName',
		// sorter: true,
		width: '15%'
	},
	{
		title: '观看次数',
		dataIndex: 'viewCount',
		// sorter: true,
		width: '15%'
	},
	{
		title: '课时id',
		dataIndex: 'hourId',
		// sorter: true,
		width: '15%'
	},
	{
		title: '学生id',
		dataIndex: 'userId',
		// sorter: true,
		width: '15%'
	},
	{
		title: '创建日期',
		dataIndex: 'createDate',
		// sorter: true,
		width: '12%'
	},
]
// tool.formatTimestamp()
const formatDateTime = (val) => {
	if (!val) return ''
	return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
}
const formatTimestamp = (time) => {
	return tool.formatTimestamp(time)
}
const total = ref(0)
const pagination = ref({
	size: 10,
	current: 1,
})
// const onChangeCurrent = (current) => {
// 	router.push({
// 		path: '/' + current
// 	})
// }
const handlerChange = (page, pageSize) => {
	console.log('分页参数', page, pageSize)
	// pagination.value.size = pageSize
	// pagination.value.current = page

	getList()
}
const handleOk = () => {
	visible.value = false
}
const open = (id) => {
	visible.value = true
	pagination.value.size = 10
	pagination.value.current = 1
	courseId.value = id
	getList()
}
const handleDetail = (record) => {
	console.log('查看详情', record)
	router.push({
		path: '/portal/courseDetails',
		query: {
			id: record.courseId
		}
	})
	// 在这里添加查看详情的逻辑
}

// 编辑按钮点击事件
const handleEdit = (record) => {
	console.log('编辑记录', record)
	// 在这里添加编辑记录的逻辑

	emit('handleEdit', record)
}

// 上架按钮点击事件
const handleShelf = (record,num) => {
	console.log('上架记录', record)
	popoverVisible.value[record.collegeId] = false
	// 在这里添加上架记录的逻辑
	// {
	// 	"courseId": "1948183431150227458",
	// 	"putawayStatus": 1
	// }
	// updateCourseStatus({courseId : record.courseId,putawayStatus : num}).then((res)=>{
	// 	getList()
	// })

}

// 删除按钮点击事件
const handleDelete = (record) => {
	console.log('删除记录', record)
	// 在这里添加删除记录的逻辑
}
const getList = () => {
	const params = {
		courseId: courseId.value,
		startTime: undefined,
		endTime: undefined,
		size : pagination.value.size,
		current : pagination.value.current
	}
	overviewLearningProgressApi.getStudyDetailCourseView(params).then((data)=>{
		console.log('获取列表', data)
		dataSources.value = data.records
		pagination.value.current = data.current
		pagination.value.size = data.size
		total.value = data.total
	})
}
const setList = (search) => {
	console.log('获取列表 setList',search)
	// courseName: '',
	// 	collegeId: '',
	// 	majorId: '',
	// 	courseType: '',
	// 	loacl: []
	formState.value = search
	pagination.value.current = 1
	list({...pagination.value, ...formState.value}).then((data) => {
		if (data.code == 200) {
			dataSources.value = data.data.records
			pagination.value.current = data.data.current
			pagination.value.size = data.data.size
			total.value = data.data.total
		}
		// data.records
	})
}

// 重置按钮点击事件
onMounted(() => {
	// getListData()
	// getList()
})


// watch(
// 	() => dataSources.value,
// 	(newVal, oldVal) => {
// 		console.log('数据源变化了 ', ' 新的 ',newVal, '  旧的 ',oldVal)
// 	},
// 	{ deep: true, immediate: true }
// )
defineExpose({
	open
})
</script>

<style scoped>
.desc p {
	margin-bottom: 1em;
}
</style>