|
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
|
<template>
<a-card title="弹出子表示例" :bordered="false">
<!--
【弹出子表大体思路】
1. 必须要有 click-row-show-sub-form 属性,如果该属性设为false,那么就不会弹出子表
2. 必须要有 sub-form 插槽,用于规定弹出子表的内容
3. highlight-current-row 属性可有可无,如果有则点击一行的时候,该行会背景色会常亮
-->
<!--
【弹出详细信息(既有主表的数据也有子表的)大体思路】
1. 必须要有 click-row-show-main-form 属性,如果该属性设为false,那么就不会弹出详细信息
2. 必须要有 main-form 插槽,用于规定弹出子表的内容
3. 可选 click-row-show-sub-form 属性,如果有该属性,就会显示子表,否者不显示
-->
<j-vxe-table
toolbar
row-number
row-selection
highlight-current-row
click-row-show-sub-form
click-row-show-main-form
:height="750"
:loading="loading"
:columns="columns"
:dataSource="dataSource"
@detailsConfirm="handleDetailsConfirm"
>
<!-- 主表单 -->
<template v-slot:mainForm="{row}">
<template v-if="row">
<a-form-model
ref="form2"
:model="row"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-row :gutter="8">
<a-col :span="8">
<a-form-model-item label="ID" prop="id">
<a-input v-model="row.id" disabled/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="序号" prop="num">
<a-input v-model="row.num"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="船名" prop="ship_name">
<a-input v-model="row.ship_name"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="呼叫" prop="call">
<a-input v-model="row.call"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="长" prop="len">
<a-input v-model="row.len"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="吨" prop="ton">
<a-input v-model="row.ton"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="付款方" prop="payer">
<a-input v-model="row.payer"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="数" prop="count">
<a-input v-model="row.count"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="公司" prop="company">
<a-input v-model="row.company"/>
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item label="动向" prop="trend">
<a-input v-model="row.trend"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</template>
</template>
<!-- 子表单 -->
<template v-slot:subForm="{row}">
<template v-if="loadSubData(row)">
<j-vxe-table
ref="subFormTable"
height="auto"
:max-height="350"
:loading="subTable.loading"
:columns="subTable.columns"
:dataSource="subTable.dataSource"
/>
</template>
</template>
</j-vxe-table>
</a-card>
</template>
<script>
|
|
121
122
|
import {getAction} from '@api/manage'
import {JVXETypes} from '@/components/jeecg/JVxeTable'
|
|
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
|
// 弹出子表示例
export default {
name: 'PopupSubTable',
data() {
return {
loading: false,
dataSource: [],
columns: [
{key: 'num', title: '序号', width: '80px'},
{key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input},
{key: 'call', title: '呼叫', width: '80px'},
{key: 'len', title: '长', width: '80px'},
{key: 'ton', title: '吨', width: '120px'},
{key: 'payer', title: '付款方', width: '120px'},
{key: 'count', title: '数', width: '40px'},
{
key: 'company',
title: '公司',
minWidth: '180px',
// 是否点击显示详细信息
// 只有当前单元格不能编辑的时候才能生效
// 如果不设的话,点击就只弹出子表,不会弹出主表的详细信息
showDetails: true
},
{key: 'trend', title: '动向', width: '120px'},
],
// 子表的信息
subTable: {
currentRowId: null,
|
|
153
|
loading: false,
|
|
154
155
|
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
selectedRows: [],
|
|
156
157
|
dataSource: [],
columns: [
|
|
158
159
160
161
162
163
|
{key: 'dd_num', title: '调度序号', width: '120px'},
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
{key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input},
|
|
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
|
},
// 查询url地址
url: {
getData: '/mock/vxe/getData',
},
// 主表form表单字段
mainForm: {
id: '',
num: '',
ship_name: '',
call: '',
len: '',
ton: '',
payer: '',
count: '',
company: '',
trend: '',
},
// form表单 col
labelCol: {span: 4},
wrapperCol: {span: 20},
rules: {
num: [
{required: true, message: '必须输入序号'},
],
},
}
},
|
|
193
|
|
|
194
195
196
197
|
created() {
this.loadData()
},
methods: {
|
|
198
|
|
|
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
log: console.log,
// 加载数据
loadData() {
// 封装查询条件
let formData = {pageNo: 1, pageSize: 30}
// 调用查询数据接口
this.loading = true
getAction(this.url.getData, formData).then(res => {
if (res.success) {
// 将查询的数据赋值给 dataSource
this.dataSource = res.result.records
// 重置选择
this.selectedRows = []
} else {
this.$error({title: '主表查询失败', content: res.message})
}
}).finally(() => {
// 这里是无论成功或失败都会执行的方法,在这里关闭loading
this.loading = false
})
},
|
|
221
|
|
|
222
223
224
225
226
227
228
229
230
231
|
// 查询子表数据
loadSubData(row) {
if (row) {
// 这里一定要做限制,限制不能重复查询,否者会出现死循环
if (this.subTable.currentRowId === row.id) {
return true
}
this.subTable.currentRowId = row.id
let formData = {pageNo: 1, pageSize: 30, parentId: row.id}
this.subTable.loading = true
|
|
232
233
234
|
getAction(this.url.getData, formData).then(res => {
if (res.success) {
// 将查询的数据赋值给 dataSource
|
|
235
|
this.subTable.dataSource = res.result.records
|
|
236
237
238
239
240
|
} else {
this.$error({title: '主表查询失败', content: res.message})
}
}).finally(() => {
// 这里是无论成功或失败都会执行的方法,在这里关闭loading
|
|
241
|
this.subTable.loading = false
|
|
242
|
})
|
|
243
244
245
246
247
|
return true
} else {
return false
}
},
|
|
248
|
|
|
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
|
// 详细信息里点了确认按钮
handleDetailsConfirm({row, $table, callback}) {
console.log('保存的数据:', row)
// 校验当前行
$table.validate(row).then((errMap) => {
// 校验通过
if (!errMap) {
// 校验子表,如果需要的话,可以操作下面这个对象:
// this.$refs.subFormTable
callback(true)
this.loading = true
setTimeout(() => {
this.loading = false
this.$message.success('保存成功')
}, 1000)
|
|
265
|
} else {
|
|
266
267
|
callback(false)
this.$message.warn('校验失败')
|
|
268
|
}
|
|
269
|
})
|
|
270
|
},
|
|
271
272
273
|
},
}
|
|
274
275
276
277
278
|
</script>
<style scoped>
</style>
|