工作栏
This commit is contained in:
白菜
@ -1,183 +1,195 @@
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user