简历预览页

src/views/reviewers/curriculumVitae/index.vue

@@ -50,7 +50,9 @@
             <el-button type="text">{{
               $t('curriculumVitae:button:importResume')
             }}</el-button>
-            <el-button type="text">{{ $t('common:button:preview') }}</el-button>
+            <el-button type="text" @click.stop="openPreview">{{
+              $t('common:button:preview')
+            }}</el-button>
           </div>
         </div>
         <div class="box" id="info">
@@ -90,6 +92,9 @@
         <agreement />
       </div>
     </div>
+    <el-dialog :visible.sync="visible" fullscreen>
+      <preview />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -105,6 +110,7 @@ import scientificResearchProject from './components/info/scientificResearchProje
 import clinicalTrials from './components/info/clinicalTrials.vue'
 import treatise from './components/info/treatise.vue'
 import other from './components/info/other.vue'
+import preview from './preview.vue'
 export default {
   components: {
     curriculum,
@@ -119,11 +125,13 @@ export default {
     clinicalTrials,
     treatise,
     other,
+    preview,
   },
   data() {
     return {
       activeIndex: 'info',
       isScrollAuto: true,
+      visible: false,
     }
   },
   mounted() {
@@ -166,6 +174,10 @@ export default {
       // 把下标赋值给 vue 的 data
       this.activeIndex = navItem.id
     },
+    // 预览简历
+    openPreview() {
+      this.visible = true
+    },
   },
 }
 </script>

src/views/reviewers/curriculumVitae/preview.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="curriculumVitaePreview">
+    <div class="title">{{ $t('curriculumVitae:preview:title') }}</div>
+    <div class="message">
+      <div class="userInfo">
+        <span>张三</span>
+        <span>医学博士</span>
+        <span>广州医院</span>
+        <span>社会兼职中华医学会XXXXXX</span>
+      </div>
+      <div class="userTitle">
+        <span class="el-icon-first-aid-kit">放射科</span>
+        <span class="el-icon-user">主任</span>
+        <span class="el-icon-medal">副主任医师</span>
+        <span class="el-icon-trophy">副教授</span>
+      </div>
+      <div class="userTel">
+        <span class="el-icon-phone-outline">18616815282</span>
+        <span class="el-icon-message">sicauzhangye@sina.com</span>
+        <span class="el-icon-chat-dot-round">wechat666</span>
+      </div>
+    </div>
+    <div class="message">
+      <div class="title">{{ $t('curriculumVitae:summarize:title') }}</div>
+      <span class="text">
+        哈斯卡基本的喀山举办的卡拉说不定就卡了奥斯本大数据量的把数据来看不打算了解到
+      </span>
+    </div>
+    <div class="message">
+      <el-form class="demo-form-inline">
+        <el-form-item :label="$t('curriculumVitae:specialty:specialty')">
+          <span>放射科</span>
+        </el-form-item>
+        <el-form-item :label="$t('curriculumVitae:specialty:submajor')">
+          <el-tag type="info" v-for="item in ['1', '2', '3']" :key="item">
+            标签三
+          </el-tag>
+        </el-form-item>
+        <el-form-item :label="$t('curriculumVitae:specialty:equipment')">
+          <el-tag type="info" v-for="item in ['1', '2', '3']" :key="item">
+            标签三
+          </el-tag>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="message">
+      <div class="title">
+        {{ $t('curriculumVitae:EducationalExperience:title') }}
+      </div>
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{ background: '#eee', color: '#606266' }"
+      >
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:EducationalExperience:table:time')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:EducationalExperience:table:specialy')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:EducationalExperience:table:degree')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:EducationalExperience:table:school')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:EducationalExperience:table:city')"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="message">
+      <div>{{ $t('curriculumVitae:continuingTraining:title') }}</div>
+      <el-table
+        :data="tableData2"
+        style="width: 100%"
+        :header-cell-style="{ background: '#eee', color: '#606266' }"
+      >
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:continuingTraining:table:time')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:continuingTraining:table:type')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:continuingTraining:table:direction')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:continuingTraining:table:school')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:continuingTraining:table:city')"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="message">
+      <div class="title">
+        {{ $t('curriculumVitae:scientificResearchProject:title') }}
+      </div>
+      <div class="content">
+        <el-form class="demo-form-inline">
+          <el-form-item
+            :label="$t('curriculumVitae:scientificResearchProject:direction')"
+          >
+            <div>direction</div>
+          </el-form-item>
+          <el-form-item
+            :label="$t('curriculumVitae:scientificResearchProject:subject')"
+          >
+            <div>subject</div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="message">
+      <!--临床试验-->
+      <div class="title">
+        {{ $t('curriculumVitae:clinicalTrials:title') }}
+      </div>
+      <el-table
+        :data="tableData3"
+        style="width: 100%"
+        :header-cell-style="{ background: '#eee', color: '#606266' }"
+      >
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:clinicalTrials:table:byStages')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:clinicalTrials:table:criterion')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:clinicalTrials:table:indication')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:clinicalTrials:table:viewingVolumeNum')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:clinicalTrials:table:year')"
+        >
+        </el-table-column>
+      </el-table>
+      <!--GCP证书-->
+      <div class="title">
+        {{ $t('curriculumVitae:clinicalTrials:GCPtitle') }}
+      </div>
+      <el-table
+        :data="tableData4"
+        style="width: 100%"
+        :header-cell-style="{ background: '#eee', color: '#606266' }"
+      >
+        <el-table-column
+          prop="has"
+          :label="$t('curriculumVitae:clinicalTrials:table:hasCertificate')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="time"
+          :label="$t('curriculumVitae:clinicalTrials:table:certificateTime')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="adress"
+          :label="
+            $t('curriculumVitae:clinicalTrials:table:certificateHospital')
+          "
+        >
+        </el-table-column>
+      </el-table>
+      <!--其他相关经历-->
+      <div class="title">
+        {{ $t('curriculumVitae:clinicalTrials:otherTitle') }}
+      </div>
+      <template v-if="true">
+        <div class="message">三的卡上不能打卡上班打卡</div>
+      </template>
+      <div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
+    </div>
+    <div class="message">
+      <div class="title">{{ $t('curriculumVitae:treatise:title') }}</div>
+      <el-table
+        :data="tableData5"
+        style="width: 100%"
+        :header-cell-style="{ background: '#eee', color: '#606266' }"
+      >
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:treatise:table:author')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:treatise:table:name')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          :label="$t('curriculumVitae:treatise:table:publish')"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="message">
+      <div class="title">{{ $t('curriculumVitae:other:title') }}</div>
+      <div class="content">
+        <div>{{ $t('curriculumVitae:other:AH') }}</div>
+        <p>a诺夫卡刷积分八九十快点把手里的v八路军那是的健康蓝色的艰苦拉萨的</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'curriculumVitaePreview',
+  data() {
+    return {
+      tableData: [],
+      tableData2: [],
+      tableData3: [],
+      tableData4: [],
+      tableData5: [],
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.curriculumVitaePreview {
+  max-width: 1200px;
+  margin: auto;
+  .title {
+    font-size: 18px;
+  }
+  .message {
+    padding: 20px 0;
+    border-bottom: 1px solid #eee;
+    .title {
+      font-size: 14px;
+      line-height: 30px;
+      margin-bottom: 10px;
+    }
+    .text {
+      color: #909399;
+    }
+    .content {
+      background-color: #eee;
+      padding: 10px;
+      line-height: 30px;
+      border-radius: 5px;
+    }
+  }
+  .userInfo,
+  .userTitle,
+  .userTel {
+    line-height: 30px;
+    margin-bottom: 15px;
+    span {
+      margin-right: 20px;
+      &:last-child {
+        margin: 0;
+      }
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .userTitle,
+  .userTel {
+    span {
+      display: inline-block;
+      min-width: 80px;
+      border-right: 1px solid #ddd;
+      padding-right: 10px;
+      &::before {
+        margin-right: 5px;
+      }
+      &:last-child {
+        border: none;
+      }
+    }
+  }
+}
+::v-deep .el-tag {
+  margin-right: 10px;
+  &:last-child {
+    margin-right: 0;
+  }
+}
+</style>