<template>
|
<div class="app-container">
|
<div>
|
<el-popover popper-class="mdc-popover"
|
placement="bottom"
|
trigger="click"
|
v-model="isPopShowing">
|
<ul class="mdc-list">
|
<li class="mdc-list-item" v-for="workshop in workshopList" @click="onWorkshopChange(workshop)">{{ workshop.roomName }}</li>
|
</ul>
|
<el-button class="mdc-dropdown" slot="reference">
|
<span>{{selectWorkshop.roomName}}</span><i class="el-icon-arrow-down el-icon--right"></i>
|
</el-button>
|
</el-popover>
|
|
<el-table :data="list" v-loading.table="listLoading" element-loading-text="Loading" fit
|
:row-class-name="tableRowClassName" style="width: 100%;border: 1px solid #ebeef5;">
|
<el-table-column align="center" label='机床名' prop="name"></el-table-column>
|
<el-table-column label="采集时间" prop="time"></el-table-column>
|
<el-table-column label="刀具号" align="center" prop="toolNo"></el-table-column>
|
<el-table-column label="刀具名" align="center" prop="toolName"></el-table-column>
|
</el-table>
|
</div>
|
<div style="padding-top: 10px;display: flex;justify-content: flex-end;align-items: center;">
|
<el-button-group>
|
<el-button type="primary" icon="el-icon-arrow-left" size="mini" round @click="prePage()" :disabled="canPaging[0]">上一页</el-button>
|
<el-button disabled size="mini" plain>{{currentPage}}/{{totalPage}}</el-button>
|
<el-button type="primary" size="mini" round @click="nextPage()" :disabled="canPaging[1]">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</el-button-group>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getCurrentData } from '@/api/MdcApi'
|
|
export default {
|
data() {
|
return {
|
list: null,
|
listLoading: true,
|
currentPage: 1,
|
totalPage: 0,
|
workshopList: [],
|
selectWorkshop: {},
|
isPopShowing: false
|
}
|
},
|
created() {
|
this.workshopList = this.$store.getters.workshopList
|
this.selectWorkshop = this.workshopList[0]
|
this.fetchData()
|
},
|
computed: {
|
canPaging() {
|
const tem = [false, false]
|
tem[0] = (this.currentPage <= 1)
|
tem[1] = (this.currentPage >= this.totalPage)
|
return tem
|
}
|
},
|
methods: {
|
fetchData() {
|
this.listLoading = true
|
// console.log('-----------------------')
|
// console.log(this.currentPage)
|
// console.log(this.selectWorkshop.workshopId)
|
getCurrentData(this.currentPage, this.selectWorkshop.workshopId).then((response = {}) => {
|
// console.info(response)
|
this.list = response.list || []
|
this.totalPage = parseInt((response.totalPage || 0))
|
this.listLoading = false
|
})
|
},
|
/**
|
* 按照车间查询
|
* @param workshop
|
*/
|
onWorkshopChange(workshop) {
|
this.selectWorkshop = workshop
|
this.isPopShowing = false
|
this.fetchData()
|
},
|
tableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 === 1) {
|
return 'odd-row'
|
} else {
|
return 'even-row'
|
}
|
},
|
// 前一页
|
prePage() {
|
if (this.currentPage > 1) {
|
this.currentPage--
|
this.fetchData()
|
}
|
},
|
// 后一页
|
nextPage() {
|
if (this.currentPage < this.totalPage) {
|
this.currentPage++
|
this.fetchData()
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.mdc-list{
|
list-style: none;
|
max-height: 300px;
|
overflow-y: scroll;
|
overflow-x:hidden;
|
}
|
.mdc-list-item{
|
padding: 6px 16px;
|
border-bottom: 1px solid #e5e5e5;
|
}
|
.el-table>>> .odd-row {
|
background: transparent;
|
}
|
.el-table>>> .even-row {
|
background: #f8f8f8;
|
}
|
.mdc-dropdown{
|
-webkit-appearance: none;
|
background-color: #fff;
|
background-image: none;
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
color: #606266;
|
font-size: 13px;
|
/*line-height: 30px;*/
|
display: inline-flex;
|
align-items: center;
|
padding: 7px 15px;
|
-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
overflow: hidden;
|
margin-bottom: 10px;
|
}
|
</style>
|
