速运行李查询修改

public/config.js

@@ -198,7 +198,8 @@ window.SERVICE_ID = {
   sysDataTabId: 9, //系统设置-数据结构-数据项-表格-增删改
 
   /***-----速运行李------***/
-  expressTransportation: 1803435, // 速运行李数据查询
   expressTransportationUpload: 20034, // 速运行李数据上传
-  expressTransportationNum: 1803434, // 速运行李次数查询
+  expressTransportation: 1803435, // 速运行李数据查询
+  expressTransportationNum: 1803436, // 速运行李数量查询
+  expressTransportationFail: 1803437, // 速运行李数据查询-失败
 }

src/views/upload/index.vue

@@ -38,16 +38,39 @@
         <div class="flex">
           <div class="manageTitle">{{ title2 }}</div>
           <div>
-            <el-date-picker v-model="input" size="small" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
-            </el-date-picker>
-            <el-button class="btn-refresh" type="primary" icon="el-icon-refresh" @click="getStateData" />
+            <el-date-picker
+              v-model="input"
+              size="small"
+              value-format="yyyy-MM-dd"
+              type="date"
+              placeholder="选择日期"
+            />
+            <el-button
+              class="btn-refresh"
+              type="primary"
+              icon="el-icon-refresh"
+              @click="getStateData"
+            />
           </div>
         </div>
         <div class="upload-header-right">
           <!-- <el-date-picker v-model="flightDate" size="small" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" :clearable="false" />
           <el-button class="btn-refresh" type="primary" icon="el-icon-refresh" @click="getStateData" /> -->
-          <el-upload ref="upload" action="#" multiple :loading="exceed" :accept="acceptTypesStr" :show-file-list="false" :http-request="uploadHandler" :before-upload="beforeUpload">
-            <el-button slot="trigger" type="primary" size="small">
+          <el-upload
+            ref="upload"
+            action="#"
+            multiple
+            :loading="exceed"
+            :accept="acceptTypesStr"
+            :show-file-list="false"
+            :http-request="uploadHandler"
+            :before-upload="beforeUpload"
+          >
+            <el-button
+              slot="trigger"
+              type="primary"
+              size="small"
+            >
               上传文件
             </el-button>
           </el-upload>
@@ -55,53 +78,89 @@
       </header>
       <main class="upload-main">
         <div class="upload-main-content flex-wrap">
-          <div v-loading="loading1" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="upload-main-content-left">
-            <el-table :data="capData" :highlight-current-row="true" @cell-click="stateClick" border stripe fit height="100%" class="state-table">
+          <div
+            v-loading="loading1"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+            class="upload-main-content-left"
+          >
+            <el-table
+              :data="capData"
+              border
+              stripe
+              fit
+              height="100%"
+              class="state-table"
+              :cell-class-name="cellClass"
+              @cell-click="stateClick"
+            >
               <el-table-column label="日期">
                 <template slot-scope="scope">
                   <div>{{ currDate(scope.row.thedate) }}</div>
                 </template>
               </el-table-column>
-              <el-table-column width="100" prop="total" label="条数"></el-table-column>
+              <el-table-column
+                width="75"
+                prop="total"
+                label="总数"
+              />
+              <el-table-column
+                width="75"
+                prop="fail"
+                label="失败"
+              />
             </el-table>
           </div>
-          <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="upload-main-content-right">
-            <el-table :data="tableData" border stripe fit height="100%" class="upload-table" :cell-class-name="cellClass">
-              <el-table-column v-for="column in tableColumns" :key="column.key" :prop="column.prop" :label="column.prop">
+          <div
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+            class="upload-main-content-right"
+          >
+            <el-table
+              :data="tableData"
+              border
+              stripe
+              fit
+              height="100%"
+              class="upload-table"
+              :cell-class-name="cellClass"
+            >
+              <el-table-column
+                v-for="column in tableColumns"
+                :key="column.key"
+                :prop="column.prop"
+                :label="column.prop"
+              >
                 <template slot-scope="scope">
-                  <el-tooltip v-if="column.showTooltip" class="item" effect="dark" placement="top-start">
-                    <div slot="content" class="tooltip-content">
-                      {{
-                    formatter(
-                      scope.row,
-                      scope.column,
-                      scope.row[scope.column.property]
-                    )
-                  }}
+                  <el-tooltip
+                    v-if="column.showTooltip"
+                    class="item"
+                    effect="dark"
+                    placement="top-start"
+                  >
+                    <div
+                      slot="content"
+                      class="tooltip-content"
+                    >
+                      {{ formatter(scope.row, scope.column, scope.row[scope.column.property]) }}
                     </div>
                     <div class="tooltip-trigger">
-                      {{
-                    formatter(
-                      scope.row,
-                      scope.column,
-                      scope.row[scope.column.property]
-                    )
-                  }}
+                      {{ formatter(scope.row, scope.column, scope.row[scope.column.property]) }}
                     </div>
                   </el-tooltip>
                   <span v-else>
-                    {{
-                  formatter(
-                    scope.row,
-                    scope.column,
-                    scope.row[scope.column.property]
-                  )
-                }}
+                    {{ formatter(scope.row, scope.column, scope.row[scope.column.property]) }}
                   </span>
                 </template>
               </el-table-column>
               <template #empty>
-                <NoData :image-width="230" :image-height="160" />
+                <NoData
+                  :image-width="230"
+                  :image-height="160"
+                />
               </template>
             </el-table>
           </div>
