OnlineEducation-teacher-front/src/views/resourceDetails/components/ListGeneralView.vue

<template>
	<div>
		<!-- 列表 -->
		<a-table
			:columns="columns"
			:data-source="tableData"
			:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
			:pagination="false"
			@change="handleTableChange"
			:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
		>
			<template #operation="text, record">
				<a-space size="small">
					<a @click="handlePublish(record)">发布</a>
					<a-dropdown>
						<a class="ant-dropdown-link"> 更多 <DownOutlined /> </a>
						<template #overlay>
							<a-menu>
								<a-menu-item key="1" @click="handleEdit(record)">编辑</a-menu-item>
								<a-menu-item key="2" @click="handleDelete(record)">删除</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</a-space>
			</template>
		</a-table>
		<div style="display: flex; justify-content: space-between; align-items: center; height: 70px">
			<div style="display: flex">
				<a-button @click="handleSelectAll">选择全部</a-button>
				<div style="width: 10px"></div>
				<a-button @click="toggleSelection">反向选择</a-button>
				<!-- 全选/反选按钮 -->
			</div>
			<!-- 分页组件 -->
			<a-pagination
				v-model:current="pagination.current"
				v-model:pageSize="pagination.pageSize"
				:total="pagination.total"
				show-size-changer
				@change="handlePageChange"
				@showSizeChange="handlePageSizeChange"
			/>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed, h } from 'vue'
	import { DownOutlined } from '@ant-design/icons-vue'
	import color from '@/utils/color'
	import { green } from '@ant-design/colors'
	const emit = defineEmits(['selectTab'])
	const selectedTab = ref('latest')

	const selectTab = (tab) => {
		if (selectedTab.value != tab) {
			selectedTab.value = tab
			emit('selectTab', tab)
		}
	}

	// 表格列配置
	const columns = [
		{
			title: '编号',
			dataIndex: 'id',
			key: 'id'
		},
		{
			title: '资源名称',
			dataIndex: 'name',
			key: 'name',
			sorter: (a, b) => a.name.localeCompare(b.name)
		},
		{
			title: '课件格式',
			dataIndex: 'format',
			key: 'format',
			sorter: (a, b) => a.format.localeCompare(b.format)
		},
		{
			title: '上传时间',
			dataIndex: 'uploadTime',
			key: 'uploadTime',
			sorter: (a, b) => new Date(a.uploadTime).getTime() - new Date(b.uploadTime).getTime()
		},
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			customRender: ({ text, record }) => {
				const textStyle = { color: text === '处理中' ? 'orange' : 'green' }
				return h('span', { style: textStyle }, [text])
			},
			sorter: (a, b) => a.status.localeCompare(b.status)
		},
		{
			title: '操作',
			key: 'operation',
			slots: { customRender: 'operation' }
		}
	]

	// 表格数据
	const tableData = ref([
		// 示例数据
		{ key: '1', id: 1, name: '资源名称资源名称1', format: 'mp4', uploadTime: '2020-11-25 23:26:08', status: '处理中' },
		{ key: '2', id: 2, name: '资源名称资源名称2', format: 'mp3', uploadTime: '2020-11-26 23:26:08', status: '已上传' },
		{ key: '3', id: 3, name: '资源名称资源名称3', format: 'avi', uploadTime: '2020-11-27 23:26:08', status: '已上传' },
		{
			key: '4',
			id: 4,
			name: '资源名称资源名称4',
			format: 'u3mb4',
			uploadTime: '2020-11-28 23:26:08',
			status: '已上传'
		},
		{ key: '5', id: 5, name: '资源名称资源名称5', format: 'mp4', uploadTime: '2020-11-29 23:26:08', status: '已上传' },
		{ key: '6', id: 6, name: '资源名称资源名称6', format: 'mp4', uploadTime: '2020-11-30 23:26:08', status: '已上传' },
		{ key: '7', id: 7, name: '资源名称资源名称7', format: 'mp4', uploadTime: '2020-11-31 23:26:08', status: '已上传' }
		// 更多数据...
	])

	// 选中的行键值
	const selectedRowKeys = ref([])

	// 全选状态
	const selectAll = computed(() => {
		return selectedRowKeys.value.length === tableData.value.length && tableData.value.length > 0
	})

	// 处理全选
	const handleSelectAll = (e) => {
		if (selectedRowKeys.value.length === tableData.value.length) {
			selectedRowKeys.value = []
		} else {
			selectedRowKeys.value = tableData.value.map((item) => item.key)
		}
	}

	// 处理反选
	// 处理反选
	const toggleSelection = () => {
		const allKeys = tableData.value.map((item) => item.key)
		const newSelectedKeys = allKeys.filter((key) => !selectedRowKeys.value.includes(key))
		selectedRowKeys.value = newSelectedKeys
	}

	// 处理行选择变化
	const onSelectChange = (selectedKeys) => {
		selectedRowKeys.value = selectedKeys
	}

	// 分页配置
	const pagination = ref({
		current: 1,
		pageSize: 10,
		total: tableData.value.length
	})

	// 处理表格变化（分页、排序、筛选等）
	const handleTableChange = (pagination, filters, sorter) => {
		console.log('params', pagination, filters, sorter)
		// 根据需要更新数据
	}

	// 处理页码变化
	const handlePageChange = (current) => {
		pagination.value.current = current
		// 加载对应页码的数据
	}

	// 处理每页条数变化
	const handlePageSizeChange = (current, size) => {
		pagination.value.current = current
		pagination.value.pageSize = size
		// 加载对应页码和条数的数据
	}

	// 操作方法
	const handlePublish = (record) => {
		console.log('发布', record)
	}

	const handleEdit = (record) => {
		console.log('编辑', record)
	}

	const handleDelete = (record) => {
		console.log('删除', record)
	}
</script>

<style scoped>
	.tab-switcher {
		display: flex;
		border-radius: 20px;
		border: 1px solid #1e90ff;
		overflow: hidden;
	}

	.tab-switcher div {
		padding: 2px 20px;
		background-color: #f5f5f5;

		cursor: pointer;
	}

	.tab-switcher div.active {
		background-color: #1e90ff;
		color: white;
	}

	.tab-switcher div:not(:last-child) {
	}
	.processing {
		color: orange;
	}

	.uploaded {
		color: green;
	}
</style>