开发代码：
<template>
<view class="procedure">
<view class="count">
<view class="procedure-title">{{date.title}}</view>
<view class="uni-flex">
<view class="procedure-active"></view>
<view class="procedure-content">
<view v-if="date.listDate.length==0" style="marginTop: 50%;text-align: center;">无数据</view>
<template v-for="(item,index) in date.listDate">
<view class="uni-flex common-between procedure-content-row">
<view class="uni-flex" @click="clickActive(index)">
<view :class="{activeStyle:active==index,noActiveStyle:active!==index}"></view>
<view class="uni-flex uni-column">
<template v-if="active==index">
<view v-for="(i,indexi) in date.showLeftTitle">
{{i.label}}：{{item[i.key]}}
</view>
</template>
<view v-else>{{date.showLeftTitle[0].label}}：{{item[date.showLeftTitle[0].key]}}</view>
</view>
</view>
<view class="uni-flex uni-column">
<template v-if="active==index">
<view v-for="(i,indexi) in date.showRightTitle">
<text v-if="i.key">{{i.label}}：{{item[i.key]}}</text>
<view v-else class="common-button" @click="clickButton(item,i)">
{{i.label}}
</view>
</view>
</template>
<view v-else>{{date.showRightTitle[0].label}}：{{item[date.showRightTitle[0].key]}}</view>
</view>
</view>
</template>
</view>
</view>
</view>
<uni-popup id="popupDialog" ref="popupDialog" type="dialog">
<view class="procedure-dialog">
<view class="procedure-title" style="text-align: center;">让步放行申请</view>
<view class="procedure-title">不合格数量：{{unqualifieNumber}}</view>
<uni-forms :value="formData" ref="form" >
<uni-forms-item label="申请数量">
<uni-easyinput type="number" :clearable="true" v-model="formData.number" placeholder="请输入申请数量" />
</uni-forms-item>
<uni-forms-item label="备注内容">
<uni-easyinput type="text" v-model="formData.counten" placeholder="请输入备注内容" />
</uni-forms-item>
</uni-forms>
<view class="common-button" style="margin: auto;" @click="dialogConfirm">
提交申请
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { workRecordSheetDetail } from '@/api/order/order.js';
export default {
props:['date'],
data() {
return {
active:null,
unqualifieNumber:'',
loadStatus:'loading',
content:'',
getFuc:'',
formData:{
number:0,
counten:''
}
};
},
onLoad: function(option) {
},
created() {
},
methods: {
clickButton(item,i){
this.unqualifieNumber = item.qualityAmount-item.qualifiedAmount;
if(this.unqualifieNumber==0){
uni.showToast({
icon:'none',
title:'没有不合格数量'
})
return false
}
this.content = item;
this.getFuc = i.fun
this.$refs.popupDialog.open()
},
clickActive(index){
this.active = index
},
dialogConfirm(done, val) {
if(this.unqualifieNumber <this.formData.number){
uni.showToast({
icon:'none',
title:'申请数量不能大于不合格数量'
})
return false
}
let params = Object.assign(this.formData,{id:this.content.id})
this.getFuc(params).then((res)=>{
uni.showToast({
icon:'none',
title:res.message
})
if(res.success){
this.$refs.popupDialog.close()
}
})
}
}
};
</script>
<style lang="less" scoped>
.procedure{
&-title{
font-weight: 700;
font-size: 36rpx;
}
.count{
.procedure-content{
width: 90%;
padding-right: 40px;
&-row{
margin-top: 6px;
min-height: 80rpx;
}
.activeStyle,.noActiveStyle{
height: 12px;
width: 12px;
border-radius: 6px;
background: #fff;
border: 1px solid #91d5ff;
margin-left: -20rpx;
z-index: 2;
margin-right: 16px;
margin-top: 6px;
}
.noActiveStyle{
height: 10px;
width: 10px;
border-radius: 5px;
background: #fff;
border: 1px solid #333333;
}
}
.procedure-active{
height: 80vh;
width: 7px;
border-radius: 3px;
background: #5555554a;
position: relative;
}
}
}
.procedure-dialog{
background: #fff;
padding: 40rpx;
}
</style>
关注我为你解答更多问题
