hazardousWaste_app/pages/components/ChooseList.vue

<!-- 仓库/存储区选择 -->
<template>
    <navigation :title="title" :back-url="backUrl"></navigation>

    <view class="contentBox">
        <view class="topSearch">
            <uni-easyinput type="text" v-model="queryParams.keyword" prefixIcon="search" :inputBorder="false"
                @iconClick="getList" placeholder="请输入搜索内容" />
        </view>

        <!-- 仓库/存储列表  -->
        <z-paging ref="pagingRef" class="containerBox" v-model="infoList" @query="getList">
            <uni-list class="listBox">
                <uni-list-item v-for="item in infoList" :key="item.id" clickable @tap="onChecked(item)">
                    <template v-slot:body>
                        <view style="display: flex; flex-direction: column;  width: 100%;" v-if="isWarehousing">
                            <view class="line title">
                                <p>仓库名称</p>
                                <p>{{ item.deptName }}</p>
                            </view>
                            <view class="line content">
                                <p>仓库编码</p>
                                <p>{{ item.deptId }}</p>
                            </view>
                            <!-- todo 以下两个字段pc未维护暂时注释 -->
                            <!-- <view class=" line content">
                                <p>仓库类型</p>
                                <p></p>
                            </view>
                            <view class="line content">
                                <p>仓库位置</p>
                                <p></p>
                            </view> -->
                            <view class="line content">
                                <p>备注</p>
                                <p>
                                    <text v-if="item?.remark"></text>
                                    <text v-else class="empty">未填写</text>
                                </p>
                            </view>

                        </view>
                        <view v-else style="display: flex; flex-direction: column;width: 100%;">
                            <view class="line title">
                                <p>{{ item.deptName }} （{{ item.deptId }}）</p>
                            </view>
                            <view class="line content">
                                <p>
                                    <text v-if="item?.remark">{{ item?.remark }}</text>
                                    <text v-else class="empty">未填写</text>
                                </p>
                            </view>
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
        </z-paging>
    </view>
</template>
<script setup>
import { ref, toRefs } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import { getWarehousingInfo } from '@/api/system';
import getRepository from "@/api/getRepository";
import { objectToQuery } from '../until';
import Navigation from '../components/Navigation.vue';
import { watch } from 'vue';
const OPERATE_CONFIG = {
    materialQuery: {
        toCheckUrl: '/pages/warehousing/Declaration/components/materialQueryDetail',
        title: '请选择物资查询仓库',
    },
    inventoryAgeView: {
        toCheckUrl: '/pages/warehousing/InventoryInfo/components/inventoryAgeDetail',
        title: '请选择物资库龄查询仓库'
    },
    dailyReport: {
        toCheckUrl: '/pages/warehousing/Report/components/dailyDetail',
        title: '请选择查看日报表的仓库'
    },
    monthlyReport: {
        toCheckUrl: '/pages/warehousing/Report/components/monthlyDetail',
        title: '请选择查看月报表的仓库'
    },
    warehouseReport: {
        toCheckUrl: '/pages/warehousing/Report/components/warehouseDetail',
        title: '请选择查看库存的仓库'
    },

}
const props = defineProps({
    // 是否为仓库查询
    isWarehousing: {
        type: Boolean,
        default: true,
        required: true
    },
    pathParams: {
        type: Object,
        default: null,
        required: false
    }

})
const { isWarehousing, pathParams } = toRefs(props)
// 数据：查询关键字
const queryParams = ref({
    keyword: ''
})
const title = ref('')
const backUrl = ref('')
// 绑定：加载屏
const pagingRef = ref(null)
// 数据：仓库/存储区
const infoList = ref([])

// 列表判断：获取仓库列表/存储库列表
const getList = () => {
    if (isWarehousing.value) {
        // 仓库列表
        getWarehousing()
    } else {
        // 存储库列表
        getRepositoryInfo()
    }
}

