CABaggageData2.0/src/views/upload/index.vue

<template>
  <div class="upload">
    <!-- <div class="upload-wrapper">
      <header class="upload-header">
        <div class="manageTitle">{{ title }}</div>
        <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>
      </header>
      <main class="upload-main">
        <ul v-if="totalProgressList.length" class="upload-list">
          <li v-for="(item, index) in totalProgressList" :key="item.key" class="upload-list-item">
            <div class="upload-list-item-wrapper">
              <div class="upload-list-item-image">
                <img src="@/assets/nav/ic_ex.png" :alt="item.fileName" />
              </div>
              <div class="upload-list-item-details">
                <div>
                  <span class="upload-list-item-name">{{ item.fileName }}</span>
                  <span class="upload-list-item-state" :class="stateClass(item.state)">{{ stateFormat(item.state) }}</span>
                  <i v-show="item.state === 2" class="upload-list-item-retry el-icon-refresh-right" @click="retry(item)" />
                </div>
                <div>
                  <span class="upload-list-item-time">{{ item.time }}</span>
                </div>
              </div>
            </div>
            <el-divider v-if="index !== totalProgressList.length - 1" />
          </li>
        </ul>
        <NoData v-else :image-width="230" :image-height="160" />
      </main>
    </div> -->
    <div class="upload-wrapper">
      <header class="upload-header">
        <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" />
          </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-button>
          </el-upload>
        </div>
      </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">
              <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>
          </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">
                <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]
                    )
                  }}
                    </div>
                    <div class="tooltip-trigger">
                      {{
                    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]
                  )
                }}
                  </span>
                </template>
              </el-table-column>
              <template #empty>
                <NoData :image-width="230" :image-height="160" />
              </template>
            </el-table>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { UploadFile, WhatQuery } from '@/api/dataIntegration'
import NoData from '@/components/nodata/index.vue'

const acceptTypes = ['xlsx', 'xls']
const acceptTypesStr = acceptTypes.reduce((prevStr, currStr) => {
  return `${prevStr}${prevStr ? ',' : ''}.${currStr}`
}, '')

const units = ['B', 'KB', 'MB', 'GB']
const getUnit = (size, callTime = 0) => {
  if (size < 1024) {
    return `${size}${units[callTime]}`
  }
  return getUnit(size / 1024, callTime + 1)
}
const maxSize = 20 * 1024 * 1024
const short = getUnit(maxSize)

