# 超链接查询
超链接查询 列表结果集跳转页面查询明细信息
Author zhangyun1@expservice.com.cn
# 示例
<template>
<div>
<ht-form ref="orderSearchFm" ref-form="orderSearchFm" divider="检索分栏" :form-list="orderSearchList">
<ht-search-bar>
<ht-button @click="handleSearch()">检索</ht-button>
</ht-search-bar>
</ht-form>
<ht-table
ref="tableList"
ref-table="tableList"
:table-head="tableHeadList"
:table-data="tableData"
>
</ht-table>
<!-- 实际开发中需使用明细页面 此处用弹窗代替 -->
<ht-dialog title="订单明细页" :visible.sync="detailVisible">
<div>
<ht-form ref="orderEditFm" ref-form="orderEditFm" divider="订单信息" :form-list="orderEditFmList" />
</div>
</ht-dialog>
</div>
</template>
<script>
export default {
name: 'HtLinkSearch',
components: {},
data() {
return {
detailVisible: false, // 超链接页面控制显示隐藏
orderSearchList: [
{
type: 'text',
format: [0, 'isNumberLetter', 30],
label: '订单编号',
field: 'o@orderNo'
},
{
type: 'date',
format: [0, 'isDate', 30],
label: '单据日期',
dateType: 'daterange2',
field: 'o@orderDate',
colspan: 1.5
}
],
// 超链接点击弹窗form(实际开发中需使用明细页面)
orderEditFmList: [
{
label: 'id',
field: 'id',
hidden: true
},
{
type: 'text',
label: '订单编号',
field: 'orderNo',
value: 'DD123456789',
disabled: true
},
{
type: 'text',
label: '单据日期',
field: 'orderDate',
value: '2023-05-24',
disabled: true
}
],
tableHeadList: [
{
label: '订单编号',
prop: 'o@orderNo',
width: 'auto',
// 设置超链接
render: (scope) => {
return (
// onclick：超链接点击onclick事件
// style：超链接标签样式
// {scope.row.orderNo}：超链接标签显示内容，scope.row为当前行数据的对象
<a href='javascript:void(0);' onclick={() => this.getOrder(scope.row)}><span style='color:rgba(255,0,0,0.6); '>{scope.row.orderNo}</span></a>
);
}
},
{
label: '单据日期',
prop: 'o@orderDate',
width: 'auto'
}
],
tableData:{}
}
},
mounted() {
// 初始化执行查询
this.handleSearch();
},
methods:{
/**
* @todo: 查询(此处使用模拟数据)
* @author: zhangyun
* @Date: 2023-05-29 10:35:21
*/
async handleSearch(event) {
try {
this.tableData = {
'current': 1,
'pages': 1,
'size': 10,
'total': 2,
'hitCount': true,
'searchCount': true,
'orders': [],
'optimizeCountSql': true,
'records':
[{ 'transHash': {}},
{ 'orderNo': 'DD123456789', 'orderDate': '2023-05-24' }
]
};
} catch (e) {
this.$notify.message(e, 'error');
}
},
/**
* @todo: 超链接点击跳转页面
* @author: zhangyun
* @Date: 2023-05-29 10:36:53
*/
async getOrder(row) {
this.title = '订单明细页';
this.detailVisible = true;
this.rowData = row;
}
}
};
</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
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
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
Expand Copy Copy
# 版本
- v1.0.1