<template>
|
<el-dialog
|
:title="!dataForm.id ? '新增' : '修改'"
|
:close-on-click-modal="false"
|
:visible.sync="visible"
|
>
|
<el-form
|
:model="dataForm"
|
:rules="dataRule"
|
ref="dataForm"
|
label-width="80px"
|
class="l-mes"
|
>
|
<el-row type="flex" justify="center">
|
<el-col :span="10">
|
<el-form-item label="模板编号" prop="templateNo">
|
<el-input
|
v-model="dataForm.templateNo"
|
placeholder="模板编号"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="报工类型" prop="testType">
|
<el-select v-model="dataForm.testType" style="width: 100%">
|
<el-option
|
v-for="item in testTypes"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row type="flex" justify="center">
|
<el-col :span="10">
|
<el-form-item label="模板描述" prop="testDesc">
|
<el-input
|
v-model="dataForm.testDesc"
|
placeholder="模板描述"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="编制人" prop="createUser">
|
<el-input
|
v-model="dataForm.createUser"
|
placeholder="编制人"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row type="flex" justify="center">
|
<el-col :span="10">
|
<el-form-item label="编制日期" prop="createTime">
|
<el-date-picker
|
v-model="dataForm.createTime"
|
type="datetime"
|
placeholder="选择日期时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="启用状态" prop="status">
|
<el-switch v-model="dataForm.status" disabled></el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-tabs type="border-card">
|
<el-tab-pane label="报工项">
|
<el-form
|
:model="productOutItemsData"
|
ref="itemForm"
|
:rules="productOutItemsData.productOutItemsRules"
|
>
|
<el-table
|
:data="productOutItemsData.productOutItemsList"
|
max-height="330"
|
class="tableItemsClass"
|
>
|
<el-table-column
|
label="报工项目"
|
prop="prodoutItems"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-form-item
|
:prop="
|
'productOutItemsList.' + scope.$index + '.productOutItems'
|
"
|
:rules="
|
productOutItemsData.productOutItemsRules.productOutItems
|
"
|
class="colItemsClass"
|
>
|
<el-input v-model="scope.row.productOutItems"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="默认值"
|
prop="prodoutItemsValue"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-form-item
|
:prop="
|
'productOutItemsList.' +
|
scope.$index +
|
'.productOutItemsValue'
|
"
|
:rules="
|
productOutItemsData.productOutItemsRules
|
.productOutItemsValue
|
"
|
class="colItemsClass"
|
>
|
<el-input v-model="scope.row.productOutItemsValue"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注" prop="remark" align="center">
|
<template slot-scope="scope">
|
<el-form-item class="colItemsClass">
|
<el-input v-model="scope.row.remark"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" width="60px">
|
<template slot="header" slot-scope="scope">
|
<el-button
|
type="text"
|
icon="el-icon-circle-plus-outline"
|
size="medium"
|
style="color: #e6a23c"
|
@click="addItems()"
|
></el-button>
|
</template>
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
icon="el-icon-delete"
|
size="medium"
|
style="color: red"
|
@click="deleteItem(scope.$index, scope.row)"
|
></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="适配工作站">
|
<el-form
|
:model="productOutWorkstationData"
|
ref="workstationForm"
|
:rules="productOutWorkstationData.productOutWorkstationRules"
|
>
|
<el-table
|
:data="productOutWorkstationData.productOutWorkstationList"
|
max-height="330"
|
class="tableItemsClass"
|
>
|
<el-table-column label="机台" prop="workstationId" align="center">
|
<template slot-scope="scope">
|
<el-form-item
|
:prop="
|
'productOutWorkstationList.' +
|
scope.$index +
|
'.workstationId'
|
"
|
:rules="
|
productOutWorkstationData.productOutWorkstationRules
|
.workstationId
|
"
|
class="colItemsClass"
|
>
|
<el-select
|
v-model="scope.row.workstationId"
|
@change="changeWorkstation(scope.$index, scope.row)"
|
filterable
|
>
|
<el-option
|
v-for="item in workstations"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="编号"
|
prop="workstationNumber"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column label="类型" prop="workstationType" align="center">
|
</el-table-column>
|
<el-table-column
|
label="描述"
|
prop="workstationRemark"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column align="center" width="60px">
|
<template slot="header" slot-scope="scope">
|
<el-button
|
type="text"
|
icon="el-icon-circle-plus-outline"
|
size="medium"
|
style="color: #e6a23c"
|
@click="addWorkstations()"
|
></el-button>
|
</template>
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
icon="el-icon-delete"
|
size="medium"
|
style="color: red"
|
@click="deleteWorkstation(scope.$index, scope.row)"
|
></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
<script>
|
import { getObj, addObj, putObj } from '@/api/product/productouttemplate'
|
import { fetchList as fetchListForWorkstation } from '@/api/basic/workstation'
|
import { remote as remoteForm } from '@/api/admin/dict'
|
import ElCol from 'element-ui/packages/col/src/col'
|
import ElInput from '../../../../node_modules/element-ui/packages/input/src/input.vue'
|
|
export default {
|
components: {
|
ElInput,
|
ElCol
|
},
|
data() {
|
return {
|
visible: false,
|
dataForm: {
|
id: null,
|
templateNo: null,
|
testType: null,
|
testDesc: null,
|
createUser: null,
|
createTime: null,
|
status: false
|
},
|
productOutItemsData: {
|
productOutItemsList: [],
|
productOutItemsRules: {
|
productOutItems: [
|
{ required: true, message: '报工项目不能为空', trigger: 'blur' }
|
],
|
productOutItemsValue: [
|
{ required: true, message: '默认值不能为空', trigger: 'blur' }
|
]
|
}
|
},
|
productOutWorkstationData: {
|
productOutWorkstationList: [],
|
productOutWorkstationRules: {
|
workstationId: [
|
{ required: true, message: '机台不能为空', trigger: 'blur' }
|
]
|
}
|
},
|
dataRule: {
|
templateNo: [
|
{ required: true, message: '模板编号不能为空', trigger: 'blur' }
|
],
|
testDesc: [
|
{ required: true, message: '报工描述不能为空', trigger: 'blur' }
|
],
|
testType: [
|
{ required: true, message: '报工类型不能为空', trigger: 'blur' }
|
],
|
createTime: [
|
{ required: true, message: '编制时间不能为空', trigger: 'blur' }
|
],
|
createUser: [
|
{ required: true, message: '编制人不能为空', trigger: 'blur' }
|
],
|
status: [
|
{ required: true, message: '启用状态不能为空', trigger: 'blur' }
|
]
|
},
|
workstations: [],
|
testTypes: [],
|
clickDateArr: []
|
}
|
},
|
methods: {
|
remoteTestType() {
|
remoteForm('work_type').then((response) => {
|
var typeList = response.data.data
|
this.testTypes = []
|
if (typeList != null && typeList.length > 0) {
|
var testType
|
for (var i = 0; i < typeList.length; i++) {
|
testType = {}
|
testType.value = typeList[i].value
|
testType.label = typeList[i].label
|
this.testTypes.push(testType)
|
}
|
}
|
})
|
},
|
getWorkstations() {
|
this.workstations = []
|
fetchListForWorkstation(
|
Object.assign({
|
current: 1,
|
size: 9999
|
})
|
).then((response) => {
|
var records = response.data.data.records
|
if (records != null && records.length > 0) {
|
var workstation
|
for (var i = 0; i < records.length; i++) {
|
workstation = {}
|
workstation.value = records[i].id
|
workstation.label = records[i].name
|
workstation.workstationNo = records[i].workstationNo
|
workstation.type = records[i].type
|
workstation.remark = records[i].remark
|
this.workstations.push(workstation)
|
}
|
}
|
})
|
},
|
async init(id) {
|
this.dataForm.id = id || 0
|
this.visible = true
|
this.clickDateArr = []
|
await this.remoteTestType()
|
await this.getWorkstations()
|
this.$nextTick(() => {
|
this.$refs.dataForm.resetFields()
|
this.$refs.itemForm.resetFields()
|
this.$refs.workstationForm.resetFields()
|
this.productOutItemsData.productOutItemsList = []
|
this.productOutWorkstationData.productOutWorkstationList = []
|
if (this.dataForm.id) {
|
getObj(this.dataForm.id).then((response) => {
|
var templateData = response.data.data
|
this.dataForm.id = templateData.id
|
this.dataForm.templateNo = templateData.templateNo
|
this.dataForm.testType = templateData.testType
|
this.dataForm.testDesc = templateData.testDesc
|
this.dataForm.createUser = templateData.createUser
|
this.dataForm.createTime = templateData.createTime
|
this.dataForm.status = templateData.status
|
|
var productOutItemsList = templateData.productOutItemsList
|
var productOutWorkstationList =
|
templateData.productOutWorkstationList
|
// 渲染报工项
|
if (productOutItemsList != null && productOutItemsList.length > 0) {
|
var productOutItem
|
for (var i = 0; i < productOutItemsList.length; i++) {
|
productOutItem = {}
|
productOutItem.productOutItems =
|
productOutItemsList[i].productOutItems
|
productOutItem.productOutItemsValue =
|
productOutItemsList[i].productOutItemsValue
|
productOutItem.remark = productOutItemsList[i].remark
|
productOutItem.id = productOutItemsList[i].id
|
this.productOutItemsData.productOutItemsList.push(
|
productOutItem
|
)
|
}
|
}
|
// 渲染适配机台
|
if (
|
productOutWorkstationList != null &&
|
productOutWorkstationList.length > 0
|
) {
|
var productOutWorkstation
|
for (var i = 0; i < productOutWorkstationList.length; i++) {
|
productOutWorkstation = {}
|
productOutWorkstation.workstationId =
|
productOutWorkstationList[i].workstationId
|
var workstation = this.workstations.find(
|
(item) => item.value === productOutWorkstation.workstationId
|
)
|
if (workstation != null) {
|
productOutWorkstation.workstationNumber =
|
workstation.workstationNo
|
productOutWorkstation.workstationType = workstation.type
|
productOutWorkstation.workstationRemark = workstation.remark
|
}
|
this.productOutWorkstationData.productOutWorkstationList.push(
|
productOutWorkstation
|
)
|
}
|
}
|
})
|
} else {
|
// 初始化默认表单
|
this.initDefaultForm()
|
}
|
})
|
},
|
// 初始化默认表单
|
initDefaultForm() {
|
this.dataForm.id = 0
|
this.dataForm.templateNo = null
|
this.dataForm.testType = null
|
this.dataForm.testDesc = null
|
this.dataForm.createUser = null
|
this.dataForm.createTime = null
|
this.dataForm.status = false
|
this.productOutItemsData.productOutItemsList = []
|
this.productOutWorkstationData.productOutWorkstationList = []
|
},
|
// 添加报工项
|
addItems() {
|
var producItem = {}
|
producItem.productOutItems = null
|
producItem.productOutItemsValue = null
|
producItem.remark = null
|
this.productOutItemsData.productOutItemsList.push(producItem)
|
},
|
// 添加机台
|
addWorkstations() {
|
var productWorkstation = {}
|
productWorkstation.workstationId = null
|
productWorkstation.workstationNumber = null
|
productWorkstation.workstationType = null
|
productWorkstation.workstationRemark = null
|
this.productOutWorkstationData.productOutWorkstationList.push(
|
productWorkstation
|
)
|
},
|
// 删除报工项
|
deleteItem(index, row) {
|
this.productOutItemsData.productOutItemsList.splice(index, 1)
|
},
|
// 删除机台
|
deleteWorkstation(index, row) {
|
this.productOutWorkstationData.productOutWorkstationList.splice(index, 1)
|
},
|
// 选择机台
|
changeWorkstation(index, row) {
|
var workstation = this.workstations.find(
|
(item) => item.value === row.workstationId
|
)
|
if (workstation != null) {
|
row.workstationNumber = workstation.workstationNo
|
row.workstationType = workstation.type
|
row.workstationRemark = workstation.remark
|
}
|
},
|
// 表单提交
|
dataFormSubmit() {
|
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) {
|
var dataFlag = true
|
var itemFlag = true
|
var workstationFlag = true
|
// 模板主表校验
|
this.$refs.dataForm.validate((valid) => {
|
if (valid) {
|
this.dataForm.productOutItemsList = []
|
this.dataForm.productOutWorkstationList = []
|
} else {
|
dataFlag = false
|
}
|
})
|
// 报工项校验
|
this.$refs.itemForm.validate((valid) => {
|
if (valid) {
|
this.dataForm.productOutItemsList = []
|
// 将productOutItemsData中数据，同步至dataForm
|
var productOutItemsList = this.productOutItemsData
|
.productOutItemsList
|
if (productOutItemsList != null && productOutItemsList.length > 0) {
|
var productOutItem
|
for (var i = 0; i < productOutItemsList.length; i++) {
|
productOutItem = {}
|
productOutItem.productOutItems =
|
productOutItemsList[i].productOutItems
|
productOutItem.productOutItemsValue =
|
productOutItemsList[i].productOutItemsValue
|
productOutItem.remark = productOutItemsList[i].remark
|
this.dataForm.productOutItemsList.push(productOutItem)
|
}
|
}
|
} else {
|
itemFlag = false
|
}
|
})
|
// 机台校验
|
this.$refs.workstationForm.validate((valid) => {
|
if (valid) {
|
this.dataForm.productOutWorkstationList = []
|
// 将productOutWorkstationData中数据，同步至dataForm
|
var productOutWorkstationList = this.productOutWorkstationData
|
.productOutWorkstationList
|
if (
|
productOutWorkstationList != null &&
|
productOutWorkstationList.length > 0
|
) {
|
var productOutWorkstation
|
for (var i = 0; i < productOutWorkstationList.length; i++) {
|
productOutWorkstation = {}
|
productOutWorkstation.workstationId =
|
productOutWorkstationList[i].workstationId
|
this.dataForm.productOutWorkstationList.push(
|
productOutWorkstation
|
)
|
}
|
}
|
} else {
|
workstationFlag = false
|
}
|
})
|
if (dataFlag && itemFlag && workstationFlag) {
|
if (this.dataForm.id) {
|
putObj(this.dataForm)
|
.then((response) => {
|
var data = response.data
|
if (data.code == 0) {
|
this.$message.success('修改成功')
|
this.visible = false
|
this.$emit('refreshDataList')
|
} else {
|
this.$message.error('修改失败')
|
}
|
})
|
.catch((error) => {})
|
} else {
|
addObj(this.dataForm)
|
.then((response) => {
|
var data = response.data
|
if (data.code == 0) {
|
this.$message.success('添加成功')
|
this.visible = false
|
this.$emit('refreshDataList')
|
} else {
|
this.$message.error('添加失败')
|
}
|
})
|
.catch((error) => {})
|
}
|
}
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
.tableItemsClass td {
|
padding: 0px 0px !important;
|
}
|
.colItemsClass {
|
padding-bottom: 0px !important;
|
padding-top: 17px !important;
|
}
|
.colItemsClass .el-form-item__content {
|
margin-left: 0px !important;
|
}
|
</style>
|
