IframeUrlParameterDialog.vue
7.18 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<template>
<div>
<el-dialog
title="url参数设置"
:visible.sync="dialogVisible"
width="50%"
append-to-body
>
<el-button type="primary" @click="addUrlParameter()">添加参数</el-button>
<el-table :data="urlParameter" border style="width: 100%">
<el-table-column prop="key" label="键" width="180">
<template slot-scope="scope">
<el-input v-model="urlParameter[scope.$index].key"></el-input
></template>
</el-table-column>
<el-table-column prop="type" label="值类型" width="180">
<template slot-scope="scope">
<el-select
v-model="urlParameter[scope.$index].type"
placeholder="请选择"
>
<el-option
v-for="item in [
{value: '1', label: '表单变量'},
{value: '2', label: '固定值'},
{value: '3', label: 'js脚本'},
{value: '4', label: '常用变量'}
]"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="value" label="值">
<template slot-scope="scope">
<ht-select
v-if="urlParameter[scope.$index].type == 1"
v-model="urlParameter[scope.$index].value"
:options="allBoData.filter(tab => tab.type == 'main')"
:props="{key: 'name', value: 'desc'}"
clearable
filterable
>
<template slot-scope="{options}">
<el-option key="0" label="请选择" :value="''" />
<el-option-group
v-for="(group, idenx) in options"
:key="Math.random() + idenx"
:label="group.desc"
>
<el-option
v-for="item in group.children"
:disabled="item.name == field.name"
:key="item.id"
:label="item.desc"
:value="item.path + '.' + item.name"
></el-option>
</el-option-group>
</template>
</ht-select>
<el-input
v-if="urlParameter[scope.$index].type == 2"
v-model="urlParameter[scope.$index].value"
></el-input>
<el-button
type="primary"
v-if="urlParameter[scope.$index].type == 3"
@click="scriptTextOpen(scope.$index)"
>编写js脚本</el-button
>
<el-select
v-if="urlParameter[scope.$index].type == 4"
v-model="urlParameter[scope.$index].value"
placeholder="请选择"
>
<el-option
v-for="item in [
{value: '1', label: '当前用户名'},
{value: '2', label: '当前用户id'},
{value: '3', label: '用户账号'},
{value: '4', label: '用户token'},
{value: '5', label: '任务id'},
{value: '6', label: '实例id'}
]"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="value" label="操作">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="urlParameter.splice(scope.$index, 1)"
>删除</el-button
>
</template></el-table-column
>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="closeDialog()">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="自定义运行脚本"
:visible.sync="dialogScriptVisible"
append-to-body
class="urgent-text"
:close-on-click-modal="false"
>
<el-button type="primary" @click="addUrl" style="margin-bottom:20px;">添加url参数</el-button>
<div style="width: 100%; height: 100%">
<textarea
v-model="scriptText"
type="textarea"
:rows="15"
autocomplete="off"
ref="scriptText"
style="width: 99%; height: 100%"
></textarea>
</div>
<div slot="footer" class="dialog-footer">
<el-button
@click="
dialogScriptVisible = false
scriptText = ''
"
>取 消</el-button
>
<el-button type="primary" @click="scriptOk">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'iframeUrlParameterDialog',
components: {},
props: ['field', 'allBoData'],
data() {
return {
scriptText: '',
dialogVisible: false,
dialogScriptVisible: false,
selectIndex: 0,
urlParameter: []
}
},
computed: {},
created() {},
methods: {
addUrl() {
this.scriptText += `var url = window.location.search;
var urlParams = new Object();
// 判断是否有问号
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
// 每一项等号左边为属性,等号右边为属性的值,值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
urlParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
// 自己定义修改需要获取url中哪个参数
return urlParams['name'];`
},
closeDialog() {
for (let item of this.urlParameter) {
if (!item.key) {
this.$message.error('键必填')
return
} else if (!item.type) {
this.$message.error('值类型必填')
return
} else if (!item.value) {
this.$message.error('值必填')
return
}
}
this.field.options.urlParameter = JSON.parse(
JSON.stringify(this.urlParameter)
)
this.dialogVisible = false
},
openDialog() {
this.urlParameter = JSON.parse(
JSON.stringify(this.field.options.urlParameter)
)
this.dialogVisible = true
},
scriptOk() {
if (this.scriptText) {
this.urlParameter[this.selectIndex].value = Base64.encode(
this.scriptText
)
}
this.dialogScriptVisible = false
},
scriptTextOpen(index) {
this.selectIndex = index
this.scriptText = ''
this.dialogScriptVisible = true
if (this.urlParameter[index].value) {
this.scriptText = Base64.decode(this.urlParameter[index].value)
}
},
addUrlParameter() {
this.urlParameter.push({key: '', type: '', value: ''})
},
openIframeUrlParameterDialog() {
dialogVisible = true
}
}
}
</script>
<style lang="scss" scoped></style>