SmartStorage/pages/preCrashListDetail/preCrashListDetail.vue

242 lines
4.7 KiB
Vue

<template>
<view>
<view
class="single-pre"
v-for="(list, index) in preDetailList"
:key="list.id"
>
<view>
<checkbox-group
v-show="list.status == '0' && showBtn == '0'"
style="margin-right: 15rpx;"
@change="checkClick(list)"
>
<checkbox :checked="list.checked" />
</checkbox-group>
</view>
<view class="info-cont">
<view>
<h4>设备类型</h4>
<h5>{{ list.machineTypeName }}</h5>
</view>
<view>
<h4>规格型号</h4>
<h5>{{ list.specificationType }}</h5>
</view>
<view>
<h4>设备编码</h4>
<h5>{{ list.maCode == null ? '-' : list.maCode }}</h5>
</view>
<view>
<h4>报废数量</h4>
<h5>{{ list.scrapNum }}</h5>
</view>
<view>
<h4>损坏原因</h4>
<h5>{{ list.scrapType == '0' ? '自然' : '人为' }}</h5>
</view>
<view>
<h4>报废图片</h4>
<h5>
<image
v-for="(img, index) in list.fileUrl"
:key="index"
:src="imgPrefix + img[index]"
mode=""
></image>
</h5>
</view>
<!-- <h3 v-show="list.status == '0' && showBtn == '0'">
<text
@click="togglePass(list)"
>
通过
</text>
<text
style="background-color: #fff; color: #000; border: 1px solid #EBEBEB;"
@click="toggleRefuse(list)"
>
驳回
</text>
</h3> -->
<!-- <h6 class="sticky-area">
<h4
v-show="list.status == '0'"
style="background-color: #FFF6E7; color: #FCAA23;"
>
待审核
</h4>
<h4
v-show="list.status == '1'"
style="background-color: #E9FBE7; color: #3CD92E;"
>
已通过
</h4>
<h4
v-show="list.status == '2'"
style="background-color: #FFECEC; color: #FF4C4C;"
>
驳回
</h4>
</h6> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgPrefix: '',
showBtn: '',
taskId: '',
preDetailList: [],
deptList: []
}
},
methods: {
fetchPreDetail (taskId) {
let that = this
that.$api.preCrashExam.fetchPreCrashDetail({
taskId
}).then(res => {
console.log(res);
if (res.data.code == 200) {
res.data.data.forEach(item => {
if (item.fileUrl != null) {
item.fileUrl = item.fileUrl.split(',')
}
item.checked = false
})
that.preDetailList = res.data.data
console.log(that.preDetailList);
}
}).catch(err => {
console.log(err);
})
},
getDeptTree () {
let that = this
that.$api.preCrashList.fetchDeptTree().then(res => {
that.deptList = that.veri(res.data.data)
console.log(that.deptList);
}).catch(err => {
console.log(err);
})
},
veri (data) {
let that = this
if (!data || data.length <= 0) {
return null;
}
return data.map(x => {
const model = {
name: x.label,
id: x.id
}
const children = that.veri(x.children);
if (children) {
model.children = children;
}
return model;
});
}
},
onLoad(params) {
console.log(params);
this.showBtn = params.showBtn
this.taskId = params.taskId
this.fetchPreDetail(this.taskId)
this.getDeptTree()
},
onShow() {
this.imgPrefix = this.$api.url
}
}
</script>
<style lang="scss">
body{
background-color: #FAFDFF;
box-sizing: border-box;
padding-bottom: 10vh;
}
.single-pre{
width: 100%;
box-sizing: border-box;
padding: 30rpx;
background-color: #fff;
position: relative;
display: flex;
align-items: center;
.info-cont{
width: 100%;
display: flex;
flex-direction: column;
view{
display: flex;
align-items: center;
margin-bottom: 25rpx;
h4{
font-weight: normal;
font-size: 30rpx;
color: #ADADAD;
padding-right: 20rpx;
}
h5{
font-weight: normal;
font-size: 30rpx;
image{
width: 20%;
height: 100rpx;
}
}
}
view:last-child{
margin-bottom: 0;
}
}
h3{
width: 100%;
box-sizing: border-box;
padding: 20rpx;
margin-top: 50rpx;
font-size: 14px;
font-weight: normal;
display: flex;
align-items: center;
justify-content: right;
text{
width: 20%;
box-sizing: border-box;
padding: 10rpx 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30rpx;
background-color: #3888FF;
font-weight: normal;
margin-right: 30rpx;
color: #fff;
}
text:last-child{
margin-right: 0;
}
}
/* .sticky-area{
font-size: 16px;
position: absolute;
top: 20rpx;
right: 20rpx;
h4{
box-sizing: border-box;
padding: 10rpx 25rpx;
}
} */
}
</style>