<template>
|
<view class="box">
|
<!-- 自定义导航栏 -->
|
<view class="navBarBox fix">
|
<!-- 状态栏占位 -->
|
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
<!-- 真正的导航栏内容 -->
|
<view class="navBar">
|
<view class="barText">记录查询</view>
|
</view>
|
</view>
|
<!-- 页面内容 -->
|
<view class="m-p-15">
|
<u-sticky>
|
<u-input placeholder="请输入或扫描二维码编号进行搜索" v-model="searchContent">
|
<template slot="prefix">
|
<u-icon name="scan" color="#2979ff" size="28" @click="scanCode()"></u-icon>
|
</template>
|
<template slot="suffix">
|
<u-button type="primary" class="searchBtn" size="small" text="溯源查询" shape="circle" @click="getList()"></u-button>
|
</template>
|
</u-input>
|
</u-sticky>
|
<view class="productCard" v-if="dataList && dataList.length>0">
|
<view v-if="dataList[0].hazmatBasic">
|
<view>名称：<span>{{dataList[0].hazmatBasic?dataList[0].hazmatBasic.name:''}}({{dataList[0].hazmatBasic?dataList[0].hazmatBasic.productSn :''}})</span></view>
|
<view>条码：<span>{{dataList[0].code}}</span></view>
|
</view>
|
<view v-if="dataList[0].productBasic">
|
<view>名称：{{dataList[0].productBasic?dataList[0].productBasic.name:''}}({{dataList[0].productBasic?dataList[0].productBasic.productSn :''}})</view>
|
<view>条码：{{dataList[0].code}}</view>
|
</view>
|
</view>
|
<view class="cardList" v-if="dataList && dataList.length>0">
|
<view class="card-i" v-for="(item,index) in dataList" :key="index">
|
<view class="card-i-l">
|
<span><u-icon name="clock-fill" color="#2979ff" size="18" style="margin-right: 4px"></u-icon>{{item.updateTime}}</span>
|
<view v-if="item.user">
|
<span></span>{{item.user.departName}}部门的<span style="font-weight: bold">{{item.user.name }}</span>进行了<span :class="item.num>=0?'green':'red'">{{item.state==0?'入库':item.state==1?'取用':item.state==2?'归还':item.state==3?'标签作废':item.state==4?'用尽登记':item.state==5?'销售':'--'}}</span>
|
</view>
|
</view>
|
<view v-if="item.hazmatBasic" class="card-i-r" :class="item.num>=0?'green':'red'">
|
<span v-if="item.num > 0">+</span>{{item.num + item.hazmatBasic.unit}}
|
</view>
|
<view v-if="item.productBasic" class="card-i-r" :class="item.num>=0?'green':'red'">
|
<span v-if="item.num > 0">+</span>{{item.num + item.productBasic.unit}}
|
</view>
|
</view>
|
</view>
|
<view v-else style="margin-top: 200rpx">
|
<u-empty
|
mode="list"
|
text="通过条码搜索记录"
|
>
|
</u-empty>
|
</view>
|
</view>
|
<tabBar :currentPagePath="page"></tabBar>
|
</view>
|
</template>
|
|
<script>
|
import tabBar from '../tabBarIndex.vue'
|
import {getHazmatFlowByCode} from '../../../api/index.js'
|
import tebBar from '../tabBarIndex.vue'
|
import VUE_APP_BASE_URL from "../../../common/constant";
|
export default {
|
components:{
|
tabBar
|
},
|
data() {
|
return {
|
page: 'pages/tabBar/current/current',
|
statusBarHeight: 0,
|
searchContent: '',
|
dataList: []
|
}
|
},
|
onLoad() {
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
},
|
onShow() {
|
// this.role = uni.getStorageSync('roleName');
|
},
|
created(){
|
uni.hideTabBar()
|
},
|
methods: {
|
scanCode(){
|
const t = this
|
uni.scanCode({
|
autoZoom: false,
|
success: function (res) {
|
if(res && res.result){
|
t.searchContent = res.result
|
getHazmatFlowByCode({code: res.result}).then(re => {
|
if(re.code == 200) {
|
t.dataList = re.data?re.data: []
|
}else{
|
uni.$u.toast(re.message)
|
}
|
})
|
}else{
|
uni.showToast({
|
title: '该二维码已失效或不包含条码信息',
|
duration: 2000
|
})
|
}
|
}
|
})
|
},
|
|
getList(){
|
const t = this
|
if(t.searchContent == ''){
|
uni.$u.toast('请输入二维码编号')
|
}else{
|
getHazmatFlowByCode({code: t.searchContent}).then(re => {
|
if(re.code == 200) {
|
t.dataList = re.data?re.data: []
|
}else{
|
uni.$u.toast(re.message)
|
}
|
})
|
}
|
},
|
|
toStudy(item) {
|
uni.setStorageSync("prevPage", '/pages/tabBar/current/current');
|
uni.navigateTo({
|
url: `/pages/tabBar/current/detail?bank=` + encodeURIComponent(JSON.stringify(item))
|
})
|
},
|
}
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.navBarBox .navBar {
|
background-color:#fff;
|
height: 50px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
|
}
|
.fix{
|
position: sticky;
|
top: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
z-index: 1;
|
}
|
.statusBar{
|
background-color:lightgrey;
|
}
|
.barText{
|
/* text-align: center; */
|
font-size: 16px;
|
font-weight: 600;
|
flex: 2;
|
text-align: center;
|
}
|
|
.u-input{
|
border-color: #f5f5f5 !important;
|
border-radius: 99px;
|
background: #f5f5f5;
|
|
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
|
transition: box-shadow .1s ease !important;
|
}
|
.searchBtn{
|
border: 1px solid #fff;
|
padding: 0 30rpx;
|
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15)!important;
|
}
|
.m-p-15{
|
width: 100%;
|
padding: 0 15px;
|
margin-top: 20px;
|
box-sizing: border-box;
|
|
.productCard{
|
width: 100%;
|
background: #fff;
|
border-radius: 20px;
|
padding: 15px;
|
margin: 15px auto;
|
box-sizing: border-box;
|
box-shadow: 4px 4px 12px rgba(150,150,150,.05);
|
|
&>view>view{
|
width: 100%;
|
font-size: 28rpx;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
|
span{
|
color: #2979ff;
|
}
|
|
&:last-of-type{
|
margin-bottom: 0;
|
}
|
}
|
}
|
|
.cardList{
|
width: 100%;
|
box-sizing: border-box;
|
margin-top: 15px;
|
box-shadow: 4px 4px 12px rgba(150,150,150,.05);
|
|
.card-i{
|
width: 100%;
|
background: #fff;
|
border-radius: 12px;
|
padding: 20px 15px;
|
margin: 0 auto;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1px dashed #ccc;
|
|
&:first-of-type{
|
border-radius: 20px 20px 12px 12px;
|
}
|
|
&:last-of-type{
|
margin-bottom: 0;
|
border-bottom: none;
|
border-radius: 12px 12px 20px 20px;
|
}
|
|
.card-i-l{
|
height: 100%;
|
width: 75%;
|
flex-direction: column;
|
align-items: flex-end;
|
justify-content: space-between;
|
&>span{
|
display: flex;
|
align-items: center;
|
font-size: 30rpx;
|
font-weight: bold;
|
margin-bottom: 15rpx;
|
}
|
|
&>view{
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
span{
|
&:first-of-type{
|
display: inline-block;
|
width: 22px;
|
}
|
}
|
}
|
}
|
.card-i-r{
|
height: 100%;
|
width: 25%;
|
text-align: right;
|
font-size: 32rpx;
|
font-weight: bolder;
|
}
|
.green{
|
color: #5fb734;
|
}
|
.red{
|
color: #ed6464
|
}
|
}
|
}
|
}
|
|
</style>
|
