338 lines
7.3 KiB
Vue
338 lines
7.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="step_num">
|
||
<view class="step step1">完善保养项目</view>
|
||
<view class="step step2">确认备件使用情况</view>
|
||
<view class="step step3">保养总结</view>
|
||
</view>
|
||
<view class="project_container">
|
||
<view class="myContentBox myContainer" v-for="(items,index) in details" :key="index">
|
||
<view class="top_container detail_list_top">
|
||
<view class="report_status">保养项目-{{items.code}}</view>
|
||
<view class="edit" @click="edit(index)">编辑</view>
|
||
</view>
|
||
<view style="clear: both;">
|
||
<view class="multi_list_item">
|
||
<view class="list_item">
|
||
<view class="list_item_name">项目:</view>
|
||
<view class="list_item_content">{{items.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="multi_list_item">
|
||
<view class="list_item list_item-">
|
||
<view class="list_item_name">工时:</view>
|
||
<view class="list_item_content">{{items.manhour}}小时</view>
|
||
</view>
|
||
<view class="list_item list_item-">
|
||
<view class="list_item_name">结果:</view>
|
||
<view class="list_item_content" v-if="items.result==1">通过</view>
|
||
<view class="list_item_content" v-else-if="items.result=='0'">不通过</view>
|
||
</view>
|
||
</view>
|
||
<view class="multi_list_item">
|
||
<view class="list_item list_item-">
|
||
<view class="list_item_name">保养工时费：</view>
|
||
<view class="list_item_content" style="padding-left: 180upx;">{{items.manHourCost || 0}}元</view>
|
||
</view>
|
||
</view>
|
||
<view class="multi_list_item">
|
||
<view class="list_item">
|
||
<view class="list_item_name">方法:</view>
|
||
<view class="list_item_content" >{{items.function}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="list_item" >
|
||
<view class="list_item_name" >备注:</view>
|
||
<view class="list_item_content">{{items.remark}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="next" @click="toNext()">下一步</view>
|
||
<view class="goHome" @click='goMain()'>
|
||
<img src="../../static/img/gohome.png">
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {mapState,mapMutations} from 'vuex'
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: '',
|
||
details:[]
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['keepDetails'])
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id;
|
||
if(this.id==undefined){
|
||
uni.reLaunch({
|
||
url: 'eqUpkeep'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
var _this = this;
|
||
this.$http.request({
|
||
url: '/apis/upkeepPlan/oneRecordDetail',
|
||
params: {
|
||
recordId: option.id
|
||
},
|
||
}).then(res => {
|
||
if (res.data.code == 0) {
|
||
if(this.keepDetails.keepDetails==undefined){
|
||
if(res.data.data && res.data.data.project.length>0){
|
||
_this.details = res.data.data.project;
|
||
_this.setkeepDetails({id:_this.id,keepDetails:_this.details});
|
||
|
||
var listCards=this.formaterData(res.data.data.part);
|
||
this.setkeepPartList({
|
||
id:_this.id,
|
||
keepPartList:listCards
|
||
});
|
||
}
|
||
}else if(this.keepDetails.id==this.id){
|
||
this.details = this.keepDetails.keepDetails
|
||
this.$forceUpdate();
|
||
}
|
||
|
||
}
|
||
}).catch(err => {
|
||
console.log(err)
|
||
});
|
||
},
|
||
|
||
methods:{
|
||
...mapMutations(['setkeepDetails','setkeepPartList']),
|
||
toNext(){
|
||
uni.navigateTo({
|
||
url: "keepStep2?id="+this.id
|
||
});
|
||
},
|
||
//编辑
|
||
edit(index){
|
||
uni.redirectTo({
|
||
url: "keepEdit?id="+this.id+'&index='+index
|
||
});
|
||
},
|
||
formaterData(data){
|
||
var resData = [];
|
||
data.forEach((vals,index)=>{
|
||
var combineJSON = {
|
||
id: vals.part_id,
|
||
title: vals.spartName,
|
||
titleNumber:'['+vals.code+']',
|
||
contentList: [
|
||
{
|
||
id:1,
|
||
isDouble:true,
|
||
labelName:'规格型号',
|
||
labelContent:vals.type
|
||
},
|
||
{
|
||
id:2,
|
||
isDouble:true,
|
||
labelName:'库位',
|
||
labelContent:vals.locationName
|
||
}
|
||
],
|
||
price:vals.price,
|
||
amount:vals.spart_amount,
|
||
spart_sum:vals.spart_sum
|
||
}
|
||
resData.push(combineJSON);
|
||
});
|
||
return resData;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content {
|
||
position: relative;
|
||
min-height: 100%;
|
||
overflow: auto;
|
||
padding-bottom: 140upx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.step_num {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 80upx;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.step {
|
||
position: relative;
|
||
font-size: 28upx;
|
||
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: 30upx;
|
||
height: 2upx;
|
||
background-color: #000;
|
||
top: 40upx;
|
||
left: 200upx;
|
||
}
|
||
|
||
.step2 {
|
||
margin-left: 34upx;
|
||
color: #828282;
|
||
}
|
||
|
||
.step2:before {
|
||
content: '2';
|
||
border: 2upx solid #828282;
|
||
}
|
||
|
||
.step2:after,
|
||
.step3:after {
|
||
left: 250upx;
|
||
background-color: #828282;
|
||
}
|
||
|
||
.step3 {
|
||
margin-left: 34upx;
|
||
color: #828282;
|
||
}
|
||
|
||
.step3:before {
|
||
content: '3';
|
||
border: 2upx solid #828282;
|
||
}
|
||
.step3:after {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.project_container {
|
||
position: relative;
|
||
margin-top: 20upx;
|
||
overflow: auto;
|
||
}
|
||
|
||
|
||
.top_container {
|
||
position: relative;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
padding: 30upx 30upx 30upx 30upx;
|
||
box-sizing: border-box;
|
||
color: #333;
|
||
box-shadow: 2px 2px 20upx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.detail_list_top {
|
||
border-bottom: 1px solid #EDEDED;
|
||
box-shadow: none;
|
||
padding-right: 100upx;
|
||
}
|
||
.edit{
|
||
position: absolute;
|
||
font-size: 28upx;
|
||
color: #3382FF;
|
||
right: 30upx;
|
||
top: 30upx;
|
||
|
||
}
|
||
.report_status {
|
||
line-height: 40upx;
|
||
word-break: break-all;
|
||
font-size: 28upx;
|
||
}
|
||
|
||
.detail_list{
|
||
position: relative;
|
||
background-color: #fff;
|
||
width: 90%;
|
||
margin: auto;
|
||
box-shadow: 1px 1px 20upx rgba(0,0,0,0.1);
|
||
margin-bottom: 30upx;
|
||
overflow: auto;
|
||
}
|
||
.list_item {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 70upx;
|
||
padding: 0 30upx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.multi_list_item {
|
||
position: relative;
|
||
overflow: auto;
|
||
}
|
||
|
||
.list_item- {
|
||
width: 50%;
|
||
float: left;
|
||
}
|
||
|
||
.list_item_name {
|
||
position: absolute;
|
||
left: 30upx;
|
||
font-size: 28upx;
|
||
color: #999;
|
||
line-height: 70upx;
|
||
/* width: 120upx; */
|
||
}
|
||
|
||
/* .list_item- .list_item_name {
|
||
width: 120upx ;
|
||
} */
|
||
|
||
.list_item_content {
|
||
position: relative;
|
||
padding: 0 0 0 140upx;
|
||
font-size: 28upx;
|
||
line-height: 70upx;
|
||
color: #333;
|
||
overflow: hidden;
|
||
height: 70upx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap
|
||
|
||
}
|
||
|
||
.next {
|
||
position: absolute;
|
||
left: 5%;
|
||
bottom: 15px;
|
||
width: 90%;
|
||
height: 82upx;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
color: #fff;
|
||
line-height: 82upx;
|
||
background-color: #3382FF;
|
||
|
||
}
|
||
</style>
|