bonus-material-app/src/pages/standardBox/codeList.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="getCodeList()">查询</view>
            </uni-col>
            <uni-col :span="4">
                <view class="addBtn" @click="goCode">扫码</view>
            </uni-col> 
        </uni-row> 
        <div class="card" style="margin-top: 10px;">
            <div>退料物资</div>
            <uni-forms :model="rowData" label-width="200rpx" :border="true">
                <uni-forms-item label="物资名称：" name="unitName">
                    <span style="height: 100%;display: flex;align-items: center;">{{ rowData.typeName2 }}</span>
                </uni-forms-item>
               <uni-forms-item label="规格型号：" name="proName">
                    <span style="height: 100%;display: flex;align-items: center;">{{ rowData.typeName }}</span>
                </uni-forms-item>
                <uni-forms-item label="已录入数量：" name="code">
                    <span style="height: 100%;display: flex;align-items: center;">{{ rowData.repairNum }}</span>
                </uni-forms-item>
            </uni-forms>

            <div style="width: 92%;height: auto;margin: 10px;">
                <uni-table border stripe emptyText="暂无更多数据" >
                    <!-- 表头行 -->
                    <uni-tr>
                        <uni-th width="70px" align="center">编码</uni-th>
                        <uni-th width="70px" align="center">状态</uni-th> 
                        <uni-th width="100px" align="center">录入人</uni-th> 
                        <uni-th width="120px" align="center">录入时间</uni-th>
                        <uni-th width="120px" align="center">操作</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr v-for="item in codeList" :key="item.id">
                        <uni-td>{{item.maCode}}</uni-td>
                        <uni-td>{{item.maCode}}</uni-td>
                        <uni-td>
                            <view class="uni-group"> 
                                <span style="color: red;margin-left:10px;" @click="delRow(item)">删除</span>
                            </view>
                        </uni-td>
                    </uni-tr>
                </uni-table>
            </div>  
        </div>  
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'  
import { getMaCodeList,deleteMaCode,saveCode } from '../../services/back.js';
import { baseURL } from '@/utils/http'
const searchValue = ref('')
const taskInfo = ref({})    
const rowData = ref({})     
const codeList = ref([])    
const imgBeseUrl = ref("")    
const bmFileInfos = ref([])//请求图片参数
const goCode = () => {
    uni.navigateTo({ url: `/pages/repair/testedInBound/codeScan?taskInfo=${JSON.stringify(taskInfo.value)}` })
}
const getCodeList = () => {
    console.log(rowData.value)
    let param = {
        "typeId":rowData.value.typeId,
        "parentId":rowData.value.parentId
    }
    getMaCodeList(param).then(res => { 
        console.log(res)
        if(res.code=200){
            codeList.value = res.data;
        }
	}).catch(error => {
		console.log(error) 
	})  
} 
//删除
const delRow = (item) => {
    console.log(item) 
    let param = {
        "typeId":item.typeId,
        "parentId":rowData.value.parentId,
        "maId":item.maId,
    }
    console.log(param)
    deleteMaCode(param).then(res => {  
        console.log(res)
        if(res.code==200){
            uni.showToast({ title: '删除成功', icon: 'none' })
            getCodeList()
        }else{
            uni.showToast({ title: '删除失败', icon: 'none' })
        }
	}).catch(error => {
		console.log(error) 
	})  
} 

 
onLoad((options)=>{
    console.log(options)
	taskInfo.value = JSON.parse(options.taskInfo)
    console.log(taskInfo.value) 
    rowData.value = JSON.parse(options.rowData)
    console.log(rowData.value)
    // getCodeList()
})
onShow(()=>{
    getCodeList()
})
</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);
}
.coding-btn {
    padding: 5rpx 0;
    background-color: #409eff;
    border-radius: 6rpx;
    text-align: center;
    color: #fff;
    font-size: 14px;
}
.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;
}
.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;
}
.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>