<template>
|
<el-dialog
|
width="60%"
|
:visible.sync="innerVisible"
|
append-to-body
|
@close="$emit('update:currshowlist', false)"
|
:show="currshowlist"
|
:close-on-click-modal="false"
|
class="product-out-form"
|
>
|
<div slot="title">
|
<div style="display: inline-block;float: left">
|
<span>{{
|
parentInfo.stepRecordId == null ? '新增工步' : '编辑工步'
|
}}</span>
|
<span v-if="parentInfo.stepRecordId != null" style="color:red"
|
>({{ formatterStep }})</span
|
>
|
<el-select
|
v-if="parentInfo.stepRecordId == null"
|
v-model="currStepId"
|
placeholder="请选择工步"
|
style="margin-left:10px"
|
>
|
<el-option
|
v-for="item in steps"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div style="float: left;width: 30%;padding-right: 34px;position: relative">
|
<el-table
|
stripe
|
ref="stepRecordPersonList"
|
:data="personBoardList"
|
@selection-change="stepRecordPersonSelectionChange"
|
:row-style="{ height: '26px' }"
|
:cell-style="{ padding: '0' }"
|
>
|
<el-table-column type="selection" />
|
<el-table-column
|
label="人员名称"
|
prop="staffName"
|
align="center"
|
min-width="75px"
|
:show-overflow-tooltip="true"
|
/>
|
<el-table-column
|
label="人员编号"
|
prop="staffNo"
|
align="center"
|
min-width="75px"
|
:show-overflow-tooltip="true"
|
/>
|
</el-table>
|
<div
|
style="position: absolute;top:0px;right: 0px;height: 100%;width: 34px;border-left: 1px solid #f4f2ea;border-right: 1px solid #f4f2ea;"
|
></div>
|
</div>
|
<div style="float: left;width: 70%">
|
<el-row style="">
|
<el-col :span="4" class="product-out-form-header-col"
|
><span>序号</span></el-col
|
>
|
<el-col :span="8" class="product-out-form-header-col"
|
><span>人员</span></el-col
|
>
|
<el-col :span="8" class="product-out-form-header-col"
|
><span>数量</span></el-col
|
>
|
<el-col :span="4" class="product-out-form-header-col"
|
><span>操作</span></el-col
|
>
|
</el-row>
|
<div class="product-out-form-body-div">
|
<el-row v-for="(item, index) in staffSteps" :key="item.id">
|
<el-col :span="4" class="product-out-form-body-col">
|
<span>{{ index + 1 }}</span>
|
</el-col>
|
<el-col :span="8" class="product-out-form-body-col">
|
<span>{{ item.staffName }}</span>
|
</el-col>
|
<el-col :span="8" class="product-out-form-body-col l-mes">
|
<el-input v-model="item.number"></el-input>
|
</el-col>
|
<el-col :span="4" class="product-out-form-body-col">
|
<span style="cursor: pointer;color: red;" @click="delStaff(index)"
|
>删除</span
|
>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<div style="display: inline-block;width: 30%;float: left">
|
<el-button
|
style="margin-right: 34px"
|
type="primary"
|
@click="addStaffStepsForPerson"
|
>添加</el-button
|
>
|
</div>
|
<el-button @click="innerVisible = false">取 消</el-button>
|
<el-button type="primary" @click="saveStaffSteps">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
<script>
|
import { saveStepRecord } from '@/api/product/productstep'
|
export default {
|
props: {
|
currshowlist: {
|
type: Boolean,
|
default: false
|
},
|
parentInfo: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
personBoardList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
staffStepList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
steps: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
innerVisible: false,
|
currStepId: null,
|
personSelection: [],
|
staffSteps: [],
|
clickDateArr: []
|
}
|
},
|
computed: {
|
formatterStep() {
|
var formatterLabel = ""
|
if (this.currStepId != null) {
|
var currStepInfo = this.steps.find(
|
(item) => item.id === this.currStepId
|
)
|
formatterLabel = currStepInfo.name
|
}
|
return formatterLabel
|
}
|
},
|
methods: {
|
stepRecordPersonSelectionChange(val) {
|
this.personSelection = val
|
},
|
delStaff(index) {
|
this.staffSteps.splice(index, 1)
|
},
|
addStaffStepsForPerson() {
|
if (this.personSelection != null && this.personSelection.length > 0) {
|
var staffStepCopyList = this.staffSteps
|
this.staffSteps = []
|
var newStaffStep
|
for (var i = 0; i < this.personSelection.length; i++) {
|
newStaffStep = {}
|
newStaffStep.staffName = this.personSelection[i].staffName
|
newStaffStep.staffId = this.personSelection[i].staffId
|
newStaffStep.number = null
|
this.staffSteps.push(newStaffStep)
|
}
|
if (staffStepCopyList != null && staffStepCopyList.length > 0) {
|
for (var i = 0; i < staffStepCopyList.length; i++) {
|
this.staffSteps.push(staffStepCopyList[i])
|
}
|
}
|
} else {
|
this.$message.warning('若想添加人员工步，请先选中人员！')
|
}
|
},
|
saveStaffSteps() {
|
var canClickFlag = true
|
this.clickDateArr.push(new Date().getTime())
|
if (this.clickDateArr.length > 1) {
|
if (
|
this.clickDateArr[this.clickDateArr.length - 1] -
|
this.clickDateArr[this.clickDateArr.length - 2] <
|
2000
|
) {
|
// 小于2秒则认为重复提交
|
canClickFlag = false
|
}
|
}
|
if (canClickFlag) {
|
if (this.staffSteps != null && this.staffSteps.length > 0) {
|
if (this.currStepId != null) {
|
var stepRecord = {}
|
stepRecord.id = this.parentInfo.stepRecordId
|
stepRecord.operationTaskId = this.parentInfo.operationTaskId
|
stepRecord.stepId = this.currStepId
|
var stepStaffList = []
|
var stepStaff
|
for (var i = 0; i < this.staffSteps.length; i++) {
|
stepStaff = {}
|
stepStaff.number = this.staffSteps[i].number
|
stepStaff.staffId = this.staffSteps[i].staffId
|
stepStaffList.push(stepStaff)
|
}
|
stepRecord.stepStaffList = stepStaffList
|
saveStepRecord(stepRecord)
|
.then((response) => {
|
if (response.data.code === 0) {
|
this.$message.success('人员工步保存成功！')
|
this.$emit(
|
'refreshStepRecordList',
|
this.parentInfo.operationTaskId
|
)
|
this.innerVisible = false
|
} else {
|
this.$message.error('人员工步保存失败！')
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
console.log('人员工步保存异常')
|
})
|
} else {
|
this.$message.warning('请选择工步！')
|
}
|
} else {
|
this.$message.warning('无人员工步数据可提交！')
|
}
|
}
|
}
|
},
|
watch: {
|
currshowlist() {
|
this.innerVisible = this.currshowlist
|
if (this.currshowlist) {
|
this.clickDateArr = []
|
this.staffSteps = []
|
for (var i = 0; i < this.staffStepList.length; i++) {
|
this.staffSteps.push(this.staffStepList[i])
|
}
|
this.currStepId = this.parentInfo.stepId
|
this.$nextTick(() => {
|
this.$refs.stepRecordPersonList.clearSelection()
|
})
|
}
|
}
|
}
|
}
|
</script>
|
