|
@@ -38,6 +38,7 @@ import instrumentsNames from "/src/constant/instrmentsNames.json";
|
|
|
import { ALL_NOTES, NOTE_DOT } from "./noteData";
|
|
|
import { Close } from "@vicons/ionicons5";
|
|
|
import { UseDraggable } from "@vueuse/components";
|
|
|
+import { getQuery } from "/src/utils/queryString";
|
|
|
|
|
|
const allPitches = [
|
|
|
"C,,,,",
|
|
@@ -299,7 +300,7 @@ export default defineComponent({
|
|
|
selectTypes: ["note"],
|
|
|
visualTranspose: 0,
|
|
|
wrap: {
|
|
|
- minSpacing: 1.8,
|
|
|
+ minSpacing: 0.1,
|
|
|
maxSpacing: 2.7,
|
|
|
preferredMeasuresPerLine: 4,
|
|
|
},
|
|
@@ -1090,7 +1091,8 @@ export default defineComponent({
|
|
|
}));
|
|
|
});
|
|
|
const getDetailData = async () => {
|
|
|
- const res = await api_musicSheetCreationDetail(route.query.id);
|
|
|
+ const query: any = getQuery();
|
|
|
+ const res = await api_musicSheetCreationDetail(query.id);
|
|
|
if (res?.code == 200) {
|
|
|
data.musicId = res.data.id || "";
|
|
|
data.musicName = res.data.name || "";
|
|
@@ -1219,7 +1221,20 @@ export default defineComponent({
|
|
|
}
|
|
|
abcData.abc.measures.splice(data.active.measureIndex, 1);
|
|
|
} else if (data.deleteMearseType === "finish") {
|
|
|
- abcData.abc.measures.splice(abcData.abc.measures.length - 1, 1);
|
|
|
+ let len = abcData.abc.measures.length;
|
|
|
+ for (let i = len; i > 0; i--) {
|
|
|
+ if (
|
|
|
+ abcData.abc.measures[i - 1].notes.length === 1 &&
|
|
|
+ abcData.abc.measures[i - 1].notes[0].content === "z"
|
|
|
+ ) {
|
|
|
+ if (abcData.abc.measures.length === 1) {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ abcData.abc.measures.splice(i - 1, 1);
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
popup.mearseDeleteShow = false;
|
|
|
handleResetRender();
|
|
@@ -1658,6 +1673,7 @@ export default defineComponent({
|
|
|
v-model:value={popup.speedShow}
|
|
|
trigger="click"
|
|
|
placement="bottom"
|
|
|
+ displayDirective="show"
|
|
|
>
|
|
|
{{
|
|
|
trigger: () => (
|
|
@@ -1993,43 +2009,57 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</CollapseItem>
|
|
|
|
|
|
- <CollapseItem title="谱号" name="clef">
|
|
|
- <div class={styles.wrapBox}>
|
|
|
- {ABC_DATA.clef.map((item) => (
|
|
|
- <div class={styles.topBtn} onClick={() => handleChange({ type: "clef", value: item.value })}>
|
|
|
- <div class={[styles.btnImg]}>
|
|
|
- <TheIcon iconClassName={item.icon} />
|
|
|
- </div>
|
|
|
- <div>{item.name}</div>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- </CollapseItem>
|
|
|
- <CollapseItem title="调号" name="key">
|
|
|
- <div class={styles.wrapBox}>
|
|
|
- {ABC_DATA.key.map((item) => (
|
|
|
- <div class={styles.topBtn} onClick={() => handleChange({ type: "key", value: item.value })}>
|
|
|
- <div class={[styles.btnImg]}>
|
|
|
- <TheIcon iconClassName={item.icon} />
|
|
|
- </div>
|
|
|
- <div>{item.name}</div>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- </CollapseItem>
|
|
|
- </Collapse>
|
|
|
- </div>
|
|
|
- <div class={styles.box}>
|
|
|
- <div class={styles.titleBox}>
|
|
|
- <div class={styles.titleName} style={{ width: "50%", margin: "0 auto" }}>
|
|
|
- <NInput onKeyup={(e: Event) => e.stopPropagation()} v-model:value={data.musicName} placeholder="乐谱名称" />
|
|
|
- </div>
|
|
|
- <div style={{ width: "30%", margin: "10px 0 0 auto" }}>
|
|
|
- <NInput onKeyup={(e: Event) => e.stopPropagation()} v-model:value={data.creator} placeholder="曲谱作者" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="paper"></div>
|
|
|
- <Keys show={data.active ? true : false} onClick={(val) => handleChange(val)} />
|
|
|
+ <CollapseItem title="谱号" name="clef">
|
|
|
+ <div class={styles.wrapBox}>
|
|
|
+ {ABC_DATA.clef.map((item) => (
|
|
|
+ <div
|
|
|
+ class={styles.topBtn}
|
|
|
+ onClick={() => handleChange({ type: "clef", value: item.value })}
|
|
|
+ >
|
|
|
+ <div class={[styles.btnImg]}>
|
|
|
+ <TheIcon iconClassName={item.icon} />
|
|
|
+ </div>
|
|
|
+ <div>{item.name}</div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </CollapseItem>
|
|
|
+ <CollapseItem title="调号" name="key">
|
|
|
+ <div class={styles.wrapBox}>
|
|
|
+ {ABC_DATA.key.map((item) => (
|
|
|
+ <div
|
|
|
+ class={styles.topBtn}
|
|
|
+ onClick={() => handleChange({ type: "key", value: item.value })}
|
|
|
+ >
|
|
|
+ <div class={[styles.btnImg]}>
|
|
|
+ <TheIcon iconClassName={item.icon} />
|
|
|
+ </div>
|
|
|
+ <div>{item.name}</div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </CollapseItem>
|
|
|
+ </Collapse>
|
|
|
+ </div>
|
|
|
+ <div class={styles.box}>
|
|
|
+ <div class={styles.titleBox}>
|
|
|
+ <div class={styles.titleName} style={{ width: "50%", margin: "0 auto" }}>
|
|
|
+ <NInput
|
|
|
+ onKeyup={(e: Event) => e.stopPropagation()}
|
|
|
+ v-model:value={data.musicName}
|
|
|
+ placeholder="曲谱名称"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style={{ width: "30%", margin: "10px 0 0 auto" }}>
|
|
|
+ <NInput
|
|
|
+ onKeyup={(e: Event) => e.stopPropagation()}
|
|
|
+ v-model:value={data.creator}
|
|
|
+ placeholder="曲谱作者"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="paper"></div>
|
|
|
+ <Keys show={data.active ? true : false} onClick={(val) => handleChange(val)} />
|
|
|
|
|
|
{/* <textarea ref={textAreaRef} class={styles.value} id="abc"></textarea> */}
|
|
|
<div id="audio" style={{ opacity: 0 }}></div>
|