171 lines
3.5 KiB
Vue
171 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted,ref } from 'vue';
|
|
import { getAction, postAction } from '../../common/http';
|
|
const form = ref({} as any)
|
|
const list = ref([] as any[])
|
|
onMounted(()=>{
|
|
getAction('/fabric/info/all').then((res:any)=>{
|
|
if(res.code===200){
|
|
let set=new Set()
|
|
let arr=[]
|
|
res.data.forEach((l:any)=>{
|
|
set.add(l.category)
|
|
let a=arr.find((k:any)=>k.category===l.category)
|
|
if(a){
|
|
a.list.push(l.name)
|
|
}else{
|
|
arr.push({category:l.category,list:[l.name]})
|
|
}
|
|
})
|
|
form.value.list = arr
|
|
popuList.value=[...set].map((k:any)=>({text:k,value:k}))
|
|
}
|
|
})
|
|
})
|
|
|
|
const init = (arr:any[]) =>{
|
|
list.value=[]
|
|
postAction('/rawFabric/preview',arr).then((res:any)=>{
|
|
if(res.code==200){
|
|
list.value=res.data
|
|
}
|
|
})
|
|
}
|
|
|
|
const onClickLeft = () => {
|
|
window.history.back()
|
|
}
|
|
|
|
const showPicker = ref(false)
|
|
const popuList = ref([] as any[])
|
|
//选择框事件
|
|
const choosePic = () =>{
|
|
showPicker.value=true
|
|
}
|
|
//选择框确认
|
|
const pickerConfirm = (val:any) =>{
|
|
form.value.pl=val.selectedValues[0]
|
|
let item=form.value.list.find((l:any)=>l.category==val.selectedValues[0])
|
|
init(item.list)
|
|
showPickerCancel()
|
|
}
|
|
//取消
|
|
const showPickerCancel = () =>{
|
|
showPicker.value=false
|
|
}
|
|
|
|
const toDetile = (item:any) =>{
|
|
console.log(item);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="flex">
|
|
<van-nav-bar title="白胚库存列表" left-text="返回" left-arrow @click-left="onClickLeft" />
|
|
<van-cell-group inset>
|
|
<van-field v-model="form.pl" name="品类" label="品类" colon class="bor" label-width="3em" readonly @click="choosePic"/>
|
|
</van-cell-group>
|
|
|
|
<view class="grid-container">
|
|
<view class="grid-item">面料名称</view>
|
|
<view class="grid-item">面料匹数</view>
|
|
<view class="grid-item">面料米数</view>
|
|
<view class="grid-item">操作</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="grid-container" v-for="(item,index) in list" :key="index" @click="toDetile(item)">
|
|
<view class="grid-item">{{item.category}}</view>
|
|
<view class="grid-item">{{item.count}}</view>
|
|
<view class="grid-item">{{item.len}}</view>
|
|
<view class="grid-item">查看</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--选择框-->
|
|
<van-popup v-model:show="showPicker" round position="bottom">
|
|
<van-picker
|
|
show-toolbar
|
|
:columns="popuList"
|
|
@confirm="pickerConfirm"
|
|
@cancel="showPickerCancel"
|
|
ref="pickerRef"
|
|
/>
|
|
</van-popup>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
|
|
.van-nav-bar {
|
|
width: 100%;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1.6fr 1.6fr 1fr;
|
|
padding: 0 15rpx;
|
|
|
|
.grid-item {
|
|
border: 1rpx solid #f2f2f2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
::v-deep .van-cell {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
::v-deep .van-field {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bor {
|
|
::v-deep .van-field__control {
|
|
border: 1px solid #d7d7d7;
|
|
text-align: center;
|
|
}
|
|
|
|
::v-deep .van-field__label {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.bor-a {
|
|
::v-deep .van-field__control {
|
|
border-bottom: 1px solid #d7d7d7;
|
|
text-align: center;
|
|
}
|
|
|
|
::v-deep .van-field__label {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
::v-deep .van-button--normal {
|
|
padding: 5px 8px;
|
|
height: 30px;
|
|
}
|
|
|
|
::v-deep .van-field__control {
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-button {
|
|
margin: 20px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
</style> |