bonus-material-app/src/pages/back/detail.vue

<template>
    <!-- 新购验收详情 -->
    <view class="accept page-common">
        <uni-row :gutter="24" class="search-form">
            <uni-col :span="12">
                <view><uni-easyinput placeholder="请输入内容" v-model="searchValue"/></view>
            </uni-col>
            <uni-col :span="4">
                <view class="search" @click="getTableList()">查询</view>
            </uni-col>
            <uni-col :span="4">
                <view class="addBtn" >编码退料</view>
            </uni-col>
            <uni-col :span="4">
                <view class="addBtn" >数量退料</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 v-if="item.status == 2" style="color: #ff4d4f">未验收</span> -->
                <!-- <span v-else-if="item.status != 2" style="color: #3784fb">已验收</span> -->
                <!-- <span v-else-if="item.status == 12" style="color: #ff4d4f">不合格</span> -->
            </div>
            <div class="line"></div>
            <uni-row :gutter="24">
                <uni-col :span="8">物资名称：</uni-col>
                <uni-col :span="16"><div class="cont">{{ item.typeName }}</div></uni-col>
            </uni-row>
            <uni-row :gutter="24">
                <uni-col :span="8">规格型号：</uni-col>
                <uni-col :span="16"><div class="cont">{{ item.typeModel }}</div></uni-col>
            </uni-row>
            <uni-row :gutter="24">
                <uni-col :span="8">退料数量：</uni-col>
                <uni-col :span="16"><div class="cont">{{ item.preNum }}</div></uni-col>
            </uni-row>
            <uni-row :gutter="24">
                <uni-col :span="8">单位：</uni-col>
                <uni-col :span="16"><div class="cont">{{ item.unitName }}</div></uni-col>
            </uni-row>
            <uni-row :gutter="24" v-if="item.status != 2">
                <uni-col :span="8">管理模式：</uni-col>
                <uni-col :span="16">
                    <div class="cont" v-if="item.manageType==0">编码管理</div>
                    <div class="cont" v-if="item.manageType==1">数量管理</div>
                </uni-col>
            </uni-row>
        </div>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getBackInfo } from '../../services/back.js';
import { onLoad,onShow } from '@dcloudio/uni-app'



const searchValue = ref('')
const id = ref('') 
const taskId = ref('')
const statusList = ref(["2","12"])
const tableList = ref([])
const taskInfo = ref({})
const getTableList = () => { 
	// let obj = {
	// 	"id":id.value,
	// 	// "taskId":taskId.value,
	// 	// "statusList":statusList.value,
	// }
	// console.log(obj)
	getBackInfo(id.value).then(res => { 
		console.log(res) 
        taskInfo.value = res.data.backApplyInfo;
		tableList.value = res.data.backApplyDetailsList;
		console.log(taskInfo.value)
	}).catch(error => {
		console.log(error) 
	})  
}
const search = () => {
    console.log('🚀 ~ search ~ searchValue:', searchValue.value)
}
const handleItem = (item) => {
    console.log('🚀 ~ handleItem ~ item:', item)
    if (item.manageType == 0) {//编码管理
        uni.navigateTo({ url: `/pages/back/backCode?taskInfo=${JSON.stringify(taskInfo.value)}` })
    } else if(item.manageType == 1) {//数量管理
        uni.navigateTo({ url: `/pages/back/backNum?taskInfo=${JSON.stringify(taskInfo.value)}` })
    }
}
onLoad((options)=>{
	console.log(options)
	id.value = options.id
	taskId.value = options.taskId
	getTableList()
})
onShow(()=>{
	getTableList()
})
</script>

<style lang="scss" scoped>
.accept {
    height: 100%;
    word-break: break-all;
    overflow-y: auto;
    .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;
        margin-top: 10px;
        font-size: 14px;
    }

    .search {
        height: 60rpx;
        background-color: #3784fb;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        border-radius: 5px;
        font-size: 12px;
    }
    .addBtn {
        height: 60rpx;
        background-color: #3784fb;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        border-radius: 5px;
        font-size: 12px;
    }
}
.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>