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: 14px;
		line-height: 20px;
		margin-bottom: 20px;

		.title {
			font-size: 16px;
			border-bottom: 1px solid #eee;
			padding: 10px 15px;
			background-color: #e4e4e4;
			color: #333;
		}

		.info {
			padding: 10px 15px;
		}
	}
</style>