projects/mes-lb #97
@@ -18,7 +18,9 @@
|
||||
</div>
|
||||
<div
|
||||
class="ct__bom-list"
|
||||
:class="{ hidden: active && bomListLength > 0 ? false : true }">
|
||||
:class="{
|
||||
hidden: active && bomListLength > 0 ? false : true,
|
||||
}">
|
||||
<ul class="param-bom">
|
||||
<li v-for="bom in equipment.paramBomList" :key="bom.name">
|
||||
{{ bom.name }}
|
||||
@@ -94,16 +96,16 @@ li {
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.material-bom > li,
|
||||
.param-bom > li {
|
||||
padding: 4px 24px;
|
||||
background: #0001;
|
||||
border-radius: 4px;
|
||||
background: #0001;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -51,8 +51,66 @@ export default {
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
},
|
||||
candidateList: [],
|
||||
selectedList: [],
|
||||
candidate: {
|
||||
total: 0,
|
||||
tree: [
|
||||
{
|
||||
id: 1,
|
||||
name: '设备1',
|
||||
paramBomList: [
|
||||
{ name: '参数BOM1', type: 'param', id: 1 },
|
||||
{ name: '参数BOM2', type: 'param', id: 2 },
|
||||
{ name: '参数BOM3', type: 'param', id: 3 },
|
||||
{ name: '参数BOM4', type: 'param', id: 4 },
|
||||
{ name: '参数BOM5', type: 'param', id: 5 },
|
||||
],
|
||||
materialBomList: [
|
||||
{ name: '物料BOM1', type: 'material', id: 1 },
|
||||
{ name: '物料BOM2', type: 'material', id: 2 },
|
||||
{ name: '物料BOM3', type: 'material', id: 3 },
|
||||
{ name: '物料BOM4', type: 'material', id: 4 },
|
||||
{ name: '物料BOM5', type: 'material', id: 5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '设备2',
|
||||
paramBomList: [
|
||||
{ name: '参数BOM1', type: 'param', id: 1 },
|
||||
{ name: '参数BOM2', type: 'param', id: 2 },
|
||||
{ name: '参数BOM3', type: 'param', id: 3 },
|
||||
{ name: '参数BOM4', type: 'param', id: 4 },
|
||||
{ name: '参数BOM5', type: 'param', id: 5 },
|
||||
],
|
||||
materialBomList: [
|
||||
{ name: '物料BOM1', type: 'material', id: 1 },
|
||||
{ name: '物料BOM2', type: 'material', id: 2 },
|
||||
{ name: '物料BOM3', type: 'material', id: 3 },
|
||||
{ name: '物料BOM4', type: 'material', id: 4 },
|
||||
{ name: '物料BOM5', type: 'material', id: 5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '设备3',
|
||||
paramBomList: [
|
||||
{ name: '参数BOM1', type: 'param', id: 1 },
|
||||
{ name: '参数BOM2', type: 'param', id: 2 },
|
||||
{ name: '参数BOM3', type: 'param', id: 3 },
|
||||
{ name: '参数BOM4', type: 'param', id: 4 },
|
||||
{ name: '参数BOM5', type: 'param', id: 5 },
|
||||
],
|
||||
materialBomList: [
|
||||
{ name: '物料BOM1', type: 'material', id: 1 },
|
||||
{ name: '物料BOM2', type: 'material', id: 2 },
|
||||
{ name: '物料BOM3', type: 'material', id: 3 },
|
||||
{ name: '物料BOM4', type: 'material', id: 4 },
|
||||
{ name: '物料BOM5', type: 'material', id: 5 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
selectedList: [],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
@@ -101,8 +159,8 @@ export default {
|
||||
}
|
||||
this.bomLoading = false;
|
||||
},
|
||||
//
|
||||
handleChange() {}
|
||||
//
|
||||
handleChange() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
|
||||
<custom-tree />
|
||||
<custom-tree :raw-data="candidateList" />
|
||||
</div>
|
||||
<div class="ctb-footer">
|
||||
<pagination
|
||||
|
||||
@@ -7,28 +7,11 @@
|
||||
|
||||
<template>
|
||||
<div class="custom-tree">
|
||||
<div v-for="n in 5" :key="n">
|
||||
<div v-for="equipment in rawData" :key="eq.id">
|
||||
<CustomBomList
|
||||
@open="closeOthers"
|
||||
:active="activeId == n"
|
||||
:equipment="{
|
||||
id: n,
|
||||
name: '设备' + n,
|
||||
paramBomList: [
|
||||
{ name: '参数BOM1', type: 'param', id: 1 },
|
||||
{ name: '参数BOM2', type: 'param', id: 2 },
|
||||
{ name: '参数BOM3', type: 'param', id: 3 },
|
||||
{ name: '参数BOM4', type: 'param', id: 4 },
|
||||
{ name: '参数BOM5', type: 'param', id: 5 },
|
||||
],
|
||||
materialBomList: [
|
||||
{ name: '物料BOM1', type: 'material', id: 1 },
|
||||
{ name: '物料BOM2', type: 'material', id: 2 },
|
||||
{ name: '物料BOM3', type: 'material', id: 3 },
|
||||
{ name: '物料BOM4', type: 'material', id: 4 },
|
||||
{ name: '物料BOM5', type: 'material', id: 5 },
|
||||
],
|
||||
}" />
|
||||
:active="activeId == eq.id"
|
||||
:equipment="equipment" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -39,7 +22,12 @@ import CustomBomList from './CustomBomList.vue';
|
||||
export default {
|
||||
name: 'CustomTree',
|
||||
components: { CustomBomList },
|
||||
props: {},
|
||||
props: {
|
||||
rawData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showList: false,
|
||||
|
||||
43
src/views/extend/processFlowView/components/candidate.js
Normal file
43
src/views/extend/processFlowView/components/candidate.js
Normal file
@@ -0,0 +1,43 @@
|
||||
export class Candidate {
|
||||
constructor(id, name, paramBomList, materialBomList) {
|
||||
this.equipmentId = id;
|
||||
this.equipmentName = name;
|
||||
this.children = [];
|
||||
this.totalBom = paramBomList.length + materialBomList.length;
|
||||
this.selected = false;
|
||||
paramBomList.forEach((pb) => {
|
||||
this.children.push({
|
||||
id: pb.id,
|
||||
name: pb.name,
|
||||
type: 'param',
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
materialBomList.forEach((mb) => {
|
||||
this.children.push({
|
||||
id: mb.id,
|
||||
name: mb.name,
|
||||
type: 'material',
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
get selected() {
|
||||
return this.children.filter((child) => child.selected).length;
|
||||
}
|
||||
}
|
||||
|
||||
export class CandidateList {
|
||||
constructor() {
|
||||
this.value = [];
|
||||
}
|
||||
|
||||
addCandidate(candidate) {
|
||||
this.value.push(candidate);
|
||||
}
|
||||
|
||||
get selected() {
|
||||
return this.list.filter((candidate) => candidate.selected).length;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user