@@ -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" | |||
class="left-ctb" | |||
title="设备列表" | |||
:candidate-list="[]" | |||
:selected-list="[]" | |||
:candidate-list="candidateList" | |||
:selected-list="selectedList" | |||
@selected-list-change="handleChange" /> | |||
<div | |||
class="btns" | |||
@@ -51,6 +51,8 @@ export default { | |||
pageNo: 1, | |||
pageSize: 100, | |||
}, | |||
candidateList: [], | |||
selectedList: [], | |||
}; | |||
}, | |||
computed: {}, | |||
@@ -112,7 +114,6 @@ export default { | |||
} | |||
.btns { | |||
border: 1px solid #ccc; | |||
padding: 10px; | |||
} | |||
@@ -18,15 +18,34 @@ | |||
项 | |||
</span> | |||
</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> | |||
</template> | |||
<script> | |||
import CustomTree from './CustomTree.vue'; | |||
export default { | |||
name: 'CustomTransferBox', | |||
components: {}, | |||
components: { CustomTree }, | |||
props: { | |||
title: { | |||
type: String, | |||
@@ -42,10 +61,21 @@ export default { | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
return { | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
}, | |||
total: 0, | |||
searchText: '', | |||
}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
methods: { | |||
getList() { | |||
this.$emit('get-list', this.queryParams); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -70,7 +100,9 @@ export default { | |||
flex: 1; | |||
padding: 12px; | |||
} | |||
.ctb-footer { | |||
user-select: none; | |||
min-height: 12px; | |||
padding: 12px; | |||
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> |