@@ -134,78 +193,78 @@ const short = getUnit(maxSize)
 export default {
   name: 'Upload',
   components: { NoData },
-  data () {
+  data() {
     return {
       title: '速运行李上传',
       acceptTypesStr: acceptTypesStr,
       totalProgressList: [],
-      limit: 3,
+      limit: 10,
       title2: '速运行李数据',
       flightDate: new Array(2).fill(parseTime(new Date(), '{y}-{m}-{d}')),
       dateRangePickerOptions: {
         onPick: this.dateRangePickHandler,
-        disabledDate: this.dateRangeDisabled,
+        disabledDate: this.dateRangeDisabled
       },
       input: '',
       tableColumns: [
         {
-          prop: 'C0',
+          prop: 'C0'
         },
         {
-          prop: 'C1',
+          prop: 'C1'
         },
         {
-          prop: 'C2',
+          prop: 'C2'
         },
         {
-          prop: 'C3',
+          prop: 'C3'
         },
         {
-          prop: 'C4',
+          prop: 'C4'
         },
         {
-          prop: 'C5',
+          prop: 'C5'
         },
         {
-          prop: 'C6',
+          prop: 'C6'
         },
         {
-          prop: 'C7',
+          prop: 'C7'
         },
         {
-          prop: 'C8',
+          prop: 'C8'
         },
         {
-          prop: 'C9',
+          prop: 'C9'
         },
         {
-          prop: 'createtime',
+          prop: 'createtime'
         },
         {
-          prop: 'message',
-          showTooltip: true,
+          prop: 'message'
         },
         {
           prop: 'sendResult',
-          showTooltip: true,
-        },
+          showTooltip: true
+        }
       ],
       tableData: [],
       stateData: [],
       loading: false,
-      loading1: false
+      loading1: false,
+      currentCell: null
     }
   },
   computed: {
-    currentProgressNum () {
+    currentProgressNum() {
       return this.totalProgressList.reduce((prevCount, currentProgress) => {
         return currentProgress.state > 0 ? prevCount : prevCount + 1
       }, 0)
     },
-    exceed () {
+    exceed() {
       return this.currentProgressNum >= this.limit
     },
-    currDate () {
+    currDate() {
       return function (time) {
         if (time) {
           return parseTime(new Date(time), '{y}-{m}-{d} {h}:{m}:{s}')
@@ -214,9 +273,9 @@ export default {
         }
       }
     },
-    capData () {
+    capData() {
       const val = this.input
-      return this.stateData.filter(data => !val || data.thedate && data.thedate.includes(val))
+      return this.stateData.filter(data => !val || (data.thedate && data.thedate.includes(val)))
     }
   },
   // watch: {
@@ -228,37 +287,31 @@ export default {
   //     immediate: true,
   //   },
   // },
-  created () {
+  created() {
     this.getStateData()
   },
   methods: {
-    beforeUpload (file) {
+    beforeUpload(file) {
       const progress = this.getProgress(file)
       if (progress && progress.state === 0) {
         this.$message.warning(`${file.name} 上传中，请勿重复上传`)
         return
       }
       if (this.exceed) {
-        this.$message.warning(
-          `${file.name} 上传出错：超出最大同时上传数量，最多同时上传 ${this.limit} 个文件`
-        )
+        this.$message.warning(`${file.name} 上传出错：超出最大同时上传数量，最多同时上传 ${this.limit} 个文件`)
       }
       const extensionName = file.name.split('.').pop()
       const acceptExtention = acceptTypes.includes(extensionName)
       if (!acceptExtention) {
-        this.$message.warning(
-          `${file.name} 上传出错：上传文件只能是 ${acceptTypes.join('/')} 格式`
-        )
+        this.$message.warning(`${file.name} 上传出错：上传文件只能是 ${acceptTypes.join('/')} 格式`)
         return false
       }
       if (file.size > maxSize) {
-        this.$message.warning(
-          `${file.name} 上传出错：上传文件大小不能超过 ${short}`
-        )
+        this.$message.warning(`${file.name} 上传出错：上传文件大小不能超过 ${short}`)
         return false
       }
     },
-    uploadHandler ({ file }) {
+    uploadHandler({ file }) {
       if (!this.exceed) {
         this.uploadFile(file)
       }
@@ -272,29 +325,29 @@ export default {
         key: `${file.name}${file.lastModified}`,
         fileName: file.name,
         state: this.exceed ? 2 : 0,
-        time: parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s}'),
+        time: parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s}')
       }
       this.totalProgressList.push(newProgress)
     },
-    stateClass (state) {
+    stateClass(state) {
       const classMap = ['pending', 'success', 'failure']
       return `upload-list-item-state-${classMap[state]}`
     },
-    stateFormat (state) {
+    stateFormat(state) {
       const textMap = ['上传中···', '上传成功', '上传失败']
       return textMap[state]
     },
-    setState (file, state) {
+    setState(file, state) {
       const progress = this.getProgress(file)
       if (progress) {
         progress.state = state
       }
     },
-    getProgress (file) {
+    getProgress(file) {
       const key = `${file.name}${file.lastModified}`
       return this.totalProgressList.find(progress => progress.key === key)
     },
-    retry (progress) {
+    retry(progress) {
       if (this.exceed) {
         this.$message.warning('已达到最大同时上传数量，请稍后再试')
         return
@@ -302,7 +355,7 @@ export default {
       this.uploadFile(progress.file)
       progress.state = 0
     },
-    async uploadFile (file) {
+    async uploadFile(file) {
       try {
         const formData = new FormData()
         formData.append('file', file)
@@ -320,26 +373,30 @@ export default {
         this.setState(file, 2)
       }
     },
-    dateRangePickHandler ({ maxDate, minDate }) {
+    dateRangePickHandler({ maxDate, minDate }) {
       if (!maxDate) {
         this.pickedDate = minDate
       } else {
         this.pickedDate = null
       }
     },
-    dateRangeDisabled (date) {
-      return this.pickedDate
-        ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000
-        : false
+    dateRangeDisabled(date) {
+      return this.pickedDate ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000 : false
     },
-    cellClass ({ row, column, rowIndex, columnIndex }) {
+    cellClass({ row, column, rowIndex, columnIndex }) {
       const classes = []
       if (column.property === 'createtime') {
         classes.push('pre-line')
       }
+      if (['total', 'fail'].includes(column.property) && row[column.property]) {
+        classes.push('cell-click')
+        if (this.currentCell === `${row.dataObjectId}-${column.property}`) {
+          classes.push('cell-current')
+        }
+      }
       return classes.join(' ')
     },
-    formatter (row, column, cellValue) {
+    formatter(row, column, cellValue) {
       const value = String(cellValue ?? '').trim()
       switch (column.property) {
         case 'createtime':
@@ -348,20 +405,24 @@ export default {
           return cellValue
       }
     },
-    async getTableData (cid = null) {
+    async getTableData(cid = null, type = null) {
       this.loading = true
       try {
-        // const dataContent = [this.flightDate[0], this.flightDate[1]]
-        const dataContent = [
-          `${this.flightDate[0]} 00:00:00`,
-          `${this.flightDate[1]} 23:59:59`,
-        ]
+        const dataContent = []
+        if (cid) {
+          dataContent.push(cid)
+        } else {
+          dataContent.push(`${this.flightDate[0]} 00:00:00`, `${this.flightDate[1]} 23:59:59`)
+        }
+        if (type === 'fail') {
+          dataContent.push('失败null')
+        }
         const {
           code,
-          returnData: { listValues },
+          returnData: { listValues }
         } = await WhatQuery({
-          id: SERVICE_ID.expressTransportation,
-          dataContent: cid ? [cid] : dataContent,
+          id: SERVICE_ID[type === 'fail' ? 'expressTransportationFail' : 'expressTransportation'],
+          dataContent
         })
         if (Number(code) !== 0) {
           throw new Error('失败')
@@ -372,15 +433,15 @@ export default {
       }
       this.loading = false
     },
-    async getStateData () {
+    async getStateData() {
       this.loading1 = true
       try {
         const {
           code,
-          returnData: { listValues },
+          returnData: { listValues }
         } = await WhatQuery({
           id: SERVICE_ID.expressTransportationNum,
-          dataContent: [],
+          dataContent: []
         })
         if (Number(code) !== 0) {
           throw new Error('失败')
@@ -391,17 +452,22 @@ export default {
       }
       this.loading1 = false
     },
-    stateClick (row) {
+    stateClick(row, column, cell, event) {
       const { dataObjectId } = row
-      if (dataObjectId) {
-        this.getTableData(dataObjectId)
+      const type = column.property
+      if (dataObjectId && ['total', 'fail'].includes(type) && row[type]) {
+        this.currentCell = `${row.dataObjectId}-${column.property}`
+        this.getTableData(dataObjectId, type)
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .upload {
   width: 100%;
   height: calc(100vh - 100px);
@@ -462,7 +528,7 @@ export default {
       }
       &-details {
         font-size: 14px;
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         > div {
           height: 16px;
           line-height: 16px;
@@ -503,18 +569,15 @@ export default {
       }
     }
   }
-  ::v-deep &-table {
+  ::v-deep .el-table {
     width: 100%;
     .cell {
       padding: 0;
       text-align: center;
       font-size: 14px;
-      font-family: Helvetica, "Microsoft YaHei";
+      font-family: Helvetica, 'Microsoft YaHei';
       letter-spacing: 0;
     }
-    .pre-line .cell {
-      white-space: pre-line;
-    }
     .el-table__header-wrapper,
     .el-table__fixed-header-wrapper {
       .cell {
@@ -523,6 +586,24 @@ export default {
         white-space: nowrap;
       }
     }
+    .pre-line .cell {
+      white-space: pre-line;
+    }
+
+    &.state-table {
+      .el-table__cell {
+        background-color: transparent !important;
+        &.cell-click .cell {
+          color: #2d67e3;
+          cursor: pointer;
+        }
+
+        &.cell-current,
+        &:hover {
+          background-color: #d5e4f7 !important;
+        }
+      }
+    }
   }
 }