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

748 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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}}排查项</block>
</cu-custom>
<scroll-view scroll-y>
<view class="check-items" v-if="CHECKTYPE_NAME !== '待承诺'" 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" v-if="CHECKTYPE_NAME === '待承诺'" v-for="(item,index) in promiseList" :key="item.DRIVINGCOMMITMENT_ID">
<view class="title">承诺项:{{item.INQUIRYCONTENT}}</view>
<view class="check-items-select">
<radio-group class="block">
<view class="flex justify-between padding-sm">
<view class="select">
<view @click="checkTrue1({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="checkTrue1({index:index},1)" class="flex align-center">
<radio class='yellow mr10' :class="item.ISNORMAL==1?'checked':''" :checked="item.ISNORMAL==1" disabled ></radio>
<text>不是</text>
</view>
</view>
<view class="select">
<view @click="checkTrue1({index:index},2)" class="flex align-center">
<radio class='red mr10' :class="item.ISNORMAL==2?'checked':''" :checked="item.ISNORMAL==2" 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" v-if="CHECKTYPE_NAME !== '待承诺'">
<!-- <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: [],
promiseList: [],
}
},
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();
this.getData2();
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
});
}
}
});
},
getData2() {
var _this = this;
console.log(_this)
uni.showLoading({
title: '请稍候'
})
uni.request({
url: basePath + '/app/drivingtype/safetycommitment',
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.promiseList = 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() {
if(this.CHECKTYPE_NAME !== "待承诺") {
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
});
}
})
}else{
var _this = this;
let required = true
uni.showLoading({
title: '请稍候'
})
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.promiseList)
if (this.CHECKTYPE_NAME == "待承诺"){
formData.WAYBILLSTATUS = 0
}
formData.WAYBILLREGISTRATION_ID = this.WAYBILLREGISTRATION_ID
console.log(JSON.stringify(this.list))
uni.uploadFile({
url: basePath + 'app/commitentitem/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)
},
//点击合格
checkTrue1(e,STATUS) {
let _this=this;
_this.promiseList[e.index].ISNORMAL=STATUS;
console.log(_this.promiseList[e.index].ISNORMAL)
_this.$forceUpdate();//强制刷新
_this.$set(_this.promiseList[e.index], 'REMARK', _this.promiseList[e.index].REMARK)
},
}
}
</script>
<style>
.select radio {
transform: scale(0.9);
}
.bgh{
background: #f8f6f6;
color: #d9d7d7;
}
</style>