OnlineEducation-teacher-front/src/views/courseAdd/components/courseProduction/ListView.vue

<template>
	<a-table
		ref="table"
		:columns="columns"
		:data-source="dataSource"
		:row-key="(record) => record.collegeId"
		bordered
		:expand-row-by-click="true"
		:pagination="false"
		size="small"
	>
		<template #bodyCell="{ column, text, record }">
			<template v-if="column.dataIndex === 'publishTime'">{{ formatTimestamp(text) }}</template>
			<template v-if="column.dataIndex === 'action'">
				<a-popover v-model:visible="popoverVisible[record.iiiiiindex]" title="提示" trigger="click">
					<template #content>
						<a-button style="margin-right: 10px" type="primary" @click="handleOk(record)">选择
						</a-button>
						<a-button @click="()=>{	popoverVisible[record.iiiiiindex] = false}">取消</a-button>
					</template>
					<a-button size="small" 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="pagination.total"
			show-less-items
			@change="handlerChange"
		/>
	</div>
</template>

<script setup>
import tool from '@/utils/tool'
import {ref, onMounted} from 'vue'
import {EyeOutlined, EditOutlined, SnippetsOutlined, DeleteOutlined} from '@ant-design/icons-vue'
import {courceDownList} from '@/api/courseinfo'
import {useRouter} from 'vue-router'
import collegeApi from '@/api/college'

const router = useRouter()
const popoverVisible = ref({})
const emit = defineEmits(['handleSelectFile'])
//发布按钮状态
const releaseVisible = ref(false)
const loading = ref(false) // 列表loading
const dataSource = ref([])
const formState = ref({
	name: '',
	loacl: ''
}) // 列表loading
const columns = [
	{
		title: '资源名称',
		dataIndex: 'fileName',
		sorter: true,
		width: '20%'
	},
	{
		title: '状态',
		dataIndex: 'verifyStatusName',
		sorter: true,
		width: '10%'
	},
	{
		title: '更新时间',
		dataIndex: 'uploadTime',
		sorter: true,
		width: '20%'
	},
	{
		title: '操作',
		dataIndex: 'action',
		width: '5%'
	}
]
// tool.formatTimestamp()

const formatTimestamp = (time) => {
	return tool.formatTimestamp(time)
}
const pagination = reactive({
	size: 10,
	current: 1,
	total: 0
})
const onChangeCurrent = (current) => {
	router.push({
		path: '/' + current
	})
}
const handleOk = (item) => {
	popoverVisible.value[item.iiiiiindex] = false
	console.log('选择了什么', item)
	emit('handleSelectFile', item)

}
const handlerChange = (page, pageSize) => {
	pagination.size = pageSize
	pagination.current = page

	getList()
}
const publishedData = ref()
//发布确定

// 上传资源模态框
const uploadModalVisible = ref(false)
// 详情按钮点击事件
const handleDetail = (record) => {
	console.log('查看详情', record)
	// 在这里添加查看详情的逻辑
}

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

	emit('handleEdit', record)
}

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

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

	courceDownList({...pagination}).then((data) => {
		if (data.code == 200) {
			let list = []
			for (let i = 0; i < data.data.records.length; i++) {
				let item =  data.data.records[i]
				item.iiiiiindex = i
				list.push(item)
			}
			dataSource.value = list
			pagination.current = data.data.current
			pagination.size = data.data.size
			pagination.total = data.data.total
		}
		// data.records
	})
}
const setList = (search) => {
	formState.value = search
	pagination.current = 1
	courceDownList({...pagination, ...search}).then((data) => {
		if (data.code == 200) {
			dataSource.value = data.data.records
			pagination.current = data.data.current
			pagination.size = data.data.size
			pagination.total = data.data.total
		}
		// data.records
	})
}

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

defineExpose({
	setList
})
</script>

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