@@ -0,0 +1,109 @@ | |||||
<!-- | |||||
filename: CustomBomList.vue | |||||
author: liubin | |||||
date: 2023-11-17 14:06:04 | |||||
description: | |||||
--> | |||||
<template> | |||||
<div class="custom-bom-list—wrapper"> | |||||
<div | |||||
class="ct__equipment-name" | |||||
@click.prevent=" | |||||
() => { | |||||
$emit('open', equipment.id); | |||||
} | |||||
"> | |||||
{{ equipment.name }} | |||||
</div> | |||||
<div | |||||
class="ct__bom-list" | |||||
:class="{ hidden: active && bomListLength > 0 ? false : true }"> | |||||
<ul class="param-bom"> | |||||
<li v-for="bom in equipment.paramBomList" :key="bom.name"> | |||||
{{ bom.name }} | |||||
</li> | |||||
</ul> | |||||
<ul class="material-bom"> | |||||
<li v-for="bom in equipment.materialBomList" :key="bom.name"> | |||||
{{ bom.name }} | |||||
</li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name: 'CustomBomList', | |||||
components: {}, | |||||
props: { | |||||
equipment: { | |||||
type: Object, | |||||
default: () => ({}), | |||||
}, | |||||
active: { | |||||
type: Boolean, | |||||
default: false, | |||||
}, | |||||
}, | |||||
computed: { | |||||
bomListLength() { | |||||
return ( | |||||
(this.equipment.paramBomList?.length || 0) + | |||||
(this.equipment.materialBomList?.length || 0) | |||||
); | |||||
}, | |||||
}, | |||||
data() { | |||||
return { | |||||
showList: false, | |||||
}; | |||||
}, | |||||
methods: {}, | |||||
}; | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
// .custom-bom-list—wrapper { | |||||
// height: auto; | |||||
// transition: height .2s ease-in-out; | |||||
// } | |||||
.ct__equipment-name { | |||||
background: #0001; | |||||
padding: 8px; | |||||
border-radius: 4px; | |||||
cursor: pointer; | |||||
transition: all 0.3s; | |||||
&:hover { | |||||
background: #0002; | |||||
} | |||||
} | |||||
.hidden { | |||||
display: none; | |||||
} | |||||
ul, | |||||
li { | |||||
margin: 0; | |||||
padding: 0; | |||||
list-style: none; | |||||
} | |||||
ul { | |||||
display: flex; | |||||
flex-direction: column; | |||||
gap: 4px; | |||||
margin-top: 4px; | |||||
} | |||||
.material-bom > li, | |||||
.param-bom > li { | |||||
padding: 4px 24px; | |||||
background: #0001; | |||||
border-radius: 4px; | |||||
} | |||||
</style> |
@@ -11,8 +11,8 @@ | |||||
key="left" | key="left" | ||||
class="left-ctb" | class="left-ctb" | ||||
title="设备列表" | title="设备列表" | ||||
:candidate-list="[]" | |||||
:selected-list="[]" | |||||
:candidate-list="candidateList" | |||||
:selected-list="selectedList" | |||||
@selected-list-change="handleChange" /> | @selected-list-change="handleChange" /> | ||||
<div | <div | ||||
class="btns" | class="btns" | ||||
@@ -51,6 +51,8 @@ export default { | |||||
pageNo: 1, | pageNo: 1, | ||||
pageSize: 100, | pageSize: 100, | ||||
}, | }, | ||||
candidateList: [], | |||||
selectedList: [], | |||||
}; | }; | ||||
}, | }, | ||||
computed: {}, | computed: {}, | ||||
@@ -112,7 +114,6 @@ export default { | |||||
} | } | ||||
.btns { | .btns { | ||||
border: 1px solid #ccc; | |||||
padding: 10px; | padding: 10px; | ||||
} | } | ||||
@@ -18,15 +18,34 @@ | |||||
项 | 项 | ||||
</span> | </span> | ||||
</div> | </div> | ||||
<div class="ctb-main"></div> | |||||
<div class="ctb-footer"></div> | |||||
<div class="ctb-main"> | |||||
<el-input | |||||
v-model="searchText" | |||||
placeholder="搜索" | |||||
style="margin-bottom: 12px; user-select: none"> | |||||
<i slot="prefix" class="el-input__icon el-icon-search"></i> | |||||
</el-input> | |||||
<custom-tree /> | |||||
</div> | |||||
<div class="ctb-footer"> | |||||
<pagination | |||||
v-show="1" | |||||
style="padding: 0" | |||||
:total="total" | |||||
:page.sync="queryParams.pageNo" | |||||
:limit.sync="queryParams.pageSize" | |||||
@pagination="getList" /> | |||||
</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import CustomTree from './CustomTree.vue'; | |||||
export default { | export default { | ||||
name: 'CustomTransferBox', | name: 'CustomTransferBox', | ||||
components: {}, | |||||
components: { CustomTree }, | |||||
props: { | props: { | ||||
title: { | title: { | ||||
type: String, | type: String, | ||||
@@ -42,10 +61,21 @@ export default { | |||||
}, | }, | ||||
}, | }, | ||||
data() { | data() { | ||||
return {}; | |||||
return { | |||||
queryParams: { | |||||
pageNo: 1, | |||||
pageSize: 10, | |||||
}, | |||||
total: 0, | |||||
searchText: '', | |||||
}; | |||||
}, | }, | ||||
computed: {}, | computed: {}, | ||||
methods: {}, | |||||
methods: { | |||||
getList() { | |||||
this.$emit('get-list', this.queryParams); | |||||
}, | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -70,7 +100,9 @@ export default { | |||||
flex: 1; | flex: 1; | ||||
padding: 12px; | padding: 12px; | ||||
} | } | ||||
.ctb-footer { | .ctb-footer { | ||||
user-select: none; | |||||
min-height: 12px; | min-height: 12px; | ||||
padding: 12px; | padding: 12px; | ||||
border-top: 1px solid #ccc; | border-top: 1px solid #ccc; | ||||
@@ -0,0 +1,65 @@ | |||||
<!-- | |||||
filename: CustomTree.vue | |||||
author: liubin | |||||
date: 2023-11-17 13:53:16 | |||||
description: | |||||
--> | |||||
<template> | |||||
<div class="custom-tree"> | |||||
<div v-for="n in 5" :key="n"> | |||||
<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 }, | |||||
], | |||||
}" /> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import CustomBomList from './CustomBomList.vue'; | |||||
export default { | |||||
name: 'CustomTree', | |||||
components: { CustomBomList }, | |||||
props: {}, | |||||
data() { | |||||
return { | |||||
showList: false, | |||||
activeId: null, | |||||
}; | |||||
}, | |||||
computed: {}, | |||||
methods: { | |||||
closeOthers(id) { | |||||
this.activeId = id; | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.custom-tree { | |||||
// background: #0001; | |||||
display: flex; | |||||
flex-direction: column; | |||||
gap: 8px; | |||||
} | |||||
</style> |