上传云端

src/pc/api.ts

@@ -41,8 +41,8 @@ export const api_xmlToAbc = (data: any) => {
 	});
 }
 /** 创建曲谱 */
-export const api_musicSheetSave = (data: any) => {
-	return request.post(`/musicSheet/save`, {
+export const api_musicSheetCreationSaveMusic = (data: any) => {
+	return request.post(`/musicSheetCreation/saveMusic`, {
 		data: data,
 		requestType: 'json'
 	});

src/pc/component/upload-to-resources/index.module.less

@@ -83,6 +83,9 @@
             border-color: #AAAAAA;
             margin: 0 8px;
         }
+        .n-button--loading{
+            opacity: .6;
+        }
     }
 }
 .productIframe{

src/pc/component/upload-to-resources/index.tsx

@@ -1,6 +1,20 @@
-import { defineComponent, onMounted, onUnmounted, reactive, watch } from "vue";
-import { api_musicSheetCreationWav2mp3, api_musicSheetSave, api_subjectList } from "../../api";
-import { NButton, NForm, NFormItem, NIcon, NModal, NSelect, NSpace, useMessage } from "naive-ui";
+import { defineComponent, nextTick, onMounted, onUnmounted, reactive, watch } from "vue";
+import {
+	api_musicSheetCreationWav2mp3,
+	api_musicSheetCreationSaveMusic,
+	api_subjectList,
+} from "../../api";
+import {
+	NButton,
+	NForm,
+	NFormItem,
+	NIcon,
+	NModal,
+	NProgress,
+	NSelect,
+	NSpace,
+	useMessage,
+} from "naive-ui";
 import styles from "./index.module.less";
 import { Close } from "@vicons/ionicons5";
 import { SelectMixedOption } from "naive-ui/es/select/src/interface";
@@ -18,12 +32,13 @@ export default defineComponent({
 			default: () => ({}),
 		},
 	},
-	emits: ["update:show"],
+	emits: ["update:show", "success"],
 	setup(props, { emit }) {
 		const message = useMessage();
 		const model = reactive({
 			subjects: [] as SelectMixedOption[],
 			saveLoading: false,
+			saveProgress: 0,
 			productOpen: false,
 			productIfameSrc: "",
 		});
@@ -56,10 +71,7 @@ export default defineComponent({
 				}
 				imgs = imgs.filter((item: any) => item.base64);
 				if (imgs.length === 3) {
-					message.success("生成成功");
 					handleUploadImg(imgs);
-				} else {
-					message.error("生成失败");
 				}
 				console.log("🚀 ~ 上传之前", [...imgs]);
 			}
@@ -69,6 +81,7 @@ export default defineComponent({
 				const fileName = `${Date.now()}p${i}.png`;
 				const file = dataURLtoFile(imgs[i].base64, fileName);
 				imgs[i].url = await api_uploadFile(file, fileName, () => {});
+				model.saveProgress = (i + 1) * 20;
 			}
 			froms.musicImg = imgs[0]?.url || "";
 			froms.musicSvg = imgs[1]?.url || "";
@@ -105,9 +118,10 @@ export default defineComponent({
 		);
 
 		const createMusic = async () => {
-			await api_musicSheetSave({
+			await api_musicSheetCreationSaveMusic({
+				musicSheetCreationId: props.item.id,
 				musicSheetName: props.item.name || "曲谱名称",
-				musicSheetCategoriesId: 29,
+				musicSheetCategoriesId: "",
 				audioType: "MP3",
 				mp3Type: "MP3",
 				xmlFileUrl: props.item.xml,
@@ -119,7 +133,7 @@ export default defineComponent({
 				background: [
 					{
 						audioFileUrl: froms.mp3,
-						track: "",
+						track: "P1",
 					},
 				],
 				musicImg: froms.musicImg,
@@ -133,18 +147,34 @@ export default defineComponent({
 			froms.mp3 = data;
 		};
 
+        const handleClose = () => {
+            model.saveLoading = false;
+            model.saveProgress = 0;
+        }
+
 		/** 自动生成图片 */
-		const handleAutoProduct = () => {
+		const handleAutoProduct = async () => {
+            model.saveProgress = 0;
 			const xml = props.item.xml;
 			if (!xml) {
 				message.error("没有生成xml文件");
+                handleClose();
 				return;
 			}
+            const res = await fetch(xml)
+            if (res.status > 299 || res.status < 200){
+                message.error("xml文件不存在");
+                handleClose();
+                return;
+            }
 			const origin = /(localhost|192)/.test(location.host)
 				? "https://test.lexiaoya.cn"
 				: location.origin;
 			model.productIfameSrc = `${origin}/instrument/#/product-img?xmlUrl=${xml}&productXmlImg=1`;
 			model.productOpen = true;
+            setTimeout(() => {
+                model.saveProgress = 10;
+            }, 800)
 		};
 
 		const handleUpload = () => {
@@ -153,11 +183,15 @@ export default defineComponent({
 		};
 		const handleSubmit = async () => {
 			await wav2mp3();
+			model.saveProgress = 70;
 			await createMusic();
+			model.saveProgress = 100;
+			emit("success");
+            message.success("上传成功");
 			setTimeout(() => {
 				model.saveLoading = false;
 				emit("update:show", false);
-			}, 1000);
+			}, 300);
 		};
 		return () => (
 			<>
@@ -184,7 +218,7 @@ export default defineComponent({
 									v-model:value={froms.subjectId}
 								></NSelect>
 							</NFormItem>
-							<NFormItem label="是否公开">
+							{/* <NFormItem label="是否公开">
 								<NSpace class={styles.checkbox} wrapItem={false}>
 									<NButton
 										secondary
@@ -203,6 +237,9 @@ export default defineComponent({
 										不公开
 									</NButton>
 								</NSpace>
+							</NFormItem> */}
+							<NFormItem label="上传进度" style={{ display: model.saveLoading ? "" : "none" }}>
+								<NProgress percentage={model.saveProgress} />
 							</NFormItem>
 						</NForm>
 						<div class={styles.btns}>
@@ -213,7 +250,7 @@ export default defineComponent({
 						</div>
 					</div>
 				</NModal>
-                { model.productOpen && <iframe class={styles.productIframe} src={model.productIfameSrc}></iframe>}
+				{model.productOpen && <iframe class={styles.productIframe} src={model.productIfameSrc}></iframe>}
 			</>
 		);
 	},

src/pc/create/index.tsx

@@ -69,9 +69,7 @@ export default defineComponent({
 				// 		<NRadio checked={checked.value}>同步删除我的资源中的该曲目</NRadio>
 				// 	</div>
 				// ),
-				content: () => (
-					<div>确认删除当前曲谱?</div>
-				),
+				content: () => <div>确认删除当前曲谱?</div>,
 				positiveText: "取消",
 				positiveButtonProps: {
 					type: "default",
@@ -130,6 +128,10 @@ export default defineComponent({
 			const a = ABCJS.renderAbc(id, abc, { selectTypes: false, add_classes: true })[0];
 			return a;
 		};
+
+    const handleSuccess = () => {
+      data.list.find((item: any) => item.id === data.item.id).uploadStatus = "YES";
+    }
 		return () => (
 			<div class={styles.wrap}>
 				<div class={styles.wrapBox}>
@@ -162,16 +164,18 @@ export default defineComponent({
 												</div>
 												<div class={styles.time}>{item.updateTime}</div>
 											</div>
-											<img
-												class={styles.bottomBtn}
-												src={getImage("icon_29_2.png")}
-												onClick={() => {
-													data.item = { ...item };
-													nextTick(() => {
-														data.uploadShow = true;
-													});
-												}}
-											/>
+											{item.uploadStatus !== "YES" && (
+												<img
+													class={styles.bottomBtn}
+													src={getImage("icon_29_2.png")}
+													onClick={() => {
+														data.item = { ...item };
+														nextTick(() => {
+															data.uploadShow = true;
+														});
+													}}
+												/>
+											)}
 											<img
 												class={styles.bottomBtn}
 												src={getImage("icon_29_3.png")}
@@ -182,8 +186,12 @@ export default defineComponent({
 											/>
 										</div>
 									</div>
-									<img class={styles.btn} src={getImage("icon_29_4.png")} />
-									<img class={styles.btn} src={getImage("icon_29_5.png")} />
+									{item.uploadStatus === "YES" && (
+										<img class={styles.btn} src={getImage("icon_29_4.png")} />
+									)}
+									{item.uploadStatus === "UPDATE" && (
+										<img class={styles.btn} src={getImage("icon_29_5.png")} />
+									)}
 								</div>
 							</div>
 						</div>
@@ -202,8 +210,7 @@ export default defineComponent({
 					}}
 				/>
 
-				<UploadToResources v-model:show={data.uploadShow} item={data.item} />
-
+				<UploadToResources v-model:show={data.uploadShow} item={data.item} onSuccess={() => handleSuccess()} />
 			</div>
 		);
 	},

src/pc/home/component/file-btn/index.tsx

@@ -74,7 +74,7 @@ export default defineComponent({
 						</div>
 					),
 					key: "upload",
-					disabled: true,
+					// disabled: true,
 				},
 				{
 					label: () => (

src/pc/home/index.tsx

@@ -67,6 +67,7 @@ import { useDocumentVisibility } from "@vueuse/core";
 import request from "/src/utils/request";
 import { api_uploadFile } from "/src/utils/uploadFile";
 import { bufferToWave } from "/src/helpers/parseABC";
+import UploadToResources from "../component/upload-to-resources";
 
 export const initMusic = (total: number): IMeasure[] => {
 	return new Array(total).fill(0).map((item, index) => {
@@ -134,6 +135,7 @@ export default defineComponent({
 			selectMearesShow: false, // 选择小节弹窗
 		});
 		const data = reactive({
+			uploadStatus: "",
 			saveLoading: false,
 			loading: true,
 			drawCount: 0,
@@ -181,6 +183,10 @@ export default defineComponent({
 
 			undoList: [] as any[], // 撤销列表
 			redoList: [] as any[], // 重做列表
+
+			uploadShow: false, // 上传弹窗
+			item: {} as any, // 上传数据
+			uploadClick: false, // 上传点击
 		});
 		const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
 		const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
@@ -693,6 +699,46 @@ export default defineComponent({
 			}
 		};
 
+		const handleClickExit = async () => {
+			if (data.saveLoading) return;
+			const msg = message.loading("保存中...", { duration: 0 });
+			await handleSaveMusic(false);
+			setTimeout(async () => {
+				msg.type = "success";
+				msg.content = "保存成功";
+				setTimeout(() => {
+					msg.destroy();
+				}, 500);
+			}, 300);
+			if (data.uploadStatus !== "NO") {
+				dialog.warning({
+					maskClosable: true,
+					autoFocus: false,
+					class: "deleteDialog saveDialog",
+					title: "温馨提示",
+					content: "是否更新到我的资源？",
+					positiveText: "更新",
+					positiveButtonProps: {
+						type: "primary",
+					},
+					negativeText: "不更新",
+					negativeButtonProps: {
+						type: "default",
+						ghost: false,
+					},
+					onPositiveClick: async () => {
+						data.uploadClick = true;
+						await handleUpdate();
+					},
+					onNegativeClick: () => {
+						handleClose();
+					},
+				});
+			} else {
+				handleClose();
+			}
+		};
+
 		/**
 		 *
 		 * @param key
@@ -717,6 +763,7 @@ export default defineComponent({
 			if (type === "exit") {
 				if (!data.isSave) {
 					clearTimeout(saveTimer);
+					data.uploadClick = false;
 					dialog.warning({
 						maskClosable: true,
 						autoFocus: false,
@@ -732,17 +779,8 @@ export default defineComponent({
 							type: "default",
 							ghost: false,
 						},
-						onPositiveClick: async () => {
-							const msg = message.loading("保存中...");
-							await handleSaveMusic(false);
-							setTimeout(() => {
-								msg.type = "success";
-								msg.content = "保存成功";
-								setTimeout(() => {
-									msg.destroy();
-									handleClose();
-								}, 500);
-							}, 300);
+						onPositiveClick: () => {
+							handleClickExit();
 						},
 						onNegativeClick: () => {
 							handleClose();
@@ -1322,6 +1360,7 @@ export default defineComponent({
 			data.loading = true;
 			const res = await api_musicSheetCreationDetail(query.id);
 			if (res?.code == 200) {
+				data.uploadStatus = res.data.uploadStatus || "";
 				data.musicId = res.data.id || "";
 				data.musicName = res.data.name || "";
 				data.creator = res.data.creator || "";
@@ -1379,7 +1418,7 @@ export default defineComponent({
 						id: query.id,
 						subjectId: data.subjectId,
 						filePath: wavUrl,
-						coverImg: pngUrl
+						coverImg: pngUrl,
 					});
 				} else {
 					const res = await api_musicSheetCreationSave({
@@ -1393,7 +1432,7 @@ export default defineComponent({
 						creationData: JSON.stringify(cleanDeep(abcData.abc)),
 						subjectId: data.subjectId,
 						filePath: wavUrl,
-						coverImg: pngUrl
+						coverImg: pngUrl,
 					});
 					if (res?.data) {
 						const hash = location.hash.split("?");
@@ -1417,6 +1456,7 @@ export default defineComponent({
 			}
 			data.isSave = true;
 			data.saveLoading = false;
+			data.uploadClick = false;
 		};
 		const hanldeInitCreate = () => {
 			const query = getQuery();
@@ -1748,6 +1788,17 @@ export default defineComponent({
 			}
 		};
 
+		const handleUpdate = async () => {
+			const query = getQuery();
+			const res = await api_musicSheetCreationDetail(query.id);
+			if (res.data) {
+				if (res.data.uploadStatus !== "YES") {
+					data.item = { ...res.data };
+					data.uploadShow = true;
+				}
+			}
+		};
+
 		return () => (
 			<>
 				<div class={styles.container}>
@@ -1770,13 +1821,11 @@ export default defineComponent({
 										} else if (["xml"].includes(val)) {
 											handleExport();
 										} else if (val === "upload") {
+											handleUpdate();
 										} else if (["png", "midi", "wav", "down-xml"].includes(val)) {
 											handleDownFile(val);
 										} else if (val === "print") {
 										}
-										//  else if (val === "exit") {
-
-										// }
 									}}
 								/>
 								<div>文件</div>
@@ -2678,6 +2727,18 @@ export default defineComponent({
 				<div class={styles.exportPng}>
 					<div id="exportPng"></div>
 				</div>
+
+				<UploadToResources
+					v-model:show={data.uploadShow}
+					item={data.item}
+					onSuccess={() => {
+						data.uploadStatus = "YES";
+						message.success("上传成功");
+						if (data.uploadClick) {
+							handleClose();
+						}
+					}}
+				/>
 			</>
 		);
 	},