export default {
  name: 'Upload',
  components: { NoData },
  data () {
    return {
      title: '速运行李上传',
      acceptTypesStr: acceptTypesStr,
      totalProgressList: [],
      limit: 3,
      title2: '速运行李数据',
      flightDate: new Array(2).fill(parseTime(new Date(), '{y}-{m}-{d}')),
      dateRangePickerOptions: {
        onPick: this.dateRangePickHandler,
        disabledDate: this.dateRangeDisabled,
      },
      input: '',
      tableColumns: [
        {
          prop: 'C0',
        },
        {
          prop: 'C1',
        },
        {
          prop: 'C2',
        },
        {
          prop: 'C3',
        },
        {
          prop: 'C4',
        },
        {
          prop: 'C5',
        },
        {
          prop: 'C6',
        },
        {
          prop: 'C7',
        },
        {
          prop: 'C8',
        },
        {
          prop: 'C9',
        },
        {
          prop: 'createtime',
        },
        {
          prop: 'message',
          showTooltip: true,
        },
        {
          prop: 'sendResult',
          showTooltip: true,
        },
      ],
      tableData: [],
      stateData: [],
      loading: false,
      loading1: false
    }
  },
  computed: {
    currentProgressNum () {
      return this.totalProgressList.reduce((prevCount, currentProgress) => {
        return currentProgress.state > 0 ? prevCount : prevCount + 1
      }, 0)
    },
    exceed () {
      return this.currentProgressNum >= this.limit
    },
    currDate () {
      return function (time) {
        if (time) {
          return parseTime(new Date(time), '{y}-{m}-{d} {h}:{m}:{s}')
        } else {
          return '-'
        }
      }
    },
    capData () {
      const val = this.input
      return this.stateData.filter(data => !val || data.thedate && data.thedate.includes(val))
    }
  },
  // watch: {
  //   flightDate: {
  //     handler () {
  //       this.getTableData()
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  created () {
    this.getStateData()
  },
  methods: {
    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} 个文件`
        )
      }
      const extensionName = file.name.split('.').pop()
      const acceptExtention = acceptTypes.includes(extensionName)
      if (!acceptExtention) {
        this.$message.warning(
          `${file.name} 上传出错：上传文件只能是 ${acceptTypes.join('/')} 格式`
        )
        return false
      }
      if (file.size > maxSize) {
        this.$message.warning(
          `${file.name} 上传出错：上传文件大小不能超过 ${short}`
        )
        return false
      }
    },
    uploadHandler ({ file }) {
      if (!this.exceed) {
        this.uploadFile(file)
      }
      const progress = this.getProgress(file)
      if (progress) {
        progress.state = this.exceed ? 2 : 0
        return
      }
      const newProgress = {
        file,
        key: `${file.name}${file.lastModified}`,
        fileName: file.name,
        state: this.exceed ? 2 : 0,
        time: parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s}'),
      }
      this.totalProgressList.push(newProgress)
    },
    stateClass (state) {
      const classMap = ['pending', 'success', 'failure']
      return `upload-list-item-state-${classMap[state]}`
    },
    stateFormat (state) {
      const textMap = ['上传中···', '上传成功', '上传失败']
      return textMap[state]
    },
    setState (file, state) {
      const progress = this.getProgress(file)
      if (progress) {
        progress.state = state
      }
    },
    getProgress (file) {
      const key = `${file.name}${file.lastModified}`
      return this.totalProgressList.find(progress => progress.key === key)
    },
    retry (progress) {
      if (this.exceed) {
        this.$message.warning('已达到最大同时上传数量，请稍后再试')
        return
      }
      this.uploadFile(progress.file)
      progress.state = 0
    },
    async uploadFile (file) {
      try {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('serviceId', SERVICE_ID.expressTransportationUpload)
        formData.append('token', '167885843630200099999999')
        const { code } = await UploadFile(formData)
        if (Number(code) !== 0) {
          throw new Error('失败')
        }
        this.$message.success(`${file.name} 上传成功`)
        this.setState(file, 1)
        this.getStateData()
      } catch (error) {
        this.$message.error(`${file.name} 上传失败`)
        this.setState(file, 2)
      }
    },
    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
    },
    cellClass ({ row, column, rowIndex, columnIndex }) {
      const classes = []
      if (column.property === 'createtime') {
        classes.push('pre-line')
      }
      return classes.join(' ')
    },
    formatter (row, column, cellValue) {
      const value = String(cellValue ?? '').trim()
      switch (column.property) {
        case 'createtime':
          return value.replace('T', '\n')
        default:
          return cellValue
      }
    },
    async getTableData (cid = 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 {
          code,
          returnData: { listValues },
        } = await WhatQuery({
          id: SERVICE_ID.expressTransportation,
          dataContent: cid ? [cid] : dataContent,
        })
        if (Number(code) !== 0) {
          throw new Error('失败')
        }
        this.tableData = listValues
      } catch (error) {
        this.$message.error('查询表格失败')
      }
      this.loading = false
    },
    async getStateData () {
      this.loading1 = true
      try {
        const {
          code,
          returnData: { listValues },
        } = await WhatQuery({
          id: SERVICE_ID.expressTransportationNum,
          dataContent: [],
        })
        if (Number(code) !== 0) {
          throw new Error('失败')
        }
        this.stateData = listValues
      } catch (error) {
        this.$message.error('查询表格失败')
      }
      this.loading1 = false
    },
    stateClick (row) {
      const { dataObjectId } = row
      if (dataObjectId) {
        this.getTableData(dataObjectId)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.upload {
  width: 100%;
  height: calc(100vh - 100px);
  padding: 24px 24px 0;
  &-wrapper {
    width: 100%;
    padding: 24px 24px 0;
    background-color: #fff;
    height: 100%;
  }
  &-header {
    display: flex;
    justify-content: space-between;
  }
  &-main {
    height: calc(100% - 32px);
    padding-top: 30px;
    &-content {
      height: 100%;
      padding-bottom: 32px;
      &-left {
        width: 330px;
        margin-right: 20px;
        ::v-deep .state-table {
          .el-table__header {
            .cell {
              font-weight: bold;
              color: #101116;
              white-space: nowrap;
            }
          }
          .cell {
            text-align: center;
          }
        }
      }
      &-right {
        flex: 1;
        width: calc(100% - 350px);
      }
    }
  }
  &-list {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    &-item {
      &-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      &-image {
        margin-right: 16px;
      }
      &-details {
        font-size: 14px;
        font-family: Helvetica, "Microsoft YaHei";
        > div {
          height: 16px;
          line-height: 16px;
          &:first-child {
            margin-bottom: 6px;
          }
        }
      }
      &-name {
        color: #303133;
        margin-right: 16px;
      }
      &-state {
        &-success {
          color: #40a349;
        }
        &-failure {
          color: #d53e3e;
        }
      }
      &-retry {
        width: 16px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        border-radius: 50%;
        margin-left: 16px;
        font-size: 14px;
        color: #2d67e3;
        cursor: pointer;
        &:hover {
          background-color: #2d67e3;
          color: #fff;
        }
      }
      &-time {
        color: #afb4bf;
      }
    }
  }
  ::v-deep &-table {
    width: 100%;
    .cell {
      padding: 0;
      text-align: center;
      font-size: 14px;
      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 {
        font-weight: bold;
        color: #101116;
        white-space: nowrap;
      }
    }
  }
}

.upload-header-right {
  display: flex;
  align-items: center;
}
.btn-refresh {
  margin-left: 10px;
  padding: 0;
  width: 30px;
  height: 30px;
}

.tooltip-content {
  max-width: 500px;
}
.tooltip-trigger {
  padding: 0 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>