陈嘉新
authored
|
1
2
3
4
5
6
|
<template>
<div class="app-container">
<div class="app-container-father">
<div class="dv-container-left">
<div class="dv-container-left-component">
<div class="component-left">任务号:</div>
|
陈嘉新
authored
|
7
8
9
|
<div class="component-right">
<el-input v-model="queryConfig.taskNumber" />
</div>
|
陈嘉新
authored
|
10
11
12
13
|
</div>
<div class="dv-container-left-component">
<div class="component-left">远程任务号:</div>
|
陈嘉新
authored
|
14
15
16
|
<div class="component-right">
<el-input v-model="queryConfig.remoteTask" />
</div>
|
陈嘉新
authored
|
17
18
19
20
|
</div>
<div class="dv-container-left-component">
<div class="component-left">容器号:</div>
|
陈嘉新
authored
|
21
22
23
|
<div class="component-right">
<el-input v-model="queryConfig.barcode" />
</div>
|
陈嘉新
authored
|
24
25
26
27
|
</div>
<div class="dv-container-left-component">
<div class="component-left">起点:</div>
|
陈嘉新
authored
|
28
29
30
|
<div class="component-right">
<el-input v-model="queryConfig.from" />
</div>
|
陈嘉新
authored
|
31
32
33
34
|
</div>
<div class="dv-container-left-component">
<div class="component-left">终点:</div>
|
陈嘉新
authored
|
35
36
37
|
<div class="component-right">
<el-input v-model="queryConfig.to" />
</div>
|
陈嘉新
authored
|
38
39
40
41
|
</div>
<div class="dv-container-left-component">
<div class="component-left">任务状态:</div>
|
陈嘉新
authored
|
42
43
44
45
46
47
48
49
50
51
52
|
<div class="component-right">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
|
陈嘉新
authored
|
53
54
55
56
|
</div>
<div class="dv-container-left-component">
<div class="component-left">开始时间:</div>
|
陈嘉新
authored
|
57
58
|
<div class="component-right">
<el-date-picker
|
陈嘉新
authored
|
59
|
v-model="form.startTime"
|
陈嘉新
authored
|
60
61
62
63
64
|
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</div>
|
陈嘉新
authored
|
65
66
67
68
|
</div>
<div class="dv-container-left-component">
<div class="component-left">结束时间:</div>
|
陈嘉新
authored
|
69
70
|
<div class="component-right">
<el-date-picker
|
陈嘉新
authored
|
71
|
v-model="form.endTime"
|
陈嘉新
authored
|
72
73
74
75
76
77
78
79
|
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</div>
</div>
<!-- button -->
<div class="button-container">
|
陈嘉新
authored
|
80
81
|
<el-button class="T1" @click="btnAction()">查询</el-button>
<el-button class="T1" @click="btnAdd()">新增</el-button>
|
陈嘉新
authored
|
82
83
84
85
86
87
88
89
90
|
<el-button class="T1">删除</el-button>
</div>
<div class="button-container">
<el-button class="T1">下发</el-button>
<el-button class="T1">导出</el-button>
</div>
<div class="button-containerTwo">
<el-button class="T1" type="danger">强制完成</el-button>
<el-button class="T1">维护</el-button>
|
陈嘉新
authored
|
91
92
93
94
95
|
</div>
</div>
<div class="dv-container-right">
<el-table
v-loading="listLoading"
|
陈嘉新
authored
|
96
|
:data="sysTable"
|
陈嘉新
authored
|
97
98
99
100
|
:header-cell-style="{ background: '#e4e4e4', color: '#000000' }"
element-loading-text="Loading"
border
fit
|
陈嘉新
authored
|
101
102
|
:row-class-name="getRowClassName"
@row-click="handleRowClick"
|
陈嘉新
authored
|
103
104
105
|
>
<el-table-column align="center" label="内部ID" width="95">
<template slot-scope="scope">
|
陈嘉新
authored
|
106
|
{{ scope.row.id }}
|
陈嘉新
authored
|
107
108
109
110
|
</template>
</el-table-column>
<el-table-column label="远程任务号">
<template slot-scope="scope">
|
陈嘉新
authored
|
111
|
{{ scope.row.remoteTask }}
|
陈嘉新
authored
|
112
113
114
115
|
</template>
</el-table-column>
<el-table-column label="远程前置任务号">
<template slot-scope="scope">
|
陈嘉新
authored
|
116
|
{{ scope.row.preRemoteTask }}
|
陈嘉新
authored
|
117
118
119
120
|
</template>
</el-table-column>
<el-table-column label="容器号">
<template slot-scope="scope">
|
陈嘉新
authored
|
121
|
{{ scope.row.barcode }}
|
陈嘉新
authored
|
122
123
124
125
|
</template>
</el-table-column>
<el-table-column label="任务类型">
<template slot-scope="scope">
|
陈嘉新
authored
|
126
|
{{ scope.row.type }}
|
陈嘉新
authored
|
127
128
129
130
|
</template>
</el-table-column>
<el-table-column label="任务状态">
<template slot-scope="scope">
|
陈嘉新
authored
|
131
|
{{ scope.row.status }}
|
陈嘉新
authored
|
132
133
134
135
|
</template>
</el-table-column>
<el-table-column label="起点">
<template slot-scope="scope">
|
陈嘉新
authored
|
136
|
{{ scope.row.from }}
|
陈嘉新
authored
|
137
138
139
140
|
</template>
</el-table-column>
<el-table-column label="终点">
<template slot-scope="scope">
|
陈嘉新
authored
|
141
|
{{ scope.row.to }}
|
陈嘉新
authored
|
142
143
144
145
|
</template>
</el-table-column>
<el-table-column label="途径点">
<template slot-scope="scope">
|
陈嘉新
authored
|
146
|
{{ scope.row.approachPoint }}
|
陈嘉新
authored
|
147
148
149
150
|
</template>
</el-table-column>
<el-table-column label="当前节点">
<template slot-scope="scope">
|
陈嘉新
authored
|
151
|
{{ scope.row.current }}
|
陈嘉新
authored
|
152
153
154
155
|
</template>
</el-table-column>
<el-table-column label="优先级">
<template slot-scope="scope">
|
陈嘉新
authored
|
156
|
{{ scope.row.priority }}
|
陈嘉新
authored
|
157
158
159
160
|
</template>
</el-table-column>
<el-table-column label="阶段">
<template slot-scope="scope">
|
陈嘉新
authored
|
161
|
{{ scope.row.mStage }}
|
陈嘉新
authored
|
162
163
164
165
|
</template>
</el-table-column>
<el-table-column label="任务回传">
<template slot-scope="scope">
|
陈嘉新
authored
|
166
|
{{ scope.row.commit }}
|
陈嘉新
authored
|
167
168
169
170
|
</template>
</el-table-column>
<el-table-column label="长">
<template slot-scope="scope">
|
陈嘉新
authored
|
171
|
{{ scope.row.length }}
|
陈嘉新
authored
|
172
173
174
175
|
</template>
</el-table-column>
<el-table-column label="宽">
<template slot-scope="scope">
|
陈嘉新
authored
|
176
|
{{ scope.row.width }}
|
陈嘉新
authored
|
177
178
179
180
|
</template>
</el-table-column>
<el-table-column label="高">
<template slot-scope="scope">
|
陈嘉新
authored
|
181
|
{{ scope.row.height }}
|
陈嘉新
authored
|
182
183
184
185
|
</template>
</el-table-column>
<el-table-column label="重">
<template slot-scope="scope">
|
陈嘉新
authored
|
186
|
{{ scope.row.weight }}
|
陈嘉新
authored
|
187
188
189
190
|
</template>
</el-table-column>
<el-table-column label="货物类型">
<template slot-scope="scope">
|
陈嘉新
authored
|
191
|
{{ scope.row.goodsType }}
|
陈嘉新
authored
|
192
193
194
195
|
</template>
</el-table-column>
<el-table-column label="仓库">
<template slot-scope="scope">
|
陈嘉新
authored
|
196
|
{{ scope.row.warehouseCode }}
|
陈嘉新
authored
|
197
198
199
|
</template>
</el-table-column>
</el-table>
|
陈嘉新
authored
|
200
201
202
203
204
205
206
207
208
209
210
211
|
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
background
@current-change="handleCurrentChange"
layout="prev, pager, next"
:current-page="queryConfig.currentPage"
:page-size="queryConfig.pageSize"
:total="total"
>
</el-pagination>
</div>
|
陈嘉新
authored
|
212
|
</div>
|
陈嘉新
authored
|
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
|
<el-dialog title="新增" :visible.sync="dialogFormVisible">
<div class="container">
<div class="box">
<div class="inner-left">任务类型:</div>
<div class="inner-right">
<el-select v-model="elDialog.taskType" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div class="box">
<div class="inner-left">优先级:</div>
<div class="inner-right">
<el-input v-model="elDialog.priority" />
</div>
</div>
<div class="box">
<div class="inner-left">容器号:</div>
<div class="inner-right">
<el-input v-model="elDialog.barcode" />
</div>
</div>
<div class="box">
<div class="inner-left">起点:</div>
<div class="inner-right">
<el-input v-model="elDialog.from" />
</div>
</div>
<div class="box">
<div class="inner-left">途径点:</div>
<div class="inner-right">
<el-input v-model="elDialog.approachPoint" />
</div>
</div>
<div class="box">
<div class="inner-left">终点:</div>
<div class="inner-right">
<el-input v-model="elDialog.to" />
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogFormVisible = false"
>创 建</el-button
><el-button @click="dialogFormVisible = false">取 消</el-button>
</div>
</el-dialog>
|
陈嘉新
authored
|
266
267
268
269
270
|
</div>
</div>
</template>
<script>
|
陈嘉新
authored
|
271
|
import { getHostType, getTableList } from "@/api/table";
|
陈嘉新
authored
|
272
273
274
|
export default {
data() {
return {
|
陈嘉新
authored
|
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
|
sysTable: [],
// 查询条件
queryConfig: {
currentPage: 1,
pageSize: 15,
taskNumber: "",
remoteTask: "",
barcode: "",
from: "",
to: "",
},
// 新增条件
elDialog: {
taskType: "",
priority: "",
barcode: "",
from: "",
approachPoint: "",
to: "",
},
total: 0,
|
陈嘉新
authored
|
296
|
listLoading: false,
|
陈嘉新
authored
|
297
|
dialogFormVisible: false,
|
陈嘉新
authored
|
298
|
name: "",
|
陈嘉新
authored
|
299
300
|
options: [
{
|
陈嘉新
authored
|
301
302
|
value: "",
label: "全部",
|
陈嘉新
authored
|
303
304
305
|
},
],
value: "",
|
陈嘉新
authored
|
306
307
308
309
310
311
312
|
form: {
startTime: this.$moment()
.subtract(7, "days")
.format("YYYY-MM-DD 00:00:00"),
endTime: this.$moment().add(1, "days").format("YYYY-MM-DD 23:59:59"),
},
selectedRow: null,
|
陈嘉新
authored
|
313
314
315
|
};
},
created() {
|
陈嘉新
authored
|
316
|
this.fetchData();
|
陈嘉新
authored
|
317
|
this.getTableList();
|
陈嘉新
authored
|
318
319
|
},
methods: {
|
陈嘉新
authored
|
320
321
322
323
324
325
326
327
328
329
330
331
332
333
|
btnAction() {
this.getTableList();
},
btnAdd() {
this.dialogFormVisible = true;
},
handleRowClick(row) {
this.selectedRow = row; // 保存当前行的数据
console.log(this.selectedRow, "sfsf");
},
getRowClassName(row) {
return this.selectedRow === row ? "highlight-row" : ""; // 判断当前行是否为选中行
},
// 状态数据
|
陈嘉新
authored
|
334
|
fetchData() {
|
陈嘉新
authored
|
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
|
let params = {
Code: "MTaskStatus",
};
getHostType(params).then((response) => {
response.data.dictDetails.forEach((x) => {
this.options.push({ value: x.code, label: x.name });
});
});
},
// 表格数据
getTableList() {
let params = {
pageNumber: this.queryConfig.currentPage,
perPageCount: this.queryConfig.pageSize,
queryConfig: {
taskNo: "",
remoteTask: "",
barcode: "",
from: "",
to: "",
taskStatus: "",
begin: this.form.startTime,
end: this.form.endTime,
},
};
getTableList(params).then((response) => {
this.total = response.data.totalCount;
this.sysTable = response.data.data;
});
},
handleCurrentChange(page) {
this.queryConfig.currentPage = page;
this.getTableList();
|
陈嘉新
authored
|
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
|
},
},
};
</script>
<style scoped lang="scss">
.app-container-father {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
.dv-container-left {
width: 20%;
background-color: #eeeeee;
height: 88vh;
border-radius: 7px;
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
.dv-container-left-component {
width: 100%;
display: flex;
.component-left {
width: 40%;
|
陈嘉新
authored
|
390
|
height: 60px;
|
陈嘉新
authored
|
391
392
393
394
395
396
|
display: flex;
justify-content: flex-end;
align-items: center;
}
.component-right {
width: 57%;
|
陈嘉新
authored
|
397
|
height: 60px;
|
陈嘉新
authored
|
398
399
400
401
402
|
display: flex;
justify-content: center;
align-items: center;
}
}
|
陈嘉新
authored
|
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
|
.button-container {
width: 90%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
.T1 {
width: 88px;
margin-top: 10px;
}
}
.button-containerTwo {
width: 90%;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
.T1 {
width: 50%;
margin-top: 10px;
}
}
|
陈嘉新
authored
|
425
426
427
428
429
|
}
.dv-container-right {
width: 79%;
height: 88vh;
margin-left: 1%;
|
陈嘉新
authored
|
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
|
.pagination-container {
text-align: right; /* 使分页组件靠右 */
margin-top: 20px; /* 添加顶部间距 */
}
}
.container {
width: 100%; /* 大 div 宽度 */
display: flex; /* 使用 Flexbox 布局 */
flex-wrap: wrap; /* 允许换行 */
padding: 10px; /* 内边距 */
box-sizing: border-box; /* 包含内边距在内 */
}
.box {
width: 50%; /* 小 div 宽度为 50% */
height: 50px; /* 小 div 高度 */
margin: 5px 0; /* 上下外边距 */
display: flex; /* 嵌套使用 Flexbox */
}
.inner-left {
width: 40%; /* 内部左侧 div 宽度为 50% */
height: 100%; /* 高度为 100% */
display: flex; /* 使用 Flexbox */
justify-content: flex-end; /* 内容靠右 */
align-items: center; /* 垂直居中 */
padding-right: 5px; /* 右侧内边距 */
}
.inner-right {
width: 50%; /* 内部右侧 div 宽度为 50% */
height: 100%; /* 高度为 100% */
display: flex; /* 使用 Flexbox */
justify-content: flex-start; /* 内容靠左 */
align-items: center; /* 垂直居中 */
padding-left: 5px; /* 左侧内边距 */
}
.highlight-row {
background-color: red !important; /* 高亮当前行 */
color: white; /* 可选:改变字体颜色以提高可读性 */
|
陈嘉新
authored
|
467
468
469
|
}
}
</style>
|