lanan-repair-app/pages-order/orderList/orderList.vue
2024-10-18 21:44:30 +08:00

319 lines
8.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="header">
<view class="searchBox">
<input class="searchInput" type="text" v-model="searchText" placeholder="工单号、车牌号、手机号、客户姓名" placeholder-style="font-size: 28rpx">
<text class="searchBtn" @click="onRefresherrefresh">搜索</text>
<text class="searchBtn" @click="clearText">清空</text>
</view>
</view>
<view class="body">
<view class="tabList">
<view v-for="(item, index) in tabList" :key="index" :class="{actived: item.id === activeKey}" class="tabItem"
@click="changeTabFun(item.id)">
{{ item.title }}
<view v-if="activeKey === item.id" class="activeLine"></view>
</view>
</view>
<view class="orderList">
<scroll-view scroll-y="true" style="height: 100%" class="itemContent" bindscrolltolower="onReachBottom"
refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
<order-card v-for="(item, index) in orderList" :key="index" :order="item" @childEvent="onRefresherrefresh" @startWork="startWork"></order-card>
<view style="text-align: center" v-if="orderList.length==0">
<image class="" src="@/static/images/nothing.png" ></image>
</view>
</scroll-view>
</view>
</view>
<tabBarVue msg="2"></tabBarVue>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import tabBarVue from '@/components/tabBar/tabBar.vue'
import OrderCard from "@/components/orderCard.vue";
import request from '@/utils/request';
import {formatTimestamp,getOrderStatusText,builderOrder,saveTicketsRecords} from "@/utils/utils";
import {
getToken,
getUserInfo,
getStrData,
getTenantId
} from '@/utils/auth'
export default {
components: {
OrderCard,
tabBarVue,
VNavigationBar
},
data() {
return {
searchText:"",
payShow: false,
activeKey: 0,
pageNo: 1,
pageSize: 10,
total: 0,
//下来刷新状态
isTriggered:false,
imageUrl: '',
tabList: [
{
id: 0,
title: '待处理'
},
{
id: 1,
title: '全部'
},
],
orderList: [
],
}
},
onShow() {
if(!getToken()){
uni.reLaunch({
url: '/pages/login/login'
})
}else{
//直接取缓存中的用户信息
this.userInfo = getUserInfo()
this.onRefresherrefresh()
}
},
methods: {
/**
* 上滑加载数据
*/
onReachBottom() {
//判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕
if (this.pageNo * this.pageSize >= this.total) {
uni.$u.toast('没有更多数据了')
return
}
//页码+1,调用获取数据的方法获取第二页数据
this.pageNo++
//此处调用自己获取数据列表的方法
this.getOrderList()
},
/**
* 下拉刷新数据
*/
onRefresherrefresh(){
this.isTriggered = true
this.pageNo = 1
this.total = 0
this.orderList = []
this.getOrderList()
},
/**
* 清空
*/
clearText(){
this.searchText = ""
this.onRefresherrefresh()
},
/**
* 开始施工
*/
startWork(id){
let paramsObj = {ticketId:id}
//先查当前用户在本工单下有几个维修项目
request({
url: '/admin-api/repair/titem/listProject',
method: 'get',
params:paramsObj
}).then((res) => {
console.log(res)
if (res.code == 200 && res.data.length>0) {
if(res.data.length==1){
//只有1个直接开始施工
this.startWorkRequest(id,"02",res.data[0].id,"02","kssg","开始施工")
}else{
uni.showActionSheet({
itemList: res.data.map(m => m.itemName),
success: ({
tapIndex
}) => {
this.startWorkRequest(id,"02",res.data[tapIndex].id,"02","kssg","开始施工")
}
})
}
}else{
uni.showToast({
title: '操作失败,请联系管理员',
icon: 'none'
})
}
})
},
/**
* 开始施工请求后台
*/
async startWorkRequest(id,ticketsWorkStatus,itemId,itemStatus,recordType,remark){
try {
const result = await saveTicketsRecords(id,ticketsWorkStatus,itemId,itemStatus,recordType,remark,null);
console.error("result",result);
this.onRefresherrefresh()
} catch (error) {
console.error(error);
}
},
getOrderList(){
let paramsObj = {pageNo: this.pageNo, pageSize: this.pageSize, isFinish: "0"}
console.log("this.searchText",this.searchText)
if(''!=this.searchText){
paramsObj['ticketNo'] = this.searchText
}
if(1==this.activeKey){
//查所有订单
paramsObj['selectType'] = "all"
}
request({
url: '/admin-api/repair/tickets/pageType',
method: 'get',
params:paramsObj
}).then((res) => {
console.log(res)
if (res.code == 200) {
let thisPageRecords = []
if(res.data && res.data.hasOwnProperty("records")){
for (let i = 0; i < res.data.records.length; i++) {
let order = res.data.records[i]
let viewOrder = builderOrder(order)
if(order.booking){
viewOrder['appointDate'] = formatTimestamp(order.createTime)
}
let projectList = []
if(order.itemList){
for (let j = 0; j < order.itemList.length; j++) {
let itemObj = order.itemList[j]
if("01"==itemObj.itemType){
projectList.push({
id:itemObj.id,
name:itemObj.itemName
})
}
}
}
viewOrder['projectList'] = projectList
thisPageRecords.push(viewOrder)
}
}
//判断 如果获取的数据的页码不是第一页,就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
if (this.pageNo != 1) {
this.orderList = this.orderList.concat(thisPageRecords)
} else {
this.orderList = thisPageRecords
}
//将获取的总条数赋值
this.total = res.data.total
this.isTriggered = false
}
})
},
changeTabFun(id) {
this.activeKey = id
this.onRefresherrefresh()
},
gotoDetail(row) {
if (row.goodsType === '2') {
uni.navigateTo({
url: '/pages-order/orderDetail/orderDetail?ticketsId=' + row.goodsId
})
} else {
uni.navigateTo({
url: '/pages-order/orderDetail/orderDetail'
})
}
},
}
}
</script>
<style lang="less" scoped>
.container {
height: 100%;
background: #F3F5F7;
display: flex;
flex-direction: column;
color: #333333;
.header {
padding: 40rpx 32rpx 20rpx;
background-color: #fff;
.searchBox {
background: #F3F5F7;
padding: 20rpx 32rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: flex;
align-items: center;
column-gap: 12rpx;
.searchInput {
flex: 1;
width: 0;
}
.searchBtn {
font-weight: 500;
font-size: 28rpx;
color: #0174F6;
}
}
}
.body {
flex: 1;
height: 0;
padding: 24rpx 32rpx;
overflow: auto;
}
.tabList {
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: flex;
align-items: center;
padding: 0 40rpx;
.tabItem {
padding: 30rpx;
flex: 1;
text-align: center;
position: relative;
font-size: 24rpx;
&.actived {
color: #0174F6;
}
.activeLine {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 96rpx;
height: 6rpx;
background: #0174F6;
border-radius: 4rpx 4rpx 0rpx 0rpx;
}
}
}
.orderList {
//padding: 30rpx 0;
padding-top: 10rpx;
height: calc(100% - 90rpx);
display: flex;
flex-direction: column;
row-gap: 20rpx;
.orderItem {
}
}
}
</style>