integrated_traffic_uniapp/pages/application/driving-inspections/driving-item-promise-list.vue

623 lines
18 KiB
Vue
Raw Permalink Normal View History

2024-05-09 18:08:07 +08:00
<template><!-- 源自pages/application/hidden-trouble-investigation/hidden-trouble-app/check-items-custom-list.vue -->
<view>
<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">{{CHECKTYPE_NAME}}排查项111</block>
</cu-custom>
<scroll-view scroll-y>
<view class="check-items" v-for="(item,index) in list" :key="item.CUSTOM_ITEM_ID">
<view class="title">检查项名称:{{item.CHECKITEMNAME}}</view>
<view class="title">检查项说明:{{item.REMARKS}}</view>
<view class="check-items-select">
<radio-group class="block">
<view class="flex justify-between padding-sm">
<view class="select">
<view @click="checkTrue({index:index},0)" class="flex align-center">
<radio class='mr10' :class="item.ISNORMAL==0?'checked':''" :checked="item.ISNORMAL==0" disabled></radio>
<text>合格</text>
</view>
</view>
<view class="select">
<view @click="checkTrue({index:index},1)" class="flex align-center">
<radio class='red mr10' :class="item.ISNORMAL==1?'checked':''" :checked="item.ISNORMAL==1" disabled ></radio>
<text>不合格</text>
</view>
</view>
</view>
<view v-if="item.ISNORMAL==0 || item.ISNORMAL==1" class="input" >
<textarea :disabled="item.OPERATION_TYPE === 1 ? true : false" maxlength="-1" v-model="item.REMARK" placeholder="检查详细描述" :class="item.OPERATION_TYPE === 1 ? 'bgh' : ''" style="border: 1px solid #eeeeee; z-index: 999; height: 50px; padding: 10px;font-size: 12px; width: 100%"></textarea>
</view>
</radio-group>
</view>
</view>
<view class="check-items">
<!-- <view class="cu-bar bg-white margin-top">-->
<!-- <view class="action">-->
<!-- 检查照片-->
<!-- </view>-->
<!-- <view class="action">-->
<!-- {{ checkimgList.length }}/4-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="cu-form-group">-->
<!-- <view class="grid col-4 grid-square flex-sub">-->
<!-- <view class="bg-img" v-for="(item,index) in checkimgList" :key="index" @tap="viewImage(index,'checkimgList')">-->
<!-- <image :src="baseImgPath + item.filePath" mode="aspectFill"></image>-->
<!-- <view class="cu-tag bg-red" @tap.stop="delImg" data-type="2" :data-index="index">-->
<!-- <text class='cuIcon-close'></text>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="solids" @tap="chooseImage()" v-if="checkimgList.length<4">-->
<!-- <text class='cuIcon-cameraadd'></text>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<view class="de-drawer">
<view class="bg-white">
<view class="action">实时照片</view>
<view style="color: red;font-size: 10px">*照片说明车辆正前方左右两侧45°角及车尾部拍照</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in liveImgs" :key="index">
<image
:src="baseImgPath + item.filePath"
mode="aspectFill"
@click="clickImg(baseImgPath + item.filePath)"
>
</image>
<!-- 删除图片按钮 -->
<view class="cu-tag bg-red" @tap.stop="DelImg(index)" data-type="0">
<text class='cuIcon-close'></text>
</view>
</view>
<!-- 上传图片按钮仅当没有图片时显示 -->
<view class="solids" @tap="ChooseImage"
v-if="liveImgs.length < 4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
</view>
</view>
<view class="check-items">
<view class="wui-sign" >
<view class="title">负责人签字</view>
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">手写签字</button>
</view>
<view class="wui-sign-box" v-show="imgList && imgList.length > 0">
<view class="sign-title">
签字照片
</view>
<view class="wui-sign-cotent">
<view class="sign-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" data-type="0" :data-url="imgList[index].filePath">
<image :src="imgList[index].filePath" mode="aspectFit"></image>
</view>
</view>
</view>
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<writing-board @confirm="subCanvas" @cancel="hideModal"></writing-board>
</view>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
<canvas style="width: 300px; height: 150px; position: absolute; top: -9999px;" canvas-id="watermarkCanvas"></canvas>
<view class="bottom-fixed" @tap.stop="openAuth('ACCESS_FINE_LOCATION')">
<button :loading="buttonloading" class="cu-btn bg-green" @click="$noMultipleClicks(goSubmit)"></button>
</view>
<yk-authpup ref="authpup" type="top" @changeAuth="$noMultipleClicks(save)" :permissionID="permissionID"></yk-authpup>
</view>
</template>
<script>
import {
basePath,corpinfoId,loginUser,loginSession,formatDate,baseImgPath
} from '@/common/tool.js';
import gcoord from '@/common/gcoord.js'
import ykAuthpup from "@/components/yk-authpup/yk-authpup"
export default {
data() {
return {
baseImgPath:baseImgPath,
permissionID:'',
noClick:true,
buttonloading: false,
list: [],
pd:[],
CHECKTYPE_ID:'',
checkimgList:[],
modalName:null,
imgList:[],
liveImgs: [],
}
},
onLoad(e){
this.todayDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm');
this.CHECKTYPE_ID=e.CHECKTYPE_ID;
this.CHECKTYPE_NAME = e.CHECKTYPE_NAME;
this.WAYBILLREGISTRATION_ID = e.WAYBILLREGISTRATION_ID;
console.log(this.WAYBILLREGISTRATION_ID)
this.getData();
loginSession();
},
onShow() {
var _this = this;
if(_this.initflag){
_this.initflag = false;
_this.$forceUpdate();//强制刷新
}
},
methods: {
ChooseImage() {
var _this = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['camera'],
success: (res) => {
const tempFilePath = res.tempFilePaths[0];
uni.getLocation({
type: 'gcj02',
geocode: true,
success: function (locationRes) {
const locationAddress = `${locationRes.address.province}${locationRes.address.city}${locationRes.address.district}${locationRes.address.street}${locationRes.address.streetNum}${locationRes.address.poiName}`;
// 创建画布
const ctx = uni.createCanvasContext('watermarkCanvas', _this);
ctx.drawImage(tempFilePath, 0, 0, 300, 150); // 图片大小
ctx.setFontSize(20); // 水印字体大小
ctx.setFillStyle('red'); // 水印字体颜色
ctx.setFontSize(10); // 调整字体大小,适应位置信息
// 绘制水印
ctx.fillText(`当前时间: ${_this.todayDate}`, 10, 120); // 根据实际情况调整位置
ctx.fillText(`当前位置: ${locationAddress}`, 10, 130); // 根据实际情况调整位置
ctx.draw(false, () => {
// 将画布内容保存为图片
uni.canvasToTempFilePath({
canvasId: 'watermarkCanvas',
success: function(res) {
let img = {
IMGFILES_ID: '',
FILEPATH: res.tempFilePath // 使用带有水印的图片路径
};
_this.uploadFilePromise(img.FILEPATH, 'file')
// _this.liveImgs.push(img)
console.log(_this.liveImgs)
// .then(() => {
// uni.showToast({
// title: '实时照片上传成功',
// icon: 'success'
// });
// }).catch(error => {
// uni.showToast({
// title: '实时照片上传失败: ' + error,
// icon: 'none'
// });
// });
}
}, _this);
});
},
fail: function () {
uni.showToast({
title: '获取位置信息失败',
icon: 'none'
});
}
});
}
});
},
clickImg(url) {
uni.previewImage({
urls: [url],
current: '',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
DelImg(index) {
var _this = this;
uni.showModal({
content: '确定要删除这张图片吗?',
cancelColor: "#000000",
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
_this.liveImgs.splice(index,1)
}
}
})
},
uploadFilePromise(filePath, name) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: basePath + '/app/drivingtype/saveFile',
filePath: filePath,
name: name,
formData: {
CORPINFO_ID:loginUser.CORPINFO_ID,
},
success: ({data}) => {
let img = {};
img.filePath = JSON.parse(data).FILE_PATH;
this.liveImgs.push(img)
console.log(this.liveImgs)
},
fail: (err) => {
uni.showModal({
content: "图片上传失败",
showCancel: false
});
}
});
});
},
// delImg(e) {
// var _this = this;
// uni.showModal({
// title: '秦安双控',
// content: '确定要删除这张图片吗?',
// cancelColor: "#000000",
// cancelText: '取消',
// confirmText: '确定',
// success: res => {
// if (res.confirm) {
// uni.request({
// url: basePath+'/app/eightwork/deleteFile',
// method: 'POST',
// dataType: 'json',
// header: {
// 'Content-type':'application/x-www-form-urlencoded'
// },
// data: {
// FILE_PATH:_this.checkimgList[e.currentTarget.dataset.index].filePath
// },
// success: (res) => {
// uni.showToast({
// icon: 'none',
// title: '删除成功',
// duration: 1500
// });
// this.checkimgList.splice(e.currentTarget.dataset.index, 1)
// },
// fail: (err) => {
// uni.showModal({
// content: "删除失败",
// showCancel: false
// });
// }
// })
// }
// }
// })
// },
// chooseImage() {
// uni.chooseImage({
// count: 1, //默认9
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
// sourceType: ['camera', 'album'], //从相册选择
// success: (res) => {
// uni.uploadFile({
// url: basePath+'/app/eightwork/saveFile',
// filePath: res.tempFilePaths[0],
// name: 'file',
// formData: {
// CORPINFO_ID:loginUser.CORPINFO_ID,
// },
// success: ({data}) => {
// let img = {};
// img.filePath = JSON.parse(data).FILE_PATH;
// this.checkimgList.push(img)
// console.log(this.checkimgList)
// },
// fail: (err) => {
// uni.showModal({
// content: "图片上传失败",
// showCancel: false
// });
// }
// })
// }
// });
// },
/*
*手写板
*/
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
uploadImgFaults(files,signtime) {
this.imgList.map((item,index) => {
var img = {}
img.name = 'file'+index
img.uri = item.filePath
files.push(img)
signtime.push(item.SIGNER_TIME)
})
},
//完成
subCanvas(e) {
this.imgList.splice(0,this.imgList.length);
this.imgList.push(e);
e.SIGNER_TIME = formatDate(new Date(), 'yyyy-MM-dd hh:mm');
this.hideModal()
},
ViewImage(e) {
let files =[];
files.push(e.currentTarget.dataset.url)
uni.previewImage({
urls: files,
current: e.currentTarget.dataset.url
});
},
getData() {
var _this = this;
console.log(_this)
uni.showLoading({
title: '请稍候'
})
uni.request({
url: basePath + '/app/drivingtype/listForSafetyDrivingType', // /app/listmanager/goCheck
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
CHECKTYPE_ID: _this.CHECKTYPE_ID,
USER_NAME : loginUser.NAME,
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
if("success" == res.data.result){
uni.hideLoading();
_this.pd=res.data.pd;
_this.list = res.data.varList;
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
});
},
openAuth(permissionID){
this.permissionID = permissionID;
setTimeout(()=>{
this.$refs['authpup'].open();
},200)
},
//去保存
save: function (){
var _this = this;
for(var i=0;i<_this.list.length;i++){
if(this.list[i].ISNORMAL && this.list[i].OPERATION_TYPE === 2) {
var REMARK = ''
if (this.list[i].ISNORMAL === 0 || this.list[i].ISNORMAL === 1) {
REMARK = _this.list[i].REMARK
}
if (!REMARK) {
uni.showToast({
icon: 'none',
title: '第'+(i+1)+'项检查为填写检查,检查结果不能为空',
duration: 1500
});
return;
}
}
}
uni.showLoading({
title: '请稍候'
})
var items=[];
var ids=[];
for(var i=0;i<_this.list.length;i++){
var item = {};
if(_this.list[i].ISNORMAL>-1 ) {
item.CUSTOM_ITEM_ID = _this.list[i].CUSTOM_ITEM_ID
item.ISNORMAL = _this.list[i].ISNORMAL
if (_this.list[i].ISNORMAL === 0 || _this.list[i].ISNORMAL === 1) {
item.REMARK = _this.list[i].REMARK
}
item.DRIVINGTYPE_ID = _this.list[i].DRIVINGTYPE_ID
items.push(item)
}
}
let longitude;
let latitude;
uni.getLocation({
type: 'GCJ02',
success: function (res1) {
longitude = res1.longitude;
latitude = res1.latitude;
var result = gcoord.transform(
[longitude, latitude], // 经纬度坐标
gcoord.GCJ02, // 当前坐标系
gcoord.BD09 // 目标坐标系
);
longitude = result[0];
latitude = result[1];
//发送 post 请求提交保存
this.buttonloading = true
uni.request({
url: basePath+'/app/customCheckRecord/add', // /app/checkrecord/add'
xhrFields: {
withCredentials: true
},
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
CUSTOM_ID:_this.listId,
LIST_NAME:_this.listName,
CREATOR:loginUser.NAME,
LATITUDE:latitude,
LONGITUDE:longitude,
ITEMS:JSON.stringify(items),
IDS:ids.join(","),
CHECKRECORD_ID:_this.CHECKRECORD_ID,
tm:new Date().getTime(),
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: function(res){
this.buttonloading = false
if("success" == res.data.result){
uni.showToast({
icon: 'none',
title: '提交成功',
duration: 1500
});
setTimeout(function(){
var pages = getCurrentPages(); // 获取当前页面栈
var prePage = pages[pages.length - 2]; // 上一个页面
prePage.$vm.initflag = true; // A 页面 init方法 为true
uni.navigateBack({});
uni.hideLoading();
},1500);
}else {
uni.showToast({
title: "系统错误",
duration: 2000
});
}
}
})
},
fail: function(res){
uni.hideLoading();
uni.showToast({
title: "获取位置失败",
duration: 2000
});
}
});
},
goSubmit(){
var _this = this;
let required = true
uni.showLoading({
title: '请稍候'
})
if (_this.liveImgs.length <= 0) {
uni.showToast({
icon: 'none',
title: '请上传车辆检查照片',
duration: 1500
});
return;
}
if (_this.liveImgs.length < 4) {
uni.showToast({
icon: 'none',
title: '车辆检查需要4张照片',
duration: 1500
});
return;
}
if (_this.imgList.length <= 0) {
uni.showToast({
icon: 'none',
title: '请签字',
duration: 1500
});
return;
}
var files = [];
var signtime = [];
const formData={}
this.uploadImgFaults(files,signtime)
formData.SIGNTIME = signtime
formData.CORPINFO_ID = loginUser.CORPINFO_ID
formData.USER_ID = loginUser.USER_ID
formData.USER_NAME = loginUser.USERNAME
formData.CHECKTYPE_ID = this.CHECKTYPE_ID
formData.IMG_PATH = this.liveImgs.map(item => {
return item.filePath
}).join(",")
formData.checklist = JSON.stringify(this.list)
if(this.CHECKTYPE_NAME == "出车前" || this.CHECKTYPE_NAME == "行车中"){
formData.WAYBILLSTATUS = 1
}else if (this.CHECKTYPE_NAME == "收车后"){
formData.WAYBILLSTATUS = 2
}
formData.WAYBILLREGISTRATION_ID = this.WAYBILLREGISTRATION_ID
console.log(JSON.stringify(this.list))
uni.uploadFile({
url: basePath+'app/drivingitem/add',
files: files,
formData:formData,
success: (res) => {
uni.showToast({
icon:'none',
title: '保存成功',
duration: 2000
});
_this.goback()
},
fail: (err) => {
uni.hideLoading();
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
})
},
goback(){
var pages = getCurrentPages(); // 获取当前页面栈
var prePage = pages[pages.length - 2]; // 上二级页面
prePage.$vm.initflag = true; // A 页面 init方法 为true
uni.navigateBack({delta: 2});
uni.hideLoading();
},
//点击合格
checkTrue(e,STATUS) {
let _this=this;
_this.list[e.index].ISNORMAL=STATUS;
console.log(_this.list[e.index].ISNORMAL)
_this.$forceUpdate();//强制刷新
_this.$set(_this.list[e.index], 'REMARK', _this.list[e.index].REMARK)
},
}
}
</script>
<style>
.select radio {
transform: scale(0.9);
}
.bgh{
background: #f8f6f6;
color: #d9d7d7;
}
</style>