|
|
@@ -1,152 +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>-->
|
|
|
+<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>
|
shs