yxk_h5_master/pages/zytljl/deal.vue

872 lines
30 KiB
Vue
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="reader-box" v-if="isScaning">
<view class="reader" id="reader-sbxx"></view>
</view>
<view class="page" v-else>
<!-- 车间 -->
<mpvue-picker themeColor="#007AFF" ref="cjPicker" mode="selector" :deepLength="deepLength"
@onConfirm="pickerCjConfirm" :pickerValueArray="cjList"></mpvue-picker>
<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="deepLength"
@onConfirm="pickerConfirm" :pickerValueArray="task_level"></mpvue-picker>
<!-- <view class="item">
<view class="itemname">现场稽查单号</view>
<view class="itemtext">
<input class="iteminput" disabled placeholder="自动生成" :value="devInfo.xcjcdh" />
</view> -->
<!-- <view class="itemtext">
<input class="iteminput InputRightMargin" placeholder="请输入设备编号或扫码" :value="devInfo.serialno"/>
<uni-icons type="scan" class="myarrowright" style="right: 0px;"></uni-icons>
</view> -->
<!-- </view> -->
<!-- <view class="item item_line">
<view class="itemname redMi">车间</view>
<view class="itemtext" @click="showCj()">
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="info.cj" />
<uni-icons type="arrowright" class="myarrowright" style="right: 0px"></uni-icons>
</view>
</view> -->
<!-- <view class="item">
<view class="itemname">设备类别</view>
<view class="itemtext">
<input class="iteminput" disabled :value="devInfo.model" />
</view>
</view> -->
<!-- <view class="item">
<view class="itemname redMi">检查类别</view>
<view class="itemtext" @click="showSinglePicker">
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="info.jclb" />
<uni-icons type="arrowright" class="myarrowright" style="right: 0px"></uni-icons>
</view>
</view> -->
<view class="item">
<view class="itemname">处理人</view>
<view class="itemtext">
<input class="iteminput InputRightMargin" disabled placeholder="处理人" :value="info.clry" />
</view>
</view>
<view class="item">
<view class="itemname">处理时间</view>
<view class="itemtext">
<view>
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="info.clrq" />
<!-- <img src="../../static/img/dateIcon.png" class="dateIcon" /> -->
</view>
</view>
</view>
<!-- <view class="item" @click="onShowDatePicker('jcrq')">
<view class="itemname redMi">检验日期</view>
<view class="itemtext">
<view>
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="info.jcrq" />
<img src="../../static/img/dateIcon.png" class="dateIcon" />
</view>
</view>
</view> -->
<!-- <view class="item">
<view class="itemname redMi">检验人员</view>
<view class="itemtext" @click="selectPeople1(['jcry', 'jcryid'])">
<input class="iteminput InputRightMargin" disabled placeholder="请选择检验人员" :value="info.jcry" />
<img src="../../static/img/personlistIcon.png" class="dateIcon" />
</view>
</view> -->
<!-- <view class="item">
<view class="itemname">规格型号</view>
<view class="itemtext">
<input class="iteminput" disabled :value="devInfo.type" />
</view>
</view>
<view class="item item_line">
<view class="itemname">安装地点</view>
<view class="itemtext">
<input class="iteminput" disabled :value="devInfo.site" />
</view>
</view> -->
<!-- <view class="myContainer acceptTitle">故障信息</view>
<view class="item item_line">
<view class="itemname redMi">任务等级</view>
<view class="itemtext" @click="showSinglePicker">
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="info.level_label" />
<uni-icons type="arrowright" class="myarrowright" style="right: 0px"></uni-icons>
</view>
</view> -->
<view class="photo_container item_line">
<view class="pzqd redMi">整改图片</view>
<view class="photo_out">
<view class="imgwrap" v-for="(items, index) in imgsrc_list_local" :key="index">
<view class="myimgBox" @click="reUpload(index)">
<view class="img">
<img class="uploadimg" :src="items" />
<view class="cxsc">重新上传</view>
</view>
</view>
<img src="../../static/img/delete.png" class="deleteimg" @click="deleteImg(index)" />
</view>
<view class="imgwrap" @click="chooseImg()">
<view class="myimgBox">
<view class="img upload_btn">
<img src="../../static/img/uploadimg.png" />
<view class="sctp">上传图片</view>
</view>
</view>
</view>
</view>
</view>
<view class="item item_line item_textarea">
<view class="itemname">解决方案</view>
<textarea class="textarea" placeholder="请输入解决方案" v-model="info.jjfa
" @change="infoChange"></textarea>
</view>
<!-- <view class="item item_line item_textarea">
<view class="itemname">备注</view>
<textarea class="textarea" placeholder="请输入备注" v-model="info.bz" @change="infoChange"></textarea>
</view> -->
<!-- <view class="item item_line" @click="onShowDatePicker">
<view class="itemname">要求完成时间</view>
<view class="itemtext">
<view>
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="info.planTime" />
<img src="../../static/img/dateIcon.png" class="dateIcon" />
</view>
</view>
</view> -->
<!-- <view class="item">
<view class="itemname redMi">责任人</view>
<view class="itemtext" @click="selectPeople1()">
<input class="iteminput InputRightMargin" disabled placeholder="请选择责任人" :value="zrr.name" />
<img src="../../static/img/personlistIcon.png" class="dateIcon" />
</view>
</view> -->
<!-- <view class="item item_line">
<view class="itemname">抄送人</view>
<view class="itemtext" @click="selectPeople2()">
<input class="iteminput InputRightMargin" disabled placeholder="请选择抄送人"
:value="formatCsrName(targetList)" />
<img src="../../static/img/personlistIcon.png" class="dateIcon" />
</view>
</view> -->
<!-- <view class="item item_line">
<view class="itemname">报修人</view>
<view class="itemtext">
<input class="iteminput" disabled :value="bxr" />
</view>
</view> -->
<view class="fixMargin"></view>
<view class="fixBottom">
<view class="uni-flex uni-row">
<!-- <view style="-webkit-flex: 1; flex: 1">
<button type="primary" plain="true" style="width: 90%; background: #fff"
@click="goAddRepair('zc')">
暂存
</button>
</view> -->
<view style="-webkit-flex: 1; flex: 1">
<button type="primary" style="width: 90%" @click="goAddRepair('tj')">
确认提交
</button>
</view>
</view>
</view>
<mx-datepicker type="datetime" :value="info.planTime" :show="showPicker" @confirm="onSelected"
@cancel="onSelected"></mx-datepicker>
<view class="goHome" @click="goMain('repairInfo')">
<img src="../../static/img/gohome.png" />
</view>
<view class="mysearchlist" style="z-index: 10000">
<chooseUserSingle ref="mysearchlist" :showsearch.sync="show_search_user1"
:itemInfo_.sync="search_value_user1">
</chooseUserSingle>
</view>
<view class="mysearchlist" style="z-index: 10000">
<chooseUserMulti ref="mysearchlist" :showsearch.sync="show_search_user2"
:itemInfo_.sync="search_value_user2">
</chooseUserMulti>
</view>
<view class="mysearchlist" style="z-index: 10000">
<chooseEquipmentSingle ref="mysearchlist" :showsearch.sync="show_search_user3"
:itemInfo_.sync="search_value_user3">
</chooseEquipmentSingle>
</view>
</view>
</view>
</template>
<script>
import { config } from "../../request/js/config.js";
import chooseUserSingle from "@/components/xinsoft-search-list/chooseUserSingle.vue";
import chooseUserMulti from "@/components/xinsoft-search-list/chooseUserMulti.vue";
import chooseEquipmentSingle from "@/components/xinsoft-search-list/chooseEquipmentSingle.vue";
import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue";
import mxDatepicker from "@/components/mx-datepicker/mx-datepicker.vue";
import uniIcons from "@/components/uni-icons/uni-icons.vue";
import jweixin from "@/jweixin-module/index.js";
import { Html5Qrcode } from "html5-qrcode";
import { getTimer } from '../../common/tools.js'
export default {
components: {
mxDatepicker,
mpvuePicker,
uniIcons,
chooseUserSingle,
chooseUserMulti,
chooseEquipmentSingle,
},
data() {
return {
html5Qrcode: null,
isScaning: false,
config: config,
task_level: [],
imgsrc_list: [],
imgsrc_list_local: [],
showPicker: false,
deepLength: 1,
devInfo: {},
zrr: {},
csr: [],
repairInfo: {},
info: {},
id: "",
bxr: "",
targetList: [],
show_search_user1: false,
search_value_user1: "",
show_search_user2: false,
search_value_user2: "",
show_search_user3: false,
search_value_user3: "",
cjList:[],
//时间选择器
timeFrom:null,
selFrom:null
};
},
onLoad(option) {
let _this = this;
this.id = option.id || "";
// var otherInfos = uni.getStorageSync('otherInfo');
uni.getStorage({
key: "userInfo",
success: function (res) {
_this.info.clry = res.data.name;
_this.info.clryid = res.data.userId;
_this.info.clrq = getTimer();
},
});
},
watch: {
search_value_user1(val) {
const { NAME,userId } = val
this.info[this.selFrom[0]] = NAME;
this.info[this.selFrom[1]] = userId;
this.info = {...this.info}
// let obj = { userId: newv.userId, name: newv.NAME };
// this.zrr = obj;
// var repairInfo = uni.getStorageSync("repairInfo");
// if (!repairInfo) {
// repairInfo = {};
// }
// repairInfo.zrr = this.zrr;
// uni.setStorage({
// key: "repairInfo",
// data: repairInfo,
// success: function () {},
// });
},
search_value_user2(newv) {
var detail = [];
newv.forEach((item) => {
let obj = { userId: item.userId, name: item.NAME };
detail.push(obj);
});
if (newv.length > 0) {
var repairInfo = uni.getStorageSync("repairInfo");
if (!repairInfo) {
repairInfo = {};
}
this.targetList = detail;
repairInfo.csr = this.targetList;
uni.setStorage({
key: "repairInfo",
data: repairInfo,
success: function () {},
});
}
},
search_value_user3(newv) {
let obj = {
id: newv.id,
name: newv.name,
serialno: newv.serialno,
model: newv.model,
type: newv.type,
site: newv.site,
};
this.devInfo = obj;
var repairInfo = uni.getStorageSync("repairInfo");
if (!repairInfo) {
repairInfo = {};
}
repairInfo.devInfo = this.devInfo;
uni.setStorage({
key: "repairInfo",
data: repairInfo,
success: function () {},
});
},
},
mounted() {
this.initiateWX();
},
methods: {
openQrcode() {
this.isScaning = true;
Html5Qrcode.getCameras().then((devices) => {
if (devices && devices.length) {
this.html5Qrcode = new Html5Qrcode("reader-sbxx");
this.html5Qrcode.start(
{
facingMode: "environment",
},
{
focusMode: "continuous", //设置连续聚焦模式
fps: 5, //设置扫码识别速度
qrbox: 280, //设置二维码扫描框大小
},
(decodeText, decodeResult) => {
if (decodeText) {
let data = JSON.parse(decodeText);
if (data.id) {
this.getQrCodeInfo(data.id);
this.stopScan(); //关闭扫码功能
}
}
},
(err) => {
// this.stopScan();
// console.log(err); //错误信息
}
);
}
});
},
stopScan() {
this.isScaning = false;
if (this.html5Qrcode) {
this.html5Qrcode.stop();
}
},
//获取微信相关
initiateWX() {
this.$http
.request({
url: "/apis/weChat/getSignature",
params: {
// url:"http://120.132.17.220:18093/gyhl-app/"
url: window.location.href.split("#")[0],
},
})
.then((res) => {
if (res.data.code == 0) {
var s = res.data;
jweixin.config({
beta: true,
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来若要查看传入的参数可以在pc端打开参数信息会通过log打出仅在pc端时才会打印。
appId: s.corpId, // 必填,公众号的唯一标识
timestamp: s.timestamp, // 必填,生成签名的时间戳
nonceStr: s.nonceStr, // 必填,生成签名的随机串
signature: s.signature.toLowerCase(), // 必填签名见附录1
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone",
"scanQRCode",
],
});
} else {
uni.showToast({
title: res.msg ? res.msg : "获取微信配置失败",
icon: "none",
duration: 2000,
});
}
})
.catch((err) => {
uni.showToast({
title: err,
icon: "none",
duration: 2000,
});
});
},
onNavigationBarButtonTap() {
this.openQrcode();
},
/** 点击顶部按钮的方法 */
//         onNavigationBarButtonTap() {
//             console.log("你点击了按钮")
//             // 允许从相机和相册扫码
//             let _this = this;
// jweixin.scanQRCode({
// desc: 'scanQRCode desc',
// needResult: 1, // 默认为0扫描结果由企业微信处理1则直接返回扫描结果
// scanType: ['qrCode'], // 可以指定扫二维码还是条形码(一维码),默认二者都有"qrCode", "barCode"
// success: function(res) {
// if (res.errMsg != 'scanQRCode:ok') {
// uni.showToast({
// title: '扫描结果:' + res.resultStr,
// icon: 'none',
// duration: 2000
// });
// } else {
// //扫码正确
// let resultStr = res.resultStr;
// try {
// resultStr = JSON.parse(resultStr);
// if (resultStr.id) {
// _this.getQrCodeInfo(resultStr.id);
// } else {
// uni.showToast({
// title: '二维码错误,请扫描正确的二维码',
// icon: 'none',
// duration: 2000
// });
// }
// } catch (e) {
// uni.showToast({
// title: '二维码错误,请扫描正确的二维码',
// icon: 'none',
// duration: 2000
// });
// }
// }
// // 回调
// },
// error: function(res) {
// uni.showToast({
// title: 'error:' + res,
// icon: 'none',
// duration: 2000
// });
// if (res.errMsg.indexOf('function_not_exist') > 0) {
// alert('版本过低请升级');
// }
// }
// });
//         },
//调用接口获取二维码信息
getQrCodeInfo(id) {
var _this = this;
this.$http
.request({
url: "/apis/device/detail",
params: {
deviceId: id,
},
method: "POST",
})
.then((res) => {
if (res.data.code == 0) {
let obj = {
id: res.data.data.id,
name: res.data.data.name,
serialno: res.data.data.serialno,
model: res.data.data.model ? res.data.data.model : "",
type: res.data.data.type_mes ? res.data.data.type_mes : "",
site: res.data.data.site ? res.data.data.site : "",
};
_this.devInfo = obj;
var repairInfo = uni.getStorageSync("repairInfo");
if (!repairInfo) {
repairInfo = {};
}
repairInfo.devInfo = this.devInfo;
uni.setStorage({
key: "repairInfo",
data: repairInfo,
success: function () {},
});
} else {
uni.showToast({
title: res.data.msg ? res.data.msg : "扫码失败",
icon: "none",
duration: 2000,
});
}
});
},
selectDevice() {
this.show_search_user3 = true;
// uni.navigateTo({
// url: "selectDevice?flag=addRepair"
// });
},
selectPeople1(val) {
this.selFrom = val
this.show_search_user1 = true;
// uni.navigateTo({
// url: "repairTurnTo?flag="+flag+'&url=addRepair'
// });
},
selectPeople2(data) {
this.show_search_user2 = true;
},
formatCsrName(data) {
var returnName = "";
for (var i = 0; i < data.length; i++) {
if (i == 3) {
returnName += data[i].name + "等等";
break;
} else {
returnName += data[i].name + ",";
}
}
returnName = returnName.substring(0, returnName.length - 1);
return returnName;
},
infoChange: function () {
//保存当前修改信息
var repairInfo = uni.getStorageSync("repairInfo");
if (!repairInfo) {
repairInfo = {};
}
repairInfo.info = this.info;
uni.setStorage({
key: "repairInfo",
data: repairInfo,
success: function () {},
});
},
showCj(){
// this.pickerValueDefault = [0];
this.$refs.cjPicker.show();
},
// 车间
pickerCjConfirm(e) {
this.info.cj = e.label;
this.info.cjid = e.value[0];
this.infoChange();
this.$forceUpdate();
},
pickerConfirm(e) {
this.info.jclb = e.label;
this.info.jclbid = e.value[0];
this.infoChange();
this.$forceUpdate();
},
showSinglePicker() {
// this.pickerValueDefault = [0];
this.$refs.mpvuePicker.show();
},
onShowDatePicker(val) {
this.timeFrom = val
//显示
this.showPicker = true;
},
onSelected(e) {
//选择
this.showPicker = false;
var _this = this;
if (e) {
this.planTime = e.value + ":00";
_this.info[this.timeFrom] = this.planTime;
this.infoChange();
}
},
//上传
chooseImg() {
this.uploadImg();
},
//重新上传
reUpload(index) {
this.uploadImg(index);
},
uploadImg(indexnum) {
var _this = this;
//#ifdef APP-PLUS
var count_ = 9;
//#endif
//#ifndef APP-PLUS
var count_ = 1;
//#endif
if (indexnum != undefined) {
count_ = 1;
}
uni.chooseImage({
count: count_,
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
//#ifdef APP-PLUS
let imgs = chooseImageRes.tempFilePaths.map((value, index) => {
return {
name: "file" + (index + 1), //注意这一行uni的hello的示例中这里为key名+index这样是无法和使用一个固定key名接多个文件的php接口对接上的改为数组下标形式的字符串就解决这个问题了。其效果等同于在html页面上多个同name文件域同时提交表单。
uri: value,
};
});
uni.uploadFile({
url: config.baseURL + "/apis/file/uploadMulti", //接口地址
files: imgs,
fileType: "image",
name: "files",
success: (uploadFileRes) => {
var arr = [];
for (
var i = 0;
i < JSON.parse(uploadFileRes.data).result.length;
i++
) {
arr.push(JSON.parse(uploadFileRes.data).result[i].filePath);
}
if (indexnum != undefined) {
//是重新上传
_this.imgsrc_list[indexnum] = arr[0];
_this.imgsrc_list_local[indexnum] =
chooseImageRes.tempFilePaths[0];
} else {
_this.imgsrc_list = _this.imgsrc_list.concat(arr);
_this.imgsrc_list_local = _this.imgsrc_list_local.concat(
chooseImageRes.tempFilePaths
);
}
_this.$forceUpdate();
var repairInfo = uni.getStorageSync("repairInfo");
if (!repairInfo) {
repairInfo = {};
}
repairInfo.imgsrc_list = _this.imgsrc_list;
repairInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: "repairInfo",
data: repairInfo,
success: function () {},
});
},
fail: function () {
uni.showToast({
title: "上传图片失败",
duration: 2000,
icon: "none",
});
},
});
//#endif
//#ifndef APP-PLUS
uni.uploadFile({
url: config.baseURL + "/apis/file/upload", //接口地址
filePath: tempFilePaths[0],
fileType: "image",
name: "file",
success: (uploadFileRes) => {
var arr = [];
if (indexnum != undefined) {
//是重新上传
_this.imgsrc_list[indexnum] = JSON.parse(
uploadFileRes.data
).filePath;
_this.imgsrc_list_local[indexnum] =
chooseImageRes.tempFilePaths[0];
} else {
_this.imgsrc_list.push(JSON.parse(uploadFileRes.data).filePath);
_this.imgsrc_list_local.push(chooseImageRes.tempFilePaths);
}
_this.$forceUpdate();
var repairInfo = uni.getStorageSync("repairInfo");
if (!repairInfo) {
repairInfo = {};
}
repairInfo.imgsrc_list = _this.imgsrc_list;
repairInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: "repairInfo",
data: repairInfo,
success: function () {},
});
},
fail: function () {
uni.showToast({
title: "上传图片失败",
duration: 2000,
icon: "none",
});
},
});
//#endif
},
});
},
//删除图片
deleteImg(index) {
this.imgsrc_list.splice(index, 1);
this.imgsrc_list_local.splice(index, 1);
this.$forceUpdate();
var repairInfo = uni.getStorageSync("repairInfo");
if (!repairInfo) {
repairInfo = {};
}
repairInfo.imgsrc_list = _this.imgsrc_list;
repairInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: "repairInfo",
data: repairInfo,
success: function () {},
});
},
//点击暂存和确认提交 需要进行的操作。
goAddRepair(flag) {
if (!(this.imgsrc_list && this.imgsrc_list.length>0)) {
uni.showToast({
title: "请上传整改图片",
duration: 2000,
icon: "none",
});
return false;
}
let submitData = {};
submitData = this.info;
submitData.id = this.id;
submitData.zgtp = this.imgsrc_list[0];
let url= "apis/hl/ahgl/xcjc/make"
// if (!submitData.id) {
//提交进行的操作
// } else if (submitData.id) {
// //暂存进行的操作。
// url = "apis/hl/ahgl/xcjc/edit";
// }
// if (!submitData.jcrq ) {
// uni.showToast({
// title: "请选择检验日期",
// duration: 2000,
// icon: "none",
// });
// return false;
// }
// if (!submitData.jcry ) {
// uni.showToast({
// title: "请选择检验人员",
// duration: 2000,
// icon: "none",
// });
// return false;
// }
// if (!submitData.cj ) {
// uni.showToast({
// title: "请选择车间",
// duration: 2000,
// icon: "none",
// });
// return false;
// }
// if (!submitData.jclb) {
// uni.showToast({
// title: "请选择检查类别",
// duration: 2000,
// icon: "none",
// });
// return false;
// }
// if (!submitData.zrr) {
// uni.showToast({
// title: "请选择责任人",
// duration: 2000,
// icon: "none",
// });
// return false;
// }
// if (!submitData.yqwcrq) {
// uni.showToast({
// title: "请选择要求完成时间",
// duration: 2000,
// icon: "none",
// });
// return false;
// }
// console.log(this.otherInfo);
//调取接口进行保存。
this.$http
.request({
url: url,
data: submitData,
})
.then((res) => {
if (res.data.code == 0) {
// uni.removeStorageSync("repairInfo");
uni.showToast({
title: "操作成功",
duration: 1000,
icon: "none",
});
setTimeout(function () {
uni.redirectTo({
url: "/pages/xcjc/6s",
});
}, 1000);
}
})
.catch((err) => {
uni.showToast({
title: "操作失败",
duration: 2000,
icon: "none",
});
});
},
},
onBackPress(options) {
//取消默认的返回事件.用来返回上一页时重新加载页面,删除本地缓存的巡检操作
// if (options.from === 'backButton' || options.from === 'backbutton' || options.from === 'navigateBack') {
// uni.redirectTo({
// url: "patrolDetail?id=" + this.id
// });
// return true;
// }
},
};
</script>
<style scoped>
.reader-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.reader {
width: 100%;
/* width: 540rpx; */
/* /height: 540rpx; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
>>>.picker-item .lb-picker-column .lb-picker-column-label {
-webkit-transition: all 0.3s;
transition: all 0.3s;
line-height: 55px !important;
}
>>>.select-tab-fixed-top {
left: 0;
width: 100%;
z-index: 2;
white-space: nowrap;
}
>>>.popup-layer {
position: fixed;
top: var(--window-top);
margin-top: 40px;
}
</style>