bonus-material-app/src/pages/new-purchase/accept/index.vue

<template>
    <!-- 新购验收 -->
    <view class="accept page-common">
        <view class="complete-btn">
            <view class="btn" @click="changeTab(1)">
                <span>已完成</span>
                <div v-if="active == 1" class="bt-line"></div>
            </view>
            <view class="btn" style="margin-left: 120rpx" @click="changeTab(2)">
                <span>未完成</span>
                <div v-if="active == 2" class="bt-line"></div>
            </view>
        </view>
        <uni-row :gutter="24" class="search-form">
            <uni-col :span="10">
                <view>
                    <uni-datetime-picker
                        type="date"
                        placeholder="请选择日期"
                        :clear-icon="false"
                        @maskClick="maskClick"
                    />
                </view>
            </uni-col>
            <uni-col :span="10">
                <view>
                    <uni-easyinput placeholder="请输入项目名称" />
                </view>
            </uni-col>
            <uni-col :span="4">
                <view class="search" @click="getTableList()">搜索</view>
            </uni-col>
        </uni-row>
	
        <div class="table-list-item" v-for="(item, index) in tableList" :key="index" @click="handleItem(item)">
            <div class="title">
                <span style="font-size: 15px; font-weight: 800">新购验收</span>
                <span :style="{ color: item.status == 1 ? '#ff4d4f' : '#3784fb' }">{{
                    item.taskStatus == 2 ? '未完成' : '已完成'
                }}</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"> </div></uni-col>
            </uni-row>
        </div>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getPurchaseList } from '../../../services/purchase.js';
import { onLoad } from '@dcloudio/uni-app'
const active = ref(1)
const tableList = ref([])
const statusList = ref(["3","13","4","14","19"])

const getTableList = () => { 
	let obj = {
		"pageNum":"1",
		"pageSize":"10",
		"statusList":statusList.value,
	}
	console.log(obj)
	getPurchaseList(obj).then(res => { 
		tableList.value = res.rows;
		console.log(tableList.value)
	}).catch(error => {
		console.log(error) 
	})  
}

const changeTab = (index) => {
    active.value = index
	if(index==1){
		statusList.value=["3","13","4","14","19"]
		getTableList()
	}else if(index==2){
		statusList.value=["2","12"]
		getTableList()
	}
		
}
const maskClick = () => {}
const handleItem = (item) => {
    console.log('🚀 ~ handleItem ~ item:', item)
    uni.navigateTo({ url: '/pages/new-purchase/accept/acceptDetails' })
}
onLoad((options)=>{
	getTableList()
})
</script>

<style lang="scss" scoped>
.accept {
    height: 100%;
    word-break: break-all;
    .complete-btn {
        display: flex;
        padding: 20rpx;
        .btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 30rpx;
            font-weight: 800;
        }
        .bt-line {
            width: 80rpx;
            height: 4rpx;
            background-color: #3784fb;
        }
    }

    .search-form {
        display: flex;
        align-items: center;
        box-sizing: content-box;
    }

    .search {
        height: 70rpx;
        background-color: #3784fb;
        text-align: center;
        line-height: 70rpx;
        color: #fff;
    }
}
.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;
    }
}
</style>