<template>
|
<div class="content">
|
<div :class="{ 'content_top': status }" class="content_search">
|
<v-Search
|
ref="Search"
|
@searchInput="searchInput"
|
@submit="submit"
|
@reset="reset"
|
:isShow="true"
|
placeholder="仓库名称/物料编码"
|
>
|
<template v-slot:content>
|
<div class="Search_item">
|
<div class="Search_item_label">汇总依据</div>
|
<div class="Search_item_content">
|
<div class="tag">
|
<div
|
class="tag_item"
|
:class="{ tag_active: item.isActive }"
|
v-for="(item, i) in groupTypes"
|
:key="item.id"
|
@click="changeGroup(i)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</v-Search>
|
</div>
|
<div class="content_total">共{{ controlData.total }}条数据</div>
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
<van-list
|
v-model:loading="controlData.loading"
|
:finished="controlData.finished"
|
finished-text="没有更多了~"
|
@load="loadData"
|
>
|
<div class="content_list">
|
<div
|
class="content_list_item"
|
v-for="(item, i) in list"
|
:key="i"
|
>
|
<div class="content_list_item_top">
|
<div class="content_list_item_top_left">
|
<span>{{ item.materialName }} | {{ item.materialCode }}</span>
|
</div>
|
<div class="content_list_item_top_right">
|
<span class="created">{{ '库存：' + item.num + item.unitName }}</span>
|
</div>
|
</div>
|
<div class="content_list_item_sx">
|
<span v-if="item.qualityType==0" class="green">合格 | </span>
|
<span v-if="item.qualityType==1" class="yellow">不良 | </span>
|
<span v-if="item.qualityType==2" class="red">报废 | </span>
|
<span>{{ item.procedureName ? item.procedureName : '-' }} | </span>
|
<span>{{ item.batch ? item.batch : '-' }}</span>
|
</div>
|
<!-- item主题信息部分 -->
|
<div class="content_list_item_content">
|
<!-- <div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">物料名称：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.materialName }}
|
</div>
|
</div> -->
|
<!-- <div class="content_list_item_content_item">-->
|
<!-- <div class="content_list_item_content_item_label">属性：</div>-->
|
<!-- <div class="content_list_item_content_item_nr">-->
|
<!-- <span v-if="item.qualityType==0" style="color:green">合格</span>-->
|
<!-- <span v-else-if="item.qualityType==1" style="color:orange">不良</span>-->
|
<!-- <span v-else-if="item.qualityType==2" style="color:red">报废</span>-->
|
<!-- <span v-else>-</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">规格：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.attr }}
|
</div>
|
</div>
|
<!-- data.groupType == '2' ||-->
|
<!-- <div class="content_list_item_content_item" v-if="data.groupType == '3'">-->
|
<!-- <div class="content_list_item_content_item_label">生产批次：</div>-->
|
<!-- <div class="content_list_item_content_item_nr">-->
|
<!-- {{ item.batch ? item.batch : '-' }}-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="content_list_item_content_item">-->
|
<!-- <div class="content_list_item_content_item_label">工序名称：</div>-->
|
<!-- <div class="content_list_item_content_item_nr">-->
|
<!-- {{ item.procedureName }}-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="content_list_item_content_item" v-if="data.groupType == '3' || data.groupType == '2'">
|
<div class="content_list_item_content_item_label">仓库：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.wareHouseName ? item.wareHouseName : '-' }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item" v-if="data.groupType == '3' || data.groupType == '2'">
|
<div class="content_list_item_content_item_label">货位：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.locationName }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</van-pull-refresh>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import vSearch from "@/components/common/Search.vue"
|
import { getwStockExtList } from "@/apis/materialStorage"
|
import { judgmentPlatform } from "@/utils/utils"
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
const controlData = ref({
|
finished: false,
|
loading: false,
|
total: 0,
|
page: 0,
|
capacity: 10,
|
})
|
const data = ref({
|
materialName: '',
|
groupType: '3'
|
})
|
// 根据平台是否需要设置top
|
let status = ref<boolean>(false);
|
const refreshing = ref(false)
|
const list: any = ref([])
|
|
const groupTypes: Array<{name: string, id: string, isActive: boolean }> = reactive([
|
{ name: '默认', id: '3', isActive: true },
|
{ name: '物料', id: '1', isActive: false },
|
{ name: '物料+仓库', id: '2', isActive: false },
|
])
|
|
// 重置
|
const reset = () => {
|
controlData.value.page = 0;
|
data.value.groupType = '3'
|
controlData.value.finished = false;
|
groupTypes.forEach((item: {name: string, id: string, isActive: boolean }, index: number) => {
|
item.isActive = index === 0;
|
})
|
data.value.materialName = ''
|
list.value = [];
|
getLists();
|
}
|
|
onMounted(() => {
|
status.value = judgmentPlatform();
|
controlData.value.page = 0
|
})
|
|
const changeGroup = (i: any): void => {
|
groupTypes[i].isActive = !groupTypes[i].isActive;
|
data.value.groupType = groupTypes[i].id
|
for (const index in groupTypes) {
|
if (index != i) {
|
// console.log(index, i)
|
const item = groupTypes[index]
|
item.isActive = false
|
}
|
}
|
}
|
|
const loadData = (): void => {
|
getLists()
|
}
|
|
// 获取计划列表数据
|
const getLists = (): void => {
|
if (!controlData.value.finished) {
|
controlData.value.loading = true;
|
controlData.value.page = controlData.value.page + 1;
|
getwStockExtList({
|
capacity: controlData.value.capacity,
|
model: {
|
materialOrBatch: data.value.materialName,
|
groupType: data.value.groupType,
|
greaterZero: 1
|
},
|
page: controlData.value.page,
|
sorts: [
|
{
|
direction: "ASC",
|
property: "publishDate",
|
}
|
]
|
}).then((res: any) => {
|
if (refreshing.value) {
|
list.value = []
|
refreshing.value = false;
|
}
|
controlData.value.loading = false;
|
controlData.value.total = res.data.total;
|
if (res.code === 200) {
|
if (res.data.records.length < controlData.value.capacity) {
|
controlData.value.finished = true;
|
}
|
if (controlData.value.page === 1) {
|
list.value = res.data.records;
|
} else {
|
list.value.push(...res.data.records)
|
}
|
}
|
})
|
.catch((err: any) => {
|
controlData.value.loading = false;
|
controlData.value.finished = true;
|
if (refreshing.value) {
|
list.value = []
|
refreshing.value = false;
|
}
|
})
|
// .finally(() => {
|
// console.log('结束')
|
// controlData.value.loading = false;
|
// })
|
}
|
}
|
|
// 下拉刷新优化页面
|
const onRefresh = () => {
|
controlData.value.finished = false;
|
controlData.value.page = 0
|
controlData.value.loading = true;
|
getLists();
|
}
|
|
// 接收子组件传来的输入框值
|
const searchInput = (val: string): void => {
|
data.value.materialName = val;
|
submit()
|
}
|
|
// 搜索弹框提交
|
const submit = (): void => {
|
controlData.value.page = 0;
|
controlData.value.finished = false;
|
list.value = [];
|
getLists();
|
}
|
|
</script>
|
|
<style lang="scss">
|
.content {
|
.content_top {
|
top: 0 !important;
|
}
|
.content_search {
|
padding: 30px;
|
background: white;
|
position: sticky;
|
top: 88px;
|
z-index: 9;
|
.Search_item {
|
margin-bottom: 40px;
|
.Search_item_label {
|
font-size: 30px;
|
font-weight: 500;
|
color: #222222;
|
}
|
.Search_item_content {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 30px;
|
.tag {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
.tag_active {
|
background: $nav-color !important;
|
color: #ffffff !important;
|
}
|
.tag_item {
|
padding: 22px 26px;
|
box-sizing: border-box;
|
background: #f2f2f2;
|
border-radius: 8px;
|
font-size: 26px;
|
font-weight: 400;
|
color: #333333;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 22px;
|
margin-bottom: 22px;
|
}
|
}
|
span {
|
font-size: 26px;
|
font-weight: 400;
|
color: #333333;
|
margin: 0 30px;
|
}
|
.Search_item_content_a {
|
padding: 20px 0;
|
flex: 1;
|
background: #f7f7f7;
|
border-radius: 8px;
|
border: 1px solid #eeeeee;
|
font-size: 26px;
|
font-weight: 400;
|
color: #b2b2b2;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
.content_search_x {
|
height: 24px;
|
}
|
}
|
.content_total {
|
padding: 24px 30px;
|
background: #f7f7f7;
|
font-size: 24px;
|
font-weight: 400;
|
color: #666666;
|
}
|
.content_list {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.content_list_item {
|
background: #ffffff;
|
padding: 30px;
|
display: flex;
|
flex-direction: column;
|
border-bottom: 1px solid #ececec;
|
.content_list_item_sx {
|
margin-top: 20px;
|
}
|
.content_list_item_top {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.content_list_item_top_left {
|
span {
|
font-size: 32px;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
.content_list_item_top_right {
|
font-size: 26px;
|
font-weight: 400;
|
.created {
|
color: $nav-stateColor1 !important;
|
}
|
.warning {
|
color: $nav-stateColor5 !important;
|
}
|
.green {
|
color: $nav-stateColor6 !important;
|
}
|
.info {
|
color: $nav-stateColor3 !important;
|
}
|
}
|
}
|
.content_list_item_content {
|
padding: 24px 30px;
|
background: #f7f7f7;
|
border-radius: 16px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
margin-top: 32px;
|
.content_list_item_content_item {
|
width: 100%;
|
display: flex;
|
margin-top: 24px;
|
&:nth-child(1) {
|
margin-top: 0 !important;
|
}
|
.content_list_item_content_item_label {
|
font-size: 24px;
|
font-weight: 400;
|
color: #666666;
|
flex-shrink: 0;
|
}
|
.content_list_item_content_item_nr {
|
font-size: 24px;
|
font-weight: 400;
|
color: #222222;
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
