OnlineEducation-teacher-front/src/views/myResource/file/dialog/unzipFile/Dialog copy.vue

<template>
	<a-modal
		title="解压缩文件"
		v-model:visible="visible"
		:maskClosable="false"
		:closable="false"
		@afterVisibleChange="handleVisibleChange"
		@cancel="handleDialogClose"
	>
		<div class="unzip-tree-wrapper" v-if="unzipMode === 2">
			<div class="target-path">
				<span class="label">目标路径：</span>
				<a-input v-model:value="targetPath" readonly size="small" />
			</div>

			<a-spin :spinning="loading">
				<a-tree
					:tree-data="fileTree"
					:field-names="{ children: 'children', title: 'label', key: 'id' }"
					highlight-current
					:expandedKeys="defaultExpandedKeys"
					@update:expandedKeys="(val) => (defaultExpandedKeys = val)"
					node-key="id"
					@select="handleNodeClick"
					:showLine="true"
				>
					<template #title="{ dataRef }">
						<span class="custom-tree-node">
							<span class="label">{{ dataRef.label }}</span>
							<a-button type="link" size="small" class="add-folder-btn" @click.stop="handleAddFolderBtnClick(dataRef)">
								新建文件夹
							</a-button>
						</span>
					</template>
				</a-tree>
			</a-spin>
		</div>
		<div class="unzip-text" v-else>
			<a-spin />
			正在解压缩，请稍等片刻...
		</div>

		<template #footer>
			<template v-if="unzipMode === 2">
				<a-button @click="handleDialogClose">取 消</a-button>
				<a-button type="primary" :loading="sureBtnLoading" @click="handleDialogSure"> 确 定 </a-button>
			</template>
		</template>
	</a-modal>
</template>

<script setup>
	import { ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { getFoldTree, unzipFile } from '@/api/myResource/file'
	const { proxy } = getCurrentInstance()

	const props = defineProps({
		unzipMode: Number,
		userFileId: String,
		callback: Function
	})

	const visible = ref(false)
	const targetPath = ref('/')
	const fileTree = ref([])
	const loading = ref(false)
	const defaultExpandedKeys = ref([])
	const sureBtnLoading = ref(false)

	const handleDialogClose = () => {
		visible.value = false
		props.callback('cancel')
	}

	const handleVisibleChange = (val) => {
		if (val) {
			if (props.unzipMode === 2) {
				initFileTree()
			} else {
				handleUnzipFile()
			}
		}
	}

	const initFileTree = async (id) => {
		try {
			loading.value = true
			const res = await getFoldTree()
			if (res.success) {
				fileTree.value = [res.data]
				defaultExpandedKeys.value = id ? [id] : [fileTree.value[0].id]
			} else {
				message.error(res.message)
			}
		} finally {
			loading.value = false
		}
	}

	const handleNodeClick = (selectedKeys, { node }) => {
		targetPath.value = node.filePath || '/'
	}

	const handleAddFolderBtnClick = async (data) => {
		const result = await proxy.$openDialog.addFolder({
			filePath: data.filePath || '/'
		})
		if (result === 'confirm') {
			initFileTree(data.id)
		}
	}

	const handleUnzipFile = async () => {
		try {
			sureBtnLoading.value = true
			const reqData = {
				unzipMode: props.unzipMode,
				userFileId: props.userFileId,
				...(props.unzipMode === 2 ? { filePath: targetPath.value } : {})
			}

			const res = await unzipFile(reqData)
			if (res.success) {
				message.success('解压成功')
				visible.value = false
				props.callback('confirm')
			} else {
				message.error(res.message)
			}
		} finally {
			sureBtnLoading.value = false
		}
	}

	const handleDialogSure = () => {
		handleUnzipFile()
	}

	defineExpose({
		visible
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';

	.unzip-tree-wrapper {
		height: 300px;
		overflow: auto;

		.target-path {
			display: flex;
			align-items: center;
			margin-bottom: 16px;

			.label {
				width: 80px;
			}

			.ant-input {
				flex: 1;
			}
		}

		.custom-tree-node {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.add-folder-btn {
				display: none;
			}

			&:hover .add-folder-btn {
				display: inline-block;
			}
		}
	}

	.unzip-text {
		padding: 40px 0 64px 0;
		text-align: center;

		.ant-spin {
			margin-right: 8px;
		}
	}

	.ant-btn-primary {
		&,
		&:hover,
		&:focus {
			background-color: @primary-color;
			border-color: @primary-color;
		}
	}

	.ant-tree-node-selected {
		background-color: @primary-color;
	}
</style>