<route lang="json5" type="page">
|
{
|
layout: 'default',
|
needLogin: true,
|
style: {
|
navigationBarTitleText: '保养工单',
|
'app-plus': {
|
titleNView: {
|
buttons: [
|
{
|
text: '提交',
|
fontSize: '14px',
|
color: '#FFFFFF',
|
},
|
{
|
text: '',
|
fontSize: '24px',
|
color: '#FFFFFF',
|
},
|
],
|
},
|
},
|
},
|
}
|
</route>
|
|
<template>
|
<z-paging
|
ref="paging"
|
v-model="dataList"
|
@query="queryList"
|
:auto="false"
|
show-refresher-update-time
|
>
|
<template #top>
|
<wd-cell>
|
<template #title>
|
<text class="text-color-gray">设备</text>
|
</template>
|
</wd-cell>
|
<view class="h-[2px] w-full bg-base"></view>
|
<wd-card type="rectangle">
|
<template #title>
|
<view class="flex justify-between">
|
<view class="flex items-center menu-title-box">
|
<view class="menu-indicator"></view>
|
<view class="ml-1 text-sm align-center">{{ maintSt.equName }}</view>
|
<view class="text-color-gray ml-2 text-mini">{{ maintSt.assetNo }}</view>
|
</view>
|
|
<view class="flex items-center">
|
<text class="text-color-gray text-mini">{{ maintSt.planTime }}</text>
|
</view>
|
</view>
|
</template>
|
<view class="flex h-[140rpx]" items-center>
|
<image class="slot-img text-center" src="/static/images/camera.png" />
|
<view class="flex-1">
|
<view class="text-color-gray text-xs mt-1 flex">
|
<text class="mr-3">工单总数: {{ maintSt.orderCount }}</text>
|
|
|
<text class="mx-3">已完成: {{ maintSt.wcCount }}</text>
|
</view>
|
<view class="text-color-gray text-xs mt-2 flex">
|
<text class="mr-3">待保养: {{ maintSt.dbyCount }}</text>
|
|
|
<text class="mx-3">保养中: {{ maintSt.byCount }}</text>
|
|
|
<text class="ml-3">待验证: {{ maintSt.dyzCount }}</text>
|
</view>
|
<view class="text-color-gray text-xs mt-2 flex">
|
<text>状态：</text>
|
<template v-if="maintSt.status === '1'">
|
<wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
|
<text class="ml-1">已完成</text>
|
</template>
|
<template v-else>
|
<wd-icon class="icon-color-base" name="detection" size="40rpx"></wd-icon>
|
<text class="ml-1">进行中</text>
|
</template>
|
</view>
|
|
<view class="text-color-gray text-xs mt-2 flex">
|
创建时间: {{ maintSt.createTime }}
|
</view>
|
</view>
|
</view>
|
</wd-card>
|
</template>
|
|
<view class="bg-base">
|
<view class="w-full h-[24rpx]"></view>
|
<wd-cell class="mb-[2px]">
|
<template #title>
|
<text class="text-color-gray">保养项</text>
|
</template>
|
</wd-cell>
|
|
<wd-card type="rectangle" v-for="(item, index) in dataList" :key="item.id">
|
<template #title>
|
<view class="flex justify-between">
|
<view class="flex items-center menu-title-box">
|
<view class="menu-indicator"></view>
|
<view class="ml-1 text-sm align-center">
|
<wd-text :text="item.maintName" :lines="1"></wd-text>
|
</view>
|
</view>
|
|
<view class="flex items-center w-[20%] justify-end">
|
<text class="text-color-gray text-mini">
|
{{ item?.planTime }}
|
</text>
|
</view>
|
</view>
|
</template>
|
<view class="flex h-[200rpx]" items-center>
|
<image class="slot-img text-center" src="/static/ico/ico-platform.png" />
|
<view class="flex-1 text-color-gray text-xs flex-row">
|
<view class="mr-3 mt-2">保养单号: {{ item.maintCode }}</view>
|
<view class="mr-3 mt-2">计划保养日期: {{ item.planTime }}</view>
|
<view class="mr-3 mt-2">保养开始时间: {{ item.startTime }}</view>
|
<view class="mr-3 mt-2">保养结束时间: {{ item.endTime }}</view>
|
<view class="text-color-gray text-xs mt-2 flex">
|
<text>状态：</text>
|
<template v-if="item.status === '0'">
|
<wd-icon class="icon-color-warning" name="books" size="34rpx"></wd-icon>
|
<text class="ml-1">待保养</text>
|
</template>
|
<template v-else-if="item.status === '1'">
|
<wd-icon class="icon-color-base" name="books" size="34rpx"></wd-icon>
|
<text class="ml-1">保养中</text>
|
</template>
|
<template v-else-if="item.status === '2'">
|
<wd-icon class="icon-color-purple" name="books" size="34rpx"></wd-icon>
|
<text class="ml-1">待验证</text>
|
</template>
|
<template v-else-if="item.status === '3'">
|
<wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
|
<text class="ml-1">已完成</text>
|
</template>
|
<text class="mx-3">|</text>
|
<wd-icon class="icon-color-base" name="camera" size="30rpx"></wd-icon>
|
<text class="ml-1">{{ item.maintUserName }}</text>
|
</view>
|
</view>
|
<!--操作工或维修工角色-->
|
<template v-if="isOperatorOrRepair()">
|
<view class="flex flex-col justify-between" v-if="item.status === '0'">
|
<wd-button
|
size="small"
|
icon="edit-outline"
|
@click.stop="handleStartMaint(item)"
|
>
|
开始保养
|
</wd-button>
|
|
<wd-button
|
class="mt-3"
|
size="small"
|
icon="edit-outline"
|
@click.stop="handleMaintFinish(item)"
|
>
|
一键保养
|
</wd-button>
|
</view>
|
<wd-button
|
v-if="item.status === '1'"
|
size="small"
|
icon="edit-outline"
|
@click.stop="itemClick(item)"
|
>
|
保养中
|
</wd-button>
|
|
<wd-button
|
v-if="item.status === '2'"
|
size="small"
|
icon="edit-outline"
|
@click.stop="itemClick(item)"
|
>
|
待验证
|
</wd-button>
|
|
<wd-button
|
v-if="item.status === '3'"
|
size="small"
|
icon="check-outline"
|
@click.stop="itemClick(item)"
|
>
|
已完成
|
</wd-button>
|
</template>
|
|
<!--管理员角色-->
|
<template v-else-if="isLeader()">
|
<wd-button v-if="item.status === '0'" size="small" icon="warn-bold" disabled>
|
待保养
|
</wd-button>
|
<wd-button v-if="item.status === '1'" size="small" icon="warn-bold" disabled>
|
保养中
|
</wd-button>
|
|
<wd-button
|
v-if="item.status === '2'"
|
size="small"
|
icon="edit-outline"
|
@click.stop="itemClick(item)"
|
>
|
待验证
|
</wd-button>
|
|
<wd-button
|
v-if="item.status === '3'"
|
size="small"
|
icon="check-outline"
|
@click.stop="itemClick(item)"
|
>
|
已完成
|
</wd-button>
|
</template>
|
</view>
|
</wd-card>
|
<wd-cell>
|
<template #title>
|
<text class="text-color-gray">其他信息</text>
|
</template>
|
</wd-cell>
|
<view class="h-[2px] w-full bg-base"></view>
|
<wd-textarea
|
label="特记事项"
|
label-width="200rpx"
|
type="textarea"
|
v-model="maintSt.specialNote"
|
auto-height
|
:maxlength="200"
|
show-word-limit
|
placeholder="请输入特记事项"
|
clearable
|
/>
|
</view>
|
</z-paging>
|
</template>
|
<script setup lang="ts">
|
import type { MaintStVO } from '@/service/maint.d'
|
import { getMaintSt, getMaintStOrderList, updateMaintOrder, updateMaintSt } from '@/service/maint'
|
import { ref, reactive } from 'vue'
|
import { useToast, useMessage } from 'wot-design-uni'
|
import { isLeader, isOperatorOrRepair } from '@/utils/RoleUtils'
|
import { formatDate } from '@/utils/DateUtils'
|
const message = useMessage()
|
const toast = useToast()
|
|
const paging = ref(null)
|
const dataList = ref([])
|
const maintStId = ref('')
|
|
interface QueryParams {
|
pageNum: number
|
pageSize: number
|
maintCode: string
|
status?: string
|
}
|
|
const maintSt = reactive<MaintStVO>({
|
id: '',
|
equName: '',
|
assetNo: '',
|
planTime: '',
|
createTime: '',
|
orderCount: null,
|
wcCount: null,
|
dbyCount: null,
|
byCount: null,
|
dyzCount: null,
|
specialNote: '',
|
})
|
const queryList = (pageNum?: number, pageSize?: number) => {
|
const params: QueryParams = {
|
pageNum,
|
pageSize,
|
maintCode: maintCode.value,
|
}
|
getMaintStOrderList(params)
|
.then((res: any) => {
|
// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
|
paging.value.completeByTotal(res.rows, res.total)
|
})
|
.catch((res) => {
|
// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
paging.value.complete(false)
|
})
|
}
|
function initMaintSt(id: any) {
|
getMaintSt(id)
|
.then((res: any) => {
|
Object.assign(maintSt, res)
|
paging.value.reload()
|
})
|
.catch((res) => {
|
console.error(res)
|
toast.error(res?.data?.msg || '请求失败')
|
})
|
}
|
|
function itemClick(item) {
|
goToOrderDetail(item)
|
}
|
|
function goToOrderDetail(item) {
|
uni.navigateTo({
|
url: `/pages/maint/order-detail?id=${item.id}`,
|
})
|
}
|
|
/**
|
* 开始保养
|
* @param item
|
*/
|
function handleStartMaint(item) {
|
// 确认开始修改状态为1-保养中
|
const data = Object.assign({}, item)
|
data.status = '1'
|
message
|
.confirm({
|
msg: '确定开始保养？',
|
title: '提示',
|
beforeConfirm: ({ resolve }) => {
|
updateOrder(data, resolve)
|
},
|
})
|
.then(() => {})
|
.catch((error) => {
|
console.log(error)
|
})
|
}
|
|
|
/**
|
* 一键保养
|
* @param item
|
*/
|
function handleMaintFinish(item) {
|
// 一键保养
|
const data = Object.assign({}, item)
|
data.status = '2'
|
data.startTime = formatDate(new Date())
|
data.endTime = formatDate(new Date())
|
message
|
.confirm({
|
msg: '确定使用一键保养？',
|
title: '提示',
|
beforeConfirm: ({ resolve }) => {
|
updateOrder(data, resolve)
|
},
|
})
|
.then(() => {})
|
.catch((error) => {
|
console.log(error)
|
})
|
}
|
|
/**
|
* 更新保养工单
|
* @param item
|
* @param resolve
|
*/
|
function updateOrder(data: any, resolve: any) {
|
|
updateMaintOrder(data)
|
.then((res: any) => {
|
resolve(true)
|
if (res?.code === 200) {
|
reloadData()
|
// 保养状态才需要跳转
|
if(data?.status === '1'){
|
goToOrderDetail(data)
|
}
|
}
|
})
|
.catch((res) => {
|
console.error(res)
|
})
|
}
|
|
function handleUpdateMaintSt() {
|
if (maintSt.orderCount !== maintSt.wcCount) {
|
toast.info('请先完成所有保养项！')
|
return false
|
}
|
|
const data: any = Object.assign(
|
{},
|
{
|
id: maintSt.id,
|
orderCount: maintSt.orderCount,
|
wcCount: maintSt.wcCount,
|
status: maintSt.status,
|
specialNote: maintSt.specialNote,
|
},
|
)
|
if (data.orderCount === data.wcCount) {
|
data.status = '1'
|
}
|
message
|
.confirm({
|
msg: '确定更新工单汇总数据？',
|
title: '提示',
|
beforeConfirm: ({ resolve }) => {
|
updateMaintSt(data)
|
.then((res: any) => {
|
resolve(true)
|
if (res?.code === 200) {
|
reloadData()
|
toastSucces()
|
}
|
})
|
.catch((res) => {
|
console.error(res)
|
})
|
},
|
})
|
.then(() => {})
|
.catch((error) => {
|
console.log(error)
|
})
|
}
|
|
function toastSucces() {
|
toast.success('操作成功')
|
}
|
|
function reloadData() {
|
initMaintSt(maintStId.value)
|
}
|
onNavigationBarButtonTap((e) => {
|
if (e.index === 0) {
|
handleUpdateMaintSt()
|
}
|
})
|
|
onLoad(() => {
|
uni.$on('maint-order-refresh', reloadData)
|
})
|
onUnload(() => {
|
uni.$off('maint-order-refresh', reloadData)
|
})
|
|
/**
|
* 查询保养明细需要的code
|
*/
|
const maintCode = computed(() => `${maintSt.equId}_${maintSt.planTime}`)
|
|
onLoad((options) => {
|
maintStId.value = options.id
|
reloadData()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.menu-title-box {
|
height: 30rpx;
|
line-height: 30rpx;
|
}
|
|
.slot-img {
|
width: 72rpx;
|
height: 72rpx;
|
margin-right: 24rpx;
|
}
|
|
.text-mini {
|
font-size: 22rpx;
|
}
|
|
.menu-indicator {
|
width: 6rpx;
|
height: 22rpx;
|
border-radius: 10rpx;
|
background-color: $uni-color-primary;
|
}
|
|
:deep(.wd-card__footer) {
|
padding: 10rpx !important;
|
}
|
|
.col-title-box {
|
}
|
|
.bg-primary {
|
background: $uni-color-primary;
|
}
|
|
:deep(.wd-navbar__text) {
|
font-size: 26rpx;
|
color: white;
|
}
|
|
:deep(.wd-icon-arrow-left:before),
|
:deep(.wd-navbar__title) {
|
color: white;
|
font-weight: 0;
|
font-size: 32rpx;
|
}
|
</style>
|
