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

<template>
    <view class="accept page-common">
        <div class="card">
            <div>任务信息</div>
            <uni-forms :model="taskInfo" label-width="160rpx" :border="true">
                <uni-forms-item label="退料单位" name="unitName">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.unitName }}</span>
                </uni-forms-item>
               <uni-forms-item label="退料工程：" name="proName">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.proName }}</span>
                </uni-forms-item>
                <uni-forms-item label="退料单号：" name="code">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.code }}</span>
                </uni-forms-item>
                <uni-forms-item label="退料人员：" name="backPerson">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.backPerson }}</span>
                </uni-forms-item>
                <uni-forms-item label="联系电话：" name="phone">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.phone }}</span>
                </uni-forms-item>
            </uni-forms>
        </div>
        <div class="card" style="margin-top: 20px;">
            <div>退料物资</div>
            <div style="width: 92%;height: auto;margin: 10px;" >
                <uni-row :gutter="24" style="display: flex; align-items: center">
                    <uni-col :span="10">
                        <view>
                            <uni-easyinput placeholder="请输入内容" />
                        </view>
                    </uni-col>
                    <uni-col :span="10">
                        <view>
                            <uni-easyinput placeholder="请输入内容" />
                        </view>
                    </uni-col>
                    
                </uni-row>
            </div>
            <div style="width: 92%;height: auto;margin: 10px;">
                <uni-table border stripe emptyText="暂无更多数据" >
                    <!-- 表头行 -->
                    <uni-tr>
                        <uni-th width="100px" align="center">类型名称</uni-th>
                        <uni-th width="100px" align="center">规格型号</uni-th>
                        <uni-th width="100px" align="center">在用数</uni-th>
                        <uni-th width="100px" align="center">退料数</uni-th>
                        <uni-th width="100px" align="center">外观</uni-th>
                        <uni-th width="100px" align="center">操作</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr v-for="(item,index) in typeList" :key="item.id">
                        <uni-td>{{item.typeName}}</uni-td>
                        <uni-td>{{item.typeModel}}</uni-td>
                        <uni-td>{{item.num}}</uni-td>
                        <uni-td> 
                            <uni-easyinput placeholder="退料数" v-model="item.preNum"/>
                        </uni-td>
                        <uni-td> 
                            <uni-easyinput placeholder="外观" v-model="item.apDetection"/>
                        </uni-td>
                        <uni-td>
                            <view class="uni-group">
                                <button class="uni-button" size="mini" type="primary">上传</button>
                                <button class="uni-button" size="mini" type="warn">删除</button>
                            </view>
                        </uni-td>
                    </uni-tr>
                </uni-table>
            </div>
        </div>

        <div class="btn">
            <!-- <button class="btn-cont" @click="reject">取消</button> -->
            <button class="btn-cont">确认</button>
        </div>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'  
const taskInfo = ref({})    
const typeList = ref([])    
  

onLoad((options)=>{
	console.log(options)
	taskInfo.value = JSON.parse(options.taskInfo)
    console.log(taskInfo.value)
})
</script>

<style lang="scss">
.accept {
    padding: 10px;
    height: 95vh;
    word-break: break-all;
}
.card {
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.1);
}
.upload {
    width: 80px;
    height: 80px;
    background-color: #f5f5f5;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #ccc;
    margin-top: 10px;
}
.btn {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;

    .btn-cont {
        width: 40%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #3784fb;
        color: #fff;
        border-radius: 20px;
        // 取消按钮淡蓝色
        // &:first-child {
        //     background-color: #aacefb;
        // }
    }
}
</style>