OnlineEducation-back-front/src/views/courseAdd/components/courseProduction/addDialog.vue

<template>
	<div>
		<a-modal
			v-model:visible="modalVisible"
			:title="modeTag == 'add'?'添加课时':'修改课时'"
			:footer="null"
			width="900px"
			class="add-class-hours-modal"
		>
			<a-tabs v-model:activeKey="activeKey" type="card" @change="handleChange">
				<a-tab-pane key="1" tab="课时" forceRender>
					<addClassHours ref="addClassHoursRef" @handlerSelect="handlerSelect"
								   @handlerUpSelect="handlerUpSelect" @handlerEx="handlerEx"
								   @handlerExs="handlerExs"></addClassHours>
				</a-tab-pane>
				<a-tab-pane key="2" tab="作业" forceRender>
					<exList ref="exListRef" @handlerEx="handlerEx"></exList>
				</a-tab-pane>
				<a-tab-pane key="3" tab="章节测验" forceRender>
					<exLists  ref="exListsRef" @handlerExs="handlerExs"></exLists>
				</a-tab-pane>
			</a-tabs>
			<div class="footer-btns">
				<a-button @click="handleCancel">取消</a-button>
				<a-button type="primary" @click="handleOk">确定</a-button>
			</div>
		</a-modal>

		<resListDialog ref="resListDialogRef" @handleSelectFile="handleSelectFile"></resListDialog>
		<resourceUpload ref="resourceUploadRef" @onSub="onSub"></resourceUpload>
	</div>

</template>

<script setup>
import {ref, reactive, watch, defineProps, defineEmits} from 'vue'
import {message} from 'ant-design-vue'
import addClassHours from './addClassHours.vue'
import resListDialog from './resListDialog.vue'
import resourceUpload from './resourceUpload.vue'
import exList from './exList.vue'
import exLists from './exLists.vue'
import {add, edit as editApi} from '@/api/hour/index'

const addClassHoursRef = ref(null)
const resListDialogRef = ref(null)
const resourceUploadRef = ref(null)
const exListRef = ref(null)
const exListsRef = ref(null)
const exListRefData = ref(null)
const exListsRefData = ref(null)
const exListRefCount = ref(0)
const exListsRefCount = ref(0)

const item1 = ref(0)
const item2 = ref(0)
const item3 = ref(0)

const activeKey = ref('1')
const modeTag = ref('add')

const emit = defineEmits(['update:visible', 'ok', 'onAddChapter'])

const props = defineProps({
	//课程id
	courseInfoId: {
		type: Number,
		required: true,
		default: null
	},
	// visible: Boolean
})

const form = ref({
	id: '',
	courseId: ''
})


const modalVisible = ref(false)
// watch(
// 	() => props.visible,
// 	(v) => {
// 		modalVisible.value = v
// 	}
// )
// watch(modalVisible, (v) => {
// 	emit('update:visible', v)
// })

