feat: pdf预览

package.json

@@ -32,6 +32,8 @@
         "mockjs2": "1.0.8",
         "moment": "^2.24.0",
         "nprogress": "^0.2.0",
+        "pdfh5": "^1.4.2",
+        "pdfobject": "^2.2.7",
         "qs": "^6.10.3",
         "react-draft-wysiwyg": "^1.14.7",
         "store": "^2.0.12",
@@ -41,6 +43,7 @@
         "vue-cropper": "0.4.9",
         "vue-echarts": "^6.0.2",
         "vue-i18n": "^8.17.4",
+        "vue-pdf-app": "^2.1.0",
         "vue-print-nb": "^1.7.5",
         "vue-quill-editor": "^3.0.6",
         "vue-router": "^3.1.2",

src/api/mycourse/index.js

@@ -10,6 +10,7 @@ const mycourseApi = {
     centerSign: 'project/terminalTrain/sign', // 集中培训签到
     recommendList: 'sys/recommend/listPage', // 系统推荐课程列表
     recommendDetail: 'sys/recommend/detail', // 系统课程推荐详情
+    trainPlanList: '/myCourse/getMyTrainPlanList', // 培训计划列表
     getCourseDetail: 'myCourse/getCourseDetail', // 我的课程详情
     getCourseCatalogue: 'myCourse/getCourseCatalogue', // 获取课程目录
     reqCourseExam: 'testInClass/add', // 课中检测
@@ -18,7 +19,7 @@ const mycourseApi = {
     operationList: 'classwork/list', // 作业列表
     reqOperationDetail: 'classwork/get', // 作业详情
     reqOperationSubmit: 'classwork/submit', // 作业提交
-    getMyCourseList: 'studyStatistics/getMyCourseList' // 课程学习统计
+    getMyCourseList: 'studyStatistics/getMyTrainPlanList' // 课程学习统计
 }
 
 export function reqChangePassword (data) {
@@ -94,6 +95,14 @@ export function reqMyCourseList (params) {
     })
 }
 
