180 lines
3.9 KiB
Vue
180 lines
3.9 KiB
Vue
<template>
|
|
<view class="recent-records-container">
|
|
<view class="table-header">
|
|
<text class="title">最近记录</text>
|
|
</view>
|
|
|
|
<scroll-view
|
|
scroll-x="true"
|
|
class="table-scroll"
|
|
show-scrollbar="false"
|
|
>
|
|
<view class="table-wrapper">
|
|
<!-- 表头 -->
|
|
<view class="table-row header-row">
|
|
<view class="table-cell">物料名称</view>
|
|
<view class="table-cell">型号</view>
|
|
<view class="table-cell">当前库存</view>
|
|
<view class="table-cell">安全库存</view>
|
|
<view class="table-cell">在途数量</view>
|
|
<view class="table-cell">库存状态</view>
|
|
</view>
|
|
|
|
<!-- 表体 -->
|
|
<view
|
|
class="table-row"
|
|
v-for="(item, index) in tableData"
|
|
:key="index"
|
|
:class="{ 'odd-row': index % 2 === 1 }"
|
|
>
|
|
<view class="table-cell">{{ item.name }}</view>
|
|
<view class="table-cell">{{ item.model }}</view>
|
|
<view class="table-cell">{{ item.inventory }}</view>
|
|
<view class="table-cell">{{ item.threshold }}</view>
|
|
<view class="table-cell">{{ item.taskInventory }}</view>
|
|
<view class="table-cell">
|
|
<view
|
|
class="status-tag"
|
|
:class="calcInventoryStatus(item.inventory, item.taskInventory, item.threshold).type"
|
|
>
|
|
{{ calcInventoryStatus(item.inventory, item.taskInventory, item.threshold).status }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view v-if="tableData.length === 0" class="empty-state">
|
|
<uni-icons type="empty" size="60" color="#cccccc"></uni-icons>
|
|
<text class="empty-text">暂无记录</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'RecentRecords',
|
|
props: {
|
|
// 接收表格数据
|
|
tableData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
methods: {
|
|
// 计算库存状态
|
|
calcInventoryStatus(inventory, inTransit, threshold) {
|
|
const total = inventory + inTransit;
|
|
|
|
if (total > threshold + 10) {
|
|
return { status: '库存积压', type: 'warning' };
|
|
} else if (total > threshold) {
|
|
return { status: '正常', type: 'success' };
|
|
} else if (total <= threshold && total > threshold - 2) {
|
|
return { status: '库存预警', type: 'danger' };
|
|
} else {
|
|
return { status: '库存不足', type: 'info' };
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.recent-records-container {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-header {
|
|
padding: 20rpx 16rpx;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.table-scroll {
|
|
width: 100%;
|
|
}
|
|
|
|
.table-wrapper {
|
|
width: 100%;
|
|
min-width: 900rpx; /* 确保表格有足够宽度展示内容 */
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
width: 100%;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.table-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.header-row {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.odd-row {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.table-cell {
|
|
flex: 1;
|
|
padding: 20rpx 10rpx;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
word-break: break-all;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.status-tag {
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 14rpx;
|
|
font-size: 22rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.status-tag.success {
|
|
background-color: #00b42a;
|
|
}
|
|
|
|
.status-tag.warning {
|
|
background-color: #ff7d00;
|
|
}
|
|
|
|
.status-tag.danger {
|
|
background-color: #f53f3f;
|
|
}
|
|
|
|
.status-tag.info {
|
|
background-color: #86909c;
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 80rpx 0;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
margin-top: 20rpx;
|
|
}
|
|
</style>
|