Blame view

HHECS.Web/src/views/table/taskModel_host.vue 13.9 KB
陈嘉新 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>