ol-base-components 2.8.6 → 2.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -245,639 +245,646 @@
245
245
  </div>
246
246
  </template>
247
247
  <script>
248
- import { getData } from "../../index.js";
249
- import nodata from "./nodata.jpg";
250
- import printTemplate from "./printTable.vue";
251
- import TableColumn from "./TableColumn.vue";
252
- export default {
253
- name: "table",
254
- components: {
255
- printTemplate,
256
- TableColumn,
257
- // 函数式组件注册
258
- renderDom: {
259
- functional: true,
260
- props: {
261
- render: Function,
262
- },
263
- render(createElement, renDom) {
264
- return <div>{renDom.props.render()}</div>;
265
- },
248
+ import { getData } from "../../index.js";
249
+ import nodata from "./nodata.jpg";
250
+ import printTemplate from "./printTable.vue";
251
+ import TableColumn from "./TableColumn.vue";
252
+ export default {
253
+ name: "table",
254
+ components: {
255
+ printTemplate,
256
+ TableColumn,
257
+ // 函数式组件注册
258
+ renderDom: {
259
+ functional: true,
260
+ props: {
261
+ render: Function,
266
262
  },
267
- // myTableColumn: {
268
- // functional: true,
269
- // props: {
270
- // column: { type: Object, required: true }
271
- // },
272
- // render(h, ctx) {
273
- // const col = ctx.props.column;
274
-
275
- // // 多级表头处理
276
- // if (col.children && col.children.length) {
277
- // return h(
278
- // 'el-table-column',
279
- // {
280
- // props: {
281
- // label: col.label,
282
- // align: 'center',
283
- // ...col.attrs,
284
- // }
285
- // },
286
- // col.children.map((child, idx) =>
287
- // h(ctx.parent.$options.components.myTableColumn, {
288
- // props: { column: child },
289
- // key: idx
290
- // })
291
- // )
292
- // );
293
- // }
294
-
295
- // // 单列表头处理
296
- // return h(
297
- // 'el-table-column',
298
- // {
299
- // props: {
300
- // label: col.label,
301
- // prop: col.prop,
302
- // minWidth: col.minWidth || '150px',
303
- // showOverflowTooltip: col.overHidden || true,
304
- // type: col.type || 'normal',
305
- // align: 'center',
306
- // width: col.width,
307
- // fixed: col.fixed || false,
308
- // sortable: col.sortable || false,
309
- // ...col.attrs
310
- // }
311
- // },
312
- // [
313
- // // 表头插槽 - 添加 el-tooltip
314
- // h('template', { slot: 'header' }, [
315
- // h('el-tooltip', {
316
- // props: {
317
- // content: `${col.label} ${col.prop}`,
318
- // placement: 'top'
319
- // }
320
- // }, [
321
- // h('span', col.label)
322
- // ])
323
- // ]),
324
- // // 内容插槽 - 支持自定义渲染
325
- // col.render ? h('template', { slot: 'default' }, {
326
- // render: (scope) => h(ctx.parent.$options.components.renderDom, {
327
- // props: { render: () => col.render(scope.row) }
328
- // })
329
- // }) : null,
330
- // // 插槽渲染
331
- // col.renderSlot ? h('template', { slot: 'default' }, {
332
- // render: (scope) => ctx.parent.$scopedSlots[col.prop] ?
333
- // ctx.parent.$scopedSlots[col.prop](scope) : null
334
- // }) : null
335
- // ].filter(Boolean)
336
- // );
337
- // }
338
- // }
339
- },
340
- model: {
341
- prop: "multipleSelection",
342
- event: "SelectionChange",
343
- },
344
- props: {
345
- url: {
346
- type: String,
347
- default: "",
348
- }, // 接口地址
349
- printListObj: {
350
- type: Object,
351
- default: () => {
352
- return {
353
- title: "",
354
- tableHeader: "",
355
- tableData: "",
356
- };
357
- },
358
- }, // 打印参数
359
- btnlist: Array,
360
- outTable: {
361
- type: Object,
362
- default: () => {
363
- return {
364
- tableProp: {},
365
- };
366
- },
263
+ render(createElement, renDom) {
264
+ return <div>{renDom.props.render()}</div>;
367
265
  },
368
- // exportBut: {
369
- // type: Array,
370
- // default: [],
371
- // },
372
- // 表格传的形式
373
- tableData: {
374
- type: Object,
375
- default: () => {
376
- return {
377
- loading: false,
378
- options: {
379
- selection: null, // 多选框
380
- index: null, // 序号
381
- headTool: true, // 开启头部工具栏
382
- refreshBtn: true, // 开启表格头部刷新按钮
383
- downloadBtn: true, // 开启表格头部下载按钮
384
- }, // 序号和复选框
385
- rows: [], // 表数据
386
- columns: [], // 表头
387
- operates: [], // 表格里面的操作按钮
388
- // tableHeightDiff: 300,
389
- operatesAttrs: {},
390
- };
391
- },
392
- },
393
- tableDataShow: {
394
- type: Boolean,
395
- default: true,
266
+ },
267
+ // myTableColumn: {
268
+ // functional: true,
269
+ // props: {
270
+ // column: { type: Object, required: true }
271
+ // },
272
+ // render(h, ctx) {
273
+ // const col = ctx.props.column;
274
+
275
+ // // 多级表头处理
276
+ // if (col.children && col.children.length) {
277
+ // return h(
278
+ // 'el-table-column',
279
+ // {
280
+ // props: {
281
+ // label: col.label,
282
+ // align: 'center',
283
+ // ...col.attrs,
284
+ // }
285
+ // },
286
+ // col.children.map((child, idx) =>
287
+ // h(ctx.parent.$options.components.myTableColumn, {
288
+ // props: { column: child },
289
+ // key: idx
290
+ // })
291
+ // )
292
+ // );
293
+ // }
294
+
295
+ // // 单列表头处理
296
+ // return h(
297
+ // 'el-table-column',
298
+ // {
299
+ // props: {
300
+ // label: col.label,
301
+ // prop: col.prop,
302
+ // minWidth: col.minWidth || '150px',
303
+ // showOverflowTooltip: col.overHidden || true,
304
+ // type: col.type || 'normal',
305
+ // align: 'center',
306
+ // width: col.width,
307
+ // fixed: col.fixed || false,
308
+ // sortable: col.sortable || false,
309
+ // ...col.attrs
310
+ // }
311
+ // },
312
+ // [
313
+ // // 表头插槽 - 添加 el-tooltip
314
+ // h('template', { slot: 'header' }, [
315
+ // h('el-tooltip', {
316
+ // props: {
317
+ // content: `${col.label} ${col.prop}`,
318
+ // placement: 'top'
319
+ // }
320
+ // }, [
321
+ // h('span', col.label)
322
+ // ])
323
+ // ]),
324
+ // // 内容插槽 - 支持自定义渲染
325
+ // col.render ? h('template', { slot: 'default' }, {
326
+ // render: (scope) => h(ctx.parent.$options.components.renderDom, {
327
+ // props: { render: () => col.render(scope.row) }
328
+ // })
329
+ // }) : null,
330
+ // // 插槽渲染
331
+ // col.renderSlot ? h('template', { slot: 'default' }, {
332
+ // render: (scope) => ctx.parent.$scopedSlots[col.prop] ?
333
+ // ctx.parent.$scopedSlots[col.prop](scope) : null
334
+ // }) : null
335
+ // ].filter(Boolean)
336
+ // );
337
+ // }
338
+ // }
339
+ },
340
+ model: {
341
+ prop: "multipleSelection",
342
+ event: "SelectionChange",
343
+ },
344
+ props: {
345
+ url: {
346
+ type: String,
347
+ default: "",
348
+ }, // 接口地址
349
+ printListObj: {
350
+ type: Object,
351
+ default: () => {
352
+ return {
353
+ title: "",
354
+ tableHeader: "",
355
+ tableData: "",
356
+ };
396
357
  },
397
- pageSizes: {
398
- type: Array,
399
- default: () => {
400
- return [20, 30, 40, 60, 100, 200];
401
- },
358
+ }, // 打印参数
359
+ btnlist: Array,
360
+ outTable: {
361
+ type: Object,
362
+ default: () => {
363
+ return {
364
+ tableProp: {},
365
+ };
402
366
  },
403
- paginations: {
404
- // 显示复选框,
405
- type: Object,
406
- default: () => {
407
- return {
408
- page: 1, // 当前位于那页面
409
- total: 0, // 总数
410
- limit: 30, // 一页显示多少条
411
- pagetionShow: true,
412
- };
413
- },
367
+ },
368
+ // exportBut: {
369
+ // type: Array,
370
+ // default: [],
371
+ // },
372
+ // 表格传的形式
373
+ tableData: {
374
+ type: Object,
375
+ default: () => {
376
+ return {
377
+ loading: false,
378
+ options: {
379
+ selection: null, // 多选框
380
+ index: null, // 序号
381
+ headTool: true, // 开启头部工具栏
382
+ refreshBtn: true, // 开启表格头部刷新按钮
383
+ downloadBtn: true, // 开启表格头部下载按钮
384
+ }, // 序号和复选框
385
+ rows: [], // 表数据
386
+ columns: [], // 表头
387
+ operates: [], // 表格里面的操作按钮
388
+ // tableHeightDiff: 300,
389
+ operatesAttrs: {},
390
+ };
414
391
  },
415
- emptyImg: {
416
- // 显示复选框,
417
- type: Boolean,
418
- default: false,
392
+ },
393
+ tableDataShow: {
394
+ type: Boolean,
395
+ default: true,
396
+ },
397
+ pageSizes: {
398
+ type: Array,
399
+ default: () => {
400
+ return [20, 30, 40, 60, 100, 200];
419
401
  },
420
- tableEvents: Object,
421
- showBtnBox: {
422
- type: Boolean,
423
- default: true,
402
+ },
403
+ paginations: {
404
+ // 显示复选框,
405
+ type: Object,
406
+ default: () => {
407
+ return {
408
+ page: 1, // 当前位于那页面
409
+ total: 0, // 总数
410
+ limit: 30, // 一页显示多少条
411
+ pagetionShow: true,
412
+ };
424
413
  },
425
414
  },
426
-
427
- data() {
428
- return {
429
- nodata,
430
- tableRef: this.tableData.tableRef || "tableRef", // ref
431
- toggleRowFlage: this.tableData.toggleRowFlage || false, // 点击行高亮select标识
432
- // screenWidth: 0,
433
- // tableHeight:
434
- // document.documentElement.clientHeight - this.tableData.tableHeightDiff,
435
- pagetionShow: this.paginations.pagetionShow || true,
436
- twinPage: 1,
437
- columnsWatcher: null,
438
- key: 0,
439
- };
415
+ emptyImg: {
416
+ // 显示复选框,
417
+ type: Boolean,
418
+ default: false,
419
+ },
420
+ tableEvents: Object,
421
+ showBtnBox: {
422
+ type: Boolean,
423
+ default: true,
424
+ },
425
+ },
426
+
427
+ data() {
428
+ return {
429
+ nodata,
430
+ tableRef: this.tableData.tableRef || "tableRef", // ref
431
+ toggleRowFlage: this.tableData.toggleRowFlage || false, // 点击行高亮select标识
432
+ // screenWidth: 0,
433
+ // tableHeight:
434
+ // document.documentElement.clientHeight - this.tableData.tableHeightDiff,
435
+ pagetionShow: this.paginations.pagetionShow || true,
436
+ twinPage: 1,
437
+ columnsWatcher: null,
438
+ key: 0,
439
+ };
440
+ },
441
+ computed: {
442
+ bindTableColumns() {
443
+ return this.tableData.columns.filter(column =>
444
+ Object.keys(column).includes("show") ? column.show : true
445
+ );
440
446
  },
441
- computed: {
442
- bindTableColumns() {
443
- return this.tableData.columns.filter(column =>
444
- Object.keys(column).includes("show") ? column.show : true
445
- );
446
- },
447
447
 
448
- checkedTableList: {
449
- get() {
450
- // 返回选中的列名
451
- return this.getAllColumnsWithProp(this.tableData.columns);
452
- },
453
- },
454
- /* 这里使用了getter和setter,这样写的好处不用自己手动监听复选框的选中事件 */
455
- checkedTableColumns: {
456
- get() {
457
- // 返回选中的列名
458
- return this.getAllLabelsWithProp();
459
- },
460
- set(checked) {
461
- this.setColumnsShow(checked);
462
- this.$nextTick(() => {
463
- this.$refs.tableRef.doLayout();
464
- });
465
- },
448
+ checkedTableList: {
449
+ get() {
450
+ // 返回选中的列名
451
+ return this.getAllColumnsWithProp(this.tableData.columns);
466
452
  },
467
453
  },
468
- created() {
469
- // 通过swagger完善columns
470
- this.init();
471
- },
472
- // 组件销毁时清理监听器
473
- beforeDestroy() {
474
- this.stopColumnsWatching();
454
+ /* 这里使用了getter和setter,这样写的好处不用自己手动监听复选框的选中事件 */
455
+ checkedTableColumns: {
456
+ get() {
457
+ // 返回选中的列名
458
+ return this.getAllLabelsWithProp();
459
+ },
460
+ set(checked) {
461
+ this.setColumnsShow(checked);
462
+ this.$nextTick(() => {
463
+ this.$refs.tableRef.doLayout();
464
+ });
465
+ },
475
466
  },
476
- methods: {
477
- // init() {
478
- // // 从 IndexedDB 中获取 Swagger 数据
479
- // getData().then((swaggerData) => {
480
- // const swaggerColumns = swaggerData.paths[this.url].get.responses["200"].content['application/json'].schema.properties.items.items.properties;
481
-
482
- // Object.keys(swaggerColumns).forEach(key => {
483
- // const item = swaggerColumns[key];
484
- // let tempItem = this.tableData.columns.find((e) => e.prop == key);
485
- // if (tempItem) {
486
- // tempItem = { ...item, ...tempItem };
487
- // } else if (item.description) {
488
- // this.tableData.columns.push({
489
- // prop: key,
490
- // label: item.description,
491
- // show: true,
492
- // sortable: false,
493
- // attrs: {}
494
- // });
495
- // }
496
- // });
497
- // console.log(`\x1b[36m\x1b[4mol插件-表格`, this.tableData.columns)
498
- // }).catch((error) => {
499
- // console.error("获取 Swagger 数据失败:", error);
500
- // });
501
- // },
502
- // 支持多级表头 useSlotHeader: true,且支持排序,通过columns中的顺序实现
503
- // columns: [
504
- // {
505
- // label: '一级表头',
506
- // children: [{ prop: 'bindStateEnum', label: '112' }, { prop: 'tagNumber' }]
507
- // },
508
- // {
509
- // prop: "remark",
510
- // label: "备注123",
511
- // },
512
- // ],
513
- init() {
514
- // 从 IndexedDB 中获取 Swagger 数据
515
- getData()
516
- .then(swaggerData => {
517
- const swaggerColumns =
518
- swaggerData.paths[this.url].get.responses["200"].content["application/json"].schema
519
- .properties.items.items.properties;
520
-
521
- // 递归映射函数
522
- const mapSwaggerToColumns = columns => {
523
- columns.forEach(column => {
524
- if (column.children && column.children.length) {
525
- mapSwaggerToColumns(column.children);
526
- } else {
527
- if (column.prop && swaggerColumns[column.prop]) {
528
- const swaggerItem = swaggerColumns[column.prop];
529
- this.$set(column, "label", swaggerItem.description);
530
- if (!Object.keys(column).includes("show")) this.$set(column, "show", true);
531
- }
467
+ },
468
+ created() {
469
+ // 通过swagger完善columns
470
+ this.init();
471
+ },
472
+ // 组件销毁时清理监听器
473
+ beforeDestroy() {
474
+ this.stopColumnsWatching();
475
+ },
476
+ methods: {
477
+ // init() {
478
+ // // IndexedDB 中获取 Swagger 数据
479
+ // getData().then((swaggerData) => {
480
+ // const swaggerColumns = swaggerData.paths[this.url].get.responses["200"].content['application/json'].schema.properties.items.items.properties;
481
+
482
+ // Object.keys(swaggerColumns).forEach(key => {
483
+ // const item = swaggerColumns[key];
484
+ // let tempItem = this.tableData.columns.find((e) => e.prop == key);
485
+ // if (tempItem) {
486
+ // tempItem = { ...item, ...tempItem };
487
+ // } else if (item.description) {
488
+ // this.tableData.columns.push({
489
+ // prop: key,
490
+ // label: item.description,
491
+ // show: true,
492
+ // sortable: false,
493
+ // attrs: {}
494
+ // });
495
+ // }
496
+ // });
497
+ // console.log(`\x1b[36m\x1b[4mol插件-表格`, this.tableData.columns)
498
+ // }).catch((error) => {
499
+ // console.error("获取 Swagger 数据失败:", error);
500
+ // });
501
+ // },
502
+ // 支持多级表头 useSlotHeader: true,且支持排序,通过columns中的顺序实现
503
+ // columns: [
504
+ // {
505
+ // label: '一级表头',
506
+ // children: [{ prop: 'bindStateEnum', label: '112' }, { prop: 'tagNumber' }]
507
+ // },
508
+ // {
509
+ // prop: "remark",
510
+ // label: "备注123",
511
+ // },
512
+ // ],
513
+ init() {
514
+ // IndexedDB 中获取 Swagger 数据
515
+ getData()
516
+ .then(swaggerData => {
517
+ const swaggerColumns =
518
+ swaggerData.paths[this.url].get.responses["200"].content["application/json"].schema
519
+ .properties.items.items.properties;
520
+
521
+ // 递归映射函数
522
+ const mapSwaggerToColumns = columns => {
523
+ columns.forEach(column => {
524
+ if (column.children && column.children.length) {
525
+ mapSwaggerToColumns(column.children);
526
+ } else {
527
+ if (column.prop && swaggerColumns[column.prop]) {
528
+ const swaggerItem = swaggerColumns[column.prop];
529
+ this.$set(column, "label", swaggerItem.description);
530
+ if (!Object.keys(column).includes("show")) this.$set(column, "show", true);
532
531
  }
533
- });
534
- };
535
- // 自定义columns数据
536
- mapSwaggerToColumns(this.tableData.columns);
537
-
538
- Object.keys(swaggerColumns).forEach(key => {
539
- const item = swaggerColumns[key];
540
- const existingColumn = this.findColumnByProp(this.tableData.columns, key);
541
- if (!existingColumn && item.description) {
542
- this.tableData.columns.push({
543
- prop: key,
544
- label: item.description,
545
- show: true,
546
- sortable: false,
547
- attrs: {},
548
- });
549
532
  }
550
533
  });
551
- // 根据beforeProp排序
552
- this.sortColumns(this.tableData.columns);
553
-
554
- // 添加show, 最后添加show是为了后期swagger可能会增加show字段(扩展)
555
- // 递归根据当前是否有show键名,没有show就添加show:true
556
- const addShow = columns => {
557
- columns.forEach(column => {
558
- if (!column.hasOwnProperty("show")) this.$set(column, "show", true);
559
- if (column.children && column.children.length) {
560
- addShow(column.children);
561
- } else {
562
- if (!column.hasOwnProperty("show")) {
563
- // 用set修改
564
- this.$set(column, "show", true);
565
- }
566
- }
567
- });
568
- };
569
- // 添加show,这里的show只显示隐藏,通过checkbox能实现显示隐藏。如果不想checkbox中出现可添加hidden(这是区别于老框架的逻辑)
570
- addShow(this.tableData.columns);
571
- console.log(`\x1b[36m\x1b[4mol插件-表格`, this.tableData.columns);
572
-
573
- // init 执行完成后,添加深度监听
574
- this.startColumnsWatching();
575
- })
576
- .catch(error => {
577
- console.error("获取 Swagger 数据失败:", error);
578
- });
579
- },
580
- // 多级表头顺序调整,只争对有多级表头的且包含beforeProp字段的,规则:通过多级表头的beforeProp字段将整个多级表头移到这个字段位置之后。(只会一级出现beforeProp,多级中的排序都要手动实现)
581
- sortColumns(columns) {
582
- let index = 0;
583
- columns.forEach(column => {
584
- if (!column.beforeProp) {
585
- column.sort = index;
586
- index++;
587
- const tempItem = columns.find(e => e.beforeProp == column.prop);
588
- if (tempItem) {
589
- tempItem.sort = index;
590
- index++;
534
+ };
535
+ // 自定义columns数据
536
+ mapSwaggerToColumns(this.tableData.columns);
537
+
538
+ Object.keys(swaggerColumns).forEach(key => {
539
+ const item = swaggerColumns[key];
540
+ const existingColumn = this.findColumnByProp(this.tableData.columns, key);
541
+ if (!existingColumn && item.description) {
542
+ const obj = {
543
+ prop: key,
544
+ label: item.description,
545
+ show: true,
546
+ sortable: false,
547
+ attrs: {},
548
+ };
549
+ // 如果是枚举值直接转成Desc结尾的,swagger中没有Desc但是后端接口会返回带Desc的字段,用于前端展示枚举值的中文
550
+ if (item.enum && Array.isArray(item.enum)) {
551
+ obj.prop = `${key}Desc`;
552
+ obj.label = item.description.replace(/枚举/g, "");
553
+ }
554
+ this.tableData.columns.push(obj);
591
555
  }
592
- }
556
+ });
557
+ // 根据beforeProp排序
558
+ this.sortColumns(this.tableData.columns);
559
+
560
+ // 添加show, 最后添加show是为了后期swagger可能会增加show字段(扩展)
561
+ // 递归根据当前是否有show键名,没有show就添加show:true
562
+ const addShow = columns => {
563
+ columns.forEach(column => {
564
+ if (!column.hasOwnProperty("show")) this.$set(column, "show", true);
565
+ if (column.children && column.children.length) {
566
+ addShow(column.children);
567
+ } else {
568
+ if (!column.hasOwnProperty("show")) {
569
+ // 用set修改
570
+ this.$set(column, "show", true);
571
+ }
572
+ }
573
+ });
574
+ };
575
+ // 添加show,这里的show只显示隐藏,通过checkbox能实现显示隐藏。如果不想checkbox中出现可添加hidden(这是区别于老框架的逻辑)
576
+ addShow(this.tableData.columns);
577
+ console.log(`\x1b[36m\x1b[4mol插件-表格`, this.tableData.columns);
578
+
579
+ // init 执行完成后,添加深度监听
580
+ this.startColumnsWatching();
581
+ })
582
+ .catch(error => {
583
+ console.error("获取 Swagger 数据失败:", error);
593
584
  });
594
- columns.sort((a, b) => a.sort - b.sort);
595
- },
596
- // 递归查找列配置的辅助方法
597
- findColumnByProp(columns, prop) {
598
- for (const column of columns) {
599
- if (column.children && column.children.length) {
600
- const found = this.findColumnByProp(column.children, prop);
601
- if (found) return found;
602
- } else if (column.prop === prop) {
603
- return column;
585
+ },
586
+ // 多级表头顺序调整,只争对有多级表头的且包含beforeProp字段的,规则:通过多级表头的beforeProp字段将整个多级表头移到这个字段位置之后。(只会一级出现beforeProp,多级中的排序都要手动实现)
587
+ sortColumns(columns) {
588
+ let index = 0;
589
+ columns.forEach(column => {
590
+ if (!column.beforeProp) {
591
+ column.sort = index;
592
+ index++;
593
+ const tempItem = columns.find(e => e.beforeProp == column.prop);
594
+ if (tempItem) {
595
+ tempItem.sort = index;
596
+ index++;
604
597
  }
605
598
  }
606
- return null;
607
- },
608
- radioChange() {
609
- this.$emit("radioChange", this.twinPage);
610
- },
611
- // 刷新表格
612
- refreshTable() {
613
- const view = this.$router.history.current;
614
- this.$store.dispatch("tagsView/delCachedView", view).then(() => {
615
- const { fullPath } = view;
616
- this.$nextTick(() => {
617
- this.$router.replace({
618
- path: "/redirect" + fullPath,
619
- });
599
+ });
600
+ columns.sort((a, b) => a.sort - b.sort);
601
+ },
602
+ // 递归查找列配置的辅助方法
603
+ findColumnByProp(columns, prop) {
604
+ for (const column of columns) {
605
+ if (column.children && column.children.length) {
606
+ const found = this.findColumnByProp(column.children, prop);
607
+ if (found) return found;
608
+ } else if (column.prop === prop) {
609
+ return column;
610
+ }
611
+ }
612
+ return null;
613
+ },
614
+ radioChange() {
615
+ this.$emit("radioChange", this.twinPage);
616
+ },
617
+ // 刷新表格
618
+ refreshTable() {
619
+ const view = this.$router.history.current;
620
+ this.$store.dispatch("tagsView/delCachedView", view).then(() => {
621
+ const { fullPath } = view;
622
+ this.$nextTick(() => {
623
+ this.$router.replace({
624
+ path: "/redirect" + fullPath,
620
625
  });
621
626
  });
622
- this.$emit("refreshTable");
623
- },
624
- printTable() {
625
- console.log("printTable");
626
- if (this.tableData.rows.length <= 0) return;
627
- this.printListObj.title = this.$router.history.current.name;
628
- this.printListObj.tableHeader = this.tableData.columns;
629
- this.printListObj.tableData = this.tableData.rows;
630
- console.log(this.printListObj);
631
- setTimeout(() => {
632
- $(".printTemplate").show();
633
- $(".printTemplate").jqprint();
634
- $(".printTemplate").hide();
635
- }, 50);
636
- this.$emit("printTable");
637
- },
638
- selectAll(val) {
639
- this.$emit("selectAll", val);
640
- },
641
- select(val, row) {
642
- this.$emit("selectTab", val, row);
643
- },
644
- refreshTableBTN() {
645
- this.$emit("refreshTableBTN");
646
- },
647
- rowClick(row, column) {
648
- if (column.label === "操作") return; // 操作列不处罚行点击事件
649
- this.$emit("rowClick", row);
650
- if (
651
- this.tableData.columns.every(item => {
652
- return item.label !== "是否只出样件";
653
- })
654
- ) {
655
- // 为true时 点击行高亮select
656
- this.$refs.tableRef.toggleRowSelection(row);
657
- }
658
- },
659
- computeTableIndex(index) {
660
- return (this.paginations.page - 1) * this.paginations.limit + index + 1;
661
- },
662
- // 挑选的数据
663
- SelectionChange(val) {
664
- this.multipleSelection = val;
665
- this.$emit("SelectionChange", val);
666
- },
667
- // 分页选择
668
- handleSizeChange(val) {
669
- this.paginations.limit = val;
670
- this.$emit("handleSizeChange", val);
671
- },
672
- handleindexChange(val) {
673
- this.paginations.page = val;
674
- this.$emit("handleindexChange", val);
675
- },
676
- getCheckboxList() {
677
- return this.tableData.column;
678
- },
679
- setCheckboxList(val) {},
680
-
681
- getAllColumnsWithProp(columns) {
682
- const result = [];
683
- const propMap = new Map(); // 使用Map存储prop -> column的映射
684
-
685
- const traverse = cols => {
686
- cols.forEach(column => {
687
- if (column.children && column.children.length) {
688
- // 如果有子列,递归处理子列
689
- traverse(column.children);
690
- } else if (column.prop) {
691
- // 如果包含prop属性且未重复,添加到结果数组
692
- if (!propMap.has(column.prop)) {
693
- propMap.set(column.prop, column);
694
- result.push(column);
695
- }
627
+ });
628
+ this.$emit("refreshTable");
629
+ },
630
+ printTable() {
631
+ console.log("printTable");
632
+ if (this.tableData.rows.length <= 0) return;
633
+ this.printListObj.title = this.$router.history.current.name;
634
+ this.printListObj.tableHeader = this.tableData.columns;
635
+ this.printListObj.tableData = this.tableData.rows;
636
+ console.log(this.printListObj);
637
+ setTimeout(() => {
638
+ $(".printTemplate").show();
639
+ $(".printTemplate").jqprint();
640
+ $(".printTemplate").hide();
641
+ }, 50);
642
+ this.$emit("printTable");
643
+ },
644
+ selectAll(val) {
645
+ this.$emit("selectAll", val);
646
+ },
647
+ select(val, row) {
648
+ this.$emit("selectTab", val, row);
649
+ },
650
+ refreshTableBTN() {
651
+ this.$emit("refreshTableBTN");
652
+ },
653
+ rowClick(row, column) {
654
+ if (column.label === "操作") return; // 操作列不处罚行点击事件
655
+ this.$emit("rowClick", row);
656
+ if (
657
+ this.tableData.columns.every(item => {
658
+ return item.label !== "是否只出样件";
659
+ })
660
+ ) {
661
+ // 为true时 点击行高亮select
662
+ this.$refs.tableRef.toggleRowSelection(row);
663
+ }
664
+ },
665
+ computeTableIndex(index) {
666
+ return (this.paginations.page - 1) * this.paginations.limit + index + 1;
667
+ },
668
+ // 挑选的数据
669
+ SelectionChange(val) {
670
+ this.multipleSelection = val;
671
+ this.$emit("SelectionChange", val);
672
+ },
673
+ // 分页选择
674
+ handleSizeChange(val) {
675
+ this.paginations.limit = val;
676
+ this.$emit("handleSizeChange", val);
677
+ },
678
+ handleindexChange(val) {
679
+ this.paginations.page = val;
680
+ this.$emit("handleindexChange", val);
681
+ },
682
+ getCheckboxList() {
683
+ return this.tableData.column;
684
+ },
685
+ setCheckboxList(val) {},
686
+
687
+ getAllColumnsWithProp(columns) {
688
+ const result = [];
689
+ const propMap = new Map(); // 使用Map存储prop -> column的映射
690
+
691
+ const traverse = cols => {
692
+ cols.forEach(column => {
693
+ if (column.children && column.children.length) {
694
+ // 如果有子列,递归处理子列
695
+ traverse(column.children);
696
+ } else if (column.prop) {
697
+ // 如果包含prop属性且未重复,添加到结果数组
698
+ if (!propMap.has(column.prop)) {
699
+ propMap.set(column.prop, column);
700
+ result.push(column);
696
701
  }
697
- });
698
- };
702
+ }
703
+ });
704
+ };
699
705
 
700
- traverse(columns);
701
- return result;
702
- },
706
+ traverse(columns);
707
+ return result;
708
+ },
703
709
 
704
- // checkbox的显示隐藏
705
- getAllLabelsWithProp() {
706
- const result = [];
707
-
708
- const traverse = cols => {
709
- cols.forEach(column => {
710
- if (column.children && column.children.length) {
711
- // 如果有子列,递归处理子列
712
- traverse(column.children);
713
- } else if (column.prop && column.show) {
714
- // 如果包含prop属性且未重复,添加到结果数组
715
- if (!result.includes(column.prop) && column.show) {
716
- result.push(column.prop);
717
- }
710
+ // checkbox的显示隐藏
711
+ getAllLabelsWithProp() {
712
+ const result = [];
713
+
714
+ const traverse = cols => {
715
+ cols.forEach(column => {
716
+ if (column.children && column.children.length) {
717
+ // 如果有子列,递归处理子列
718
+ traverse(column.children);
719
+ } else if (column.prop && column.show) {
720
+ // 如果包含prop属性且未重复,添加到结果数组
721
+ if (!result.includes(column.prop) && column.show) {
722
+ result.push(column.prop);
718
723
  }
719
- });
720
- };
721
- traverse(this.tableData.columns);
722
- return result;
723
- },
724
- setColumnsShow(checkedList) {
725
- // 递归更新tableData.columns的show属性
726
- const traverse = cols => {
727
- cols.forEach(column => {
728
- if (column.children && column.children.length) {
729
- traverse(column.children);
730
- } else if (column.prop) {
731
- // 用set修改
732
- if (checkedList.includes(column.prop)) {
733
- this.$set(column, "show", true);
734
- } else {
735
- this.$set(column, "show", false);
736
- }
724
+ }
725
+ });
726
+ };
727
+ traverse(this.tableData.columns);
728
+ return result;
729
+ },
730
+ setColumnsShow(checkedList) {
731
+ // 递归更新tableData.columns的show属性
732
+ const traverse = cols => {
733
+ cols.forEach(column => {
734
+ if (column.children && column.children.length) {
735
+ traverse(column.children);
736
+ } else if (column.prop) {
737
+ // 用set修改
738
+ if (checkedList.includes(column.prop)) {
739
+ this.$set(column, "show", true);
740
+ } else {
741
+ this.$set(column, "show", false);
737
742
  }
738
- });
739
- };
740
- traverse(this.tableData.columns);
741
- },
742
-
743
- // 开启 columns 监听,(二级菜单是递归组件,数据变化dom没有发送变化,故监听直接更新dom)
744
- startColumnsWatching() {
745
- this.stopColumnsWatching();
746
- this.columnsWatcher = this.$watch("tableData.columns", () => (this.key += 1), {
747
- deep: true, // 深度监听
748
- immediate: false,
743
+ }
749
744
  });
750
- },
745
+ };
746
+ traverse(this.tableData.columns);
747
+ },
751
748
 
752
- // 停止 columns 监听
753
- stopColumnsWatching() {
754
- if (this.columnsWatcher) {
755
- this.columnsWatcher();
756
- this.columnsWatcher = null;
757
- }
758
- },
749
+ // 开启 columns 监听,(二级菜单是递归组件,数据变化dom没有发送变化,故监听直接更新dom)
750
+ startColumnsWatching() {
751
+ this.stopColumnsWatching();
752
+ this.columnsWatcher = this.$watch("tableData.columns", () => (this.key += 1), {
753
+ deep: true, // 深度监听
754
+ immediate: false,
755
+ });
759
756
  },
760
- };
761
- </script>
762
757
 
763
- <style lang="scss" scoped>
764
- .table_list_fix {
765
- overflow: auto;
766
- flex: 1;
767
- display: flex;
768
- flex-direction: column;
769
- justify-content: space-between;
770
- padding: 10px;
771
- gap: 10px;
772
-
773
- ::v-deep .el-table {
774
- td {
775
- padding: 0px;
776
-
777
- div {
778
- line-height: 28px;
779
- font-size: 12px;
780
- }
758
+ // 停止 columns 监听
759
+ stopColumnsWatching() {
760
+ if (this.columnsWatcher) {
761
+ this.columnsWatcher();
762
+ this.columnsWatcher = null;
781
763
  }
764
+ },
765
+ },
766
+ };
767
+ </script>
782
768
 
783
- th {
784
- padding: 0px;
785
- background: #f5f7fa;
786
- div {
787
- line-height: 28px;
788
- color: #909399;
789
- font-size: 12px;
790
- }
769
+ <style lang="scss" scoped>
770
+ .table_list_fix {
771
+ overflow: auto;
772
+ flex: 1;
773
+ display: flex;
774
+ flex-direction: column;
775
+ justify-content: space-between;
776
+ padding: 10px;
777
+ gap: 10px;
778
+
779
+ ::v-deep .el-table {
780
+ td {
781
+ padding: 0px;
782
+
783
+ div {
784
+ line-height: 28px;
785
+ font-size: 12px;
791
786
  }
792
787
  }
793
788
 
794
- .btn-operates {
795
- margin: 10px 0px 10px 15px;
796
-
797
- ::v-deep a {
798
- color: #fff;
799
- text-decoration: none;
800
- display: inline-block;
801
- margin: 0px 5px;
802
- ::v-deep .el-button {
803
- width: 100%;
804
- padding: 7px;
805
- font-size: 13px;
806
- }
789
+ th {
790
+ padding: 0px;
791
+ background: #f5f7fa;
792
+ div {
793
+ line-height: 28px;
794
+ color: #909399;
795
+ font-size: 12px;
807
796
  }
808
797
  }
809
798
  }
810
799
 
811
- .table-header {
812
- padding-top: 10px;
813
-
814
- .table-header_button {
815
- text-align: right;
816
- float: right;
817
- margin-bottom: 12px;
818
- line-height: 40px;
800
+ .btn-operates {
801
+ margin: 10px 0px 10px 15px;
802
+
803
+ ::v-deep a {
804
+ color: #fff;
805
+ text-decoration: none;
806
+ display: inline-block;
807
+ margin: 0px 5px;
808
+ ::v-deep .el-button {
809
+ width: 100%;
810
+ padding: 7px;
811
+ font-size: 13px;
812
+ }
819
813
  }
820
814
  }
815
+ }
821
816
 
822
- .newjump {
823
- text-decoration: none;
824
- color: dodgerblue;
825
- }
817
+ .table-header {
818
+ padding-top: 10px;
826
819
 
827
- .tablebox {
828
- box-sizing: border-box;
829
- flex: 1;
830
- overflow: auto;
820
+ .table-header_button {
821
+ text-align: right;
822
+ float: right;
823
+ margin-bottom: 12px;
824
+ line-height: 40px;
831
825
  }
832
-
833
- ::v-deep .el-table__body tr.current-row > td {
834
- background-color: rgb(24, 144, 255) !important;
835
- color: #fff;
826
+ }
827
+
828
+ .newjump {
829
+ text-decoration: none;
830
+ color: dodgerblue;
831
+ }
832
+
833
+ .tablebox {
834
+ box-sizing: border-box;
835
+ flex: 1;
836
+ overflow: auto;
837
+ }
838
+
839
+ ::v-deep .el-table__body tr.current-row > td {
840
+ background-color: rgb(24, 144, 255) !important;
841
+ color: #fff;
842
+ }
843
+
844
+ ::v-deep .redrow {
845
+ background: #fde6e6 !important;
846
+ }
847
+
848
+ .btnbox {
849
+ width: 100%;
850
+ display: flex;
851
+ align-items: center;
852
+ justify-content: space-between;
853
+
854
+ .upload-demo {
855
+ display: -webkit-inline-box;
856
+ margin-left: 10px;
836
857
  }
837
858
 
838
- ::v-deep .redrow {
839
- background: #fde6e6 !important;
840
- }
841
-
842
- .btnbox {
843
- width: 100%;
844
- display: flex;
845
- align-items: center;
846
- justify-content: space-between;
847
-
848
- .upload-demo {
849
- display: -webkit-inline-box;
850
- margin-left: 10px;
851
- }
852
-
853
- .el-form-item {
854
- margin-bottom: 0px;
855
- }
856
- }
857
-
858
- .layui-table-tool-self {
859
- display: block;
860
- width: 26px;
861
- height: 26px;
862
- padding: 5px;
863
- line-height: 16px;
864
- text-align: center;
865
- color: #333;
866
- border: 1px solid #ccc;
867
- cursor: pointer;
868
- }
869
-
870
- .checkbox {
871
- display: block;
872
- }
873
- // 操作列按钮布局
874
- .operate-group {
875
- display: flex;
876
- align-items: center;
877
- justify-content: space-around;
878
- }
879
- .toolbox {
880
- display: flex;
881
- gap: 10px;
859
+ .el-form-item {
860
+ margin-bottom: 0px;
882
861
  }
862
+ }
863
+
864
+ .layui-table-tool-self {
865
+ display: block;
866
+ width: 26px;
867
+ height: 26px;
868
+ padding: 5px;
869
+ line-height: 16px;
870
+ text-align: center;
871
+ color: #333;
872
+ border: 1px solid #ccc;
873
+ cursor: pointer;
874
+ }
875
+
876
+ .checkbox {
877
+ display: block;
878
+ }
879
+ // 操作列按钮布局
880
+ .operate-group {
881
+ display: flex;
882
+ align-items: center;
883
+ justify-content: space-around;
884
+ }
885
+ .toolbox {
886
+ display: flex;
887
+ gap: 10px;
888
+ }
883
889
  </style>
890
+