修改

package.json

@@ -31,6 +31,7 @@
     "vue": "2.6.10",
     "vue-count-to": "^1.0.13",
     "vue-json-viewer": "^2.2.21",
+    "vue-pdf": "^4.3.0",
     "vue-router": "3.0.6",
     "vue-seamless-scroll": "^1.1.23",
     "vue2-org-tree": "^1.3.5",

src/views/newBagDetails/components/baggageStory.vue

@@ -4,7 +4,7 @@
       <el-table height="400" :data="storyTable" border style="width: 100%">
         <el-table-column prop="luggageDescribe" label="行李服务记录">
         </el-table-column>
-        <el-table-column prop="createtime" label="行李创建时间">
+        <el-table-column prop="createtime" label="创建时间">
         </el-table-column>
       </el-table>
     </div>

src/views/newBagDetails/index.vue

@@ -203,6 +203,9 @@ export default {
               if (item.columnName == key) {
                 item.value = datasObj[key] != 0 && datasObj[key] != 1 ? datasObj[key] : datasObj[key] == 0 ? 'N' : 'Y'
               }
+              if (item.columnName == 'activeState' && key == 'activeState') {
+                item.value = datasObj[key] == 0 ? 'Y' : 'N'
+              }
             })
           }
           this.setBagInfo()

src/views/newQueryAdvance/index.vue

@@ -36,8 +36,8 @@
                     <el-date-picker v-model="carrierFlightsDate" size="small" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" :clearable="false" @keyup.esc.native="dialogFocus" />
                   </template>
                   <template v-else-if="item.prop === 'specialType'">
-                    <el-select v-model="form.specialType" size="small" class="multiple-select" multiple collapse-tags filterable allow-create default-first-option clearable @keyup.esc.native="dialogFocus">
-                      <el-option v-for="option in baggageTypeList" :key="option.specialType" :label="option.specialType" :value="option.specialType" />
+                    <el-select v-model="form.specialType" size="small" class="multiple-select" collapse-tags filterable allow-create default-first-option clearable @keyup.esc.native="dialogFocus">
+                      <el-option v-for="option in baggageTypeList" :key="option.value" :label="option.label" :value="option.value" />
                     </el-select>
                   </template>
                   <template v-else-if="
@@ -51,13 +51,13 @@
                     </el-select>
                   </template>
                   <template v-else-if="item.prop === 'No_BSM'">
-                    <el-select v-model="form.noBSM" size="small" clearable @keyup.esc.native="dialogFocus">
+                    <el-select v-model="form.No_BSM" size="small" clearable @keyup.esc.native="dialogFocus">
                       <el-option label="是" value="1" />
                       <el-option label="否" value="0" />
                     </el-select>
                   </template>
                   <template v-else-if="item.prop === 'activeState'">
-                    <el-select v-model="form.loadType" size="small" clearable @keyup.esc.native="dialogFocus">
+                    <el-select v-model="form.activeState" size="small" clearable @keyup.esc.native="dialogFocus">
                       <el-option label="未激活" value="0" />
                       <el-option label="已激活" value="1" />
                     </el-select>
@@ -220,7 +220,52 @@ export default {
           hintVisible: false,
         },
       ],
-      baggageTypeList: [],
+      baggageTypeList: [
+        {
+          value: 'AVIH',
+          label: '装笼动物',
+        },
+        {
+          value: 'CREW',
+          label: '乘务员行李',
+        },
+        {
+          value: 'FRAG',
+          label: '易碎行李',
+        },
+        {
+          value: 'HVY',
+          label: '重型行李标识',
+        },
+        {
+          value: 'PRIO',
+          label: '优先行李',
+        },
+        {
+          value: 'RUSH',
+          label: '无人行李',
+        },
+        {
+          value: 'SCON',
+          label: '急转行李',
+        },
+        {
+          value: 'SPEQ',
+          label: '运动装备',
+        },
+        {
+          value: 'VIP',
+          label: 'VIP行李',
+        },
+        {
+          value: 'WCHR',
+          label: '轮椅',
+        },
+        {
+          value: 'WFAP',
+          label: '武器枪支等',
+        }
+      ],
       dataContent: [],
       rules: {
         // 机器信息表单验证

src/views/previewPage/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="home">
+  <div v-loading="loading" class="home">
     <div v-if="fileType == 'xlsx'" style="overflow-y: scroll;" class="home_content">
       <div v-html="tableau"></div>
     </div>
-    <div v-else-if="fileType == 'pdf'" class="home_content">
-      <iframe :src="pdfSrc" height="100%" width="100%" frameborder="0"></iframe>
+    <div v-else-if="fileType == 'pdf'" style="overflow-y: scroll;" class="home_content">
+      <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf>
     </div>
     <div v-else-if="fileType == 'docx' || fileType == 'doc'" style="overflow-y: scroll;" class="home_content">
       <div ref="file"></div>
@@ -15,18 +15,23 @@
 <script>
 import axios from 'axios'
 import * as XLSX from 'xlsx'
+import pdf from 'vue-pdf'
 export default {
+  components: { pdf },
   data () {
     return {
+      loading: false,
       tableau: null,
       fileType: '',
       pdfSrc: '',
-      docxSrc: ''
+      docxSrc: '',
+      numPages: 1
     }
   },
   created () {
     const { query } = this.$route
     if (!query) return
+    this.loading = true
     const { fileName } = query
     this.getFileType(fileName)
   },
@@ -38,6 +43,10 @@ export default {
         let workbook = XLSX.read(new Uint8Array(data), { type: "array" }); // 解析数据
         var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
         this.tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染
+        this.loading = false
+      }).catch(err => {
+        this.loading = false
+        console.error(err)
       })
     },
     getDocxData (fileName) {
@@ -45,12 +54,17 @@ export default {
         responseType: 'blob'
       }).then(({ data }) => {
         window.docx.renderAsync(data, this.$refs.file) // 渲染到页面
+        this.loading = false
+      }).catch(err => {
+        this.loading = false
+        console.error(err)
       })
     },
     getFileType (dotName) {
       if (dotName.includes('pdf')) {
         this.fileType = 'pdf'
-        this.pdfSrc = './' + dotName
+        // this.loadPDF('./' + dotName)
+        this.getNumPages('./' + dotName)
       } else if (dotName.includes('docx') || dotName.includes('doc')) {
         this.fileType = 'docx' || 'doc'
         this.getDocxData('./' + dotName)
@@ -58,6 +72,17 @@ export default {
         this.fileType = 'xlsx'
         this.getXlxsData('./' + dotName)
       }
+    },
+    getNumPages (url) {
+      const loadingTask = pdf.createLoadingTask(url)
+      loadingTask.promise.then(pdf => {
+        this.pdfSrc = loadingTask
+        this.numPages = pdf.numPages
+        this.loading = false
+      }).catch((err) => {
+        this.loading = false
+        console.error(err)
+      })
     }
   },
 }