update

src/views/adminCenter/adminScore/detail.vue

@@ -3,8 +3,15 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="top">
-          <el-button type="primary" size="mini" @click="back">返回</el-button>
-          <el-button type="primary" size="mini" @click="add">添加专家</el-button>
+          <template v-if="view === 'list'">
+            <el-button type="primary" size="mini" @click="back">返回</el-button>
+            <el-button type="primary" size="mini" @click="add">添加专家</el-button>
+            <el-button type="success" size="mini" @click="view = 'pdf'">预览PDF</el-button>
+          </template>
+          <template v-if="view === 'pdf'">
+            <el-button type="primary" size="mini" @click="view = 'list'">返回</el-button>
+            <el-button type="success" size="mini" @click="toPdf">生成PDF</el-button>
+          </template>
         </el-col>
         <el-col :span="24" class="down">
           <data-table
@@ -19,7 +26,9 @@
             :useSum="true"
             :sumcol="['verify.score']"
             sumres="avg"
+            v-if="view === 'list'"
           ></data-table>
+          <listpdf :list="list" v-else></listpdf>
         </el-col>
       </el-col>
     </el-row>
@@ -40,6 +49,8 @@
 
 <script>
 const _ = require('lodash');
+import htmlToPdf from '@/unit/htmlToPdf.js';
+import listpdf from './parts/listpdf.vue';
 import scoreInfo from './parts/scoreInfo.vue';
 import dataTable from '@common/src/components/frame/filter-page-table.vue';
 import dataForm from '@common/src/components/frame/form.vue';
@@ -56,6 +67,7 @@ export default {
     dataTable,
     dataForm,
     scoreInfo,
+    listpdf,
   },
   data: function() {
     return {
@@ -95,6 +107,8 @@ export default {
       scoreDialog: false,
       info: {},
       expertList: [],
+      // 当前视图
+      view: 'list',
     };
   },
   async created() {
@@ -161,6 +175,9 @@ export default {
       const res = await this.getExpert({ status: '0' });
       if (this.$checkRes(res)) this.$set(this, 'expertList', res.data);
     },
+    toPdf() {
+      htmlToPdf.downloadPDF(document.querySelector('#listpdf'), '专家意见');
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/adminCenter/adminScore/parts/listpdf.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="listpdf">
+    <el-card v-for="(i, index) in list" :key="`card${index}`" style="margin-bottom:10px">
+      <template #header>
+        <el-row type="flex" :gutter="10">
+          <el-col :span="8">姓名:{{ getProp(i, 'expert_id.expert_name') }}</el-col>
+          <el-col :span="8">电话:{{ getProp(i, 'expert_id.phone') }}</el-col>
+          <el-col :span="8">评分:{{ getProp(i, 'verify.score') }}</el-col>
+        </el-row>
+      </template>
+      <el-row>
+        <el-col :span="24">评分详情:</el-col>
+        <el-col :span="24">
+          <p style="text-indent:35px">{{ getProp(i, 'verify.content') }}</p>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'listpdf',
+  props: {
+    list: Array,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    getProp(data, prop) {
+      return _.get(data, prop);
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>