工单列表、工单详情
This commit is contained in:
白菜
37
api/ems/ticket.js
Normal file
37
api/ems/ticket.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询工单主列表
|
||||||
|
export function listTicket({pageNum, pageSize}) {
|
||||||
|
return request({
|
||||||
|
url: `/ticket/list?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询工单主详细
|
||||||
|
export function getTicket(id) {
|
||||||
|
return request({
|
||||||
|
url: '/ticket/' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function uploadAvatar(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/user/profile/avatar',
|
||||||
|
// url:'/common/upload',
|
||||||
|
method: 'post',
|
||||||
|
// header: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||||
|
header: { 'Content-Type': 'multipart/form-data' },
|
||||||
|
data: JSON.stringify(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改工单
|
||||||
|
export function updateTicket(data) {
|
||||||
|
return request({
|
||||||
|
url: '/ticket',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -70,6 +70,12 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "浏览文本"
|
"navigationBarTitleText": "浏览文本"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/ticket/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "工单详情"
|
||||||
|
}
|
||||||
}],
|
}],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"color": "#000000",
|
"color": "#000000",
|
||||||
|
|||||||
123
pages/index.vue
123
pages/index.vue
@ -1,36 +1,109 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<image class="logo" src="@/static/logo.png"></image>
|
<scroll-view class="scroll-y" :scroll-y="true" @scrolltolower="lower" scrolltoupper="upper" >
|
||||||
<view class="text-area">
|
<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
|
||||||
<text class="title">Hello EMS</text>
|
<view class="item-title" :class="item.status === 1 ? 'done' : 'undone'" >工单号：{{item.ticketNo}}</view>
|
||||||
</view>
|
<view class="item-content">
|
||||||
|
<view class="item-info">工单标题:{{item.title}}</view>
|
||||||
|
<view class="item-info">问题描述:{{item.content}}</view>
|
||||||
|
<view class="item-info">工单状态:{{ticketStatusOptions[item.status]}}</view>
|
||||||
|
<view class="item-info">预期完成时间:{{item.expectedCompleteTime || '-'}}</view>
|
||||||
|
<view class="item-info">处理人:{{item.workName || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
import {listTicket} from 'api/ems/ticket'
|
||||||
|
export default{
|
||||||
|
computed:{
|
||||||
|
...mapState({
|
||||||
|
ticketStatusOptions:(state)=>state.ems.ticketStatusOptions
|
||||||
|
})
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
total:0,
|
||||||
|
list:[],
|
||||||
|
pageNum:1,
|
||||||
|
pageSize:10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
lower(){
|
||||||
|
if(this.list.length>=this.total){
|
||||||
|
return console.log('数据已经加载完成')
|
||||||
|
}
|
||||||
|
this.pageNum+=1;
|
||||||
|
this.init().catch(()=>{this.pageNum-=1})
|
||||||
|
},
|
||||||
|
init(){
|
||||||
|
uni.showLoading()
|
||||||
|
return listTicket({pageNum:this.pageNum,pageSize:this.pageSize}).then(response=>{
|
||||||
|
const data = JSON.parse(JSON.stringify(response?.rows || []))
|
||||||
|
this.list =this.list.concat(data)
|
||||||
|
this.total = response?.total || 0
|
||||||
|
}).finally(()=>{uni.hideLoading()})
|
||||||
|
},
|
||||||
|
toDetail(id) {
|
||||||
|
this.$tab.navigateTo(`/pages/ticket/index?id=${id}`)
|
||||||
|
},
|
||||||
|
reset(){
|
||||||
|
this.list = []
|
||||||
|
this.total = 0
|
||||||
|
this.pageNum=1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow(){
|
||||||
|
this.reset()
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
background-color: #ffffff;
|
||||||
flex-direction: column;
|
padding:20px;
|
||||||
align-items: center;
|
.scroll-y{
|
||||||
justify-content: center;
|
height: 100vh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
.item-list{
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border:1px solid #eee;
|
||||||
|
.item-title{
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
font-size: 18px;
|
||||||
|
border-bottom:1px solid #eee ;
|
||||||
|
padding:10px 15px;
|
||||||
|
background-color: #FC6B69;
|
||||||
|
color:#fff;
|
||||||
|
&.done{
|
||||||
|
background-color: #05AEA3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-content{
|
||||||
|
padding:15px 15px;
|
||||||
|
.item-info{
|
||||||
|
margin-bottom:20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content .item-info:last-child{
|
||||||
|
margin-bottom:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content .item-list:last-child{
|
||||||
|
margin-bottom:0;
|
||||||
|
}
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 200rpx;
|
|
||||||
width: 200rpx;
|
|
||||||
margin-top: 200rpx;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-area {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #8f8f94;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
180
pages/ticket/index.vue
Normal file
180
pages/ticket/index.vue
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<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.createBy || '-'}}</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.updateBy || '-'}}</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;" v-if="info.status!=1" :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: 0px 0px 3px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
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>
|
||||||
@ -1,13 +1,15 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Vuex from 'vuex'
|
import Vuex from 'vuex'
|
||||||
import user from '@/store/modules/user'
|
import user from '@/store/modules/user'
|
||||||
|
import ems from '@/store/modules/ems'
|
||||||
import getters from './getters'
|
import getters from './getters'
|
||||||
|
|
||||||
Vue.use(Vuex)
|
Vue.use(Vuex)
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
modules: {
|
modules: {
|
||||||
user
|
user,
|
||||||
|
ems
|
||||||
},
|
},
|
||||||
getters
|
getters
|
||||||
})
|
})
|
||||||
|
|||||||
6
store/modules/ems.js
Normal file
6
store/modules/ems.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
const ems={
|
||||||
|
state:{
|
||||||
|
ticketStatusOptions:{0:'待处理', 1:'已处理', 2:'处理中'},//工单处理状态
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default ems
|
||||||
Reference in New Issue
Block a user