productLine-applet/pages/product/process/process.vue

<template>
  <view class="page">
	  <tn-nav-bar fixed>工序追溯</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <view v-if="!errorMsg && !process" class="tn-border-solid">
			<view class="tn-flex tn-flex-col-bottom tn-margin">
			  <view class="tn-flex-3 align-content-item  tn-text-center ">
				  <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
					<view class="content__title">产品二维码：</view>
					<view class="content__data tn-flex-1">
					  <tn-input v-model="qrCode" type="text" placeholder="请扫描产品二维码" border :height="60" >
					  </tn-input>
					</view>
				  </view>
			  </view>
			  <view class="tn-flex-1 align-content-item  tn-text-right">
				  <tn-button backgroundColor="#01BEFF"  fontColor="tn-color-white" icon="tn-icon-scan"  @click="openScan">
					  <span class="tn-icon-scan tn-margin-right-xs"></span>扫码
				  </tn-button>
			  </view>
			</view>
		  </view>
		  <view v-if="!errorMsg && !process" >
			  <view  class="tn-margin">
				<tn-button :shadow="true" width="100%"  backgroundColor="#01BEFF"  fontColor="#FFFFFF" margin="10rpx 0" @click="getProductProcess">开始追溯</tn-button>
			  </view>
			  <template v-if="processId && processStats">
				  <view class="list tn-border-solid">
					<view class="tn-flex tn-border-solid-bottom tn-main-gradient-blue--reverse">
					<view class="tn-flex-2 tn-text-center">待加工</view>
					<view class="tn-flex-2 tn-text-center">已加工</view>
					<view class="tn-flex-2 tn-text-center">不良品数</view>
					<view class="tn-flex-2 tn-text-center">良品率</view>
					</view>
					<block  v-for="(item,index) in processStats ">
					  <view class="tn-flex tn-border-solid-bottom" >
						<view class="tn-flex-2 tn-text-center">{{item.unfinishedCount}}</view>
						<view class="tn-flex-2 tn-text-center">{{item.completedCount}}</view>
						<view class="tn-flex-2 tn-text-center">{{item.errorCount}}</view>
						<view class="tn-flex-2 tn-text-center">{{item.yield}}</view>
					  </view>
					</block>
				  </view>
			  </template>
		  </view>
		  <view v-if="errorMsg" class="tn-padding tn-bg-white tn-border-solid-top">
			<tn-empty  icon="../../../static/image/cart.jpg" :text="errorMsg" :imgWidth="200" :imgHeight="200" class="tn-margin-top-xl "></tn-empty>
			  <tn-button :shadow="true" width="100%"  backgroundColor="#01BEFF"  fontColor="#FFFFFF" margin="30rpx 0" @click="initProcess">返回</tn-button>
		  </view>
			<view v-if="process">
				<!-- <tn-tabs :list="[{name:'产品信息'}]" :current="0" ></tn-tabs> -->
				<view class="tn-margin tn-border-solid-top tn-no-margin-top">
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">产品名称</view>
						</view>
						<view class="list__right">{{product?product.productName:productModel.productName}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">产品型号</view>
						</view>
						<view class="list__right">{{product?product.productModel:productModel.productModel}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">二维码编号</view>
						</view>
						<view class="list__right">{{qrCode}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">产品状态</view>
						</view>
						<view class="list__right">{{product?(product.status==1?'维修中':product.status==2?'已下线':product.status==3?'已入库':product.status==0?'作废':product.status==-1?'生产中':''):'未建档'}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">当前工序</view>
						</view>
						<view class="list__right">{{process.processName}}（{{process.processCode}}）</view>
					  </view>
					</tn-list-cell>
				</view>
				<template v-if="process.isRetrospect==1">
					<tn-tabs :list="[{name:'工序追溯'}]" :current="0" ></tn-tabs>
					<view class="tn-margin tn-padding-left tn-padding-right tn-border-solid-top tn-no-margin-top">
						<template v-for="(item, index) in process.details">
							<tn-form-item :label="item.processItemName" :labelWidth="200" labelPosition="left" required >
								<template v-if="item.valueType==1" >
									<tn-radio-group v-model="item.value" style="display: flex;justify-content: flex-end;">
									  <tn-radio name="OK">OK</tn-radio>
									  <tn-radio name="NG" >NG</tn-radio>
									</tn-radio-group>
								</template>
								<template v-else>
									<tn-input type="text" v-model="item.value" :placeholder="'请输入'+item.processItemName" inputAlign="right"></tn-input>
								</template>
							</tn-form-item>
							
							<!-- <el-form-item label="研究方向"  :prop="'list.'+index+'.name'" :rules="{required:true,message:'研究方向不能为空',trigger:'blur'}">
								<el-input v-model="item.name" placeholder="请输入研究方向" />
							</el-form-item> -->
						</template>
						<tn-form-item label="上传图片" prop="images" :labelWidth="200" :required="true" v-if="isReworkRecord">
							<tn-image-upload :fileList="images" :action="action" :header="header" @on-success="imageUploadChange" slot="right"></tn-image-upload>
						</tn-form-item>
						<tn-form-item label="问题描述" prop="problemDesc" :labelWidth="200" labelPosition="left" required  v-if="isReworkRecord">
						  <tn-input type="text"  v-model="problemDesc" placeholder="请输入问题描述" inputAlign="right"></tn-input>
						</tn-form-item>
					</view>
				</template>
				<view class="tn-flex tn-margin" v-if="process.isPhotograph==0">
				  <view class="tn-flex-1 tn-padding-sm">
					<tn-button :shadow="true" width="100%"  backgroundColor="tn-bg-teal" fontColor="#FFFFFF" @click="initProcess" margin="10rpx 0">返回</tn-button>
				  </view>
				  <view class="tn-flex-1 tn-padding-sm">
					<tn-button :shadow="true" width="100%"  backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="submit" margin="10rpx 0">提交</tn-button>
				  </view>
				</view>
				<view v-else>
				  <view class="tn-padding-sm tn-margin-top tn-color-red">当前工序为拍照工序，请通过相机作业</view>
				  <view class="tn-padding-sm">
					<tn-button :shadow="true" width="100%"  backgroundColor="tn-bg-teal" fontColor="#FFFFFF" @click="initProcess" margin="10rpx 0">返回</tn-button>
				  </view>
				  
				</view>
			</view>
		</view>  
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		labelWidth: 170,
		action: this.api.apiHost()+"wx/communal/api/upload",
		header:{
			'Authorization':'Basic d3hBcHBsZXQ6d3hBcHBsZXRfc2VjcmV0',
			'tenant_id':'000000',
			'Blade-Auth': "bearer "+this.api.getToken(),
		},
		qrCode:'',
		errorMsg:'',
		product:'',
		productModel:'',
		process:'',
		isReworkRecord:false,
		images:[],
		problemDesc:'',
		processStats:[],
		processId:'',
		productModelId:'',
      }
    },
	onLoad(options){
		if(options.processId){
			this.processId = options.processId 
			this.productModelId = options.productModelId
			this.productProcessReport()
		}
	},
	onShow(){
	},
    methods: {
		openScan(){
			// 允许从相机和相册扫码
			let that = this;
			uni.scanCode({
				success: function (res) {
					that.qrCode = res.result
					that.getProductProcess()
				}
			});
		},
		imageUploadChange(data,index,datas){
			this.images = datas;
		},
		getProductProcess(){
			if(!this.qrCode){
				this.api.toast("请填写产品二维码")
				return;
			}
			let that = this,
			url = "wx/product/api/getProductProcess",
			params = {
				qrCode:that.qrCode,
				processId:that.processId
			}
			that.api.request(url, params,"get").then((res) => {
				console.log(res)
				that.product = res.product
				that.productModel = res.productModel
				that.process = res.process
				if(that.process.isRetrospect==1){
					that.process.details.forEach(function(item) {
						if(item.valueType=='1'){
							item.value='OK'
						}
					});
				}
			}).catch((res) => {
				that.errorMsg = res.data.msg;
			})
		},
		productProcessReport(){
			let that = this,
			url = "wx/product/api/productProcessReport",
			params = {
				processId:that.processId,
				productModelId:that.productModelId
			}
			that.api.request(url, params,"get").then((res) => {
				console.log(res)
				that.processStats = res
			}).catch((res) => {
			})
		},
		initProcess(){
			this.qrCode=''
			this.errorMsg=''
			this.product=''
			this.productModel=''
			this.process=''
			this.images = []
			this.problemDesc=''
			this.isReworkRecord = false
			this.productProcessReport();
		},
		submit(){
			if(this.checkParam()){
				this.process.isStandards = (this.process.isRetrospect==0?-1:this.isReworkRecord?0:1)
				let urls = [];
				for(let i=0;i<this.images.length;i++){
					let url = this.images[i].url
					urls.push(url)
				}
				let that = this,
				url = "wx/product/api/processSubmit",
				params = {
					qrCode:that.qrCode,
					images:urls.join(","),
					productProcess:that.process,
					problemDesc:that.problemDesc,
				}
				that.api.request(url, params,'post','').then((res) => {
					that.api.toast("操作成功")
					that.initProcess();
				}).catch((res) => {
				})
			}
		},
		checkParam(){
			if(this.process.isPhotograph==1){
				this.api.toast("当前工序为拍照工序，请通过相机作业");
				return false;
			}
			if(this.process.isRetrospect==1){
				for(let item of this.process.details){
					if(!item.value){
						this.api.toast("请填写工序追溯内容");
						return false;
					}
				}
				let msg=[]
				for(let item of this.process.details){
					if(item.valueType=='2'){
						if(isNaN(parseFloat(item.value))){
							this.api.toast(item.processItemName+"的值非数字,请重新输入");
							return false;
						}
						if(parseFloat(item.maxValue) < parseFloat(item.value) ||  parseFloat(item.minValue) > parseFloat(item.value) ){
							msg.push(item.processItemName+"不达标,不在范围内")
						}
					}else{
						if(item.value != 'OK'){
							msg.push(item.processItemName+"不达标")
						}
					}
				}
				if(msg.length>0){
					this.isReworkRecord = true;
					if(this.images.length==0){
						uni.showModal({
							title: '提示',
							showCancel:false,
							content: msg.join("；\n")+"；请上传图片发起维修"
						});
						return false;
					}
				}else{
					this.images = [];
					if(this.isReworkRecord == true){
						uni.showModal({
							title: '提示',
							showCancel:false,
							content: "工序追溯内容已达标，无需上传图片"
						});
						this.isReworkRecord = false
						return false;
					}
				}
			}
			return true;
		}
    }
  }
</script>

<style lang="scss" scoped>
	
	.page{
		.list{
			.tn-flex{
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				view{
					
				}
			}
		}
	}
	
	
	.list-icon-text, .list-image-text {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	
	.list {
	  &__left {
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
		min-width: 140rpx;
	    
	    &__icon, &__image {
	      margin-right: 18rpx;
	    }
	  }
	  
	  &__right {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
		flex-wrap: wrap;
		word-break: break-all;
	  }
	}
	
	
	.tn-image-upload {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  align-items: center;
	  
	  &__item {
	    /* #ifndef APP-NVUE */
	    display: flex;
	    /* #endif */
	    align-items: center;
	    justify-content: center;
	    width: 200rpx;
	    height: 200rpx;
	    overflow: hidden;
	    margin: 12rpx;
	    margin-left: 0;
	    background-color: $tn-font-holder-color;
	    position: relative;
	    border-radius: 10rpx;
	    
	    &-preview {
	      border: 1rpx solid $tn-border-solid-color;
	      
	      
	      &__image {
	        display: block;
	        width: 100%;
	        height: 100%;
	        border-radius: 10rpx;
	      }
	    }
	    
	  }
	  
	}
</style>