// 列表：仓库列表
const getWarehousing = () => {
    const userInfo = uni.getStorageSync('app_user')
    const params = {
        userId: `${userInfo.userId}`,
        keyword: queryParams.value.keyword
    }
    getWarehousingInfo(params).then(res => {
        res.data.forEach(e => {
            e.showMore = false;
        });
        infoList.value = res.data
        pagingRef.value.complete(res.data)
    }).catch(res => {
        pagingRef.value.complete(false)
    })
}
// 列表：存储区列表
const getRepositoryInfo = async () => {
    getRepository({ pageNum: 1, pageSize: 10 }).then(res => {
        res.data.forEach(e => {
            e.showMore = false;
        });
        infoList.value = res.data
        pagingRef.value.complete(res.data)
    }).catch(res => {
        pagingRef.value.complete(false)
    })
}

// 返回路径
const toBack = (keyType) => {
    console.log('监听', keyType);
    let url = ''
    let query = objectToQuery(pathParams.value)
    switch (keyType) {
        case 'stockIn':
            // 入库单开单
            url = '/pages/warehousing/stockIn/create'

            break;
        case 'stockOut':
            // 出库单开单
            url = '/pages/warehousing/stockOut/create'
            break;
        case 'stockOut-outbound':
            // 出库单出库
            url = '/pages/warehousing/stockOut/components/outAway'
            break;
        case 'my':
            // 出库单出库
            url = '/pages/warehousing/stockIn/create'
            break;
        case 'materialQuery':
            // 物资查询
            url = 'pages/warehousing/index'
            query = ''
            break;
        case 'inventoryAgeView':
            // 库龄
            url = 'pages/warehousing/index'
            query = ''
            break;
        case 'dailyReport':
            // 日报
            query = ''
            url = 'pages/warehousing/index'
            break;
        case 'monthlyReport':
            // 月报
            query = ''
            url = 'pages/warehousing/index'
            break;
        default:
            url = 'pages/warehousing/index';
            query = '';
            break;
    }
    backUrl.value = query ? `${url}${query}` : url

}
// 选择：仓库/存储区
const onChecked = (val) => {
    const toUrl = OPERATE_CONFIG?.[pathParams.value?.type]?.toCheckUrl;
    let params = val.materialId ? { warehouseCode: val.deptId, materialId: val.materialId } : { warehouseCode: val.deptId }
    if (pathParams.value.type === 'warehouseReport') {
        params.title = val.deptName
    }
    const query = objectToQuery(params);
    if (toUrl) {
        uni.navigateTo({ url: toUrl + query });
        return;
    }

    const flag = isWarehousing.value ? "app_warehousing" : "app_storageArea";
    let infoChecked = uni.getStorageSync(flag) || [];
    if (!Array.isArray(infoChecked)) infoChecked = [];
    if (val) {
        infoChecked = [{ ...val }];
        uni.setStorageSync(flag, infoChecked);
    }
    uni.navigateTo({ url: backUrl.value });
};
watch(
    () => pathParams.value,
    (d) => {
        if (!d) return;
        const type = d.type || d.back;
        const titleStr = OPERATE_CONFIG?.[d.type]?.title;
        if (titleStr) {
            title.value = titleStr;
        } else {
            title.value = isWarehousing.value ? "仓库选择" : "存储区选择";
        }
        toBack(type);
    },
    { deep: true, immediate: true }
);
onShow(() => {
    pagingRef.value?.reload?.()
})

</script>
<style scoped lang="scss">
.topSearch {
    position: fixed;
    top: 65rpx;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 4rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.containerBox {
    padding-top: 120rpx !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

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

::v-deep.listBox {
    background-color: #F8F8FF;

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

    .uni-list-item__container {
        padding: 0;
    }

    .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 12rpx;
    }

    .title {
        font-weight: 600;
        font-size: 14px;
    }

    .content {
        font-weight: 500;
        font-size: 13px;
    }

    .empty {
        color: #D3D3D3;
    }
}
</style>