@aspire-ui/element-component-pro 1.0.21 → 1.0.23
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.
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ecp-pro-table[data-v-
|
|
1
|
+
.ecp-pro-table[data-v-3d780f58]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-3d780f58] .el-table{width:100%!important}.ecp-pro-table__header[data-v-3d780f58]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-3d780f58]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-3d780f58]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-3d780f58]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-3d780f58]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-3d780f58]{width:100%}.ecp-pro-table__pagination[data-v-3d780f58]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-3d780f58]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-48d7960b]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-48d7960b]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-48d7960b]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-48d7960b]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-48d7960b]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-cf7b3b35]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-cf7b3b35]{margin-bottom:16px}.ecp-pro-form .ecp-pro-form_col[data-v-cf7b3b35]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-cf7b3b35]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-cf7b3b35]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-cf7b3b35]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-656036f6]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-656036f6]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-656036f6]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-656036f6]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-656036f6],.ecp-pro-descriptions__toggle[data-v-656036f6]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-656036f6]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-656036f6]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-656036f6]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-656036f6]{overflow:hidden}.ecp-pro-descriptions__body[data-v-656036f6]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-656036f6]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-656036f6]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__content[data-v-656036f6]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-656036f6]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-656036f6]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-656036f6]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-656036f6]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-656036f6]{flex-direction:column}.ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto}}.ecp-collapse-container[data-v-087dba3a]{background:#fff;border-radius:14px;border:1px solid #e8eef8;box-shadow:0 10px 24px #0f2d5e0f;overflow:hidden}.ecp-collapse-container.is-ghost[data-v-087dba3a]{border-color:transparent;box-shadow:none;background:transparent}.ecp-collapse-container__header[data-v-087dba3a]{min-height:56px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #eef3fb}.ecp-collapse-container.is-ghost .ecp-collapse-container__header[data-v-087dba3a]{padding-left:0;padding-right:0}.ecp-collapse-container__header-main[data-v-087dba3a]{min-width:0;flex:1;display:flex;align-items:center}.ecp-collapse-container__title-wrap[data-v-087dba3a]{min-width:0;display:inline-flex;align-items:center;gap:8px}.ecp-collapse-container__title[data-v-087dba3a]{color:#1f2d3d;font-size:16px;font-weight:600;line-height:1.4}.ecp-collapse-container__help[data-v-087dba3a]{color:#91a3b7;font-size:14px}.ecp-collapse-container__header-extra[data-v-087dba3a]{display:inline-flex;align-items:center;justify-content:flex-end;gap:12px;flex-shrink:0}.ecp-collapse-container__toggle[data-v-087dba3a]{padding:0;color:#2f6fd3}.ecp-collapse-container__toggle i[data-v-087dba3a]{margin-left:6px;transition:transform .2s ease}.ecp-collapse-container__toggle i.is-expanded[data-v-087dba3a]{transform:rotate(180deg)}.ecp-collapse-container__body[data-v-087dba3a]{padding:20px;box-sizing:border-box}.ecp-collapse-container.is-ghost .ecp-collapse-container__body[data-v-087dba3a]{padding-left:0;padding-right:0}.ecp-collapse-container.is-header-clickable .ecp-collapse-container__header-main[data-v-087dba3a]{cursor:pointer}@media (max-width: 768px){.ecp-collapse-container__header[data-v-087dba3a]{padding:14px 16px;align-items:flex-start;flex-direction:column}.ecp-collapse-container__header-extra[data-v-087dba3a]{width:100%;justify-content:space-between}.ecp-collapse-container__body[data-v-087dba3a]{padding:16px}}.ecp-pro-table-form__form[data-v-44aa7592] .el-form-item{margin-bottom:0}.ecp-pro-table-form__cell-item[data-v-44aa7592]{width:100%}.ecp-pro-table-form__cell-item[data-v-44aa7592] .el-form-item__content{margin-left:0!important;line-height:normal}.ecp-pro-table-form__fixed-label[data-v-44aa7592]{color:#303133;font-size:14px}.ecp-pro-table-form__req[data-v-44aa7592]{color:#f56c6c;margin-right:2px}.ecp-pro-table-form__th-text[data-v-44aa7592]{font-weight:500;color:#606266}.ecp-pro-table-form__action-title[data-v-44aa7592]{margin-right:8px;font-size:13px;color:#606266}.ecp-pro-table-form__add-btn[data-v-44aa7592]{padding:0;font-size:14px}.ecp-pro-table-form__del-btn[data-v-44aa7592]{padding:0;color:#909399}.ecp-pro-table-form__del-btn[data-v-44aa7592]:not(:disabled){color:#409eff}.ecp-pro-table-form .ecp-pro-table-form__header-cell{background:#f5f7fa!important}
|
package/package.json
CHANGED
|
@@ -246,7 +246,17 @@ const tableRef = ref()
|
|
|
246
246
|
const tableWrapRef = ref()
|
|
247
247
|
const containerWidth = ref(0)
|
|
248
248
|
const loading = ref(props.loading ?? false)
|
|
249
|
-
const
|
|
249
|
+
const localFullData = ref<Record<string, unknown>[]>([])
|
|
250
|
+
/** 本地模式数据；API 模式下存服务端返回的当前页数据 */
|
|
251
|
+
const innerData = computed(() => {
|
|
252
|
+
const data = localFullData.value
|
|
253
|
+
// 不分页时展示全量数据
|
|
254
|
+
if (!showPagination.value) return data
|
|
255
|
+
if (!data.length) return data
|
|
256
|
+
const { page, pageSize } = pagination.value
|
|
257
|
+
const start = (page - 1) * pageSize
|
|
258
|
+
return data.slice(start, start + pageSize)
|
|
259
|
+
})
|
|
250
260
|
const rawDataSource = ref<Record<string, unknown>>({})
|
|
251
261
|
const innerColumns = ref<ProColumn[]>([])
|
|
252
262
|
const innerProps = ref<Partial<ProTableProps>>({})
|
|
@@ -303,9 +313,10 @@ const rowKeyField = computed(() => effectiveProps.value.rowKey || 'id')
|
|
|
303
313
|
const selectedKeysSet = computed(() => new Set(selectedRows.value.map((r) => r[rowKeyField.value] as string | number)))
|
|
304
314
|
|
|
305
315
|
/** 显示列 */
|
|
306
|
-
const displayColumns = computed(() =>
|
|
307
|
-
innerColumns.value
|
|
308
|
-
)
|
|
316
|
+
const displayColumns = computed(() =>{
|
|
317
|
+
console.log(innerColumns.value)
|
|
318
|
+
return innerColumns.value.filter((c) => !c.hideInTable && !c.defaultHidden)
|
|
319
|
+
})
|
|
309
320
|
|
|
310
321
|
/** 扁平列映射：columnId -> 原始 ProColumn（供 spanMethod 使用） */
|
|
311
322
|
const flatColumnsMap = computed(() => {
|
|
@@ -315,7 +326,7 @@ const flatColumnsMap = computed(() => {
|
|
|
315
326
|
if (col.children && col.children.length > 0) {
|
|
316
327
|
flatten(col.children)
|
|
317
328
|
} else {
|
|
318
|
-
if (col.
|
|
329
|
+
if (col.dataIndex) map.set(col.dataIndex, col)
|
|
319
330
|
}
|
|
320
331
|
}
|
|
321
332
|
}
|
|
@@ -354,10 +365,10 @@ const spanMethodAdapter: TableProps<any>['spanMethod'] = (
|
|
|
354
365
|
param: { row: any; column: any; rowIndex: number; columnIndex: number }
|
|
355
366
|
) => {
|
|
356
367
|
if (!effectiveProps.value.spanMethod) return [1, 1]
|
|
357
|
-
const original = flatColumnsMap.value.get(param.column.
|
|
368
|
+
const original = flatColumnsMap.value.get(param.column.property)
|
|
358
369
|
return effectiveProps.value.spanMethod({
|
|
359
370
|
...param,
|
|
360
|
-
column: {...original
|
|
371
|
+
column: original ? {...original,...param.column } : { ...param.column, dataIndex: param.column.property, title: param.column.label },
|
|
361
372
|
})
|
|
362
373
|
}
|
|
363
374
|
|
|
@@ -455,7 +466,7 @@ const handleSelectAll = (checked: boolean) => {
|
|
|
455
466
|
const fetchData = async (opt?: FetchParams) => {
|
|
456
467
|
if (!props.api) {
|
|
457
468
|
if (props.dataSource) return
|
|
458
|
-
|
|
469
|
+
localFullData.value = []
|
|
459
470
|
return
|
|
460
471
|
}
|
|
461
472
|
loading.value = true
|
|
@@ -479,10 +490,11 @@ const fetchData = async (opt?: FetchParams) => {
|
|
|
479
490
|
const data = (props.afterFetch ? props.afterFetch(res) : res) as Record<string, unknown>
|
|
480
491
|
const list = (data[listField] ?? data.items ?? data.list ?? []) as unknown[]
|
|
481
492
|
const total = (data[totalField] ?? 0) as number
|
|
482
|
-
|
|
493
|
+
localFullData.value = list as Record<string, unknown>[]
|
|
483
494
|
pagination.value.total = total
|
|
484
495
|
emit('fetch-success', { items: list, total })
|
|
485
496
|
} catch (e) {
|
|
497
|
+
localFullData.value = []
|
|
486
498
|
emit('fetch-error', e)
|
|
487
499
|
} finally {
|
|
488
500
|
loading.value = false
|
|
@@ -510,17 +522,19 @@ const handleRowDblclick = (row: Record<string, unknown>, _column: unknown, event
|
|
|
510
522
|
const handleSortChange = ({ prop, order }: { prop: string; order: string }) => emit('sort-change', { prop, order })
|
|
511
523
|
const handleExpandChange = (row: Record<string, unknown>, expanded: boolean | Record<string, unknown>[]) => emit('expand-change', row, expanded)
|
|
512
524
|
|
|
513
|
-
const findRowIndex = (key: string | number) =>
|
|
514
|
-
innerData.value.findIndex((r) => r[rowKeyField.value] === key)
|
|
515
|
-
|
|
516
525
|
const tableAction: TableActionType = {
|
|
517
526
|
setProps: (p) => { innerProps.value = { ...innerProps.value, ...p } },
|
|
518
527
|
reload: (opt) => fetchData(opt),
|
|
519
528
|
redoHeight: () => { tableRef.value?.doLayout?.() },
|
|
520
529
|
setLoading: (v) => { loading.value = v },
|
|
521
|
-
|
|
530
|
+
/** 返回全量数据（API 模式为服务端返回的当前页数据，本地模式为原始全量数据） */
|
|
531
|
+
getDataSource: () => localFullData.value,
|
|
522
532
|
getRawDataSource: () => rawDataSource.value,
|
|
523
|
-
|
|
533
|
+
/** 设置本地全量数据，同时同步 total */
|
|
534
|
+
setTableData: (data) => {
|
|
535
|
+
localFullData.value = data ?? []
|
|
536
|
+
if (props.pagination !== false) pagination.value.total = (data ?? []).length
|
|
537
|
+
},
|
|
524
538
|
getColumns: () => innerColumns.value,
|
|
525
539
|
setColumns: (cols) => {
|
|
526
540
|
if (Array.isArray(cols) && cols.length > 0 && typeof cols[0] === 'string') {
|
|
@@ -542,7 +556,7 @@ const tableAction: TableActionType = {
|
|
|
542
556
|
clearSelectedRowKeys: () => { selectedRows.value = []; emitSelectionChange() },
|
|
543
557
|
setSelectedRowKeys: (keys) => {
|
|
544
558
|
const keySet = new Set(keys)
|
|
545
|
-
const rows =
|
|
559
|
+
const rows = localFullData.value.filter((r) => keySet.has(r[rowKeyField.value] as string | number))
|
|
546
560
|
keys.forEach((k) => {
|
|
547
561
|
if (!rows.some((r) => r[rowKeyField.value] === k)) {
|
|
548
562
|
rows.push({ [rowKeyField.value]: k } as Record<string, unknown>)
|
|
@@ -555,28 +569,33 @@ const tableAction: TableActionType = {
|
|
|
555
569
|
selectedRows.value = selectedRows.value.filter((r) => r[rowKeyField.value] !== key)
|
|
556
570
|
emitSelectionChange()
|
|
557
571
|
},
|
|
572
|
+
/** index 为当前页索引，自动转换为全量索引 */
|
|
558
573
|
updateTableData: (index, key, value) => {
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
574
|
+
const { page, pageSize } = pagination.value
|
|
575
|
+
const fullIndex = (page - 1) * pageSize + index
|
|
576
|
+
if (fullIndex < 0 || fullIndex >= localFullData.value.length) return
|
|
577
|
+
localFullData.value = [...localFullData.value]
|
|
578
|
+
localFullData.value[fullIndex] = { ...localFullData.value[fullIndex], [key]: value }
|
|
562
579
|
},
|
|
563
580
|
updateTableDataRecord: (rowKey, record) => {
|
|
564
|
-
const idx =
|
|
581
|
+
const idx = localFullData.value.findIndex((r) => r[rowKeyField.value] === rowKey)
|
|
565
582
|
if (idx < 0) return
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
return
|
|
583
|
+
localFullData.value = [...localFullData.value]
|
|
584
|
+
localFullData.value[idx] = { ...localFullData.value[idx], ...record }
|
|
585
|
+
return localFullData.value[idx]
|
|
569
586
|
},
|
|
570
587
|
deleteTableDataRecord: (rowKey) => {
|
|
571
588
|
const keys = Array.isArray(rowKey) ? rowKey : [rowKey]
|
|
572
589
|
const keySet = new Set(keys)
|
|
573
|
-
|
|
590
|
+
localFullData.value = localFullData.value.filter((r) => !keySet.has(r[rowKeyField.value] as string | number))
|
|
591
|
+
if (props.pagination !== false) pagination.value.total = localFullData.value.length
|
|
574
592
|
},
|
|
575
593
|
insertTableDataRecord: (record, index) => {
|
|
576
|
-
const arr = [...
|
|
594
|
+
const arr = [...localFullData.value]
|
|
577
595
|
if (index == null || index >= arr.length) arr.push(record)
|
|
578
596
|
else arr.splice(index, 0, record)
|
|
579
|
-
|
|
597
|
+
localFullData.value = arr
|
|
598
|
+
if (props.pagination !== false) pagination.value.total = localFullData.value.length
|
|
580
599
|
return record
|
|
581
600
|
},
|
|
582
601
|
getPaginationRef: () =>
|
|
@@ -599,7 +618,7 @@ const tableAction: TableActionType = {
|
|
|
599
618
|
})
|
|
600
619
|
return result
|
|
601
620
|
}
|
|
602
|
-
const allRows = flattenRows(
|
|
621
|
+
const allRows = flattenRows(localFullData.value)
|
|
603
622
|
allRows.forEach((row) => tableRef.value?.toggleRowExpansion?.(row, true))
|
|
604
623
|
},
|
|
605
624
|
collapseAll: () => {
|
|
@@ -615,7 +634,7 @@ const tableAction: TableActionType = {
|
|
|
615
634
|
})
|
|
616
635
|
return result
|
|
617
636
|
}
|
|
618
|
-
const allRows = flattenRows(
|
|
637
|
+
const allRows = flattenRows(localFullData.value)
|
|
619
638
|
allRows.forEach((row) => tableRef.value?.toggleRowExpansion?.(row, false))
|
|
620
639
|
},
|
|
621
640
|
}
|
|
@@ -625,10 +644,10 @@ defineExpose(tableAction)
|
|
|
625
644
|
const syncColumns = () => {
|
|
626
645
|
const assignIds = (cols: ProColumn[], parentKey = ''): ProColumn[] =>
|
|
627
646
|
cols.map((c, i) => {
|
|
628
|
-
const key = `${
|
|
647
|
+
const key = `${c.dataIndex}`
|
|
629
648
|
return {
|
|
630
649
|
...c,
|
|
631
|
-
|
|
650
|
+
dataIndex: key,
|
|
632
651
|
children: c.children ? assignIds(c.children, key) : undefined,
|
|
633
652
|
}
|
|
634
653
|
})
|
|
@@ -639,7 +658,7 @@ const loadData = () => {
|
|
|
639
658
|
if (props.api && effectiveProps.value.immediate !== false) {
|
|
640
659
|
fetchData(undefined)
|
|
641
660
|
} else if (props.dataSource) {
|
|
642
|
-
|
|
661
|
+
localFullData.value = [...props.dataSource]
|
|
643
662
|
if (!props.api && props.pagination !== false) {
|
|
644
663
|
pagination.value.total = props.dataSource.length
|
|
645
664
|
}
|
|
@@ -680,7 +699,10 @@ onUnmounted(() => {
|
|
|
680
699
|
|
|
681
700
|
watch(() => props.columns, syncColumns, { deep: true })
|
|
682
701
|
watch(() => props.dataSource, () => {
|
|
683
|
-
if (!props.api && props.dataSource)
|
|
702
|
+
if (!props.api && props.dataSource) {
|
|
703
|
+
localFullData.value = [...props.dataSource]
|
|
704
|
+
if (props.pagination !== false) pagination.value.total = props.dataSource.length
|
|
705
|
+
}
|
|
684
706
|
}, { deep: true })
|
|
685
707
|
watch(() => props.loading, (v) => { loading.value = v ?? false })
|
|
686
708
|
</script>
|