hazardousWaste_app/pages/components/SearchList.vue

<template>
    <!-- 我的入库单/我的出库单/入库单入库/出库单出库-->
    <navigation :title="title" back-url="pages/warehousing/index"></navigation>

    <view class="content">
        <!-- 搜索框 -->
        <view class="topSearch">
            <uni-easyinput type="text" v-model="queryParams.keyword" prefixIcon="search" :input-border="false"
                @icon-click="getList" placeholder="请输入搜索内容" />
        </view>

        <!-- 列表 -->
        <z-paging ref="pagingRef" class="containerBox" v-model="list" @query="getList">
            <uni-list class="listBox">
                <uni-list-item v-for="item in list" :key="item.id" clickable @click="onDetail(item)">
                    <template v-slot:body>
                        <view style="display: flex; flex-direction: column; width: 100%;">
                            <view class="line title">
                                <p> {{ typeName }}编号：{{ item.billNo }}</p>
                                <span :style="getColor(item?.billType)">
                                    {{ getBillType(item?.billType, item?.status) }}
                                </span>
                            </view>
                            <p class="line content">{{ typeName }}类型：
                                <span>{{ getOrderType(item.status) }}</span>
                            </p>
                            <p class="line content">库位：
                                <span>{{ item.areaName }}</span>
                            </p>
                            <p class="line content">开单时间：
                                <span>{{ item.createTime }}</span>
                            </p>
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
        </z-paging>
    </view>
</template>

<script setup>
import _, { includes } from 'lodash';
import { computed, toRefs, ref } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import { stockList } from '../../api/stockIn';
import { getBillType, getColor } from '../until';
import Navigation from '../components/Navigation.vue';

const props = defineProps({
    // 查询列表类型 stockIn:我的入库单  stockIn-putAway：入库单入库  stockOut：我的出库单 stockOut-outbound出库单出库
    type: {
        type: String,
        default: '',
        required: true
    },
    // 查询条件
    query: {
        type: Object,
        default: {},
        required: true
    },
})

const { type, query } = toRefs(props)
const pagingRef = ref(null)
const list = ref([])

const typeName = computed(() => includes(type.value, 'stockIn') ? '入库单' : '出库单')
const title = computed(() => {
    if (type.value == 'stockIn') return '我的入库单'
    else if (type.value == 'stockIn-putAway') return '入库单入库'
    else if (type.value == 'stockOut') return '我的出库单'
    else return '出库单出库'
})
const getOrderType = () => {
    return includes(type.value, 'stockIn') ? '入库单入库' : '出库单出库'
}

const queryParams = ref({
    keyword: ''
})

onShow(() => {
    pagingRef.value?.reload?.()
})

const onDetail = (val) => {
    if (_.includes(type.value, 'stockIn')) {
        uni.navigateTo({
            url: `/pages/warehousing/stockIn/components/detail?billNo=${val.billNo}&type=${type.value}`,
        });
    }
}

const getList = (pageNo, pageSize) => {
    queryParams.value.pageNum = pageNo
    if (_.includes(type.value, 'stockIn')) {
        stockList({ ...queryParams.value, ...query.value }).then(res => {
            res.rows.forEach(e => {
                e.showMore = false;
            });
            pagingRef.value.complete(res.rows)
        }).catch(() => {
            pagingRef.value.complete(false)
        })
    }else{

    }
}
</script>

<style scoped lang="scss">
/* 搜索框：放在导航栏下面，不覆盖 */
.topSearch {
    position: fixed;
    top: var(--nav-height);
    /* 关键：自动在导航栏下方 */
    left: 0;
    right: 0;
    z-index: 99;
    /* 比导航栏小 */
    padding: 8rpx 16rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.containerBox {
    padding-top: 90px !important;
    /* 撑开：导航栏+搜索框高度 */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

::v-deep .listBox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #F8F8FF;

    .zp-l-text-rpx {
        font-size: 12px;
    }

    .uni-list {
        background-color: #F8F8FF;
    }

    .uni-list-item {
        margin-bottom: 4rpx;
    }

    .line {
        display: flex;
        align-items: center;
        padding: 12rpx 20rpx;
    }

    .title {
        justify-content: space-between;
        font-weight: 600;
        font-size: 13px;
    }

    .content {
        font-weight: 500;
        font-size: 13px;
        color: #696969;
    }
}
</style>