1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="24">
<a-form-item label="订单号">
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="订单类型">
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
谭毅彬
authored
about a year ago
25
26
<a-button type="primary" @click="searchQuery" icon="search">{{ $t('button.search') }}</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('button.reset') }}</a-button>
27
28
29
30
31
32
33
34
35
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
谭毅彬
authored
about a year ago
36
<a-button @click="handleAdd" type="primary" icon="plus">{{ $t('button.new') }}</a-button>
37
38
39
40
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel">
谭毅彬
authored
about a year ago
41
<a-icon type="delete"/>{{$t('button.delete')}}
42
43
</a-menu-item>
</a-menu>
谭毅彬
authored
about a year ago
44
<a-button style="margin-left: 8px">{{$t('button.multiSelectActions')}}
45
46
47
48
49
50
51
52
<a-icon type="down"/>
</a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
谭毅彬
authored
about a year ago
53
54
55
<i class="anticon anticon-info-circle ant-alert-icon"></i> {{ $t('button.selected') }}
<a style="font-weight: 600">{{ selectedRowKeys.length }}</a> {{ $t('button.item') }}
<a style="margin-left: 24px" @click="onClearSelected">{{ $t('button.clearAll') }}</a>
56
57
58
59
60
61
62
63
64
</div>
<a-table
ref="table"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
65
:expandedRowKeys="expandedRowKeys"
66
67
68
69
70
71
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange"
@expand="handleExpand"
>
<span slot="action" slot-scope="text, record">
谭毅彬
authored
about a year ago
72
<a @click="handleEdit(record)">{{$t('button.edit')}}</a>
73
<a-divider type="vertical"/>
谭毅彬
authored
about a year ago
74
75
<a-popconfirm :title="$t('button.deletingIt')" @confirm="() => handleDelete(record.id)">
<a>{{$t('button.delete')}}</a>
76
77
78
79
80
81
82
83
84
85
86
</a-popconfirm>
</span>
<a-table
slot="expandedRowRender"
:columns="innerColumns"
:dataSource="innerData"
size="middle"
bordered
rowKey="id"
:pagination="false"
:loading="loading"
87
>
88
89
90
91
92
93
94
95
96
97
98
</a-table>
</a-table>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<jeecgOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderDMain-modal>
</a-card>
</template>
<script>
99
100
101
import {getAction} from '@/api/manage'
import JeecgOrderDMainModal from '@/views/jeecg/tablist/form/JeecgOrderDMainModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
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
export default {
name: "TableDemo",
mixins: [JeecgListMixin],
components: {
JeecgOrderDMainModal
},
data() {
return {
// 子表表头
innerColumns: [
{
title: '客户名',
align: "center",
width: 100,
dataIndex: 'name',
key: 'name',
},
{
title: '性别',
align: "center",
dataIndex: 'sex',
customRender: function (text) {
if (text == 1) {
return "男";
} else if (text == 2) {
return "女";
} else {
return text;
131
}
132
133
134
135
136
137
138
139
140
141
142
143
}
},
{
title: '身份证号码',
align: "center",
dataIndex: 'idcard',
},
{
title: '电话',
dataIndex: 'telphone',
align: "center",
},
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
],
innerData: [],
expandedRowKeys: [],
id: ' ',
description: '列表展开子表Demo',
// 列表表头
columns: [{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '订单号',
163
align: "center",
164
dataIndex: 'orderCode'
165
},
166
167
168
169
170
171
172
173
174
175
{
title: '订单类型',
align: "center",
dataIndex: 'ctype',
customRender: (text) => {
let re = "";
if (text === '1') {
re = "国内订单";
} else if (text === '2') {
re = "国际订单";
176
}
177
178
return re;
}
179
},
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
{
title: '订单日期',
align: "center",
dataIndex: 'orderDate'
},
{
title: '订单金额',
align: "center",
dataIndex: 'orderMoney'
},
{
title: '订单备注',
align: "center",
dataIndex: 'content'
},
{
谭毅彬
authored
about a year ago
196
title: this.$t('system.options'),
197
198
199
200
201
202
203
204
205
206
207
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}],
// 分页参数
type: "radio",
url: {
list: "/test/order/orderList",
delete: "/test/order/delete",
deleteBatch: "/test/order/deleteBatch",
customerListByMainId: "/test/order/listOrderCustomerByMainId",
208
209
},
}
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
},
computed: {
currentId() {
return this.id;
}
},
methods: {
handleExpand(expanded, record) {
this.expandedRowKeys = [];
this.innerData = [];
if (expanded === true) {
this.loading = true;
this.expandedRowKeys.push(record.id);
getAction(this.url.customerListByMainId, {mainId: record.id}).then((res) => {
if (res.success) {
this.loading = false;
this.innerData = res.result.records;
}
});
}
},
231
}
232
}
233
234
</script>
<style scoped>
235
236
237
.ant-card-body .table-operator {
margin-bottom: 18px;
}
238
239
240
241
242
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
243
244
245
246
.anty-row-operator button {
margin: 0 5px
}
247
248
249
250
.ant-btn-danger {
background-color: #ffffff
}
251
252
253
254
.ant-modal-cust-warp {
height: 100%
}
255
256
257
258
259
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
260
261
262
263
264
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
265
</style>