<route lang="json5">
|
{
|
style: {
|
navigationBarTitleText: '点检记录',
|
navigationStyle: 'custom',
|
navigationBarBackgroundColor: '#4D80F0',
|
},
|
}
|
</route>
|
<template>
|
<z-paging ref="paging" v-model="dataList" @query="queryList" show-refresher-update-time>
|
<template #top>
|
<wd-navbar
|
title="点检记录"
|
left-arrow
|
@click-left="goBack"
|
right-text="提交"
|
@click-right="handleClickRight"
|
custom-style="background: #4D80F0;"
|
safeAreaInsetTop
|
></wd-navbar>
|
|
<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">{{ inspSt.equName }}</view>
|
<view class="text-color-gray ml-2 text-mini">{{ inspSt.assetNo }}</view>
|
</view>
|
|
<view class="flex items-center">
|
<text class="text-color-gray text-mini">{{ inspSt.planTimeStr }}</text>
|
</view>
|
</view>
|
</template>
|
<view class="flex h-[100rpx]" 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">点检总数: {{ dataCount }}</text>
|
|
|
<text class="mx-3">已点检: {{ checkCount }}</text>
|
|
|
<text class="ml-3">未点检: {{ dataCount - checkCount }}</text>
|
</view>
|
<view class="text-color-gray text-xs mt-2 flex">
|
<text class="mr-3">正常: {{ normalNum }}</text>
|
|
|
<text class="mx-3">异常: {{ abNormalNum }}</text>
|
</view>
|
<view class="text-color-gray text-xs mt-2 flex">
|
<text>状态：</text>
|
<template v-if="dataCount > 0 && dataCount === checkCount">
|
<wd-icon class="icon-color-success" name="check-outline" size="40rpx"></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>
|
</view>
|
</wd-card>
|
</template>
|
|
<view class="bg-base">
|
<view class="w-full h-[24rpx]"></view>
|
<wd-cell>
|
<template #title>
|
<text class="text-color-gray">点检项</text>
|
</template>
|
<wd-button size="small" type="text" @click.stop="toggleCollapse">
|
{{ isAllExpanded ? '全部折叠' : '全部展开' }}
|
</wd-button>
|
</wd-cell>
|
<wd-collapse v-model="collSelects" title="点检项" ref="collapseRef">
|
<wd-collapse-item :name="item.id" v-for="(item, index) in dataList">
|
<template #title="{ expanded, disabled, isFirst }">
|
<view class="flex justify-between">
|
<view class="flex justify-center items-center">
|
<text class="text-sm">{{ item.inspName }}</text>
|
</view>
|
|
<view class="flex items-center">
|
<wd-radio-group
|
v-model="item.inspResult"
|
inline
|
shape="dot"
|
@change="inspResultClick(item)"
|
>
|
<wd-radio value="1">正常</wd-radio>
|
<wd-radio value="2">异常</wd-radio>
|
</wd-radio-group>
|
<wd-icon
|
v-if="expanded"
|
name="arrow-up"
|
size="30rpx"
|
class="icon-color-gray"
|
></wd-icon>
|
<wd-icon v-else name="arrow-down" size="30rpx" class="icon-color-gray"></wd-icon>
|
</view>
|
</view>
|
</template>
|
<view class="text-color-gray text-xs flex justify-between">
|
<text class="mr-3">点检人: {{ item.inspUserName }}</text>
|
<text class="mx-3">点检时间: {{ item.inspTime }}</text>
|
</view>
|
</wd-collapse-item>
|
</wd-collapse>
|
</view>
|
</z-paging>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import { useUserStore, useAccessStore, useSystemConfigStore } from '@/store'
|
import { getInspStRecordList, updateInspRecord, updateInspRecordBatch } from '@/service/inspect'
|
import { useToast, useMessage } from 'wot-design-uni'
|
import type { CollapseInstance } from 'wot-design-uni/components/wd-collapse/types'
|
const message = useMessage()
|
const toast = useToast()
|
|
const collapseRef = ref<CollapseInstance>()
|
const isAllExpanded = ref(false)
|
|
// 定义接口
|
interface QueryParams {
|
pageNum: number
|
pageSize: number
|
inspCode: string
|
status?: string
|
}
|
|
interface InspSt {
|
inspCode: string
|
equName: string
|
assetNo: string
|
planTimeStr?: string
|
}
|
|
const dataChange = ref(false)
|
|
const userStore = useUserStore()
|
|
const collSelects = ref<string[]>([])
|
|
// 点检汇总数据(上个页面传值)
|
const inspSt = reactive<InspSt>({
|
inspCode: '',
|
equName: '',
|
assetNo: '',
|
planTimeStr: '',
|
})
|
|
const paging = ref(null)
|
const dataList = ref([])
|
|
const queryList = (pageNum?: number, pageSize?: number) => {
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
// 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
|
const params: QueryParams = {
|
pageNum,
|
pageSize,
|
inspCode: inspSt.inspCode,
|
}
|
|
getInspStRecordList(params)
|
.then((res: any) => {
|
// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
|
paging.value.complete(res.rows)
|
})
|
.catch((res) => {
|
// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
paging.value.complete(false)
|
})
|
}
|
|
function inspResultClick(item: any) {
|
// userStore?.userInfo?.realName
|
}
|
|
const goBack = () => {
|
uni.navigateBack()
|
}
|
function handleClickRight() {
|
handleConfirm()
|
}
|
|
const toggleCollapse = () => {
|
isAllExpanded.value = !isAllExpanded.value
|
collapseRef.value.toggleAll(isAllExpanded.value)
|
}
|
|
function handleConfirm() {
|
if (!dataChange.value) {
|
message.alert('请操作后提交!')
|
return false
|
}
|
message
|
.confirm({
|
msg: '确定提交？',
|
title: '提示',
|
beforeConfirm: ({ resolve }) => {
|
updateData(resolve)
|
},
|
})
|
.then(() => {})
|
.catch((error) => {
|
console.log(error)
|
})
|
}
|
|
function updateData(resolve: any) {
|
const params = {
|
inspRecordList: dataList.value,
|
}
|
updateInspRecordBatch(params)
|
.then((res: any) => {
|
paging.value.reload()
|
resolve(true)
|
})
|
.catch((res) => {
|
console.error(res)
|
})
|
}
|
|
/**
|
* 点检记录条目点击事件
|
* @param item
|
*/
|
function itemClick(item: any) {}
|
|
watch(
|
() => [...dataList.value], // 使用扩展运算符创建新数组以触发监听
|
(newVal, oldVal) => {
|
if (oldVal.length > 0) {
|
dataChange.value = true
|
}
|
},
|
{ deep: true },
|
)
|
onLoad((options) => {
|
inspSt.inspCode = options.inspCode
|
inspSt.equName = options.equName
|
inspSt.assetNo = options.assetNo
|
inspSt.planTimeStr = options.planTimeStr
|
})
|
|
const dataCount = computed(() => dataList.value.length)
|
const checkCount = computed(() => dataList.value.filter((item) => item.status === '1').length)
|
const normalNum = computed(() => dataList.value.filter((item) => item.inspResult === '1').length)
|
const abNormalNum = computed(() => dataList.value.filter((item) => item.inspResult === '2').length)
|
</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;
|
}
|
</style>
|
