CustomDialogShowTree.vue
3.65 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<template>
<el-dialog
:title="title"
:style="{
width: `${customDialog.width}px`,
height: `${customDialog.height}px`,
margin: 'auto'
}"
:visible.sync="dialogVisible"
:before-close="handleClose"
:close-on-click-modal="false"
top="6vh"
>
<div style="height:500px;">
<!-- 动态传入参数查询树 -->
<table class="form-table" cellspacing="0" cellpadding="0" border="0">
<tbody
v-for="(item, $index) in customDialog.conditionfield"
:key="$index"
>
<tr v-if="item.defaultType == '4'">
<th width="130px">{{ item.comment }}:</th>
<td>
<ht-input
type="text"
v-if="item.type != 'date'"
v-model="item.paramVal"
style="width:100%;"
:placeholder="'请输入' + item.comment"
autocomplete="off"
></ht-input>
<ht-date
v-if="item.type == 'date'"
v-model="item.paramVal"
style="width:100%;"
:placeholder="'请输入' + item.comment"
format="yyyy-MM-dd"
></ht-date>
</td>
</tr>
</tbody>
</table>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave">确 定</el-button>
</div>
<eip-tree-dialog
ref="eipTreeDialog"
:custom-dialog="customDialog"
@onConfirm="treeDialogOnConfirm"
:ispreview="ispreview"
:alias="alias"
:map-param="mapParam"
></eip-tree-dialog>
</el-dialog>
</template>
<script>
const eipTreeDialog = () =>
import('@/views/form/customDialog/EipTreeDialog.vue')
export default {
name: 'custom-dialog-show-tree',
components: {eipTreeDialog},
props: {
title: {
type: String,
required: true,
default: '自定义对话框树形预览'
},
//自定义对话框的别名
alias: {
type: String,
required: true
},
//自定义对话框的配置
customDialog: {
type: Object,
required: true
},
ispreview: {
type: Boolean,
required: false,
default: true
}
},
data() {
return {
dialogVisible: false, //是否显示对话框
mapParam: {} //动态传入的条件参数
}
},
methods: {
//显示对话框
showDialog() {
this.mapParam = {}
this.dialogVisible = true
for (let i = this.customDialog.conditionfield.length - 1; i >= 0; i--) {
//如果条件字段为data类型,则控制器的类型为日期类型
if (this.customDialog.conditionfield[i].dbType == 'date') {
this.customDialog.conditionfield[i].type = 'date'
} else {
this.customDialog.conditionfield[i].type = 'text'
}
}
},
//确认对话框
handleSave() {
let mapParam = {}
for (let i = 0; i < this.customDialog.conditionfield.length; i++) {
//得到输入的条件字段值
let val = this.customDialog.conditionfield[i].paramVal
if (!val) {
continue
}
//得到条件字段KEY
let key = this.customDialog.conditionfield[i].field
mapParam[key] = val
}
this.mapParam = mapParam
setTimeout(() => {
this.$refs.eipTreeDialog.showDialog()
})
},
//关闭对话框
handleClose() {
this.dialogVisible = false
},
treeDialogOnConfirm(data) {
this.$emit('onConfirm', data)
}
}
}
</script>
<style lang="scss" scoped>
.el-main {
padding-top: 0px;
}
</style>