bonus-material-app/src/pages/part/part-lease/index.vue

<template>
    <!-- 退料任务 -->
    <view class="accept page-common"> 
        <uni-row :gutter="24" class="search-form"> 
            <!-- <uni-col :span="10">
                <view>
                    <uni-easyinput placeholder="请输入内容"/>
                </view>
            </uni-col>
            <uni-col :span="4">
                <view class="search" @click="">查询</view>
            </uni-col> -->
            <uni-col :span="10">
                <view>
                    <uni-easyinput 
                        placeholder="请输入物资名称" 
                        v-model="searchKeyword" 
                    />
                </view>
            </uni-col>
            <uni-col :span="4">
			    <view class="search" @click="search()">查询</view>
			</uni-col>
            <uni-col :span="4">
                <view class="addBtn" @click="addApply">申请</view>
            </uni-col>
			<uni-col :span="6">
			    <view class="addBtn" @click="goApply()">申请记录</view>
			</uni-col>
        </uni-row>
        <!-- <uni-row :gutter="24" class="search-form"> 
            <uni-col :span="10">
                <view>
                    <uni-easyinput 
                        placeholder="请输入物资名称" 
                        v-model="searchKeyword" 
                    />
                </view>
            </uni-col>
            <uni-col :span="6">
			    <view class="search" @click="search()">查询</view>
			</uni-col>
        </uni-row> -->
		<uni-row :gutter="24" class="search-form">
			<uni-col :span="5">
			    <view style="font-size: 24rpx;">物资类型：</view> 
			</uni-col>
			<uni-col :span="19">
				<scroll-view scroll-x class="select-box" ref="nameScrollView">
                    <view class="select-box-content">
						<view class="select-box-item" :style="{ color: maId=='' ? 'red':'black' }" @click="getLevelOneList()">
						    全部
						</view> 
                        <view class="select-box-item" v-for="(item,index) in maList" :key="index" @click="chosenLevelOne(item)" :style="{ color: maId==item.id ? 'red':'black' }">
                            {{item.paName}}
                        </view> 
                    </view> 
				</scroll-view> 
			</uni-col>
		</uni-row>
        <uni-row :gutter="24" class="search-form">
			<uni-col :span="5">
			    <view style="font-size: 24rpx;">物资名称：</view> 
			</uni-col>
			<uni-col :span="19">
				<scroll-view scroll-x class="select-box">
                    <view class="select-box-content">
						<view class="select-box-item" :style="{ color: modelId=='' ? 'red':'black' }" @click="getLevelTwoList()">
						    全部
						</view> 
                        <view class="select-box-item" v-for="(item,index) in modelList" :key="index" @click="chosenLevelTwo(item)"  :style="{ color: modelId==item.id ? 'red':'black' }">
                            {{item.paName}}
                        </view> 
                    </view> 
				</scroll-view> 
			</uni-col>
		</uni-row>
        <uni-row :gutter="24" class="search-form">
			<uni-col :span="5">
			    <view style="font-size: 24rpx;">规格型号：</view> 
			</uni-col>
			<uni-col :span="19">
				<scroll-view scroll-x class="select-box">
                    <view class="select-box-content">
						<view class="select-box-item" :style="{ color: typeId=='' ? 'red':'black' }" @click="getLevelThreeList()">
						    全部
						</view> 
                        <view class="select-box-item" v-for="(item,index) in typeList" :key="index" @click="chosenLevelThree(item)" :style="{ color: typeId==item.id ? 'red':'black' }">
                            {{item.paName}}
                        </view> 
                    </view> 
				</scroll-view> 
			</uni-col>
		</uni-row>
        <scroll-view scroll-y   class="scroll-container">
            <uni-table border stripe emptyText="暂无更多数据" >
                <!-- 表头行 -->
                <uni-tr>
                    <uni-th style="font-size: 20rpx;" width="50px" align="center" >序号</uni-th>
                    <uni-th style="font-size: 20rpx;" width="80px" align="center">机具类型</uni-th> 
                    <uni-th style="font-size: 20rpx;" width="80px" align="center">配件名称</uni-th>
                    <uni-th style="font-size: 20rpx;" width="80px" align="center">规格型号</uni-th>
                    <uni-th style="font-size: 20rpx;" width="50px" align="center">库存</uni-th>
                    <uni-th style="font-size: 20rpx;" width="120px" align="center">预领数量</uni-th>
                    <uni-th style="font-size: 20rpx;" width="50px" align="center">操作</uni-th>
                </uni-tr>
                <!-- 表格数据行 -->
                <uni-tr v-for="(item,index) in partList" :key="index">
                    <uni-td style="font-size: 20rpx;text-align: center;">{{(index+1)}}</uni-td>
                    <uni-td style="font-size: 20rpx;text-align: center;">{{item.modelType}}</uni-td>
                    <uni-td style="font-size: 20rpx;text-align: center;">{{item.partName}}</uni-td>
                    <uni-td style="font-size: 20rpx;text-align: center;">{{item.typeName}}</uni-td>
                    <uni-td style="font-size: 20rpx;text-align: center;">{{item.storageNum}}</uni-td>
                    <uni-td style="font-size: 20rpx;text-align: center;">
                        <uni-easyinput placeholder="预领数量" v-model="item.preNum" style="font-size: 20rpx;" @input="checkNum(item)"/>
                    </uni-td>
                    <uni-td style="font-size: 20rpx;text-align: center;">
                        <view> 
                            <uni-icons type="trash-filled" size="20" style="color: red;margin-left:10px;"  @click="delRow(index)"></uni-icons>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue' 
