notation/src/pc/create/index.tsx

import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import styles from "./index.module.less";
import { NButton, NCheckbox, NModal, NRadio, NSpace, NSpin, useDialog } from "naive-ui";
import { getImage } from "../home/images";
import TheCreate from "./component/the-create";
import { storeData } from "/src/store";
import { api_musicSheetCreationPage, api_musicSheetCreationRemove } from "../api";
import { useRouter } from "vue-router";
import ABCJS from "abcjs";
import { usePageVisibility } from "@vant/use";
import UploadToResources from "../component/upload-to-resources";
import { getQuery } from "/src/utils/queryString";
import { browser } from "/src/utils";

export default defineComponent({
	name: "Create",
	setup() {
		const query = getQuery();
		const dialog = useDialog();
		console.log(storeData.user);
		const forms = reactive({
			teacherId: storeData.user.id,
			page: 1,
			keyword: "",
			rows: 20,
		});
		const data = reactive({
			list: [] as any[],
			addShow: query.addShow ? true : false,
			loading: false,
			finish: false,
			isCreated: false,
			uploadShow: false,
			item: {} as any,
		});
		const getList = async () => {
			data.loading = true;
			const res = await api_musicSheetCreationPage({ ...forms });
			if (res?.code == 200) {
				if (data.isCreated) {
					data.isCreated = false;
					handleOpenNotaion(res.data.rows[0]);
				}
				data.list = data.list.concat(res.data.rows);
				data.finish = res.data.rows.length < forms.rows;
			}
			// 重新登录
			if (res.code === 5000) {
				const browserInfo = browser();
				if (browserInfo.isApp) {
					postMessage({ api: "login" });
				} else {
					// 判断是否在应用中
					window.parent.postMessage(
					{
						api: "onLogin",
					},
					"*"
					);
				}
				return;
			}
			data.loading = false;
		};
		const handleReset = () => {
			forms.page = 1;
			data.finish = false;
			data.list = [];
			getList();
		};
		const pageVisibility = usePageVisibility();
		watch(pageVisibility, (val) => {
			if (val === "visible") {
				handleReset();
			}
		});

		const handleDelte = (item: any) => {
			const checked = ref(true);
			dialog.warning({
				autoFocus: false,
				class: "deleteDialog",
				title: "删除曲谱",
				content: () => (
					<div onClick={() => checked.value = !checked.value}>
						<NRadio checked={checked.value}>同步删除我的资源中的该曲目</NRadio>
					</div>
				),
				// content: () => <div>确认删除当前曲谱?</div>,
				positiveText: "取消",
				positiveButtonProps: {
					type: "default",
				},
				negativeText: "删除",
				negativeButtonProps: {
					type: "primary",
					ghost: false,
				},
				onPositiveClick: () => {},
				onNegativeClick: async () => {
					await api_musicSheetCreationRemove(item.id, checked.value ? 1 : 0);
					handleReset();
				},
			});
		};
		const loadingRef = ref();

		const messageEvent = (params?: any) => {
			// 在老师端里面关闭要刷新
			if (params.data?.api == "reload") {
				handleReset();
			}
		};
		onMounted(() => {
			getList();
			if (loadingRef.value) {
				const obv = new IntersectionObserver((entries) => {
					if (entries[0].isIntersecting) {
						if (data.finish || data.loading) return;
						forms.page++;
						getList();
					}
				});
				obv.observe(loadingRef.value?.$el);
			}

			window.addEventListener("message", (params?: any) => {
				messageEvent(params);
			});
		});

		onUnmounted(() => {
			window.removeEventListener("message", messageEvent);
		});
		const handleOpenNotaion = (item: any) => {
			window.parent.postMessage(
				{
					api: "notation_open",
					url: `${location.origin}/notation/#/?v=1.0.3&id=${item.id}`,
				},
				"*"
			);
		};
		const productSvg = (abc: string, id: string) => {
			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}>
					<div class={styles.itemWrap}>
						<div class={styles.itemWrapBox}>
							<div class={styles.createItem} onClick={() => (data.addShow = true)}>
								<img src={getImage("icon_29.png")} />
								<div>新建乐谱</div>
							</div>
						</div>
					</div>

					{data.list.map((item, index: number) => (
						<div class={styles.itemWrap}>
							<div class={styles.itemWrapBox}>
								<div class={styles.item} onClick={() => handleOpenNotaion(item)}>
									<div class={styles.imgBox} id={"item_" + index}>
										<img
											src={getImage("icon_staff.png")}
											onLoad={() => {
												item.visualObj = productSvg(item.creationConfig, "item_" + index);
											}}
										/>
									</div>
									<div class={styles.itemBottom}>
										<div class={styles.bottombox}>
											<div class={styles.bottomLeft}>
												<div class={styles.itemtitle}>
													<span>{item.name || `未命名乐谱-${index + 1}`}</span>
												</div>
												<div class={styles.time}>{item.updateTime}</div>
											</div>
											{item.uploadStatus !== "YES" && (
												<img
													class={styles.bottomBtn}
													src={getImage("icon_29_2.png")}
													onClick={(e: Event) => {
                            e.stopPropagation();
														data.item = { ...item };
														nextTick(() => {
															data.uploadShow = true;
														});
													}}
												/>
											)}
											<img
												class={styles.bottomBtn}
												src={getImage("icon_29_3.png")}
												onClick={(e: Event) => {
													e.stopPropagation();
													handleDelte(item);
												}}
											/>
										</div>
									</div>
									{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>
					))}
				</div>
				{!data.finish && (
					<NSpace ref={loadingRef} justify="center" style={{ padding: "30px" }}>
						<NSpin size="large" />
					</NSpace>
				)}

				<TheCreate
					v-model:show={data.addShow}
					onCreate={() => {
						data.addShow = false;
					}}
				/>

				<UploadToResources v-model:show={data.uploadShow} item={data.item} onSuccess={() => handleSuccess()} />
			</div>
		);
	},
});