You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
457 lines
13 KiB
457 lines
13 KiB
<template>
|
|
<view>
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" :autoBack="true" titleStyle="font-weight:600">
|
|
<view slot="center" style="display: flex;align-items: center;flex-direction: column;">
|
|
<view>
|
|
<span style="font-size: 30rpx; font-weight: 600;color: #333333;margin-right: 10rpx;">{{ changku }}</span>
|
|
<!-- <image style="width: 32rpx; height: 32rpx;" src="../../../static/images/wuzhi/zhuanhuan.png"></image> -->
|
|
</view>
|
|
<span style="font-size: 20rpx; font-weight: 600;color: #b1b1b1;margin-right: 10rpx;">物资预警</span>
|
|
</view>
|
|
<view slot="right" style="display: flex;align-items: center;flex-direction: column;" @click="popCheBian()">
|
|
<image style="width: 48rpx; height: 48rpx;" src="../../../../static/images/wuzhi/qiehuancangku.png"></image>
|
|
<span style="font-size: 18rpx; font-weight: 600;margin-right: 10rpx;color: #1296db;">切换仓库</span>
|
|
</view>
|
|
</u-navbar>
|
|
<!-- 预警信息 -->
|
|
<!-- 分类 -->
|
|
<view style="background-color: #fff;">
|
|
<!-- 头部 -->
|
|
<view class="sortHead">
|
|
<image src="../../../../static/images/Yjplan/sort.png" style="width: 36rpx;height: 36rpx;margin-right: 22rpx;"></image>
|
|
<span class="sortTitle">预警统计</span>
|
|
</view>
|
|
<!-- 卡片 -->
|
|
<view class="sortCard">
|
|
<view class="zonghe">
|
|
<view class="title">库存预警(个)</view>
|
|
<view class="count">{{ kucunyuJing.length }}</view>
|
|
</view>
|
|
<view class="zhuanxiang">
|
|
<view class="title">到期时间预警(个)</view>
|
|
<view class="count">{{ timeyuJing.length }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 库存预警 -->
|
|
<scroll-view scroll-y="true" style="height: calc(100vh - 180px);" enableBackToTop="true">
|
|
<uni-list>
|
|
<uni-list-item v-for="(item, index) in kucunyuJing" :key="index" clickable>
|
|
<view slot="header" style="display: flex;">
|
|
<u-album
|
|
singleSize="72"
|
|
multipleMode="scaleToFill"
|
|
singleMode="scaleToFill"
|
|
multipleSize="72"
|
|
rowCount="1"
|
|
style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
|
|
:urls="item.showUrls == null ? [] : item.showUrls"
|
|
maxCount="1"
|
|
></u-album>
|
|
</view>
|
|
<view slot="body" style="display: flex;flex-direction: column;margin-left: 12rpx;flex: 1;">
|
|
<span style="font-size: 28rpx;margin-bottom: 5rpx;">{{ item.materialName }}({{ item.materialUnit }})</span>
|
|
<span style="font-size: 22rpx;margin-bottom: 5rpx;">{{ item.materialSpecification == null ? '暂无规格' : item.materialSpecification }}</span>
|
|
<view style="margin-bottom: 5rpx;">
|
|
<span style="font-size: 25rpx;margin-right: 15rpx;">标准数量:{{ item.num }}</span>
|
|
<span style="font-size: 25rpx;color: red;">实际数量:{{ item.realnum }}</span>
|
|
</view>
|
|
</view>
|
|
<view slot="footer" style="display: flex; flex-direction: column; align-items: center; justify-content: space-between;">
|
|
<view class=""><uni-badge text="库存预警"></uni-badge></view>
|
|
<span style="font-size: 24rpx;margin-top: 15rpx;">{{ item.materialCategory }}</span>
|
|
</view>
|
|
</uni-list-item>
|
|
<!-- 时间预警 -->
|
|
<uni-list-item v-for="(item, index) in timeyuJing" :key="index" clickable title="列表右侧显示角标">
|
|
<view slot="header" style="display: flex;">
|
|
<u-album
|
|
singleSize="72"
|
|
multipleMode="scaleToFill"
|
|
singleMode="scaleToFill"
|
|
multipleSize="72"
|
|
rowCount="1"
|
|
style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
|
|
:urls="item.showUrls == null ? [] : item.showUrls"
|
|
maxCount="1"
|
|
></u-album>
|
|
</view>
|
|
<view slot="body" style="display: flex;flex-direction: column;margin-left: 12rpx;flex: 1;">
|
|
<span style="font-size: 28rpx;margin-bottom: 5rpx;">{{ item.materialName }}({{ item.materialUnit }})</span>
|
|
<span style="font-size: 22rpx;margin-bottom: 5rpx;">{{ item.materialSpecification == null ? '暂无规格' : item.materialSpecification }}</span>
|
|
<view style="margin-bottom: 5rpx;">
|
|
<span style="font-size: 25rpx;margin-right: 15rpx;color: red;">有效期至:{{ item.yxTime }}</span>
|
|
</view>
|
|
</view>
|
|
<view slot="footer" style="display: flex; flex-direction: column; align-items: center; justify-content: space-between;">
|
|
<view class=""><uni-badge type="warning" text="到期时间预警"></uni-badge></view>
|
|
<span style="font-size: 24rpx;margin-top: 15rpx;">{{ item.materialCategory }}</span>
|
|
</view>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
<uni-list v-if="timeyuJing.length == '0' && kucunyuJing.length == '0'"><uni-list-item title="本仓库暂无预警信息"></uni-list-item></uni-list>
|
|
</scroll-view>
|
|
|
|
<!-- 侧边栏弹窗 -->
|
|
<u-popup :show="wuzhiCheBian" mode="left" :customStyle="{ width: '70vw' }" :safeAreaInsetBottom="true" @close="offPop()">
|
|
<view style="height: 50px;margin-bottom: 10rpx;"></view>
|
|
<u-search placeholder="请输入仓库名称搜索" v-model="keyword" :clearabled="false" :showAction="false"></u-search>
|
|
<scroll-view scroll-y="true" style="height: 95vh;" scroll-with-animation="true">
|
|
<view class="status_bar"></view>
|
|
<uni-list>
|
|
<uni-list-item v-for="(item, index) in titlelist" :title="`${index + 1}.${item.name}`" :clickable="true" @click="xuanZheChangKu(item)"></uni-list-item>
|
|
</uni-list>
|
|
<view style="height: 50px;"></view>
|
|
</scroll-view>
|
|
</u-popup>
|
|
<!-- 侧边栏弹窗 -->
|
|
<u-popup :show="wuzhiXiangQing" mode="bottom" :round="15" :customStyle="{ width: '100vw' }" :safeAreaInsetBottom="true" @close="offPopXiangQing()">
|
|
<scroll-view scroll-y="true" style="height: 36vh;display: flex;margin-left: 30rpx;" scroll-with-animation="true">
|
|
<view
|
|
style="display: flex;margin-bottom: 20rpx;width: 100%; margin-top: 30rpx;padding-bottom: 15rpx; align-items: center;
|
|
justify-content: space-between;"
|
|
>
|
|
<view style="width: 165rpx;height: 165rpx;border: 1px solid #EFEFEF;">
|
|
<image style="width: 100%;height: 100%;" src="../../../../static/mine/edit.png"></image>
|
|
</view>
|
|
<view style=" width: 75%;display: flex;flex-direction: column;justify-content: space-between; align-items: flex-start;">
|
|
<span style="font-weight: 600;font-size: 35rpx;width: 100%;margin-bottom: 10rpx;">{{ kucunSigle.materialName }}</span>
|
|
<span style="font-size: 28rpx;color: #999999;margin-bottom: 10rpx;">物资类型:{{ kucunSigle.materialCategory }}</span>
|
|
<view style="width: 100%; display: flex; justify-content: flex-start;align-items: center;">
|
|
<view class="count">
|
|
<view class="basicCount" v-if="kucunSigle.text4">
|
|
<image src="../../../../static/images/zhuye/basic.png" alt=""></image>
|
|
标准数量：{{ kucunSigle.text4 }} {{ kucunSigle.materialUnit }}
|
|
</view>
|
|
<view class="currentCount">
|
|
<image src="../../../../static/images/zhuye/current.png" alt=""></image>
|
|
当前数量:{{ kucunSigle.num }} {{ kucunSigle.materialUnit }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style=" display: flex;flex-direction: column;align-items: flex-start;">
|
|
<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
|
|
入库批次:
|
|
<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.batch }}</p>
|
|
</span>
|
|
<span v-if="kucunSigle.materialSpecification" style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
|
|
主要规格:
|
|
<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.materialSpecification }}</p>
|
|
</span>
|
|
<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
|
|
所属部门:
|
|
<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.unitName }}</p>
|
|
</span>
|
|
<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
|
|
所属库房:
|
|
<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.houseName }}</p>
|
|
</span>
|
|
<span v-if="kucunSigle.yxTime" style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
|
|
有效期至:
|
|
<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.yxTime }}</p>
|
|
</span>
|
|
</view>
|
|
</scroll-view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
//查询仓库列表
|
|
import { listWarehouse, listCategory, getCategory, listYj } from '@/api/indexpage/yjWz/warehouse.js';
|
|
//查询库存物资
|
|
import { listStock, getStock } from '@/api/indexpage/yjWz/kuCun.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
//侧边栏
|
|
menuScrollIntoView: '',
|
|
cateScrollTop: 0,
|
|
current: 0,
|
|
//侧边栏
|
|
timer: '', //防抖函数
|
|
keyword: '',
|
|
changku: '仓库名称', // 仓库名称
|
|
changkuId: '', //仓库ID
|
|
wuzhiCheBian: false,
|
|
titlelist: [], //场库列表
|
|
// 物资列表
|
|
wuzhiXiangQing: false,
|
|
kucunLeftMenu: [],
|
|
kucunyuJing: [],
|
|
timeyuJing: [],
|
|
kucunSigle: {},
|
|
listDictionaryParams: {
|
|
houseId: '',
|
|
categoryId: ''
|
|
}
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
//获取场库id和名字
|
|
let name = options.ckName;
|
|
let id = options.ckId;
|
|
this.changku = name;
|
|
this.changkuId = id;
|
|
this.getChangKu();
|
|
this.getlistYj();
|
|
},
|
|
watch: {
|
|
keyword(newdata, olddata) {
|
|
let that = this;
|
|
//防抖函数
|
|
clearTimeout(that.timer);
|
|
that.timer = setTimeout(function() {
|
|
if (newdata === '') {
|
|
//发场库请求
|
|
listWarehouse().then(res => {
|
|
that.titlelist = res.rows;
|
|
});
|
|
} else {
|
|
//发场库请求
|
|
listWarehouse({
|
|
name: newdata
|
|
}).then(res => {
|
|
that.titlelist = res.rows;
|
|
});
|
|
}
|
|
}, 600);
|
|
}
|
|
},
|
|
methods: {
|
|
//物资详情
|
|
wuZhiXiangQing(item) {
|
|
//显示弹窗
|
|
this.wuzhiXiangQing = true;
|
|
this.getStockById(item.id);
|
|
//传入弹窗内容
|
|
},
|
|
offPopXiangQing() {
|
|
this.wuzhiXiangQing = false;
|
|
},
|
|
|
|
getlistYj() {
|
|
listYj(this.changkuId).then(res => {
|
|
//时间预警
|
|
this.timeyuJing = res.data[1];
|
|
//库存预警
|
|
this.kucunyuJing = res.data[0];
|
|
// this.kucunlist = res.rows;
|
|
});
|
|
},
|
|
getStockById(id) {
|
|
getStock(id).then(res => {
|
|
this.kucunSigle = res.data;
|
|
});
|
|
},
|
|
|
|
getChangKu() {
|
|
//发场库请求
|
|
listWarehouse().then(res => {
|
|
this.titlelist = res.rows;
|
|
});
|
|
},
|
|
//弹出侧边栏
|
|
popCheBian() {
|
|
//弹出侧边栏
|
|
this.wuzhiCheBian = true;
|
|
},
|
|
offPop() {
|
|
//弹出侧边栏
|
|
this.wuzhiCheBian = false;
|
|
//清空搜索
|
|
this.keyword = '';
|
|
},
|
|
xuanZheChangKu(item) {
|
|
//获取仓库名称和ID
|
|
this.changku = item.name;
|
|
this.changkuId = item.id;
|
|
this.getlistYj();
|
|
//弹出侧边栏
|
|
this.wuzhiCheBian = false;
|
|
//清空搜索
|
|
this.keyword = '';
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sortHead {
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 36rpx 30rpx;
|
|
|
|
.sortTitle {
|
|
font-family: Noto Sans S Chinese;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.sortCard {
|
|
padding: 0 30rpx;
|
|
padding-bottom: 30rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20rpx;
|
|
|
|
.zonghe {
|
|
width: 336rpx;
|
|
height: 140rpx;
|
|
background: url('../../../../static/images/Yjplan/zonghe.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-right: 19rpx;
|
|
}
|
|
|
|
.zhuanxiang {
|
|
width: 336rpx;
|
|
height: 140rpx;
|
|
background: url('../../../../static/images/Yjplan/qita.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title {
|
|
font-family: Noto Sans S Chinese;
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #4d4d4d;
|
|
line-height: 40rpx;
|
|
padding: 18rpx 30rpx;
|
|
}
|
|
|
|
.count {
|
|
font-family: DINPro;
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: #353535;
|
|
line-height: 40rpx;
|
|
padding: 0 40rpx;
|
|
}
|
|
}
|
|
.count {
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
font-family: Noto Sans S Chinese;
|
|
font-weight: normal;
|
|
color: #999999;
|
|
}
|
|
|
|
.basicCount {
|
|
font-size: 20rpx;
|
|
font-family: Noto Sans S Chinese;
|
|
font-weight: normal;
|
|
color: #0098df;
|
|
// width: 200rpx;
|
|
// height: 40rpx;
|
|
background: #e8f8ff;
|
|
border: 1px solid #0098df;
|
|
border-radius: 4rpx;
|
|
margin-right: 10rpx;
|
|
padding: 6rpx 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
height: 22rpx;
|
|
width: 20rpx;
|
|
}
|
|
}
|
|
|
|
.currentCount {
|
|
font-size: 20rpx;
|
|
font-family: Noto Sans S Chinese;
|
|
font-weight: normal;
|
|
color: #ffa132;
|
|
// width: 200rpx;
|
|
// height: 40rpx;
|
|
background: #fff9f1;
|
|
border: 1px solid #ffa132;
|
|
border-radius: 4rpx;
|
|
padding: 6rpx 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
height: 22rpx;
|
|
width: 20rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
// flex: 1;
|
|
// overflow: hidden;
|
|
// width: 100%;
|
|
|
|
display: flex;
|
|
|
|
.menus {
|
|
width: 190rpx;
|
|
// height: 100vh;
|
|
// overflow: hidden;
|
|
background-color: #f7f7f7;
|
|
|
|
.wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.menu {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 30rpx 20rpx;
|
|
font-size: 26rpx;
|
|
color: black;
|
|
position: relative;
|
|
|
|
&:nth-last-child(1) {
|
|
margin-bottom: 130rpx;
|
|
}
|
|
|
|
&.current {
|
|
border-left: 3px solid #52a3ff;
|
|
background-color: #ffffff;
|
|
color: #52a3ff;
|
|
font-weight: 600;
|
|
width: 195rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods {
|
|
flex: 1;
|
|
height: calc(100vh - 50px);
|
|
overflow: hidden;
|
|
background-color: #ffffff;
|
|
|
|
.wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10rpx 10rpx;
|
|
|
|
.ads {
|
|
height: calc(300 / 550 * 510rpx);
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
|
|
padding-bottom: 130rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|