598 lines
16 KiB
Vue
Raw Normal View History

<template>
<view class="page_wrap fullHeight">
<view class="fixedheader">
<headers :showBack="true">
<view class="headerName">
试块列表
</view>
</headers>
</view>
<view class="smallHeight" :style="{ 'padding-top': (statusBarHeight + 45) * 1.5 + 'rpx' }">
<view class="content">
<scroll-view class="smallHeight content_list" scroll-y>
<view style="padding-top: 36rpx;padding-bottom: 90px" v-if="listData.length>0">
<view class="list_item" v-for="(item,index) in listData" :key="index">
<view class="status">
<image v-if="item.sampleState == 2" src="../../../static/betonManage/status1.png"></image>
<image v-if="item.sampleState == 1" src="../../../static/betonManage/status2.png"></image>
<image v-if="item.sampleState == 3" src="../../../static/betonManage/status3.png"></image>
</view>
<view class="item_info">
<view style="margin-bottom: 20rpx" @click="goPage(item.id)">
<view class="flex">
<view class="left">
<view class="info_item"><text style="color: #948EAD">试块名称</text>{{item.sampleName}}</view>
<view class="info_item"><text style="color: #948EAD">实验室</text>{{item.laboratoryName}}</view>
<view class="info_item"><text style="color: #948EAD">入库时间</text>{{item.putStorageTime}}</view>
<view class="info_item" v-if="item.sampleState == 3"><text style="color: #948EAD" >出库时间</text>{{item.inspectionTime}}</view>
</view>
<view class="right">
<view class="info_item"><text style="color: #948EAD">养护周期()</text>{{item.curingPeriod}}</view>
<view class="info_item"><text style="color: #948EAD">试验负责人</text>{{item.laboratoryDirector}}</view>
<view class="info_item"><text style="color: #948EAD">入库人</text>{{item.createUserName}}</view>
<view class="info_item" v-if="item.sampleState == 3"><text style="color: #948EAD">送检结果:</text><text :style="{color: item.qualifiedType == 2 ? '#F56C6C':''}">{{item.qualifiedType == 1 ? '正常':'异常'}}</text></view>
</view>
</view>
</view>
<view class="bottom_box" v-if="item.dataType == 1">养护已到期,<text style="color: #5181F6" @click="goDetection(item.id)">点击出库送检</text></view>
<view class="bottom_box" v-if="item.sampleState == 2">送检中,<text style="color: #5181F6" @click="sendRecord(item.id)">点击上传送检报告</text></view>
<view class="bottom_box" v-if="item.sampleState == 1 && item.dataType != 1">当前已养护<text style="color: #5181F6">{{item.maintainDayNum}}</text></view>
<view class="bottom_box" v-if="item.sampleState == 3"><text style="color: #5181F6" @click="showFile(item)">送检报告下载</text></view>
</view>
</view>
</view>
<view class="no_data" v-else>
<image src="../../../static/noData.png"></image>
<view>暂无数据</view>
</view>
</scroll-view>
<view class="addForm_btn" @click="goAdd">入库</view>
</view>
</view>
<dialogs class="formDialog" ref="dialogs">
<template v-slot:content>
<view class="dialog-title">
上传送检报告
</view>
<view class="dialog-content">
<view class="form_label">
送检报告
<view class="add_btn" @click="uploadImage">
<uni-icons2 type="plus-filled" color="#5181F6" size="18"></uni-icons2>
上传
</view>
</view>
<view class="file_list">
<view class="file_item" v-for="(item,index) in form.inspectionReport" :key="index">
<image :src="url_config+'image/'+item.url" @click="previewImage(url_config+'image/'+item.url)"></image>
<view style="display: flex;"><text class="img_name">{{item.name}}</text> <text>{{item.createTime}}</text></view>
<uni-icons2 type="trash" color="#F56C6C" @click="deleteImg(index)"></uni-icons2>
</view>
</view>
<view class="form_item">
<view class="form_label">
送检结果
</view>
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" style="margin-right: 20rpx">
<view>
<radio value="1" :checked="form.qualifiedType == 1" />
</view>
<view>正常</view>
</label>
<label class="uni-list-cell uni-list-cell-pd">
<view>
<radio value="2" :checked="form.qualifiedType == 2" />
</view>
<view>异常</view>
</label>
</radio-group>
</view>
</view>
<view class="dialog-btn">
<view class="cancle-btn" @click="cancleReply">取消</view>
<view class="primary-btn" @click="submitReply">提交</view>
</view>
</template>
</dialogs>
<dialogs class="formDialog" ref="dialogs2">
<template v-slot:content>
<view class="dialog-title">
下载送检报告
</view>
<view class="dialog-content">
<view class="file_list">
<view class="file_item" v-for="(item,index) in fileList" :key="index+'_'+item.createTime">
<image :src="url_config+'image/'+item.url" @click="previewImage(url_config+'image/'+item.url)"></image>
<view style="display: flex;"><text class="img_name">{{item.name}}</text> <text>{{item.createTime}}</text></view>
<!-- <uni-icons2 type="trash" color="#F56C6C" @click="deleteImg(index)"></uni-icons2> -->
<view style="display: flex;">
<image v-if="!item.progress" style="width: 30rpx;height: 30rpx;" src="../../../static/betonManage/downLoad.png" @click="downLoad(item,index)"></image>
<!-- <text v-if="item.progress" style="color: #F56C6C;">{{item.progress}}%</text> -->
<image v-if="item.progress" style="width: 50rpx;height: 17px;" src="../../../static/betonManage/downLoad_success.png" @click="previewImage(url_config+'image/'+item.url)"></image>
<!-- <view style="text-indent: -9999px;">{{item.progress}}</view> -->
</view>
</view>
</view>
</view>
</template>
</dialogs>
</view>
</template>
<script>
import dialogs from '../../../components/dialog/dialog.vue'
export default{
data(){
return{
statusBarHeight: 0,
form:{
inspectionReport: [],
qualifiedType: 1,
sampleState: 3
},
detailId: '',
listData: [],
fileList: []
}
},
components:{
dialogs
},
onShow(){
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
this.loadData()
},
onLoad(options){
this.detailId = options.id
this.loadData()
},
methods:{
downLoad(item,index){
let that = this
// this.fileList.forEach((itm,idx)=>{
// if(index == idx){
// itm.progress = 100
// }
// })
// this.fileList.splice(index, 1,item)
// this.fileList = this.fileList
// // item.progress = true
// this.$forceUpdate()
// console.log(item.progress)
// url_config+'image/'+item.url
const downloadTask = uni.downloadFile({
url: this.url_config+'image/'+item.url,
success: (res) => {
if (res.statusCode === 200) {
console.log('下载成功');
// item.progress = true
uni.saveImageToPhotosAlbum({
filePath: this.url_config+'image/'+item.url,
success: function () {
// item.progress = 100
// console.log(that.fileList[index])
that.$forceUpdate()
}
});
}
}
});
downloadTask.onProgressUpdate((res) => {
console.log('下载进度' + res.progress);
// console.log('已经下载的数据长度' + res.totalBytesWritten);
// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
// that.fileList[index].progress = res.progress
// console.log(that.fileList)
that.fileList.forEach((itm,idx)=>{
if(index == idx){
itm.progress = res.progress
}
})
that.fileList.splice(index, 1,item)
that.$forceUpdate()
// 满足测试条件,取消下载任务。
// if (res.progress > 50) {
// downloadTask.abort();
// }
});
},
showFile(val){
this.$refs.dialogs2.showFn()
this.fileList = JSON.parse(val.inspectionReport)
this.fileList.forEach(item=>{
item.progress = 0
})
},
radioChange(e){
console.log(e)
this.form.qualifiedType = Number(e.detail.value)
},
getNowTime() {
let dateTime
let yy = new Date().getFullYear()
let mm = new Date().getMonth() + 1
let dd = new Date().getDate()
let hh = new Date().getHours()
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
:
new Date().getMinutes()
let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
:
new Date().getSeconds()
dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
console.log(dateTime)
return dateTime
},
//上传附件
uploadImage() {
var that = this
uni.chooseImage({
// count: 5 - that.imageList.length,
success(res) {
const tempFilePaths = res.tempFilePaths;
uni.uploadFile({
url: that.url_config + 'upload/image', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'files',
success: (uploadFileRes) => {
let data = {
name: res.tempFiles[0].name,
url: JSON.parse(uploadFileRes.data).data[0].imageUrl,
createTime: that.getNowTime()
};
that.form.inspectionReport.push(data)
console.log(that.form.inspectionReport)
// console.log(res.tempFiles[0].name)
// that.imageList.push(data)
}
});
}
})
},
//删除附件
deleteImg(val) {
let that = this;
uni.showModal({
title: '提示',
content: '确定删除该附件吗?',
success: function(res) {
if (res.confirm) {
that.form.inspectionReport.splice(val,1)
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
//预览图片
previewImage(url) {
uni.previewImage({
urls: [url]
})
},
goDetection(id){
let that = this
this.sendRequest({
url: 'xmgl/massReboundSampleStorageRecord/updateInspectionBatch',
data: {ids: id},
method: "POST",
success(res) {
console.log(res)
uni.showToast({
title: '送检成功!'
})
that.loadData()
}
})
},
loadData(){
let that = this
this.sendRequest({
url: 'xmgl/massReboundSampleStorageRecord/selectList',
data: {pouringId: this.detailId},
method: "POST",
success(res) {
console.log(res)
that.listData = res.result
}
})
},
goPage(id){
uni.navigateTo({
url: './testSpecimenDetail?id='+id
})
},
cancleReply(){
this.form = {
inspectionReport: [],
qualifiedType: 1,
sampleState: 3
}
this.$refs.dialogs.hideFn2()
},
submitReply(){
if(this.form.inspectionReport.length<1){
uni.showToast({
title: '请上传送检报告',
icon: 'none'
})
return false;
}
let params = this.form
params.inspectionReport = JSON.stringify(this.form.inspectionReport)
let that = this
console.log(params)
this.sendRequest({
url: 'xmgl/massReboundSampleStorageRecord/edit',
data: params,
method: "POST",
success(res) {
console.log(res)
uni.showToast({
title: '上传成功!'
})
that.cancleReply()
that.loadData()
}
})
// this.$refs.dialogs.hideFn2()
},
sendRecord(id){
this.form.id = id
this.$refs.dialogs.showFn()
},
goAdd(){
// uni.navigateTo({
// url: './addInspectionRecord'
// })
uni.navigateTo({
url: './addTestSpecimen?id=' + this.detailId
})
}
}
}
</script>
<style lang="scss" scoped>
.fixedheader{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
.smallHeight{
height: 100%;
box-sizing: border-box;
}
.content{
height: 100%;
// background: #fff;
}
.content_list{
background: #fff;
height: 100%;
.list_item{
// height: 150rpx;
display: flex;
align-items: center;
padding: 30rpx 30rpx;
padding-bottom: 0;
padding-right: 0px;
box-sizing: border-box;
width: 90%;
margin: 0 auto;
margin-bottom: 30rpx;
border-radius: 10rpx;
box-shadow: 0px 4rpx 11px 0px rgba(212, 220, 236, 0.65);
position: relative;
.status{
position: absolute;
right: 0;
top: 10rpx;
uni-image{
width: 134rpx;
height: 108rpx;
}
}
uni-checkbox{
:deep(.uni-checkbox-input){
margin-right: 12rpx;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
}
:deep(.uni-checkbox-input-checked){
background-color: rgb(0, 122, 255);
}
:deep(.uni-checkbox-input-checked:before){
color: #fff;
}
}
.left{
flex: 1;
font-size: 28rpx;
margin-right: 10rpx;
}
.right{
flex: 1;
font-size: 28rpx;
}
.info_item{
margin-bottom: 4rpx;
}
.item_info{
// margin-bottom: 20rpx;
padding-top: 36rpx;
flex: 1;
}
.bottom_box{
width: 100%;
height: 76rpx;
line-height: 76rpx;
text-align: center;
font-size: 28rpx;
background-image: linear-gradient(to right, rgba(81, 129, 246,0), rgba(81, 129, 246, 0.1),rgba(81, 129, 246,0));
}
}
.flex{
display: flex;
}
}
.addForm_btn{
width: 88%;
height: 100rpx;
line-height: 100rpx;
font-size: 40rpx;
background: #4181FE;
color: #fff;
border-radius: 50rpx;
text-align: center;
position: fixed;
bottom: 40rpx;
left: 50%;
transform: translateX(-50%);
}
.formDialog{
:deep(.dialogContent){
width: 90%;
top: auto;
left: 50%;
bottom: 30rpx;
transform: translate(-50%, 0);
border-radius: 30rpx;
}
.dialog-title{
padding: 0 40rpx ;
font-weight: 600;
padding-top: 40rpx;
margin-bottom: 60rpx;
font-size: 36rpx;
}
.dialog-content{
padding: 0 40rpx;
padding-bottom: 40rpx;
.form_label{
color: #2A2B5B;
font-size: 30rpx;
// margin-bottom: 16rpx;
position: relative;
.add_btn{
display: flex;
align-items: center;
position: absolute;
right: 10rpx;
top: 0;
font-size: 28rpx;
color: #5181F6;
.uni-icons{
margin-right: 10rpx;
}
}
}
.file_list{
margin-top: 24rpx;
margin-bottom: 34rpx;
.file_item{
display: flex;
font-size: 24rpx;
color: rgba(42, 46, 63, 0.8);
margin-bottom: 20rpx;
uni-text{
line-height: 44rpx;
margin-right: 20rpx;
}
uni-image{
width: 44rpx;
height: 44rpx;
margin-right: 10rpx;
}
}
}
.form_item{
display: flex;
justify-content: space-between;
align-items: center;
uni-radio-group{
display: flex;
.uni-list-cell{
display: flex;
align-items: center;
font-size: 28rpx;
:deep(.uni-radio-input){
height: 28rpx;
width: 28rpx;
font-size: 28rpx;
}
}
}
}
}
.dialog-btn{
width: 100%;
height: 94rpx;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 60rpx;
.cancle-btn{
height: 100rpx;
width: 236rpx;
text-align: center;
line-height: 100rpx;
background: #fff;
color: rgba(#30305F, 0.6);
border-radius: 50rpx;
border: 1rpx solid rgba(#30305F,0.3);
margin-right: 112rpx;
}
.primary-btn{
height: 100rpx;
width: 236rpx;
text-align: center;
line-height: 100rpx;
border-radius: 50rpx;
color: #fff;
background: #5181F6;
}
}
}
.img_name{
display: block;
width: 200rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.no_data{
text-align: center;
color: rgba(0,0,0,0.5);
padding-top: 100rpx;
uni-image{
width: 328rpx;
height: 260rpx;
display: block;
margin: 0 auto;
margin-bottom: 40rpx;
}
}
</style>