工单小程序2024-11-20
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

238 lines
4.8 KiB

<template>
<!-- 工单详情 -->
<view class="page">
<navbar
title="详情"
leftClick
@leftClick="$utils.navigateBack"
/>
<view class="collect"
@click="addCollection">
<uv-icon
size="60rpx"
v-if="TemplateById.collectonFlag"
color="#169bd5"
name="star-fill"></uv-icon>
<uv-icon
size="60rpx"
v-else
name="star"></uv-icon>
</view>
<view class="Box">
<view class="work-box">
<view class="works">
任务号:
</view>
<view class="index">
{{TemplateById.taskNo}}
</view>
</view>
<view class="work-box">
<view class="works">
担当信息:
</view>
<view class="index">
{{TemplateById.responsibler}}
</view>
</view>
<view class="work-box">
<view class="works">
机型信息:
</view>
<view class="inde">
{{TemplateById.model}}
</view>
</view>
<view class="work-box">
<view class="works">
数量:
</view>
<view class="index">
{{TemplateById.number}}
</view>
</view>
<view class="work-box">
<view class="works">
状态:
</view>
<view class="index">
{{TemplateById.statusDescribe || ''}}
</view>
</view>
<view class="work-box">
<view class="works">
备注:
</view>
<view class="index">
{{TemplateById.remark || ''}}
</view>
</view>
</view>
<view class="working-procedure">
<view class="working"
v-for="(item, index) in TemplateById.workorderStepList"
:key="index"
@click="clickStep(item, index)" >
{{ item.name }}
</view>
<!-- <view class="working"
@click="$utils.navigateTo('/pages_order/order/ProcessCardTo?id=' + id)">
中试压缩机试作工序卡2
</view>
<view class="working"
@click="$utils.navigateTo('/pages_order/order/ProcessCardThree?id=' + id)">
中试压缩机试作工序卡3
</view>
<view class="working"
@click="$utils.navigateTo('/pages_order/order/ProcessCardFour?id=' + id)">
中试压缩机试作工序卡4(总成)
</view> -->
</view>
<view class="modify">
<view class="modi"
v-if="isPermission('修改')"
@click="$utils.navigateTo('/pages_order/order/ModifyWorkOrder?id=' + id)">
修改
</view>
<!-- <view class="modi"
v-if="TemplateById.collectonFlag"
@click="addCollection">
收藏
</view>
<view class="modi a"
v-else
@click="addCollection">
取消收藏
</view> -->
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
id : 0,
TemplateById : {
workorderStepList : [],
collectonFlag : false,
},
}
},
onLoad(args) {
this.id = args.id
},
onShow() {
if(this.id){
this.queryTemplateById()
}
this.$store.commit('getUserInfo')
},
computed : {
...mapState(['workDetail']),
},
methods: {
// 根据id获取工单详情
queryTemplateById(){
this.$api('queryTemplateById', {
templateId : this.id
}, res =>{
if(res.code == 200){
this.TemplateById = res.result
}
})
},
clickStep(item, index){
let urls = [
`/pages_order/order/ProcessCardOne?id=${this.id}&index=${index}&name=${item.name}`,
`/pages_order/order/ProcessCardTo?id=${this.id}&index=${index}&name=${item.name}`,
`/pages_order/order/ProcessCardThree?id=${this.id}&index=${index}&name=${item.name}`,
`/pages_order/order/ProcessCardFour?id=${this.id}&index=${index}&name=${item.name}`,
]
this.$utils.navigateTo(urls[index])
},
//收藏信息-添加收藏
addCollection(){
this.$api('addCollection', {
templateId : this.id
}, res => {
this.queryTemplateById()
if(res.code == 200){
uni.showToast({
title: res.message,
icon: 'none'
})
this.TemplateById.collectonFlag = !this.TemplateById.collectonFlag
}
})
},
}
}
</script>
<style scoped lang="scss">
.page {
background-color: #fff;
height: 100vh;
font-size: 28rpx;
width: 100%;
position: relative;
.collect{
position: absolute;
right: 20rpx;
margin-top: 20rpx;
}
.Box{
margin-top: 40rpx;
.work-box {
padding: 0rpx 30rpx;
margin: 20rpx 0rpx;
display: flex;
.works {
width: 150rpx;
flex-shrink: 0;
}
.index {
margin-top: 3rpx;
}
}
}
.working-procedure {
text-align: center;
margin-top: 150rpx;
.working {
margin: 25rpx 0rpx;
color: rgb(83, 125, 180);
}
}
.modify{
text-align: center;
margin-top: 150rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 30rpx;
.modi{
padding: 20rpx 60rpx;
border-radius: 15rpx;
background-color: $uni-color;
color: #fff;
}
.a{
background-color: #fff;
border: 1rpx solid $uni-color;
color: $uni-color;
}
}
}
</style>