452 lines
14 KiB
Vue
452 lines
14 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<uni-row :gutter="24" class="search-form">
|
||
<uni-col :span="10">
|
||
<view>
|
||
<uni-easyinput placeholder="请输入内容" v-model="keyWord" maxlength="10"/>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view class="search" @click="search">查询</view>
|
||
</uni-col>
|
||
<uni-col :span="4" v-if="queryParams.waitRepairNum > 0">
|
||
<view class="search" style="background: #19be6b" @click="onQualified">合格</view>
|
||
</uni-col>
|
||
<uni-col :span="6">
|
||
<view class="search" style="background: #19be6b" @click="onBatchRepair">批量维修</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
|
||
<view class="table-list-item">
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="6">物资名称：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">{{ queryParams.typeName }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="6">物资类型：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">{{ queryParams.type }}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row :gutter="24">
|
||
<uni-col :span="6">待修数量：</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="cont">{{
|
||
queryParams.waitRepairNum
|
||
}}</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<view class="table-list-item">
|
||
<checkbox-group @change="handleSelectAll">
|
||
<label class="select-all-label">
|
||
<checkbox
|
||
color="#409eff"
|
||
borderColor="#409eff"
|
||
activeBorderColor="#409eff"
|
||
:checked="allChecked"
|
||
:disabled="selectableItems.length === 0"
|
||
value="all"
|
||
style="transform: scale(0.7)"
|
||
/>
|
||
<text class="select-all-text">全选</text>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
|
||
<div v-for="(item, index) in repairDeviceList" :key="index">
|
||
<view class="code-list-item" @click="goOperate(item,index)">
|
||
<view class="item-content">
|
||
<!-- 左侧：复选框和序号 -->
|
||
<view class="left-section">
|
||
<checkbox
|
||
color="#409eff"
|
||
:value="item.code"
|
||
:checked="selectedItems.includes(item.code)"
|
||
:disabled="item.status !== '0'"
|
||
@click.stop="handleItemCheck(item.code)"
|
||
style="transform: scale(0.7)"
|
||
/>
|
||
<text class="index-number">{{ index + 1 }}.</text>
|
||
</view>
|
||
|
||
<!-- 中间：设备编码 -->
|
||
<view class="middle-section">
|
||
<text class="device-code" :style="{color: item.status == 1 ? '#18bc37' : '#262626'}">{{ item.code }}</text>
|
||
</view>
|
||
|
||
<!-- 右侧：状态 -->
|
||
<view class="right-section">
|
||
<uni-tag v-if="item.dataStatus !== '0'" text="定损单" type="warning" style="margin-right: 5px" custom-style="warningStyle"/>
|
||
<view class="status-tag" :class="getStatusClass(item.status)">
|
||
{{ getStatusText(item.status) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
import { auditRepairPass } from '@/services/repair/repair.js'
|
||
import {onLoad, onShow} from '@dcloudio/uni-app'
|
||
import {getAppRepairMaTypeListByTaskIdAndTypeId} from "../../../services/repair/repair";
|
||
|
||
const queryParams = ref({})
|
||
const allChecked = ref(false)
|
||
const repairDeviceList = ref([])
|
||
const selectedItems = ref([])
|
||
const ids = ref([])
|
||
const taskId = ref('')
|
||
const typeId = ref('')
|
||
const keyWord = ref('')
|
||
|
||
const selectableItems = computed(() => {
|
||
return repairDeviceList.value.filter(item => item.status === '0').map(item => item.code)
|
||
})
|
||
onShow(() => {
|
||
getRepairDetailsData()
|
||
})
|
||
|
||
onLoad((options) => {
|
||
queryParams.value = JSON.parse(options.queryParams)
|
||
console.log('🚀 ~ onLoad ~ queryParams.value:', queryParams.value)
|
||
// repairDeviceList.value = queryParams.value.repairDeviceList;
|
||
// console.log(repairDeviceList.value)
|
||
|
||
taskId.value = queryParams.value.taskId
|
||
typeId.value = queryParams.value.typeId
|
||
getRepairDetailsData()
|
||
})
|
||
|
||
const search = () => {
|
||
console.log('🚀 ~ search ~ keyWord:', keyWord.value)
|
||
getRepairDetailsData()
|
||
}
|
||
|
||
// 获取列表详情
|
||
const getRepairDetailsData = async () => {
|
||
repairDeviceList.value = []
|
||
const res = await getAppRepairMaTypeListByTaskIdAndTypeId({ taskId: taskId.value,typeId:typeId.value,keyword:keyWord.value })
|
||
repairDeviceList.value = res.data
|
||
//遍历repairDeviceList.value,得出所有数据中status=0的个数
|
||
const statusZeroCount = repairDeviceList.value.filter(item => item.status === '0').length;
|
||
console.log('status 为 0 的个数：', statusZeroCount);
|
||
queryParams.value.waitRepairNum=statusZeroCount
|
||
}
|
||
|
||
const handleSelectAll = (e) => {
|
||
console.log('🚀 ~ handleSelectAll ~ e:', e)
|
||
const checked = e.detail.value.length > 0
|
||
allChecked.value = checked
|
||
if (checked) {
|
||
selectedItems.value = [...selectableItems.value]
|
||
ids.value = repairDeviceList.value.filter(item => selectedItems.value.includes(item.code)).map(item => item.id)
|
||
console.log('🚀 ~ handleSelectAll ~ ids.value:', ids.value)
|
||
} else {
|
||
selectedItems.value = []
|
||
ids.value = []
|
||
}
|
||
}
|
||
|
||
const handleItemCheck = (code) => {
|
||
console.log('🚀 ~ handleItemCheck ~ code:', code)
|
||
// Only allow selection if item is status '0'
|
||
const item = repairDeviceList.value.find(i => i.code === code)
|
||
console.log('🚀 ~ handleItemCheck ~ item:', item)
|
||
if (item && item.status !== '0') return
|
||
|
||
const index = selectedItems.value.indexOf(code)
|
||
console.log('🚀 ~ handleItemCheck ~ index:', index)
|
||
if (index === -1) {
|
||
selectedItems.value.push(code)
|
||
ids.value.push(item.id)
|
||
} else {
|
||
selectedItems.value.splice(index, 1)
|
||
ids.value.splice(index, 1)
|
||
}
|
||
console.log('🚀 ~ handleItemCheck ~ ids.value:', ids.value)
|
||
allChecked.value = selectedItems.value.length === selectableItems.value.length
|
||
}
|
||
|
||
// 点击跳转维修页面
|
||
const goOperate = (item,index) => {
|
||
if(item.status==0){
|
||
const codingUrl = '/pages/repair/repairManage/code-operate' // 编码维修
|
||
uni.navigateTo({
|
||
url: `${codingUrl}?queryParams=${JSON.stringify(queryParams.value)}&itemId=${item.id}`,
|
||
})
|
||
}
|
||
}
|
||
|
||
const onQualified = async () => {
|
||
console.log(queryParams.value.ids[1])
|
||
let id = [queryParams.value.ids[1]]
|
||
const res = await auditRepairPass(ids.value)
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '操作成功！',
|
||
icon: 'none',
|
||
})
|
||
uni.navigateBack({
|
||
delta: 1, // 返回到已存在的页面
|
||
success() {
|
||
uni.$emit('onUpdate')
|
||
},
|
||
})
|
||
}
|
||
}
|
||
|
||
// 批量维修处理函数
|
||
const onBatchRepair = () => {
|
||
// 检查是否有勾选数据
|
||
if (selectedItems.value.length === 0) {
|
||
uni.showToast({
|
||
title: '请先勾选数据',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
// 获取勾选的完整设备信息
|
||
const selectedDevices = repairDeviceList.value.filter(item =>
|
||
selectedItems.value.includes(item.code)
|
||
)
|
||
|
||
console.log('选中的设备:', selectedDevices)
|
||
console.log('选中的设备编码:', selectedItems.value)
|
||
|
||
// 构造传递的参数
|
||
const batchParams = {
|
||
...queryParams.value,
|
||
selectedDevices: selectedDevices,
|
||
selectedCodes: selectedItems.value,
|
||
batchMode: true // 标识为批量模式
|
||
}
|
||
|
||
// 跳转到批量维修页面
|
||
const batchRepairUrl = '/pages/repair/repairManage/batch-repair' // 批量维修页面
|
||
uni.navigateTo({
|
||
url: `${batchRepairUrl}?batchParams=${encodeURIComponent(JSON.stringify(batchParams))}`,
|
||
})
|
||
}
|
||
|
||
// 获取状态样式类
|
||
const getStatusClass = (status) => {
|
||
switch(status) {
|
||
case '1': return 'status-completed'
|
||
case '0': return 'status-pending'
|
||
case '2': return 'status-scrap'
|
||
default: return ''
|
||
}
|
||
}
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status) => {
|
||
switch(status) {
|
||
case '1': return '已完成'
|
||
case '0': return '未完成'
|
||
case '2': return '待报废'
|
||
default: return '未知'
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-container {
|
||
display: flex;
|
||
height: 100%;
|
||
padding: 24rpx;
|
||
flex-direction: column;
|
||
background-color: #f7f8fa;
|
||
|
||
// 搜索区域
|
||
.search-form {
|
||
margin-bottom: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
:deep(.uni-easyinput__content) {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
height: 75rpx;
|
||
padding: 0 24rpx;
|
||
transition: all 0.3s ease;
|
||
|
||
&:focus-within {
|
||
border-color: #3784fb;
|
||
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
||
}
|
||
}
|
||
|
||
.search {
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
border-radius: 12rpx;
|
||
transition: all 0.3s ease;
|
||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 基本信息卡片
|
||
.table-list-item {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
|
||
// 信息行
|
||
.uni-row {
|
||
padding: 16rpx 0;
|
||
font-size: 28rpx;
|
||
border-bottom: 2rpx solid #f5f5f5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.uni-col-6 {
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
.cont {
|
||
color: #262626;
|
||
}
|
||
}
|
||
|
||
// 全选标签样式
|
||
.select-all-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #262626;
|
||
}
|
||
|
||
.select-all-text {
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
// 编码列表项
|
||
.code-list-item {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
|
||
&:active {
|
||
transform: scale(0.99);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.item-content {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
min-height: 60rpx;
|
||
}
|
||
|
||
// 左侧区域：复选框 + 序号
|
||
.left-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
min-width: 100rpx;
|
||
flex-shrink: 0;
|
||
|
||
.index-number {
|
||
font-size: 28rpx;
|
||
color: #8c8c8c;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
// 中间区域：设备编码
|
||
.middle-section {
|
||
flex: 1;
|
||
padding: 0 24rpx;
|
||
min-width: 0; // 防止文本溢出
|
||
|
||
.device-code {
|
||
font-size: 28rpx;
|
||
color: #262626;
|
||
font-weight: 500;
|
||
word-break: break-all; // 长文本换行
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
// 右侧区域：状态
|
||
.right-section {
|
||
flex-shrink: 0;
|
||
min-width: 120rpx;
|
||
text-align: right;
|
||
|
||
.status-tag {
|
||
display: inline-block;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
|
||
&.status-completed {
|
||
color: #52c41a;
|
||
background-color: rgba(82, 196, 26, 0.1);
|
||
}
|
||
|
||
&.status-pending {
|
||
color: #f5222d;
|
||
background-color: rgba(245, 34, 45, 0.1);
|
||
}
|
||
|
||
&.status-scrap {
|
||
color: #999;
|
||
background-color: rgba(153, 153, 153, 0.1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 加载提示文字
|
||
.loading-text {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.outbound-btn {
|
||
width: 70%;
|
||
margin: 25rpx auto;
|
||
height: 65rpx;
|
||
line-height: 65rpx;
|
||
text-align: center;
|
||
background-color: #19be6b;
|
||
border-radius: 12rpx;
|
||
color: #fff;
|
||
}
|
||
</style>
|