+export function reqMyTrainPlanList (params) {
+    return request({
+        url: mycourseApi.trainPlanList,
+        method: 'get',
+        params: params
+    })
+}
+
 export function reqAddMyCourse (params) {
     return request({
         url: mycourseApi.addMyCourse,

src/views/mycourse/courseLearn/PdfView.vue

@@ -0,0 +1,54 @@
+<!-- 作者：cgd  邮箱：349008059@qq.com  时间：2022年03月15日 14:24:51  -->
+<template>
+  <a-modal v-model="visible" width="800px" :title="title">
+    <div id="pdfContainer">
+      <vue-pdf-app
+        style="height: 100vh;"
+        pdf="https://www.gjtool.cn/pdfh5/git.pdf"
+        :config="config"
+        @pages-rendered="pagesRendered"
+      ></vue-pdf-app>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import VuePdfApp from 'vue-pdf-app'
+import 'vue-pdf-app/dist/icons/main.css'
+
+export default {
+  props: {},
+  components: { VuePdfApp },
+  data () {
+    return {
+      title: 'PDF阅读',
+      visible: true,
+      config: {
+        toolbar: false,
+        sidebar: false
+      }
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    initData () {},
+    pagesRendered (pdfApp) {
+      console.log('pdfApp', pdfApp)
+      setTimeout(() => {
+        // pdfApp.pdfViewer.currentScaleValue = '0.8'
+        // pdfApp.bindEvents('change', function (data) {
+        //   console.log('>>>>>>>>>>>>>>.', data)
+        // })
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+::v-deep .ant-modal-body{
+  padding-top: 0;
+  padding-bottom: 0;
+}
+</style>

src/views/mycourse/courseLearn/index.vue

@@ -43,6 +43,8 @@
     </div>
     <!-- 课中考试 -->
     <ExamDialog ref="examDialog" :curVideo="curVideo" @success="answerSuccess"></ExamDialog>
+    <!-- pdf阅读 -->
+    <PdfView></PdfView>
   </a-card>
 </template>
 
@@ -53,6 +55,7 @@ import { videoPlayer } from 'vue-video-player'
 import CourseCatalogue from './CourseCatalogue.vue'
 import SimulationTest from './SimulationTest.vue'
 import ExamDialog from './ExamDialog.vue'
+import PdfView from './PdfView.vue'
 import OperationModule from './OperationModule.vue'
 import StatisticalLearning from './StatisticalLearning.vue'
 import { reqCourseDetail, reqCourseCatalogue } from '@/api/mycourse/index'
@@ -64,6 +67,7 @@ export default {
     SimulationTest,
     ExamDialog,
     StatisticalLearning,
+    PdfView,
     videoPlayer
   },
   data () {

src/views/mycourse/mycourseList/TrainingPlan.vue

@@ -9,13 +9,13 @@
           :data="loadDataYear"
           :rowKey="record => record.id"
         >
-          <span slot="trainType" slot-scope="text, record">
+          <span slot="state" slot-scope="text, record">
-            <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
+            <a-tag v-if="record.state === 1" color="blue">进行中</a-tag>
-            <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
+            <a-tag v-if="record.state === 2" color="red">已过期</a-tag>
           </span>
-          <span slot="action" slot-scope="text, record">
+          <!-- <span slot="action" slot-scope="text, record">
             <a-popconfirm
-              v-if="record.status === 1"
+              v-if="record.state === 1"
               :title="`确定要添加${record.name}课程吗?`"
               ok-text="添加"
               cancel-text="取消"
@@ -23,10 +23,10 @@
             >
               <a>添加课程</a>
             </a-popconfirm>
-            <a v-if="record.status === 2" @click="handlerContinue(record)">继续学习</a>
+            <a v-if="record.state === 2" @click="handlerContinue(record)">继续学习</a>
-            <a v-if="record.status === 3">已完成学习</a>
+            <a v-if="record.state === 3">已完成学习</a>
-            <a v-if="record.status === 4">课程已经结束</a>
+            <a v-if="record.state === 4">课程已经结束</a>
-          </span>
+          </span> -->
         </s-table>
       </a-tab-pane>
       <a-tab-pane key="2" tab="单位培训计划">
@@ -37,13 +37,13 @@
           :data="loadDataUnit"
           :rowKey="record => record.id"
         >
-          <span slot="trainType" slot-scope="text, record">
+          <span slot="state" slot-scope="text, record">
-            <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
+            <a-tag v-if="record.state === 1" color="blue">进行中</a-tag>
-            <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
+            <a-tag v-if="record.state === 2" color="red">已过期</a-tag>
           </span>
-          <span slot="action" slot-scope="text, record">
+          <!-- <span slot="action" slot-scope="text, record">
             <a-popconfirm
-              v-if="record.status === 1"
+              v-if="record.state === 1"
               :title="`确定要添加${record.name}课程吗?`"
               ok-text="添加"
               cancel-text="取消"
@@ -51,9 +51,9 @@
             >
               <a>添加课程</a>
             </a-popconfirm>
-            <a v-if="record.status === 2" @click="handlerContinue(record)">继续学习</a>
+            <a v-if="record.state === 2" @click="handlerContinue(record)">继续学习</a>
-            <a v-if="record.status === 3">已完成学习</a>
+            <a v-if="record.state === 3">已完成学习</a>
-          </span>
+          </span> -->
         </s-table>
       </a-tab-pane>
     </a-tabs>
@@ -61,7 +61,7 @@
 </template>
 
 <script>
-import { reqMyCourseList } from '@/api/mycourse/index'
+import { reqMyTrainPlanList } from '@/api/mycourse/index'
 import { STable } from '@/components'
 export default {
   components: {
@@ -76,30 +76,34 @@ export default {
       // 表头
       columns: [
         {
-          title: '课程名称',
+          title: '计划名称',
           dataIndex: 'name',
-          scopedSlots: { customRender: 'courseName' }
+          scopedSlots: { customRender: 'name' }
         },
         {
-          title: '课程类别',
+          title: '状态',
-          dataIndex: 'trainType',
+          dataIndex: 'state',
-          scopedSlots: { customRender: 'trainType' }
+          scopedSlots: { customRender: 'state' }
         },
         {
-          title: '学习时间',
+          title: '发布单位名称',
-          dataIndex: 'totalCourseHours'
+          dataIndex: 'orgName'
         },
         {
-          title: '操作',
+          title: '年度',
-          width: '150px',
+          dataIndex: 'year'
-          dataIndex: 'action',
-          scopedSlots: { customRender: 'action' }
         }
+        // {
+        //   title: '操作',
+        //   width: '150px',
+        //   dataIndex: 'action',
+        //   scopedSlots: { customRender: 'action' }
+        // }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadDataYear: parameter => {
         const { person } = this.$store.state.user
-        return reqMyCourseList({ personId: person.id, type: 2, pageNum: 1, pageSize: 5 }).then(
+        return reqMyTrainPlanList({ personId: person.id, type: 2, pageNum: 1, pageSize: 5 }).then(
           res => {
             return res
           }
@@ -107,7 +111,7 @@ export default {
       },
       loadDataUnit: parameter => {
         const { person } = this.$store.state.user
-        return reqMyCourseList({ personId: person.id, type: 3, pageNum: 1, pageSize: 5 }).then(
+        return reqMyTrainPlanList({ personId: person.id, type: 3, pageNum: 1, pageSize: 5 }).then(
           res => {
             return res
           }

src/views/myhome/index.vue

@@ -50,7 +50,7 @@
       <a-card :bordered="false" title="培训计划" :style="{ height: '100%' }">
         <a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="pxjhList">
           <a-list-item slot="renderItem" slot-scope="item">
-            <a-popconfirm
+            <!-- <a-popconfirm
               v-if="item.status === 1"
               slot="actions"
               :title="`确定要添加${item.name}课程吗?`"
@@ -59,15 +59,21 @@
               @confirm="handlerAddCourse(item)"
             >
               <a>添加课程</a>
-            </a-popconfirm>
+            </a-popconfirm> -->
-            <a v-if="item.status === 2" slot="actions" @click="handlerContinue(item)">
+            <div slot="actions">
+              <a-tag v-if="item.state === 1" color="blue">进行中</a-tag>
+              <a-tag v-if="item.state === 2" color="red">已过期</a-tag>
+            </div>
+            <!-- <a v-if="item.status === 2" slot="actions" @click="handlerContinue(item)">
               继续学习
             </a>
-            <a v-if="item.status === 3" slot="actions">已完成学习</a>
+            <a v-if="item.status === 3" slot="actions">已完成学习</a> -->
             <a-list-item-meta :title="item.name"></a-list-item-meta>
             <div style="width: 200px;">
               {{ item.startDate | dateFormat }}
             </div>
+            <div style="width: 200px;">{{ item.year }}</div>
+            <div style="width: 200px;">{{ item.orgName }}</div>
           </a-list-item>
         </a-list>
       </a-card>
@@ -169,7 +175,8 @@ import {
   reqAddMyCourse,
   reqCourseCenterList,
   reqRecommendList,
-  reqCenterJoin
+  reqCenterJoin,
+  reqMyTrainPlanList
 } from '@/api/mycourse/index'
 import { noticePage } from '@/api/notice/notice'
 import { getMyexamCount } from '@/api/myexamCount/index.js'
@@ -221,7 +228,7 @@ export default {
     // 培训计划
     getPxjhList () {
       const { person } = this.$store.state.user
-      reqMyCourseList({ personId: person.id, type: 3, pageSize: 2, pageNum: 1 }).then(res => {
+      reqMyTrainPlanList({ personId: person.id, type: 3, pageSize: 2, pageNum: 1 }).then(res => {
         this.pxjhList = res.rows
       })
     },

src/views/user/Register.vue

@@ -328,8 +328,7 @@ export default {
       const {
         form: { validateFields },
         state,
-        $message,
+        $message
-        $notification
       } = this
 
       validateFields(['mobile'], { force: true }, (err, values) => {

yarn.lock

@@ -8821,6 +8821,16 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pdfh5@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.npmmirror.com/pdfh5/-/pdfh5-1.4.2.tgz#4dc501b0312bb912f68c1610228a2ed6feab2a0a"
+  integrity sha512-1BL8HIx/EEZowRPBgas7/WokbGEv1gxKNRmmHSimG113178mKxIBH4pxWBc0tj6d25Sy+EwnlQwv9cUUmQa42w==
+
+pdfobject@^2.2.7:
+  version "2.2.7"
+  resolved "https://registry.npmmirror.com/pdfobject/-/pdfobject-2.2.7.tgz#487ec2ab425c9385f2d80eea5890d632f503cac2"
+  integrity sha512-9ptX0XNCtpYz0hNWz6j/1O4rvJkcPR2rct3UDBhs8ZEosOO67dCEAu4VpBvVJ64SMh8Mrn9pWWODnyLjgFQYgg==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
@@ -9457,6 +9467,13 @@ qs@6.7.0:
   resolved "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+qs@^6.10.3:
+  version "6.10.3"
+  resolved "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@^6.9.1:
   version "6.10.1"
   resolved "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz"
@@ -11633,6 +11650,20 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-pdf-app@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/vue-pdf-app/-/vue-pdf-app-2.1.0.tgz#71c2a91760b629b8e66023a4329c61ce95267058"
+  integrity sha512-eQUeDBdvwxBUvnrojBY+jfaKmwEVwHNC7be6eHreG1yxPSvPFoBzFa93411u15/Ze4NmZCIJKXEWvFz/RM6lxQ==
+  dependencies:
+    vue "^2.6.11"
+
+vue-print-nb@^1.7.5:
+  version "1.7.5"
+  resolved "https://registry.npmmirror.com/vue-print-nb/-/vue-print-nb-1.7.5.tgz#0eaaf9317c233028458e8dbe8aa76603fef63b95"
+  integrity sha512-iNbNyUVRWz0Ha1UTiCKxMPtHLUDGgNI8e8xmD3xqm9RlXIUeX9bT7DgNAfY8vPzqyFRHqGjxLI1rycKH366ziQ==
+  dependencies:
+    vue "^2.6.11"
+
 vue-quill-editor@^3.0.6:
   version "3.0.6"
   resolved "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz"
@@ -11708,7 +11739,7 @@ vue-video-player@^5.0.2:
     videojs-flash "^2.1.0"
     videojs-hotkeys "^0.2.20"
 
-vue@^2.5.17, vue@^2.5.3, vue@^2.6.10:
+vue@^2.5.17, vue@^2.5.3, vue@^2.6.10, vue@^2.6.11:
   version "2.6.14"
   resolved "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==