<template>
|
<a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native="e=>e.preventDefault()">
|
<a-spin :spinning="loading">
|
<div style="display: flex;flex-direction: column;height: 100%">
|
<div style="display: flex">
|
<a-input placeholder="输入关键字进行搜索" allowClear v-model="searchInput"
|
@change="handleSearchInputChange"/>
|
<a-dropdown :trigger="['click']" placement="bottomCenter" style="margin: 0 8px">
|
<a-menu slot="overlay">
|
<a-menu-item key="1" @click="expandedKeys = allTreeKeys">展开所有</a-menu-item>
|
<a-menu-item key="2" @click="expandedKeys = ['-1']">合并所有</a-menu-item>
|
<a-menu-item key="3" @click="queryTreeData">刷新</a-menu-item>
|
</a-menu>
|
<a-button>
|
<a-icon type="bars"/>
|
</a-button>
|
</a-dropdown>
|
<a-button type="primary" v-has="'product_add'"
|
@click="$refs.productModalFormRef.triggerCorrespondingMethod({modalTitle:'添加产品',methodName:'handleProductAdd'})">
|
<a-icon type="plus"></a-icon>
|
产品
|
</a-button>
|
</div>
|
|
<!--产品结构树-->
|
<div class="" style="flex: 1;overflow:auto;margin-top: 10px">
|
<a-tree ref="tree" show-icon :checkStrictly="checkStrictly" :expandedKeys.sync="expandedKeys"
|
:selectedKeys="selectedKeys" :treeData="treeDataSource" :autoExpandParent="autoExpandParent"
|
@select="handleTreeSelect" @expand="handleTreeExpand" @rightClick="handleTreeRightClick">
|
<template slot="title" slot-scope="{ label, parentId, entity, key:treeKey,type}">
|
<ProductStructureTreeContextMenu ref="contextMenuRef"
|
:treeParams="{label,treeKey,searchValue,type,entity}"/>
|
</template>
|
|
<a-icon slot="switcherIcon" type="down"/>
|
<a-icon slot="product" type="shopping"/>
|
<a-icon slot="component" type="camera"/>
|
<a-icon slot="part" type="hdd"/>
|
<a-icon slot="process" type="apartment"/>
|
<a-icon slot="processStep" type="tool"/>
|
</a-tree>
|
</div>
|
</div>
|
</a-spin>
|
|
<!--产品弹窗-->
|
<ProductModal ref="productModalFormRef" :currentTreeNodeInfo="rightClickSelected"
|
@submitSuccess="queryTreeData"/>
|
<!--部件弹窗-->
|
<ComponentModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
|
<!--零件弹窗-->
|
<PartModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
|
<!--工序弹窗-->
|
<ProcessModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
|
<!--工步弹窗-->
|
<ProcessStepModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
|
</a-card>
|
</template>
|
|
<script>
|
import dncApi from '@/api/dnc'
|
import { deleteAction } from '@/api/manage'
|
import ProductStructureTreeContextMenu from './ProductStructureTreeContextMenu'
|
import ProductModal from './Product/ProductModal'
|
import ComponentModal from './Component/ComponentModal'
|
import PartModal from './Part/PartModal'
|
import ProcessModal from './Process/ProcessModal'
|
import ProcessStepModal from './ProcessStep/ProcessStepModal'
|
|
export default {
|
name: 'ProductStructureTree',
|
components: {
|
ProcessStepModal,
|
ProcessModal,
|
PartModal,
|
ComponentModal,
|
ProductModal,
|
ProductStructureTreeContextMenu
|
},
|
data() {
|
return {
|
searchInput: '',
|
cardLoading: false,
|
loading: false,
|
treeDataSource: [],
|
selectedKeys: [],
|
expandedKeys: [],
|
searchValue: '',
|
dataList: [],
|
autoExpandParent: true,
|
checkStrictly: true,
|
allTreeKeys: [],
|
currentSelected: {},
|
rightClickSelected: {},
|
url: {
|
delete: '/nc/product/delete'
|
}
|
}
|
},
|
created() {
|
this.queryTreeData()
|
this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
},
|
methods: {
|
queryTreeData() {
|
this.loading = true
|
this.cardLoading = true
|
dncApi.getProductStructureTreeApi().then(res => {
|
console.log('res', res)
|
if (res.success) {
|
this.dataList = []
|
this.allTreeKeys = []
|
this.treeDataSource = res.list
|
this.generateList(this.treeDataSource)
|
// this.expandedKeys = this.allTreeKeys
|
if (this.expandedKeys.length === 0) this.expandedKeys = [this.treeDataSource[0].id]
|
} else {
|
this.$message.warn(res.message)
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
},
|
|
/**
|
* 树节点选中时触发
|
* @param selectedKeys 选中节点key
|
* @param {node} node 节点对象
|
*/
|
handleTreeSelect(selectedKeys, { node }) {
|
let record = node.dataRef
|
this.currentSelected = Object.assign({}, record)
|
this.selectedKeys = selectedKeys
|
// 向右侧父级组件发送当前选中树节点信息
|
this.$bus.$emit('sendCurrentTreeNodeInfo', this.currentSelected)
|
},
|
|
/**
|
* 树节点右键单击节点时触发
|
* @param event 事件对象
|
* @param node 节点对象
|
*/
|
handleTreeRightClick({ event, node }) {
|
const record = node.dataRef
|
this.rightClickSelected = Object.assign({}, record)
|
},
|
|
/**
|
* 树节点右键单击菜单中删除按钮时触发
|
*/
|
handleDelete() {
|
this.$confirm({
|
title: '提示',
|
content: '确认删除此条记录吗？',
|
okText: '确认',
|
okType: 'danger',
|
cancelText: '取消',
|
onOk: () => {
|
console.log('this.rightClickSelected.id', this.rightClickSelected.id)
|
if (!this.url.delete) {
|
this.$message.error('请设置url.delete属性!')
|
return
|
}
|
const that = this
|
deleteAction(that.url.delete, { id: this.rightClickSelected.id })
|
.then((res) => {
|
if (res.success) {
|
that.queryTreeData()
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
}
|
})
|
},
|
|
/**
|
* 自动展开添加下级节点的父节点
|
*/
|
modalFormSubmitSuccess(isAddNextLevel) {
|
// 判断是否为添加下级并且判断父节点是否展开
|
if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id)
|
this.queryTreeData()
|
},
|
|
/**
|
* 树节点展开合并时触发
|
* @param expandedKeys 展开项key
|
*/
|
handleTreeExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
|
/* 输入查询内容变化时触发 */
|
handleSearchInputChange() {
|
let search = this.searchInput
|
let expandedKeys = this.dataList
|
.map(item => {
|
if (item.title != null) {
|
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
|
})
|
},
|
|
/**
|
* 递归获得输入项的父级key
|
* @param key 子项key
|
* @param tree 子项
|
*/
|
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
|
},
|
|
/**
|
* 递归获得所有树节点key
|
* @param data
|
*/
|
generateList(data) {
|
for (let i = 0; i < data.length; i++) {
|
data[i].key = data[i].id
|
const node = data[i]
|
const key = node.id
|
const title = node.label
|
this.dataList.push({ key, title })
|
this.allTreeKeys.push(key)
|
this.setTreeNodeIcon(node)
|
if (node.children) this.generateList(node.children)
|
}
|
},
|
|
triggerCorrespondingMethod({ methodName, modalTitle }) {
|
if (this[methodName]) this[methodName](modalTitle)
|
},
|
|
/**
|
* 设置树节点图标
|
* @param treeNode
|
*/
|
setTreeNodeIcon(treeNode) {
|
switch (treeNode.type) {
|
case 1:
|
treeNode.slots = { icon: 'product' }
|
break
|
case 2:
|
treeNode.slots = { icon: 'component' }
|
break
|
case 3:
|
treeNode.slots = { icon: 'part' }
|
break
|
case 5:
|
treeNode.slots = { icon: 'process' }
|
break
|
case 6:
|
treeNode.slots = { icon: 'processStep' }
|
break
|
default:
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/deep/ .ant-card-body {
|
padding: 0 12px 0 0;
|
}
|
|
/deep/ .ant-card-body, /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container {
|
height: 100%;
|
}
|
|
/deep/ .ant-tree-node-content-wrapper {
|
width: calc(100% - 24px);
|
}
|
|
/deep/ .ant-tree-title, .ant-tree-title .ant-dropdown-trigger {
|
display: inline-block;
|
width: calc(100% - 24px) !important;
|
}
|
|
::-webkit-scrollbar {
|
width: 8px;
|
}
|
|
@media screen and (min-width: 1920px) {
|
.tree_con {
|
height: 748px !important;
|
}
|
}
|
|
@media screen and (min-width: 1680px) and (max-width: 1920px) {
|
.tree_con {
|
height: 748px !important;
|
}
|
}
|
|
@media screen and (min-width: 1400px) and (max-width: 1680px) {
|
.tree_con {
|
height: 600px !important;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
.tree_con {
|
height: 501px !important;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
.tree_con {
|
height: 501px !important;
|
}
|
}
|
</style>
|
