123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351 |
- <template>
- <view class="p-content">
- <view class="p-head" v-if="baseData">
- <view>
- <view>
- <text>销售单号:</text>
- <text style="color: crimson;">{{baseData.salesBillNo}}</text>
- </view>
- <view>
- <button :disabled="loading" size="mini" style="padding:0 10px;height: 28px;line-height: 28px;" type="primary" @click="submitForm"> 出库 <text class="iconfont icon-icon-test43"></text></button>
- </view>
- </view>
- <view>
- <view>
- <view>条形码:</view>
- <view>
- <input
- @change="curProductIndex = 0"
- style="width: 190px;text-align: left;"
- class="uni-input"
- placeholder="扫描或输入条形码"
- border="surround"
- v-model="code">
- </view>
- </view>
- <view>
- <button size="mini" @click="resetForm" :style="{padding:'2px 5px',color:'#aa0000'}">重置</button>
- </view>
- </view>
- <view>
- <view>
- <view>产品编码:</view>
- <view>
- <input
- @change="curProductIndex = 0"
- style="width: 180px;text-align: left;"
- class="uni-input"
- placeholder="请输入产品编码"
- border="surround"
- v-model="productCode">
- </view>
- </view>
- <view>
- <button size="mini" @click="pickFun(true)" :style="{padding:'2px 5px',color:'#00aaff'}">查询</button>
- </view>
- </view>
- <view style="justify-content: flex-start;flex-wrap: wrap;">
- <view>已拣款数: <text style="color: red;">{{baseData.pickCategory}}</text>/{{baseData.totalCategory}}</view>
- <view>已拣数量: <text style="color: red;">{{baseData.pickQty}}</text>/{{baseData.totalQty}}</view>
- </view>
- </view>
- <view class="p-body">
- <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scrollView">
- <uni-table style="width: 100%;" border emptyText="暂无数据" :loading="loading1" >
- <!-- 表头行 -->
- <uni-tr>
- <uni-td align="center">产品编码</uni-td>
- <uni-td align="center">产品分类</uni-td>
- <uni-td align="center">已拣/总数</uni-td>
- <uni-td align="center">拣货</uni-td>
- </uni-tr>
- <!-- 表格数据行 -->
- <uni-tr
- v-for="item in detailList"
- :key="item.id"
- @click="selRow(item)"
- :checkedRow="hasCheck(item)">
- <uni-td width="30%" align="center">
- <view>{{item.dealerProductEntity.code}}</view>
- </uni-td>
- <uni-td width="30%" align="center">{{item.dealerProductEntity.productTypeName3}}</uni-td>
- <uni-td width="25%" align="center"><text style="color: red;">{{item.pickQty||0}}</text>/{{item.qty}}</uni-td>
- <uni-td width="15%" align="center">
- <view style="display: flex;justify-content: center;">
- <u-icon v-if="item.pickFlag==0" name="close-circle-fill" color="red" size="22"></u-icon>
- <u-icon v-if="item.pickFlag==1" name="checkmark-circle-fill" color="green" size="22"></u-icon>
- <u-icon v-if="item.pickFlag==2" name="info-circle-fill" color="#ffaa00" size="22"></u-icon>
- </view>
- </uni-td>
- </uni-tr>
- </uni-table>
- </scroll-view>
- </view>
- <view class="p-footer">
- <button :disabled="loading" size="mini" type="warn" @click="pickFun(false)"> <text class="iconfont icon-reduce-btn"> 减 </text></button>
- <button :disabled="loading" size="mini" type="primary" @click="pickFun(true)"> <text class="iconfont icon-add-btn"> 加 </text></button>
- </view>
- <scanCode></scanCode>
- <u-modal :show="showModal" :title="msg.title" :confirmText="msg.confirmText" showCancelButton :content='msg.content' @cancel="showModal=false" @confirm="confirmModal"></u-modal>
- </view>
- </template>
- <script>
- import scanCode from '@/libs/scan-code.vue';
- import { salesDetail, salesDetailList, salesPick, salesWriteStockOut, salesWriteNoStockOut } from '@/config/api.js'
- import { playAudio } from '@/libs/tools.js'
- import clipboard from "@/js_sdk/dc-clipboard/clipboard.js"
- export default {
- components: { scanCode },
- data() {
- return {
- loading: false,
- loading1: false,
- baseData: null,
- showModal: false,
- msg:{title:'提示',content:''},
- detailList:[],
- code:'',
- productCode: '',
- salesBillSn: null,
- salesId: null,
- curProductIndex: 0,
- curProductArr: [],
- scrollTop: 0
- };
- },
- onLoad(opts) {
- var _this = this
- this.salesBillSn = opts.salesBillSn
- this.salesId = opts.id
- this.getDetail()
- this.getDetailList()
-
- uni.$on('scancodedate', function(content) {
- console.log("扫描到的内容为:", content)
- _this.code = content||''
- _this.curProductIndex = 0
- _this.pickFun(true)
- })
- },
- onShow() {
- this.hideKeyborder()
- },
- onUnload() {
- uni.$off('scancodedate')
- },
- methods: {
- // 复制
- copyText(text){
- clipboard.setText(text);
- uni.showToast({
- icon: 'none',
- title: '编码已复制成功'
- })
- },
- hideKeyborder(){
- uni.hideKeyboard()
- },
- hasCheck(item){
- const curProduct = this.curProductArr[this.curProductIndex]
- return curProduct&&(item.dealerProductEntity.code == curProduct.dealerProductEntity.code)
- },
- getCurProduct(flag){
- const curProduct = this.detailList.filter(item => item.dealerProductEntity.qrCode == this.code || item.dealerProductEntity.code == this.productCode)
- this.curProductArr = curProduct || []
- // 滚动到指定位置
- if(this.curProductArr.length&&!flag){
- const cur = this.curProductArr[0]
- this.scrollToRow(cur)
- }
- },
- // 选择行
- selRow(item){
- this.code = item.dealerProductEntity&&item.dealerProductEntity.qrCode||''
- this.productCode = item.dealerProductEntity&&item.dealerProductEntity.code||''
- this.getCurProduct(true)
- const idx = this.curProductArr.findIndex(k => k.id == item.id)
- this.curProductIndex = idx || 0
- },
- pickFun(flag){
- this.getCurProduct()
- this.addQty(flag)
- },
- resetForm(){
- this.curProductIndex = 0
- this.code = ''
- this.productCode = ''
- this.curProductArr = []
- this.scrollTop = 0
- },
- // 滚动到指定行
- scrollToRow(cur){
- const idx = this.detailList.findIndex(item => item.id == cur.id)
- this.scrollTop = idx * 30
- },
- addQty(flag){
- console.log(this.curProductArr, this.curProductIndex)
- const curProduct = this.curProductArr[this.curProductIndex]
- // console.log(curProduct)
- if(curProduct){
- this.loading = true
- // 加
- if(flag){
- // 如果不是拣货完成
- if(curProduct.pickFlag != 1){
- this.queryProduct((curProduct.pickQty||0)+1,curProduct)
- }else{
- // 当前商品拣货完,判断是否有其它仓库同样商品
- // 切换到下一个商品
- if(this.curProductIndex<this.curProductArr.length-1){
- this.curProductIndex = this.curProductIndex + 1
- this.pickFun(flag)
- }else{
- this.loading = false
- uni.$u.toast("此商品已全部拣货")
- playAudio('warn')
- }
- }
- }else{
- // 减
- // 如果状态不是未拣货
- if(curProduct.pickFlag != 0){
- this.queryProduct((curProduct.pickQty||0)-1,curProduct)
- }else{
- // 判断是否有它仓库同样商品
- // 切换到上一个商品
- if(this.curProductIndex){
- this.curProductIndex = this.curProductIndex - 1
- this.pickFun(flag)
- }else{
- this.loading = false
- uni.$u.toast("没有可以减的商品了")
- playAudio('warn')
- }
- }
- }
- }else{
- this.curProductIndex = 0
- if(this.code == '' && this.productCode == ''){
- uni.$u.toast("请扫描条形码或输入编码")
- playAudio('warn')
- }else{
- uni.$u.toast("此商品不存在")
- playAudio('error')
- }
- }
- },
- //拣货
- queryProduct(pickQty, curProduct){
- // console.log(curProduct)
- this.loading = true
- const params = {
- salesBillSn: this.salesBillSn,
- id: curProduct.id,
- pickQty: pickQty
- }
- // console.log(params)
- salesPick(params).then(res => {
- console.log(res)
- if(res.status == 200){
- if(res.data){
- this.getDetail()
- this.getDetailList()
- }else{
- uni.$u.toast("此商品不存在")
- playAudio('error')
- }
- }
- this.loading = false
- })
- },
- // 详情
- getDetail(){
- salesDetail({salesBillSn: this.salesBillSn}).then(res => {
- // console.log(res,'详情')
- if(res.status == 200){
- this.baseData = res.data
- }
- })
- },
- // 产品明细列表
- getDetailList(){
- this.loading1 = true
- salesDetailList({pageNo:1,pageSize:1000,salesBillSn:this.salesBillSn,orderBy: 'sales_bill_detail.CREATE_DATE desc'}).then(res => {
- if(res.status == 200){
- this.detailList = res.data.list
- this.getCurProduct()
- }
- this.loading1 = false
- })
- },
- confirmModal(e){
- this.toOut()
- },
- // 提交
- submitForm(){
- if(this.baseData.pickQty != this.baseData.totalQty){
- this.showModal = true
- this.msg = {
- title: '提示',
- content: '确定未完成拣货出库吗?',
- confirmText: '确定出库'
- }
- }else{
- this.toOut()
- }
- },
- // 出库
- async toOut(){
- const ret = await salesWriteStockOut({salesBillSn: this.salesBillSn})
- if(ret.status == 200){
- this.$store.state.vuex_isRefash = true
- uni.navigateBack()
- }
- }
- },
- }
- </script>
- <style lang="scss">
- .p-content{
- .p-head{
- font-size: 32upx;
- color: $uni-text-color;
- >view{
- display: flex;
- align-items: center;
- padding: 10upx 20upx;
- border-bottom: 1px solid #eee;
- justify-content: space-between;
- > view{
- display: flex;
- padding: 0 10upx;
- align-items: center;
- }
- }
- .uni-input{
- border: 1px solid #eee;
- width: 150upx;
- text-align: center;
- padding: 8upx;
- }
- }
- .p-body{
- flex-grow: 1;
- height: calc(100vh - 205px);
- .scrollView{
- height: 100%;
- }
- }
- .p-footer{
- padding: 20upx 30upx;
- display: flex;
- > button{
- width: 40%;
- height: 32px;
- line-height: 32px;
- }
- }
- }
- </style>
|