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.
624 lines
14 KiB
624 lines
14 KiB
<template>
|
|
<scroll-view class="plan-detail-container" scroll-y @scrolltolower="loadMoreMaterials" lower-threshold="100"
|
|
@refresherrefresh="refreshMaterials" refresher-enabled="true" :refresher-triggered="materialLoading">
|
|
<!-- 计划信息卡片 -->
|
|
<view class="plan-info-card">
|
|
<view class="plan-info-header">
|
|
<text class="plan-info-title">盘点计划详情</text>
|
|
</view>
|
|
|
|
<view class="plan-info-content">
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<text class="info-label">计划名称</text>
|
|
<text class="info-value">{{planInfo.name || '暂无'}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">计划编号</text>
|
|
<text class="info-value">{{planInfo.no || '暂无'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<text class="info-label">盘点类型</text>
|
|
<text class="info-value type-text">{{getTypeText(planInfo.type)}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">物资数量</text>
|
|
<text class="info-value count-text">{{planInfo.chart_total || 0}} 项</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<text class="info-label">开始时间</text>
|
|
<text class="info-value">{{formatDate(planInfo.start_date)}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">结束时间</text>
|
|
<text class="info-value">{{formatDate(planInfo.end_date)}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="status-row">
|
|
<view class="status-item">
|
|
<text class="status-label">计划状态</text>
|
|
<view class="status-badge" :class="'status-' + planInfo.status">
|
|
<text class="status-text">{{getStatusText(planInfo.status)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 物资列表 -->
|
|
<view class="material-list-card">
|
|
<view class="material-list-header">
|
|
<text class="material-list-title">盘点物资列表</text>
|
|
<text class="material-count">共 {{materialTotal}} 项</text>
|
|
</view>
|
|
|
|
<!-- 表头 -->
|
|
<view class="material-list">
|
|
<view class="material-item" style="font-weight:600;">
|
|
<view class="material-info material-name-col">
|
|
<text class="material-name">物资名称</text>
|
|
</view>
|
|
<view class="material-info material-model-col">
|
|
<text class="material-time">物资型号</text>
|
|
</view>
|
|
<view class="material-info material-spec-col">
|
|
<text class="material-time">物资规格</text>
|
|
</view>
|
|
<view class="material-info material-status-col">
|
|
<text class="material-time">状态</text>
|
|
</view>
|
|
<view class="material-info material-action-col">
|
|
<text class="material-time">操作</text>
|
|
</view>
|
|
</view>
|
|
<!-- 数据行 -->
|
|
<view class="material-item" v-for="item in materialList" :key="item.id">
|
|
<view class="material-info material-name-col">
|
|
<text class="material-name">{{item.inventory?.zichanmingcheng || '未知物资'}}</text>
|
|
</view>
|
|
<view class="material-info material-model-col">
|
|
<text class="material-time">{{item.inventory?.guigexinghao || '暂无'}}</text>
|
|
</view>
|
|
<view class="material-info material-spec-col">
|
|
<text class="material-time">{{item.inventory?.wuziguige || '暂无'}}</text>
|
|
</view>
|
|
<view class="material-info material-status-col">
|
|
<text class="material-status" :class="'status-' + (item.status || 0)">{{getInventoryStatusText(item.status)}}</text>
|
|
</view>
|
|
<view class="material-info material-action-col">
|
|
<view class="inventory-action-btn" @click.stop="startInventory(item)">
|
|
<text class="inventory-btn-text">盘点</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多提示 -->
|
|
<view class="load-more" v-if="materialLoading">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
<view class="load-more" v-else-if="!materialHasMore && materialList.length > 0">
|
|
<text class="no-more-text">— 没有更多数据了 —</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getInventoryMaterialList } from '@/api.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
planId: null, // 计划ID
|
|
planInfo: {}, // 计划信息
|
|
materialList: [], // 物资列表
|
|
materialPage: 1, // 当前页码
|
|
materialPageSize: 10, // 每页数量
|
|
materialTotal: 0, // 总数
|
|
materialLoading: false, // 加载状态
|
|
materialHasMore: true // 是否还有更多数据
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
// 获取传入的计划信息
|
|
if (options.planInfo) {
|
|
try {
|
|
this.planInfo = JSON.parse(decodeURIComponent(options.planInfo));
|
|
this.planId = this.planInfo.id;
|
|
} catch (e) {
|
|
console.error('解析计划信息失败:', e);
|
|
}
|
|
}
|
|
|
|
if (options.planId) {
|
|
this.planId = options.planId;
|
|
}
|
|
|
|
// 设置导航栏标题
|
|
uni.setNavigationBarTitle({
|
|
title: this.planInfo.name || '盘点计划详情'
|
|
});
|
|
|
|
// 加载物资列表
|
|
this.getMaterialList(true);
|
|
},
|
|
|
|
methods: {
|
|
// 获取物资列表
|
|
async getMaterialList(isRefresh = false) {
|
|
if (this.materialLoading || !this.planId) return;
|
|
|
|
try {
|
|
this.materialLoading = true;
|
|
|
|
// 如果是刷新，重置页码
|
|
if (isRefresh) {
|
|
this.materialPage = 1;
|
|
this.materialHasMore = true;
|
|
}
|
|
|
|
const params = {
|
|
page: this.materialPage,
|
|
page_size: this.materialPageSize,
|
|
'filter[0][key]': 'material_infos_plan_id',
|
|
'filter[0][op]': 'eq',
|
|
'filter[0][value]': this.planId
|
|
};
|
|
|
|
const res = await getInventoryMaterialList(params);
|
|
console.log("物资列表响应:", res);
|
|
|
|
// 处理登录失效
|
|
if(res.data && res.data.errcode === 40001){
|
|
uni.showToast({
|
|
title: res.data?.errmsg || '获取物资列表失败',
|
|
icon: 'none'
|
|
});
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (res.data && res.data.list) {
|
|
const data = res.data.list;
|
|
const newList = data.data || [];
|
|
|
|
if (isRefresh) {
|
|
this.materialList = newList;
|
|
} else {
|
|
this.materialList = [...this.materialList, ...newList];
|
|
}
|
|
|
|
this.materialTotal = data.total || 0;
|
|
this.materialHasMore = newList.length === this.materialPageSize;
|
|
|
|
if (this.materialHasMore) {
|
|
this.materialPage++;
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data?.message || '获取物资列表失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('获取物资列表失败:', error);
|
|
uni.showToast({
|
|
title: '获取物资列表失败',
|
|
icon: 'none'
|
|
});
|
|
} finally {
|
|
this.materialLoading = false;
|
|
}
|
|
},
|
|
|
|
// 刷新物资列表
|
|
refreshMaterials() {
|
|
this.getMaterialList(true);
|
|
},
|
|
|
|
// 加载更多物资
|
|
loadMoreMaterials() {
|
|
if (!this.materialHasMore || this.materialLoading) return;
|
|
this.getMaterialList(false);
|
|
},
|
|
|
|
// 获取状态文本
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
0: '未开始',
|
|
1: '进行中',
|
|
2: '已完成'
|
|
};
|
|
return statusMap[status] || '未知状态';
|
|
},
|
|
|
|
// 获取盘点类型文本
|
|
getTypeText(type) {
|
|
const typeMap = {
|
|
1: '年度',
|
|
2: '季度'
|
|
};
|
|
return typeMap[type] || '未知类型';
|
|
},
|
|
|
|
// 获取盘点状态文本
|
|
getInventoryStatusText(status) {
|
|
const statusMap = {
|
|
0: '待盘点',
|
|
1: '已盘点'
|
|
};
|
|
return statusMap[status] || '待盘点';
|
|
},
|
|
|
|
// 格式化日期
|
|
formatDate(dateStr) {
|
|
if (!dateStr) return '';
|
|
const date = new Date(dateStr);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
},
|
|
|
|
// 开始盘点
|
|
startInventory(item) {
|
|
console.log('开始盘点物资:', item);
|
|
// uni.showToast({
|
|
// title: `开始盘点: ${item.name}`,
|
|
// icon: 'none'
|
|
// });
|
|
if(item.inventorys_id){
|
|
uni.navigateTo({
|
|
url: `/pages/inventory/inventory?code=${item.inventorys_id}`
|
|
});
|
|
}else{
|
|
uni.showToast({
|
|
title: '暂无盘点信息',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.plan-detail-container {
|
|
height: 100vh;
|
|
background: #f5f5f5;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 计划信息卡片样式 */
|
|
.plan-info-card {
|
|
background: #fff;
|
|
border-radius: 22rpx;
|
|
box-shadow: 0 4px 18px rgba(64,158,255,0.07);
|
|
padding: 28rpx 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.plan-info-header {
|
|
margin-bottom: 24rpx;
|
|
padding-bottom: 16rpx;
|
|
border-bottom: 2px solid #f0f0f0;
|
|
}
|
|
|
|
.plan-info-title {
|
|
font-size: 32rpx;
|
|
color: #222;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.plan-info-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.info-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.type-text {
|
|
color: #409eff;
|
|
}
|
|
|
|
.count-text {
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.status-label {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 12rpx 24rpx;
|
|
border-radius: 24rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-badge.status-0 {
|
|
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
|
|
color: #f57c00;
|
|
border: 1px solid #ffcc80;
|
|
}
|
|
|
|
.status-badge.status-1 {
|
|
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
|
|
color: #1976d2;
|
|
border: 1px solid #90caf9;
|
|
}
|
|
|
|
.status-badge.status-2 {
|
|
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
|
|
color: #388e3c;
|
|
border: 1px solid #a5d6a7;
|
|
}
|
|
|
|
/* 物资列表卡片样式 */
|
|
.material-list-card {
|
|
background: #fff;
|
|
border-radius: 22rpx;
|
|
box-shadow: 0 4px 18px rgba(64,158,255,0.07);
|
|
padding: 28rpx 24rpx 18rpx 24rpx;
|
|
flex: 1;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.material-list-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.material-list-title {
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.material-count {
|
|
font-size: 24rpx;
|
|
color: #409eff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
/* 空状态样式 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 300rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
/* 物资列表表格样式 */
|
|
.material-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.material-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14rpx 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.material-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.material-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.material-name-col {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 200rpx;
|
|
}
|
|
|
|
.material-model-col {
|
|
width: 180rpx;
|
|
min-width: 0;
|
|
}
|
|
|
|
.material-spec-col {
|
|
width: 120rpx;
|
|
min-width: 0;
|
|
}
|
|
|
|
.material-status-col {
|
|
width: 100rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.material-action-col {
|
|
width: 100rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.material-name {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.material-time {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
margin-top: 2rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.material-status {
|
|
font-size: 18rpx;
|
|
padding: 4rpx 10rpx;
|
|
border-radius: 16rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.material-status.status-0 {
|
|
background-color: #fff7e6;
|
|
color: #fa8c16;
|
|
}
|
|
|
|
.material-status.status-1 {
|
|
background-color: #e8f5e9;
|
|
color: #388e3c;
|
|
}
|
|
|
|
.completed-text {
|
|
color: #388e3c;
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.inventory-action-btn {
|
|
background: linear-gradient(135deg, #409eff, #66b1ff);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 16rpx;
|
|
padding: 8rpx 16rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
box-shadow: 0 2px 8px rgba(64,158,255,0.3);
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
min-width: 80rpx;
|
|
}
|
|
|
|
.inventory-action-btn:active {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 1px 4px rgba(64,158,255,0.4);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.inventory-btn-text {
|
|
color: #fff;
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 加载更多样式 */
|
|
.load-more {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12rpx;
|
|
padding: 30rpx 20rpx;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border: 3rpx solid #f0f0f0;
|
|
border-top: 3rpx solid #409eff;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
color: #409eff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.no-more-text {
|
|
color: #ccc;
|
|
font-size: 22rpx;
|
|
}
|
|
</style>
|