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

<template>
	<span  style="margin-top: 12px; color: #0d84ff; margin-bottom: 12px">{{ formRef.name }}</span>
</template>

<script setup>
import {ref, reactive, watch, defineProps, defineEmits} from 'vue'
import {message} from 'ant-design-vue'
import {PictureOutlined, CloudUploadOutlined} from '@ant-design/icons-vue'
import UpLoadImg from '@/components/UpLoadImg/index.vue'
import UpLoadDoc from '@/components/UpLoadDoc/index.vue'
import UpLoadSrt from '@/components/UpLoadSrt/index.vue'
import {add, detail} from '@/api/hour/index'

const props = defineProps({
	modelValue: [String, Number, Boolean, Object, Array, null]
})
const emit = defineEmits(['update:visible','update:modelValue', 'ok', 'handlerUpSelect', 'handlerNewSelect'])

const formRef = ref({
	id : '',
	name : ''
})
const setData = (data) => {
	console.log("最里面的参数",data)
	formRef.value.id = data.id
	formRef.value.name = data.name
	console.log("最里面的参数更新外面",formRef.value)
	emit('update:modelValue',data.id)
}


defineExpose({
	setData
})

</script>

<style lang="less" scoped>
.add-class-hours-modal {
	.ant-modal-content {
		border-radius: 10px;
	}

	.ant-modal-header {
		border-radius: 10px 10px 0 0;
	}

	.ant-form-item {
		margin-bottom: 24px;
	}

	.video-select-row {
		display: flex;
		align-items: center;
	}

	.cover-upload-row {
		display: flex;
		align-items: center;

		.cover-upload-box {
			width: 120px;
			height: 120px;
			background: #f7f8fa;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24px;
			border: 1px dashed #d9d9d9;
			cursor: pointer;

			.cover-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 8px;
			}

			.cover-placeholder {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				color: #bbb;
				font-size: 32px;
			}
		}

		.cover-tip {
			color: #888;
			font-size: 13px;
		}
	}

	.upload-tip {
		color: #888;
		font-size: 13px;
		margin-left: 12px;
	}

	.footer-btns {
		display: flex;
		justify-content: flex-end;
		gap: 16px;
		margin-top: 24px;
	}
}
</style>