工单列表、工单详情
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": {
|
||||
"navigationBarTitleText": "浏览文本"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ticket/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工单详情"
|
||||
}
|
||||
}],
|
||||
"tabBar": {
|
||||
"color": "#000000",
|
||||
|
||||
123
pages/index.vue
123
pages/index.vue
@ -1,36 +1,109 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="@/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">Hello EMS</text>
|
||||
</view>
|
||||
<scroll-view class="scroll-y" :scroll-y="true" @scrolltolower="lower" scrolltoupper="upper" >
|
||||
<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
|
||||
<view class="item-title" :class="item.status === 1 ? 'done' : 'undone'" >工单号：{{item.ticketNo}}</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>
|
||||
</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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ffffff;
|
||||
padding:20px;
|
||||
.scroll-y{
|
||||
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>
|
||||
|
||||
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 Vuex from 'vuex'
|
||||
import user from '@/store/modules/user'
|
||||
import ems from '@/store/modules/ems'
|
||||
import getters from './getters'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const store = new Vuex.Store({
|
||||
modules: {
|
||||
user
|
||||
user,
|
||||
ems
|
||||
},
|
||||
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