|
@@ -3,55 +3,24 @@
|
|
|
<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-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"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- />
|
|
|
+ <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)"
|
|
|
- />
|
|
|
+ <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>
|
|
@@ -61,104 +30,70 @@
|
|
|
<el-divider v-if="index !== totalProgressList.length - 1" />
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <NoData
|
|
|
- v-else
|
|
|
- :image-width="230"
|
|
|
- :image-height="160"
|
|
|
- />
|
|
|
+ <NoData v-else :image-width="230" :image-height="160" />
|
|
|
</main>
|
|
|
</div>
|
|
|
<div class="upload-wrapper">
|
|
|
<header class="upload-header">
|
|
|
<div class="manageTitle">{{ title2 }}</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="getTableData"
|
|
|
- />
|
|
|
+ <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="getTableData" />
|
|
|
</div>
|
|
|
</header>
|
|
|
- <main
|
|
|
- v-loading="loading"
|
|
|
- element-loading-text="拼命加载中"
|
|
|
- element-loading-spinner="el-icon-loading"
|
|
|
- element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
- class="upload-main"
|
|
|
- >
|
|
|
- <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"
|
|
|
- >
|
|
|
- {{
|
|
|
+ <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="stateData" :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">
|
|
|
- {{
|
|
|
+ </div>
|
|
|
+ <div class="tooltip-trigger">
|
|
|
+ {{
|
|
|
formatter(
|
|
|
scope.row,
|
|
|
scope.column,
|
|
|
scope.row[scope.column.property]
|
|
|
)
|
|
|
}}
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
- <span v-else>
|
|
|
- {{
|
|
|
+ </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>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <NoData :image-width="230" :image-height="160" />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -166,7 +101,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { parseTime } from '@/utils'
|
|
|
-import { UploadFile, WhatQuery } from '@/api/temp'
|
|
|
+import { UploadFile, WhatQuery, stateQuery } from '@/api/temp'
|
|
|
import NoData from '@/components/nodata/index.vue'
|
|
|
|
|
|
const acceptTypes = ['xlsx', 'xls']
|
|
@@ -187,7 +122,7 @@ const short = getUnit(maxSize)
|
|
|
export default {
|
|
|
name: 'Upload',
|
|
|
components: { NoData },
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
title: '速运行李上传',
|
|
|
acceptTypesStr: acceptTypesStr,
|
|
@@ -243,30 +178,44 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
tableData: [],
|
|
|
+ stateData: [],
|
|
|
loading: false,
|
|
|
+ loading1: false
|
|
|
}
|
|
|
},
|
|
|
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 () {
|
|
|
+ return function (time) {
|
|
|
+ if (time) {
|
|
|
+ return parseTime(new Date(time), '{y}-{m}-{d} {h}:{m}:{s}')
|
|
|
+ } else {
|
|
|
+ return '-'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
flightDate: {
|
|
|
- handler() {
|
|
|
+ handler () {
|
|
|
this.getTableData()
|
|
|
},
|
|
|
deep: true,
|
|
|
immediate: true,
|
|
|
},
|
|
|
},
|
|
|
+ created () {
|
|
|
+ this.getStateData()
|
|
|
+ },
|
|
|
methods: {
|
|
|
- beforeUpload(file) {
|
|
|
+ beforeUpload (file) {
|
|
|
const progress = this.getProgress(file)
|
|
|
if (progress && progress.state === 0) {
|
|
|
this.$message.warning(`${file.name} 上传中,请勿重复上传`)
|
|
@@ -292,7 +241,7 @@ export default {
|
|
|
return false
|
|
|
}
|
|
|
},
|
|
|
- uploadHandler({ file }) {
|
|
|
+ uploadHandler ({ file }) {
|
|
|
if (!this.exceed) {
|
|
|
this.uploadFile(file)
|
|
|
}
|
|
@@ -310,25 +259,25 @@ export default {
|
|
|
}
|
|
|
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
|
|
@@ -336,7 +285,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)
|
|
@@ -353,26 +302,26 @@ export default {
|
|
|
this.setState(file, 2)
|
|
|
}
|
|
|
},
|
|
|
- dateRangePickHandler({ maxDate, minDate }) {
|
|
|
+ dateRangePickHandler ({ maxDate, minDate }) {
|
|
|
if (!maxDate) {
|
|
|
this.pickedDate = minDate
|
|
|
} else {
|
|
|
this.pickedDate = null
|
|
|
}
|
|
|
},
|
|
|
- dateRangeDisabled(date) {
|
|
|
+ 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')
|
|
|
}
|
|
|
return classes.join(' ')
|
|
|
},
|
|
|
- formatter(row, column, cellValue) {
|
|
|
+ formatter (row, column, cellValue) {
|
|
|
const value = String(cellValue ?? '').trim()
|
|
|
switch (column.property) {
|
|
|
case 'createtime':
|
|
@@ -381,7 +330,7 @@ export default {
|
|
|
return cellValue
|
|
|
}
|
|
|
},
|
|
|
- async getTableData() {
|
|
|
+ async getTableData (cid = null) {
|
|
|
this.loading = true
|
|
|
try {
|
|
|
// const dataContent = [this.flightDate[0], this.flightDate[1]]
|
|
@@ -392,9 +341,9 @@ export default {
|
|
|
const {
|
|
|
code,
|
|
|
returnData: { listValues },
|
|
|
- } = await WhatQuery({
|
|
|
+ } = await stateQuery({
|
|
|
id: SERVICE_ID.expressTransportation,
|
|
|
- dataContent,
|
|
|
+ dataContent: cid ? [cid] : dataContent,
|
|
|
})
|
|
|
if (Number(code) !== 0) {
|
|
|
throw new Error('失败')
|
|
@@ -405,6 +354,31 @@ export default {
|
|
|
}
|
|
|
this.loading = false
|
|
|
},
|
|
|
+ async getStateData () {
|
|
|
+ this.loading1 = true
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ returnData: { listValues },
|
|
|
+ } = await stateQuery({
|
|
|
+ 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>
|
|
@@ -432,6 +406,29 @@ export default {
|
|
|
&-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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
&-list {
|
|
|
margin: 0;
|
|
@@ -451,7 +448,7 @@ export default {
|
|
|
}
|
|
|
&-details {
|
|
|
font-size: 14px;
|
|
|
- font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ font-family: Helvetica, "Microsoft YaHei";
|
|
|
> div {
|
|
|
height: 16px;
|
|
|
line-height: 16px;
|
|
@@ -498,7 +495,7 @@ export default {
|
|
|
padding: 0;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
- font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ font-family: Helvetica, "Microsoft YaHei";
|
|
|
letter-spacing: 0;
|
|
|
}
|
|
|
.pre-line .cell {
|
|
@@ -509,6 +506,7 @@ export default {
|
|
|
.cell {
|
|
|
font-weight: bold;
|
|
|
color: #101116;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
}
|