index.vue

<template>
    <view class="transfer">
        <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">
                    <text class="iconfont icon-juxing1"></text>
                    <input class="uni-input" placeholder="请扫描或输入号码" placeholder-style="color:#919399" :focus="is_focus" v-model="searchParams.transfer_sn" @input="handleInput" />
                </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.transfer_sn }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">状 态：</text>
                    <text class="t1">{{ item.transfer_status_val }}</text>
                </view>
                <view class="bor row"></view>
                <view class="text-item row verCenter">
                    <text class="label">任 务 数：</text>
                    <text class="tt">{{ item.task_num }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">总 数 量：</text>
                    <text class="tt">{{ item.trans_qty }}</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">创建时间：</text>
                    <text class="tt">{{ item.create_time }}</text>
                </view>
                <navigator class="btn-box row" :url="'/pages/transfer/task?transfer_id=' + item.transfer_id + '&transfer_sn=' + item.transfer_sn" hover-class="none">
                    <view class="btn row rowCenter verCenter">选择</view>
                </navigator>
            </view>
            <view class="row rowCenter verCenter" v-if="!hasMoreData && page > 1" style="color: #999;font-size: 16rpx;padding: 10px 0;flex: 0 0 100%;font-weight: normal;">--&nbsp;已经到底了&nbsp;--</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 { createArray } from '@/util/util.js';
    import debounce from 'lodash/debounce';

    export default {
        data() {
            return {
                is_focus: true, //获取焦点动态化
                input_flag: false,
                page: 1,
                limit: 30,
                hasMoreData: true, //是否分页加载
                index: 0,
                array: ['移位单号'],
                list: [],
                searchParams: {
                    transfer_sn: '' //移位单号
                }
            };
        },
        onReachBottom() {
            if (!this.hasMoreData) {
                return;
            }
            this.page++;
            this.getData();
        },
        onShow() {
            this.getData();
        },
        methods: {
            bindPickerChange: function(e) {
                console.log('picker发送选择改变，携带值为', e.detail.value);
                this.index = e.detail.value;
            },
            /**
             * 获取列表数据
             */
            getData() {
                this.request(API.getTransferList, 'GET', { 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'
                        });
                    }
                });
            },
            /**
             * 单号搜索
             * @param {Object} event
             */
            handleInput: debounce(function(event) {
                this.resetChange();
                var val = event.target.value;
                if (val) {
                    this.input_flag = true;
                } else {
                    this.input_flag = false;
                }
                this.getData();
            }, 500),
            /**
             * 筛选过滤出选中的元素
             */
            filterChange(index) {
                this.$set(this.filter_list, index, (this.filter_list[index] = !this.filter_list[index]));
                let filter_arr = this.findIndex(this.filter_list, true);
                this.filter_id = filter_arr.map(i => this.list[i].stock_in_id);
            },
            /**
             * 清空数据
             */
            clearInput() {
                this.resetChange();
                this.input_flag = false;
                this.searchParams.transfer_sn = '';
                this.clearInputAndFocus();
                this.getData();
            },
            /**
             * 重置
             */
            resetChange() {
                this.filter_id = []; //清空选中状态
                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/transfer/index.scss';
</style>