|
|
|
@ -11,7 +11,7 @@ |
|
|
|
:submitOnReset="true" |
|
|
|
v-bind="getFormProps" |
|
|
|
v-if="getBindValues.useSearchForm" |
|
|
|
:submitButtonOptions="{ loading }" |
|
|
|
:submitButtonOptions="{ loading: getLoading }" |
|
|
|
:tableAction="tableAction" |
|
|
|
@register="registerForm" |
|
|
|
@submit="handleSearchInfoChange" |
|
|
|
@ -35,18 +35,10 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script lang="ts"> |
|
|
|
import type { |
|
|
|
BasicTableProps, |
|
|
|
FetchParams, |
|
|
|
GetColumnsParams, |
|
|
|
TableActionType, |
|
|
|
SizeType, |
|
|
|
SorterResult, |
|
|
|
TableCustomRecord, |
|
|
|
} from './types/table'; |
|
|
|
import type { BasicTableProps, TableActionType, SizeType, SorterResult } from './types/table'; |
|
|
|
import { PaginationProps } from './types/pagination'; |
|
|
|
|
|
|
|
import { defineComponent, ref, computed, unref, watch, nextTick, toRaw } from 'vue'; |
|
|
|
import { defineComponent, ref, computed, unref, watch, nextTick } from 'vue'; |
|
|
|
import { Table } from 'ant-design-vue'; |
|
|
|
import renderTitle from './components/renderTitle'; |
|
|
|
import renderFooter from './components/renderFooter'; |
|
|
|
@ -64,51 +56,64 @@ |
|
|
|
import { useRowSelection } from './hooks/useRowSelection'; |
|
|
|
import { useTableScroll } from './hooks/useTableScroll'; |
|
|
|
import { provideTable } from './hooks/useProvinceTable'; |
|
|
|
import { useCustomRow } from './hooks/useCustomRow'; |
|
|
|
import { useTableStyle } from './hooks/useTableStyle'; |
|
|
|
|
|
|
|
import { useEventListener } from '/@/hooks/event/useEventListener'; |
|
|
|
import { basicProps } from './props'; |
|
|
|
import { ROW_KEY } from './const'; |
|
|
|
import { useExpose } from '/@/hooks/core/useExpose'; |
|
|
|
|
|
|
|
import './style/index.less'; |
|
|
|
export default defineComponent({ |
|
|
|
props: basicProps, |
|
|
|
components: { Table, BasicForm }, |
|
|
|
emits: ['fetch-success', 'fetch-error', 'selection-change', 'register'], |
|
|
|
emits: [ |
|
|
|
'fetch-success', |
|
|
|
'fetch-error', |
|
|
|
'selection-change', |
|
|
|
'register', |
|
|
|
'row-click', |
|
|
|
'row-dbClick', |
|
|
|
'row-contextmenu', |
|
|
|
'row-mouseenter', |
|
|
|
'row-mouseleave', |
|
|
|
], |
|
|
|
setup(props, { attrs, emit, slots }) { |
|
|
|
const tableElRef = ref<ComponentRef>(null); |
|
|
|
|
|
|
|
const wrapRef = ref<Nullable<HTMLDivElement>>(null); |
|
|
|
const innerPropsRef = ref<Partial<BasicTableProps>>(); |
|
|
|
|
|
|
|
const [registerForm, { getFieldsValue }] = useForm(); |
|
|
|
|
|
|
|
const getMergeProps = computed(() => { |
|
|
|
return { |
|
|
|
...props, |
|
|
|
...unref(innerPropsRef), |
|
|
|
} as BasicTableProps; |
|
|
|
const getProps = computed(() => { |
|
|
|
return { ...props, ...unref(innerPropsRef) } as BasicTableProps; |
|
|
|
}); |
|
|
|
|
|
|
|
// const getProps = computed( |
|
|
|
// (): FormProps => { |
|
|
|
// return deepMerge(toRaw(props), unref(innerPropsRef)); |
|
|
|
// } |
|
|
|
// ); |
|
|
|
|
|
|
|
const { loadingRef } = useLoading(getMergeProps); |
|
|
|
const { getPaginationRef, setPagination } = usePagination(getMergeProps); |
|
|
|
const { getColumnsRef, setColumns } = useColumns(getMergeProps, getPaginationRef); |
|
|
|
const { getDataSourceRef, setTableData, fetch, getAutoCreateKey } = useDataSource( |
|
|
|
getMergeProps, |
|
|
|
const { getLoading, setLoading } = useLoading(getProps); |
|
|
|
const { getPaginationInfo, getPagination, setPagination } = usePagination(getProps); |
|
|
|
const { getColumnsRef, getColumns, setColumns } = useColumns(getProps, getPaginationInfo); |
|
|
|
const { |
|
|
|
getDataSourceRef, |
|
|
|
getDataSource, |
|
|
|
setTableData, |
|
|
|
fetch, |
|
|
|
getRowKey, |
|
|
|
reload, |
|
|
|
getAutoCreateKey, |
|
|
|
} = useDataSource( |
|
|
|
getProps, |
|
|
|
{ |
|
|
|
getPaginationRef, |
|
|
|
loadingRef, |
|
|
|
getPaginationInfo, |
|
|
|
setLoading, |
|
|
|
setPagination, |
|
|
|
getFieldsValue, |
|
|
|
}, |
|
|
|
emit |
|
|
|
); |
|
|
|
|
|
|
|
const { getScrollRef, redoHeight } = useTableScroll(getMergeProps, tableElRef); |
|
|
|
const { getScrollRef, redoHeight } = useTableScroll(getProps, tableElRef); |
|
|
|
|
|
|
|
const { |
|
|
|
getRowSelectionRef, |
|
|
|
getSelectRows, |
|
|
|
@ -116,55 +121,58 @@ |
|
|
|
getSelectRowKeys, |
|
|
|
deleteSelectRowByKey, |
|
|
|
setSelectedRowKeys, |
|
|
|
} = useRowSelection(getMergeProps, emit); |
|
|
|
|
|
|
|
const getRowKey = computed(() => { |
|
|
|
const { rowKey } = unref(getMergeProps); |
|
|
|
} = useRowSelection(getProps, emit); |
|
|
|
|
|
|
|
return unref(getAutoCreateKey) ? ROW_KEY : rowKey; |
|
|
|
const { customRow } = useCustomRow(getProps, { |
|
|
|
setSelectedRowKeys, |
|
|
|
getSelectRowKeys, |
|
|
|
clearSelectedRowKeys, |
|
|
|
getAutoCreateKey, |
|
|
|
emit, |
|
|
|
}); |
|
|
|
|
|
|
|
const { getRowClassName } = useTableStyle(getProps); |
|
|
|
|
|
|
|
const getTitleProps = computed( |
|
|
|
(): Recordable => { |
|
|
|
const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(getProps); |
|
|
|
const hideTitle = !slots.tableTitle && !title && !slots.toolbar && !showTableSetting; |
|
|
|
if (hideTitle && !isString(title)) { |
|
|
|
return {}; |
|
|
|
} |
|
|
|
return { |
|
|
|
title: hideTitle |
|
|
|
? null |
|
|
|
: renderTitle.bind( |
|
|
|
null, |
|
|
|
title, |
|
|
|
titleHelpMessage, |
|
|
|
slots, |
|
|
|
showTableSetting, |
|
|
|
tableSetting |
|
|
|
), |
|
|
|
}; |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
const getBindValues = computed(() => { |
|
|
|
const { title, titleHelpMessage, showSummary, showTableSetting, tableSetting } = unref( |
|
|
|
getMergeProps |
|
|
|
); |
|
|
|
const hideTitle = !slots.tableTitle && !title && !slots.toolbar && !showTableSetting; |
|
|
|
const titleData: Recordable = |
|
|
|
hideTitle && !isString(title) |
|
|
|
? {} |
|
|
|
: { |
|
|
|
title: hideTitle |
|
|
|
? null |
|
|
|
: renderTitle.bind( |
|
|
|
null, |
|
|
|
title, |
|
|
|
titleHelpMessage, |
|
|
|
slots, |
|
|
|
showTableSetting, |
|
|
|
tableSetting |
|
|
|
), |
|
|
|
}; |
|
|
|
const pagination = unref(getPaginationRef); |
|
|
|
const rowSelection = unref(getRowSelectionRef); |
|
|
|
const scroll = unref(getScrollRef); |
|
|
|
const loading = unref(loadingRef); |
|
|
|
const rowKey = unref(getRowKey); |
|
|
|
const columns = unref(getColumnsRef); |
|
|
|
const dataSource = unref(getDataSourceRef); |
|
|
|
let propsData = { |
|
|
|
const { showSummary } = unref(getProps); |
|
|
|
|
|
|
|
let propsData: Recordable = { |
|
|
|
size: 'middle', |
|
|
|
...(slots.expandedRowRender ? { expandIcon: renderExpandIcon() } : {}), |
|
|
|
...attrs, |
|
|
|
...unref(getMergeProps), |
|
|
|
...titleData, |
|
|
|
scroll, |
|
|
|
loading, |
|
|
|
customRow, |
|
|
|
...unref(getProps), |
|
|
|
...unref(getTitleProps), |
|
|
|
scroll: unref(getScrollRef), |
|
|
|
loading: unref(getLoading), |
|
|
|
tableLayout: 'fixed', |
|
|
|
rowSelection, |
|
|
|
rowKey, |
|
|
|
columns, |
|
|
|
pagination, |
|
|
|
dataSource, |
|
|
|
rowSelection: unref(getRowSelectionRef), |
|
|
|
rowKey: unref(getRowKey), |
|
|
|
columns: unref(getColumnsRef), |
|
|
|
pagination: unref(getPaginationInfo), |
|
|
|
dataSource: unref(getDataSourceRef), |
|
|
|
}; |
|
|
|
if (slots.expandedRowRender) { |
|
|
|
propsData = omit(propsData, 'scroll'); |
|
|
|
@ -173,7 +181,7 @@ |
|
|
|
propsData.footer = renderFooter.bind(null, { |
|
|
|
scroll: scroll as any, |
|
|
|
columnsRef: getColumnsRef, |
|
|
|
summaryFunc: unref(getMergeProps).summaryFunc, |
|
|
|
summaryFunc: unref(getProps).summaryFunc, |
|
|
|
dataSourceRef: getDataSourceRef, |
|
|
|
rowSelectionRef: getRowSelectionRef, |
|
|
|
}); |
|
|
|
@ -182,17 +190,17 @@ |
|
|
|
}); |
|
|
|
|
|
|
|
const getFormProps = computed(() => { |
|
|
|
const { formConfig } = unref(getBindValues); |
|
|
|
const formProps: FormProps = { |
|
|
|
const { formConfig } = unref(getProps); |
|
|
|
const formProps: Partial<FormProps> = { |
|
|
|
showAdvancedButton: true, |
|
|
|
...(formConfig as FormProps), |
|
|
|
...formConfig, |
|
|
|
compact: true, |
|
|
|
}; |
|
|
|
return formProps; |
|
|
|
}); |
|
|
|
|
|
|
|
const getEmptyDataIsShowTable = computed(() => { |
|
|
|
const { emptyDataIsShowTable, useSearchForm } = unref(getMergeProps); |
|
|
|
const { emptyDataIsShowTable, useSearchForm } = unref(getProps); |
|
|
|
if (emptyDataIsShowTable || !useSearchForm) { |
|
|
|
return true; |
|
|
|
} |
|
|
|
@ -207,17 +215,8 @@ |
|
|
|
{ immediate: true } |
|
|
|
); |
|
|
|
|
|
|
|
function getRowClassName(record: TableCustomRecord, index: number) { |
|
|
|
const { striped, rowClassName } = unref(getMergeProps); |
|
|
|
if (!striped) return; |
|
|
|
if (rowClassName && isFunction(rowClassName)) { |
|
|
|
return rowClassName(record); |
|
|
|
} |
|
|
|
return (index || 0) % 2 === 1 ? 'basic-table-row__striped' : ''; |
|
|
|
} |
|
|
|
|
|
|
|
function handleSearchInfoChange(info: any) { |
|
|
|
const { handleSearchInfoFn } = unref(getMergeProps); |
|
|
|
const { handleSearchInfoFn } = unref(getProps); |
|
|
|
if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) { |
|
|
|
info = handleSearchInfoFn(info) || info; |
|
|
|
} |
|
|
|
@ -230,7 +229,7 @@ |
|
|
|
filters: Partial<Recordable<string[]>>, |
|
|
|
sorter: SorterResult |
|
|
|
) { |
|
|
|
const { clearSelectOnPageChange, sortFn } = unref(getMergeProps); |
|
|
|
const { clearSelectOnPageChange, sortFn } = unref(getProps); |
|
|
|
if (clearSelectOnPageChange) { |
|
|
|
clearSelectedRowKeys(); |
|
|
|
} |
|
|
|
@ -245,7 +244,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
function handleSummary() { |
|
|
|
if (unref(getMergeProps).showSummary) { |
|
|
|
if (unref(getProps).showSummary) { |
|
|
|
nextTick(() => { |
|
|
|
const tableEl = unref(tableElRef); |
|
|
|
if (!tableEl) return; |
|
|
|
@ -273,9 +272,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
const tableAction: TableActionType = { |
|
|
|
reload: async (opt?: FetchParams) => { |
|
|
|
await fetch(opt); |
|
|
|
}, |
|
|
|
reload, |
|
|
|
getSelectRows, |
|
|
|
clearSelectedRowKeys, |
|
|
|
getSelectRowKeys, |
|
|
|
@ -285,27 +282,11 @@ |
|
|
|
redoHeight, |
|
|
|
setSelectedRowKeys, |
|
|
|
setColumns, |
|
|
|
getPaginationRef: () => { |
|
|
|
return unref(getPaginationRef); |
|
|
|
}, |
|
|
|
getColumns: (opt?: GetColumnsParams) => { |
|
|
|
const { ignoreIndex, ignoreAction } = opt || {}; |
|
|
|
let columns = toRaw(unref(getColumnsRef)); |
|
|
|
if (ignoreIndex) { |
|
|
|
columns = columns.filter((item) => item.flag !== 'INDEX'); |
|
|
|
} |
|
|
|
if (ignoreAction) { |
|
|
|
columns = columns.filter((item) => item.flag !== 'ACTION'); |
|
|
|
} |
|
|
|
return columns; |
|
|
|
}, |
|
|
|
getDataSource: () => { |
|
|
|
return unref(getDataSourceRef); |
|
|
|
}, |
|
|
|
setLoading: (loading: boolean) => { |
|
|
|
loadingRef.value = loading; |
|
|
|
}, |
|
|
|
setLoading, |
|
|
|
getDataSource, |
|
|
|
setProps, |
|
|
|
getPaginationRef: getPagination, |
|
|
|
getColumns, |
|
|
|
getSize: () => { |
|
|
|
return unref(getBindValues).size as SizeType; |
|
|
|
}, |
|
|
|
@ -323,7 +304,7 @@ |
|
|
|
return { |
|
|
|
tableElRef, |
|
|
|
getBindValues, |
|
|
|
loading: loadingRef, |
|
|
|
getLoading, |
|
|
|
registerForm, |
|
|
|
handleSearchInfoChange, |
|
|
|
getFormProps, |
|
|
|
|
vben
6 years ago