lanan-repair-app/pages-warehouse/home/home.vue
2024-11-15 16:36:00 +08:00

855 lines
21 KiB
Vue

<template>
<view class="container">
<!--<VNavigationBar style="position: relative;z-index: 99;" leftTitle="true" backgroundColor="rgba(0,0,0,0)" title-color="#fff" title=" "></VNavigationBar>-->
<view class="bodyTopBg"></view>
<view class="body">
<view class="userInfoBox">
<image @click="showUserDetail" v-if="''==userInfo.avatar || null == userInfo.avatar"
:src="defaultAvatar" mode="scaleToFill" style="width: 104rpx;height: 104rpx;border-radius: 50%;"
@error="avatarErr"></image>
<image @click="showUserDetail" v-else :src="imgUrlPrex+userInfo.avatar" mode="scaleToFill"
style="width: 104rpx;height: 104rpx;border-radius: 50%;" @error="avatarErr"></image>
<view @click="showUserDetail" class="userInfo">
<text class="userName">{{ userInfo.nickname }}</text>
<text class="userType">{{ userInfo.roleNames }}</text>
</view>
<view class="msg-box" @click="gotoMsg">
<image mode="aspectFita" src="@/pages-home/static/msg.png" style="width: 48rpx;height: 48rpx"></image>
<view class="msg-num" v-if="noReadNum>0">{{ noReadNum }}</view>
</view>
<image @click="showUserDetail" mode="aspectFita" src="/static/icons/more.png"
style="width: 48rpx;height: 48rpx"></image>
</view>
<!-- 通知公告 -->
<view class="notice-dom" v-if="noticeNum>0" @click="gotoNotice">
<view class="notice-box">
<image class="left-img" src="@/pages-home/static/notice.png"></image>
<view class="center-text">你有{{ noticeNum }}条来自平台的通知公告</view>
<u-icon style="width: 20rpx" color="#999" name="arrow-right" size="12"></u-icon>
</view>
</view>
<view class="body-top">
<view class="body-top-search">
<input class="body-top-search-input" v-model="queryParams.query" placeholder="工单号、车牌号、联系电话"
placeholder-style="font-size: 28rpx"
type="text">
<text @click="onRefresherrefresh">搜索</text>
</view>
<view class="body-top-tab">
<view v-for="(item, index) in tabList" @click="activeTab(index)" :key="index"
:class="{ active: active === index }"
class="body-top-tab-item">
{{ item.name }}
<view v-if="index === active" class="activeLine"></view>
</view>
</view>
</view>
<view class="todoListBox">
<scroll-view :refresher-triggered="isTriggered" @scrolltolower="onReachBottomCus" class="itemContent"
refresher-enabled
scroll-y="true" style="height: 100%" @refresherrefresh="onRefresherrefresh">
<view v-if="active!=3" v-for="(item, index) in ticketWares" :key="index" class="orderItem">
<view class="order-top">
<view class="order-top-left">
<text class="order-top-name">{{ item.repairName }}{{ '配件申请单' }}</text>
<text class="order-top-date">{{ item.createTimeStr }}</text>
</view>
<text class="order-status">{{ item.statusStr }}</text>
</view>
<view class="order-content">
<view>
车牌号:{{ item.licenseNumber }}
</view>
<view>
服务顾问:{{ item.adviserName }}
</view>
</view>
<view class="order-footer">
<template v-if="!queryParams.isBack && typeof queryParams.isBack === 'boolean'">
<view @click="inOutWareHouse(item,true)" class="order-btn yes">通知领料</view>
<!-- <view class="order-btn yes">采购</view>-->
</template>
<template v-else-if="!queryParams.isBack && typeof queryParams.isBack === 'undefined'">
<view @click="inOutWareHouse(item,true)" class="order-btn yes">查看申请</view>
<!-- <view class="order-btn yes">采购</view>-->
</template>
<template v-else-if="queryParams.isBack">
<view @click="inOutWareHouse(item,false)" class="order-btn yes">通知退料</view>
</template>
</view>
</view>
<view v-if="ticketWares.length==0 && active!=3" style="text-align: center">
<image class="" src="@/static/images/nothing.png"></image>
</view>
<order-card :userInfo="userInfo" v-if="active==3" v-for="(item, index) in orderList" :key="index" :order="item" @childEvent="onRefresherrefresh" @doVoid="doVoidReq" @getOrder="openFile" @startWork="startWork" @addProj="addProj"></order-card>
<view style="text-align: center" v-if="orderList.length==0 && active==3">
<image class="" src="@/static/images/nothing.png" ></image>
</view>
</scroll-view>
</view>
</view>
<tabBarVue msg="1" ref="tarBar" title="采购单" @socketSuccess="socketSuccess"></tabBarVue>
</view>
</template>
<script>
import tabBarVue from '@/components/tabBar/tabBar.vue'
import VNavigationBar from '@/components/VNavigationBar.vue'
import OrderCard from "@/components/orderCard.vue";
import config from '@/config'
import request from '@/utils/request';
import {
getToken,
getUserInfo,
getStrData,
getTenantId,
setJSONData
} from '@/utils/auth'
import {getDictTextByCodeAndValue, formatDate,builderOrder, formatTimestamp} from "@/utils/utils";
export default {
components: {
OrderCard,
tabBarVue,
VNavigationBar
},
data() {
return {
tabList: [
{
name: '领配件'
},
{
name: '退配件'
},
{
name: '待审核'
},
{
name: '进行中工单'
},
],
//配件单查询条件
queryParams: {
pageNo: 1,
pageSize: 10,
query: null,
type: "01",
},
//配件单列表
ticketWares: [],
//工单列表
orderList:[],
//数量
total: 0,
//下拉刷新状态
isTriggered: false,
imgUrlPrex: config.baseImageUrl,
userInfo: {
avatar: undefined,
nickname: ''
},
isShow: true,
active: 0,
defaultAvatar: require('@/static/icons/avatar.png'),
//未读消息数量
noReadNum: 0,
//通知公告数量
noticeNum: 0,
//是否首次打开页面
ifFirstLogin: true,
}
},
onLoad() {
if (!getToken()) {
uni.reLaunch({
url: '/pages/login/login'
})
} else {
//直接取缓存中的用户信息
this.userInfo = getUserInfo()
if (!this.$msgSocket) {
this.$startMsgSocket(getTenantId(), getStrData("userId"))
}
}
},
onShow() {
if (!getToken()) {
uni.reLaunch({
url: '/pages/login/login'
})
} else {
this.onRefresherrefresh()
this.getNoReadNum()
this.getNoticeList()
}
},
methods: {
gotoMsg() {
//去消息中心
uni.navigateTo({
url: '/pages-home/msg/message'
})
},
socketSuccess() {
this.getNoReadNum()
this.onRefresherrefresh()
console.log('通知并刷新成功')
},
/**
* 领配件、退配件Tab页
*/
activeTab(index) {
this.active = index
if (index === 0) {
this.queryParams.isBack = false
this.queryParams.isToBeReviewed = undefined
this.isShow = true
} else if (index === 1) {
this.queryParams.isBack = true
this.queryParams.isToBeReviewed = undefined
this.isShow = true
} else if (index === 2) {
this.isShow = false
this.queryParams.isToBeReviewed = true
this.queryParams.isBack = undefined
}
// this.active = index
// if (index == 1) {
// this.queryParams.isBack = false
// this.queryParams.isToBeReviewed = undefined
// this.isShow = true
// } else if (index == 2) {
// this.isShow = true
// this.queryParams.isToBeReviewed = true
// this.queryParams.isBack = undefined
// } else {
// this.isShow = true
// this.queryParams.isBack = undefined
// this.queryParams.isToBeReviewed = undefined
// }
this.onRefresherrefresh()
},
/**
* 下拉刷新数据
*/
onRefresherrefresh() {
this.isTriggered = true
this.queryParams.pageNo = 1
this.total = 0
this.ticketWares = []
this.orderList = []
if(this.active==3){
this.getOrderList()
}else{
this.getTicketWares()
}
},
/**
* 配件单查询
*/
async getTicketWares() {
request({
url: '/admin-api/repair/tw/page',
method: 'get',
params: this.queryParams
}).then((res) => {
if (res.code == 200) {
res.rows.map((item) => {
getDictTextByCodeAndValue("ticket_wares_status", item.status).then(value => {
item.statusStr = value
}).catch(error => {
item.statusStr = "未知"
console.error(error);
});
item.createTimeStr = formatTimestamp(item.createTime)
})
this.total = res.total
if (this.queryParams.pageNo != 1) {
this.ticketWares = this.ticketWares.concat(res.rows)
} else {
this.ticketWares = res.rows
}
this.isTriggered = false
}
})
},
/**
* 查本人待处理工单
*/
getOrderList(){
let paramsObj = {pageNo: this.queryParams.pageNo, pageSize: this.queryParams.pageSize ,ticketNo:this.queryParams.query}
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
}
})
},
/**
* 上滑加载数据
*/
onReachBottomCus() {
//判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕
if (this.queryParams.pageNo * this.queryParams.pageSize >= this.total) {
uni.$u.toast('没有更多数据了')
return
}
//页码+1,调用获取数据的方法获取第二页数据
this.queryParams.pageNo++
//此处调用自己获取数据列表的方法
if(this.active==3){
this.getOrderList()
}else{
this.getTicketWares()
}
},
/**
* 配件出库
*/
inOutWareHouse(formData, isReceive) {
formData.isReceive = isReceive
setJSONData("applyWaresForm", formData)
uni.navigateTo({
url: '/pages-warehouse/inOutWarehouse/inOutWarehouse?isToBeReviewed=' + this.isShow
})
},
/**
* 配件出库操作
*/
handlePass(row) {
//组装提交参数
const formData = {...row}
},
gotoPage(menu) {
uni.navigateTo({
url: menu.path
})
},
avatarErr(err) {
console.log('err', err)
this.userInfo.avatar = this.defaultAvatar
},
showUserDetail() {
uni.navigateTo({
url: '/pages/my/myInfo'
})
},
/**
* 获取未读消息数量
* @returns {Promise<void>}
*/
async getNoReadNum() {
await request({
url: "/admin-api/system/notify-message/get-unread-count",
method: "GET"
}).then((res) => {
if (res.code == 200) {
this.noReadNum = res.data > 99 ? 99 : res.data
}
if (this.ifFirstLogin && this.noReadNum > 0) {
console.log("播放")
this.$refs.tarBar.dianyidain()
this.ifFirstLogin = false
}
})
},
/**
* 跳转通知公告列表页
*/
gotoNotice() {
uni.navigateTo({
url: '/pages-home/notice/notice'
})
},
/**
* 查通知公告--查数量
*/
async getNoticeList() {
const res = await request({
url: "/admin-api/base/notice/page",
method: "get",
params: {
pageNo: 1,
pageSize: 1,
type: 1,
parentServer: "weixiu",
server: "app"
},
tenantIdFlag: false
})
if (res.code == 200) {
this.noticeNum = res.data.total
}
},
}
}
</script>
<style lang="less" scoped>
* {
box-sizing: border-box;
}
.container {
height: 100%;
//background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
display: flex;
flex-direction: column;
position: relative;
padding-top: 60rpx;
background-color: #F3F5F7;
.bodyTopBg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500rpx;
background-image: url("@/static/bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.body {
position: relative;
z-index: 10;
flex: 1;
height: 0;
overflow: auto;
padding-bottom: 30rpx;
display: flex;
flex-direction: column;
}
.notice-dom {
margin: 40rpx 32rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 20rpx;
display: flex;
align-items: center;
.notice-box {
display: flex;
.left-img {
width: 48rpx;
height: 48rpx;
}
.center-text {
width: calc(100% - 130rpx);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 20rpx;
}
}
}
.userInfoBox {
margin: 0 32rpx 40rpx;
display: flex;
column-gap: 20rpx;
align-items: center;
.userInfo {
flex: 1;
width: 0;
.userName {
font-weight: bold;
font-size: 36rpx;
color: #333333;
display: block;
margin-bottom: 16rpx;
}
.userType {
font-size: 24rpx;
color: #0174F6;
display: inline-block;
border-radius: 24rpx 24rpx 24rpx 24rpx;
border: 1rpx solid #0174F6;
padding: 8rpx 16rpx;
}
}
.msg-box {
position: relative;
margin-right: 40rpx;
.msg-num {
position: absolute;
right: -15rpx;
color: white;
background: #d74a43;
width: 35rpx;
height: 35rpx;
line-height: 35rpx;
text-align: center;
font-weight: 800;
font-size: 11px;
border-radius: 50%;
top: -15rpx;
}
}
}
.body-top {
//width: 686rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin: 30rpx 30rpx 0;
.body-top-search {
height: 84rpx;
background: #F3F5F7;
border-radius: 12rpx 12rpx 12rpx 12rpx;
margin: 0 auto;
padding: 0 30rpx;
font-size: 28rpx;
display: flex;
align-items: center;
column-gap: 10rpx;
.body-top-search-input {
flex: 1;
width: 0;
}
}
.body-top-tab {
display: flex;
font-size: 28rpx;
.body-top-tab-item {
flex: 1;
width: 0;
text-align: center;
padding: 28rpx 0;
position: relative;
&.active {
color: #0174F6;
}
.activeLine {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 96rpx;
height: 6rpx;
background: #0174F6;
border-radius: 4rpx 4rpx 0rpx 0rpx;
}
}
}
}
.todoListBox {
flex: 1;
height: 0;
margin: 40rpx 32rpx;
}
.body-top-banner {
text-align: center;
}
.banner {
margin: 24rpx 0 0;
width: 686rpx;
height: 100%;
border-radius: 12rpx 12rpx 12rpx 12rpx;
background-color: #0174F6;
}
.menus {
margin: 30rpx auto 0;
box-sizing: border-box;
width: 686rpx;
padding: 40rpx 38rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 22rpx;
font-size: 24rpx;
.menu-icon {
width: 48rpx;
height: 48rpx;
}
}
.info {
width: 686rpx;
margin: 38rpx auto 0;
display: flex;
align-items: center;
column-gap: 20rpx;
.info-icon {
width: 80rpx;
height: 80rpx;
}
.infoList {
flex: 1;
width: 0;
.infoItem {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 10rpx;
}
.infoIndex {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #333;
}
.infoText {
flex: 1;
width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24rpx;
}
}
.more-icon {
width: 24rpx;
height: 24rpx;
}
}
.repairShop {
width: 686rpx;
margin: 38rpx auto 0;
.title {
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.shopList {
.shopItem {
padding: 30rpx 0;
border-bottom: 1rpx solid #DDDDDD;
display: flex;
align-items: center;
column-gap: 20rpx;
}
.shopImg {
width: 160rpx;
height: 100rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
background-color: #999;
}
.shopInfo {
flex: 1;
width: 0;
}
.shopTitle {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-bottom: 20rpx;
}
.shopDetail {
display: flex;
align-items: center;
font-size: 24rpx;
color: #666666;
column-gap: 10rpx;
}
.shopAddress {
flex: 1;
width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line {
width: 2rpx;
height: 24rpx;
background-color: #858BA0;
}
.shopDistance {
flex-shrink: 0;
}
}
}
.orderItem {
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 0 30rpx 30rpx;
margin-bottom: 20rpx;
.order-top {
padding: 30rpx 0;
display: flex;
align-items: center;
column-gap: 10rpx;
border-bottom: 1rpx solid #DDDDDD;
.order-top-left {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
row-gap: 16rpx;
.order-top-name {
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.order-top-date {
font-size: 24rpx;
color: #858BA0;
}
}
.order-status {
font-size: 24rpx;
color: #E8A321;
}
}
.order-content {
font-size: 28rpx;
color: #858BA0;
& > view {
margin-top: 30rpx;
}
.todoListBox {
}
}
.order-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
column-gap: 30rpx;
padding: 30rpx 0 0;
.order-btn {
width: 172rpx;
height: 60rpx;
border-radius: 30rpx 30rpx 30rpx 30rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
border: 2rpx solid #0174F6;
color: #0174F6;
&.no {
color: #333;
border: 2rpx solid #858BA0;
}
&.yes {
background: #0174F6;
border-radius: 30rpx 30rpx 30rpx 30rpx;
color: #FFFFFF;
}
}
}
.order-remark {
margin-top: 30rpx;
background: #FFEFEF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
font-size: 28rpx;
color: #F92C2C;
padding: 20rpx;
}
}
}
</style>