771f4ab006
- 重构扫码页面结构，采用标签页形式组织功能模块 - 新增分卷录入功能组件(apart.vue)和基础录入功能组件(typing.vue) - 新增物料选择组件(klp-product-select)和标签页组件(klp-tabs) - 新增WMS相关API接口(product.js, warehouse.js等) - 更新uni-data-select组件支持多选和插槽功能 - 更新uni-icons和uni-load-more组件版本及功能 - 移除冗余样式和代码，优化现有组件结构 refactor(组件): 优化acidity.vue组件使用新的标签页组件 style: 移除冗余CSS样式代码 chore: 更新多个uni_modules组件的package.json版本号
173 lines
3.6 KiB
Vue
173 lines
3.6 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 标签栏 -->
|
||
<view class="tab-container">
|
||
<view
|
||
v-for="item in tabs"
|
||
:key="item.value"
|
||
@click="switchTab(item.value)"
|
||
class="tab-item"
|
||
:class="{ 'tab-active': currentTab === item.value }"
|
||
>
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 动态组件区域 - 根据当前标签显示对应组件 -->
|
||
<view class="component-container">
|
||
<component
|
||
:is="currentComponent"
|
||
></component>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import ApartVue from '@/components/panels/code/apart.vue'
|
||
import MergeVue from '@/components/panels/code/merge.vue'
|
||
import TraceVue from '@/components/panels/code/trace.vue'
|
||
import TypingVue from '@/components/panels/code/typing.vue'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
scanResult: null, // 扫码结果（传递给组件）
|
||
currentTime: '', // 扫码时间（传递给组件）
|
||
recordId: undefined,
|
||
codeStatus: undefined,
|
||
remark: '',
|
||
currentTab: 'typing', // 当前激活的标签
|
||
tabs: [
|
||
{ label: '录入', value: 'typing' },
|
||
{ label: '分卷', value: 'apart' },
|
||
// { label: '合卷', value: 'merge' },
|
||
{ label: '追溯', value: 'trace' }
|
||
]
|
||
};
|
||
},
|
||
components: {
|
||
ApartVue,
|
||
MergeVue,
|
||
TraceVue,
|
||
TypingVue
|
||
},
|
||
computed: {
|
||
username() {
|
||
return this.$store.state.user.name
|
||
},
|
||
avatar() {
|
||
return this.$store.state.user.avatar
|
||
},
|
||
windowHeight() {
|
||
return uni.getSystemInfoSync().windowHeight - 50
|
||
},
|
||
// 根据当前标签计算要显示的组件
|
||
currentComponent() {
|
||
// 转换为组件名（如 'typing' -> 'TypingVue'）
|
||
return this.currentTab.charAt(0).toUpperCase() + this.currentTab.slice(1) + 'Vue'
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
uni.setNavigationBarTitle({
|
||
title: '扫码（' + this.username + '）',
|
||
});
|
||
},
|
||
|
||
methods: {
|
||
// 切换标签
|
||
switchTab(tabValue) {
|
||
this.currentTab = tabValue
|
||
},
|
||
|
||
// 处理确认录入
|
||
handleConfirm() {
|
||
if (!this.scanResult && this.currentTab !== 'trace') {
|
||
uni.showToast({
|
||
title: '请先扫码获取信息',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 这里添加确认录入的逻辑
|
||
console.log('确认录入信息：', {
|
||
tab: this.currentTab,
|
||
scanResult: this.scanResult,
|
||
currentTime: this.currentTime,
|
||
recordId: this.recordId,
|
||
codeStatus: this.codeStatus,
|
||
remark: this.remark,
|
||
operator: this.username
|
||
})
|
||
|
||
uni.showToast({
|
||
title: '录入成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 父页面样式：保留原有样式，新增标签栏样式 */
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 20rpx;
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* 标签栏容器 */
|
||
.tab-container {
|
||
display: flex;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
/* 标签项样式 */
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 25rpx 0;
|
||
font-size: 32rpx;
|
||
color: #666;
|
||
position: relative;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
/* 激活标签样式 */
|
||
.tab-active {
|
||
color: #007aff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 激活标签下划线 */
|
||
.tab-active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 6rpx;
|
||
background-color: #007aff;
|
||
border-radius: 3rpx 3rpx 0 0;
|
||
}
|
||
|
||
/* 组件容器样式 */
|
||
.component-container {
|
||
width: 100%;
|
||
min-height: 400rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
</style> |