import { onLoad,onShow} from '@dcloudio/uni-app' 
import { selectPartTreeListApi,selectPartTreeListByLevelApi,addPartLeaseApi } from '../../../services/partLease.js'
import { debounce } from 'lodash-es' 
const partList = ref([
    // {modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-1", storageNum:"20", preNum:"0"},{modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-2", storageNum:"20", preNum:"0"},{modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-3", storageNum:"20", preNum:"0"}
]) //列表数据源

const searchKeyword = ref('')
const nameScrollView = ref(null)
// --------1---------
// 类型数据
const maList = ref([])//一级选择数据
const maId = ref("")//一级选中id

const search = async () => {
	const res = await selectPartTreeListApi({level:2,id:maId.value,paName:searchKeyword.value,flag:1})
	modelList.value=res.data.secondList;
	typeList.value=res.data.thirdList;

}

// 获取类型数据(一级)
const getLevelOneList = async () => {
	const res = await selectPartTreeListApi({level:1})
	maList.value=res.data;
	maId.value="";
	getLevelTwoList()
} 
//选择类型(一级)
const chosenLevelOne = async (item) => {
	maId.value=item.id;
	const res = await selectPartTreeListApi({level:2,id:item.id})
	modelList.value=res.data.secondList;
	typeList.value=res.data.thirdList;
}
// --------2---------
 // 名称数据
const modelList = ref([])//二级选择数据
// 获取名称数据
const getLevelTwoList = async () => {
	const res = await selectPartTreeListApi({level:2})
	modelList.value=res.data
	modelId.value=""
	getLevelThreeList() 
}
const modelId = ref("")//二级选中id
//选择类型
const chosenLevelTwo = async (item) => {
	modelId.value=item.id;
	const res = await selectPartTreeListApi({level:3,id:item.id})
	typeList.value=res.data.thirdList
}
// --------3---------
 // 型号数据
