修改显示字段，增加信息弹窗，保存账号，增加websocket定时刷新，增加校验功能
This commit is contained in:
170
components/GridDetail.vue
Normal file
170
components/GridDetail.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="detail_wraper" :class="show ? 'detailshow' : 'detailhide'" >
|
||||
<view class="allwidth">
|
||||
<view v-if="data.type === 1" class="allwidth font1">{{data.data.djbh}}</view>
|
||||
<table v-if="data.type === 1" class="detail_table">
|
||||
<tr>
|
||||
<td>发起部门</td>
|
||||
<td>{{data.data.bmmc}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>去向</td>
|
||||
<td>{{data.data.zzmc}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>仓库名称</td>
|
||||
<td>{{data.data.ckmc}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>状态</td>
|
||||
<td>{{data.data.djzt}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>制单日期</td>
|
||||
<td>{{data.data.cjsj}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>制单人</td>
|
||||
<td>{{data.data.cjr}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>业务日期</td>
|
||||
<td>{{data.data.ywrq}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>操作日期</td>
|
||||
<td>{{data.data.update_time}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>操作人</td>
|
||||
<td>{{data.data.update_name}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>备注</td>
|
||||
<td>{{data.data.remark}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table v-if="data.type === 2" class="detail_table">
|
||||
<tr>
|
||||
<td>仓库名称</td>
|
||||
<td>{{data.data.ckmc}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>物料编号</td>
|
||||
<td>{{data.data.wlbm}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>物料名称</td>
|
||||
<td>{{data.data.wlmc}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>单位</td>
|
||||
<td>{{data.data.jldw}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>库位</td>
|
||||
<td>{{data.data.kwbm}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数量</td>
|
||||
<td>{{data.data.sl}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{crType === 'IN'? '已入数量':'已出数量'}}</td>
|
||||
<td>{{data.data.czsl}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>剩余数量</td>
|
||||
<td>{{data.data.sysl}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>库存</td>
|
||||
<td>{{data.data.kcsl}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>操作日期</td>
|
||||
<td>{{data.data.update_time}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>操作人</td>
|
||||
<td>{{data.data.update_name}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>备注</td>
|
||||
<td>{{data.data.remark}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="show" class="modal" @tap="$emit('closeDetail')"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"GridDetail",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
show: Boolean,
|
||||
data: Object,
|
||||
crType: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '../common/style/mixin.styl';
|
||||
.detailshow {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.detailhide {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.detail_wraper
|
||||
position fixed
|
||||
_wh(30%,100%)
|
||||
z-index 101
|
||||
top 0
|
||||
left 0
|
||||
background-color rgba(255,255,255,.95)
|
||||
box-shadow 2px 0 4px 0px rgba(1, 27, 46, 90%)
|
||||
overflow-y auto
|
||||
padding 30px 10px
|
||||
transition: all .3s linear;
|
||||
.modal
|
||||
background-color rgba(0,0,0,0.1)
|
||||
.font1
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
line-height: 28px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
.detail_table
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width 100%
|
||||
border-top 1px solid #0490DD
|
||||
border-left 1px solid #0490DD
|
||||
border-right 1px solid #0490DD
|
||||
td
|
||||
vertical-align middle
|
||||
text-align center
|
||||
padding 5px 2px
|
||||
border-bottom 1px solid #0490DD
|
||||
&:nth-child(1)
|
||||
width 27%
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
border-right 1px solid #0490DD
|
||||
&:nth-child(2)
|
||||
width 73%
|
||||
font-size: 12px;
|
||||
line-height: 13px;
|
||||
color: #333;
|
||||
</style>
|
||||
@@ -3,12 +3,20 @@
|
||||
<text :disabled="page <= 1" @tap.stop="gotoPage(page - 1)"><</text>
|
||||
<text v-for="item in pages" :key="getItemKey(item)" :class="{ active: item === page, ellipsis: item === '...' }" @tap.stop="gotoPage(item)">{{ item }}</text>
|
||||
<text :disabled="page >= totalPages" @tap.stop="gotoPage(page + 1)">></text>
|
||||
<text class="page_txt mgl10">跳转到</text>
|
||||
<input type="number" class="page_input" v-model="val" @blur.stop="inputPage">
|
||||
<text class="page_txt">页</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
data () {
|
||||
return {
|
||||
val: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
total: { // 总条目数
|
||||
type: Number,
|
||||
@@ -55,7 +63,13 @@ export default {
|
||||
if (page > 0 && page <= this.totalPages) {
|
||||
this.$emit('page-change', page)
|
||||
}
|
||||
}
|
||||
},
|
||||
inputPage() { // 跳转到指定页码
|
||||
const numericValue = Number(this.val)
|
||||
if (numericValue > 0 && numericValue <= this.totalPages) {
|
||||
this.$emit('page-change', numericValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -66,8 +80,9 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
text {
|
||||
text,.page_input {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
@@ -85,4 +100,18 @@ text.active {
|
||||
text.ellipsis {
|
||||
cursor: default;
|
||||
}
|
||||
.page_input {
|
||||
width: 50px
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.page_txt {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
.mgl10 {
|
||||
margin-left: 20px
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user