<template>
<div class="app-container">
<div class="content_wrap">
<div class="mt-10">
<span class="table_title">数据查询列表</span>
</div>
<el-date-picker
v-model="timeval"
class="mt-20"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="dataChange"
>
</el-date-picker>
<el-button type="primary" class="ml-10" @click="searchbtn()">查询</el-button>
<el-table
@cell-click="cellClick"
:row-class-name="tableRowClassName"
:cell-class-name="tableCellClassName"
class="mt-15"
v-loading="listLoading"
stripe
:data="dataList"
style="width: 100%">
<el-table-column
prop="date"
label="时间"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="shiftName"
label="班组"
align="center"
>
</el-table-column>
<el-table-column
prop="scrapRate"
label="报废率"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.scrapRate==''||scope.row.scrapRate==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '报废率'">
<el-input v-model="scope.row.scrapRate" ref='editInput' placeholder="报废率" @blur="inputBlur(scope)" />
</div>
<div class="inputnum" v-else>{{ scope.row.scrapRate}}</div>
<!-- <span v-if="scope.row.scrapRate==''||scope.row.scrapRate==null"><el-input v-model="scope.row.scrapRate" placeholder="报废率"></el-input></span>
<span v-else>{{ scope.row.scrapRate}}</span> -->
</template>
</el-table-column>
<el-table-column
prop="passRate"
label="一次下线合格率"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.passRate==''||scope.row.passRate==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '一次下线合格率'">
<el-input v-model="scope.row.passRate" ref='editInput' placeholder="一次下线合格率" @blur="inputBlur(scope)" />
</div>
<div class="inputnum" v-else>{{ scope.row.passRate}}</div>
<!-- <span v-if="scope.row.passRate==''||scope.row.passRate==null"><el-input v-model="scope.row.passRate" placeholder="一次下线合格率"></el-input></span>
<span v-else>{{ scope.row.passRate}}</span> -->
</template>
</el-table-column>
<el-table-column
prop="planHaltDate"
label="计划停机时间"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.planHaltDate==''||scope.row.planHaltDate==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '计划停机时间'">
<el-input v-model="scope.row.planHaltDate" ref='editInput' placeholder="计划停机时间" @blur="inputBlur(scope)" />
</div>
<div class="inputnum" v-else>{{ scope.row.planHaltDate}}</div>
<!-- <span v-if="scope.row.planHaltDate==''||scope.row.planHaltDate==null"><el-input v-model="scope.row.planHaltDate" placeholder="计划停机时间"></el-input></span>
<span v-else>{{ scope.row.planHaltDate}}</span> -->
</template>
</el-table-column>
<el-table-column
prop="shiftDurat"
label="班组总时长"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.shiftDurat==''||scope.row.shiftDurat==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '班组总时长'">
<el-input v-model="scope.row.shiftDurat" ref='editInput' placeholder="班组总时长" @blur="inputBlur(scope)" />
</div>
<div class="inputnum" v-else>{{ scope.row.shiftDurat}}</div>
<!-- <span v-if="scope.row.shiftDurat==''||scope.row.shiftDurat==null"><el-input v-model="scope.row.shiftDurat" placeholder="班组总时长"></el-input></span>
<span v-else>{{ scope.row.shiftDurat}}</span> -->
</template>
</el-table-column>
<el-table-column
prop="shiftTheoryTotal"
label="班组理论生产总数"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.shiftTheoryTotal==''||scope.row.shiftTheoryTotal==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '班组理论生产总数'">
<el-input v-model="scope.row.shiftTheoryTotal" ref='editInput' placeholder="班组理论生产总数" @blur="inputBlur(scope)" />
</div>
<div class="inputnum" v-else>{{ scope.row.shiftTheoryTotal}}</div>
<!-- <span v-if="scope.row.shiftTheoryTotal==''||scope.row.shiftTheoryTotal==null"><el-input v-model="scope.row.shiftTheoryTotal" placeholder="班组理论生产总数"></el-input></span>
<span v-else>{{ scope.row.shiftTheoryTotal}}</span> -->
</template>
</el-table-column>
<el-table-column
prop="pointTagValue"
label="班次结算标签"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.pointTagValue==''||scope.row.pointTagValue==null||scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '班次结算标签'">
<el-input v-model="scope.row.pointTagValue" ref='editInput' placeholder="班次结算标签" @blur="inputBlur(scope)" />
</div>
<div class="inputnum" v-else>{{ scope.row.pointTagValue}}</div>
<!-- <span v-if="scope.row.pointTagValue==''||scope.row.pointTagValue==null"><el-input v-model="scope.row.pointTagValue" placeholder="班次结算标签"></el-input></span>
<span v-else>{{ scope.row.pointTagValue}}</span> -->
</template>
</el-table-column>
<el-table-column
prop="quality"
align="center"
label="操作">
<template slot-scope="scope">
<el-button @click="tosubmit(scope.row)" type="text" size="small">提交</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getshiftlist"
/>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import {shiftlist,shiftsave} from "@/api/associationanalysis/associationanalysis";
export default {
name: 'saledetail',
components:{
},
data() {
return {
rowIndex: -1, //行索引
columnIndex: -1, //列索引
timeval:[],
beginDate:'',
endDate:'',
input:'',
listLoading:false,
total: 3,
// 查询参数
queryParams: {
reportRecordId:null,
pageNum: 1,
pageSize: 10,
},
dataList:[],
passRate:'',
scrapRate:''
}
},
computed: {
...mapGetters([
'roles',"userMsg",'statusFail','statusSuccess','userId','tenantId','tenantType'
])
},
mounted() {
// console.log("this.$route.params",this.$route.params)
// this.queryParams.reportRecordId=this.$route.params.id
this.getshiftlist()
},
methods: {
//把每一行的索引加到行数据中
tableRowClassName({ row, rowIndex }) {
row.index = rowIndex
},
//把每一列的索引加到列数据中
tableCellClassName({ column, columnIndex }) {
column.index = columnIndex
},
//单元格被点击时会触发该事件
cellClick(row, column, cell, event) {
// console.log(row, '单条数据', column, '列信息', cell, 'td实例', event)
if (column.label == '报废率'||column.label == '计划停机时间'||column.label == '一次下线合格率'||column.label == '班组总时长'||column.label == '班组理论生产总数'||column.label == '班次结算标签') {
this.rowIndex = row.index
this.columnIndex = column.index
// this.$nextTick(() => {
// // this.$refs['editInput'][0].focus()//没有没有自动聚焦效果的话可能是这里出现问题 需要打印出来看一下
// //console.log(this.$refs['editInput'])
// })
}
},
//输入框失去焦点事件（初始化中间变量）
inputBlur(scope) {
this.rowIndex = -1
this.columnIndex = -1
},
// 时间选择
dataChange(data){
// console.log(data)
if(data==null){
this.beginDate=''
this.endDate=''
}else{
this.beginDate=data[0]
this.endDate=data[1]
}
},
searchbtn(){
this.getshiftlist()
},
getshiftlist() {
this.listLoading=true;
this.queryParams.beginDate=this.beginDate
this.queryParams.endDate=this.endDate
shiftlist(this.queryParams).then((response) => {
this.total = response.total;
this.dataList = response.rows
this.listLoading=false;
})
},
tosubmit(row){
console.log(row)
shiftsave(row).then((response) => {
this.getshiftlist()
})
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
