374 lines
12 KiB
Vue
374 lines
12 KiB
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="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="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: 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"}
|
||
]) //列表数据源
|
||
|
||
// --------1---------
|
||
// 类型数据
|
||
const maList = ref([])//一级选择数据
|
||
const maId = ref("")//一级选中id
|
||
// 获取类型数据(一级)
|
||
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,
|
||
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.push(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>
|