You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1051 lines
27 KiB
1051 lines
27 KiB
<template>
|
|
<view class="page">
|
|
|
|
<view class="back"></view>
|
|
<view class="wrapnob">
|
|
<!-- 主体内容 -->
|
|
<scroll-view class="main-content" scroll-y="true">
|
|
<view class="department-list">
|
|
|
|
<!-- 部门+工场 -->
|
|
<view class="department-item" v-for="(item, index1) in list" :key="'dp1_'+index1">
|
|
|
|
<view class="department-header" @click="toggle1(index1)">
|
|
<view class="header-info">
|
|
<uni-icons :type="item.expanded ? 'arrowdown' : 'arrowright'" size="14" color="#999"></uni-icons>
|
|
<text class="dept-name">{{retType(item.departCode,2)}}+{{item.workshop}}</text>
|
|
<text class="dept-count">(共{{item.total}}个托盘)</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="item.expanded" class="region-list">
|
|
|
|
<!-- 托盘明细 -->
|
|
<!-- <view v-for="pallet in item.deliveryList" :key="pallet.palletNo" class="pallet-items" @click="openPalletDetail(pallet)">
|
|
<view class="pallet-info">
|
|
<text class="pallet-id">{{ pallet.palletNo }}</text>
|
|
<text class="pallet-status" :class="getStatusClass(pallet.status)">
|
|
{{ retType(pallet.status,1) }}
|
|
</text>
|
|
</view>
|
|
<uni-icons type="forward" size="14" color="#ccc"></uni-icons>
|
|
</view> -->
|
|
|
|
<!-- 区域 -->
|
|
<view class="region-item" v-for="(cell, index2) in item.children" :key="'dp2_'+index2">
|
|
|
|
<view class="region-header" @click="toggle2(index1,index2)">
|
|
<view class="header-info">
|
|
<uni-icons :type="cell.expanded ? 'arrowdown' : 'arrowright'" size="14" color="#999"></uni-icons>
|
|
<text class="region-name">{{cell.location}}</text>
|
|
<text class="region-count">(共{{getSend(index1,index2)?cell.total:0}}个托盘)</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="cell.expanded" class="address-list">
|
|
|
|
<!-- 托盘明细 -->
|
|
<view v-if="cell.deliveryList" v-for="pallet in cell.deliveryList" :key="pallet.palletNo" class="pallet-items" @click="openPalletDetail(pallet)">
|
|
<view class="pallet-info">
|
|
<text class="pallet-id">{{ pallet.palletNo }}</text>
|
|
<text class="pallet-status" :class="getStatusClass(pallet.status)">
|
|
{{ retType(pallet.status,1) }}
|
|
</text>
|
|
<text class="pallet-num">存放天数({{pallet.stayDays?pallet.stayDays:0}})</text>
|
|
</view>
|
|
<uni-icons type="forward" size="14" color="#ccc"></uni-icons>
|
|
</view>
|
|
|
|
<!-- 地址 -->
|
|
<view class="address-item" v-for="(element,index3) in cell.children" :key="'dp3_'+index3">
|
|
|
|
<view class="address-header" @click="toggle3(index1,index2,index3)">
|
|
<view class="header-info">
|
|
<uni-icons :type="element.expanded ? 'arrowdown' : 'arrowright'" size="14" color="#999"></uni-icons>
|
|
<text class="address-name">{{element.address}}</text>
|
|
<text class="address-count">(共{{getThird(index1,index2,index3)?element.total:0}}个托盘)</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="element.expanded" class="pallet-list">
|
|
|
|
<!-- 托盘明细 -->
|
|
<view v-for="pallet in element.pallets" :key="pallet.palletNo" class="pallet-item" @click="openPalletDetail(pallet)">
|
|
<view class="pallet-info">
|
|
<text class="pallet-id">{{ pallet.palletNo }}</text>
|
|
<text class="pallet-status" :class="getStatusClass(pallet.status)">
|
|
{{ retType(pallet.status,1) }}
|
|
</text>
|
|
<text class="pallet-num">存放天数({{pallet.stayDays?pallet.stayDays:0}})</text>
|
|
</view>
|
|
<uni-icons type="forward" size="14" color="#ccc"></uni-icons>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 底部详情弹窗 -->
|
|
<view v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
|
|
<view class="detail-modal">
|
|
|
|
<view class="modal-header">
|
|
<text class="modal-title">托盘详情</text>
|
|
<uni-icons
|
|
type="closeempty"
|
|
size="20"
|
|
color="#999"
|
|
@click="closeDetailModal"
|
|
></uni-icons>
|
|
</view>
|
|
|
|
<view class="modal-content">
|
|
|
|
<view class="detail-row">
|
|
<text class="label">编号：</text>
|
|
<text class="value">{{ currentPallet.id }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="label">当前状态：</text>
|
|
<text class="value" :class="getStatusClass(currentPallet.status)">
|
|
{{ getStatusText(currentPallet.status) }}
|
|
</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="label">所属部门：</text>
|
|
<text class="value">{{ currentPallet.department }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="label">所在区域：</text>
|
|
<text class="value">{{ currentPallet.region }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="label">具体地址：</text>
|
|
<text class="value">{{ currentPallet.address }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="label">最后更新：</text>
|
|
<text class="value">{{ currentPallet.lastUpdate }}</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<u-toast ref="uToast" />
|
|
|
|
<!-- 配送单详情 -->
|
|
<u-popup v-model="show" @close="close" mode="center" :mask="true" :closeable="true" :border-radius="20" close-icon-pos="top-right">
|
|
<view class="ppcon">
|
|
<psDetail :palletAll="palletAll"></psDetail>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import psDetail from "@/components/psDetail.vue";
|
|
export default {
|
|
components: {
|
|
psDetail
|
|
},
|
|
data() {
|
|
return {
|
|
show:false,
|
|
list:[],
|
|
page: {
|
|
addressCode:"",
|
|
departCode:"",
|
|
workshop:"",
|
|
location:"",
|
|
address:"",
|
|
},
|
|
address:[],
|
|
users:[],
|
|
depts:[],
|
|
dicts:[],
|
|
gcs:[],
|
|
status:[],
|
|
palletStatus:[],
|
|
palletAll:null,
|
|
|
|
// 展开状态部门
|
|
expandedDepartments: {
|
|
dept1: true,
|
|
dept2: true,
|
|
},
|
|
// 展开状态区域
|
|
expandedRegions: {
|
|
'dept1-region1': true,
|
|
'dept1-region2': false,
|
|
'dept2-region1': true,
|
|
'dept2-region2': false,
|
|
},
|
|
// 展开状态地址
|
|
expandedAddresses: {
|
|
'dept1-region1-addr1': true,
|
|
'dept1-region1-addr2': false,
|
|
'dept1-region2-addr1': false,
|
|
'dept1-region2-addr2': false,
|
|
'dept2-region1-addr1': true,
|
|
'dept2-region1-addr2': false,
|
|
'dept2-region2-addr1': false,
|
|
},
|
|
// 托盘数据
|
|
palletsData: {
|
|
dept1: {
|
|
region1: {
|
|
addr1: [
|
|
{ id: 'TPL-001', status: 'in-use', department: '生产一部', region: '装配区', address: 'A区生产线', lastUpdate: '2023-10-15 14:30' },
|
|
{ id: 'TPL-002', status: 'idle', department: '生产一部', region: '装配区', address: 'A区生产线', lastUpdate: '2023-10-15 15:20' },
|
|
{ id: 'TPL-003', status: 'maintenance', department: '生产一部', region: '装配区', address: 'A区生产线', lastUpdate: '2023-10-15 16:10' },
|
|
],
|
|
addr2: [
|
|
{ id: 'TPL-004', status: 'in-use', department: '生产一部', region: '装配区', address: 'B区仓库', lastUpdate: '2023-10-15 13:45' },
|
|
{ id: 'TPL-005', status: 'idle', department: '生产一部', region: '装配区', address: 'B区仓库', lastUpdate: '2023-10-15 12:30' },
|
|
],
|
|
},
|
|
region2: {
|
|
addr1: [
|
|
{ id: 'TPL-006', status: 'in-use', department: '生产一部', region: '包装区', address: 'C区包装线', lastUpdate: '2023-10-15 11:20' },
|
|
{ id: 'TPL-007', status: 'idle', department: '生产一部', region: '包装区', address: 'C区包装线', lastUpdate: '2023-10-15 10:15' },
|
|
{ id: 'TPL-008', status: 'in-use', department: '生产一部', region: '包装区', address: 'C区包装线', lastUpdate: '2023-10-15 09:45' },
|
|
{ id: 'TPL-009', status: 'idle', department: '生产一部', region: '包装区', address: 'C区包装线', lastUpdate: '2023-10-15 08:30' },
|
|
],
|
|
addr2: [
|
|
{ id: 'TPL-010', status: 'in-use', department: '生产一部', region: '包装区', address: 'D区成品库', lastUpdate: '2023-10-15 14:10' },
|
|
{ id: 'TPL-011', status: 'idle', department: '生产一部', region: '包装区', address: 'D区成品库', lastUpdate: '2023-10-15 13:25' },
|
|
{ id: 'TPL-012', status: 'maintenance', department: '生产一部', region: '包装区', address: 'D区成品库', lastUpdate: '2023-10-15 12:40' },
|
|
],
|
|
},
|
|
},
|
|
dept2: {
|
|
region1: {
|
|
addr1: [
|
|
{ id: 'TPL-013', status: 'in-use', department: '物流二部', region: '仓储区', address: 'E区原料仓', lastUpdate: '2023-10-15 15:00' },
|
|
{ id: 'TPL-014', status: 'idle', department: '物流二部', region: '仓储区', address: 'E区原料仓', lastUpdate: '2023-10-15 14:15' },
|
|
{ id: 'TPL-015', status: 'in-use', department: '物流二部', region: '仓储区', address: 'E区原料仓', lastUpdate: '2023-10-15 13:30' },
|
|
],
|
|
addr2: [
|
|
{ id: 'TPL-016', status: 'idle', department: '物流二部', region: '仓储区', address: 'F区成品仓', lastUpdate: '2023-10-15 12:45' },
|
|
{ id: 'TPL-017', status: 'in-use', department: '物流二部', region: '仓储区', address: 'F区成品仓', lastUpdate: '2023-10-15 11:50' },
|
|
],
|
|
},
|
|
region2: {
|
|
addr1: [
|
|
{ id: 'TPL-018', status: 'in-use', department: '物流二部', region: '配送区', address: 'G区配送站', lastUpdate: '2023-10-15 10:30' },
|
|
{ id: 'TPL-019', status: 'idle', department: '物流二部', region: '配送区', address: 'G区配送站', lastUpdate: '2023-10-15 09:45' },
|
|
{ id: 'TPL-020', status: 'in-use', department: '物流二部', region: '配送区', address: 'G区配送站', lastUpdate: '2023-10-15 08:50' },
|
|
],
|
|
},
|
|
},
|
|
},
|
|
|
|
// 详情打开
|
|
showDetailModal: false,
|
|
currentPallet: null,
|
|
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
// 获取列表数据
|
|
this.getList();
|
|
// 先加载分类
|
|
this.getTypes();
|
|
|
|
// this.handleSearch();
|
|
},
|
|
onShow(){},
|
|
methods: {
|
|
close() {
|
|
this.show = false;
|
|
},
|
|
open() {
|
|
this.show = true;
|
|
},
|
|
|
|
getTypes() {
|
|
//获取数据字典
|
|
this.gcs=[];
|
|
this.status=[];
|
|
var commondata = uni.getStorageSync("commondata");
|
|
if(commondata){
|
|
var data = JSON.parse(commondata);
|
|
if(data){
|
|
this.users=data.users;
|
|
this.dicts=data.dicts;
|
|
this.depts=data.depts;
|
|
this.address=data.address;
|
|
this.dicts.forEach(cell=>{
|
|
if("PJCD"==cell.bmlb&&cell.zfbs!=='1'){
|
|
// 工程
|
|
this.gcs.push(cell);
|
|
}
|
|
if("TPZT"==cell.bmlb){
|
|
// 托盘转运状态
|
|
this.status.push(cell);
|
|
}
|
|
// if("SYZT"==cell.bmlb){
|
|
// // 托盘转运状态
|
|
// this.palletStatus.push(cell);
|
|
// }
|
|
// console.log(cell.bmlb)
|
|
});
|
|
console.log(this.status);
|
|
this.$forceUpdate();
|
|
}
|
|
}
|
|
else{
|
|
this.users=[];
|
|
this.dicts=[];
|
|
this.depts=[];
|
|
this.address=[];
|
|
}
|
|
},
|
|
retType(type,str) {
|
|
var rets = '';
|
|
if(str==1){
|
|
// 状态
|
|
this.status.forEach((cell,idx)=>{
|
|
if(type==cell.bm){
|
|
rets=cell.bmsm;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
else if(str==2){
|
|
// 部门
|
|
this.depts.forEach((cell,idx)=>{
|
|
if(type==cell.departCode){
|
|
rets=cell.departName;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
else if(str==3){
|
|
// 使用状态
|
|
this.palletStatus.forEach((cell,idx)=>{
|
|
if(type==cell.bm){
|
|
rets=cell.bmsm;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
if(!rets){
|
|
rets=type
|
|
}
|
|
return rets;
|
|
},
|
|
async getList() {
|
|
uni.showLoading({
|
|
title: '数据加载中...'
|
|
});
|
|
const {data: res} = await uni.$http.get('/getPalletLocation',{});
|
|
if(res.success){
|
|
if(res.data&&res.data.length>0){
|
|
// 初始化一级
|
|
res.data.forEach((cell,index)=>{
|
|
// var children=[];
|
|
// console.log(this.address)
|
|
// this.address.forEach((adr,ii)=>{
|
|
// // 初始化二级
|
|
// if(cell.departCode==adr.departCode&&cell.workshop==adr.workshop){
|
|
|
|
// var second={
|
|
// departCode: cell.departCode,
|
|
// workshop: cell.workshop,
|
|
// location:adr.location,
|
|
// total: null,
|
|
// expanded: false,
|
|
// ifload: false,// 是否加载数量
|
|
// children:[]
|
|
// }
|
|
// children.push(second)
|
|
// }
|
|
// });
|
|
this.list.push({
|
|
departCode: cell.departCode,
|
|
workshop: cell.workshop,
|
|
total: cell.total,
|
|
deliveryList: cell.deliveryList,
|
|
expanded: false,
|
|
ifload: false,
|
|
children: []
|
|
});
|
|
this.$forceUpdate();
|
|
});
|
|
}
|
|
console.log(this.list)
|
|
}
|
|
},
|
|
async getFirst(one) {
|
|
if(this.list[one].ifload){
|
|
// 已经加载过了
|
|
return true;
|
|
}
|
|
else{
|
|
// 未加载
|
|
// 转运加载
|
|
if(this.list[one].deliveryList&&this.list[one].deliveryList.length>0){
|
|
this.list[one].children.push({
|
|
departCode: this.list[one].departCode,
|
|
workshop: this.list[one].workshop,
|
|
location: "转运",
|
|
total: this.list[one].deliveryList.length,
|
|
expanded: false,
|
|
ifload: true,// 是否加载数量
|
|
deliveryList: this.list[one].deliveryList,
|
|
children: []
|
|
});
|
|
}
|
|
|
|
this.list[one].ifload=true;
|
|
this.$forceUpdate();
|
|
// 加载二级区域列表数量
|
|
uni.showLoading({
|
|
title: '数据加载中...'
|
|
});
|
|
const {data: res} = await uni.$http.get('/getPalletLocation',{
|
|
departCode: this.list[one].departCode,
|
|
workshop: this.list[one].workshop
|
|
});
|
|
if(res.success){
|
|
if(res.data&&res.data.length>0){
|
|
res.data.forEach(ii=>{
|
|
var second={
|
|
departCode: this.list[one].departCode,
|
|
workshop: this.list[one].workshop,
|
|
location:ii.location,
|
|
total: ii.total,
|
|
expanded: false,
|
|
ifload: false,// 是否加载数量
|
|
children:[]
|
|
}
|
|
this.list[one].children.push(second);
|
|
this.$forceUpdate();
|
|
})
|
|
this.list[one].expanded=!this.list[one].expanded;
|
|
this.$forceUpdate();
|
|
console.log(this.list[one]);
|
|
return true;
|
|
}
|
|
else{
|
|
this.list[one].total=0;
|
|
this.list[one].children=[];
|
|
this.$forceUpdate();
|
|
this.list[one].expanded=!this.list[one].expanded;
|
|
this.$forceUpdate();
|
|
return 0;
|
|
}
|
|
}
|
|
else{
|
|
this.list[one].total=0;
|
|
this.list[one].children=[];
|
|
this.$forceUpdate();
|
|
this.list[one].expanded=!this.list[one].expanded;
|
|
this.$forceUpdate();
|
|
return 0;
|
|
}
|
|
}
|
|
},
|
|
async getSend(one,two) {
|
|
if(this.list[one].children[two].ifload){
|
|
// 已经加载过了
|
|
return true;
|
|
}
|
|
else{
|
|
// 未加载
|
|
this.list[one].children[two].ifload=true;
|
|
this.$forceUpdate();
|
|
// 加载二级区域列表数量
|
|
uni.showLoading({
|
|
title: '数据加载中...'
|
|
});
|
|
const {data: res} = await uni.$http.get('/getPalletLocation',{
|
|
departCode: this.list[one].departCode,
|
|
workshop: this.list[one].workshop,
|
|
location: this.list[one].children[two].location
|
|
});
|
|
if(res.success){
|
|
if(res.data&&res.data.length>0){
|
|
var total=0;
|
|
res.data.forEach(ii=>{
|
|
if(ii.location==this.list[one].children[two].location){
|
|
total=ii.total
|
|
}
|
|
})
|
|
this.list[one].children[two].total=total;
|
|
this.$forceUpdate();
|
|
var children = [];
|
|
this.address.forEach((adr,ii)=>{
|
|
// 初始化三级
|
|
if(this.list[one].departCode==adr.departCode&&this.list[one].workshop==adr.workshop&&this.list[one].children[two].location==adr.location){
|
|
var third={
|
|
departCode: adr.departCode,
|
|
workshop: adr.workshop,
|
|
location:adr.location,
|
|
address:adr.address,
|
|
total: null,
|
|
expanded: false,
|
|
ifload: false,// 是否加载数量
|
|
pallets:[]
|
|
}
|
|
children.push(third)
|
|
}
|
|
});
|
|
this.list[one].children[two].children=children;
|
|
this.$forceUpdate();
|
|
return true;
|
|
}
|
|
else{
|
|
this.list[one].children[two].total=0;
|
|
this.list[one].children[two].children=[];
|
|
this.$forceUpdate();
|
|
return 0;
|
|
}
|
|
}
|
|
else{
|
|
this.list[one].children[two].total=0;
|
|
this.list[one].children[two].children=[];
|
|
this.$forceUpdate();
|
|
return 0;
|
|
}
|
|
}
|
|
},
|
|
async getThird(one,two,third) {
|
|
if(this.list[one].children[two].children[third].ifload){
|
|
// 已经加载过了
|
|
return true;
|
|
}
|
|
else{
|
|
// 未加载
|
|
this.list[one].children[two].children[third].ifload=true;
|
|
// 加载三级地址列表数量
|
|
uni.showLoading({
|
|
title: '数据加载中...'
|
|
});
|
|
const {data: res} = await uni.$http.get('/getPalletLocation',{
|
|
departCode: this.list[one].departCode,
|
|
workshop: this.list[one].workshop,
|
|
location: this.list[one].children[two].location,
|
|
address: this.list[one].children[two].children[third].address,
|
|
});
|
|
if(res.success){
|
|
if(res.data&&res.data.length>0){
|
|
var total=0;
|
|
var pallets=[];
|
|
res.data.forEach(ii=>{
|
|
if(ii.address==this.list[one].children[two].children[third].address){
|
|
total=ii.total
|
|
pallets=ii.pallets
|
|
}
|
|
})
|
|
this.list[one].children[two].children[third].total=total;
|
|
this.list[one].children[two].children[third].pallets=pallets;
|
|
this.$forceUpdate();
|
|
return true;
|
|
}
|
|
else{
|
|
this.list[one].children[two].children[third].total=0;
|
|
this.list[one].children[two].children[third].pallets=[];
|
|
this.$forceUpdate();
|
|
return 0;
|
|
}
|
|
}
|
|
else{
|
|
this.list[one].children[two].children[third].total=0;
|
|
this.list[one].children[two].children[third].pallets=[];
|
|
this.$forceUpdate();
|
|
return 0;
|
|
}
|
|
}
|
|
},
|
|
toggle1(one){
|
|
if(this.list[one].ifload){
|
|
this.list[one].expanded=!this.list[one].expanded;
|
|
this.$forceUpdate();
|
|
}
|
|
else{
|
|
this.getFirst(one);
|
|
}
|
|
},
|
|
toggle2(one,two){
|
|
this.list[one].children[two].expanded=!this.list[one].children[two].expanded;
|
|
this.$forceUpdate();
|
|
},
|
|
toggle3(one,two,third){
|
|
this.list[one].children[two].children[third].expanded=!this.list[one].children[two].children[third].expanded;
|
|
this.$forceUpdate();
|
|
},
|
|
// 显示托盘详情
|
|
async openPalletDetail(pallet) {
|
|
if(pallet.palletNo){
|
|
uni.showLoading({
|
|
title: '数据加载中...'
|
|
});
|
|
const {data: res} = await uni.$http.get('/getPalletAll',{
|
|
code: pallet.palletNo,
|
|
type: '20'
|
|
});
|
|
if(res.success){
|
|
if(res.data)
|
|
{
|
|
this.palletAll=res.data;
|
|
this.$forceUpdate();
|
|
// 打开托盘详情弹框
|
|
this.open();
|
|
}
|
|
}
|
|
else{
|
|
this.$refs.uToast.show({
|
|
title: "暂无托盘详情信息！",
|
|
type: "warning",
|
|
duration: 3000,
|
|
});
|
|
}
|
|
}
|
|
else{
|
|
this.$refs.uToast.show({
|
|
title: "托盘详情查询失败！",
|
|
type: "warning",
|
|
duration: 3000,
|
|
});
|
|
}
|
|
},
|
|
// 处理搜索
|
|
handleSearch() {
|
|
if (!this.searchKeyword) {
|
|
this.searchResults = [];
|
|
return;
|
|
}
|
|
// 模拟搜索逻辑
|
|
const allPallets = [
|
|
...palletsData.dept1.region1.addr1,
|
|
...palletsData.dept1.region1.addr2,
|
|
...palletsData.dept1.region2.addr1,
|
|
...palletsData.dept1.region2.addr2,
|
|
...palletsData.dept2.region1.addr1,
|
|
...palletsData.dept2.region1.addr2,
|
|
...palletsData.dept2.region2.addr1,
|
|
];
|
|
|
|
this.searchResults = allPallets.filter(pallet =>
|
|
pallet.id.toLowerCase().includes(this.searchKeyword.toLowerCase())
|
|
);
|
|
},
|
|
// 切换部门展开状态
|
|
toggleDepartment(deptId) {
|
|
this.expandedDepartments[deptId] = !this.expandedDepartments[deptId];
|
|
},
|
|
// 切换区域展开状态
|
|
toggleRegion(regionId) {
|
|
this.expandedRegions[regionId] = !this.expandedRegions[regionId];
|
|
},
|
|
// 切换地址展开状态
|
|
toggleAddress(addrId) {
|
|
this.expandedAddresses[addrId] = !this.expandedAddresses[addrId];
|
|
},
|
|
// 获取状态文本
|
|
getStatusText(status) {
|
|
switch (status) {
|
|
case 'in-use':
|
|
return '使用中';
|
|
case 'idle':
|
|
return '空闲';
|
|
case 'maintenance':
|
|
return '维修中';
|
|
default:
|
|
return '未知';
|
|
}
|
|
},
|
|
// 获取状态样式类
|
|
getStatusClass(status) {
|
|
switch (status) {
|
|
case '01':
|
|
return 'status-01';
|
|
case '02':
|
|
return 'status-02';
|
|
case '03':
|
|
return 'status-03';
|
|
case '04':
|
|
return 'status-04';
|
|
case '05':
|
|
return 'status-05';
|
|
case '06':
|
|
return 'status-06';
|
|
default:
|
|
return 'status-01';
|
|
}
|
|
},
|
|
// 显示托盘详情
|
|
showPalletDetail(pallet) {
|
|
this.currentPallet = pallet;
|
|
this.showDetailModal = true;
|
|
},
|
|
// 关闭详情弹窗
|
|
closeDetailModal(){
|
|
this.showDetailModal = false;
|
|
this.currentPallet = null;
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ppcon{
|
|
width: calc(100vw - 60rpx);
|
|
height: calc(100vh - 100rpx) !important;
|
|
/* #ifdef H5 */
|
|
height: calc(100vh - var(--window-top) - 100rpx) !important;
|
|
/* #endif */
|
|
overflow-y: auto;
|
|
}
|
|
.wrapnob{
|
|
overflow-y: auto;
|
|
}
|
|
.container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.search-container {
|
|
padding: 20rpx 30rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.search-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f8f8f8;
|
|
border-radius: 30rpx;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
padding: 10rpx 15rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.search-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background-color: #007aff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.filter-container {
|
|
display: flex;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.filter-item {
|
|
padding: 10rpx 20rpx;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
border-radius: 30rpx;
|
|
margin-right: 20rpx;
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.filter-item.active {
|
|
background-color: #007aff;
|
|
color: #fff;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.department-list {
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.department-item {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.department-header {
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.header-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dept-name {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin: 0 15rpx;
|
|
}
|
|
|
|
.dept-count {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.region-list {
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.region-item {
|
|
border-radius: 12rpx;
|
|
margin-bottom: 10rpx;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.region-header {
|
|
padding: 25rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.region-name {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin: 0 15rpx;
|
|
}
|
|
|
|
.region-count {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.address-list {
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.address-item {
|
|
border-radius: 12rpx;
|
|
margin-bottom: 10rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.address-header {
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.address-name {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
margin: 0 15rpx;
|
|
}
|
|
|
|
.address-count {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.pallet-list {
|
|
padding: 0 30rpx 20rpx 60rpx;
|
|
}
|
|
|
|
.pallet-items {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 10rpx 30rpx 40rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.pallet-items:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.pallet-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.pallet-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.pallet-info {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.pallet-id {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.pallet-status {
|
|
font-size: 24rpx;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.pallet-num {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
margin-right: 10rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.status-01 {
|
|
color: #86909c;
|
|
background-color: #f7f8fa;
|
|
border: 1rpx solid #c9cdd4;
|
|
}
|
|
|
|
.status-02 {
|
|
color: #00a8ff;
|
|
background-color: #e6f7ff;
|
|
border: 1rpx solid #91d5ff;
|
|
}
|
|
|
|
.status-03 {
|
|
color: #faad14;
|
|
background-color: #fffbe6;
|
|
border: 1rpx solid #ffe58f;
|
|
}
|
|
|
|
.status-04 {
|
|
color: #8e4dba;
|
|
background-color: #f5ebff;
|
|
border: 1rpx solid #c396ed;
|
|
}
|
|
|
|
.status-05 {
|
|
color: #16c89e;
|
|
background-color: #e8fff6;
|
|
border: 1rpx solid #39d3aa;
|
|
}
|
|
|
|
.status-06 {
|
|
color: #fadc19;
|
|
background-color: #feffeb;
|
|
border: 1rpx solid #fbe842;
|
|
}
|
|
|
|
.search-results {
|
|
padding: 0 30rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.detail-modal {
|
|
width: 90%;
|
|
height: calc(100vh - 100rpx) !important;
|
|
/* #ifdef H5 */
|
|
height: calc(100vh - var(--window-top) - 100rpx) !important;
|
|
/* #endif */
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.modal-content {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.detail-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
width: 160rpx;
|
|
}
|
|
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
</style>
|