<template>
|
<div class="mod-config" style="height:100%;">
|
<basic-container style="height:100%;" class="poc-basic-container">
|
<el-row type="flex" justify="space-around" style="height:100%;">
|
<el-col :span="13">
|
<div>
|
<div
|
style="display:flex;justify-content:space-between;margin-bottom:8px;"
|
>
|
<div style="line-height:32px;font-weight:bold;">
|
POC节点
|
</div>
|
<div><el-button @click="savePoc">保存</el-button></div>
|
</div>
|
<el-tree
|
:data="treeData"
|
node-key="id"
|
default-expand-all
|
:expand-on-click-node="false"
|
@node-click="handleNodeClick"
|
>
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span>{{ node.label }}</span>
|
<span>
|
<el-button
|
type="text"
|
size="mini"
|
@click="() => append(data)"
|
>
|
新增
|
</el-button>
|
<el-button
|
type="text"
|
size="mini"
|
@click.stop="() => remove(node, data)"
|
>
|
删除
|
</el-button>
|
</span>
|
</span>
|
</el-tree>
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<div style="height: 100%;">
|
<div style="display:flex;font-size:14px;margin-bottom:8px;">
|
<div>标识：</div>
|
<div>{{ currTreeNodeData.id }}</div>
|
</div>
|
<div
|
style="display:flex;font-size:14px;justify-content:space-between;margin-bottom:8px;"
|
>
|
<div style="display:flex;width: 48%;">
|
<div style="line-height:32px;width:70px;">节点描述：</div>
|
<div style="width:calc(100% - 100px)">
|
<el-input v-model="currTreeNodeData.label"></el-input>
|
</div>
|
</div>
|
<div style="display:flex;width: 48%;">
|
<div style="line-height:32px;">工序：</div>
|
<div style="width:calc(100% - 100px)">
|
<el-input v-model="currTreeNodeData.operationName"></el-input>
|
</div>
|
</div>
|
</div>
|
<div
|
style="display:flex;font-size:14px;justify-content:space-between;margin-bottom:8px;"
|
>
|
<div style="display:flex;width: 48%;">
|
<div style="line-height:32px;width:70px;">零件描述：</div>
|
<div style="width:calc(100% - 100px)">
|
<el-input v-model="currTreeNodeData.partName"></el-input>
|
</div>
|
</div>
|
<div style="display:flex;width: 48%;">
|
<div style="line-height:32px;">数量：</div>
|
<div style="width:calc(100% - 100px)">
|
<el-input v-model="currTreeNodeData.qty"></el-input>
|
</div>
|
</div>
|
</div>
|
<div
|
style="display:flex;font-size:14px;justify-content:space-between;margin-bottom:8px;"
|
>
|
<div style="display:flex;width: 48%;">
|
<div style="line-height:32px;width:70px;">单位：</div>
|
<div style="width:calc(100% - 100px)">
|
<el-input v-model="currTreeNodeData.unit"></el-input>
|
</div>
|
</div>
|
</div>
|
<div
|
style="display:flex;font-size:14px;margin-bottom:8px;justify-content:space-between;"
|
>
|
<div style="line-height:29px;">工序参数：</div>
|
<div>
|
<el-button
|
type="success"
|
icon="el-icon-plus"
|
circle
|
size="mini"
|
@click="addOperateParam"
|
></el-button>
|
</div>
|
</div>
|
<div style="height: calc(100% - 180px)">
|
<el-table
|
:data="currTreeNodeData.paramList"
|
style="width: 100%"
|
height="100%"
|
>
|
<el-table-column type="index" width="50" label="序号">
|
</el-table-column>
|
<el-table-column prop="name" label="参数名" align="center">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.name"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="100" align="center">
|
<template slot-scope="scope">
|
<el-button
|
@click="deleteClick(scope.row, scope.$index)"
|
type="text"
|
size="small"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</basic-container>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.poc-basic-container >>> .el-card {
|
height: 100%;
|
}
|
.poc-basic-container >>> .el-card__body {
|
height: calc(100% - 20px);
|
}
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 8px;
|
}
|
</style>
|
<script>
|
import { mapGetters } from 'vuex'
|
import { addObj } from '@/api/basic/poc'
|
|
export default {
|
data() {
|
return {
|
treeData: [
|
{
|
id: 1,
|
label: '演示成品',
|
operationName: '演示成品工序',
|
partName: '演示成品',
|
qty: 1,
|
unit: 'km',
|
paramList: [],
|
children: []
|
}
|
],
|
idIndex: 1,
|
currTreeNodeData: {}
|
}
|
},
|
components: {},
|
computed: {
|
...mapGetters(['permissions'])
|
},
|
methods: {
|
append(data) {
|
const newChild = {
|
id: ++this.idIndex,
|
label: '演示半成品零件',
|
operationName: '演示半成品工序',
|
partName: '演示半成品零件',
|
qty: 1,
|
unit: 'km',
|
paramList: [],
|
children: []
|
}
|
if (!data.children) {
|
this.$set(data, 'children', [])
|
}
|
data.children.push(newChild)
|
},
|
remove(node, data) {
|
const parent = node.parent
|
const children = parent.data.children || parent.data
|
const index = children.findIndex((d) => d.id === data.id)
|
children.splice(index, 1)
|
this.currTreeNodeData = {}
|
},
|
handleNodeClick(data) {
|
console.log('data', data)
|
this.currTreeNodeData = data
|
},
|
addOperateParam() {
|
if (this.currTreeNodeData.id) {
|
this.currTreeNodeData.paramList.push({ name: '' })
|
} else {
|
this.$message.warning('请选择节点')
|
}
|
},
|
deleteClick(row, index) {
|
console.log()
|
this.currTreeNodeData.paramList.splice(index, 1)
|
this.$message.success('删除成功')
|
},
|
savePoc() {
|
console.log('treeData', this.treeData)
|
if (this.treeData[0].children.length > 0) {
|
addObj(this.treeData).then((response) => {
|
this.$message.success('保存成功')
|
})
|
} else {
|
this.$message.error('需大于两个POC节点，请添加节点')
|
}
|
}
|
}
|
}
|
</script>
|
