yxk_h5_master/pages/eqRepair/repairRecordAddStep1.vue

674 lines
19 KiB
Vue
Raw Normal View History

2025-08-28 15:21:09 +08:00
<template>
<view class="page">
<view class="step_num">
<view class="step step1">填写报修信息</view>
<view class="step step2">完善维修记录</view>
<view class="step step3">添加维修备件</view>
</view>
<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="deepLength"
@onConfirm="pickerConfirm" :pickerValueArray="task_level"></mpvue-picker>
<view class="item">
<view class="itemname redMi">设备编号</view>
<view class="itemtext">
<input class="iteminput" placeholder="请输入设备编号" :value="devInfo.serialno"/>
</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">
<input class="iteminput" placeholder="请选择" disabled @click='selectDevice' :value="devInfo.name" />
</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">规格型号</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">
<input class="iteminput InputRightMargin" disabled placeholder="请选择" @click="showSinglePicker" :value="info.level_label"/>
<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
</view>
</view>
<view class="item item_line item_textarea">
<view class="itemname redMi">详细描述</view>
<textarea class="textarea" placeholder="请详细描述故障情况" v-model="info.solution" @change='infoChange'></textarea>
</view>
<view class="photo_container item_line">
<view class="pzqd">维修照片</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" @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" style="width: 100%;" @click="stepOneNext">下一步</button>
</view>
</view>
</view>
<mx-datepicker type="datetime" :value="info.planTime" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
<view class="goHome" @click='goMain("addRepairInfo")'>
<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>
</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"
export default {
components: {
mxDatepicker, mpvuePicker,
uniIcons,chooseUserSingle,
chooseUserMulti,chooseEquipmentSingle
},
data() {
return {
config:config,
task_level:[],
imgsrc_list: [],
imgsrc_list_local: [],
showPicker: false,
deepLength:1,
devInfo:{},
zrr:{},
csr:[],
repairInfo:{},
info:{},
eventId:'',
recordId:'',
bxr:'',
targetList: [],
show_search_user1:false,
search_value_user1:"",
show_search_user2:false,
search_value_user2:"",
show_search_user3:false,
search_value_user3:"",
}
},
onLoad(option) {
var _this = this;
this.eventId = option.eventId||'';
this.recordId = option.recordId||'';
uni.getStorage({
key: 'userInfo',
success: function (res) {
_this.bxr = res.data.name
}
});
//如果是编辑,就根据接口获取数据,
if(option.eventId){
this.$http.request({
url: '/apis/repairEvent/getDetail',
params: {
eventId:option.eventId,
},
}).then(res => {
if (res.data.code == 0) {
var records = res.data.repairEvent;
this.devInfo = {
serialno:records.deviceSerialno,
name:records.deviceName,
model:records.deviceModel,
site:records.deciceSite,
type:records.deviceTypeName,
id:records.deviceId
}
this.zrr={
userId:records.engineerUserId,
name:records.engineerUserName
}
res.data.ccIdList.forEach((vals,index)=>{
var json = {
userId:vals.id,
name:vals.name
}
this.targetList.push(json);
});
for(var i=0;i<res.data.repairEventImage.length;i++){
this.imgsrc_list.push(res.data.repairEventImage[i].filePath);
this.imgsrc_list_local.push(config.imgURL+res.data.repairEventImage[i].filePath);
}
this.info = {
planTime:records.planTime, //要求完成时间
solution:records.reventConent, //故障描述
level_value:records.reventLevelId,//存储任务等级
level_label:records.reventLevelName,
eventId:this.eventId,
recordId:this.recordId
}
this.repairInfo = {
info:this.info ,
imgsrc_list:this.imgsrc_list,
imgsrc_list_local:this.imgsrc_list_local,
csr:this.targetList,
zrr:this.zrr,
devInfo:this.devInfo,
}
uni.setStorage({
key: 'addRepairInfo',
data: _this.repairInfo,
success: function () {
}
});
}
}).catch(err => {
uni.showToast({
title: '获取信息失败',
icon: 'none',
duration: 2000
});
});
}else{
//如果不是是新增获取session中的数据。
uni.getStorage({
key: 'addRepairInfo',
success: function (res) {
var session = res.data;
_this.devInfo = session.devInfo||{};
_this.info = session.info||{};
_this.targetList = session.csr||[];
_this.zrr = session.zrr||[];
_this.imgsrc_list = session.imgsrc_list||[];
_this.imgsrc_list_local = session.imgsrc_list_local||[];
}
});
}
//初始化获取 任务等级数据字典。
this.$http.request({
url: '/apis/dict/getDictsByType',
params: {
type: 'task_level'
},
}).then(res=>{
if(res.statusCode == '200'){
var useType = res.data.datas;
for (let i = 0; i < useType.length; i++) {
var myVal=
{
'label': useType[i].name,
'value': useType[i].id
}
_this.task_level.push(myVal);
}
if(!_this.info.level_value ){
_this.info.level_value = useType[0].id;
_this.info.level_label = useType[0].name;
_this.infoChange();
}
}
}).catch(err=>{
console.log(err);
});
},
watch:{
search_value_user1(newv){
let obj = {userId: newv.userId, name: newv.NAME};
this.zrr = obj;
var addRepairInfo = uni.getStorageSync('addRepairInfo');
if(!addRepairInfo){
addRepairInfo = {}
}
addRepairInfo.zrr = this.zrr
uni.setStorage({
key: 'addRepairInfo',
data: addRepairInfo,
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 addRepairInfo = uni.getStorageSync('addRepairInfo');
if(!addRepairInfo){
addRepairInfo = {}
}
this.targetList=detail
addRepairInfo.csr = this.targetList
uni.setStorage({
key: 'addRepairInfo',
data: addRepairInfo,
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 addRepairInfo = uni.getStorageSync('addRepairInfo');
if(!addRepairInfo){
addRepairInfo = {}
}
addRepairInfo.devInfo = this.devInfo
uni.setStorage({
key: 'addRepairInfo',
data: addRepairInfo,
success: function () {
}
});
},
},
methods: {
selectDevice(){
this.show_search_user3=true;
// uni.navigateTo({
// url: "selectDevice?flag=repairRecordAddStep1"
// });
},
selectPeople1(){
this.show_search_user1=true;
// uni.navigateTo({
// url: "repairTurnTo?flag="+flag+'&url=repairRecordAddStep1'
// });
},
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 addRepairInfo = uni.getStorageSync('addRepairInfo');
if(!addRepairInfo){
addRepairInfo = {}
}
addRepairInfo.info = this.info;
uni.setStorage({
key: 'addRepairInfo',
data: addRepairInfo,
success: function () {
}
});
},
pickerConfirm(e){
this.info.level_label = e.label;
this.info.level_value = e.value[0]; //我也不知道为什么这边是数组可能改picker框架支持多选。
this.infoChange();
this.$forceUpdate();
},
showSinglePicker() {
this.pickerValueDefault = [0]
this.$refs.mpvuePicker.show()
},
onShowDatePicker() { //显示
this.showPicker = true;
},
onSelected(e) { //选择
this.showPicker = false;
var _this = this;
if (e) {
this.planTime = e.value+':00';
_this.info.planTime = 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 addRepairInfo = uni.getStorageSync('addRepairInfo');
if(!addRepairInfo){
addRepairInfo = {}
}
addRepairInfo.imgsrc_list = _this.imgsrc_list||[]
addRepairInfo.imgsrc_list_local = _this.imgsrc_list_local||[]
uni.setStorage({
key: 'addRepairInfo',
data: addRepairInfo,
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 addRepairInfo = uni.getStorageSync('addRepairInfo');
if(!addRepairInfo){
addRepairInfo = {}
}
addRepairInfo.imgsrc_list = _this.imgsrc_list||[];
addRepairInfo.imgsrc_list_local = _this.imgsrc_list_local||[]
uni.setStorage({
key: 'addRepairInfo',
data: addRepairInfo,
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 addRepairInfo = uni.getStorageSync('addRepairInfo');
if(!addRepairInfo){
addRepairInfo = {}
}
addRepairInfo.imgsrc_list = this.imgsrc_list||[];
addRepairInfo.imgsrc_list_local = this.imgsrc_list_local||[]
uni.setStorage({
key: 'addRepairInfo',
data: addRepairInfo,
success: function () {
}
});
},
//下一步
stepOneNext(){
var _this = this;
if(!(this.devInfo && this.devInfo.id)){
uni.showToast({
title: '请选择报修设备',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.info && this.info.solution)){
uni.showToast({
title: '请填写详细描述',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.zrr && this.zrr.userId)){
uni.showToast({
title: '请选择责任人',
duration: 2000,
icon:"none"
});
return false;
}
uni.navigateTo({
url: "repairRecordAddStep2"
});
}
},
onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面,删除本地缓存的巡检操作
// if (options.from === 'backButton' || options.from === 'backbutton' || options.from === 'navigateBack') {
// uni.redirectTo({
// url: "patrolDetail?id=" + this.id
// });
// return true;
// }
}
}
</script>
<style scoped>
.step_num {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 80upx;
background-color: #fff;
padding-right: 48upx;
box-sizing: border-box;
margin-bottom: 20upx;
}
.step {
position: relative;
font-size: 26upx;
line-height: 80upx;
padding-left: 30upx;
float: left;
}
.step:before {
position: absolute;
left: 0px;
content: '1';
border: 1px solid #000;
width: 28upx;
height: 28upx;
box-sizing: border-box;
line-height: 28upx;
border-radius: 200upx;
font-size: 20upx;
text-align: center;
top: 26upx;
}
.step:after {
position: absolute;
content: '';
width: 40upx;
height: 2upx;
background-color: #000;
top: 40upx;
left: 180upx;
}
.step2 {
margin-left: 44upx;
color: #828282;
}
.step2:before {
content: '2';
border: 2upx solid #828282;
}
.step2:after{
background-color: #828282;
}
.step3:after {
background-color: transparent;
}
.step3 {
margin-left: 44upx;
color: #828282;
}
.step3:before {
content: '3';
border: 2upx solid #828282;
}
</style>