|  | @@ -0,0 +1,152 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div>
 | 
	
		
			
				|  |  | +    <!-- <a-input-search style="margin-bottom: 8px" placeholder="输入名称回车查询" @search="filterNode" /> -->
 | 
	
		
			
				|  |  | +    <a-tree
 | 
	
		
			
				|  |  | +      v-if="shipOptions.length > 0"
 | 
	
		
			
				|  |  | +      :tree-data="shipOptions"
 | 
	
		
			
				|  |  | +      :replaceFields="replaceFields"
 | 
	
		
			
				|  |  | +      :default-expanded-keys="expandedKeys"
 | 
	
		
			
				|  |  | +      :expanded-keys="expandedKeys"
 | 
	
		
			
				|  |  | +      :auto-expand-parent="autoExpandParent"
 | 
	
		
			
				|  |  | +      showIcon
 | 
	
		
			
				|  |  | +      @select="handleNodeClick"
 | 
	
		
			
				|  |  | +      @expand="onExpand"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +    </a-tree></div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +  import allIcon from '@/core/icons'
 | 
	
		
			
				|  |  | +const getParentKey = (id, tree) => {
 | 
	
		
			
				|  |  | +  let parentKey
 | 
	
		
			
				|  |  | +  for (let i = 0; i < tree.length; i++) {
 | 
	
		
			
				|  |  | +    const node = tree[i]
 | 
	
		
			
				|  |  | +    if (node.children) {
 | 
	
		
			
				|  |  | +      if (node.children.some(item => item.id === id)) {
 | 
	
		
			
				|  |  | +        parentKey = node.id
 | 
	
		
			
				|  |  | +      } else if (getParentKey(id, node.children)) {
 | 
	
		
			
				|  |  | +        parentKey = getParentKey(id, node.children)
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  return parentKey
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: 'ShipTree',
 | 
	
		
			
				|  |  | +  props: {
 | 
	
		
			
				|  |  | +    shipOptions: {
 | 
	
		
			
				|  |  | +          type: Array,
 | 
	
		
			
				|  |  | +          required: true
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +    defalutExpandedKeys: {
 | 
	
		
			
				|  |  | +          type: Array
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  components: {
 | 
	
		
			
				|  |  | +    allIcon
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  data () {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      expandedKeys: this.defalutExpandedKeys,
 | 
	
		
			
				|  |  | +      oldShipOptions: [], // 记录查询前数据结构
 | 
	
		
			
				|  |  | +      oldExpandedKeys: [],
 | 
	
		
			
				|  |  | +      allIcon,
 | 
	
		
			
				|  |  | +      replaceFields: { children: 'children', key: 'id', title: 'shipNanme' },
 | 
	
		
			
				|  |  | +      shipNodes: [],
 | 
	
		
			
				|  |  | +      searchValue: '',
 | 
	
		
			
				|  |  | +      autoExpandParent: true
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  filters: {
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  created () {
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  computed: {
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  watch: {
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    getAllShipNode (nodes) {
 | 
	
		
			
				|  |  | +      if (!nodes || nodes.length === 0) {
 | 
	
		
			
				|  |  | +        return []
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      nodes.forEach(node => {
 | 
	
		
			
				|  |  | +        this.shipNodes.push({ id: node.id, label: node.label })
 | 
	
		
			
				|  |  | +        return this.getAllShipNode(node.children)
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getExpandedKeys (nodes) {
 | 
	
		
			
				|  |  | +     if (!nodes || nodes.length === 0) {
 | 
	
		
			
				|  |  | +       return []
 | 
	
		
			
				|  |  | +     }
 | 
	
		
			
				|  |  | +        // 最后一层不展开
 | 
	
		
			
				|  |  | +        nodes.forEach(node => {
 | 
	
		
			
				|  |  | +        this.shipNodes.push(node.id)
 | 
	
		
			
				|  |  | +        return this.getExpandedKeys(node.children)
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 筛选节点
 | 
	
		
			
				|  |  | +    filterNode (value, e) {
 | 
	
		
			
				|  |  | +      if (this.oldShipOptions.length === 0) {
 | 
	
		
			
				|  |  | +       this.oldShipOptions = this.shipOptions
 | 
	
		
			
				|  |  | +       this.oldExpandedKeys = this.expandedKeys
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      if (value.trim() === '') {
 | 
	
		
			
				|  |  | +        // 触发父页面设置树数据
 | 
	
		
			
				|  |  | +          this.$emit('setDataOptionInfo', this.oldShipOptions)
 | 
	
		
			
				|  |  | +          Object.assign(this, {
 | 
	
		
			
				|  |  | +            expandedKeys: this.oldExpandedKeys,
 | 
	
		
			
				|  |  | +            searchValue: value,
 | 
	
		
			
				|  |  | +            autoExpandParent: true
 | 
	
		
			
				|  |  | +          })
 | 
	
		
			
				|  |  | +     } else {
 | 
	
		
			
				|  |  | +      //  const searchInfo = { shipName: value }
 | 
	
		
			
				|  |  | +      //  searchShip(searchInfo).then(response => {
 | 
	
		
			
				|  |  | +      //    // 触发父页面设置树数据
 | 
	
		
			
				|  |  | +      //     this.$emit('setDataOptionInfo', response.data)
 | 
	
		
			
				|  |  | +      //     // this.searchTree(value, response.data)
 | 
	
		
			
				|  |  | +      //     this.getExpandedKeys(response.data)
 | 
	
		
			
				|  |  | +      //    Object.assign(this, {
 | 
	
		
			
				|  |  | +      //      expandedKeys: this.shipNodes,
 | 
	
		
			
				|  |  | +      //      searchValue: value,
 | 
	
		
			
				|  |  | +      //      autoExpandParent: true
 | 
	
		
			
				|  |  | +      //    })
 | 
	
		
			
				|  |  | +      //    this.shipNodes = []
 | 
	
		
			
				|  |  | +      //  })
 | 
	
		
			
				|  |  | +     }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 节点单击事件,
 | 
	
		
			
				|  |  | +    handleNodeClick (keys, event) {
 | 
	
		
			
				|  |  | +      this.$emit('select', event.node)
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onExpand (expandedKeys) {
 | 
	
		
			
				|  |  | +      this.expandedKeys = expandedKeys
 | 
	
		
			
				|  |  | +      this.autoExpandParent = false
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    searchTree (value, options) {
 | 
	
		
			
				|  |  | +      this.getAllShipNode(options)
 | 
	
		
			
				|  |  | +      console.log('shipNodes', this.shipNodes)
 | 
	
		
			
				|  |  | +      const gData = options
 | 
	
		
			
				|  |  | +      const expandedKeys = this.shipNodes
 | 
	
		
			
				|  |  | +        .map(item => {
 | 
	
		
			
				|  |  | +          if (item.label.indexOf(value) > -1) {
 | 
	
		
			
				|  |  | +            return getParentKey(item.id, gData)
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          return null
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        .filter((item, i, self) => item && self.indexOf(item) === i)
 | 
	
		
			
				|  |  | +      Object.assign(this, {
 | 
	
		
			
				|  |  | +        expandedKeys: expandedKeys,
 | 
	
		
			
				|  |  | +        searchValue: value,
 | 
	
		
			
				|  |  | +        autoExpandParent: true
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +      this.shipNodes = []
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style lang="less">
 | 
	
		
			
				|  |  | +  .depIcon {
 | 
	
		
			
				|  |  | +    color: #2f54eb;
 | 
	
		
			
				|  |  | +     font-size: 20px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +</style>
 |