课件支持Scratch课程案例

修复若干BUG

Author: chengyu2333

api/db/teachingopen_20201101_212958.sql api/db/teachingopen.sqlapi/db/teachingopen_20201101_212958.sql renamed to api/db/teachingopen.sql

@@ -0,0 +1,8 @@
+alter table teaching_course_unit
+    add course_case varchar(256) default '' not null comment '课程作业案例' after course_video;
+INSERT INTO sys_permission ( id, parent_id, name, perms_type, component, url, sort_no, menu_type, is_leaf, is_route, keep_alive, create_by, del_flag, hidden, create_time, status, always_show, internal_or_external )
+ VALUES ( '1384345850621280257', '1249217230806978561', 'Python', 1, 'layouts/IframePageView', '{{ window._CONFIG[''webURL''] }}/python/index.html', 2.0, 1, true, true, false, 'admin', 0, false, '2021-04-20 11:19:05', 1, false, true )
+
+INSERT INTO sys_role_permission ( id, role_id, permission_id ) VALUES ( '1384346075054292993', 'f6817f48af4fb3af11b9e8bf182f618b', '1384345850621280257' )
+INSERT INTO sys_role_permission ( id, role_id, permission_id ) VALUES ( '1384346847716392961', '1252532277234982913', '1384345850621280257' )
+INSERT INTO sys_role_permission ( id, role_id, permission_id ) VALUES ( '1384346952469135361', '1252532323347161090', '1384345850621280257' )

api/db/update2.2.sql

