报表申报智能运输页面完成

pages/warehousing/Declaration/components/materialQueryDetail.vue

@@ -0,0 +1,170 @@
+<template>
+    <navigation title="物料库存查询" back-url="/pages/warehousing/Declaration/materialQuery" />
+
+    <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="getDetailInfo">
+            <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%;">
+                            <view class="line title">
+                                <p>{{ item.materialName }} - {{ item.materialCode }}</p>
+                            </view>
+                            <view class="line content" style="color: #F44336;">
+                                <p>库存量</p>
+                                <p>{{ item.stockQty }}{{ item.unitName }}</p>
+                            </view>
+                            <view class="line content">
+                                <p>所在仓库</p>
+                                <p>{{ item.warehouseName }} - {{ item.areaName }}</p>
+                            </view>
+                            <view class="line content">
+                                <p>物料类别</p>
+                                <p>{{ item.typeName }}</p>
+                            </view>
+                            <view class="line content">
+                                <p>物料规格</p>
+                                <p>{{ item.specification }}</p>
+                            </view>
+                            <view class="line content">
+                                <p>物料型号</p>
+                                <p> <text v-if="item?.model">{{ item?.model }}</text>
+                                    <text v-else class="empty">未填写</text>
+                                </p>
+                            </view>
+                            <view class="line content">
+                                <p>物料说明</p>
+                                <p>
+                                    <text v-if="item?.materialDesc">{{ item?.materialDesc }}</text>
+                                    <text v-else class="empty">未填写</text>
+                                </p>
+                            </view>
+
+                        </view>
+                    </template>
+                </uni-list-item>
+            </uni-list>
+        </z-paging>
+    </view>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { onShow, onLoad } from "@dcloudio/uni-app";
+import { stockList } from '@/api/declaration';
+import Navigation from '../../../components/Navigation.vue';
+import { objectToQuery } from '../../../until';
+
+const pathParams = ref('')
+const queryParams = ref({
+    keyword: ''
+})
+const pagingRef = ref(null)
+const infoList = ref([])
+
+onLoad((options) => {
+    pathParams.value = options;
+})
+
+const getDetailInfo = () => {
+    const val = pathParams.value.warehouseCode
+    const params = {
+        warehouseCode: val,
+        keyword: queryParams.value.keyword
+    }
+    stockList(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 onChecked = (val) => {
+    const query = objectToQuery({ ...pathParams.value, materialId: val.materialId })
+    console.log(query);
+
+    uni.navigateTo({
+        url: `/pages/warehousing/InventoryInfo/components/inventoryAgeDetail${query}`
+    })
+}
+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;
+    }
+
+    .title::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 4rpx;
+        height: 45rpx;
+        background: #08a089;
+    }
+
+    .content {
+        font-weight: 500;
+        font-size: 13px;
+    }
+
+    .empty {
+        color: #D3D3D3;
+    }
+}
+</style>