|
|
@@ -16,7 +16,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view>
|
|
|
+ <view class="receive-list-container">
|
|
|
<!-- 待签收 -->
|
|
|
<view class="section-title-container">
|
|
|
<view class="section-header">
|
|
|
@@ -24,40 +24,42 @@
|
|
|
<text class="view-all" @click="navigateToOut" v-if="receiveListData.length > 0">查看全部</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <template v-if="receiveListData.length > 0">
|
|
|
- <view
|
|
|
- v-for="(item, index) in receiveListData"
|
|
|
- :key="index"
|
|
|
- class="list-item"
|
|
|
- >
|
|
|
- <view class="item-container">
|
|
|
- <view class="item-header">
|
|
|
- <text class="item-title">{{ getItemName(item) }}</text>
|
|
|
- <text class="item-type">{{ getItemTypeName(item) }}</text>
|
|
|
- </view>
|
|
|
- <view class="item-info">
|
|
|
- <view class="info-row">
|
|
|
- <view class="info-item">
|
|
|
- <text class="info-label">数量</text>
|
|
|
- <text class="info-value">{{ getQuantity(item) }} {{ getMeasureName(item) }}</text>
|
|
|
- </view>
|
|
|
- <view class="info-item">
|
|
|
- <text class="info-label">状态</text>
|
|
|
- <text class="info-value status-pending">待签收</text>
|
|
|
+ <scroll-view class="receive-list" scroll-y="true">
|
|
|
+ <template v-if="receiveListData.length > 0">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in receiveListData"
|
|
|
+ :key="index"
|
|
|
+ class="list-item"
|
|
|
+ >
|
|
|
+ <view class="item-container">
|
|
|
+ <view class="item-header">
|
|
|
+ <text class="item-title">{{ getItemName(item) }}</text>
|
|
|
+ <text class="item-type">{{ getItemTypeName(item) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-info">
|
|
|
+ <view class="info-row">
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">数量</text>
|
|
|
+ <text class="info-value">{{ getQuantity(item) }} {{ getMeasureName(item) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">状态</text>
|
|
|
+ <text class="info-value status-pending">待签收</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="item-footer">
|
|
|
- <button class="receive-btn" @click="handleSignReceive(item)">签收</button>
|
|
|
+ <view class="item-footer">
|
|
|
+ <button class="receive-btn" @click="handleSignReceive(item)">签收</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="empty-tips">
|
|
|
- <text class="empty-text">暂无待签收物料</text>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="empty-tips">
|
|
|
+ <text class="empty-text">暂无待签收物料</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部 TabBar -->
|
|
|
@@ -66,7 +68,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="uts">
|
|
|
- import { ref, onMounted } from 'vue'
|
|
|
+ import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
import { getUserInfo } from '../../utils/storage'
|
|
|
import { getPendingReceiveLines, signReceiveLine } from '../../api/out/index'
|
|
|
type QuickFunction = {
|
|
|
@@ -80,12 +82,14 @@
|
|
|
const receiveListData = ref<UTSJSONObject[]>([])
|
|
|
const receiveLoading = ref<boolean>(false)
|
|
|
let currentUserId: string = ''
|
|
|
+ let refreshTimer: number | null = null
|
|
|
+ let timerLock = false
|
|
|
|
|
|
// 快捷功能列表
|
|
|
const quickFunctions = ref<QuickFunction[]>([
|
|
|
{
|
|
|
id: 1,
|
|
|
- title: '申请单',
|
|
|
+ title: '物料申请',
|
|
|
bgImage: '/static/images/workbench/3.png',
|
|
|
icon: '',
|
|
|
path: '/pages/apply/index',
|
|
|
@@ -101,10 +105,10 @@
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
- title: '物料申请',
|
|
|
+ title: '物料清单',
|
|
|
bgImage: '/static/images/workbench/4.png',
|
|
|
icon: '',
|
|
|
- path: '/pages/apply/applyNew',
|
|
|
+ path: '/pages/item/index',
|
|
|
badge: 0
|
|
|
}
|
|
|
])
|
|
|
@@ -223,7 +227,24 @@ const loadReceiveList = (): void => {
|
|
|
|
|
|
// 用户名
|
|
|
const userName = ref<string>('用户')
|
|
|
-
|
|
|
+ // 停止定时刷新
|
|
|
+ const stopRefreshTimer = (): void => {
|
|
|
+ if (timerLock && refreshTimer != null) {
|
|
|
+ clearInterval(refreshTimer as number)
|
|
|
+ refreshTimer = null
|
|
|
+ timerLock = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 启动定时刷新
|
|
|
+ const startRefreshTimer = (): void => {
|
|
|
+ stopRefreshTimer() // 先清除已有的定时器
|
|
|
+ timerLock = true
|
|
|
+ refreshTimer = setInterval(() => {
|
|
|
+ if (currentUserId.length > 0) {
|
|
|
+ loadReceiveList()
|
|
|
+ }
|
|
|
+ }, 5000) // 5秒刷新一次
|
|
|
+ }
|
|
|
// 初始化
|
|
|
onMounted(() => {
|
|
|
const userInfo = getUserInfo()
|
|
|
@@ -234,17 +255,29 @@ const loadReceiveList = (): void => {
|
|
|
currentUserId = userId != null ? userId.toString() : ''
|
|
|
// 加载待签收列表
|
|
|
loadReceiveList()
|
|
|
+ // 启动定时刷新，每5秒刷新一次
|
|
|
+ startRefreshTimer()
|
|
|
}
|
|
|
})
|
|
|
+ // 组件卸载时清除定时器
|
|
|
+ onUnmounted(() => {
|
|
|
+ stopRefreshTimer()
|
|
|
+ })
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.page-container {
|
|
|
position: relative;
|
|
|
flex: 1;
|
|
|
- padding-top: env(safe-area-inset-top);
|
|
|
+ padding-top: calc(env(safe-area-inset-top) + 20rpx);
|
|
|
+ padding-bottom: 140rpx; /* 为底部标签栏留出更多空间 */
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-right: 20rpx;
|
|
|
background-color: #e8f0f9;
|
|
|
- padding: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.bg-image {
|
|
|
@@ -306,188 +339,219 @@ const loadReceiveList = (): void => {
|
|
|
}
|
|
|
|
|
|
.quick-cards {
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .quick-card {
|
|
|
- position: relative;
|
|
|
- width: 212rpx;
|
|
|
- height: 120rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 16rpx;
|
|
|
-
|
|
|
- &-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 226rpx;
|
|
|
- height: 140rpx;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &-content {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- padding: 20rpx;
|
|
|
- height: 140rpx;
|
|
|
- justify-content: flex-start;
|
|
|
- }
|
|
|
-
|
|
|
- &-title {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .management-badge {
|
|
|
- position: absolute;
|
|
|
- top: 20rpx;
|
|
|
- right: 20rpx;
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- background-color: #ff3b30;
|
|
|
- border-radius: 16rpx;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .badge-text {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .section-title-container {
|
|
|
- // margin-top: 20rpx;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- .section-header {
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .section-title {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
- // margin-bottom: 20rpx;
|
|
|
- }
|
|
|
- .view-all {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #165dff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-item {
|
|
|
- margin: 0 30rpx 24rpx 30rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 16rpx;
|
|
|
- .item-container {
|
|
|
- padding: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .item-header {
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 16rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
|
- .location-icon {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
+ .quick-card {
|
|
|
+ position: relative;
|
|
|
+ width: 212rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
|
- .item-title {
|
|
|
- flex: 1;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ &-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 226rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
|
|
|
- .detail-link {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ &-content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ padding: 20rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .management-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-color: #ff3b30;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .item-type {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #007aff;
|
|
|
- background-color: #e6f7ff;
|
|
|
- padding: 8rpx 16rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- white-space: nowrap;
|
|
|
+ .badge-text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .item-address {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #999999;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .item-info {
|
|
|
- padding: 20rpx;
|
|
|
- background-color: #f8f9fa;
|
|
|
- border-radius: 8rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .info-row {
|
|
|
- flex-direction: row;
|
|
|
- margin-bottom: 16rpx;
|
|
|
+.receive-list-container {
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
+.section-title-container {
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ .section-header {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .section-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ // margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .view-all {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #165dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .info-item {
|
|
|
- flex: 1;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
+.receive-list {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ /* 隐藏滚动条但保留滚动功能 */
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 为了兼容性，添加一些额外样式 */
|
|
|
+ scrollbar-width: none;
|
|
|
+ -ms-overflow-style: none;
|
|
|
+}
|
|
|
|
|
|
- .info-label {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666666;
|
|
|
- margin-right: 8rpx;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+.list-item {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
|
|
+ .item-container {
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-header {
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+
|
|
|
+ .location-icon {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-link {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
|
|
|
- .info-value {
|
|
|
+ .item-type {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #007aff;
|
|
|
+ background-color: #e6f7ff;
|
|
|
+ padding: 6rpx 12rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-address {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info {
|
|
|
+ padding: 16rpx;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-radius: 6rpx;
|
|
|
+
|
|
|
+ .info-row {
|
|
|
+ flex-direction: row;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item {
|
|
|
flex: 1;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- &.status-pending {
|
|
|
- color: #faad14;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ &.status-pending {
|
|
|
+ color: #faad14;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .item-footer {
|
|
|
- margin-top: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
+ .item-footer {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
|
|
|
- .receive-btn {
|
|
|
- padding: 12rpx 32rpx;
|
|
|
- background-color: #007aff;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 26rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- border: none;
|
|
|
- }
|
|
|
+ .receive-btn {
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
+ background-color: #007aff;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.empty-tips {
|
|
|
+ padding: 30rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .empty-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
}
|
|
|
- .empty-tips {
|
|
|
- padding: 30rpx;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .empty-text {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|
wuhb