From 27f7ebbd8083f1103026808050eb5d1699a3ec26 Mon Sep 17 00:00:00 2001
From: jjLv <1981429112@qq.com>
Date: Wed, 20 Nov 2024 14:56:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E8=B4=AD=E5=85=A5=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/new-purchase/entry/details.vue | 251 ++++++++++++++++++++
 src/pages/new-purchase/entry/index.vue   | 290 ++++++++++++++++-------
 src/services/purchase.js                 |  13 +-
 3 files changed, 463 insertions(+), 91 deletions(-)
 create mode 100644 src/pages/new-purchase/entry/details.vue

diff --git a/src/pages/new-purchase/entry/details.vue b/src/pages/new-purchase/entry/details.vue
new file mode 100644
index 0000000..8428422
--- /dev/null
+++ b/src/pages/new-purchase/entry/details.vue
@@ -0,0 +1,251 @@
+<template>
+    <!-- 领料入库详情 -->
+    <view class="page-container">
+        <uni-row :gutter="24" class="search-form">
+            <uni-col :span="12">
+                <view>
+                    <uni-easyinput placeholder="请输入内容" />
+                </view>
+            </uni-col>
+            <uni-col :span="4">
+                <view class="search">查询</view>
+            </uni-col>
+        </uni-row>
+
+        <scroll-view scroll-y class="scroll-container">
+            <view
+                v-for="(item, index) in detailsList"
+                :key="index"
+                class="table-list-item"
+                @tap="onCodingItem(item)"
+            >
+                <view class="line"></view>
+                <uni-row :gutter="24">
+                    <uni-col :span="2">{{ index + 1 }}</uni-col>
+                    <uni-col :span="6">物资名称：</uni-col>
+                    <uni-col :span="16">
+                        <view class="cont">{{ item.maTypeName }}</view>
+                    </uni-col>
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
+                    <uni-col :span="6">规格型号：</uni-col>
+                    <uni-col :span="16">
+                        <view class="cont">{{ item.typeName }}</view>
+                    </uni-col>
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
+                    <uni-col :span="6">预领数量：</uni-col>
+                    <uni-col :span="16">
+                        <view class="cont">{{ item.preNum }}</view>
+                    </uni-col>
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
+                    <uni-col :span="6">已领数量：</uni-col>
+                    <uni-col :span="16">
+                        <view class="cont">{{ item.alNum }}</view>
+                    </uni-col>
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
+                    <uni-col :span="6">待领数量：</uni-col>
+                    <uni-col :span="16">
+                        <view class="cont">{{ item.preNum - item.alNum }}</view>
+                    </uni-col>
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
+                    <uni-col :span="6">单位：</uni-col>
+                    <uni-col :span="16">
+                        <view class="cont">{{ item.unitName }}</view>
+                    </uni-col>
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
+                    <uni-col :span="6">管理模式：</uni-col>
+                    <uni-col :span="16">
+                        <uni-tag
+                            text="编码"
+                            type="warning"
+                            v-if="item.manageType === 0"
+                            size="small"
+                        />
+                        <uni-tag
+                            text="数量"
+                            type="success"
+                            v-if="item.manageType === 1"
+                            size="small"
+                        />
+                    </uni-col>
+                </uni-row>
+                <uni-row :gutter="24">
+                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
+                    <uni-col :span="6">状态：</uni-col>
+                    <uni-col :span="16">
+                        <uni-tag
+                            text="未完成"
+                            type="warning"
+                            size="small"
+                            v-if="item.status == 0 || item.status == 1"
+                        />
+                        <uni-tag
+                            text="已完成"
+                            type="success"
+                            size="small"
+                            v-if="item.status == 2"
+                        />
+                    </uni-col>
+                </uni-row>
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script setup>
+import { ref, onUnmounted } from 'vue'
+import { getOutboundDetailsAPI } from '@/services/picking/outbound.js'
+import { onLoad } from '@dcloudio/uni-app'
+const detailsList = ref([])
+const query = defineProps() // 获取上级页面传递的路由参数
+
+// 领料单位，参数等信息
+const leaseApplyInfo = ref({
+    leaseUnit: '', //       领料单位
+    leaseProject: '', //    领料工程
+    maTypeName: '', //      物资类型
+    typeName: '', //        规格型号
+    unitName: '', //        单位
+    storageNum: '', //      库存数量
+    preNum: '', //          预领数量
+    parentId: query.id, //  出库时所需参数 取列表 id
+    id: '', //              出库时所需参数 取详情接口 id
+    typeId: '', //          出库时所需参数 取详情接口 typeId
+    manageType: '', //      出库时所需参数 取详情接口 manageType
+})
+
+// 获取列表详情
+const getOutboundDetailsData = async () => {
+    console.log('query.id',query.id)
+    const { data: res } = await getOutboundDetailsAPI(query.id)
+    detailsList.value = res.leaseApplyDetailsList
+    leaseApplyInfo.value.leaseUnit = res.leaseApplyInfo.leaseUnit
+    leaseApplyInfo.value.leaseProject = res.leaseApplyInfo.leaseProject
+    // console.log('详情数据', res)
+}
+
+// 点击跳转出库页面
+const onCodingItem = (item) => {
+    // 解构所需要的数据
+    const {
+        status,
+        manageType,
+        maTypeName,
+        typeName,
+        storageNum,
+        preNum,
+        alNum,
+        unitName,
+        id,
+        typeId,
+    } = item
+
+    leaseApplyInfo.value.maTypeName = maTypeName
+    leaseApplyInfo.value.typeName = typeName
+    leaseApplyInfo.value.unitName = unitName
+    leaseApplyInfo.value.storageNum = storageNum
+    leaseApplyInfo.value.preNum = preNum
+    leaseApplyInfo.value.alNum = alNum
+    leaseApplyInfo.value.id = id
+    leaseApplyInfo.value.typeId = typeId
+    leaseApplyInfo.value.manageType = manageType
+
+    if (status == 2) {
+        uni.showToast({ title: '该物资已完成出库！', icon: 'none' })
+        return
+    }
+    let codingUrl = ''
+    if (manageType === 0) {
+        codingUrl = '/pages/picking/outbound/code-outbound' // 编码出库
+    }
+    if (manageType == 1) {
+        codingUrl = '/pages/picking/outbound/num-outbound' // 数量出库
+    }
+
+    // 把 leaseApplyInfo 领料信息转成 json 传递到下个页面
+    uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(leaseApplyInfo.value)}` })
+}
+
+// 页面加载完毕
+onLoad(() => {
+    getOutboundDetailsData()
+
+    // 监听出库完成事件 刷新列表
+    uni.$on('onUpdate', () => {
+        // console.log('监听事件')
+        // 刷新列表
+        getOutboundDetailsData()
+    })
+})
+
+// 页面销毁时移除事件监听
+onUnmounted(() => {
+    uni.$off('onUpdate') // 移除事件监听
+})
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+    display: flex;
+    height: 100%;
+    padding: 0 15rpx;
+    flex-direction: column;
+    background-color: #e8f5fb;
+
+    .search-form {
+        margin: 10rpx 0;
+        display: flex;
+        align-items: center;
+        box-sizing: content-box;
+    }
+
+    .search {
+        height: 60rpx;
+        background-color: #3784fb;
+        text-align: center;
+        line-height: 60rpx;
+        color: #fff;
+        border-radius: 10rpx;
+    }
+
+    .scroll-container {
+        .table-list-item {
+            margin-bottom: 20rpx;
+            padding: 20rpx;
+            background-color: #fff;
+            min-height: 300rpx;
+            border-radius: 10rpx;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+            .title {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .line {
+                margin: 20rpx 0;
+                height: 1px;
+                background-color: #e8e8e8;
+            }
+        }
+    }
+}
+// 加载提示文字
+.loading-text {
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+    padding: 20rpx 0;
+}
+</style>
diff --git a/src/pages/new-purchase/entry/index.vue b/src/pages/new-purchase/entry/index.vue
index 355e1a2..45a0ce2 100644
--- a/src/pages/new-purchase/entry/index.vue
+++ b/src/pages/new-purchase/entry/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <!-- 新购验收 -->
-    <view class="accept page-common">
+    <!-- 新购入库 -->
+    <view class="page-container">
         <view class="complete-btn">
             <view class="btn" @click="changeTab(1)">
                 <span>已完成</span>
@@ -12,7 +12,7 @@
             </view>
         </view>
         <uni-row :gutter="24" class="search-form">
-            <uni-col :span="10">
+            <uni-col :span="12">
                 <view>
                     <uni-datetime-picker
                         type="date"
@@ -22,9 +22,9 @@
                     />
                 </view>
             </uni-col>
-            <uni-col :span="10">
+            <uni-col :span="8">
                 <view>
-                    <uni-easyinput placeholder="请输入项目名称" />
+                    <uni-easyinput placeholder="请输入内容" v-model="queryParams.keyWord" />
                 </view>
             </uni-col>
             <uni-col :span="4">
@@ -32,78 +32,188 @@
             </uni-col>
         </uni-row>
 
-        <div class="table-list-item" v-for="(item, index) in tableList" :key="index">
-            <div class="title">
-                <span style="font-size: 15px; font-weight: 800">新购入库</span>
-                <span :style="{ color: item.status == 1 ? '#3784fb' : '#ff4d4f' }">{{
-                    item.status == 1 ? '已完成' : '未完成'
-                }}</span>
-            </div>
-            <div class="line"></div>
-            <uni-row :gutter="24">
-                <uni-col :span="6">到货时间：</uni-col>
-                <uni-col :span="18"><div class="cont">{{ item.arrivalTime }}</div></uni-col>
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">采购单号：</uni-col>
-                <uni-col :span="18"><div class="cont">{{ item.purchaseNumber }}</div></uni-col>
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">采购物资：</uni-col>
-                <uni-col :span="18"><div class="cont">{{ item.purchaseMaterial }}</div></uni-col>
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">物资数量：</uni-col>
-                <uni-col :span="18"><div class="cont">{{ item.arrivalQuantity }}</div></uni-col>
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">已入库数量：</uni-col>
-                <uni-col :span="18"><div class="cont">{{ item.acceptQuantity }}</div></uni-col>
-            </uni-row>
-            <uni-row :gutter="24">
-                <uni-col :span="6">待入库数量：</uni-col>
-                <uni-col :span="18"><div class="cont">{{ item.pendingQuantity }}</div></uni-col>
-            </uni-row>
+    <scroll-view scroll-y @scrolltolower="onScrollTolower" class="scroll-container">
+        <div class="table-list-item" v-for="(item, index) in tableList" :key="index" >
+            <uni-swipe-action>
+                <uni-swipe-action-item :right-options="item.taskStatus==22 ? swipeOptions:swipeOptionsFail" @click="onClick($event,item)"  @change="onSwipeChange">
+                    <div class="title">
+                        <span style="font-size: 15px; font-weight: 800">新购入库</span>
+                        <span :style="{ color: item.taskStatus == 22 ? '#3784fb' : '#ff4d4f' }">{{
+                            item.taskStatus == 22 ? '已完成' : '未完成'
+                        }}</span>
+                    </div>
+                    <div class="line"></div>
+                    <uni-row :gutter="24">
+                        <uni-col :span="6">到货时间：</uni-col>
+                        <uni-col :span="18"><div class="cont">{{ item.arrivalTime }}</div></uni-col>
+                    </uni-row>
+                    <uni-row :gutter="24">
+                        <uni-col :span="6">采购单号：</uni-col>
+                        <uni-col :span="18"><div class="cont">{{ item.code }}</div></uni-col>
+                    </uni-row>
+                    <uni-row :gutter="24">
+                        <uni-col :span="6">采购物资：</uni-col>
+                        <uni-col :span="18"><div class="cont">{{ item.purchaseMaTypeName }}</div></uni-col>
+                    </uni-row>
+                    <uni-row :gutter="24">
+                        <uni-col :span="6">采购数量：</uni-col>
+                        <uni-col :span="18"><div class="cont">{{ item.purchaseMaNumber }}</div></uni-col>
+                    </uni-row>
+                    <uni-row :gutter="24">
+                        <uni-col :span="6">物资厂家：</uni-col>
+                        <uni-col :span="18"><div class="cont">{{ item.supplier }}</div></uni-col>
+                    </uni-row>
+                </uni-swipe-action-item>
+            </uni-swipe-action>
         </div>
+        <view class="loading-text">
+            {{ finish ? '没有更多数据了~' : '正在加载...' }}
+        </view>
+    </scroll-view>
     </view>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref,computed } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { debounce } from 'lodash-es'
+import { getPurchaseList } from '@/services/purchase.js'
 
-const active = ref(1)
-const tableList = reactive([
-    {
-        status: '1', // 状态
-        arrivalTime: '2021-08-01 12:12:12', // 到货时间
-        purchaseNumber: '123', // 采购单号
-        // 采购物资
-        purchaseMaterial: '物资1、物资2、物资3、物资4、物资5、物资6、物资7、物资8、物资9、物资10',
-        arrivalQuantity: '100', // 到货数量
-        acceptQuantity: '100', // 入库数量
-        pendingQuantity: '100', // 待入库数量
-    },
-    {
-        status: '0', // 状态
-        arrivalTime: '2021-08-01 12:12:12', // 到货时间
-        purchaseNumber: '123456', // 采购单号
-        // 采购物资
-        purchaseMaterial: 'fdhsajfkldsajfkldjsaklgjdklsahjgldjsafkljdsklajfdklsajfkdsajfkldsjfkldas',
-        arrivalQuantity: '100', // 到货数量
-        acceptQuantity: '100', // 验收数量
-    },
-])
+const total = ref(0) //                 数据总量
+const active = ref(1) //                tap索引
+const tableList = ref([]) //            列表数据源
+const dateArray = ref([]) //            日期范围
+
+// 查询参数
+const queryParams = ref({
+    startTime: '', //                   开始时间
+    endTime: '', //                     结束时间
+    keyWord: '', //                     关键字
+    // statusList: [19], //                 状态
+    taskStatus: 22,
+    pageNum: 1,
+    pageSize: 3,
+})
+
+// 日期 change 事件
+const onChangeDate = (val) => {
+    const [val_1, val_2] = val
+    queryParams.value.startTime = val_1
+    queryParams.value.endTime = val_2
+}
+
+//点击事件
+const onClick=(e,item)=> {
+    if(item.taskStatus==22){
+        console.log(e.index)
+    if(e.index==0){
+        uni.navigateTo({ url: `/pages/new-purchase/entry/details?id=${item.id}` })
+    }
+        // console.log(e,'item',item);
+        // console.log(e.index);
+    }
+    }
+
+//左滑选择项1
+const swipeOptions =  ref([
+        {
+          text: '查看', 
+          style: { backgroundColor: '#34C759' },
+          onClick: () => { handleAction('查看'); }
+        },
+        {
+          text: '驳回', 
+          style: { backgroundColor: '#dd524d' },
+          onClick: () => { handleAction('驳回'); }
+        }
+      ])
+
+//左滑选择项2
+ const swipeOptionsFail =  ref([
+        {
+          text: '查看', 
+          style: { backgroundColor: '#34C759' },
+        },
+        {
+          text: '入库', 
+          style: { backgroundColor: '#007AFF' },
+        },
+        {
+          text: '驳回', 
+          style: { backgroundColor: '#dd524d' },
+        }
+      ])     
+
+//左滑改变
+ const onSwipeChange= (e) => {
+      console.log("Swipe Changed", e);
+    }
+
+
+
+// 获取列表数据
+const getTableList = async (isTap = false) => {
+    // console.log('queryParams.value查询参数', queryParams.value)
+    const res = await getPurchaseList(queryParams.value)
+    console.log('res列表数据', res)
+    total.value = res.total
+    if (isTap) {
+        tableList.value = res.data.rows
+    } else {
+        if (res.data.rows.length == 0) {
+            tableList.value = []
+        } else {
+            tableList.value.push(...res.data.rows)
+        }
+    }
+}
 
 const changeTab = (index) => {
     active.value = index
+    if (index == 1) {
+        queryParams.value.taskStatus = 22 // 查已完成的
+        queryParams.value.pageNum = 1
+        getTableList(true)
+    } else if (index == 2) {
+        queryParams.value.taskStatus = 21 // 查未完成的
+        queryParams.value.pageNum = 1
+        getTableList(true)
+    }
 }
 const maskClick = () => {}
+
+// 页面加载完毕
+onLoad(() => {
+    getTableList()
+})
+
+onShow(() => {
+    tableList.value = []
+    getTableList()
+})
+
+// 滚动触底事件
+const onScrollTolower = debounce(() => {
+    if (total.value > tableList.value.length) {
+        queryParams.value.pageNum++
+        getTableList()
+    }
+})
+
+// 判断数据是否加载完毕
+const finish = computed(() => {
+    if (total.value === tableList.value.length) return true
+})
+
 </script>
 
 <style lang="scss" scoped>
-.accept {
+.page-container {
+    display: flex;
     height: 100%;
-    word-break: break-all;
+    padding: 0 15rpx;
+    flex-direction: column;
+
     .complete-btn {
         display: flex;
         padding: 20rpx;
@@ -128,33 +238,43 @@ const maskClick = () => {}
     }
 
     .search {
-        height: 70rpx;
+        height: 65rpx;
         background-color: #3784fb;
         text-align: center;
-        line-height: 70rpx;
+        line-height: 65rpx;
         color: #fff;
     }
+
+    .scroll-container {
+        .table-list-item {
+            margin: 20rpx 0;
+            padding: 20rpx;
+            background-color: #fff;
+            min-height: 300rpx;
+            border-radius: 10rpx;
+            .title {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .cont {
+                display: flex;
+                justify-content: flex-end;
+                line-height: 1.9;
+            }
+            .line {
+                margin: 20rpx 0;
+                height: 1px;
+                background-color: #e8e8e8;
+            }
+        }
+    }
 }
-.table-list-item {
-    margin: 20rpx 0;
-    padding: 40rpx;
-    background-color: #fff;
-    min-height: 300rpx;
-    border-radius: 10rpx;
-    .title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    .cont {
-        display: flex;
-        justify-content: flex-end;
-        line-height: 1.9;
-    }
-    .line {
-        margin: 20rpx 0;
-        height: 1px;
-        background-color: #e8e8e8;
-    }
+// 加载提示文字
+.loading-text {
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+    padding: 20rpx 0;
 }
 </style>
diff --git a/src/services/purchase.js b/src/services/purchase.js
index a9eba03..6ff1acb 100644
--- a/src/services/purchase.js
+++ b/src/services/purchase.js
@@ -1,13 +1,14 @@
 import { http } from '@/utils/http'
 
- // 列表接口
-export const getPurchaseList = (data) => {
+// 查询新购验收任务列表
+export const  getPurchaseList = (data) => {
     return http({
-        method: 'GET',
-        url: '/material/purchase_check_info/list',
-        data:data,
+      method: 'GET',
+      url: '/material/purchase_check_info/list',
+      data,
     })
-}
+  }
+
 // 详情接口
 export const getPurchaseInfo = (data) => {
     return http({