<template>
|
<a-drawer
|
:title="title"
|
:visible="visible"
|
width="500"
|
@ok="handleOk"
|
@close="handleCancel"
|
>
|
|
<a-spin :spinning="loading">
|
<!-- showLine -->
|
<a-form>
|
<a-form-item>
|
<a-input-search @search="handleSearch" style="width:100%;" placeholder="检索 类别编码/名称" allowClear
|
v-model="searchInput" @change="handleChange"/>
|
</a-form-item>
|
<a-form-item label="车间层级：">
|
<a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys" :autoExpandParent="autoExpandParent"
|
:treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
|
@expand="onExpand">
|
<template slot="title" slot-scope="{ title, parentId, entity, key}">
|
<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>
|
</template>
|
</a-tree>
|
</a-form-item>
|
</a-form>
|
|
</a-spin>
|
|
|
<div class="drawer-bottom-button">
|
<a-dropdown
|
style="float: left"
|
:trigger="['click']"
|
placement="topCenter"
|
>
|
<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="up"/>
|
</a-button>
|
</a-dropdown>
|
<a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
|
<a-button style="margin-right: .8rem">关闭</a-button>
|
</a-popconfirm>
|
<a-button
|
@click="handleOk"
|
type="primary"
|
>确定
|
</a-button>
|
</div>
|
|
</a-drawer>
|
</template>
|
|
<script>
|
import {
|
getAction,
|
postAction,
|
deleteAction
|
} from '@/api/manage'
|
import BaseTree from '@/views/mdc/common/BaseTree'
|
import DepartTree from '@/views/mdc/base/modules/DepartList/DepartListTree/DepartTree'
|
import { mapActions } from 'vuex'
|
|
export default {
|
name: 'SelectDeviceDrawer',
|
components: {
|
BaseTree, DepartTree
|
},
|
props: {
|
editDisable: {
|
type: Boolean,
|
default() {
|
return true
|
}
|
},
|
title: {
|
type: String
|
}
|
},
|
data() {
|
return {
|
searchInput: '',
|
searchValue: '',
|
cardLoading: false,
|
loading: false,
|
treeDataSource: [],
|
expandedKeys: [],
|
checkedKeys: [],
|
autoExpandParent: true,
|
url: {
|
getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
|
},
|
dataList: [],
|
allTreeKeys: [],
|
visible: false,
|
dataSource: []
|
}
|
},
|
created() {
|
this.queryTreeData()
|
this.closeAll()
|
},
|
methods: {
|
...mapActions(['QueryProduction']),
|
onExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
|
queryTreeData() {
|
this.loading = true
|
this.cardLoading = true
|
this.QueryProduction().then(res => {
|
if (res.success) {
|
this.dataList = []
|
this.allTreeKeys = []
|
this.getTreeDataSource(res.result)
|
this.treeDataSource = res.result
|
this.generateList(this.treeDataSource)
|
console.log('treeDataSource', this.treeDataSource)
|
this.expandedKeys = this.allTreeKeys
|
} else {
|
this.$message.warn(res.message)
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
},
|
|
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)
|
}
|
}
|
},
|
|
handleChange() {
|
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
|
})
|
},
|
|
handleSearch(value) {
|
let search = value
|
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
|
})
|
},
|
|
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
|
},
|
|
getTreeDataSource(data) {
|
data.forEach(item => {
|
if (item.children && item.children.length > 0) {
|
this.getTreeDataSource(item.children)
|
}
|
item.key = item.equipmentId ? item.equipmentId : item.key
|
item.value = item.equipmentId ? item.equipmentId : item.value
|
})
|
},
|
expandAll() {
|
this.expandedKeys = this.allTreeKeys
|
},
|
closeAll() {
|
this.expandedKeys = ['-1']
|
},
|
refreshTree() {
|
this.queryTreeData()
|
},
|
onCheck(value, obj) {
|
this.checkedKeys = value
|
console.log('obj,', obj)
|
this.deviceNodes = obj.checkedNodes.filter(item => item.data.props.equipmentId).map(item => item.data.props.equipmentId)
|
console.log(this.deviceNodes)
|
},
|
handleCancel() {
|
this.visible = false
|
},
|
handleOk() {
|
this.$emit('selectFinished', this.deviceNodes)
|
this.visible = false
|
}
|
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.replaceSearch {
|
color: #40a9ff;
|
font-weight: bold;
|
background-color: rgb(204, 204, 204);
|
}
|
|
.drawer-bottom-button {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
border-top: 1px solid #e8e8e8;
|
padding: 10px 16px;
|
text-align: right;
|
left: 0;
|
background: #fff;
|
border-radius: 0 0 2px 2px;
|
}
|
</style>
|
