294 lines
8.1 KiB
Vue
294 lines
8.1 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 搜索 -->
|
|
<div class="search">
|
|
<u-input
|
|
v-model="keyWord"
|
|
placeholder="请输入搜索内容"
|
|
suffixIcon="search"
|
|
suffixIconStyle="color: #666"
|
|
shape="circle"
|
|
@blur="handleSearch"
|
|
></u-input>
|
|
</div>
|
|
<!-- 列表 -->
|
|
<div class="list-cont" v-for="(item, index) in tableList" :key="index" @click="handleDetail(item)">
|
|
<u-row justify="space-between" customStyle="margin-bottom: 10px; padding: 0 15px;">
|
|
<u-col span="6">
|
|
<div>{{ item.code }}</div>
|
|
</u-col>
|
|
<u-col span="6">
|
|
<div style="display: flex; justify-content: flex-end">
|
|
<u-tag text="已上传" type="success" v-if="item.fileList && item.fileList.length > 0"></u-tag>
|
|
<u-tag text="待上传" type="warning" v-else></u-tag>
|
|
</div>
|
|
</u-col>
|
|
</u-row>
|
|
<u-line style="margin-bottom: 5px"></u-line>
|
|
<div class="list-item">
|
|
<span>工程名称：</span>
|
|
<span>{{ item.proName }}</span>
|
|
</div>
|
|
<div class="list-item df-item">
|
|
<div>
|
|
<span>派车数量：</span>
|
|
<span style="color: #5ae725">{{ item.dispatchNum }}</span>
|
|
</div>
|
|
<div>
|
|
<u-tag
|
|
v-if="item.fileList && item.fileList.length > 0"
|
|
text="查看到货确认单"
|
|
type="info"
|
|
@click="openImgModal(item, 1)"
|
|
></u-tag>
|
|
<u-tag v-else type="primary" text="上传到货确认单" @click="openImgModal(item, 2)"></u-tag>
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<span>派车时间：</span>
|
|
<span style="color: #f9ae3d">{{ item.outTime }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 上传图片 -->
|
|
<u-modal
|
|
:show="imgModal"
|
|
:title="imgModelTitle"
|
|
showCancelButton
|
|
:cancelText="cancelText"
|
|
:showConfirmButton="showConBtn"
|
|
@cancel="imgModal = false"
|
|
@confirm="uploadImg"
|
|
>
|
|
<view class="slot-content" style="display: flex; flex-direction: column; align-items: center">
|
|
<uni-file-picker
|
|
v-model="imgList"
|
|
:auto-upload="false"
|
|
ref="files"
|
|
limit="3"
|
|
@select="selectImg"
|
|
@delete="deleteImg"
|
|
:readonly="readonly"
|
|
style="height: 100px; width: 260px"
|
|
/>
|
|
</view>
|
|
</u-modal>
|
|
|
|
<u-loadmore :status="status" line v-if="tableList.length > 10" />
|
|
|
|
<!-- 空状态 -->
|
|
<u-empty v-if="tableList.length == 0" mode="data"></u-empty>
|
|
|
|
<u-loading-page bg-color="#e8e8e8" :loading="isLoading"></u-loading-page>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { pathToBase64, base64ToPath } from 'image-tools'
|
|
import { getOutPageList, uploadFile } from '@/api/carManage'
|
|
import config from '@/config'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
actionUrl: config.baseUrl + '/gz_car' + config.uploadFileUrlGzCar,
|
|
token: uni.getStorageSync('App-Token'),
|
|
cancelText: '取消',
|
|
showConBtn: true,
|
|
row: {},
|
|
imgModal: false,
|
|
readonly: false,
|
|
imgModelTitle: '',
|
|
imgList: [],
|
|
uploadPaths: [],
|
|
keyWord: '',
|
|
status: 'loadmore',
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
tableList: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
handleSearch() {
|
|
this.pageSize = 10
|
|
this.getList()
|
|
},
|
|
async getList() {
|
|
try {
|
|
const params = {
|
|
encryptedData: JSON.stringify({ keyWord: this.keyWord.trim() }),
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize
|
|
}
|
|
console.log('🚀 ~ getList ~ params', params)
|
|
const res = await getOutPageList(params)
|
|
console.log('🚀 ~ getList ~ res', res)
|
|
this.tableList = res.list
|
|
this.total = res.total
|
|
} catch (error) {
|
|
console.log('🚀 ~ getList ~ error', error)
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
console.log('🚀 ~ onReachBottom ~ ')
|
|
if (this.total < 10 || this.total == this.tableList.length) {
|
|
this.status = 'nomore'
|
|
return
|
|
}
|
|
this.status = 'loading'
|
|
setTimeout(() => {
|
|
this.pageSize += 10
|
|
this.getList()
|
|
if (this.tableList.length != this.total) this.status = 'loadmore'
|
|
else this.status = 'nomore'
|
|
}, 500)
|
|
console.log('加载..', this.pageSize)
|
|
},
|
|
// 打开图片弹窗
|
|
openImgModal(item, type) {
|
|
this.row = item
|
|
console.log('🚀 ~ openImgModal ~ this.row:', this.row)
|
|
this.imgModal = true
|
|
if (type == 1) {
|
|
this.showConBtn = false
|
|
this.cancelText = '关闭'
|
|
this.readonly = true
|
|
this.imgModelTitle = '查看到货确认单照片'
|
|
this.imgList = item.fileList
|
|
this.imgList.forEach((img, index) => {
|
|
img.url = config.fileUrlGzCar + img.fileUrl + '?token=' + this.token
|
|
})
|
|
console.log('🚀 ~ openImgModal ~ this.imgList', this.imgList)
|
|
} else {
|
|
this.showConBtn = true
|
|
this.cancelText = '取消'
|
|
this.readonly = false
|
|
this.imgModelTitle = '上传到货确认单照片'
|
|
this.imgList = []
|
|
}
|
|
},
|
|
selectImg(e) {
|
|
console.log('🚀 ~ selectImg ~ e:', e)
|
|
e.tempFiles.forEach(file => {
|
|
this.imgList.push(file)
|
|
})
|
|
console.log('🚀 ~ selectImg ~ this.imgList:', this.imgList)
|
|
// this.upload(e.tempFiles[0].path)
|
|
},
|
|
deleteImg(e) {
|
|
console.log('🚀 ~ deleteImg ~ e:', e)
|
|
this.imgList.splice(e.index, 1)
|
|
console.log('🚀 ~ deleteImg ~ this.imgList:', this.imgList)
|
|
},
|
|
uploadImg() {
|
|
console.log('🚀 ~ uploadImg ~ this.imgList:', this.imgList)
|
|
if (this.imgList.length == 0) {
|
|
uni.showToast({
|
|
title: '请上传图片',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.isLoading = true
|
|
console.log('🚀 ~ uploadImg ~ this.imgList:', this.imgList)
|
|
const uploadPromises = this.imgList.map(img => {
|
|
const path = img.path
|
|
console.log('🚀 ~ uploadImg ~ path:', path)
|
|
return this.upload(path) // 假设 this.upload 返回一个 Promise
|
|
})
|
|
|
|
Promise.all(uploadPromises)
|
|
.then(() => {
|
|
this.isLoading = false
|
|
console.log('所有图片上传成功')
|
|
uni.showToast({
|
|
title: '上传成功',
|
|
icon: 'success'
|
|
})
|
|
setTimeout(() => {
|
|
this.imgModal = false
|
|
this.getList()
|
|
}, 1000)
|
|
})
|
|
.catch(error => {
|
|
this.isLoading = false
|
|
console.error('图片上传失败', error)
|
|
uni.showToast({
|
|
title: '上传失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
},
|
|
upload(path) {
|
|
return new Promise((resolve, reject) => {
|
|
uni.uploadFile({
|
|
url: this.actionUrl,
|
|
filePath: path,
|
|
name: 'file',
|
|
header: {
|
|
Authorization: this.token
|
|
},
|
|
formData: {
|
|
id: this.row.id
|
|
},
|
|
success: res => {
|
|
console.log('🚀 ~ selectImg ~ res:', res)
|
|
console.log('🚀 ~ selectImg ~ res--data:', JSON.parse(res.data))
|
|
resolve(res)
|
|
},
|
|
fail: err => {
|
|
console.log('🚀 ~ selectImg ~ err:', err)
|
|
reject(err)
|
|
}
|
|
})
|
|
})
|
|
},
|
|
handleDetail(item) {
|
|
console.log('🚀 ~ handleDetail ~ item', item)
|
|
const params = {
|
|
...item,
|
|
isDetail: true,
|
|
// 到货
|
|
isArrival: true,
|
|
active: 1
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/sendACarSystem/details?params=${JSON.stringify(params)}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
padding: 15px;
|
|
background-color: #f8f8f8;
|
|
}
|
|
.search {
|
|
margin-bottom: 15px;
|
|
}
|
|
.list-cont {
|
|
padding: 15px 0;
|
|
margin-bottom: 15px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
.list-item {
|
|
padding: 5px 15px;
|
|
}
|
|
|
|
.df-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|