83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<el-tree key="warehouseTree" v-loading="loading" :data="treeData" :props="treeProps" node-key="actualWarehouseId" highlight-current
|
|
@node-click="handleNodeClick" :expand-on-click-node="false" class="stock-tree" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listWarehouse } from '@/api/wms/warehouse';
|
|
import { treeActualWarehouseTwoLevel } from '@/api/wms/actualWarehouse';
|
|
|
|
export default {
|
|
name: "WarehouseTree",
|
|
props: {
|
|
warehouseType: {
|
|
type: String,
|
|
default: 'real'
|
|
},
|
|
showEmpty: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
treeData: [],
|
|
loading: true,
|
|
treeProps: {
|
|
children: 'children',
|
|
label: 'actualWarehouseName',
|
|
isLeaf: 'isLeaf'
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
warehouseType: {
|
|
handler(newVal, oldVal) {
|
|
this.getWarehouseTree()
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
getWarehouseTree() {
|
|
this.loading = true;
|
|
if (this.warehouseType === 'real') {
|
|
treeActualWarehouseTwoLevel().then(response => {
|
|
const data = response.data;
|
|
if (this.showEmpty) {
|
|
data.unshift({
|
|
actualWarehouseId: '-1',
|
|
actualWarehouseName: '空置库',
|
|
isLeaf: true
|
|
})
|
|
}
|
|
this.treeData = data;
|
|
this.loading = false;
|
|
});
|
|
} else {
|
|
listWarehouse().then(response => {
|
|
this.treeData = response.data.map(item => ({
|
|
...item,
|
|
actualWarehouseId: item.warehouseId,
|
|
actualWarehouseName: item.warehouseName
|
|
}))
|
|
this.loading = false;
|
|
});
|
|
}
|
|
},
|
|
handleTree(data, id, parentId) {
|
|
const cloneData = JSON.parse(JSON.stringify(data));
|
|
return cloneData.filter(father => {
|
|
const branchArr = cloneData.filter(child => father[id] === child[parentId]);
|
|
if (branchArr.length > 0) father.children = branchArr;
|
|
return father[parentId] === 0 || father[parentId] === null;
|
|
});
|
|
},
|
|
handleNodeClick(node) {
|
|
this.$emit('node-click', node);
|
|
}
|
|
}
|
|
};
|
|
</script> |