@aspire-ui/element-component-pro 1.0.20 → 1.0.22
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-ffeb78c4]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-ffeb78c4] .el-table{width:100%!important}.ecp-pro-table__header[data-v-ffeb78c4]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-ffeb78c4]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-ffeb78c4]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-ffeb78c4]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-ffeb78c4]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-ffeb78c4]{width:100%}.ecp-pro-table__pagination[data-v-ffeb78c4]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-ffeb78c4]{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,15 @@ 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
|
+
if (!data.length) return data
|
|
254
|
+
const { page, pageSize } = pagination.value
|
|
255
|
+
const start = (page - 1) * pageSize
|
|
256
|
+
return data.slice(start, start + pageSize)
|
|
257
|
+
})
|
|
250
258
|
const rawDataSource = ref<Record<string, unknown>>({})
|
|
251
259
|
const innerColumns = ref<ProColumn[]>([])
|
|
252
260
|
const innerProps = ref<Partial<ProTableProps>>({})
|
|
@@ -455,7 +463,7 @@ const handleSelectAll = (checked: boolean) => {
|
|
|
455
463
|
const fetchData = async (opt?: FetchParams) => {
|
|
456
464
|
if (!props.api) {
|
|
457
465
|
if (props.dataSource) return
|
|
458
|
-
|
|
466
|
+
localFullData.value = []
|
|
459
467
|
return
|
|
460
468
|
}
|
|
461
469
|
loading.value = true
|
|
@@ -479,10 +487,11 @@ const fetchData = async (opt?: FetchParams) => {
|
|
|
479
487
|
const data = (props.afterFetch ? props.afterFetch(res) : res) as Record<string, unknown>
|
|
480
488
|
const list = (data[listField] ?? data.items ?? data.list ?? []) as unknown[]
|
|
481
489
|
const total = (data[totalField] ?? 0) as number
|
|
482
|
-
|
|
490
|
+
localFullData.value = list as Record<string, unknown>[]
|
|
483
491
|
pagination.value.total = total
|
|
484
492
|
emit('fetch-success', { items: list, total })
|
|
485
493
|
} catch (e) {
|
|
494
|
+
localFullData.value = []
|
|
486
495
|
emit('fetch-error', e)
|
|
487
496
|
} finally {
|
|
488
497
|
loading.value = false
|
|
@@ -510,17 +519,19 @@ const handleRowDblclick = (row: Record<string, unknown>, _column: unknown, event
|
|
|
510
519
|
const handleSortChange = ({ prop, order }: { prop: string; order: string }) => emit('sort-change', { prop, order })
|
|
511
520
|
const handleExpandChange = (row: Record<string, unknown>, expanded: boolean | Record<string, unknown>[]) => emit('expand-change', row, expanded)
|
|
512
521
|
|
|
513
|
-
const findRowIndex = (key: string | number) =>
|
|
514
|
-
innerData.value.findIndex((r) => r[rowKeyField.value] === key)
|
|
515
|
-
|
|
516
522
|
const tableAction: TableActionType = {
|
|
517
523
|
setProps: (p) => { innerProps.value = { ...innerProps.value, ...p } },
|
|
518
524
|
reload: (opt) => fetchData(opt),
|
|
519
525
|
redoHeight: () => { tableRef.value?.doLayout?.() },
|
|
520
526
|
setLoading: (v) => { loading.value = v },
|
|
521
|
-
|
|
527
|
+
/** 返回全量数据（API 模式为服务端返回的当前页数据，本地模式为原始全量数据） */
|
|
528
|
+
getDataSource: () => localFullData.value,
|
|
522
529
|
getRawDataSource: () => rawDataSource.value,
|
|
523
|
-
|
|
530
|
+
/** 设置本地全量数据，同时同步 total */
|
|
531
|
+
setTableData: (data) => {
|
|
532
|
+
localFullData.value = data ?? []
|
|
533
|
+
if (props.pagination !== false) pagination.value.total = (data ?? []).length
|
|
534
|
+
},
|
|
524
535
|
getColumns: () => innerColumns.value,
|
|
525
536
|
setColumns: (cols) => {
|
|
526
537
|
if (Array.isArray(cols) && cols.length > 0 && typeof cols[0] === 'string') {
|
|
@@ -542,7 +553,7 @@ const tableAction: TableActionType = {
|
|
|
542
553
|
clearSelectedRowKeys: () => { selectedRows.value = []; emitSelectionChange() },
|
|
543
554
|
setSelectedRowKeys: (keys) => {
|
|
544
555
|
const keySet = new Set(keys)
|
|
545
|
-
const rows =
|
|
556
|
+
const rows = localFullData.value.filter((r) => keySet.has(r[rowKeyField.value] as string | number))
|
|
546
557
|
keys.forEach((k) => {
|
|
547
558
|
if (!rows.some((r) => r[rowKeyField.value] === k)) {
|
|
548
559
|
rows.push({ [rowKeyField.value]: k } as Record<string, unknown>)
|
|
@@ -555,28 +566,33 @@ const tableAction: TableActionType = {
|
|
|
555
566
|
selectedRows.value = selectedRows.value.filter((r) => r[rowKeyField.value] !== key)
|
|
556
567
|
emitSelectionChange()
|
|
557
568
|
},
|
|
569
|
+
/** index 为当前页索引，自动转换为全量索引 */
|
|
558
570
|
updateTableData: (index, key, value) => {
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
571
|
+
const { page, pageSize } = pagination.value
|
|
572
|
+
const fullIndex = (page - 1) * pageSize + index
|
|
573
|
+
if (fullIndex < 0 || fullIndex >= localFullData.value.length) return
|
|
574
|
+
localFullData.value = [...localFullData.value]
|
|
575
|
+
localFullData.value[fullIndex] = { ...localFullData.value[fullIndex], [key]: value }
|
|
562
576
|
},
|
|
563
577
|
updateTableDataRecord: (rowKey, record) => {
|
|
564
|
-
const idx =
|
|
578
|
+
const idx = localFullData.value.findIndex((r) => r[rowKeyField.value] === rowKey)
|
|
565
579
|
if (idx < 0) return
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
return
|
|
580
|
+
localFullData.value = [...localFullData.value]
|
|
581
|
+
localFullData.value[idx] = { ...localFullData.value[idx], ...record }
|
|
582
|
+
return localFullData.value[idx]
|
|
569
583
|
},
|
|
570
584
|
deleteTableDataRecord: (rowKey) => {
|
|
571
585
|
const keys = Array.isArray(rowKey) ? rowKey : [rowKey]
|
|
572
586
|
const keySet = new Set(keys)
|
|
573
|
-
|
|
587
|
+
localFullData.value = localFullData.value.filter((r) => !keySet.has(r[rowKeyField.value] as string | number))
|
|
588
|
+
if (props.pagination !== false) pagination.value.total = localFullData.value.length
|
|
574
589
|
},
|
|
575
590
|
insertTableDataRecord: (record, index) => {
|
|
576
|
-
const arr = [...
|
|
591
|
+
const arr = [...localFullData.value]
|
|
577
592
|
if (index == null || index >= arr.length) arr.push(record)
|
|
578
593
|
else arr.splice(index, 0, record)
|
|
579
|
-
|
|
594
|
+
localFullData.value = arr
|
|
595
|
+
if (props.pagination !== false) pagination.value.total = localFullData.value.length
|
|
580
596
|
return record
|
|
581
597
|
},
|
|
582
598
|
getPaginationRef: () =>
|
|
@@ -599,7 +615,7 @@ const tableAction: TableActionType = {
|
|
|
599
615
|
})
|
|
600
616
|
return result
|
|
601
617
|
}
|
|
602
|
-
const allRows = flattenRows(
|
|
618
|
+
const allRows = flattenRows(localFullData.value)
|
|
603
619
|
allRows.forEach((row) => tableRef.value?.toggleRowExpansion?.(row, true))
|
|
604
620
|
},
|
|
605
621
|
collapseAll: () => {
|
|
@@ -615,7 +631,7 @@ const tableAction: TableActionType = {
|
|
|
615
631
|
})
|
|
616
632
|
return result
|
|
617
633
|
}
|
|
618
|
-
const allRows = flattenRows(
|
|
634
|
+
const allRows = flattenRows(localFullData.value)
|
|
619
635
|
allRows.forEach((row) => tableRef.value?.toggleRowExpansion?.(row, false))
|
|
620
636
|
},
|
|
621
637
|
}
|
|
@@ -639,7 +655,7 @@ const loadData = () => {
|
|
|
639
655
|
if (props.api && effectiveProps.value.immediate !== false) {
|
|
640
656
|
fetchData(undefined)
|
|
641
657
|
} else if (props.dataSource) {
|
|
642
|
-
|
|
658
|
+
localFullData.value = [...props.dataSource]
|
|
643
659
|
if (!props.api && props.pagination !== false) {
|
|
644
660
|
pagination.value.total = props.dataSource.length
|
|
645
661
|
}
|
|
@@ -680,7 +696,10 @@ onUnmounted(() => {
|
|
|
680
696
|
|
|
681
697
|
watch(() => props.columns, syncColumns, { deep: true })
|
|
682
698
|
watch(() => props.dataSource, () => {
|
|
683
|
-
if (!props.api && props.dataSource)
|
|
699
|
+
if (!props.api && props.dataSource) {
|
|
700
|
+
localFullData.value = [...props.dataSource]
|
|
701
|
+
if (props.pagination !== false) pagination.value.total = props.dataSource.length
|
|
702
|
+
}
|
|
684
703
|
}, { deep: true })
|
|
685
704
|
watch(() => props.loading, (v) => { loading.value = v ?? false })
|
|
686
705
|
</script>
|