@@ -82,6 +82,10 @@ public class TeachingCourseUnit implements Serializable {
 	@Excel(name = "课程视频", width = 15)
     @ApiModelProperty(value = "课程视频")
     private java.lang.String courseVideo;
+    /**课程案例*/
+    @Excel(name = "课程案例", width = 15)
+    @ApiModelProperty(value = "课程案例")
+    private java.lang.String courseCase;
 	/**课件PPT*/
 	@Excel(name = "课件PPT", width = 15)
     @ApiModelProperty(value = "课件PPT")

api/jeecg-boot-module-system/src/main/java/org/jeecg/modules/teaching/entity/TeachingCourseUnit.java

@@ -11,6 +11,7 @@
   <script src="../js/common.js"></script>
   <script>
     var workId = urlParams('workId')
+    var workUrl = urlParams('workUrl')
     window.scratchConfig = {
               stageArea: {
         scale: 1,
@@ -44,11 +45,18 @@
         window.vm = vm
       },
       handleDefaultProjectLoaded: () => {
-        getWorkInfo(workId, function (info) {
-          window.scratch.loadProject(info.workFileUrl, () => {
+        if(workUrl){
+          window.scratch.loadProject(workUrl, () => {
             vm.runtime.start()
           })
-        })
+        }
+        if(workId){
+          getWorkInfo(workId, function (info) {
+            window.scratch.loadProject(info.workFileUrl, () => {
+              vm.runtime.start()
+            })
+          })
+        }
       }
     }
   </script>

web/public/scratch3/player.html

@@ -3,25 +3,38 @@
     <a-list :grid="{ gutter: 24, lg: 3, md: 1, sm: 1, xs: 1 }" :dataSource="dataSource">
       <a-list-item slot="renderItem" slot-scope="item, index">
         <a-card :hoverable="true">
-
           <!-- <template class="ant-card-extra" slot="extra">
             <span class="create-time">{{item.createTime}}</span>
           </template> -->
-
           <a-card-meta>
             <div style="margin-bottom: 3px" slot="title">{{ item.courseName }}</div>
             <div class="meta-cardInfo" slot="description">
-               <router-link v-if="item.showType==1" :to="{ name: 'teaching-mineCourse-courseUnitMap',  query: {id:item.id}}">
-                 <img :src="getQiniuFile(item.courseCover)" height="25px" alt="图片不存在" style="width:100%;height:100%;"/>
+              <router-link
+                v-if="item.showType == 1"
+                :to="{ name: 'teaching-mineCourse-courseUnitMap', query: { id: item.id } }"
+              >
+                <img
+                  :src="getQiniuFile(item.courseCover)"
+                  height="25px"
+                  alt="封面不存在"
+                  style="width: 100%; height: 100%"
+                />
               </router-link>
-               <router-link v-if="item.showType==2" :to="{ name: 'teaching-mineCourse-courseUnitCard',  query: {id:item.id}}">
-                 <img :src="getQiniuFile(item.courseCover)" height="25px" alt="图片不存在" style="width:100%;height:100%;"/>
+              <router-link
+                v-if="item.showType == 2"
+                :to="{ name: 'teaching-mineCourse-courseUnitCard', query: { id: item.id } }"
+              >
+                <img
+                  :src="getQiniuFile(item.courseCover)"
+                  height="25px"
+                  alt="封面不存在"
+                  style="width: 100%; height: 100%"
+                />
               </router-link>
             </div>
           </a-card-meta>
-          <br>
+          <br />
           <span v-html="item.courseDesc" class="article-content"></span>
-
         </a-card>
       </a-list-item>
     </a-list>
@@ -34,15 +47,15 @@ export default {
   components: {},
   data() {
     return {
-      dataSource: []
+      dataSource: [],
     }
   },
   mounted() {
     this.getCourseList()
   },
   methods: {
-    getCourseList: function() {
-      getAction('/teaching/teachingCourse/mineCourse', {}).then(res => {
+    getCourseList: function () {
+      getAction('/teaching/teachingCourse/mineCourse', {}).then((res) => {
         if (res.success) {
           this.dataSource = res.result
         }
@@ -52,17 +65,17 @@ export default {
         this.loading = false
       })
     },
-    getQiniuFile(text){
-          if(!text){
-            // this.$message.warning("未知的文件")
-            return;
-          }
-          if(text.indexOf(",")>0){
-            text = text.substring(0,text.indexOf(","))
-          }
-          return window._CONFIG['qn_base'] + text;
+    getQiniuFile(text) {
+      if (!text) {
+        // this.$message.warning("未知的文件")
+        return
       }
-  }
+      if (text.indexOf(',') > 0) {
+        text = text.substring(0, text.indexOf(','))
+      }
+      return window._CONFIG['qn_base'] + text
+    },
+  },
 }
 </script>
 
@@ -71,8 +84,8 @@ export default {
   .meta-cardInfo {
     zoom: 1;
     margin-top: 16px;
-    .title{
-        margin-right:20px;
+    .title {
+      margin-right: 20px;
     }
     img {
       width: 100%;

web/src/views/account/course/CourseListCard.vue

@@ -1,72 +1,99 @@
 <template>
   <div>
-    <a-modal v-model="visible" :title="unit.unitName" onOk="handleOk" :footer="null" :maskClosable="false" :width="800">
-      <template slot="footer">
-        <a-button key="back" @click="handleCancel">关闭</a-button>
-      </template>
-
+    <j-modal
+      :visible="visible"
+      :title="unit.unitName"
+      @cancel="handleCancel"
+      switchFullscreen
+      :footer="null"
+      :maskClosable="false"
+      :width="800"
+    >
       <div class="video-area">
-        <video :src="getQiniuFile(unit.courseVideo)" controls="true"></video>
+        <a-tabs>
+          <a-tab-pane key="video" tab="视频">
+            <video :src="getQiniuFile(unit.courseVideo)" controls="true"></video>
+          </a-tab-pane>
+          <a-tab-pane key="scratch" tab="案例" v-if="unit.courseCase">
+            <iframe id="player" :src="'/scratch3/player.html?workUrl=' + getQiniuFile(unit.courseCase)"></iframe>
+          </a-tab-pane>
+        </a-tabs>
       </div>
-      <a-divider>本节课作业</a-divider>
+      <a-divider>本节课资料</a-divider>
       <div>
         <a-row :gutter="24">
           <a-col :span="16">
             <a-card size="small" title="课程说明">
-              <div v-html="unit.unitIntro ? unit.unitIntro.replace(/\n/g,'<br>') : ''"></div>
+              <div v-html="unit.unitIntro ? unit.unitIntro.replace(/\n/g, '<br>') : ''"></div>
             </a-card>
           </a-col>
           <a-col :span="8">
             <a-collapse defaultActiveKey="0" :bordered="false">
               <template v-slot:expandIcon="props">
                 <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
               </template>
-              <a-collapse-panel :header="'课后作业'"  :style="customStyle">
-                <a target="_blank" :href="'/scratch'+(unit.courseWorkType===1?'2':'3')+'/index.html?unitId='+unit.id"><a-icon type="edit" />{{unit.unitName}} 去做作业</a>
+              <a-collapse-panel :header="'课后作业'" :style="customStyle">
+                <a
+                  target="_blank"
+                  :href="'/scratch' + (unit.courseWorkType === 1 ? '2' : '3') + '/index.html?unitId=' + unit.id"
+                  ><a-icon type="edit" />{{ unit.unitName }} 去做作业</a
+                >
               </a-collapse-panel>
-              <a-collapse-panel :header="'课程资料'"  :style="customStyle">
-                <a target="_blank" :href="getQiniuFile(unit.coursePpt)"><a-icon type="edit" />{{unit.unitName}} 查看PPT</a>
+              <a-collapse-panel :header="'课程资料'" :style="customStyle">
+                <a target="_blank" :href="getQiniuFile(unit.coursePpt)"
+                  ><a-icon type="edit" />{{ unit.unitName }} 查看资料</a
+                >
               </a-collapse-panel>
             </a-collapse>
           </a-col>
         </a-row>
       </div>
-    </a-modal>
+    </j-modal>
   </div>
 </template>
 <script>
 export default {
   name: 'UnitViewModal',
   data() {
     return {
-      customStyle:
-          'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
+      customStyle: 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
       visible: false,
-      unit: {}
+      unit: {},
+      scratchFrameHref: '',
     }
   },
   methods: {
     handleCancel(e) {
       this.visible = false
     },
-    getQiniuFile(text){
-          if(!text){
-            // this.$message.warning("未知的文件")
-            return;
-          }
-          if(text.indexOf(",")>0){
-            text = text.substring(0,text.indexOf(","))
-          }
-          return window._CONFIG['qn_base'] + text;
+    previewScratch(record) {
+      this.scratchFrameHref = '/scratch3/player.html?workId=' + record.id
+    },
+    getQiniuFile(text) {
+      if (!text) {
+        // this.$message.warning("未知的文件")
+        return
       }
-  }
+      if (text.indexOf(',') > 0) {
+        text = text.substring(0, text.indexOf(','))
+      }
+      return window._CONFIG['qn_base'] + text
+    },
+  },
 }
 </script>
 <style lang="less" scoped>
-.video-area{
-  video{
+.video-area {
+  video {
     width: 100%;
     max-height: 500px;
   }
 }
+#player {
+  border: none;
+  width: 520px;
+  height: 400px;
+  margin: auto;
+  display: block;
+}
 </style>

web/src/views/account/course/modules/UnitViewModal.vue

@@ -83,6 +83,8 @@
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
           <a-divider type="vertical" />
+          <a @click="handleUnit(record)">单元</a>
+          <a-divider type="vertical" />
           <a-dropdown>
             <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
             <a-menu slot="overlay">
@@ -190,6 +192,14 @@
     methods: {
       initDictConfig(){
       },
+      handleUnit(record){
+        this.$router.push({
+          path: '/course/courseUnit',
+          query: {
+            courseId: record.id
+          }
+        })
+      },
     }
   }
 </script>

web/src/views/teaching/TeachingCourseList.vue

@@ -4,7 +4,18 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="课程包名">
+              <j-dict-select-tag type="list" v-model="queryParam.courseId" dictCode="teaching_course,course_name,id" placeholder="请选择课程包"/>
+            </a-form-item>
+          </a-col>
 
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+            </span>
+          </a-col>
         </a-row>
       </a-form>
     </div>
@@ -174,6 +185,14 @@
         return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
       }
     },
+    created(){
+      let courseId = this.$route.query.courseId
+      console.log(courseId);
+      if(courseId){
+        this.queryParam.courseId = courseId
+        this.searchQuery()
+      }
+    },
     methods: {
       initDictConfig(){
       },

web/src/views/teaching/TeachingCourseUnitList.vue

@@ -21,8 +21,8 @@
         </a-form-item>
         <a-form-item label="展示形式" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <a-select placeholder="请选择展示形式" v-decorator="['showType', validatorRules.showType, {initialValue:'1'}]" @change="onShowTypeSelected">
-            <a-select-option value="1">地图</a-select-option>
-            <a-select-option value="2">卡片</a-select-option>
+            <a-select-option :value="1">地图</a-select-option>
+            <a-select-option :value="2">卡片</a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item label="课程封面" :labelCol="labelCol" :wrapperCol="wrapperCol">