uni-app流程轴、任务轴

效果图： image.png
image.png

开发代码：
<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>

关注我为你解答更多问题