bonus-material-app/src/pages/repair/testExamine/details.vue

324 lines
10 KiB
Vue

<template>
<!-- 领料出库详情 -->
<view class="page-container">
<uni-row :gutter="24" class="search-form">
<uni-col :span="12">
<view>
<uni-easyinput placeholder="请输入内容" />
</view>
</uni-col>
<uni-col :span="4">
<view class="search">查询</view>
</uni-col>
<uni-col :span="4">
<view class="search" style="background-color: #19be6b" @tap="handleAllPass"
>通过</view
>
</uni-col>
<uni-col :span="4">
<view class="search" style="background-color: #ff4949" @tap="handleAllFail"
>驳回</view
>
</uni-col>
</uni-row>
<view class="table-list-item">
<checkbox-group @change="onChangeAllChecked">
<label>
全选
<checkbox
color="#409eff"
borderColor="#409eff"
activeBorderColor="#409eff"
:checked="allChecked"
value="all"
style="transform: scale(0.7)"
/>
</label>
</checkbox-group>
</view>
<scroll-view scroll-y class="scroll-container">
<view
v-for="(item, index) in detailsList"
:key="index"
class="table-list-item"
@tap="onRepairItem(item)"
>
<div class="title">
<span style="font-size: 15px; font-weight: 800">修试审核</span>
<!-- <span :style="{ color: active == 1 ? '#3784fb' : '#ff4d4f' }">{{active == 1 ? '已完成' : '未完成'}}</span> -->
</div>
<view class="line"></view>
<uni-row :gutter="24">
<uni-col :span="2">
<checkbox-group @change="onChangeChecked(item)">
<label>
<checkbox
color="#409eff"
borderColor="#409eff"
activeBorderColor="#409eff"
:checked="item.isChecked"
style="transform: scale(0.7)"
/>
</label>
</checkbox-group>
</uni-col>
<uni-col :span="6">物资名称:</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.machineTypeName }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">规格型号:</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.specificationType }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">单位:</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.unitName }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">已修数量:</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.repairedNum }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">管理模式:</uni-col>
<uni-col :span="16">
<uni-tag
text="编码"
type="warning"
v-if="item.manageType == 0"
size="small"
/>
<uni-tag
text="数量"
type="success"
v-if="item.manageType == 1"
size="small"
/>
</uni-col>
</uni-row>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, onUnmounted, computed } from 'vue'
import { getAuditInfo, innerAudit } from '@/services/repair/testExamine.js'
import { onLoad, onShow } from '@dcloudio/uni-app'
const detailsList = ref([])
// const query = defineProps() // 获取上级页面传递的路由参数
const taskId = ref('')
// 获取列表详情
const getDetailsData = async () => {
const res = await getAuditInfo({ taskId: taskId.value })
detailsList.value = res.rows
detailsList.value = detailsList.value.map((e) => {
return { ...e, isChecked: false }
})
}
// 复选框全选
const onChangeAllChecked = (e) => {
detailsList.value.forEach((item) => {
if (e.detail.value.length > 0) {
item.isChecked = true
} else {
item.isChecked = false
}
})
}
// 复选框每一项
const onChangeChecked = (val) => {
val.isChecked = !val.isChecked
}
// 计算全选按钮是否选中
const allChecked = computed(() => {
return detailsList.value.every((e) => e.isChecked == true)
})
// 点击合格按钮
const handleAllPass = async () => {
const isSelect = detailsList.value.some((e) => e.isChecked == true)
if (!isSelect) {
uni.showToast({
title: '请勾选需要需要合格的数据!',
icon: 'none',
})
return
}
// 组装参数
const ids = []
detailsList.value.forEach((item) => {
if (item.isChecked) {
console.log(item)
let obj = {
id: item.id,
status: '1',
specificationType: item.specificationType,
machineTypeName: item.machineTypeName,
repairNum: item.repairNum,
repairedNum: item.repairedNum,
typeId: item.typeId,
taskId: item.taskId,
auditId: item.id,
repairId: item.repairId,
maId: item.maId,
}
ids.push(obj)
}
})
console.log(ids)
const res = await innerAudit(ids)
if (res.code === 200) {
uni.showToast({
title: '操作成功!',
icon: 'none',
})
getDetailsData()
}
}
// 点击驳回按钮
const handleAllFail = async () => {
const isSelect = detailsList.value.some((e) => e.isChecked == true)
if (!isSelect) {
uni.showToast({
title: '请勾选需要需要驳回的数据!',
icon: 'none',
})
return
}
// 组装参数
const ids = []
detailsList.value.forEach((item) => {
if (item.isChecked) {
console.log(item)
let obj = {
id: item.id,
status: '2',
specificationType: item.specificationType,
machineTypeName: item.machineTypeName,
repairNum: item.repairNum,
repairedNum: item.repairedNum,
typeId: item.typeId,
taskId: item.taskId,
auditId: item.id,
repairId: item.repairId,
maId: item.maId,
}
ids.push(obj)
}
})
console.log(ids)
const res = await innerAudit(ids)
if (res.code === 200) {
uni.showToast({
title: '操作成功!',
icon: 'none',
})
getDetailsData()
}
}
// 点击跳转维修页面
const onRepairItem = (item) => {
console.log(item)
// let queryParams = null
// let codingUrl = ''
// if (item.manageType === 0) {
// codingUrl = '/pages/repair/repairManage/code-view' // 编码维修
// }
// if (item.manageType == 1) {
// codingUrl = '/pages/repair/repairManage/num-operate' // 数量维修
// }
// queryParams = item
// uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(queryParams)}` })
}
onShow(() => {
getDetailsData()
})
// 页面加载完毕
onLoad((options) => {
taskId.value = options.taskId
getDetailsData()
// 监听出库完成事件 刷新列表
uni.$on('onUpdate', () => {
// console.log('监听事件')
// 刷新列表
getDetailsData()
})
})
// 页面销毁时移除事件监听
onUnmounted(() => {
uni.$off('onUpdate') // 移除事件监听
})
</script>
<style lang="scss" scoped>
.page-container {
display: flex;
height: 100%;
padding: 0 15rpx;
flex-direction: column;
background-color: #e8f5fb;
.search-form {
margin: 10rpx 0;
display: flex;
align-items: center;
box-sizing: content-box;
}
.search {
height: 60rpx;
background-color: #3784fb;
text-align: center;
line-height: 60rpx;
color: #fff;
border-radius: 10rpx;
}
.table-list-item {
margin-bottom: 20rpx;
padding: 20rpx;
background-color: #fff;
// min-height: 300rpx;
border-radius: 10rpx;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
.title {
display: flex;
justify-content: space-between;
align-items: center;
}
.line {
margin: 20rpx 0;
height: 1px;
background-color: #e8e8e8;
}
}
}
// 加载提示文字
.loading-text {
text-align: center;
font-size: 28rpx;
color: #666;
padding: 20rpx 0;
}
</style>