me.vue

<template>
    <view class="picking-me">
        <!-- 搜索部分 -->
        <view class="search-box row bothSide verCenter">
            <view class="sn row rowCenter verCenter">
                <picker @change="bindPickerChange" :value="index" :range="array">
                    <view class="row verCenter">
                        <view class="uni-input">{{ array[index] }}</view>
                        <view class="uni-arrow"></view>
                    </view>
                </picker>
            </view>
            <view class="search-bar row bothSide verCenter">
                <view class="row verCenter" style="width: 90%;">
                    <text class="iconfont icon-juxing1"></text>
                    <template v-if="index == 0">
                        <input class="uni-input" placeholder="请扫描或输入号码" placeholder-style="color:#919399" v-model="searchParams.stock_out_sn" @input="handleInput" :focus="is_focus" style="width: 100%;" />
                    </template>
                    <template v-else-if="index == 1">
                        <input class="uni-input" placeholder="请输入关键词" placeholder-style="color:#919399" :focus="is_focus" @input="handleInput($event)" v-model="searchParams.search_keyword" style="width: 100%;" />
                    </template>
                </view>
                <text class="iconfont icon-a-juxing11" @click="clearInput()" v-if="input_flag"></text>
            </view>
        </view>
        <!-- 列表 -->
        <view class="list row bothSide" v-if="list.length > 0">
            <view class="box" v-for="(item, index) in list" :key="index">
                <view class="text-item row verCenter">
                    <text class="label">出库单号：</text>
                    <text class="t1">{{ item.stock_out_sn }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">状 态：</text>
                    <text class="t1">{{ item.stock_out_status_val }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label" style="white-space: nowrap;width:100rpx;">待拣货任务：</text>
                    <text class="t1">{{ item.no_pick_task_num }}</text>
                </view>
                <view class="bor row"></view>
                <view class="text-item row verCenter">
                    <text class="label">任 务 数：</text>
                    <text class="tt">{{ item.items_num }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">总 数 量：</text>
                    <text class="tt">{{ item.total_qty }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label" style="white-space: nowrap;width: 110rpx;">主单仓库备注：</text>
                    <text class="tt" style="color: #f00;">{{ item.upstream_remark }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">领取时间：</text>
                    <text class="tt">{{ item.take_time }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">销售员：</text>
                    <text class="tt">{{ item.sale_name }}</text>
                </view>
                <view class="btn-box row verCenter">
                    <!-- 出库单状态为全部锁库，则显示【释放】、【选择】按钮 -->
                    <template v-if="item.stock_out_status == 3">
                        <view class="btn1 row rowCenter verCenter" @click="cancelTake(item.stock_out_id)">释放</view>
                        <navigator :url="'/pages/picking/sort?stock_out_id=' + item.stock_out_id + '&stock_out_sn=' + item.stock_out_sn+'&warehouse_id='+item.warehouse_id" hover-class="none" class="btn3 row rowCenter verCenter">选择</navigator>
                    </template>

                    <!--出库单状态为部分拣货-->
                    <template v-if="item.stock_out_status == 4">
                        <navigator :url="'/pages/picking/sort?stock_out_id=' + item.stock_out_id + '&stock_out_sn=' + item.stock_out_sn+'&warehouse_id='+item.warehouse_id" hover-class="none" class="btn3 row rowCenter verCenter">选择</navigator>
                    </template>

                    <!--出库单状态为全部拣货-->
                    <template v-if="item.stock_out_status == 5 || item.stock_out_status == 8 || item.stock_out_status == 6 || item.stock_out_status == 7">
                        <navigator :url="'/pages/picking/record?stock_out_sn=' + item.stock_out_sn" hover-class="none" class="btn2 row rowCenter verCenter">详情</navigator>
                    </template>
                </view>
            </view>
        </view>
        <!-- 无数据展示 -->
        <view class="no-date column rowCenter verCenter" v-else>
            <text class="iconfont icon-a-juxing21"></text>
            <text class="text">查不到当前数据</text>
        </view>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    import debounce from 'lodash/debounce';
    export default {
        data() {
            return {
                is_focus: true, //获取焦点动态化
                input_flag: false,
                index: 0,
                array: ['出库单号', '全量搜索'],
                list: [],
                page: 1,
                limit: 100,
                hasMoreData: true, //是否分页加载
                searchParams: {
                    search_mod: 0,
                    search_keyword: '',
                    stock_out_sn: '' //出库单号
                }
            };
        },
        onNavigationBarButtonTap(e) {
            if (e.index == 0) {
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            }
        },
        onReachBottom() {
            if (!this.hasMoreData) {
                return;
            }
            this.page++;
            this.getData();
        },
        onShow() {
            this.resetChange();
            this.getData();
        },
        methods: {
            bindPickerChange: function(e) {
                console.log('picker发送选择改变，携带值为', e.detail.value);
                this.index = e.detail.value;
            },
            /**
             * 清空数据
             */
            clearInput() {
                this.input_flag = false;
                this.resetChange();
                this.resetSearchParams();
                this.clearInputAndFocus(); //再次获取焦点
                this.getData();
            },
            /**
             * 单号搜索
             * @param {Object} event
             */
            handleInput: debounce(function(event) {
                // 重置搜索参数
                this.resetSearchParams();
                this.resetChange();
                var val = event.target.value;
                this.searchParams.stock_out_sn = '';
                if (val) {
                    this.input_flag = true;
                    // 根据当前选择的模式进行赋值
                    if (this.index == 0) {
                        this.searchParams.stock_out_sn = val;
                    } else if (this.index == 1) {
                        this.searchParams.search_mod = 1;
                        this.searchParams.search_keyword = val;
                    }
                } else {
                    this.input_flag = false;
                }
                this.getData();
            }, 500),
            /**
             * 释放已领取拣货单
             */
            cancelTake(stock_out_id) {
                this.request(API.cancelTake, 'POST', { stock_out_id: stock_out_id }, true).then(res => {
                    if (res.code === 0) {
                        uni.showToast({
                            title: '释放成功',
                            icon: 'success'
                        });
                        setTimeout(() => {
                            this.resetChange();
                            this.clearInputAndFocus();
                            this.getData();
                        }, 2000);
                    } else {
                        uni.showModal({
                            itle: '提示',
                            content: res.msg,
                            showCancel: false
                        });
                    }
                });
            },
            /**
             * 获取列表数据
             */
            getData() {
                this.request(API.getTakedList, 'POST', { page: this.page, limit: this.limit, ...this.searchParams }, false).then(res => {
                    if (res.code === 0) {
                        if (res.data.list.length > 0) {
                            this.hasMoreData = true;
                            this.list = this.list.concat(res.data.list);
                        } else {
                            this.hasMoreData = false;
                        }
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'error'
                        });
                    }
                });
            },
            /**
             * 重置参数
             */
            resetSearchParams() {
                this.searchParams.search_mod = 0;
                this.searchParams.stock_out_sn = '';
                this.searchParams.search_keyword = '';
            },
            /**
             * 重置
             */
            resetChange() {
                this.list = [];
                this.page = 1;
            },
            /**
             * 再次获取焦点
             */
            clearInputAndFocus() {
                this.input_flag = false; //关闭叉叉
                this.is_focus = false;
                setTimeout(() => {
                    this.is_focus = true;
                }, 200);
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/picking/me.scss';
</style>