SmartStorage/pages/preCrashListDetail/preCrashListDetail.vue

347 lines
6.9 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>
<view
style="justify-content: right;"
v-show="showBtn == '0'"
>
<view>
<uni-data-checkbox
v-model="list.chooseStatus"
:localdata="range"
mode="tag"
>
</uni-data-checkbox>
</view>
</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>
<!-- <custom-tree-select
:listData="deptList"
v-model="deptArr"
:mutiple="true"
:search="true"
:choseParent="false"
:pathMode="true"
@selectChange="treeChange"
></custom-tree-select> -->
<view class="btm-sticky" v-show="showBtn == '0'">
<!-- <view class="checked">
<checkbox-group @tap="checkAll" style="margin-right: 15rpx;">
<checkbox :checked="allChecked" />
</checkbox-group>
<text>全选</text>
</view> -->
<view style="display: flex;">
<view
class="exam"
style="margin-right: 15rpx;"
@click="clickSub"
>
提交
</view>
<!-- <view
class="exam"
style="background-color: #fff; color: #000; border: 1px solid #EBEBEB;"
@click="clickReject"
>
驳回
</view> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgPrefix: '',
showBtn: '',
taskId: '',
preDetailList: [],
deptList: [],
deptArr: [],
range: [
{ value: '0', text: '报废' },
{ value: '1', text: '合格' },
{ value: '2', text: '维修' }
]
}
},
methods: {
treeChange () {
let that = this
// console.log(e, index);
console.log(that.deptArr);
},
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.chooseStatus = ''
})
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;
});
},
clickSub () {
let that = this
let ok = true
for (let item of that.preDetailList) {
if (item.chooseStatus == '') {
ok = false;
break;
}
}
if (!ok) {
uni.showToast({
icon: 'none',
title: '您有未选择状态的机具!'
})
} else {
uni.showModal({
title: '提交列表',
content: '确认提交机具列表吗?',
confirmText: '提交',
success: (res) => {
if (res.confirm) {
console.log(that.preDetailList);
}
}
})
}
}
},
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;
border-bottom: 1px solid #D7D7D7;
.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;
}
} */
}
.btm-sticky{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 15rpx 30rpx;
background-color: #fff;
display: flex;
justify-content: right;
align-items: center;
.exam{
box-sizing: border-box;
padding: 10rpx 50rpx;
border-radius: 30rpx;
background-color: #3788FF;
font-size: 14px;
color: #fff;
}
}
</style>