模拟数据

src/api/pptOperate.ts

@@ -16,3 +16,12 @@ export const putTeacherChapterKnowledgeMaterial = (data: { id: string; dataJson:
     data
   })
 }
+
+// 获取曲目信息
+export const getMaterialQueryPage = (data: Record<string, any>) => {
+  return httpAxios.axioseRquest({
+    method: "post",
+    url: "/edu-app/material/queryPage",
+    data
+  })
+}

src/views/Editor/CanvasTool/index.vue

@@ -226,7 +226,7 @@
         "
       />
     </Modal>
-    <Modal
+    <!--<Modal
       :contentStyle="{
         width: '70%',
         minWidth: '1200px',
@@ -246,6 +246,26 @@
           }
         "
       />
+    </Modal> -->
+    <Modal
+      :contentStyle="{
+        width: '800px',
+        height: '600px',
+        boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.08)',
+        borderRadius: '16px',
+        border: '1px solid #DEDEDE',
+        padding: '0'
+      }"
+      v-model:visible="cloudCoachVisible"
+    >
+      <cloudCoachList
+        @update="handleCloudCoach"
+        @close="
+          () => {
+            cloudCoachVisible = false
+          }
+        "
+      />
     </Modal>
   </div>
 </template>

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -1,22 +1,43 @@
 <template>
   <div class="cloudCoachList">
-    <ElButton @click="handleUpdate">点击云教练</ElButton>
+    <el-descriptions title="乐谱">
+      <div>
+        <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+        <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+      </div>
+    </el-descriptions>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ElButton } from "element-plus"
+import { ElDescriptions, ElDescriptionsItem } from "element-plus"
+import { getMaterialQueryPage } from "@/api/pptOperate"
+import { httpAjax } from "@/plugins/httpAjax"
+import { ref } from "vue"
+
 const emit = defineEmits<{
   (event: "update", id: string): void
 }>()
 function handleUpdate() {
   emit("update", "1760123974848413697")
 }
+
+const listData = ref([])
+httpAjax(getMaterialQueryPage, {
+  type: "MUSIC",
+  sourceType: 2,
+  enableFlag: true,
+  page: 1,
+  rows: 20
+}).then(res => {
+  if (res.code === 200) {
+    listData.value = res.data.rows
+  }
+})
 </script>
 
 <style lang="scss" scoped>
 .cloudCoachList {
   width: 100%;
-  height: 200px;
 }
 </style>