feat: pdf预览

2022-03-16 10:21:17 +08:00 · 2022-03-16 10:21:17 +08:00 · 2b89952c95
parent 557aa31fa9
commit 2b89952c95
8 changed files with 152 additions and 41 deletions
--- a/package.json
+++ b/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",
--- a/src/api/mycourse/index.js
+++ b/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,
--- a/src/views/mycourse/courseLearn/PdfView.vue
+++ b/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>
--- a/src/views/mycourse/courseLearn/index.vue
+++ b/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 () {
--- a/src/views/mycourse/mycourseList/TrainingPlan.vue
+++ b/src/views/mycourse/mycourseList/TrainingPlan.vue
@ -9,13 +9,13 @@
          :data="loadDataYear"
          :rowKey="record => record.id"
        >
-          <span slot="trainType" slot-scope="text, record">
-            <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
-            <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
+          <span slot="state" slot-scope="text, record">
+            <a-tag v-if="record.state === 1" 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.status === 3">已完成学习</a>
-            <a v-if="record.status === 4">课程已经结束</a>
-          </span>
+            <a v-if="record.state === 2" @click="handlerContinue(record)">继续学习</a>
+            <a v-if="record.state === 3">已完成学习</a>
+            <a v-if="record.state === 4">课程已经结束</a>
+          </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">
-            <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
-            <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
+          <span slot="state" slot-scope="text, record">
+            <a-tag v-if="record.state === 1" 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.status === 3">已完成学习</a>
-          </span>
+            <a v-if="record.state === 2" @click="handlerContinue(record)">继续学习</a>
+            <a v-if="record.state === 3">已完成学习</a>
+          </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: '课程类别',
-          dataIndex: 'trainType',
-          scopedSlots: { customRender: 'trainType' }
+          title: '状态',
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'state' }
        },
        {
-          title: '学习时间',
-          dataIndex: 'totalCourseHours'
+          title: '发布单位名称',
+          dataIndex: 'orgName'
        },
        {
-          title: '操作',
-          width: '150px',
-          dataIndex: 'action',
-          scopedSlots: { customRender: 'action' }
+          title: '年度',
+          dataIndex: 'year'
        }
+        // {
+        //   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
          }
--- a/src/views/myhome/index.vue
+++ b/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 v-if="item.status === 2" slot="actions" @click="handlerContinue(item)">
+            </a-popconfirm> -->
+            <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
      })
    },
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@ -328,8 +328,7 @@ export default {
      const {
        form: { validateFields },
        state,
-        $message,
-        $notification
+        $message
      } = this

      validateFields(['mobile'], { force: true }, (err, values) => {
--- a/yarn.lock
+++ b/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==