<template>
|
<div class="app-container">
|
<el-form :model="dataForm" status-icon ref="dataForm" label-width="100px" style="margin-top:10px;">
|
<el-row>
|
<el-col :xs="24":sm="6":md="6":lg="6":xl="6">
|
<el-form-item label="零件号" prop="machineName">
|
<el-select v-model="dataForm.componentName" filterable clearable placeholder="选择或搜索">
|
<el-option
|
v-for="(item, index) in componentList"
|
:key="index"
|
:label="item"
|
:value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24":sm="6":md="6":lg="6":xl="6">
|
<el-form-item label="工序号" prop="machineName">
|
<el-select v-model="dataForm.processName" filterable clearable placeholder="选择或搜索">
|
<el-option
|
v-for="(item, index) in processList"
|
:key="index"
|
:label="item"
|
:value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24":sm="4":md="4":lg="4":xl="4">
|
<el-form-item label="开始时间" prop="machineName">
|
<el-date-picker
|
v-model="beginDate"
|
type="date"
|
format="yyyy-MM-dd"
|
value-format="yyyyMMdd"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24":sm="4":md="4":lg="4":xl="4">
|
<el-form-item label="结束时间" prop="machineName">
|
<el-date-picker
|
v-model="endDate"
|
type="date"
|
format="yyyy-MM-dd"
|
value-format="yyyyMMdd"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24":sm="2":md="2":lg="2":xl="2">
|
<el-form-item label="" prop="machineName">
|
<div style="display: flex;justify-content: center;align-items: center;margin-top:4px;">
|
<el-button size="small" type="primary" @click="submitForm()" plain>确定</el-button>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<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="component"></el-table-column>
|
<el-table-column label="工序号" prop="process"></el-table-column>
|
<el-table-column label="加工时间" align="center" prop="time"></el-table-column>
|
</el-table>
|
<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 { getComponentList, getProcessList, getComponentInfo } from '@/api/MdcApi'
|
|
export default {
|
data() {
|
return {
|
dataForm: {
|
componentName: '',
|
processName: ''
|
},
|
componentList: [],
|
processList: [],
|
beginDate: '',
|
endDate: '',
|
list: null,
|
currentPage: 1,
|
totalPage: 0,
|
listLoading: true
|
}
|
},
|
mounted() {
|
this.initDevices()
|
},
|
computed: {
|
canPaging() {
|
const tem = [false, false]
|
tem[0] = (this.currentPage <= 1)
|
tem[1] = (this.currentPage >= this.totalPage)
|
return tem
|
}
|
},
|
methods: {
|
initDevices() {
|
this.listLoading = true
|
this.machineName = []
|
getComponentList().then(res => {
|
res.map(item => {
|
this.componentList.push(item)
|
// console.log(item)
|
})
|
})
|
getProcessList().then(res => {
|
res.map(item => {
|
this.processList.push(item)
|
})
|
})
|
this.listLoading = false
|
},
|
// changeComponent() {
|
// this.componentList.find(item => {
|
// if (item.value === this.dataForm.componentName) {
|
// }
|
// })
|
// },
|
fetchData() {
|
this.listLoading = true
|
getComponentInfo(this.currentPage, this.dataForm.componentName, this.dataForm.processName, this.beginDate, this.endDate).then(res => {
|
this.listLoading = false
|
if (res.result === 'SUCCESS') {
|
this.list = res.list || []
|
this.totalPage = parseInt((res.totalPage || 0))
|
this.listLoading = false
|
} else {
|
console.log('FAIL')
|
}
|
})
|
},
|
submitForm() {
|
this.listLoading = true
|
this.$refs.dataForm.validate((valid) => {
|
if (valid) {
|
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>
|
