Commit 752a0d45 authored by 李苏's avatar 李苏 💬

叫料添加请求蒙层,防止快速切换查询网络请求延迟产生问题

parent 75772db5
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
<block slot="backText">返回</block> <block slot="backText">返回</block>
<block slot="content">工位叫料</block> <block slot="content">工位叫料</block>
</cu-custom> </cu-custom>
<!-- 添加蒙层 -->
<orange-fullloading :loadicon='loadicon' :loadshow='loadshow' bgcolor="rgba(128, 128, 128, 0.5)" :text="loadtext"></orange-fullloading>
<view class="cu-bar bg-white solid-bottom"> <view class="cu-bar bg-white solid-bottom">
<view class="action"> <view class="action">
<text class="cuIcon-title text-orange "></text> 工位列表 <text class="cuIcon-title text-orange "></text> 工位列表
...@@ -109,6 +111,9 @@ ...@@ -109,6 +111,9 @@
}, },
data() { data() {
return { return {
loadshow:false,
loadicon:'/static/loading.png',
loadtext:'数据请求中...',
/* 配盘点数据结构 */ /* 配盘点数据结构 */
ppdInfo:{ ppdInfo:{
ph:'', ph:'',
...@@ -228,6 +233,7 @@ ...@@ -228,6 +233,7 @@
gwid:gwid gwid:gwid
// "ppdid":ppdid|| '8A8239D18581021E0185A4B7D5C7000A', // "ppdid":ppdid|| '8A8239D18581021E0185A4B7D5C7000A',
}).then(res=>{ }).then(res=>{
if(res&&res.records){
const {records}=res const {records}=res
/* 铺数据 */ /* 铺数据 */
this.ppdInfo.ph=records.ph||null this.ppdInfo.ph=records.ph||null
...@@ -246,6 +252,8 @@ ...@@ -246,6 +252,8 @@
this.ppdInfo.upptzdList=records.upptzdList||[] this.ppdInfo.upptzdList=records.upptzdList||[]
this.ppdInfo.wlxxList=records.wlxxList||[] this.ppdInfo.wlxxList=records.wlxxList||[]
console.log(this.ppdInfo,'this.ppdInfo') console.log(this.ppdInfo,'this.ppdInfo')
}
}) })
}, },
backWarehouse(){ backWarehouse(){
...@@ -506,6 +514,7 @@ ...@@ -506,6 +514,7 @@
}, },
selectedGw(e, item) { selectedGw(e, item) {
this.loadshow=true
this.wlinfor={} this.wlinfor={}
this.status = item.status this.status = item.status
let _self = this; let _self = this;
...@@ -517,18 +526,24 @@ ...@@ -517,18 +526,24 @@
this.emptyPpdInfo() this.emptyPpdInfo()
queryAgvInfo({gwid:this.gwinfor[this.gwSelcetdIndex].mapdatacode}).then(e => { queryAgvInfo({gwid:this.gwinfor[this.gwSelcetdIndex].mapdatacode}).then(e => {
this.agvinfo = e.records this.agvinfo = e.records
this.loadshow=false
}) })
} else if ( } else if (
this.status == "E" this.status == "E"
) { ) {
this.agvinfo = {} this.agvinfo = {}
this.loadshow=false
// 请求配盘点信息 // 请求配盘点信息
} }
/* 查询所有的配盘点状态 */ /* 查询所有的配盘点状态 */
this.apiQueryCanCall(this.gwinfor[this.gwSelcetdIndex].ppdid,this.gwinfor[this.gwSelcetdIndex].status,this.gwinfor[this.gwSelcetdIndex].id) this.apiQueryCanCall(this.gwinfor[this.gwSelcetdIndex].ppdid,this.gwinfor[this.gwSelcetdIndex].status,this.gwinfor[this.gwSelcetdIndex].id)
/* 两秒钟后自动取消蒙层 */
setTimeout(()=>{
this.loadshow=false
},2000)
}, },
/* 查询工位 */ /* 查询工位 */
}, },
......
## 1.0.0(2021-03-11)
- 第一个版本
<template>
<view v-if="loadshow" class="fullloading" :style="{backgroundColor: bgcolor}">
<image :src="loadicon" :style="{width:iconwidth+'rpx',height:iconheight+'rpx'}"></image>
<view class="text" v-if="text" :style="{fontSize:textsize+'rpx',color:textcolor}">{{text}}</view>
</view>
</template>
<script>
export default {
props: {
loadicon: {
type: String,
default() {
return ''
}
},
text: {
type: String,
default() {
return ''
}
},
iconwidth: {
type: [Number, String],
default() {
return 110
}
},
iconheight: {
type: [Number, String],
default() {
return 110
}
},
textcolor: {
type: String,
default() {
return '#000000'
}
},
textsize: {
type: [Number, String],
default() {
return 30
}
},
bgcolor: {
type: String,
default() {
return '#ffffff'
}
},
loadshow: {
type: Boolean,
default() {
return true
}
},
},
data() {
return {
loadingImg: '/static/loading.gif',
errorImg: ''
}
},
methods: {
}
}
</script>
<style scoped>
.fullloading{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
z-index: 99999;
}
.fullloading image{
width: 110rpx;
height: 110rpx;
margin-top: 50%;
}
</style>
\ No newline at end of file
{
"id": "orange-fullloading",
"displayName": "通用全屏加载组件,支持自定义图标和文字及其他样式",
"version": "1.0.0",
"description": "支持小程序,APP,H5的通用全屏加载组件,便于页面数据缓冲显示,提供用户更友好的浏览体验",
"keywords": [
"全屏加载",
"全屏",
"加载",
"loading",
"load"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "2677667678"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
### 基本用法
``template`` 中使用组件
```html
<orange-fullloading :loadicon="loadicon" text="加载中"></orange-fullloading>
```
## API
### orange-fullloading Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|loadicon |String |- |加载图标路径 |
|loadshow |Boolean |true |是否显示 |
|bgcolor |String |#ffffff |全屏加载页面背景色 |
|iconwidth |Number |110 |加载图标宽度,单位rpx,填写数字即可 |
|iconheight |Number |true |加载图标高度,单位rpx,填写数字即可 |
|text |String |- |加载文字,不填则不显示 |
|textcolor |String |#000000 |加载文字颜色 |
|textsize |Number |30 |加载文字大小,单位rpx,填写数字即可 |
## 问题交流
使用过程存在疑问可加QQ群:321879919 在线解决
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment