<template> <view class="stock-wrap"> <!-- 库存查询 --> <view class="stock-con" v-if="$hasPermissions('M_stockQuery_mobile')"> <u-form :model="form" ref="uForm" label-width="100"> <u-form-item label="条形码"><u-input v-model.trim="form.productQrCode" placeholder="请输入条形码" input-align="right" /></u-form-item> <u-form-item label="产品编码"><u-input v-model.trim="form.productCode" placeholder="请输入产品编码" input-align="right" /></u-form-item> <u-form-item label="产品名称"><u-input v-model.trim="form.productName" placeholder="请输入产品名称" input-align="right" /></u-form-item> </u-form> <view class="form-footer-btn"> <u-button size="medium" shape="circle" hover-class="none" @click="handleClean">清空</u-button> <u-button size="medium" hover-class="none" shape="circle" :loading="loading" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button> </view> </view> <view class="p-body" v-if="listData.length"> <uni-table border emptyText="暂无数据" :loading="loading" > <!-- 表头行 --> <uni-tr> <uni-td width="30%" align="center">产品编码</uni-td> <uni-td width="30%" align="center">库存</uni-td> <uni-td width="15%" align="center">冻结</uni-td> <uni-td width="25%" align="center">仓库/仓位</uni-td> </uni-tr> <!-- 表格数据行 --> <uni-tr v-for="item in listData" :key="item.productSn" @click="toDetail(item)"> <uni-td width="30%" align="center">{{item.productCode||'-'}}</uni-td> <uni-td width="30%" align="center">{{item.currentQty}}</uni-td> <uni-td width="15%" align="center">{{item.currentQty}}</uni-td> <uni-td width="25%" align="center">{{item.warehouseName}}/<view>{{item.warehouseLocationName}}</view></uni-td> </uni-tr> </uni-table> </view> <scanCode></scanCode> </view> </template> <script> import scanCode from '@/libs/scan-code.vue'; import { dealerProductTypeList , stockDetailList } from '@/config/api' import { toThousands } from '@/libs/tools' export default{ components: { scanCode }, data(){ return { form: { productCode: '', // 产品编码 productQrCode: '', // 条形码 productName: '', // 产品名称 enableFlag: true, zeroQtyFlag: false, minCurrentQty: 1 }, customBtnStyle: { // 自定义按钮样式 backgroundColor: '#335fb6', color: '#fff' }, listData: [], toThousands, loading: false } }, onLoad() { var _this = this uni.$on('scancodedate', function(content) { console.log("扫描到的内容为:", content) _this.form.productQrCode = content||'' if(content){ _this.form.productCode = '' _this.form.productName = '' _this.handleSearch() }else{ _this.$message("扫描失败,请重试!") } }) }, onUnload() { uni.$off('scancodedate') }, methods: { $message(msg){ uni.showToast({ icon: 'none', title: msg }) }, // 表单清空 handleClean(){ this.form.productCode = '' this.form.productQrCode = '' this.form.productName = '' this.listData = [] }, // 查询 handleSearch(){ if(this.form.productQrCode||this.form.productCode||this.form.productName){ let params = { minCurrentQty:1, dealerProduct: { "qrCode": this.form.productQrCode, "code": this.form.productCode, "name": this.form.productName }, pageNo: 1, pageSize: 100 } console.log(params) this.loading = true stockDetailList(params).then(res => { console.log(res) if(res.status == 200){ this.listData = res.data.list }else{ this.listData = [] this.$message(res.message) } this.loading = false }) }else{ this.$message("请输入查询条件") } }, toDetail(item){ this.$store.state.vuex_tempData = item uni.navigateTo({ url: "/pages/stock/stockDetail" }) } } } </script> <style lang="scss"> page{ background: #f8f8f8; } .stock-wrap{ .stock-con{ background-color: #ffffff; padding: 20upx; border-radius: 20upx; .stock-tit{ font-weight: bold; .u-line{ display: inline-block; width: 6upx; height: 30upx; vertical-align: bottom; margin: 0 10upx; border-radius: 5upx; } border-bottom: 1px solid #eee; } .form-footer-btn{ margin: 30upx; display: flex; justify-content: space-between; } .form-footer-btn uni-button{ width: 40%; margin: 0 auto; font-size: 30upx; } } .p-body{ background-color: #ffffff; padding: 10upx 20upx; border-radius: 20upx; margin-top: 20upx; } } </style>