<template>
|
|
<a-card class="tree_con" :loading="cardLoading" :bordered="false" >
|
<a-spin :spinning="loading">
|
<a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px">
|
<div slot="message">
|
<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
|
<span v-else>无</span>
|
</div>
|
</a-alert>
|
<div class="drawer-bootom-button">
|
<a-dropdown :trigger="['click']" placement="bottomCenter">
|
<a-menu slot="overlay">
|
<!--<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>-->
|
<!--<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>-->
|
<!--<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>-->
|
<!--<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>-->
|
<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"/>
|
|
<a-form>
|
<a-form-item>
|
<a-tree ref="tree"
|
checkable
|
@check="onCheck"
|
:checkStrictly="checkStrictly"
|
:expandedKeys="expandedKeys"
|
:checkedKeys="checkedKeys"
|
:selectedKeys="selectedKeys"
|
:treeData="treeDataSource"
|
:autoExpandParent="autoExpandParent"
|
@select="onSelect"
|
@expand="onExpand">
|
</a-tree>
|
|
</a-form-item>
|
</a-form>
|
|
</a-spin>
|
|
<!--<tier-model ref="tierModalForm" @ok="modalFormOk"></tier-model>-->
|
|
|
</a-card>
|
<!--<div class="drawer-bootom-button">-->
|
<!--<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">-->
|
<!--<a-menu slot="overlay">-->
|
<!--<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>-->
|
<!--<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>-->
|
<!--<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>-->
|
<!--<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>-->
|
<!--<a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>-->
|
<!--<a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>-->
|
<!--</a-menu>-->
|
<!--<a-button>-->
|
<!--树操作 <a-icon type="up" />-->
|
<!--</a-button>-->
|
<!--</a-dropdown>-->
|
<!--<!–<!–<a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">–>–>-->
|
<!--<!–<!–<a-button style="margin-right: .8rem">取消</a-button>–>–>-->
|
<!--<!–<!–</a-popconfirm>–>–>-->
|
<!--<!–<!–<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>–>–>-->
|
<!--<!–<!–<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>–>–>-->
|
<!--</div>-->
|
</template>
|
|
<script>
|
import {
|
getAction,
|
postAction,
|
deleteAction
|
} from '@/api/manage'
|
import Tooltip from 'ant-design-vue/es/tooltip'
|
// import TierModel from './modules/baseTree/TierModel'
|
|
export default {
|
name: 'BaseTree',
|
props: {
|
editDisable: {
|
type: Boolean,
|
default() {
|
return true
|
}
|
}
|
},
|
components: {
|
Tooltip,
|
// TierModel
|
},
|
data() {
|
return {
|
searchInput: '',
|
cardLoading: false,
|
loading: false,
|
treeDataSource: [],
|
selectedKeys: [],
|
expandedKeys: [],
|
checkedKeys:[],
|
checkedId:[],
|
url: {
|
getBaseTree: '/mdc/mdcequipment/loadTree',
|
deleteBatch: '/mdc/mdcequipment/deleteBatch'
|
},
|
searchValue: '',
|
dataList: [],
|
autoExpandParent: false,
|
checkStrictly: false,
|
allTreeKeys: [],
|
currSelected: {},
|
currentSlectList:[],
|
hiding: false,
|
mathChange:''
|
}
|
}
|
,
|
created() {
|
this.queryTreeData()
|
// this.closeAll()
|
}
|
,
|
methods: {
|
switchCheckStrictly (v) {
|
if(v==1){
|
this.checkStrictly = false
|
}else if(v==2){
|
this.checkStrictly = true
|
}
|
},
|
checkALL (e) {
|
this.checkedKeys = this.allTreeKeys
|
// console.log(this.checkedKeys);
|
this.currentSlectList = this.treeDataSource;
|
// console.log(this.currentSlectList)
|
},
|
cancelCheckALL () {
|
//this.checkedKeys = this.defaultCheckedKeys
|
this.checkedKeys = [];
|
this.currentSlectList = [];
|
// console.log(this.checkedKeys);
|
// console.log(this.currentSlectList)
|
},
|
onCheck (o,checkedNodes) {
|
console.log(o);
|
console.log(checkedNodes);
|
if(this.checkStrictly){
|
this.checkedKeys = o.checked;
|
}else{
|
this.checkedKeys = o
|
}
|
// console.log(checkedNodes)
|
// console.log(o)
|
// console.log(o.checked)
|
// console.log(checkedNodes.node.dataRef);
|
// console.log( this.currentSlectList);
|
// if(checkedNodes.checked == true && this.checkStrictly){
|
// this.currentSlectList.push(checkedNodes.node.dataRef)
|
// }else if(checkedNodes.checked == false && this.checkStrictly.length == 0){
|
// console.log(111)
|
// }
|
// console.log(this.checkStrictly)
|
if(checkedNodes.checked == true){
|
this.currentSlectList.push(checkedNodes.node.dataRef)
|
}else{
|
for(var i = 0;i<this.currentSlectList.length;i++){
|
if(this.currentSlectList[i].key == checkedNodes.node.dataRef.key){
|
this.currentSlectList.splice(i,1);
|
}
|
}
|
}
|
// console.log(this.currentSlectList)
|
// // if(this.checkStrictly = false){
|
// // if(checkedNodes.checked == true){
|
// // this.currentSlectList.push(checkedNodes.node.dataRef)
|
// // }else{
|
// // for(var i = 0;i<this.currentSlectList.length;i++){
|
// // if(this.currentSlectList[i].key == checkedNodes.node.dataRef.key){
|
// // this.currentSlectList.splice(i,1);
|
// // }
|
// // }
|
// // }
|
// // console.log(this.currentSlectList);
|
// // }else{
|
// // console.log(checkedNodes)
|
// // if(checkedNodes.checked == true){
|
// // this.currentSlectList.push(checkedNodes.node.dataRef)
|
// // }
|
// // else{
|
// // for(var i = 0;i<this.currentSlectList.length;i++){
|
// // if(this.currentSlectList[i].key == checkedNodes.node.dataRef.key){
|
// // this.currentSlectList.splice(i,1);
|
// // }
|
// // }
|
// // }
|
// // console.log(this.currentSlectList)
|
// // }
|
// // console.log( this.currentSlectList);
|
// if(this.checkStrictly){
|
// this.checkedKeys = o.checked;
|
// console.log(checkedNodes)
|
// // this.
|
// console.log(this.checkedKeys)
|
// }else{
|
// this.checkedKeys = o;
|
// console.log(this.checkedKeys)
|
// }
|
},
|
clearSelect(){
|
this.checkedKeys = [];
|
this.currentSlectList = [];
|
},
|
getCurrSelectedTitle() {
|
return !this.currSelected.title ? '' : this.currSelected.title
|
}
|
,
|
// onClearSelected() {
|
// this.hiding = true
|
// this.currSelected = {}
|
// this.selectedKeys = []
|
// this.$emit('sendSelectBaseTree', '')
|
// },
|
|
onSelect(selectedKeys, e) {
|
// console.log(e);
|
this.hiding = false
|
let record = e.node.dataRef
|
this.currSelected = Object.assign({}, record)
|
// console.log(this.currSelected)
|
this.selectedKeys = [record.key]
|
this.$emit('sendSelectBaseTree', this.selectedKeys)
|
},
|
handleEdit(entity) {
|
this.$refs.tierModalForm.edit(entity)
|
this.$refs.tierModalForm.title = '编辑层级'
|
this.$refs.tierModalForm.disableSubmit = false
|
},
|
onExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
queryTreeData() {
|
this.loading = true
|
this.cardLoading = true
|
getAction(this.url.getBaseTree).then((res) => {
|
if (res.success) {
|
this.dataList = []
|
this.allTreeKeys = []
|
this.treeDataSource = res.result
|
this.generateList(res.result)
|
} else {
|
// this.$message.warn(res.message)
|
this.$notification.warning({
|
message:'消息',
|
description: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 = ['-1']
|
},
|
refreshTree() {
|
this.queryTreeData()
|
},
|
batchDel: function(entity) {
|
if (!this.url.deleteBatch) {
|
this.$message.error('请设置url.deleteBatch属性!')
|
return
|
}
|
let ids = entity.id
|
if (!ids) {
|
// this.$message.warning('请选择一条记录！')
|
this.$notification.warning({
|
message:'消息',
|
description:'请选择一条记录'
|
});
|
return
|
} else {
|
var that = this
|
this.$confirm({
|
title: '确认删除',
|
content: '是否删除选中数据?',
|
onOk: function() {
|
that.loading = true
|
deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
|
if (res.success) {
|
// that.$message.success(res.message)
|
that.$notification.success({
|
message:'消息',
|
description:res.message
|
});
|
that.queryTreeData();
|
} else {
|
// that.$message.warning(res.message)
|
that.$notification.warning({
|
message:'消息',
|
description:res.message
|
});
|
}
|
}).finally(() => {
|
that.loading = false
|
})
|
}
|
})
|
}
|
},
|
modalFormOk(val) {
|
console.log("mmm")
|
// 新增/修改 成功时，重载列表
|
this.queryTreeData()
|
// 新增/修改 成功时，重载列表
|
}
|
|
}
|
,
|
//监听
|
watch: {
|
currSelected(val) { //监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
|
this.$emit('getCurrSelected', val)
|
|
},
|
currentSlectList(msg){
|
this.$emit('getcurrentSlectList',msg)
|
},
|
checkedKeys(valId){
|
this.$emit('getcheckedKeys',valId)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/*.tree_con{*/
|
/*position: relative;*/
|
/*}*/
|
.drawer-bootom-button {
|
position: absolute;
|
top: 1px;
|
/* padding: 10px 16px; */
|
text-align: left;
|
right: 0;
|
background: #fff;
|
border-radius: 0 0 2px 2px;
|
}
|
.draw-bootom-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;
|
}
|
.replaceSearch {
|
color: #40a9ff;
|
font-weight: bold;
|
background-color: rgb(204, 204, 204);
|
}
|
|
.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;
|
}
|
|
/** Button按钮间距 */
|
.ant-btn {
|
margin-left: 3px;
|
}
|
|
.ant-alert {
|
padding: 5px 15px 5px 37px;
|
}
|
|
/*.drawer-bootom-button {*/
|
/*position: absolute;*/
|
/*bottom: 1px;*/
|
/*padding: 10px 16px;*/
|
/*text-align: left;*/
|
/*left: 0;*/
|
/*background: #fff;*/
|
/*border-radius: 0 0 2px 2px;*/
|
/*}*/
|
@media screen and (min-width: 1920px){
|
.tree_con{
|
height: 748px!important;
|
overflow: scroll;
|
}
|
}
|
@media screen and (min-width: 1680px) and (max-width: 1920px){
|
.tree_con{
|
height: 748px!important;
|
overflow: scroll;
|
}
|
}
|
@media screen and (min-width: 1400px) and (max-width: 1680px){
|
.tree_con{
|
height: 600px!important;
|
overflow: scroll;
|
}
|
}
|
@media screen and (min-width: 1280px) and (max-width: 1400px){
|
.tree_con{
|
height: 501px!important;
|
overflow: scroll;
|
}
|
}
|
@media screen and (max-width: 1280px){
|
.tree_con{
|
height: 501px!important;
|
overflow: scroll;
|
}
|
}
|
</style>
|
