标准箱盘点
This commit is contained in:
parent
2f14c19c1b
commit
e6048259b1
|
|
@ -542,6 +542,18 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/standardBox/boxList",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/standardBox/codeEntering",
|
||||
"style": {
|
||||
"navigationBarTitleText": "标准箱录入"
|
||||
}
|
||||
},
|
||||
//库存查询
|
||||
{
|
||||
"path": "pages/stquery/deviceStatusRecord/index",
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div>
|
||||
<ScanQrCode
|
||||
ref="scanQrCodeRef"
|
||||
@scanSuccessBox="handleScanSuccess"
|
||||
@scanErrorBox="handleScanError"
|
||||
@scanSuccess="handleScanSuccess"
|
||||
@scanError="handleScanError"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,677 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="nav-content">
|
||||
<view class="left-icon" @click="leftClick">
|
||||
<uni-icons type="left" size="24"></uni-icons>
|
||||
</view>
|
||||
<view class="title">标准箱盘点</view>
|
||||
<view class="right-icon" @click="rightClick">
|
||||
<uni-icons type="scan" size="24"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="page-container">
|
||||
<view class="complete-btn">
|
||||
<view class="btn" @click="changeTab(1)">
|
||||
<span>待录入</span>
|
||||
<div v-if="active == 1" class="bt-line"></div>
|
||||
</view>
|
||||
<view class="btn" style="margin-left: 120rpx" @click="changeTab(2)">
|
||||
<span>待移交</span>
|
||||
<div v-if="active == 2" class="bt-line"></div>
|
||||
</view>
|
||||
</view>
|
||||
<uni-row :gutter="24" class="search-form">
|
||||
<uni-col :span="24">
|
||||
<view>
|
||||
<uni-datetime-picker
|
||||
v-model="dateArray"
|
||||
type="daterange"
|
||||
@maskClick="maskClick"
|
||||
@change="onChangeDate"
|
||||
placeholder="选择日期范围"
|
||||
/>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row :gutter="24" class="search-form">
|
||||
<uni-col :span="18">
|
||||
<view>
|
||||
<uni-easyinput placeholder="请输入内容" v-model="queryParams.keyWord" />
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="6">
|
||||
<view class="search" @click="getTableList(true)">搜索</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<scroll-view scroll-y @scrolltolower="onScrollTolower" class="scroll-container">
|
||||
<div class="table-list-item" v-for="(item, index) in tableList" :key="index">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item
|
||||
:right-options="
|
||||
item.status == 2 || item.status == 5 ? swipeOptions : swipeOptionsFail
|
||||
"
|
||||
@click="onClick($event, item)"
|
||||
@change="onSwipeChange"
|
||||
>
|
||||
<div class="content-wrapper">
|
||||
<div class="title">
|
||||
<span class="code">{{ item.boxCode }}</span>
|
||||
<span
|
||||
v-if="item.status == 1"
|
||||
:class="[
|
||||
'status',
|
||||
item.status == 2 || item.status == 5 ? 'completed' : 'pending',
|
||||
]"
|
||||
>{{ '未录入' }}</span
|
||||
>
|
||||
<span
|
||||
v-if="item.status == 2"
|
||||
:class="[
|
||||
'status',
|
||||
item.status == 2 || item.status == 5 ? 'completed' : 'pending',
|
||||
]"
|
||||
>{{ '已完成' }}</span
|
||||
>
|
||||
<span
|
||||
v-if="item.status == 5"
|
||||
:class="[
|
||||
'status',
|
||||
item.status == 2 || item.status == 5 ? 'completed' : 'pending',
|
||||
]"
|
||||
>{{ '移交驳回' }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<uni-row :gutter="24">
|
||||
<uni-col :span="7">标准箱名称:</uni-col>
|
||||
<uni-col :span="17"
|
||||
><div class="cont">{{ item.boxName }}</div></uni-col
|
||||
>
|
||||
</uni-row>
|
||||
<uni-row :gutter="24">
|
||||
<uni-col :span="7">机具数量：</uni-col>
|
||||
<uni-col :span="17"
|
||||
><div class="cont">{{ item.devNum }}</div></uni-col
|
||||
>
|
||||
</uni-row>
|
||||
<uni-row :gutter="24">
|
||||
<uni-col :span="7">创建人：</uni-col>
|
||||
<uni-col :span="17"
|
||||
><div class="cont">{{ item.createBy }}</div></uni-col
|
||||
>
|
||||
</uni-row>
|
||||
<uni-row :gutter="24">
|
||||
<uni-col :span="7">创建时间：</uni-col>
|
||||
<uni-col :span="17"
|
||||
><div class="cont">{{ item.createTime }}</div></uni-col
|
||||
>
|
||||
</uni-row>
|
||||
<!-- <div class="storage-info">
|
||||
<div class="storage-item">
|
||||
<span class="label">已入库：</span>
|
||||
<span class="value">{{ item.inputMaNumber || 0 }}</span>
|
||||
</div>
|
||||
<div class="storage-item">
|
||||
<span class="label">待入库：</span>
|
||||
<span class="value">{{ item.waitInputNumber || 0 }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</div>
|
||||
<view class="loading-text">
|
||||
{{ finish ? '没有更多数据了~' : '正在加载...' }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ScanQrCodeBox
|
||||
ref="scanQrCodeRefBox"
|
||||
@scanSuccessBox="handleScanSuccessBox"
|
||||
@scanErrorBox="handleScanErrorBox"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { getQrCodeBoxListApi } from '@/services/standard.js'
|
||||
import ScanQrCodeBox from '@/pages/devicesSearch/ScanQrCodeBox.vue'
|
||||
|
||||
const total = ref(0) // 数据总量
|
||||
const active = ref(1) // tap索引
|
||||
const tableList = ref([]) // 列表数据源
|
||||
const dateArray = ref([]) // 日期范围
|
||||
const statusBarHeight = ref(0)
|
||||
const scanQrCodeRefBox = ref()
|
||||
const boxCode = ref('')
|
||||
// 查询参数
|
||||
const queryParams = ref({
|
||||
startTime: '', // 开始时间
|
||||
endTime: '', // 结束时间
|
||||
keyWord: '', // 关键字
|
||||
status: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
})
|
||||
|
||||
// 初始化状态栏高度
|
||||
const initStatusBarHeight = () => {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
statusBarHeight.value = res.statusBarHeight
|
||||
// 设置CSS变量
|
||||
document.documentElement.style.setProperty('--status-bar-height', `${res.statusBarHeight}px`)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
initStatusBarHeight()
|
||||
getTableList(true)
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
tableList.value = []
|
||||
getTableList(true)
|
||||
})
|
||||
|
||||
// 日期 change 事件
|
||||
const onChangeDate = (val) => {
|
||||
const [val_1, val_2] = val
|
||||
queryParams.value.startTime = val_1
|
||||
queryParams.value.endTime = val_2
|
||||
}
|
||||
|
||||
//点击事件
|
||||
const onClick = (e, item) => {
|
||||
if (e.index == 0) {
|
||||
uni.navigateTo({ url: `/pages/standardBox/codeEntering?boxInfo=${JSON.stringify(item)}` })
|
||||
} else {
|
||||
uni.navigateTo({ url: `/pages/standardBox/codeView?boxInfo=${JSON.stringify(item)}` })
|
||||
}
|
||||
}
|
||||
|
||||
//左滑选择项1
|
||||
const swipeOptions = ref([
|
||||
{
|
||||
text: '绑定',
|
||||
style: { backgroundColor: '#007AFF' },
|
||||
},
|
||||
{
|
||||
text: '查看',
|
||||
style: { backgroundColor: '#34C759' },
|
||||
},
|
||||
])
|
||||
|
||||
//左滑选择项2
|
||||
const swipeOptionsFail = ref([
|
||||
{
|
||||
text: '绑定',
|
||||
style: { backgroundColor: '#007AFF' },
|
||||
},
|
||||
])
|
||||
|
||||
//左滑改变
|
||||
const onSwipeChange = (e) => {
|
||||
console.log('Swipe Changed', e)
|
||||
}
|
||||
|
||||
// 获取列表数据
|
||||
const getTableList = async (isTap = false) => {
|
||||
try {
|
||||
const { data: res } = await getQrCodeBoxListApi(queryParams.value)
|
||||
console.log('res列表数据', res)
|
||||
// 更新总数
|
||||
total.value = res.total
|
||||
|
||||
// 处理数据
|
||||
if (isTap) {
|
||||
// 点击搜索时，直接替换数据
|
||||
tableList.value = res.rows || []
|
||||
// 重置页码
|
||||
queryParams.value.pageNum = 1
|
||||
} else {
|
||||
// 下拉加载时，追加数据
|
||||
if (res.rows && res.rows.length > 0) {
|
||||
// 使用展开运算符安全地合并数组
|
||||
tableList.value = [...tableList.value, ...res.rows]
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取列表数据失败:', error)
|
||||
// 发生错误时重置数据
|
||||
if (isTap) {
|
||||
tableList.value = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动触底事件
|
||||
const onScrollTolower = debounce(() => {
|
||||
// 判断是否还有更多数据
|
||||
if (tableList.value.length < total.value) {
|
||||
queryParams.value.pageNum++
|
||||
getTableList(false)
|
||||
}
|
||||
}, 500)
|
||||
|
||||
// tap 栏切换
|
||||
const changeTab = (index) => {
|
||||
active.value = index
|
||||
// 重置查询参数
|
||||
queryParams.value.pageNum = 1
|
||||
queryParams.value.keyWord = ''
|
||||
queryParams.value.startTime = ''
|
||||
queryParams.value.endTime = ''
|
||||
dateArray.value = [] // 清空日期选择
|
||||
|
||||
if (index == 1) {
|
||||
queryParams.value.status = 1 // 查未完成的
|
||||
} else if (index == 2) {
|
||||
queryParams.value.status = [2, 5] // 查已完成的
|
||||
}
|
||||
|
||||
// 重置列表数据
|
||||
tableList.value = []
|
||||
// 重新获取数据
|
||||
getTableList(true)
|
||||
}
|
||||
const maskClick = () => {}
|
||||
const leftClick = () => {
|
||||
console.log(1)
|
||||
uni.navigateBack({
|
||||
delta: 1, // 返回到已存在的页面
|
||||
})
|
||||
}
|
||||
const rightClick = () => {
|
||||
console.log(2)
|
||||
if (scanQrCodeRefBox.value) scanQrCodeRefBox.value.scanQrCode()
|
||||
}
|
||||
// 处理扫描成功事件
|
||||
const handleScanSuccessBox = async (result) => {
|
||||
boxCode.value = result?.text || ''
|
||||
if (boxCode.value === '') {
|
||||
uni.showToast({ title: '扫码识别失败', icon: 'none' })
|
||||
} else {
|
||||
try {
|
||||
const res = await getQrCodeBoxListApi({ boxCode: boxCode.value, status: '1,2,5' })
|
||||
console.log('🚀 ~ handleScanSuccessBox ~ res:', res)
|
||||
const item = res.data?.rows[0]
|
||||
if (res.code === 200) {
|
||||
uni.navigateTo({ url: `/pages/standardBox/codeEntering?boxInfo=${JSON.stringify(item)}` })
|
||||
} else {
|
||||
uni.showToast({ title: res.message, icon: 'none' })
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理扫描失败事件
|
||||
const handleScanErrorBox = (error) => {
|
||||
console.error('扫描出错:', error.message)
|
||||
uni.showToast({ title: error.message, icon: 'none' })
|
||||
}
|
||||
// 判断数据是否加载完毕
|
||||
const finish = computed(() => {
|
||||
console.log('total.value', total.value)
|
||||
console.log('tableList.value.length', tableList.value.length)
|
||||
if (total.value === tableList.value.length) return true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 自定义导航栏样式 */
|
||||
.custom-navbar {
|
||||
width: 100%;
|
||||
background-color: rgb(220, 244, 255);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
height: calc(44px + var(--status-bar-height, 0px));
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.left-icon,
|
||||
.right-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left-icon {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 页面内容容器 */
|
||||
.page-container {
|
||||
margin-top: calc(44px + var(--status-bar-height, 0px));
|
||||
height: calc(100vh - 44px - var(--status-bar-height, 0px));
|
||||
overflow: auto;
|
||||
background-color: #f7f8fa;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.uni-navbar__header-container-inner) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.complete-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* padding: 28rpx 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); */
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 60rpx;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
color: #8c8c8c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bt-line {
|
||||
width: 32rpx;
|
||||
height: 6rpx;
|
||||
background: #3784fb;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 6rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
/* background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); */
|
||||
|
||||
:deep(.uni-easyinput__content),
|
||||
:deep(.uni-date-editor) {
|
||||
background-color: #f7f8fa;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
border-radius: 12rpx;
|
||||
height: 75rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #3784fb;
|
||||
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.uni-date-editor) {
|
||||
width: 100%;
|
||||
|
||||
.uni-date {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-date-x {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-date-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.uni-date-range--text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.uni-date-range--delimeter {
|
||||
padding: 0 20rpx;
|
||||
color: #8c8c8c;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-date-x--border {
|
||||
width: 100%;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f7f8fa;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #3784fb;
|
||||
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
height: 60rpx;
|
||||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: translateY(2rpx);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
padding: 0 2rpx;
|
||||
|
||||
.table-list-item {
|
||||
margin: 24rpx 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
min-height: 300rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
|
||||
.content-wrapper {
|
||||
padding: 32rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.code {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #007aff;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
span.status {
|
||||
padding: 8rpx 28rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&.completed {
|
||||
background-color: rgba(82, 196, 26, 0.1);
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background-color: rgba(250, 140, 22, 0.1);
|
||||
color: #fa8c16;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 24rpx 0;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(232, 232, 232, 0) 0%,
|
||||
rgba(232, 232, 232, 1) 50%,
|
||||
rgba(232, 232, 232, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
:deep(.uni-row) {
|
||||
/* margin-bottom: 20rpx; */
|
||||
|
||||
.uni-col-6 {
|
||||
color: #8c8c8c;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.cont {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
line-height: 1.8;
|
||||
color: #262626;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.storage-info {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 2rpx solid #f5f5f5;
|
||||
|
||||
.storage-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
color: #8c8c8c;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #262626;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 优化左滑区域样式
|
||||
:deep(.uni-swipe_action) {
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.uni-swipe_content {
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-swipe_button-group {
|
||||
height: 100%;
|
||||
|
||||
.uni-swipe_button {
|
||||
height: 100%;
|
||||
padding: 0 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
border: none;
|
||||
|
||||
// 查看按钮
|
||||
&:nth-child(1) {
|
||||
background: linear-gradient(to bottom, #3ad980, #34c759);
|
||||
}
|
||||
|
||||
// 入库按钮
|
||||
&:nth-child(2) {
|
||||
background: linear-gradient(to bottom, #3b95ff, #007aff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载提示文字
|
||||
.loading-text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #8c8c8c;
|
||||
padding: 32rpx 0;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,369 @@
|
|||
<template>
|
||||
<view class="accept page-common">
|
||||
<uni-row :gutter="24" class="search-form">
|
||||
<uni-col :span="16">
|
||||
<view><uni-easyinput placeholder="请输入内容" v-model="searchValue" /></view>
|
||||
</uni-col>
|
||||
<uni-col :span="4">
|
||||
<view class="search" @click="getCodeInfo()">查询</view>
|
||||
</uni-col>
|
||||
<uni-col :span="4">
|
||||
<view class="addBtn" @click="scanStart">扫码</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<div class="card" style="margin-top: 10px">
|
||||
<uni-forms :model="boxInfo" label-width="200rpx" :border="true">
|
||||
<uni-forms-item label="标准箱名称：" name="boxName">
|
||||
<span style="height: 100%; display: flex; align-items: center">{{
|
||||
boxInfo.boxName
|
||||
}}</span>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="标准箱编码：" name="boxCode">
|
||||
<span style="height: 100%; display: flex; align-items: center">{{
|
||||
boxInfo.boxCode
|
||||
}}</span>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="物资类型：" name="materialName">
|
||||
<span style="height: 100%; display: flex; align-items: center">{{
|
||||
codeInfo.materialName
|
||||
}}</span>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="规格型号：" name="typeModelName">
|
||||
<span style="height: 100%; display: flex; align-items: center">{{
|
||||
codeInfo.materialModel
|
||||
}}</span>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="设备编码：" name="maCode">
|
||||
<span style="height: 100%; display: flex; align-items: center">{{
|
||||
codeInfo.maCode
|
||||
}}</span>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="已录入数量：" name="devNum">
|
||||
<span style="height: 100%; display: flex; align-items: center">{{ boxInfo.devNum }}</span>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<div style="width: 98%; height: auto">
|
||||
<div style="margin-bottom: 10px">绑定清单</div>
|
||||
<uni-table border stripe emptyText="暂无更多数据" style="max-height: 300px">
|
||||
<!-- 表头行 -->
|
||||
<uni-tr>
|
||||
<uni-th width="70px" align="center" style="font-size: 24rpx">编码</uni-th>
|
||||
<uni-th width="55px" align="center" style="font-size: 24rpx">状态</uni-th>
|
||||
<uni-th width="55px" align="center" style="font-size: 24rpx">录入人</uni-th>
|
||||
<!-- <uni-th width="80px" align="center" style="font-size: 24rpx;">录入时间</uni-th> -->
|
||||
<uni-th width="50px" align="center" style="font-size: 24rpx">操作</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr v-for="item in codeList" :key="item.id">
|
||||
<uni-td style="font-size: 22rpx" align="center">{{ item.maCode }}</uni-td>
|
||||
<uni-td style="font-size: 22rpx" align="center">{{ item.maStatus }}</uni-td>
|
||||
<uni-td style="font-size: 22rpx" align="center">{{ item.createBy }}</uni-td>
|
||||
<!-- <uni-td style="font-size: 22rpx;">{{item.createTime}}</uni-td> -->
|
||||
<uni-td>
|
||||
<view class="uni-group">
|
||||
<span style="color: red; margin-left: 10px; font-size: 20rpx" @click="delRow(item)"
|
||||
>删除</span
|
||||
>
|
||||
</view>
|
||||
</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn">
|
||||
<button class="btn-cont" style="width: 90%" @click="entering">录入</button>
|
||||
</div>
|
||||
|
||||
<ScanQrCode ref="scanQrCodeRef" @scanSuccess="handleScanSuccess" @scanError="handleScanError" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import {
|
||||
getAppBoxDetailListApi,
|
||||
appUnbindMaCodeApi,
|
||||
getMaCodeListApi,
|
||||
appCodeBindApi,
|
||||
} from '@/services/standard.js'
|
||||
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode.vue'
|
||||
const scanQrCodeRef = ref(null)
|
||||
const searchValue = ref('')
|
||||
const boxInfo = ref({})
|
||||
const codeList = ref([])
|
||||
const codeInfo = ref({})
|
||||
const loading = ref(false)
|
||||
|
||||
const getCodeInfo = async () => {
|
||||
try {
|
||||
const res = await getMaCodeListApi({ maCode: searchValue.value })
|
||||
console.log('🚀 ~ getCodeInfo ~ res:', res)
|
||||
if (!res.data) {
|
||||
uni.showToast({
|
||||
title: '未查询到编码信息',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
codeInfo.value = res.data
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getCodeInfo ~ error:', error)
|
||||
}
|
||||
}
|
||||
const getCodeList = () => {
|
||||
console.log(boxInfo.value)
|
||||
let param = {
|
||||
boxId: boxInfo.value.boxId,
|
||||
}
|
||||
getAppBoxDetailListApi(param)
|
||||
.then((res) => {
|
||||
console.log(res)
|
||||
if ((res.code = 200)) {
|
||||
codeList.value = res.data.rows
|
||||
boxInfo.value.devNum = codeList.value.length
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
// 二维码扫码
|
||||
const scanStart = async () => {
|
||||
if (scanQrCodeRef.value) {
|
||||
searchValue.value = ''
|
||||
scanQrCodeRef.value.scanQrCode()
|
||||
}
|
||||
}
|
||||
|
||||
// 处理扫描成功事件
|
||||
const handleScanSuccess = (result) => {
|
||||
searchValue.value = result?.text?.split('?qrcode=')[1] || result?.text
|
||||
if (searchValue.value === '') {
|
||||
uni.showToast({ title: '扫码识别失败', icon: 'none' })
|
||||
} else {
|
||||
getCodeInfo()
|
||||
}
|
||||
}
|
||||
|
||||
// 处理扫描失败事件
|
||||
const handleScanError = (error) => {
|
||||
console.error('扫描出错:', error.message)
|
||||
uni.showToast({ title: error.message, icon: 'none' })
|
||||
}
|
||||
|
||||
//解绑
|
||||
const delRow = (item) => {
|
||||
// 弹框确认
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要解绑吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
let param = {
|
||||
id: item.id,
|
||||
boxId: boxInfo.value.boxId,
|
||||
}
|
||||
console.log(param)
|
||||
appUnbindMaCodeApi(param)
|
||||
.then((res) => {
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
uni.showToast({ title: '解绑成功', icon: 'none' })
|
||||
|
||||
getCodeList()
|
||||
} else {
|
||||
uni.showToast({ title: '解绑失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const entering = async () => {
|
||||
if (!codeInfo.value.typeId) {
|
||||
uni.showToast({ title: '请录入正确的设备', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
uni.showLoading()
|
||||
try {
|
||||
const res = await appCodeBindApi({ ...codeInfo.value, boxId: boxInfo.value.boxId })
|
||||
console.log('🚀 ~ entering ~ res:', res)
|
||||
loading.value = false
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '录入成功', icon: 'none' })
|
||||
codeInfo.value = {}
|
||||
getCodeList()
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
uni.hideLoading()
|
||||
console.log('🚀 ~ entering ~ error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(options)
|
||||
boxInfo.value = JSON.parse(options.boxInfo)
|
||||
boxInfo.value.typeName = ''
|
||||
boxInfo.value.typeModelName = ''
|
||||
console.log(boxInfo.value)
|
||||
// getCodeList()
|
||||
})
|
||||
onShow(() => {
|
||||
getCodeList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.accept {
|
||||
padding: 10px;
|
||||
height: 95vh;
|
||||
word-break: break-all;
|
||||
}
|
||||
.card {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.1);
|
||||
:deep(.uni-forms-item--border) {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
.coding-btn {
|
||||
padding: 5rpx 0;
|
||||
background-color: #409eff;
|
||||
border-radius: 6rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.upload {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
color: #ccc;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.search-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
:deep(.uni-easyinput__content) {
|
||||
background-color: #f7f8fa;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
border-radius: 12rpx;
|
||||
height: 80rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #3784fb;
|
||||
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: translateY(2rpx);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
.addBtn {
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: translateY(2rpx);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 30px 0;
|
||||
|
||||
.btn-cont {
|
||||
width: 40%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background-color: #3784fb;
|
||||
color: #fff;
|
||||
border-radius: 20px;
|
||||
// 取消按钮淡蓝色
|
||||
// &:first-child {
|
||||
// background-color: #aacefb;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.keeper-popup {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
|
||||
.handle-box {
|
||||
width: 94%;
|
||||
margin: 10px auto;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.handle-box-btn {
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.keeper-box {
|
||||
width: 94%;
|
||||
margin: 10px auto;
|
||||
height: 36vh;
|
||||
}
|
||||
.table-list-item {
|
||||
width: 90%;
|
||||
margin: 5px auto;
|
||||
height: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -217,22 +217,32 @@ const bindMa = (qrCode) => {
|
|||
//解绑
|
||||
const delRow = (item) => {
|
||||
console.log(item)
|
||||
let param = {
|
||||
"id":item.id,"boxId":boxInfo.value.boxId,
|
||||
}
|
||||
console.log(param)
|
||||
appUnbindMaCodeApi(param).then(res => {
|
||||
console.log(res)
|
||||
if(res.code==200){
|
||||
uni.showToast({ title: '解绑成功', icon: 'none' })
|
||||
// 弹框确认
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要解绑吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
let param = {
|
||||
id: item.id,
|
||||
boxId: boxInfo.value.boxId,
|
||||
}
|
||||
console.log(param)
|
||||
appUnbindMaCodeApi(param).then(res => {
|
||||
console.log(res)
|
||||
if(res.code==200){
|
||||
uni.showToast({ title: '解绑成功', icon: 'none' })
|
||||
|
||||
getCodeList()
|
||||
}else{
|
||||
uni.showToast({ title: '解绑失败', icon: 'none' })
|
||||
getCodeList()
|
||||
}else{
|
||||
uni.showToast({ title: '解绑失败', icon: 'none' })
|
||||
}
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<view class="left-icon" @click="leftClick">
|
||||
<uni-icons type="left" size="24"></uni-icons>
|
||||
</view>
|
||||
<view class="title">标准箱管理</view>
|
||||
<view class="title">标准箱创建</view>
|
||||
<view class="right-icon" @click="rightClick">
|
||||
<uni-icons type="scan" size="24"></uni-icons>
|
||||
</view>
|
||||
|
|
@ -17,11 +17,11 @@
|
|||
<view class="page-container">
|
||||
<view class="complete-btn">
|
||||
<view class="btn" @click="changeTab(1)">
|
||||
<span>未录入</span>
|
||||
<span>待录入</span>
|
||||
<div v-if="active == 1" class="bt-line"></div>
|
||||
</view>
|
||||
<view class="btn" style="margin-left: 120rpx" @click="changeTab(2)">
|
||||
<span>已完成</span>
|
||||
<span>待移交</span>
|
||||
<div v-if="active == 2" class="bt-line"></div>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -161,6 +161,11 @@ const newInfoList = ref([
|
|||
url: '/pages/nameplateUpdate/index',
|
||||
iconSrc: '../../static/workbench/minPai.png',
|
||||
},
|
||||
{
|
||||
title: '标准箱盘点',
|
||||
url: '/pages/standardBox/boxList',
|
||||
iconSrc: '../../static/workbench/minPai.png',
|
||||
},
|
||||
])
|
||||
|
||||
// 使用计算属性筛选 newInfoList 中的数据
|
||||
|
|
@ -304,7 +309,7 @@ const repairListTwo = computed(() => {
|
|||
// 标准箱
|
||||
const boxList = ref([
|
||||
{
|
||||
title: '标准箱管理',
|
||||
title: '标准箱创建',
|
||||
url: '/pages/standardBox/index',
|
||||
iconSrc: '../../static/workbench/boxManage.png',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -146,9 +146,23 @@ export const getBoxDetailsApi = (data) => {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 获取设备编码
|
||||
export const getMaCodeListApi = (data) => {
|
||||
return http({
|
||||
method: 'GET',
|
||||
url: '/material/bm_qrcode_box/getMaCodeList',
|
||||
data:data,
|
||||
})
|
||||
}
|
||||
|
||||
// 编码录入
|
||||
export const appCodeBindApi = (data) => {
|
||||
return http({
|
||||
method: 'POST',
|
||||
url: '/material/bm_qrcode_box/app_code_bind',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue