224 lines
6.5 KiB
Vue
224 lines
6.5 KiB
Vue
<template>
|
||
<div>
|
||
<el-button type="primary" class="div_width" @click="scan">扫码回收</el-button>
|
||
<div>
|
||
<el-table
|
||
v-loading="dataListLoading"
|
||
:data="findEqInfo.list"
|
||
:show-header="showHeader"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column prop="brandName" style="width: 100%"></el-table-column>
|
||
<el-table-column prop="code" style="width: 100%"></el-table-column>
|
||
<el-table-column prop="type" style="width: 100%"></el-table-column>
|
||
<el-table-column prop="specType" style="width: 100%"></el-table-column>
|
||
<slot></slot>
|
||
<template slot="append">
|
||
<!--
|
||
@infinite: 滚动事件回调函数,当滚动到距离滚动父元素底部特定距离的时候，会被调用
|
||
distance: 这是滚动的临界值。default: 100; 如果到滚动父元素的底部距离小于这个值，那么 loadMore 回调函数就会被调用。
|
||
spinner: 通过这个属性，你可以选择一个你最喜爱旋转器作为加载动画
|
||
'default' | 'bubbles' | 'circles' | 'spiral' | 'waveDots'
|
||
direction: 如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候，调用on-infinite函数
|
||
'top' | 'bottom'
|
||
forceUseInfiniteWrapper: (boolean | string) 强制指定滚动容器，使用CSS 选择器
|
||
identifier: 识别号，改变时刷新
|
||
-->
|
||
<infinite-loading
|
||
@infinite="loadMore"
|
||
ref="infiniteLoading"
|
||
:distance="100"
|
||
spinner="circles"
|
||
:identifier="infiniteId"
|
||
|
||
>
|
||
<!-- orce-use-infinite-wrapper 属性在存在多个 el-table 需要更详细的css选择器 -->
|
||
<div class="no-more" slot="no-more">我~是有底线的 (～￣▽￣)～</div>
|
||
<div class="no-more" slot="no-results">暂无结果 Ծ‸Ծ</div>
|
||
<div class="no-more" slot="error">出错了 (╯‵□′)╯︵┻━┻</div>
|
||
</infinite-loading>
|
||
</template>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</template>>
|
||
<script>
|
||
import { apiFindStaffDevice } from "@/api/api_equipment";
|
||
import InfiniteLoading from "vue-infinite-loading";
|
||
import * as dd from "dingtalk-jsapi";
|
||
export default {
|
||
// 自定义指令
|
||
// vue 官方文档：https://cn.vuejs.org/v2/guide/custom-directive.html
|
||
components: {
|
||
InfiniteLoading
|
||
},
|
||
data() {
|
||
return {
|
||
isShowSearch: true,
|
||
data: [],
|
||
name: "",
|
||
categorys: "",
|
||
input: "",
|
||
dataListLoading: false,
|
||
strFirs: "",
|
||
strSec: "",
|
||
strThir: "",
|
||
idFirs: "",
|
||
idSec: "",
|
||
idThir: "",
|
||
typeIndex: 0, //0现在是1级 1二级2三级
|
||
showHeader: false,
|
||
findEqInfo: {
|
||
employee: false,
|
||
userId: 0,
|
||
currPage: 1,
|
||
pageSize: 20,
|
||
totalPage: 1,
|
||
list: []
|
||
},
|
||
infiniteId: new Date()
|
||
};
|
||
},
|
||
created() {
|
||
// this.handleGetImgCaptcha()
|
||
},
|
||
mounted() {
|
||
if (this.$route.query.type == 3) {
|
||
//个人
|
||
this.findEqInfo.employee = true;
|
||
} else if (this.$route.query.type == 4) {
|
||
//使用地
|
||
this.findEqInfo.employee = false;
|
||
}
|
||
this.findEqInfo.userId = this.$route.query.id;
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
console.log("获取数据");
|
||
console.log(this.name);
|
||
console.log(this.categorys);
|
||
this.dataListLoading = true;
|
||
apiFindStaffDevice(this.findEqInfo).then((data) => {
|
||
console.log(data);
|
||
if (data && data.code == 200) {
|
||
this.findEqInfo.list = [...this.findEqInfo.list, ...data.data.list]
|
||
this.findEqInfo.currPage = data.data.currPage
|
||
this.findEqInfo.totalPage = data.data.totalPage
|
||
console.log("currPage", this.findEqInfo.currPage)
|
||
console.log("totalPage", this.findEqInfo.totalPage)
|
||
if(this.findEqInfo.currPage == this.findEqInfo.totalPage){
|
||
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
|
||
}else{
|
||
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
|
||
}
|
||
} else {
|
||
this.findEqInfo.list = []
|
||
this.findEqInfo.currPage = 1
|
||
this.findEqInfo.totalPage = 1
|
||
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
|
||
}
|
||
this.dataListLoading = false;
|
||
//this.$refs.InfiniteLoading.$emit("$infiniteLoading:loaded");
|
||
});
|
||
},
|
||
loadMore($state) {
|
||
console.log("loadMore")
|
||
console.log("currPage", this.findEqInfo.currPage)
|
||
console.log("totalPage", this.findEqInfo.totalPage)
|
||
if(this.findEqInfo.currPage < this.findEqInfo.totalPage){
|
||
this.findEqInfo.currPage++
|
||
this.getData()
|
||
/*apiFindStaffDevice(this.findEqInfo).then((data) => {
|
||
console.log(data);
|
||
if (data && data.code == 200) {
|
||
this.findEqInfo.list = [...this.findEqInfo.list, ...data.data.list]
|
||
this.findEqInfo.currPage = data.data.currPage
|
||
this.findEqInfo.totalPage = data.data.totalPage
|
||
console.log("currPage", this.findEqInfo.currPage)
|
||
console.log("totalPage", this.findEqInfo.totalPage)
|
||
if(this.findEqInfo.currPage == this.findEqInfo.totalPage){
|
||
$state.complete()// 全部加载完成
|
||
}else{
|
||
$state.loaded()//本次加载完成
|
||
}
|
||
|
||
} else {
|
||
this.findEqInfo.list = []
|
||
this.findEqInfo.currPage = 1
|
||
this.findEqInfo.totalPage = 1
|
||
$state.complete()// 全部加载完成
|
||
}
|
||
})*/
|
||
}
|
||
|
||
},
|
||
scan() {
|
||
this.$cookie.set('idUser', this.findEqInfo.userId)
|
||
this.$router.push({name: 'devicedetail', query: {type: 4}})
|
||
},
|
||
reset () {
|
||
this.findEqInfo.list = []
|
||
this.findEqInfo.currPage = 1
|
||
this.findEqInfo.totalPage = 1
|
||
this.infiniteId += 1
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.el-row {
|
||
margin-bottom: 20px;
|
||
}
|
||
.el-col {
|
||
border-radius: 10px;
|
||
}
|
||
.bg-purple-dark {
|
||
background: #99a9bf;
|
||
}
|
||
.bg-purple {
|
||
background: #d3dce6;
|
||
}
|
||
.bg-purple-light {
|
||
background: #e5f2f1;
|
||
}
|
||
.grid-content {
|
||
border-radius: 4px;
|
||
min-height: 36px;
|
||
}
|
||
.row-bg {
|
||
padding: 10px 0;
|
||
background-color: #f9fafc;
|
||
}
|
||
.div_height {
|
||
height: 38px;
|
||
}
|
||
.div_width {
|
||
width: 100%;
|
||
}
|
||
.width_100 {
|
||
width: 100px;
|
||
}
|
||
.center {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
padding: 1em;
|
||
}
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 1px solid;
|
||
}
|
||
.flex_son {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0x solid;
|
||
}
|
||
</style> |