const open = () => {
	exListRefCount.value = 0
	exListsRefCount.value = 0
	modalVisible.value = true
	 item1.value = 0
	 item2.value = 0
	 item3.value = 0
	activeKey.value = '1'
	modeTag.value = 'add'
	nextTick(() => {
		addClassHoursRef.value.reset()
		addClassHoursRef.value.open()
		item1.value = item1.value+1


		exListRef.value.handleReset()
		exListsRef.value.handleReset()


		console.log("有木有 1 ",exListRef.value)
		console.log("有木有 2 ",exListsRef.value)
	})
}
const handleChange = (activeKey) => {
	nextTick(() => {
		console.log('选择activeKey', activeKey)
		if (activeKey == '1' && addClassHoursRef.value) {
			if (modeTag.value == 'add') {
				// addClassHoursRef.value.reset()
				addClassHoursRef.value.open()
			}
			if (modeTag.value == 'edit') {
				if(item1.value == 1){
					addClassHoursRef.value.edit()
				}

			}
		}
		if (activeKey == '2' && exListRef.value) {
				if (modeTag.value == 'add') {
					exListRef.value.open()
				}
				if (modeTag.value == 'edit') {
					console.log('走没走1', exListRefData.value)
					if(item2.value == 0){
						if(exListRefData.value && exListRefData.value[0]&& exListRefData.value[0].relateId){
							exListRef.value.edit(exListRefData.value[0].relateId)
						}else if(exListRefData.value && exListRefData.value[0]&& exListRefData.value[0].id){
							exListRef.value.edit(exListRefData.value[0].id)
						}
					}


					console.log('走没走2', exListRefData.value)
					if(exListRefData.value  == null){
						exListRef.value.open()
					}
					item2.value = item2.value+1
				}

		}
		if (activeKey == '3' && exListsRef.value) {
				if (modeTag.value == 'add') {
					exListsRef.value.open()
				}
				if (modeTag.value == 'edit') {
					if(item3.value == 0){
						if(exListsRefData.value && exListsRefData.value[0]&& exListsRefData.value[0].relateId){
							exListsRef.value.edit(exListsRefData.value[0].relateId)
						}else if(exListsRefData.value && exListsRefData.value[0]&& exListsRefData.value[0].id){
							exListsRef.value.edit(exListsRefData.value[0].id)
						}
					}


					if(exListsRefData.value  == null){
						exListsRef.value.open()
					}
					item3.value = item3.value+1
				}
		}
	})

}
const setData = (data) => {
	console.log('进来的章节信息添加的时候', data)
	form.value.id = data.id
}
const edit = (item) => {
	exListRefCount.value = 0
	exListsRefCount.value = 0
	activeKey.value = '1'
	modalVisible.value = true
	item1.value = 0
	item2.value = 0
	item3.value = 0
	console.log('修改进来的', item)
	form.value.id = item.id
	form.value.chapterId = item.courseId

	modeTag.value = 'edit'
	console.log('有没有', addClassHoursRef.value)
	nextTick(() => {
		addClassHoursRef.value.edit(item)
		item1.value = item1.value+1
	})

}
const handlerEx = (item) => {
	console.log('有没有1  ', item)
	exListRefData.value = item
	// exListRef.value.setData(item)
}
const handlerExs = (item) => {
	exListsRefData.value = item
	// exListsRef.value.setData(item)
}
const handlerSelect = () => {
	resListDialogRef.value.open()
}
const handlerUpSelect = () => {
	resourceUploadRef.value.open()
}
const handleSelectFile = (item) => {
	resListDialogRef.value.close()
	addClassHoursRef.value.setFile(item)
}
const onSub = (list) => {

	console.log('上传的id', list)
	// resListDialogRef.value.close()
	addClassHoursRef.value.setFile(list)

	// addClassHoursRef.value.close()
}
const handleOk = () => {


	addClassHoursRef.value.getData((data) => {

		let exlist = exListRefData.value
		if (exlist && exlist.length == 1) {
			if(exlist[0].id){
				data.courseRelates.push({funcType: 4, relateId: exlist[0].id})
			}else if(exlist[0].relateId){
				data.courseRelates.push({funcType: 4, relateId: exlist[0].relateId})
			}
		}
		let exlists = exListsRefData.value
		if (exlists &&exlists.length == 1) {
			if(exlists[0].id){
				data.courseRelates.push({funcType: 5, relateId: exlists[0].id})
			}else if(exlists[0].relateId){
				data.courseRelates.push({funcType: 5, relateId: exlists[0].relateId})
			}
		}

		//设置章节id
		data.chapterId = form.value.id
		// props.courseInfoId
		console.log('提交的参数', data)
		if (modeTag.value == 'add') {
			add(data).then((res) => {
				modalVisible.value = false
				emit('onAddChapter')
				resourceUploadRef.value.close()
			}).catch((err) => {

			})
		}
		if (modeTag.value == 'edit') {
			data.id = form.value.id
			data.chapterId = form.value.chapterId
			editApi(data).then((res) => {
				modalVisible.value = false
				emit('onAddChapter')
			}).catch((err) => {

			})
		}

	})
	// formRef.value.validate().then(() => {
	// 	emit('ok', { ...form })
	// 	modalVisible.value = false
	// })
}

function handleCancel() {
	modalVisible.value = false
}

defineExpose({open, setData, edit})
</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>