<template>
|
<a-card
|
:loading="cardLoading"
|
:bordered="false"
|
:title="title"
|
style="height: 100%;"
|
>
|
<a-spin :spinning="loading">
|
<a-alert
|
type="info"
|
:showIcon="true"
|
style="margin-right: 54px;"
|
>
|
<div slot="message">
|
当前：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
|
<a
|
v-if="this.currSelected.title"
|
style="margin-left: 10px"
|
@click="onClearSelected"
|
>取消</a>
|
</div>
|
</a-alert>
|
<div class="drawer-bootom-button">
|
<a-dropdown
|
:trigger="['click']"
|
placement="bottomCenter"
|
>
|
<a-menu slot="overlay">
|
<a-menu-item
|
key="1"
|
@click="expandAll"
|
>展开所有</a-menu-item>
|
<a-menu-item
|
key="2"
|
@click="closeAll"
|
>合并所有</a-menu-item>
|
<a-menu-item
|
key="3"
|
@click="refreshTree"
|
>刷新</a-menu-item>
|
</a-menu>
|
<a-button>
|
<a-icon type="bars" />
|
</a-button>
|
</a-dropdown>
|
</div>
|
|
<a-input-search
|
@search="handleSearch"
|
style="width:100%;margin-top: 10px"
|
placeholder="检索仓库"
|
allowClear
|
v-model="searchInput"
|
@change="handleChange"
|
/>
|
|
<!-- showLine -->
|
<a-tree
|
:checkStrictly="checkStrictly"
|
:expandedKeys.sync="expandedKeys"
|
:selectedKeys="selectedKeys"
|
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
:treeData="treeDataSource"
|
:autoExpandParent="autoExpandParent"
|
@select="onSelect"
|
@expand="onExpand"
|
>
|
<template
|
slot="title"
|
slot-scope="{title, type, rfield1}"
|
>
|
<Tooltip
|
placement="top"
|
title="企业"
|
>
|
<i
|
v-if="type == 0"
|
class="action-jeecg actioncompany2"
|
style="font-size: 18px;"
|
/>
|
</Tooltip>
|
<Tooltip
|
placement="top"
|
title="工厂"
|
>
|
<i
|
v-if="type == 1"
|
class="action-jeecg actionsite2"
|
style="font-size: 18px;"
|
/>
|
</Tooltip>
|
<Tooltip
|
placement="top"
|
title="仓库"
|
>
|
<i
|
v-if="type == 2"
|
class="action-jeecg actionwarehouse"
|
style="font-size: 13px;"
|
/>
|
</Tooltip>
|
<Tooltip
|
placement="top"
|
title="区域"
|
>
|
<i
|
v-if="type == 3"
|
class="action-jeecg actionstoragearea"
|
style="font-size: 14px;"
|
/>
|
</Tooltip>
|
<Tooltip
|
placement="top"
|
title="货架"
|
>
|
<i
|
v-if="type == 4"
|
class="action-jeecg actionshelf"
|
style="font-size: 13px;"
|
/>
|
</Tooltip>
|
<!-- <Tooltip
|
placement="top"
|
title="库位"
|
>
|
<i
|
v-if="type == 5"
|
class="action-jeecg actionstoragelocation"
|
style="font-size: 14px;"
|
/>
|
</Tooltip> -->
|
<span v-if="title.indexOf(searchValue) > -1">
|
{{ title.substr(0, title.indexOf(searchValue)) }}
|
<span class="replaceSearch">{{ searchValue }}</span>
|
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
|
</span>
|
<span v-else>{{ title }}</span>
|
<span
|
v-if="type == 4"
|
:style="{position: 'absolute',right: 0}"
|
>
|
<Tooltip
|
placement="top"
|
title="货架库位数量"
|
>
|
{{rfield1}}
|
</Tooltip>
|
</span>
|
</template>
|
</a-tree>
|
</a-spin>
|
</a-card>
|
</template>
|
|
<script>
|
import { getAction } from '@/api/manage'
|
import Tooltip from 'ant-design-vue/es/tooltip'
|
export default {
|
name: 'WarehouseTree',
|
components: {
|
Tooltip,
|
},
|
props: {
|
value: {},
|
title: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
searchInput: '',
|
cardLoading: false,
|
loading: false,
|
treeDataSource: [],
|
selectedKeys: [],
|
expandedKeys: [],
|
url: {
|
warehouseTreeList: '/tms/warehouse/loadTree'
|
},
|
searchValue: '',
|
dataList: [],
|
autoExpandParent: true,
|
checkStrictly: true,
|
allTreeKeys: [],
|
currSelected: {},
|
hiding: false,
|
allSiteIds: ['-1'],
|
}
|
},
|
created() {
|
this.queryTreeData();
|
},
|
methods: {
|
getCurrSelectedTitle() {
|
return !this.currSelected.title ? '' : this.currSelected.title;
|
},
|
onClearSelected() {
|
this.hiding = true;
|
this.currSelected = {};
|
this.selectedKeys = [];
|
},
|
onSelect(selectedKeys, e) {
|
this.hiding = false;
|
let record = e.node.dataRef;
|
this.currSelected = Object.assign({}, record);
|
this.selectedKeys = [record.key];
|
},
|
onExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys;
|
this.autoExpandParent = false;
|
},
|
queryTreeData() {
|
this.loading = true;
|
this.cardLoading = true;
|
getAction(this.url.warehouseTreeList).then((res) => {
|
if (res.success) {
|
this.dataList = [];
|
this.allTreeKeys = [];
|
this.treeDataSource = res.result;
|
this.generateList(res.result);
|
this.expandAll()
|
} else {
|
this.$message.warn(res.message);
|
}
|
}).finally(() => {
|
this.loading = false;
|
this.cardLoading = false;
|
})
|
},
|
|
handleChange() {
|
let search = this.searchInput;
|
let expandedKeys = this.dataList
|
.map(item => {
|
if (item.title.indexOf(search) > -1) {
|
return this.getParentKey(item.key, this.treeDataSource);
|
}
|
return null;
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i);
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: search,
|
autoExpandParent: true,
|
});
|
},
|
handleSearch(value) {
|
let search = value;
|
let expandedKeys = this.dataList
|
.map(item => {
|
if (item.title.indexOf(search) > -1) {
|
return this.getParentKey(item.key, this.treeDataSource);
|
}
|
return null;
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i);
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: search,
|
autoExpandParent: true,
|
});
|
},
|
getParentKey(key, tree) {
|
let parentKey;
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i];
|
if (node.children) {
|
if (node.children.some(item => item.key === key)) {
|
parentKey = node.key;
|
} else if (
|
this.getParentKey(key, node.children)) {
|
parentKey = this.getParentKey(key, node.children);
|
}
|
}
|
}
|
return parentKey;
|
},
|
|
generateList(data) {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i];
|
const key = node.key;
|
const title = node.title;
|
this.dataList.push({ key, title: title });
|
this.allTreeKeys.push(key);
|
if (node.children) {
|
this.generateList(node.children);
|
}
|
}
|
},
|
expandAll() {
|
this.expandedKeys = this.allTreeKeys;
|
},
|
closeAll() {
|
this.expandedKeys = []
|
},
|
refreshTree() {
|
this.queryTreeData();
|
}
|
},
|
mounted() {
|
this.$bus.$on('queryTreeData', this.queryTreeData);
|
},
|
beforeDestroy() {
|
this.$bus.$off('queryTreeData', this.queryTreeData);
|
},
|
//监听
|
watch: {
|
currSelected(val) {//监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
|
this.$bus.$emit('getCurrSelected', val)
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.replaceSearch {
|
color: #40a9ff;
|
font-weight: bold;
|
background-color: rgb(204, 204, 204);
|
}
|
/*隐藏树的默认icon*/
|
.ant-tree-switcher-noop {
|
display: none !important;
|
}
|
/*隐藏树的默认竖线*/
|
.ant-tree.ant-tree-show-line li:not(:last-child):before {
|
border-left: 0px;
|
}
|
|
.ant-card-body .table-operator {
|
margin: 15px;
|
}
|
|
.anty-form-btn {
|
width: 100%;
|
text-align: center;
|
}
|
|
.anty-form-btn button {
|
margin: 0 5px;
|
}
|
|
.anty-node-layout .ant-layout-header {
|
padding-right: 0;
|
}
|
|
.header {
|
padding: 0 8px;
|
}
|
|
.header button {
|
margin: 0 3px;
|
}
|
|
.ant-modal-cust-warp {
|
height: 100%;
|
}
|
|
.ant-modal-cust-warp .ant-modal-body {
|
height: calc(100% - 110px) !important;
|
overflow-y: auto;
|
}
|
|
.ant-modal-cust-warp .ant-modal-content {
|
height: 90% !important;
|
overflow-y: hidden;
|
}
|
|
#app .desktop {
|
height: auto !important;
|
}
|
|
/** Button按钮间距 */
|
.ant-btn {
|
margin-left: 3px;
|
}
|
.ant-alert {
|
padding: 5px 15px 5px 37px;
|
}
|
.drawer-bootom-button {
|
position: absolute;
|
top: 1px;
|
/* padding: 10px 16px; */
|
text-align: left;
|
right: 0;
|
background: #fff;
|
border-radius: 0 0 2px 2px;
|
}
|
</style>
|
