hz-zhhq-app/pages/malfunc-check/malfunc-check.vue

866 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

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 class="container">
<view class="banner-box">
<image v-if="currentTabIndex == 0" src="/static/imgs/check.jpg" mode=""></image>
<image v-if="currentTabIndex == 1" src="/static/imgs/check.jpg" mode=""></image>
</view>
<view class="main">
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">外包考核</view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">检查记录</view>
</view>
</view>
<view class="content" v-if="currentTabIndex == 0">
<view class="interviewee">
<view class="radio">
<view class="r-div">
<text class="input_left">外包项目</text>
<!-- <text class="input_right" @click="navTo('/pages/repair-record/repair-record')"><image class="right-img" src="../../static/imgs/liebiao.png"></image></text> -->
</view>
<view class="radiolist" style="border-top:0.5px solid #eeeeee">
<view style="border-top: none;border-bottom: 0.5px solid #eeeeee;" class="" @click="showradio(index)" v-for="(item, index) in firstRepairItems" :key="index" :class="[firstIndex == index ? 'showcolor' : '']">
<p class="item_title">{{ item.name }}</p>
<span class="item_more">{{ item.sub_name }}</span>
<image src="/static/imgs/handel.png" v-if="firstIndex == index" />
</view>
</view>
</view>
<view class="form-box">
<view class="form-item">
<text class="label">外包小项:</text>
<view class="ipt-box select">
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<picker class="picker" v-if="secondRepairItems.length > 0" :range="secondRepairItems" @change="changeSecondRepairItems" range-key="name">
<view>{{ secondRepairItems[secondIndex].name }}</view>
</picker>
</view>
</view>
<view class="form-item">
<text class="label">考核区域:</text>
<view class="ipt-box select">
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<picker class="picker" v-if="places.length > 0" :range="places" @change="changePlace" range-key="name">
<view>{{ places[placeIndex].name }}</view>
</picker>
</view>
</view>
<view class="form-item">
<text class="label">楼层:</text>
<view class="ipt-box"><input class="top-t" v-model="repairFloor" placeholder="请输入楼层" maxlength="50" /></view>
</view>
<view class="form-item">
<text class="label">房号:</text>
<view class="ipt-box"><input class="top-t" v-model="repairRoomNo" placeholder="请输入房号(选填)" maxlength="50" /></view>
</view>
<view class="form-item">
<text class="label">考核描述:</text>
<view class="ipt-box">
<input class="top-t" v-model="formDesc" placeholder="请输入考核描述" type="text" maxlength="50" />
</view>
</view>
<view class="form-item">
<text class="label">考核建议:</text>
<view class="ipt-box">
<input class="top-t" v-model="faultProposal" placeholder="请输入考核建议" type="text" maxlength="50" />
</view>
</view>
<view class="form-item">
<text class="label">考核评价:</text>
<view class="ipt-box">
<input class="top-t" v-model="faultEvaluate" placeholder="请输入考核评价" type="text" maxlength="50" />
</view>
</view>
<view class="form-item">
<text class="label">考核分数:</text>
<view class="ipt-box">
<view class="">
<!-- <uni-number-box :min="-50" :max="50" :value="checkFraction" @change="unbChange($event, index)" /> -->
<input class="top-t" v-model="checkFraction" placeholder="请输入考核分数" type="text" maxlength="50" />
</view>
</view>
</view>
</view>
<view style="margin: 20upx;"><text class="input_left">考核图片最多上传3张</text></view>
<view class="pic">
<view class="img-box">
<view class="img-item" v-for="(item, index) in imgs" :key="index">
<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
</view>
<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 3"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
</view>
</view>
<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息,违者将严肃问责追责!</view>
</view>
<view class="occupied"></view>
<view class="footer-btn" @click="submit"><view class="btn">提交</view></view>
</view>
<!-- 检查列表 -->
<view v-else>
<view class="list-content" v-if="repair.length > 0">
<view class="details" v-for="(item, i) in repair" :key="i" @click="details(item)">
<view class="detail_header">
<text class="blueSign"></text>
<text class="font-tilte">外包考核</text>
<text v-if="item.reply_flag =='0'" class="statusred" >未回复</text><!-- statusred -->
<text v-if="item.reply_flag =='1'" class="statusred" style="color: #ff9000;">已回复</text>
<text v-if="item.reply_flag =='2'" class="statusred" style="color: green;">已办结</text>
</view>
<view class="detail_msg">
<!-- <view class="info-item">
<text>巡检人:</text>
<text class="infoSpan">{{ item.userName }}</text>
</view> -->
<view class="info-item">
<text>外包选项:</text>
<text class="infoSpan">{{ item.repair_option_name }}</text>
</view>
<view v-if="item.repair_option_sub" class="info-item" >
<text>外包小项:</text>
<text class="infoSpan">{{ item.repair_option_sub_name}}</text>
</view>
<view class="info-item">
<text>考核位置:</text>
<text class="infoSpan">{{item.repair_place+" "+(item.repair_floor||'')+""+(item.repair_room_no?"-"+item.repair_room_no+'':'')}}</text>
</view>
<view v-if="item.repair_option_sub" class="info-item" >
<text>考核描述:</text>
<text class="infoSpan">{{ item.fault_detail}}</text>
</view>
<view v-if="item.fault_detail" class="info-item">
<text>考核建议:</text>
<text class="infoSpan">{{ item.fault_proposal }}</text>
</view>
<view class="info-item" >
<text>考核评价:</text>
<text class="infoSpan">{{ item.fault_evaluate}}</text>
</view>
<view class="info-item">
<text>考核分数:</text>
<text class="infoSpan">{{item.check_fraction+"分"}}</text>
</view>
<view class="info-item">
<text>考核时间:</text>
<text class="infoSpan">{{ item.repair_time}}</text>
</view>
<view v-if="item.accept_date" class="info-item" >
<text>受理时间:</text>
<text class="infoSpan">{{ formatDate(item.accept_date,'dateTime')}}</text>
</view>
<view v-if="item.finish_date" class="info-item" >
<text>处理时间:</text>
<text class="infoSpan">{{ formatDate(item.finish_date,'dateTime')}}</text>
</view>
<!-- <view class="comment-btn" v-if="item.conmentStatus == 0" @click="goEvaluatePage(item.detailId)">评价</view> -->
<!-- <view class="comment-btn bg-ccc" v-if="item.conmentStatus == 1">已评价</view> -->
</view>
</view>
</view>
<content-none v-else :padTop="20"></content-none>
</view>
<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
<!-- <view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false" >
<view style="background: white;height: 160upx;width: 100%;border-radius: 10upx 10upx 0upx 0upx;position: absolute;bottom: 0upx;">
<view @click="photo" style="border-bottom: 1px solid #000000; border-radius: 10upx 10upx 0upx 0upx; height: 80upx;line-height: 80upx;text-align: center;">
拍摄
</view>
<view @click="getImage" style="height: 80upx;line-height: 80upx;text-align: center;">
从相册选择
</view>
</view>
</view> -->
</view>
</template>
<script>
import { saveFaultRepairInfo, getMyFaultRepairList ,getFaultRepairByParentCode } from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, convertImgToBase64, formatDate,wxSdk,uploadImg } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js';
export default {
components: {
loadMore,
contentNone,
uniNumberBox
},
data() {
return {
formatDate: formatDate,
//分页
page: 1,
pageSize: 10,
loadingType: 0, //0-loading前1-loading中2-没有更多了
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
places: [{ id: '1', name: '科技楼' }, { id: '2', name: '调度楼' }, { id: '3', name: '后勤楼' }, { id: '4', name: '会议中心' }],//, { id: '5', name: '其它' }
placeIndex: 0,
userInfo: getStorage('userInfo'),
entryOrderPic: [],
showIndex: 0,
currentTabIndex: 0,
repair: [],
formBxwz: '',
formDesc: '',
formName: getStorage('userInfo').userName,
formTelp:getStorage('userInfo').telnumber,
faultProposal:"",
faultEvaluate:"",
imgs: [],
imgsId: [],
index: 0,
firstRepairItems:[],
firstIndex:0,
secondRepairItems:[],
secondIndex:0,
repairFloor:'',
repairRoomNo:'',
urgents:['不紧急','紧急'],
urgentIndex:0,
checkFraction:'0',
showAlert:false,
};
},
watch: {
currentTabIndex: function(newVal, oldVal) {
if (newVal ==1) {
this.page = 1;
this.loadingType = 0;
this.dataList();
}else{
}
},
checkFraction:function(newVal, oldVal){
// if(newVal==null||newVal==''){
// this.checkFraction = '';
// return;
// }
// var oneReg = new RegExp(/^[1-9\-][0-9]*/);
// if(oneReg.test(newVal)){
// this.checkFraction = newVal.substring(0,newVal.length-2);
// console.log(this.checkFraction)
// }
var l = newVal.length;
if(l==1){
var oneReg = new RegExp("^[0-9\-]");
if(!oneReg.test(newVal)) {
newVal = newVal.slice(0,-1);
setTimeout(() => { this.checkFraction = newVal }, 100);
}
}else{
let num = newVal.charAt(newVal.length-1)
var reg=new RegExp("[0-9]")
if(!reg.test(num)) {
newVal = newVal.slice(0,-1);
setTimeout(() => { this.checkFraction = newVal }, 100);
}
}
// var ss = newVal.match(oneReg);
// this.changeCheckFraction(ss||'');
// this.checkFraction = ss||'';
// console.log(this.checkFraction);
}
},
onLoad(option) {
this.currentTabIndex = option.currentTabIndex || 0;
// 部门
if (this.currentTabIndex == 1) {
this.page = 1;
this.loadingType = 0;
this.dataList();
}else{
this.getFirstRepairItems();
}
},
onReachBottom() {
if (this.loadingType !== 0 || this.currentTabIndex == 0) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
this.dataList();
},
methods: {
changeSecondRepairItems(e) {
this.secondIndex = e.detail.value;
},
unbChange(value, index) {
this.checkFraction = value;
},
getFirstRepairItems(){
let params = {
method: getFaultRepairByParentCode,
data: {
parentCode:'0',
itemType:2
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
this.firstRepairItems = res.returnData;
this.getSecondRepairItems();
} else {
alertTip(res.returnMsg);
}
});
},
getSecondRepairItems(){
this.secondIndex=0;
var parentCode = this.firstRepairItems[this.firstIndex].code;
let params = {
method: getFaultRepairByParentCode,
data: {
parentCode:parentCode,
itemType:2
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
if(res.returnData.length>0){
this.secondRepairItems = res.returnData;
}else{
this.secondRepairItems = [{id:'',name:'暂无'}]
}
} else {
alertTip(res.returnMsg);
}
});
},
changePlace(e) {
this.placeIndex = e.detail.value;
},
details: function(item) {
uni.navigateTo({
url: '/pages/malfunc-check/check-details-my?id=' + item.id
});
},
dataList() {
let params = {
method: getMyFaultRepairList,
data: {
userId: this.userInfo.id,
pageNum: this.page,
pageSize: this.pageSize,
isInspection:1
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
if (this.page == 1) {
this.repair = res.returnData || [];
} else {
if (res.returnData.length > 0) {
this.repair = this.repair.concat(res.returnData);
this.loadingType = 0;
} else {
this.loadingType = 2;
}
}
} else {
alertTip(res.returnMsg);
}
});
},
navTo(url) {
uni.navigateTo({
url
});
},
submit() {
var regPhone = /^1[3|4|5|6|7|8|9]\d{9}$/;
// if (!regPhone.test(this.formTelp)) {
// alertTip('请输入正确的手机号');
// return false;
// }
if (!this.repairFloor) {
alertTip('请输入楼层');
return false;
}
if (!this.formDesc) {
alertTip('请输入考核描述');
return false;
}
if (!this.faultEvaluate) {
alertTip('请输入考核评价');
return false;
}
if (!this.faultProposal) {
alertTip('请输入考核建议');
return false;
}
// if (!this.formDesc) {
// alertTip('请输入问题描述');
// return false;
// }
let params = {
method: saveFaultRepairInfo,
data: {
userId: this.userInfo.id,
// repairDeptId:this.userInfo.deptId,//this.deptList[this.departmentIndex].id,
// repairDeptName:this.userInfo.deptName,//this.deptList[this.departmentIndex].name,
repairPersonId:this.userInfo.id,
repairPersonName:this.formName,
repairOption: this.firstRepairItems[this.firstIndex].code,
repairOptionSub: this.secondRepairItems[this.secondIndex].code,
repairAddr: this.formBxwz,//详细地址
faultDetail: this.formDesc,
faultPic1: this.imgsId[0],
faultPic2: this.imgsId[1],
faultPic3: this.imgsId[2],
repairPlace:this.places[this.placeIndex].name,
repairPersonPhone:this.formTelp,
isInspection:1,
urgent:this.urgentIndex,
repairFloor:this.repairFloor,
repairRoomNo:this.repairRoomNo,
checkFraction:this.checkFraction,
faultProposal:this.faultProposal,
faultEvaluate:this.faultEvaluate,
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
alertTip(res.returnMsg);
setTimeout(_ => {
this.repair = [];
this.imgs = [];
this.imgsId = []
this.showIndex = 0;
this.currentTabIndex = 1;
this.formBxwz = '';
this.formDesc = '';
}, 2000);
} else {
alertTip(res.returnMsg);
}
});
},
showradio: function(index) {
var self = this;
self.firstIndex = index;
this.getSecondRepairItems();
},
async chooseImg() {
let chec = 0;
let sty = [];
let _this = this;
uni.showActionSheet({
itemList:['拍照','相册'],
success:function(resp){
chec = resp.tapIndex;
if (chec == 0) {
sty = ['camera']; //从相册相机选择
} else {
sty = ['album']; //从相册相机选择
}
uni.chooseImage({
count:3,
sizeType: ['compressed'],
sourceType: sty,
quality: 1,
success: async function(res){
let resData = res.tempFilePaths;
for(let i=0;i<resData.length;i++){
if(_this.imgs.length>3){
break;
}
uni.getImageInfo({
src: resData[i],
success:async (path) => {
convertImgToBase64(path.path, async function(base64) {
if(_this.imgs.length<3){
// _this.imgs.push(base64);
uni.showLoading({
title: '图片上传中'
})
let blength = base64.length;
let glength = 7500;
if(blength<=glength){
let uploadParam = {
base64: base64,
userId: getStorage('userInfo').userId+i,
groupEnd: '1'
}
await uploadImg(uploadParam).then(resu => {
resu = resu.data ;
uni.hideLoading();
if (resu.returnCode != 1) {
alertTip(resu.returnMsg);
}else{
_this.imgs.push(base64);
_this.imgsId.push(resu.returnData+".jpg");
}
});
}else{
let fnum = parseInt(blength/glength);
for(let j=1;j<fnum+1;j++){
if(j==fnum){
let groupBase = base64.slice((j-1)*glength);
console.log(groupBase.length,"groupBaselength");
let uploadParam = {
base64: groupBase,
userId: getStorage('userInfo').userId+i,
groupEnd: '1'
}
await uploadImg(uploadParam).then(resu => {
resu = resu.data ;
if (resu.returnCode == 1) {
_this.imgs.push(base64);
_this.imgsId.push(resu.returnData+".jpg");
} else {
uni.hideLoading();
alertTip(resu.returnMsg);
return;
}
});
}else{
let groupBase = base64.slice((j-1)*glength,glength*j);
let uploadParam = {
base64: groupBase,
userId: getStorage('userInfo').userId+i,
groupEnd: '0'
}
await uploadImg(uploadParam).then(resu => {
resu = resu.data ;
if (resu.returnCode == 1) {
} else {
uni.hideLoading();
alertTip(resu.returnMsg);
return;
}
});
}
}
uni.hideLoading();
}
}
});
},
});
}
}
});
},
fail:function(resp){
console.log(resp.errMsg);
}
});
},
//删除图片
removeImg(index) {
this.imgs.splice(index, 1);
this.imgsId.splice(index, 1);
},
}
};
</script>
<style lang="scss">
@import url('../../static/css/repair/malfunction-repair.css');
@import '@/static/css/common.scss';
.nolist {
font-size: 30upx;
color: #797979;
text-align: center;
margin-top: 20upx;
}
.container {
position: relative;
overflow: hidden;
.banner-box {
width: 100%;
height: 240upx;
position: absolute;
top: 0;
left: 0;
image {
width: 100%;
height: 100%;
}
border-radius: 30upx;
}
.main {
margin: 172upx 40upx 0;
position: relative;
z-index: 10;
.tab-box {
overflow: hidden;
border-radius: 10upx 10upx 0 0;
background: rgba(132, 149, 167, 0.8);
height: 70upx;
.tab-item {
float: left;
height: 70upx;
width: 50%;
font-size: 30upx;
color: #e5f6ff;
text-align: center;
line-height: 70upx;
}
.active {
background: #fff;
color: #333;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
}
}
}
.list-content {
font-size: 28upx;
margin: 0 40rpx;
.details {
background: white;
padding: 0 15upx 15upx;
// border-radius: 15upx;
margin-bottom: 10rpx;
.detail_header {
border-bottom: #f8f8f8 5upx solid;
height: 90upx;
line-height: 90upx;
// margin: 0;
// border-radius: 10upx;
.blueSign {
height: 28upx;
width: 5upx;
background: #00c277;
display: inline-block;
margin-left: 20upx;
vertical-align: middle;
}
.font-tilte {
font-weight: bold;
margin-left: 20upx;
vertical-align: middle;
}
}
.detail_msg {
margin-left: 20upx;
border-radius: 10upx;
overflow: hidden;
view {
height: 60upx;
line-height: 60upx;
}
.status {
position: absolute;
color: red;
margin-left: 580upx;
margin-top: -15upx;
}
}
}
}
.statusgr {
float: right;
margin-right: 30upx;
color: #00c277;
}
.statusred {
float: right;
margin-right: 30upx;
color: red;
}
.img-box {
overflow: hidden;
padding-top: 20rpx;
padding-bottom: 10rpx;
.img-item {
float: left;
width: 200upx;
height: 200upx;
border: 1px solid #ddd;
margin: 0 22rpx 20upx 0upx;
position: relative;
box-sizing: border-box;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
.img {
width: 60upx;
height: 60upx;
margin: 70upx auto 0;
}
}
}
.detail_msg .info-item {
font-size: 28upx;
margin-right: 30upx;
text {
display: inline-block;
width: 140upx;
}
.infoSpan {
width: auto;
font-size: 28upx;
color: #666;
float: right;
}
}
.form-box {
background: #fff;
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 30upx 20upx;
.label {
float: left;
width: 150upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
.ipt-box {
margin-left: 160upx;
input {
width: 100%;
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
margin-left: 10upx;
}
}
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
// line-height: 30upx;
text-align: center;
min-width: 120upx;
margin-right: 30upx;
background-color: #00c277;
}
.common-shade{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background: rgba(0,0,0,0.7);
z-index:9999;
}
.box {
display: flex;
display: -webkit-flex;
}
.box-row-reverse {
flex-direction: row;
}
/*上下排列*/
.box-column {
flex-direction: column;
}
/*上下排列*/
.box-left {
justify-content: flex-start;
}
/*居右*/
.box-right {
justify-content: flex-end;
}
/*居左*/
.box-center {
justify-content: center;
}
/*居中*/
.box-between {
justify-content: space-between;
}
/*两端对齐*/
.box-align-center {
align-items: center;
}
.box-wrap {
flex-wrap: wrap;
}
</style>