const typeList = ref([])
// 获取名称数据
const getLevelThreeList = async () => {
	const res = await selectPartTreeListApi({level:3})
	typeList.value=res.data
	typeId.value="" 
}
const typeId = ref("") 
//选择类型
const chosenLevelThree = async(item) => {
	typeId.value=item.id; 
	let obj = { 
		partId:item.id,
		modelType:"",
		partName:"",
		typeName:item.paName,
		storageNum:item.storageNum || 0,
		preNum:0
	}
	const res = await selectPartTreeListByLevelApi({id:item.id})
	res.data.forEach(i=>{
		if(i.level==1){
			obj.modelType=i.paName
		}
		if(i.level==2){
			obj.partName=i.paName
		}
	}) 
	//添加到table
	if(partList.value.length==0){
		partList.value[0]=obj
	}else{
		let index = partList.value.findIndex(v=>v.partId==item.id)
		if(index<0){//添加
			partList.value.unshift(obj)
		}else{//已存在
			uni.showToast({
				title: '当前领料任务已存在该规格型号！',
				icon: 'none',
			})
		}
	}
}
//输入框事件
const checkNum = (item) => {
    setTimeout(() => {
        item.preNum = Number(String(item.preNum).replace(/[^\d]/g, ''))
		if(item.storageNum>0){ 
			if(Number(item.preNum)>=Number(item.storageNum)){
				item.preNum=Number(item.storageNum)
			}
		} 
    }, 500)
}
//删除
const delRow = (index) => { 
    partList.value.splice(index,1)
}
//新增记录
const addApply = () => {
    console.log(partList.value)
	if(partList.value.length==0){
		uni.showToast({
			title: '请先添加配件类型',
			icon: 'none',
		})
	}else{
		let index = partList.value.findIndex(v=>v.preNum==0)
		if(index<0){//添加
			uni.showModal({
			    title: '提示',
			    content: '是否确认提交申请？',
			    confirmText: '确定',
			    cancelText: '取消',
			    success: async (res) => {
			        if (res.confirm) {
			            let param = {
			                partLeaseDetailsList:partList.value
			            }
			            console.log(param)
			            const res = await addPartLeaseApi(param)
			            if (res.code === 200) {
			                uni.showToast({
			                    title: '提交成功',
			                    icon: 'none',
			                })
			                setTimeout(() => {
								getLevelOneList()
								partList.value=[]
			                }, 500)  
			            }else{
			                uni.showToast({ title: '提交失败', icon: 'none' })
			            }
			        } 
			    }
			})
			
			
			
			
		}else{
			uni.showToast({ title: '配件领料数量不可为零！',icon: 'none'})
		}
	}
}

//点击记录
const goApply = () => { 
    uni.navigateTo({ url: `/pages/part/part-lease/applyList` })
}
onLoad(() => {
    getLevelOneList() 
}) 
</script>

<style lang="scss" scoped>
.accept {
    height: 95vh;
    word-break: break-all;
    background-color: #f7f8fa;
    padding: 24rpx; 
    // 搜索表单
    .search-form {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 10rpx;
        border-radius: 20rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); 
		
		.select-box{
			width: 100%;
			height: 80rpx; 
		}
        .select-box-content{
            height: 75rpx; 
            width: auto;
            display: flex; 
			align-items: center;
            flex-wrap: nowrap;
        }
        .select-box-item{
            width: auto;
            padding: 5rpx;
            margin-right: 10rpx;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 24rpx;
            word-break: keep-all;
            white-space: nowrap;
        }
		
        // 搜索按钮
        .search {
            height: 80rpx;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            text-align: center;
            line-height: 80rpx;
            color: #fff;
            border-radius: 12rpx;
            font-size: 28rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }
        }

        // 新增按钮
        .addBtn {
            height: 80rpx;
            background: linear-gradient(135deg, #19be6b 0%, #16a75c 100%);
            text-align: center;
            line-height: 80rpx;
            color: #fff;
            border-radius: 12rpx;
            font-size: 28rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(25, 190, 107, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }
        }
        
    }
}

// 列表容器
.scroll-container {
	width: 98%;
    padding: 5rpx;
    height: 50vh;
    margin: 20rpx auto;
}

/* 针对Web平台 */
.scroll-view {
  overflow: auto; /* 允许滚动 */
  -ms-overflow-style: none; /* IE和Edge */
  scrollbar-width: none; /* Firefox */
}
 
/* 针对其他非Web平台，比如小程序，可以通过条件编译来设置 */
/* #ifdef MP-WEIXIN */
.scroll-view {
  scroll-view {
    scroll-x: true;
    scroll-y: auto;
    ::-webkit-scrollbar {
      display: none; /* 针对Webkit浏览器，隐藏滚动条 */
      width: 0;
      height: 0;
      color: transparent;
    }
  }
}
/* #endif */
</style>