131 lines
4.3 KiB
Vue
131 lines
4.3 KiB
Vue
<!--MiniLoader库存列表-->
|
|
<template>
|
|
<div>
|
|
<div class="background" style="height: 100%">
|
|
<div class="title">库存表</div>
|
|
<el-row style="margin-left: 20px; margin-top: 10px">
|
|
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="19vh"
|
|
:cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" ref="tableRef">
|
|
<el-table-column prop="location" label="库位" />
|
|
<el-table-column prop="goodsId" label="物料编号"/>
|
|
<el-table-column prop="batch" label="批次" />
|
|
<el-table-column prop="goodsNum" label="数量" />
|
|
<el-table-column prop="status" label="状态" />
|
|
<el-table-column prop="inData" label="入库日期" />
|
|
</el-table>
|
|
</el-row>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import 《组件名称》 from '《组件路径》 ';
|
|
|
|
export default {
|
|
// import 引入的组件需要注入到对象中才能使用
|
|
components: {},
|
|
props: [],
|
|
emits: [],
|
|
data() {
|
|
// 这里存放数据
|
|
return {
|
|
tableData:[
|
|
{location: "T111", goodsId: "24234", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "S124434", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "500.30", status: "111", inData: "9999999"},
|
|
{location: "T111", goodsId: "423423", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "1423423411", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "24234", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "S124434", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "500.30", status: "111", inData: "9999999"},
|
|
{location: "T111", goodsId: "423423", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
|
]
|
|
}
|
|
},
|
|
// 计算属性 类似于 data 概念
|
|
computed: {},
|
|
// 监控 data 中的数据变化
|
|
watch: {},
|
|
// 方法集合
|
|
methods: {
|
|
autoRoll() {
|
|
const tableBody = this.$refs.tableRef.$el.querySelector('.el-scrollbar__wrap');
|
|
if (tableBody) {
|
|
setInterval(() => {
|
|
if(this.tableData === undefined || this.tableData.length === 0) {
|
|
return
|
|
}
|
|
tableBody.scrollTop += 1
|
|
if (tableBody.clientHeight + tableBody.scrollTop === tableBody.scrollHeight) {
|
|
tableBody.scrollTop = 0
|
|
}
|
|
}, 50)
|
|
} else {
|
|
console.log('没有找到滚动位置')
|
|
}
|
|
}
|
|
},
|
|
// 组合式 API
|
|
setup() {
|
|
},
|
|
// 创建之前
|
|
beforeCreate() {
|
|
},
|
|
// 创建完成(可以访问 this 实例)
|
|
created() {
|
|
},
|
|
// 生命周期 - 挂载之前
|
|
beforeMount() {
|
|
},
|
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
|
mounted() {
|
|
this.autoRoll()
|
|
},
|
|
// 更新之前
|
|
beforeUpdate() {
|
|
},
|
|
// 更新之后
|
|
updated() {
|
|
},
|
|
// 销毁之前
|
|
beforeUnmount() {
|
|
},
|
|
// 销毁完成
|
|
unmounted() {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.title {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
color: #e2e2e2;
|
|
padding-left: 25px;
|
|
padding-top: 18px;
|
|
}
|
|
.background {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.title:before {
|
|
position: absolute;
|
|
height: 1.2rem;
|
|
width: 4px;
|
|
background: #49bcf7;
|
|
border-radius: 5px;
|
|
content: "";
|
|
left: 15px;
|
|
top: 22px;
|
|
}
|
|
</style> |