emsapp/pages/ticket/index.vue

<template>
	<view class="container">
		<view class="item-lists">
			<view class="title">工单号</view>
			<view class="info">{{info.ticketNo || ''}}</view>
		</view>
		<view class="item-lists">
			<view class="title">工单标题</view>
			<view class="info">{{info.title || ''}}</view>
		</view>
		<view class="item-lists">
			<view class="title">提交用户</view>
			<view class="info">{{info.userName || '-'}}</view>
		</view>
		<view class="item-lists">
			<view class="title">问题描述</view>
			<view class="info">{{info.content || ''}}</view>
		</view>
		<view class="item-lists">
			<view class="title">工单状态</view>
			<view class="info">{{ticketStatusOptions[info.status] || ''}}</view>
		</view>
		<view class="item-lists">
			<view class="title">创建时间</view>
			<view class="info">{{info.createTime || '-'}}</view>
		</view>
		<view class="item-lists">
			<view class="title">预期完成时间</view>
			<view class="info">{{info.expectedCompleteTime || '-'}}</view>
		</view>
		<view class="item-lists">
			<view class="title">处理人</view>
			<view class="info">{{info.workName || '-'}}</view>
		</view>
		<view class="item-lists">
			<view class="title">上传图片</view>
			<view class="info">
				<uni-file-picker
					v-model="imgUrl" 
					:auto-upload="false"
					:limit="1" 
					file-mediatype="image" 
					file-extname="png,jpg"
					:image-styles="imageStyles"
					@select="select" 
					>
					</uni-file-picker>
			</view>
		</view>
		<button class="button" type="primary" style="margin-top:30px;" :loading="loading" @click="submit">提交</button>
	</view>
</template>

<script>
	import request from '@/utils/request'
	import { getToken } from '@/utils/auth'
	import config from '@/config'
	import {mapState} from 'vuex'
	import {getTicket,updateTicket} from '@/api/ems/ticket'
	export default{
		computed:{
			...mapState({
				ticketStatusOptions:(state)=>state.ems.ticketStatusOptions
			})
		},
		data(){
			return {
				imageStyles:{
					width:150,
					height:100,
				},
				loading:false,
				info:{},
				imgUrl:[],
			}
		},
		methods:{
			submit(){
				if(this.imgUrl.length === 0 || this.imgUrl[0].url === ''){
					uni.showToast({
						icon:'none',
						title: '请上传图片',
						duration: 2000
					});
					return
				}
				this.loading = true
				const images = this.imgUrl.map(item=>item.url)
				updateTicket({id:this.info.id,images:JSON.stringify(images)}).then(response=>{
					if(response.code === 200){
						uni.showToast({
							title: '提交成功',
							duration: 2000
						});
						uni.switchTab({
							url: '/pages/index'
						});
					}
				}).finally(()=>this.loading = false)
				
			},
			// 获取上传状态
			select(e){
				uni.uploadFile({  
				    url: config.baseUrl+"/common/upload",
					header: {
					        Authorization: "Bearer " + getToken(),
					},
					filePath: e.tempFilePaths[0],
					name: 'file',//对应接口的名称
					complete: (res)=>{  
						 console.log('返回数据',res);
						if(res?.statusCode === 200 && res?.data){
							//图片上传成功
							if(res?.data){
								const data=JSON.parse(res.data)
								this.imgUrl = [
									{name:data.newFileName || '',extname:data.originalFilename || '',url:data.url || ''}
								]
							}else{
								uni.showToast({
									icon:'none',
									title: '图片上传失败',
									duration: 2000
								});
								this.imgUrl = []
							}
							
						}else{
							uni.showToast({
								icon:'none',
								title: '图片上传失败',
								duration: 2000
							});
						}
					}  
				})
			},
		},
		mounted(){
			uni.showLoading()
			getTicket(this.$route.query.id).then(response=>{
				this.info = JSON.parse(JSON.stringify(response?.data || {}))
				const {images=''} = this.info
				this.info.images = JSON.parse(images)
				const imgList = this.info.images || []
				if(imgList.length>0){
					this.imgUrl = imgList.map(item=>{
						return {name:item || '',extname:item || '',url:item}
					})
				}
			}).finally(()=>{
				uni.hideLoading()
			})
		}
	}
</script>

<style scoped lang="scss">
	.container{
		background-color: #ffffff;
		padding:20px 20px;
	}
	.item-lists{
		box-shadow: 0 0 10px rgba(0,0,0,.1),0 0 0 rgba(0,0,0,.5);
		border-radius: 5px;
		font-size: 16px;
		line-height: 20px;
		margin-bottom: 20px;
		.title{
			font-size: 18px;
			border-bottom:1px solid #eee ;
			padding:10px 15px;
			background-color: #e4e4e4;
			color:#333;
		}
		.info{
			padding:10px 15px;
		}
	}

	
</style>