OnlineEducation-student-front/src/views/myResources/releaseModal.vue

<template>
	<!-- 上传资源模态框 -->
	<a-modal
		title="发布课程"
		style="width: 800px"
		v-model:visible="uploadModalVisible"
		@ok="handleUploadOk"
		@cancel="handleUploadCancel"
	>
		<a-form :model="uploadForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
			<!-- <a-form-item label="资源名称" name="resourceName">
				<a-input v-model:value="uploadForm.resourceName" placeholder="请输入资源名称" />
			</a-form-item> -->

			<!-- <a-form-item label="资源类型" name="resourceType">
				<a-select v-model:value="uploadForm.resourceType" placeholder="请选择资源类型">
					<a-select-option value="type1">类型1</a-select-option>
					<a-select-option value="type2">类型2</a-select-option>
				</a-select>
			</a-form-item>

			<a-form-item label="课程名称" name="courseName">
				<a-input v-model:value="uploadForm.courseName" placeholder="请输入课程名称" />
			</a-form-item> -->

			<a-form-item label="资源描述" name="courseDesc">
				<a-textarea v-model:value="uploadForm.resourceDesc" placeholder="请输入课程介绍" :rows="4" />
			</a-form-item>

			<a-form-item label="上传封面" name="coverImageId">
				<coverUpload @handleChangeCover="handleChangeCover" @handleRemoveCover="handleRemoveCover"></coverUpload>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { Modal, Upload } from 'ant-design-vue'
	import { PlusOutlined } from '@ant-design/icons-vue'
	import coverUpload from './coverUpload/index.vue'
	import tool from '@/utils/tool'
	// const props = defineProps({
	// 	isState: {
	// 		type: Number,
	// 		required: true,
	// 		default: 0
	// 	}
	// })
	const headers = ref({
		token: tool.data.get('TOKEN')
	})
	const action = ref('http://192.168.31.80:9003/api/webapp/dev/file/uploadMinioReturnId')
	const emit = defineEmits(['close', 'confirm'])

	// 表单数据
	const uploadForm = reactive({
		// resourceName: null,
		// resourceType: null,
		// courseName: null,
		resourceDesc: null,
		coverImageId: '123'
	})

	// 封面文件列表
	const coverFileList = ref([])
	const fileList = ref([])

	const uploadModalVisible = ref(true)

	// 显示上传模态框
	// const showUploadModal = () => {
	//   uploadModalVisible.value = true
	// }

	// 关闭模态框
	const handleUploadCancel = () => {
		// uploadModalVisible.value = false
		Object.assign(uploadForm, {
			// resourceName: null,
			resourceDesc: null,
			// courseName: null,
			// courseDesc: null,
			coverImageId: null
		})
		fileList.value = []
		coverFileList.value = []
		emit('close')
	}

	const handleUploadOk = () => {
		// 这里可以添加实际的上传逻辑
		console.log('Upload confirmed:', uploadForm.fileId, fileList.value, coverFileList.value)
		emit('confirm', uploadForm)
		// uploadModalVisible.value = false
		Object.assign(uploadForm, {
			// resourceName: null,
			// resourceType: null,
			// courseName: null,
			resourceDesc: null,
			coverImageId: null
		})
		fileList.value = []
		coverFileList.value = []
	}

	// 封面文件id
	const handleChangeCover = (fileId) => {
		uploadForm.coverImageId = fileId
	}

	// 移除封面文件
	const handleRemoveCover = () => {
		uploadForm.coverImageId = null
	}
</script>

<style scoped>
	.upload-area {
		border: 2px dashed #3ca9f5;
		padding: 40px;
		text-align: center;
	}

	.upload-area p {
		margin: 10px 0;
	}

	.file-item {
		display: flex;
		align-items: center;
		margin: 10px 0;
	}

	.file-item .ant-progress {
		flex: 1;
		margin: 0 10px;
	}
	.ant-upload-picture-card-wrapper .ant-upload-list-item-info .ant-upload-list-item-filename {
		display: block; /* 确保文件名显示为块级元素 */
		margin-top: 8px; /* 调整文件名与图片之间的间距 */
	}
</style>