productLine-applet/pages/product/rework-pecord/detail.vue

<template>
  <view >
	  <tn-nav-bar fixed>详情</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <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">{{details.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">{{details.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">{{details.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">
					<view
					  v-for="(item, index) in details.repairsList"
					  :key="index"
					  class="tn-image-upload__item tn-image-upload__item-preview"
					  :style="{
						width: $tn.string.getLengthUnitValue(170),
						height: $tn.string.getLengthUnitValue(170)
					  }"
					>
					<image
					  class="tn-image-upload__item-preview__image"
					  :src="item"
					  :mode="imageMode"
					  @tap.stop="doPreviewImage(item, details.repairsList)"
					></image>
				  </view>
			  </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">{{details.problemDesc}}</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">{{details.createPersonName}}</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">{{details.createTime}}</view>
		    </view>
		  </tn-list-cell>
		  <template v-if="details.status!=0 && details.status!=1">
			  <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">{{details.isInvalid==0?'否':'是'}}</view>
				</view>
			  </tn-list-cell>
			  <tn-list-cell v-if="details.isInvalid==1">  
				<view class="list-icon-text">
				  <view class="list__left">
					<view class="list__left__text tn-color-gray--dark">作废原因</view>
				  </view>
				  <view class="list__right">{{details.invalidCause}}</view>
				</view>
			  </tn-list-cell>
			  <tn-list-cell v-else>
				<view class="list-icon-text">
				  <view class="list__left">
					<view class="list__left__text tn-color-gray--dark">维修图片</view>
				  </view>
				  <view class="list__right">
					  <view
						  v-for="(item, index) in details.reworkList"
						  :key="index"
						  class="tn-image-upload__item tn-image-upload__item-preview"
						  :style="{
							width: $tn.string.getLengthUnitValue(170),
							height: $tn.string.getLengthUnitValue(170)
						  }"
						>
						<image
						  class="tn-image-upload__item-preview__image"
						  :src="item"
						  :mode="imageMode"
						  @tap.stop="doPreviewImage(item, details.reworkList)"
						></image>
					  </view>
				  </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">{{details.reworkPersonName}}</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">{{details.reworkDate}}</view>
				</view>
			  </tn-list-cell>
		  </template>
		  <template v-if="details.status!=1 && details.status!=2">
			  <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">{{details.auditPersonName}}</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">{{details.auditDate}}</view>
				</view>
			  </tn-list-cell>
			  <tn-list-cell v-if="details.auditFailCause">
				<view class="list-icon-text">
				  <view class="list__left">
					<view class="list__left__text tn-color-gray--dark">不通过原因</view>
				  </view>
				  <view class="list__right">{{details.auditFailCause}}</view>
				</view>
			  </tn-list-cell>
		  </template>
		  
		  <view class="tn-margin">
			<tn-button :shadow="true" width="100%" backgroundColor="#01BEFF" fontColor="#FFFFFF"  @click="showInfoForm" v-if="details.status<2 && (permission==1 || permission==4)">维修</tn-button>
		  </view>
		  <view class="tn-margin">
			<tn-button :shadow="true" width="100%" backgroundColor="#01BEFF" fontColor="#FFFFFF"  @click="showInfoForm" v-if="details.status==2 && (permission==1 || permission==3)">审核</tn-button>
		  </view>
	  </view>
	  
	  
	    <!-- popup -->
	    <tn-popup
	      v-model="showForm"
	      :marginTop="vuex_custom_bar_height"
	      length="50%"
	      mode="bottom"
	      height="40%"
	      :closeBtn="false"
	      :maskCloseable="false"
	      @close="closedPopup"
	    >
	      <view class="popup-content tn-margin" :class="{'popup-content--center': mode === 'center'}">
	  		<tn-form :model="form" ref="form" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
				<template v-if="details.status<2">
					<tn-form-item label="是否作废" prop="isInvalid" :width="radioWidth" :wrap="radioWrap"  :required="true">
						<tn-radio-group v-model="form.isInvalid" >
						  <tn-radio name="0">否</tn-radio>
						  <tn-radio name="1">是</tn-radio>
						</tn-radio-group>
					 </tn-form-item>
					 <tn-form-item label="作废原因" prop="invalidCause"  :required="true" v-if="form.isInvalid==1">
						<tn-input v-model="form.invalidCause" type="textarea" placeholder="请输入作废原因" ></tn-input>
					 </tn-form-item>
					
					<tn-form-item label="维修图片" prop="images"  :required="true"  v-if="form.isInvalid==0">
						<tn-image-upload :fileList="form.images" :action="action" :header="header" @on-success="imageUploadChange"></tn-image-upload>
					</tn-form-item>
					 <tn-form-item label="新二维码" prop="qrCode"  v-if="form.isInvalid==0">
						<tn-input v-model="form.qrCode" type="text" placeholder="请输入二维码编码(新)" ></tn-input>
						<view slot="right" class="tn-icon-scan tn-color-blue"  @click="openScan">扫码</view>
					 </tn-form-item>
				</template>
				
				<template  v-if="details.status==2">
					<tn-form-item label="维修结果" prop="checkResult" :width="radioWidth" :wrap="radioWrap"  :required="true">
						<tn-radio-group v-model="form.checkResult" >
						  <tn-radio name="1">通过</tn-radio>
						  <tn-radio name="0">不通过</tn-radio>
						</tn-radio-group>
					 </tn-form-item>
					 <tn-form-item label="不通过原因" prop="problemDesc"  :required="true" v-if="form.checkResult=='0'">
						<tn-input v-model="form.auditFailCause" type="textarea" placeholder="请输入不通过原因" ></tn-input>
					 </tn-form-item>
				</template>
	  		</tn-form>
			
			<view class="tn-flex tn-flex-wrap tn-margin-top">
			  <view class="tn-flex-basic-md tn-padding-right-xs">
				  <tn-button :shadow="true" width="100%" backgroundColor="tn-bg-teal" fontColor="#FFFFFF"  @click="closedPopup">关闭</tn-button>
			  </view>
			  <view class="tn-flex-basic-md tn-padding-left-xs">
				  <tn-button :shadow="true" width="100%" backgroundColor="#01BEFF" fontColor="#FFFFFF"  @click="submit">提交</tn-button>
			  </view>
			</view>
	  	</view>
	  </tn-popup>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		permission: this.api.getUserPermission(),
		details:{},
		showForm:false,
		labelPosition: 'left',
		labelAlign: 'left',
		labelWidth: 150,
		action: this.api.apiHost()+"wx/communal/api/upload",
		header:{
			'Authorization':'Basic d3hBcHBsZXQ6d3hBcHBsZXRfc2VjcmV0',
			'tenant_id':'000000',
			'Blade-Auth': "bearer "+this.api.getToken(),
		},
		form:{
			images:[],
			checkResult:'',
			auditFailCause:'',
			qrCode:'',
			isInvalid:'0',
			
		},
		rules: {
		  images:  [
            {
              required: true,
              message: '请选择图片',
              trigger: 'change',
              type: 'array'
            }
          ],
		  isInvalid: [
		    {
		      required: true,
		      message: '请选择是否作废',
              trigger: 'change'
		    },
		  ],
		  invalidCause: [
		    {
		      required: true,
		      message: '请输入作废原因',
		      trigger: 'blur'
		    },
		  ],
		  checkResult: [
		    {
		      required: true,
		      message: '请选择结果',
              trigger: 'change'
		    },
		  ],
		  auditFailCause: [
		    {
		      required: true,
		      message: '请输入失败原因',
		      trigger: 'blur'
		    },
		  ],
		},
      }
    },
	onShow(){
	},
	onLoad(item){
		this.getDetail(item.id)
	},
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
		openScan(){
			// 允许从相机和相册扫码
			let that = this;
			uni.scanCode({
				success: function (res) {
					that.form.qrCode = res.result
				}
			});
		},
		async getDetail(id){
			const result= await this.api.request('wx/productRework/api/detail?id='+id,{},'get',"application/x-www-form-urlencoded")
			this.details = result;
			if(this.details.repairsImgs){
				this.details.repairsList = this.details.repairsImgs.split(",");
			}
			if(this.details.reworkImgs){
				this.details.reworkList = this.details.reworkImgs.split(",");
			}
			
		},
		  // 预览图片
		  doPreviewImage(url, images) {
			uni.previewImage({
			  urls: images,
			  current: url,
			  success: () => {
			  },
			  fail: () => {
				this.showToast('预览图片失败')
			  }
			})
		  },
		showInfoForm(){
			this.showForm = true
			this.$refs.form.resetFields()
		},
		closedPopup(){
			this.showForm = false
		},
		imageUploadChange(data,index,datas){
			this.form.images = datas;
		},
		radioGroupChange(data){
		},
		submit(){
			let that = this;
			this.$refs.form.validate(valid => {
			if (valid) {
			  // 验证通过
			  let form = {}
			  form.id = that.details.id
			  let url = 'wx/productRework/api/rework';
			  if(that.details.status<2){
				  form.isInvalid = that.form.isInvalid
				  if(that.form.isInvalid==0){
					  let urls = [];
					    for(let i=0;i<that.form.images.length;i++){
					  	let url = that.form.images[i].url
					  	urls.push(url)
					    }
					  form.reworkImgs = urls.join()
					  if(that.form.qrCode){
					  	form.qrCode = that.form.qrCode
					  }
				  }else{
					  form.invalidCause = that.form.invalidCause
				  }
			  }else{
				form.auditFailCause = that.form.auditFailCause
				form.status = that.form.checkResult==1?(that.details.isInvalid==1?-1:3):0
				url = 'wx/productRework/api/check';
			  }
			  that.api.request(url,form,'post','').then((res) => {
				  uni.navigateBack({
					  	success: function (e) { 
					  		 var page = getCurrentPages().pop();
					  		 if (page == undefined || page == null) return;
					  		 page.onLoad();
					  	},
				  });
			  }).catch((res) => {
					console.log(res);
			  })
			} else {
			  // 验证失败
			}
		  })
		},
    }
  }
</script>

<style lang="scss" scoped>
	
	.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;
	  }
	}
	
	
	.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>