EipUrlTreeDialog.vue
2.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<template>
<el-dialog :title="title" width="400px" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="false">
<ht-tree
:data="treeData"
:props="defaultProps"
default-expand-all
@node-click="handleNodeClick"
:expand-on-click-node=false
ref="htTypeTree"
></ht-tree>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave" >确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import { Message } from 'element-ui';
import req from "@/request.js";
export default {
name: "eip-url-tree-dialog",
props: {
title: {
type: String,
required: true,
default: "选择分类"
},
url: {
type: String,
required: true
},
requestMethod: {
type: String,
default: "GET"
},
},
data() {
return {
dialogVisible:false,//是否显示对话框
treeData: [], //树数据
defaultProps: {
children: "children",
label: "name"
},
nodes:{},//鼠标左击点击的树数据
}
},
methods: {
//显示对话框
showDialog() {
this.getData();
},
//加载树
async getData() {
this.treeData = [];
this.dialogVisible = true;
let response = await req.request({
url: this.url,
method: this.requestMethod
});
this.treeData = response.data;
},
//确定对话框
handleSave(){
if(JSON.stringify(this.nodes) == "{}"){
Message.warning("请选择数据");
return;
}
this.$emit("handle-save",this.nodes)
this.nodes = {};
this.dialogVisible = false;
},
//关闭对话框
handleClose() {
this.nodes = {};
this.dialogVisible = false;
},
//树鼠标左击事件
handleNodeClick(node){
this.nodes = node;
}
},
}
</script>
<style lang="scss" scoped>
.el-main {
padding-top: 0px;
}
</style>