<template>
|
<div style="padding:0px 14px;height: 100%;overflow: auto;">
|
<div class="steprecord-header">
|
<div style="height:28px;line-height:28px;">
|
<el-divider class="pane-divider" direction="vertical"></el-divider
|
><span style="font-size:14px;font-weight:bold">工步列表</span>
|
</div>
|
<div style="height:28px;line-height:28px;">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="刷新工步"
|
placement="top"
|
>
|
<el-button
|
class="step-refresh-btn"
|
icon="el-icon-refresh"
|
type="info"
|
circle
|
@click="getDataList"
|
></el-button>
|
</el-tooltip>
|
</div>
|
</div>
|
<div style="margin-bottom: 10px;display:inline-block;">
|
<el-form
|
:rules="stepRecordRule"
|
:model="stepRecordForm"
|
class="l-mes"
|
ref="stepRecordForm"
|
:inline="true"
|
style="margin-left: 10px"
|
>
|
<el-form-item prop="stepId" label="工步">
|
<el-select
|
v-model="stepRecordForm.stepId"
|
filterable
|
placeholder="请选择工步"
|
@change="changeStep"
|
@visible-change="visibleChange"
|
:disabled="currentDutyRecord.isConfirm"
|
>
|
<el-option
|
v-for="item in steps"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="staffId" label="人员">
|
<el-select
|
v-model="stepRecordForm.staffId"
|
filterable
|
placeholder="请选择人员"
|
@change="changeStaff"
|
@visible-change="visibleChange"
|
:disabled="currentDutyRecord.isConfirm"
|
>
|
<el-option
|
v-for="item in staffList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="systemNo" label="SN码">
|
<el-input
|
ref="snCodeRef"
|
v-model="stepRecordForm.systemNo"
|
v-focus
|
@keyup.enter.native="saveStepRecord"
|
:disabled="currentDutyRecord.isConfirm"
|
></el-input>
|
</el-form-item>
|
<el-form-item prop="number" label="报工的数量">
|
<el-input v-model="queryReport.total" disabled></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div style="float:right">
|
<el-button
|
class="out-btn"
|
type="primary"
|
icon="tracking-btn-out"
|
@click="checkProductOutStep"
|
>漏扫检查</el-button
|
>
|
</div>
|
<el-table
|
ref="stepRecordTable"
|
:data="stepRecordList"
|
:height="684"
|
:row-height="38"
|
:header-cell-style="stepRecordTableHeaderCellStyle"
|
:row-class-name="stepRecordTableRowClassName"
|
class="step-table"
|
>
|
<el-table-column label="工步编号" prop="stepNo" align="center">
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">工步编号</div>
|
<div class="th" @click.stop>
|
<template>
|
<el-input
|
clearable
|
@keyup.enter.native="getDataList"
|
v-model="paramObject.stepNo"
|
placeholder="工步编号"
|
@clear="getDataList"
|
style="width: 100%"
|
>
|
</el-input>
|
</template>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="工步名称" prop="name" align="center">
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">工步名称</div>
|
<div class="th" @click.stop>
|
<template>
|
<el-input
|
clearable
|
@keyup.enter.native="getDataList"
|
v-model="paramObject.name"
|
placeholder="工步名称"
|
@clear="getDataList"
|
style="width: 100%"
|
>
|
</el-input>
|
</template>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="生产批次" prop="stepBatchNo" align="center">
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">生产批次</div>
|
<div class="th" @click.stop>
|
<template>
|
<el-input
|
clearable
|
@keyup.enter.native="getDataList"
|
v-model="paramObject.stepBatchNo"
|
placeholder="生产批次"
|
@clear="getDataList"
|
style="width: 100%"
|
>
|
</el-input>
|
</template>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="SN码" prop="systemNo" align="center">
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">SN码</div>
|
<div class="th" @click.stop>
|
<template>
|
<el-input
|
clearable
|
@keyup.enter.native="getDataList"
|
v-model="paramObject.systemNo"
|
placeholder="SN码"
|
@clear="getDataList"
|
style="width: 100%"
|
>
|
</el-input>
|
</template>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="人员"
|
prop="staffName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">人员</div>
|
<div class="th" @click.stop>
|
<template>
|
<el-input
|
clearable
|
@keyup.enter.native="getDataList"
|
v-model="paramObject.staffName"
|
placeholder="人员"
|
@clear="getDataList"
|
style="width: 100%"
|
>
|
</el-input>
|
</template>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="时间" prop="createTime" align="center">
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 18px;">时间</div>
|
<div class="th" @click.stop>
|
<template>
|
<el-date-picker
|
clearable
|
v-model="paramObject.createTime"
|
type="datetimerange"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
@change="feedDateChange($event)"
|
size="mini"
|
style="width:150px"
|
>
|
</el-date-picker>
|
</template>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" width="85px" fixed="right" label="操作">
|
<template slot-scope="scope">
|
<el-tooltip effect="dark" content="删除" placement="top-start">
|
<el-button
|
type="text"
|
size="small"
|
class="red-but"
|
:disabled="currentDutyRecord.isConfirm"
|
@click="delStepRecord(scope.$index, scope.row)"
|
>删除</el-button
|
>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagin-page">
|
<el-pagination
|
:current-page="queryReport.current"
|
:page-sizes="[10, 15, 20, 50, 100]"
|
:page-size="queryReport.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChangeReport"
|
@current-change="handleCurrentChangeReport"
|
:total="queryReport.total"
|
>
|
</el-pagination>
|
</div>
|
<!-- 弹窗, 新增 / 修改 -->
|
<table-form v-if="addOrUpdateVisible" ref="addOrUpdate"></table-form>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.step-refresh-btn.el-button--small.is-circle {
|
padding: 4px;
|
}
|
.steprecord-header {
|
margin-top: 20px;
|
margin-bottom: 14px;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
.out-btn {
|
background-image: -webkit-linear-gradient(139deg, #5f6eef 0%, #2783ff 100%);
|
background-image: -moz-linear-gradient(139deg, #5f6eef 0%, #2783ff 100%);
|
background-image: linear-gradient(139deg, #5f6eef 0%, #2783ff 100%);
|
color: #fff;
|
border-color: #fbecec;
|
border-radius: 15px;
|
padding: 6px 15px;
|
}
|
.pane-divider {
|
width: 4px;
|
background-color: #4283ee;
|
}
|
.step-table >>> .stripe-row {
|
background: #f6f9fe;
|
}
|
.step-table >>> td {
|
padding: 3px 0px;
|
}
|
.step-table >>> .el-button {
|
padding: 5px 0px;
|
}
|
.step-table {
|
/deep/ .el-table__fixed-right {
|
height: 100% !important; //设置高优先，以覆盖内联样式
|
}
|
}
|
.blue-but.is-disabled {
|
color: #aacfff;
|
}
|
|
.blue-but {
|
color: #006eff;
|
}
|
.red-but.is-disabled {
|
color: #fab6b6;
|
}
|
|
.red-but {
|
color: red;
|
}
|
.pagin-page {
|
margin-top: 10px;
|
margin-bottom: 14px;
|
display: flex;
|
justify-content: end;
|
align-items: center;
|
}
|
</style>
|
<script>
|
import {
|
getSteps,
|
getStepRecordsForStep,
|
deleteStepRecord,
|
saveStepRecord
|
} from '@/api/product/productstep'
|
import { judgeAddInput } from '../../../api/product/productstep'
|
import TableForm from './steprecord-check'
|
export default {
|
props: {
|
currOperateTask: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
personBoardList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
workstationId: {
|
type: Number
|
},
|
currentDutyRecord: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
userInfo: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
stepShow: {
|
type: Boolean,
|
default: false
|
},
|
currItem: {
|
type: String,
|
default: null
|
}
|
},
|
data() {
|
return {
|
addOrUpdateVisible: false,
|
dateTimeFiltersThree: {},
|
paramObject: {},
|
productMainId: 0,
|
staffList: [], // 操作人
|
stepRecordList: [], // 工步记录
|
steps: [], // 工序基础工步
|
stepRecordForm: {
|
stepId: null,
|
staffName: null,
|
systemNo: null,
|
staffId: null
|
},
|
stepRecordRule: {
|
stepId: [
|
{ required: true, message: '工步不能为空', trigger: 'change' }
|
],
|
staffId: [
|
{ required: true, message: '工人不能为空', trigger: 'change' }
|
]
|
},
|
queryReport: {
|
current: 1,
|
size: 20,
|
total: 0
|
},
|
reportAllData: [] // 存放原始数据
|
}
|
},
|
directives: {
|
focus: {
|
inserted: function(el, option) {
|
var defClass = 'el-input'
|
var defTag = 'input'
|
var value = option.value || true
|
if (typeof value === 'boolean') {
|
value = { cls: defClass, tag: defTag, foc: value }
|
} else {
|
value = {
|
cls: value.cls || defClass,
|
tag: value.tag || defTag,
|
foc: value.foc || false
|
}
|
}
|
el.getElementsByTagName(value.tag)[0].focus()
|
}
|
}
|
},
|
components: {
|
TableForm
|
},
|
methods: {
|
// sn输入框聚焦
|
snCodeInputFocus() {
|
this.$nextTick(function() {
|
this.$refs.snCodeRef.$el.querySelector('input').focus()
|
})
|
},
|
visibleChange(val) {
|
if (!val) {
|
this.snCodeInputFocus()
|
}
|
},
|
// 工步选择变化时，触发
|
changeStep() {
|
this.queryReport.current = 1
|
this.getStepRecords(
|
this.currOperateTask.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.staffId
|
)
|
},
|
// 漏扫检查
|
checkProductOutStep() {
|
if (this.currOperateTask.id && this.stepRecordForm.stepId) {
|
this.addOrUpdateVisible = true
|
var param = null
|
var minNo = null
|
var maxNo = null
|
if (this.reportAllData && this.reportAllData.length > 0) {
|
param = this.reportAllData[0].systemNo.substr(0, 9)
|
minNo = this.reportAllData[0].systemNo.substr(9, 4)
|
maxNo = this.reportAllData[
|
this.reportAllData.length - 1
|
].systemNo.substr(9, 4)
|
}
|
this.$nextTick(() => {
|
this.$refs.addOrUpdate.init(
|
this.stepRecordForm.stepId,
|
param,
|
minNo,
|
maxNo
|
)
|
})
|
} else if (!this.stepRecordForm.stepId) {
|
this.$message.error('请选择工步')
|
} else {
|
this.$message.error('请选择工单')
|
}
|
},
|
// 人员选择变化时，触发
|
changeStaff() {
|
this.queryReport.current = 1
|
const currStaff = this.staffList.find(
|
(item) => item.id === this.stepRecordForm.staffId
|
)
|
this.stepRecordForm.staffName = currStaff.name
|
this.getStepRecords(
|
this.currOperateTask.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.staffId
|
)
|
},
|
stepRecordTableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
|
let headerStyle = 'background:#599ef4;color:#fff;'
|
if (columnIndex === 0) {
|
headerStyle += 'border-radius: 6px 0px 0px 0px;'
|
} else if (columnIndex === 6) {
|
headerStyle += 'border-radius: 0px 6px 0px 0px;'
|
}
|
return headerStyle
|
},
|
stepRecordTableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 === 1) {
|
return 'stripe-row'
|
} else {
|
return ''
|
}
|
},
|
// 保存工步记录
|
saveStepRecord() {
|
this.$refs.stepRecordForm.validate((valid) => {
|
if (valid) {
|
if (
|
this.stepRecordForm.systemNo != null &&
|
this.stepRecordForm.systemNo !== ''
|
) {
|
var stepRecord = {}
|
stepRecord.operationTaskId = this.currOperateTask.id
|
stepRecord.stepId = this.stepRecordForm.stepId
|
stepRecord.systemNo = this.stepRecordForm.systemNo
|
stepRecord.dutyNo = this.currentDutyRecord.dutyNo
|
stepRecord.workstationId = this.workstationId
|
var stepStaffList = []
|
var stepStaff = {}
|
stepStaff.staffId = this.stepRecordForm.staffId
|
stepStaffList.push(stepStaff)
|
stepRecord.stepStaffList = stepStaffList
|
judgeAddInput(stepRecord).then((response) => {
|
if (response.data.data) {
|
this.$confirm('投料不足是否继续操作:', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnClickModal: false,
|
type: 'warning'
|
}).then((data) => {
|
this.saveStepProduction(stepRecord)
|
})
|
} else {
|
this.saveStepProduction(stepRecord)
|
}
|
})
|
this.stepRecordForm.systemNo = null
|
} else {
|
this.$message.error('SN码不能为空')
|
}
|
}
|
})
|
},
|
saveStepProduction(stepRecord) {
|
saveStepRecord(stepRecord)
|
.then((response) => {
|
if (response.data.code === 0) {
|
this.$message.success('人员工步保存成功！')
|
this.getDataList()
|
// this.$emit('refreshProductTracking')
|
} else {
|
this.$message.error('人员工步保存失败！')
|
}
|
this.stepRecordForm.systemNo = null
|
})
|
.catch((error) => {
|
console.log(error)
|
console.log('人员工步保存异常')
|
})
|
},
|
// 删除工步记录
|
delStepRecord(index, row) {
|
this.$confirm('此操作将永久删除该工步记录, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
deleteStepRecord(row.id)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
this.$message.success('删除工步成功')
|
this.refreshStepRecordList(
|
this.currOperateTask.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.StaffId
|
)
|
this.$emit('refreshProductTracking')
|
} else {
|
this.$message.error('删除工步失败')
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
},
|
init(id) {
|
this.productMainId = id
|
if (this.stepRecordForm.stepId != null) {
|
this.queryReport.current = 1
|
this.getStepRecords(
|
this.currOperateTask.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.staffId
|
)
|
}
|
},
|
// 搜索框调用查询
|
getDataList() {
|
this.queryReport.current = 1
|
this.getStepRecords(
|
this.currOperateTask.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.staffId
|
)
|
},
|
// 查询工单下对应工序的工步
|
getSteps(taskId) {
|
getSteps(taskId)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
this.steps = data.data
|
} else {
|
this.steps = []
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
},
|
feedDateChange(val) {
|
if (val != null) {
|
this.dateTimeFiltersThree.createTime = val
|
} else {
|
delete this.dateTimeFiltersThree.createTime
|
}
|
this.getDataList()
|
},
|
// 查询工单下的工步记录
|
getStepRecords(taskId, stepId, productMainId, staffId) {
|
if (productMainId == 0) {
|
productMainId = null
|
}
|
if (stepId == null) {
|
this.$message('工步不能为空')
|
return
|
}
|
const criteria = {}
|
criteria.dateTimeFilters = this.dateTimeFiltersThree
|
const query = Object.assign(
|
{ current: this.queryReport.current, size: this.queryReport.size },
|
{
|
operationTaskId: taskId,
|
stepId: stepId,
|
productMainId: productMainId,
|
staffId: staffId,
|
criteria: JSON.stringify(criteria)
|
},
|
this.paramObject
|
)
|
getStepRecordsForStep(query)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
this.stepRecordList = data.data.records
|
this.queryReport.total = data.data.total
|
// this.getReportData()
|
} else {
|
this.stepRecordList = []
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
},
|
// 保存成功后，回调刷新页面
|
refreshStepRecordList(taskId, stepId, productMainId, StaffId) {
|
this.queryReport.current = 1
|
this.getStepRecords(taskId, stepId, productMainId, StaffId)
|
},
|
handleSizeChangeReport(val) {
|
this.queryReport.size = val
|
this.queryReport.current = 1
|
this.getStepRecords(
|
this.currOperateTask.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.staffId
|
)
|
},
|
handleCurrentChangeReport(val) {
|
this.queryReport.current = val
|
this.getStepRecords(
|
this.currOperateTask.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.staffId
|
)
|
},
|
getReportData() {
|
const list = JSON.parse(JSON.stringify(this.reportAllData))
|
this.stepRecordList = list.slice(
|
(this.queryReport.current - 1) * this.queryReport.size,
|
this.queryReport.current * this.queryReport.size
|
)
|
},
|
// 刷新所有列表的数据
|
refreshAllData() {
|
this.queryReport.current = 1
|
this.getStepRecords(
|
this.currOperateTask.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.staffId
|
)
|
}
|
},
|
watch: {
|
currOperateTask: {
|
handler(newValue, oldValue) {
|
if (newValue.id) {
|
// 查询工单下对应工序的工步
|
this.getSteps(newValue.id)
|
this.queryReport.current = 1
|
this.queryReport.total = 0
|
this.$nextTick(() => {
|
if (this.currItem != null && this.currItem === 'step') {
|
// 查询工单下的工步记录
|
if (this.stepRecordForm.stepId) {
|
this.getStepRecords(
|
newValue.id,
|
this.stepRecordForm.stepId,
|
this.productMainId,
|
this.stepRecordForm.staffId
|
)
|
}
|
}
|
})
|
} else {
|
// 清空stepRecordList、steps
|
this.stepRecordList = []
|
this.steps = []
|
}
|
},
|
deep: true
|
},
|
stepShow: {
|
handler(newValue, oldValue) {
|
if (newValue) {
|
this.snCodeInputFocus()
|
}
|
}
|
},
|
personBoardList: {
|
handler(newValue, oldValue) {
|
console.log('personBoardList的watch')
|
this.staffList = []
|
var userInfoFlag = true
|
var staff
|
for (let i = 0; i < newValue.length; i++) {
|
staff = {}
|
staff.id = newValue[i].staffId
|
staff.name = newValue[i].staffName
|
this.staffList.push(staff)
|
if (this.userInfo.staffId === staff.id) {
|
userInfoFlag = false // 原当班记录中存在登录人员
|
}
|
}
|
if (userInfoFlag) {
|
staff = {}
|
staff.id = this.userInfo.staffId
|
staff.name = this.userInfo.staffName
|
this.staffList.push(staff)
|
}
|
// 默认赋值是当前登录人
|
this.stepRecordForm.staffName = this.userInfo.staffName
|
this.stepRecordForm.staffId = this.userInfo.staffId
|
},
|
deep: true
|
},
|
workstationId() {
|
this.stepRecordForm.stepId = null
|
}
|
}
|
}
|
</script>
|
