<template>
|
<el-dialog
|
width="80%"
|
top="5vh"
|
title="起始工序-工艺路线"
|
:visible.sync="innerVisible"
|
append-to-body
|
@close="$emit('update:currshowlist', false)"
|
:show="currshowlist"
|
class="operation-technology-dialog"
|
>
|
<div style="display:flex;justify-content:space-between;">
|
<div style="width:47%;">
|
<el-table
|
ref="operationMultipleTable"
|
class="operation-multiple-table"
|
:data="operationList"
|
tooltip-effect="dark"
|
style="width: 100%"
|
height="600"
|
@selection-change="handleSelectionChange"
|
@row-click="rowClick"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
:selectable="selectHandle"
|
>
|
</el-table-column>
|
<el-table-column prop="operationNo" label="工序编号" width="120">
|
</el-table-column>
|
<el-table-column prop="name" label="工序名称" width="120">
|
</el-table-column>
|
<el-table-column prop="workCenter" label="工作中心" width="120">
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间">
|
</el-table-column>
|
</el-table>
|
</div>
|
<div style="width:47%;height: 600px;overflow:auto;">
|
<div
|
v-for="(item, index) in operateRoutingList"
|
:key="index"
|
style="margin-bottom:10px;"
|
>
|
<div style="font-weight:bold;">{{ item.operateName }}</div>
|
<el-table
|
:ref="'routing_' + item.operateId"
|
:data="item.routingList"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@selection-change="
|
routingHandleSelectionChange($event, 'routing' + item.operateId)
|
"
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="routingNo" label="工艺路线编号">
|
</el-table-column>
|
<el-table-column prop="partNo" label="零件编号"> </el-table-column>
|
<el-table-column
|
prop="partName"
|
label="零件名称"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间">
|
</el-table-column>
|
<el-table-column label="开启批次" width="100">
|
<template slot-scope="scope">
|
<el-switch v-model="scope.row.isGenerateSn"> </el-switch>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="innerVisible = false">取 消</el-button>
|
<el-button
|
type="primary"
|
:disabled="isSubmit"
|
v-thinclick="`selectRouting`"
|
>确 定</el-button
|
>
|
</div>
|
</el-dialog>
|
</template>
|
<script>
|
import { getRoutingByDocumentIdAndOperationId } from '@/api/technology/routing'
|
export default {
|
props: {
|
currshowlist: {
|
type: Boolean,
|
default: false
|
},
|
operationList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
taskList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
innerVisible: false,
|
isSubmit: false,
|
multipleSelection: [],
|
operateRoutingList: []
|
}
|
},
|
created() {},
|
methods: {
|
rowClick(row, column) {
|
if (row.commonChecked) {
|
// 取消选中，并删除左侧工序及对应工艺路线列表
|
row.commonChecked = false
|
this.$refs.operationMultipleTable.toggleRowSelection(row, false)
|
// 删除右侧对应的工艺路线
|
this.delTechnologyList(row)
|
} else {
|
// 选中，并增加左侧工序及对应工艺路线列表
|
row.commonChecked = true
|
this.$refs.operationMultipleTable.toggleRowSelection(row, true)
|
this.queryTechnologyList(row)
|
}
|
},
|
selectHandle(row, index) {
|
return false
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val
|
},
|
routingHandleSelectionChange(val, routingType) {
|
this[routingType] = val
|
},
|
// 删除工序对应的工艺路线
|
delTechnologyList(operation) {
|
// 根据id，找出technology
|
const operateRouting = this.operateRoutingList.find((item) => {
|
return item.operateId == operation.id
|
})
|
if (operateRouting) {
|
const operateRoutingIndex = this.operateRoutingList.indexOf(
|
operateRouting
|
)
|
// 删除时，记录下operateRoutingIndex之后，list中已勾选的信息
|
const cacheList = []
|
for (
|
let i = operateRoutingIndex + 1;
|
i < this.operateRoutingList.length;
|
i++
|
) {
|
const operateId = this.operateRoutingList[i].operateId
|
const routingSelection = 'routing' + operateId
|
cacheList.push({
|
operateId: operateId,
|
routingList: this[routingSelection]
|
})
|
}
|
this.operateRoutingList.splice(operateRoutingIndex, 1)
|
const _that = this
|
this.$nextTick(() => {
|
cacheList.forEach((item) => {
|
const refName = 'routing_' + item.operateId
|
const routingList = item.routingList
|
routingList.forEach((ele) => {
|
_that.$refs[refName][0].toggleRowSelection(ele, true)
|
})
|
})
|
})
|
}
|
},
|
// 查询工序对应的工艺路线
|
queryTechnologyList(operation) {
|
getRoutingByDocumentIdAndOperationId({
|
documentId: this.taskList[0].technologyDocumentId,
|
operationId: operation.id
|
}).then((response) => {
|
const resData = response.data
|
const routingList = resData.data
|
routingList.forEach((ele) => {
|
this.$set(ele, 'isGenerateSn', true)
|
})
|
this.operateRoutingList.push({
|
operateId: operation.id,
|
operateName: operation.name,
|
routingList: routingList
|
})
|
const routingRef = 'routing_' + operation.id
|
const _that = this
|
this.$nextTick(() => {
|
_that.$refs[routingRef][0].toggleAllSelection(true)
|
})
|
})
|
},
|
selectRouting() {
|
this.isSubmit = true
|
|
// 拼接工艺路线
|
const resultList = []
|
this.operationList.forEach((item) => {
|
if (item.commonChecked) {
|
const routingSelection = 'routing' + item.id
|
const routingSelectList = this[routingSelection]
|
resultList.push({
|
operationId: item.id,
|
operationName: item.name,
|
routingList: routingSelectList
|
})
|
}
|
})
|
console.log('resultList', resultList)
|
if (resultList.length > 0 && resultList[0].routingList.length > 0) {
|
let flag = true
|
resultList.forEach((ele) => {
|
if (
|
ele.routingList &&
|
ele.routingList != null &&
|
ele.routingList.length > 0
|
) {
|
} else {
|
flag = false
|
}
|
})
|
if (flag) {
|
this.$emit('selectionRouting', resultList)
|
this.innerVisible = false
|
} else {
|
this.$message.error('请选择工艺路线')
|
}
|
} else {
|
this.$message.error('请先选择起始工序')
|
}
|
|
this.isSubmit = false
|
}
|
},
|
watch: {
|
currshowlist() {
|
this.innerVisible = this.currshowlist
|
if (this.currshowlist) {
|
this.operateRoutingList = []
|
this.$nextTick(() => {
|
//
|
})
|
}
|
}
|
},
|
mounted() {}
|
}
|
</script>
|
<style scoped>
|
.operation-technology-dialog >>> .el-dialog__body {
|
padding: 10px 20px 10px 20px;
|
}
|
/*默认已选中行，checkbox样式，多选*/
|
.operation-technology-dialog
|
>>> .operation-multiple-table
|
.el-table-column--selection
|
.el-checkbox.is-checked
|
.el-checkbox__inner {
|
background-color: #006eff;
|
border-color: #006eff;
|
}
|
.operation-technology-dialog
|
>>> .operation-multiple-table
|
.el-table-column--selection
|
.el-checkbox.is-checked
|
.el-checkbox__inner::after {
|
border-color: #ffffff;
|
}
|
</style>
|
