PanelListor
PanelListor 外键查询面板
基于 Listor 组件,参数配置一致
>{}
<template>
<div>
<Input
v-model="the.App_ID"
named="App_ID"
placeholder="请选中应用ID"
type="number"
readonly
icon="icon-jiantouxia"
@onEvent="onInputEvent"
/>
<Modal :show="the.modal.show" footer-hide>
<PanelListor
:named="the.panel.named"
:config="the.panel"
:list="the.panel.list"
@onEvent="onPanelEvent"
/>
</Modal>
</div>
</template>
<script>
export default {
setup() {
const $plus = window.$plus;
const { reactive } = $plus.vue;
const message = $plus.message;
const the = reactive({
modal: {
show: false
},
App_ID: 1,
panel: {
named: 'App_ID',
// 数据请求源配置
http: {
// 请求地址
url: '',
// 请求参数
data: {
// 外挂面板
tpl: 6
}
},
field: {
ID: 'ID',
Title: '应用'
},
list: [
{ ID: 1, Title: '应用1' },
{ ID: 2, Title: '应用1' },
{ ID: 3, Title: '应用1' }
]
}
});
const onPanelEvent = (resp) => {
console.log('onControlEvent', JSON.stringify(resp));
message.info(JSON.stringify(resp));
};
return { the, onPanelEvent };
}
};
</script>
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
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