活动管理申请表

src/components/makerActivityWord.vue

@@ -0,0 +1,295 @@
+<template>
+    <div id="makerActivityWord">
+      <div id="wordTitle">
+          <div>深圳技师学院</div>
+          <div>创客专项资金项目申请表（创客活动）</div>
+      </div>
+      <div id="table">
+        <div class="han">
+          <div class="lie"><div class="label">活动名称</div><div class="value">{{data['title']}}</div></div>
+          <div class="lie"><div class="label">预算经费</div><div class="value">{{ data['money'] }}</div></div>
+        </div>
+        <div class="han">
+          <div class="lie"><div class="label">负责人</div><div class="value">{{ data['pro_leader'] }}</div></div>
+          <div class="lie"><div class="label">所在部门</div><div class="value">{{ data['className'] }}</div></div>
+          <div class="lie"><div class="label">联系电话</div><div class="value">{{data['phone']}}</div></div>
+        </div>
+        <div class="han">
+          <div class="lie"><div class="label">活动时间</div><div class="value">{{ ActivityTime }}</div></div>
+          <div class="lie"><div class="label">参与学生人数</div><div class="value">{{data['students']}}</div></div>
+        </div>
+        <div class="teacher">
+          <div class="title">活动指导教师</div>
+          <div class="teacherTable">
+            <div class="teacherHan">
+              <div class="teacherLie">姓名</div>
+              <div class="teacherLie">工作单位/部门</div>
+              <div class="teacherLie">活动分工</div>
+            </div>
+            <div class="teacherHan" v-for="(item,index) in JSON.parse(data['course_teacher'])" :key="index">
+              <div class="teacherLie">{{ item['Name'] }}</div>
+              <div class="teacherLie">{{ item['work'] }}</div>
+              <div class="teacherLie">{{ item['takeCharge'] }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="chapters">
+          <div class="chaptersTitle">
+            活动<br/>计划
+          </div>
+          <div class="chaptersValue">
+            {{ JSON.parse(data['chapters'])[0].replace(/<[^>]+>/g,"") }}
+          </div>
+        </div>
+        <div class="chapters">
+          <div class="chaptersTitle">
+            预期<br/>目标
+          </div>
+          <div class="chaptersValue">
+            {{ JSON.parse(data['chapters'])[1].replace(/<[^>]+>/g,"") }}
+          </div>
+        </div>
+        <div class="chapters">
+          <div class="chaptersTitle">
+            活动受<br/>众面
+          </div>
+          <div class="chaptersValue">
+            <span>参与学生范围：</span><br/>
+            {{ JSON.parse(data['chapters'])[2].replace(/<[^>]+>/g,"") }}
+          </div>
+        </div>
+        <div class="chapters">
+          <div class="chaptersTitle">
+            经费<br/>支出<br/>计划
+          </div>
+          <div class="chaptersValue">
+            {{ JSON.parse(data['chapters'])[3].replace(/<[^>]+>/g,"") }}
+          </div>
+        </div>
+        <div class="chapters">
+          <div class="chaptersTitle">
+            所在<br/>部门<br/>意见
+          </div>
+          <div class="opinion">
+            <div class="head">
+              <div class="chapter">
+                负责人签章：
+              </div>
+              <div class="date">
+                年月日
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>备注：如表格不够可顺延或另附页。</div>
+      </div>
+      
+  </template>
+  
+  <script>
+  import { GetTime } from './tool/Date';
+  // import { ActivityWord } from '@/components/tool/getWord';
+      export default {
+        props:['data'],
+        data() {
+          return {
+
+          }
+        },
+        methods:{
+
+        },
+        computed:{
+          ActivityTime(){
+            return GetTime(this.data['begin_at']);
+          }
+        },
+        mounted() {
+          console.log(this.data)
+        },
+      }
+  </script>
+  
+  <style lang="less" scoped>
+  #makerActivityWord{
+    width: 1200px;
+    height: 650px;
+    font-size: 16px;
+    color: black;
+    #wordTitle{
+      width: 100%;
+      height: 70px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 25px;
+      color: black;
+      margin-bottom: 10px;
+    }
+    #table{
+      border: solid 1px black;
+      border-bottom: none;
+      .han{
+        width: 100%;
+        height: 40px;
+        box-sizing: border-box;
+        border-bottom:solid 1px black ;
+        display: flex;
+        &:nth-last-child(1){
+          border-bottom:none;
+        }
+        &:nth-child(2){
+          .lie{
+            height: 100%;
+            .label{
+              width: 200px;
+            }
+            .value{
+              width: 199px;
+            }
+            &:nth-child(2){
+              .label{
+                width: 198px;
+              }
+              .value{
+                width: 200px;
+              }
+            }
+            &:nth-child(3){
+              .value{
+                width: 150px;
+              }
+            }
+          }
+        }
+        .lie{
+          height: 100%;
+          flex: 1;
+          display: flex;
+          div{
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+            color: black;
+          }
+          .label{
+            width: 200px;
+            border-right: solid 1px black;
+          }
+          .value{
+            flex: 1;
+          }
+          &:not(:nth-last-of-type(1)){
+            border-right: solid 1px black;
+            // div{
+            //   border-right:solid 1px black;
+            // }
+          }
+        }
+    }
+    .teacher{
+      border-bottom: solid 1px black;
+      display: flex;
+      width: 100%;
+      .title{
+        width: 70px;
+        min-height: 40px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        writing-mode: vertical-rl;
+        border-right: solid 1px black;
+        font-size: 16px;
+        color: black;
+        padding: 10px 0;
+      }
+      .teacherTable{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        .teacherHan{
+          display: flex;
+          max-height: 40px;
+          border-bottom: solid 1px black;
+          // &:nth-last-child(1){
+          //   border-bottom:none;
+          // }
+          .teacherLie{
+            height: 40px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+            color: black;
+
+            &:nth-child(1){
+              width: 200px;
+              border-right: solid 1px black;
+            }
+            &:nth-child(2){
+              width: 300px;
+              border-right: solid 1px black;
+            }
+            &:nth-child(3){
+              flex: 1;
+            }
+          }
+        }
+      }
+
+    }
+    .chapters{
+      width: 100%;
+      display: flex;
+      min-height: 200px;
+      border-bottom: solid 1px black;
+      .chaptersTitle{
+        min-width: 70px;
+        font-size: 16px;
+        color: black;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        // writing-mode: vertical-rl;
+        border-right: solid 1px black;
+      }
+      .chaptersValue{
+        padding: 5px;
+        font-size: 16px;
+        color: black;
+      }
+      .opinion{
+        width: 100%;
+        position: relative;
+        .head{
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 280px;
+          height: 70px;
+          font-size: 16px;
+          color: black;
+          .chapter{
+            width: 100%;
+            margin-bottom: 10px;
+          }
+          .date{
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+            letter-spacing: 2em;
+          }
+        }
+      }
+    }
+    }
+    
+  }
+  </style>

