课程管理-项目中期

src/views/projectManagement/approvalProcess/midProject.vue

+<template>
+  <div>
+    <el-descriptions label-width="190px" size="small" column="3" title="课题名称及申请人基本情况">
+      <el-descriptions-item span="3" label="课题号">2019kk938</el-descriptions-item>
+      <el-descriptions-item span="3" label="课题名称">母猪的产后护理</el-descriptions-item>
+      <el-descriptions-item span="1.5" label="课题类别">一般课题</el-descriptions-item>
+      <el-descriptions-item span="1.5" label="负责人姓名">金轮法王</el-descriptions-item>
+      <el-descriptions-item span="1.5" label="单位">射水大学</el-descriptions-item>
+      <el-descriptions-item span="1.5" label="学院/部门">射水学院</el-descriptions-item>
+      <el-descriptions-item span="3" label="课题组成员">青龙、白虎、朱雀、玄武、卧龙、凤雏</el-descriptions-item>
+      <el-descriptions-item span="1.5" label="已拨经费（万元）">200</el-descriptions-item>
+      <el-descriptions-item span="1.5" label="已支出经费（万元）">100</el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions label-width="220px" size="small" column="3" title=" ">
+      <el-descriptions-item span="3" label="课题研究工作进展情况">
+        课题研究工作进展情况
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="课题阶段性成果（基本内容、学术价值、社会影响等）">
+        课题阶段性成果（基本内容、学术价值、社会影响等）
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="课题后期拟解决的关键问题">
+        课题后期拟解决的关键问题
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="下阶段研究进展计划">
+        下阶段研究进展计划
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="研究经费支出情况">
+        研究经费支出情况
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="课题申请人所在单位（或部门、院、系等）意见">
+        <div class="item-center">
+          <el-input
+            v-model="opinion"
+            type="textarea"
+            :autosize="{ minRows: 3, maxRows: 10}"
+          />
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="大学生发展研究院意见（中期初审）">
+        <div class="item-center">
+          <el-input
+            v-model="trial"
+            type="textarea"
+            :autosize="{ minRows: 3, maxRows: 10}"
+          />
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="大学生发展研究院意见（中期初审）">
+        <div class="item-center">
+          <el-input
+            v-model="review"
+          />
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="附件材料">
+        <div class="item-center" />
+      </el-descriptions-item>
+      <el-descriptions-item span="3" label="中期检查报告书">
+        <div class="item-center">
+          <el-link type="primary" @click="$emit('download')">下载中期检查报告书</el-link>
+        </div>
+      </el-descriptions-item>
+    </el-descriptions>
+    <div style="display: flex;justify-content: center">
+      <el-button type="primary" style="margin-top: 20px" @click="$emit('Approve')">通过中期申请</el-button>
+      <el-button type="primary" style="margin-top: 20px" @click="$emit('Reject')">驳回中期申请</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import ElDescriptionsItem from '@/components/descriptionsList/e-desc-item.vue'
+import ElDescriptions from '@/components/descriptionsList/e-desc.vue'
+
+export default {
+  name: 'MidProject',
+  components: { ElDescriptions, ElDescriptionsItem },
+  emits: ['download', 'Approve', 'Reject'],
+  data() {
+    return {
+      comments: '',
+      opinion: '',
+      trial: '',
+      review: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.item-center {
+  flex: 1;
+  text-align: center
+}
+</style>

src/views/projectManagement/approvalProcess/projectInitiation.vue

@@ -3,7 +3,7 @@
     <div class="stepBar">
       <el-steps :active="active" align-center finish-status="success">
         <el-step :title="InitialReviewStatus" />
-        <el-step title="中期评审完成" />
+        <el-step :title="InitialReviewStatus1" />
         <el-step title="验收完成" />
       </el-steps>
     </div>
@@ -344,10 +344,17 @@
             </div>
           </el-dialog>
         </el-tab-pane>
+        <el-tab-pane v-if="true" label="项目中期">
+          <MidProject
+            @Approve="Approve1"
+            @Reject="Reject1"
+            @download="console.log('下载成功')"
+          />
+        </el-tab-pane>
         <el-tab-pane v-if="InitialReviewStatus ==='立项审批中（专家立项评审中）'" label="立项评审结果">
           暂无数据
         </el-tab-pane>
-<!--        <el-tab-pane label="月报">
+        <!--        <el-tab-pane label="月报">
           月报
         </el-tab-pane>-->
       </el-tabs>
@@ -365,10 +372,12 @@
 <script>
 import ElDescriptionsItem from '@/components/descriptionsList/e-desc-item.vue'
 import ElDescriptions from '@/components/descriptionsList/e-desc.vue'
+import MidProject from '@/views/projectManagement/approvalProcess/midProject.vue'
 
 export default {
   name: 'ReviewPage',
   components: {
+    MidProject,
     ElDescriptionsItem,
     ElDescriptions
   },
@@ -376,6 +385,7 @@ export default {
     return {
       active: 0,
       InitialReviewStatus: '申报完成',
+      InitialReviewStatus1: '中期申请',
       dialogAddExpert: false,
       // 显示搜索条件
       showSearch: true,
@@ -514,6 +524,16 @@ export default {
     Reject() {
       this.Success()
     },
+    /** 通过项目中期*/
+    Approve1() {
+      this.Success()
+      this.InitialReviewStatus1 = '立项审批中（立项评审专家指定中）'
+      this.active = 2
+    },
+    /** 驳回项目中期*/
+    Reject1() {
+      this.Success()
+    },
     /** 成功*/
     Success() {
       this.$alert(

src/views/reviewExperts/topicList/reviewPage.vue

@@ -4,14 +4,18 @@
       <el-steps :active="active" align-center finish-status="success">
         <el-step>
           <div slot="title">
-            <span v-if="active === 0" class="step-title">立项评审中<a style="color: deeppink">(待本人评审)</a></span>
+            <span v-if="active === 0" class="step-title">立项评审中<a style="color: #bc14ff">(待本人评审)</a></span>
             <span v-else class="step-title">立项评审完成</span>
           </div>
         </el-step>
-        <el-step title="步骤 2" />
+        <el-step>
+          <div slot="title">
+            <span class="step-title">立项评审完成</span>
+          </div>
+        </el-step>
         <el-step title="步骤 3">
           <div slot="title">
-            <span v-if="active === 2" class="step-title">验收评审中<a style="color: deeppink">(待本人评审)</a></span>
+            <span v-if="active === 2" class="step-title">验收评审中<a style="color: #bc14ff">(待本人评审)</a></span>
             <span v-else class="step-title">验收评审完成</span>
           </div>
         </el-step>
@@ -28,7 +32,7 @@
           @click="goBack"
         >返回
         </el-button>
-        <el-tab-pane label="申报信息" name="first">
+        <el-tab-pane id="pdfDom" label="申报信息" name="first">
           <el-descriptions label-width="190px" size="small" column="3" title="课题名称及申请人基本情况">
             <el-descriptions-item span="3" label="课题号">2019kk938</el-descriptions-item>
             <el-descriptions-item span="3" label="课题名称">母猪的产后护理</el-descriptions-item>
@@ -53,12 +57,12 @@
             </el-descriptions-item>
             <el-descriptions-item span="3" label="申报书">
               <div class="item-center">
-                <el-link type="primary">下载申报书</el-link>
+                <el-link type="primary" @click="exportPDF()">下载申报书</el-link>
               </div>
             </el-descriptions-item>
             <el-descriptions-item span="3" label="评审意见表">
               <div class="item-center">
-                <el-link type="primary">下载评审意见表</el-link>
+                <el-link type="primary" @click="exportPDF()">下载评审意见表</el-link>
               </div>
             </el-descriptions-item>
           </el-descriptions>
@@ -201,6 +205,8 @@
 <script>
 import ElDescriptionsItem from '@/components/descriptionsList/e-desc-item.vue'
 import ElDescriptions from '@/components/descriptionsList/e-desc.vue'
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
 
 export default {
   name: 'ReviewPage',
@@ -267,6 +273,57 @@ export default {
       this.$router.go(-1)
     },
 
+    /** 下载报告-PDF */
+    async exportPDF() {
+      html2canvas(document.querySelector('#pdfDom'), {
+        allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
+        backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明
+        useCORS: true, // 是否尝试使用CORS从服务器加载图像
+        dpi: 500, // 导出pdf清晰度
+        scale: window.devicePixelRatio // 用于渲染的比例。默认为浏览器设备像素比率。
+      }
+      ).then(function(canvas) {
+        var imageData = canvas.toDataURL('image/jpeg', 1.0) // html生成图片的数据
+        const canvasWidth = canvas.width // 原本的html页面的宽高
+        const canvasHeight = canvas.height
+        // 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595
+        var a4Width = 595 // A4 宽度
+        var a4Height = (595 / canvasWidth) * canvasHeight // A4总高度
+        const pageHeight = canvasWidth / 595 * 842 // 生成pdf的一页显示html的高度
+        let restHeight = canvasHeight // 未生成pdf的html页面高度，最初是整体的高度
+        var position = 0 // 页面上下偏移的大小
+        /**
+           * 参数1：方向：l：横向  p：纵向
+           * 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px"
+           * 参数3：格式：默认为a4
+           */
+        // eslint-disable-next-line new-cap
+        var pdf = new jsPDF('p', 'pt', 'a4')
+        if (restHeight < pageHeight) { // 当内容未超过pdf一页显示的范围，无需分页
+          /**
+             * 将图像添加到PDF中
+             * 参数1：图片的url
+             * 参数2：图片的格式
+             * 参数3：图片上下偏移的大小
+             * 参数4：原始宽度
+             * 参数5：原始高度
+             */
+          pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height)
+        } else {
+          while (restHeight > 0) {
+            pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height)
+            restHeight -= pageHeight
+            position -= 842
+            if (restHeight > 0) {
+              pdf.addPage() // 在PDF文档中添加新页面
+            }
+          }
+        }
+        pdf.save('导出pdf测试2' + '.pdf')
+      }
+      )
+    },
+
     /** 申报信息 按钮 */
     temporarySaving() {
       this.$message({