src/views/activityManage/makerActvity.vue

@@ -274,6 +274,24 @@
       </div>
     </el-dialog>
     <!-- 完结对话框结束 -->
+    <!-- 活动管理word文档预览开始 -->
+    <el-dialog
+      title="提示"
+      :visible.sync="activityWord"
+      width="65%"
+      top="50px"
+      class="endDialog">
+      <div class="addDialogLogo">LOGO</div>
+      <div class="core_dialogue">
+        <makerActivityWord :data="wordData"/>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="getWord()" class="AllDialogBtn">下载</el-button>
+        <el-button @click="activityWord = false" class="AllDialogBtn">取消</el-button>
+      </div>
+
+    </el-dialog>
+    <!-- 活动管理word文档预览结束 -->
     <!-- 分页 -->
     <el-pagination
         @current-change="CurrentChange"
@@ -283,16 +301,16 @@
         class="paginations"
         :total="Page.total">
       </el-pagination>
-
   </div>
 </template>
 
 <script>
 import beUpload from '../../components/tool/beUpload';
+import makerActivityWord from '@/components/makerActivityWord.vue';
 import { ActivityWord } from '@/components/tool/getWord';
-import downloadFile from '@/components/tool/downloadFile.js';
+// import downloadFile from '@/components/tool/downloadFile.js';
     export default {
-      components:{beUpload},
+      components:{beUpload,makerActivityWord},
       data() {
         return {
           loading:false,
@@ -303,7 +321,7 @@ import downloadFile from '@/components/tool/downloadFile.js';
           endDialog:false,  //完结对话框
           auditDialog:false,   //审核对话框
           rejectDialog:false,   //驳回对话框
-
+          activityWord:false,
           options:[],
           options1:[],
           options2:[],
@@ -337,7 +355,8 @@ import downloadFile from '@/components/tool/downloadFile.js';
           progress:{
             value:0,
             show:false
-          }
+          },
+          wordData:{},
         }
       },
       methods:{
@@ -434,12 +453,19 @@ import downloadFile from '@/components/tool/downloadFile.js';
             uid:this.$store.state.userInfo.userid,
             aid:Id
           }).then(res=>{
-            ActivityWord(res.data[0][0])
+            // ActivityWord(res.data[0][0])
+            this.wordData = res.data[0][0];
+            this.activityWord = true;
           }).catch(err=>{
             this.$message.error("错误"+err.message)
           })
           // downloadFile('/file/附件 2：创客专项资金项目申请表（创客活动）.doc',"创客专项资金项目申请表（创客活动）.doc",(_b)=>this.loading = _b);
         },
+
+        //下载申请表
+        getWord(){
+          ActivityWord(this.wordData) 
+        },
              
         audi(row){  // 审核按钮
           this.processTable.Id = row.acId;