Merge branch 'szh' into dev
commit
04f17dd28c
@ -1,457 +1,456 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="wrapRef" :class="getWrapperClass" class="basic-table-search-form">
|
<div ref="wrapRef" :class="getWrapperClass" class="basic-table-search-form">
|
||||||
<BasicForm
|
<BasicForm v-if="getBindValues.useSearchForm" v-show="showSearchForm" ref="formRef" submit-on-reset
|
||||||
v-if="getBindValues.useSearchForm"
|
v-bind="getFormProps" :fetch="fetch" :table-action="tableAction" :autoSubmitOnEnter="true"
|
||||||
v-show="showSearchForm"
|
@register="registerForm" @submit="handleSearchInfoChange" @advanced-change="redoHeight">
|
||||||
ref="formRef"
|
|
||||||
submit-on-reset
|
|
||||||
v-bind="getFormProps"
|
|
||||||
:fetch="fetch"
|
|
||||||
:table-action="tableAction"
|
|
||||||
:autoSubmitOnEnter="true"
|
|
||||||
@register="registerForm"
|
|
||||||
@submit="handleSearchInfoChange"
|
|
||||||
@advanced-change="redoHeight"
|
|
||||||
>
|
|
||||||
<template v-for="item in getFormSlotKeys" #[replaceFormSlotKey(item)]="data">
|
<template v-for="item in getFormSlotKeys" #[replaceFormSlotKey(item)]="data">
|
||||||
<slot :name="item" v-bind="data || {}"></slot>
|
<slot :name="item" v-bind="data || {}"></slot>
|
||||||
</template>
|
</template>
|
||||||
</BasicForm>
|
</BasicForm>
|
||||||
|
<div class="table-wrapper" >
|
||||||
|
<slot name="left" class="left" ></slot>
|
||||||
|
<Table class="basic-table" v-show="getEmptyDataIsShowTable" ref="tableElRef" v-bind="getBindValues" :row-class-name="getRowClassName"
|
||||||
|
@change="handleTableChange" @resize-column="resizeColumn">
|
||||||
|
<template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
|
||||||
|
<slot :name="item" v-bind="data || {}"></slot>
|
||||||
|
</template>
|
||||||
|
<template #headerCell="{ column }">
|
||||||
|
<HeaderCell :column="column" />
|
||||||
|
</template>
|
||||||
|
<!-- 增加对antdv3.x兼容 -->
|
||||||
|
<template #bodyCell="data">
|
||||||
|
<slot name="bodyCell" v-bind="data || {}"></slot>
|
||||||
|
</template>
|
||||||
|
<!-- <template #[`header-${column.dataIndex}`] v-for="(column, index) in columns" :key="index">-->
|
||||||
|
<!-- <HeaderCell :column="column" />-->
|
||||||
|
<!-- </template>-->
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Table
|
|
||||||
v-show="getEmptyDataIsShowTable"
|
|
||||||
ref="tableElRef"
|
|
||||||
v-bind="getBindValues"
|
|
||||||
:row-class-name="getRowClassName"
|
|
||||||
@change="handleTableChange"
|
|
||||||
@resize-column="resizeColumn"
|
|
||||||
>
|
|
||||||
<template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
|
|
||||||
<slot :name="item" v-bind="data || {}"></slot>
|
|
||||||
</template>
|
|
||||||
<template #headerCell="{ column }">
|
|
||||||
<HeaderCell :column="column" />
|
|
||||||
</template>
|
|
||||||
<!-- 增加对antdv3.x兼容 -->
|
|
||||||
<template #bodyCell="data">
|
|
||||||
<slot name="bodyCell" v-bind="data || {}"></slot>
|
|
||||||
</template>
|
|
||||||
<!-- <template #[`header-${column.dataIndex}`] v-for="(column, index) in columns" :key="index">-->
|
|
||||||
<!-- <HeaderCell :column="column" />-->
|
|
||||||
<!-- </template>-->
|
|
||||||
</Table>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam } from './types/table'
|
import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam } from './types/table'
|
||||||
|
|
||||||
import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue'
|
import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue'
|
||||||
import { Table } from 'ant-design-vue'
|
import { Table } from 'ant-design-vue'
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||||
import { PageWrapperFixedHeightKey } from '/@/components/Page'
|
import { PageWrapperFixedHeightKey } from '/@/components/Page'
|
||||||
import HeaderCell from './components/HeaderCell.vue'
|
import HeaderCell from './components/HeaderCell.vue'
|
||||||
import { InnerHandlers } from './types/table'
|
import { InnerHandlers } from './types/table'
|
||||||
|
|
||||||
import { usePagination } from './hooks/usePagination'
|
import { usePagination } from './hooks/usePagination'
|
||||||
import { useColumns } from './hooks/useColumns'
|
import { useColumns } from './hooks/useColumns'
|
||||||
import { useDataSource } from './hooks/useDataSource'
|
import { useDataSource } from './hooks/useDataSource'
|
||||||
import { useLoading } from './hooks/useLoading'
|
import { useLoading } from './hooks/useLoading'
|
||||||
import { useRowSelection } from './hooks/useRowSelection'
|
import { useRowSelection } from './hooks/useRowSelection'
|
||||||
import { useTableScroll } from './hooks/useTableScroll'
|
import { useTableScroll } from './hooks/useTableScroll'
|
||||||
import { useTableScrollTo } from './hooks/useScrollTo'
|
import { useTableScrollTo } from './hooks/useScrollTo'
|
||||||
import { useCustomRow } from './hooks/useCustomRow'
|
import { useCustomRow } from './hooks/useCustomRow'
|
||||||
import { useTableStyle } from './hooks/useTableStyle'
|
import { useTableStyle } from './hooks/useTableStyle'
|
||||||
import { useTableHeader } from './hooks/useTableHeader'
|
import { useTableHeader } from './hooks/useTableHeader'
|
||||||
import { useTableExpand } from './hooks/useTableExpand'
|
import { useTableExpand } from './hooks/useTableExpand'
|
||||||
import { createTableContext } from './hooks/useTableContext'
|
import { createTableContext } from './hooks/useTableContext'
|
||||||
import { useTableFooter } from './hooks/useTableFooter'
|
import { useTableFooter } from './hooks/useTableFooter'
|
||||||
import { useTableForm } from './hooks/useTableForm'
|
import { useTableForm } from './hooks/useTableForm'
|
||||||
import { useDesign } from '/@/hooks/web/useDesign'
|
import { useDesign } from '/@/hooks/web/useDesign'
|
||||||
|
|
||||||
import { omit } from 'lodash-es'
|
import { omit } from 'lodash-es'
|
||||||
import { basicProps } from './props'
|
import { basicProps } from './props'
|
||||||
import { isFunction } from '/@/utils/is'
|
import { isFunction } from '/@/utils/is'
|
||||||
import { warn } from '/@/utils/log'
|
import { warn } from '/@/utils/log'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'BasicTable',
|
name: 'BasicTable',
|
||||||
components: {
|
components: {
|
||||||
Table,
|
Table,
|
||||||
BasicForm,
|
BasicForm,
|
||||||
HeaderCell,
|
HeaderCell,
|
||||||
},
|
},
|
||||||
props: basicProps,
|
props: basicProps,
|
||||||
emits: [
|
emits: [
|
||||||
'fetch-success',
|
'fetch-success',
|
||||||
'fetch-error',
|
'fetch-error',
|
||||||
'selection-change',
|
'selection-change',
|
||||||
'register',
|
'register',
|
||||||
'row-click',
|
'row-click',
|
||||||
'row-dbClick',
|
'row-dbClick',
|
||||||
'row-contextmenu',
|
'row-contextmenu',
|
||||||
'row-mouseenter',
|
'row-mouseenter',
|
||||||
'row-mouseleave',
|
'row-mouseleave',
|
||||||
'edit-end',
|
'edit-end',
|
||||||
'edit-cancel',
|
'edit-cancel',
|
||||||
'edit-row-end',
|
'edit-row-end',
|
||||||
'edit-change',
|
'edit-change',
|
||||||
'expanded-rows-change',
|
'expanded-rows-change',
|
||||||
'change',
|
'change',
|
||||||
'columns-change',
|
'columns-change',
|
||||||
],
|
],
|
||||||
setup(props, { attrs, emit, slots, expose }) {
|
setup(props, { attrs, emit, slots, expose }) {
|
||||||
const tableElRef = ref(null)
|
const tableElRef = ref(null)
|
||||||
const tableData = ref<Recordable[]>([])
|
const tableData = ref<Recordable[]>([])
|
||||||
|
|
||||||
const wrapRef = ref(null)
|
const wrapRef = ref(null)
|
||||||
const formRef = ref(null)
|
const formRef = ref(null)
|
||||||
const innerPropsRef = ref<Partial<BasicTableProps>>()
|
const innerPropsRef = ref<Partial<BasicTableProps>>()
|
||||||
|
|
||||||
const { prefixCls } = useDesign('basic-table')
|
const { prefixCls } = useDesign('basic-table')
|
||||||
const [registerForm, formActions] = useForm()
|
const [registerForm, formActions] = useForm()
|
||||||
|
|
||||||
const getProps = computed(() => {
|
const getProps = computed(() => {
|
||||||
return { ...props, ...unref(innerPropsRef) } as BasicTableProps
|
return { ...props, ...unref(innerPropsRef) } as BasicTableProps
|
||||||
})
|
})
|
||||||
|
|
||||||
const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false)
|
const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false)
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
unref(isFixedHeightPage) &&
|
unref(isFixedHeightPage) &&
|
||||||
props.canResize &&
|
props.canResize &&
|
||||||
warn(
|
warn(
|
||||||
"'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)",
|
"'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)",
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
const { getLoading, setLoading } = useLoading(getProps)
|
const { getLoading, setLoading } = useLoading(getProps)
|
||||||
const {
|
const {
|
||||||
|
getPaginationInfo,
|
||||||
|
getPagination,
|
||||||
|
setPagination,
|
||||||
|
setShowPagination,
|
||||||
|
getShowPagination,
|
||||||
|
} = usePagination(getProps)
|
||||||
|
|
||||||
|
const {
|
||||||
|
getRowSelection,
|
||||||
|
getRowSelectionRef,
|
||||||
|
getSelectRows,
|
||||||
|
setSelectedRows,
|
||||||
|
clearSelectedRowKeys,
|
||||||
|
getSelectRowKeys,
|
||||||
|
deleteSelectRowByKey,
|
||||||
|
setSelectedRowKeys,
|
||||||
|
} = useRowSelection(getProps, tableData, emit)
|
||||||
|
|
||||||
|
const {
|
||||||
|
handleTableChange: onTableChange,
|
||||||
|
getDataSourceRef,
|
||||||
|
getDataSource,
|
||||||
|
getRawDataSource,
|
||||||
|
setTableData,
|
||||||
|
updateTableDataRecord,
|
||||||
|
deleteTableDataRecord,
|
||||||
|
insertTableDataRecord,
|
||||||
|
findTableDataRecord,
|
||||||
|
fetch,
|
||||||
|
getRowKey,
|
||||||
|
reload,
|
||||||
|
getAutoCreateKey,
|
||||||
|
updateTableData,
|
||||||
|
} = useDataSource(
|
||||||
|
getProps,
|
||||||
|
{
|
||||||
|
tableData,
|
||||||
getPaginationInfo,
|
getPaginationInfo,
|
||||||
getPagination,
|
setLoading,
|
||||||
setPagination,
|
setPagination,
|
||||||
setShowPagination,
|
getFieldsValue: formActions.getFieldsValue,
|
||||||
getShowPagination,
|
|
||||||
} = usePagination(getProps)
|
|
||||||
|
|
||||||
const {
|
|
||||||
getRowSelection,
|
|
||||||
getRowSelectionRef,
|
|
||||||
getSelectRows,
|
|
||||||
setSelectedRows,
|
|
||||||
clearSelectedRowKeys,
|
|
||||||
getSelectRowKeys,
|
|
||||||
deleteSelectRowByKey,
|
|
||||||
setSelectedRowKeys,
|
|
||||||
} = useRowSelection(getProps, tableData, emit)
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleTableChange: onTableChange,
|
|
||||||
getDataSourceRef,
|
|
||||||
getDataSource,
|
|
||||||
getRawDataSource,
|
|
||||||
setTableData,
|
|
||||||
updateTableDataRecord,
|
|
||||||
deleteTableDataRecord,
|
|
||||||
insertTableDataRecord,
|
|
||||||
findTableDataRecord,
|
|
||||||
fetch,
|
|
||||||
getRowKey,
|
|
||||||
reload,
|
|
||||||
getAutoCreateKey,
|
|
||||||
updateTableData,
|
|
||||||
} = useDataSource(
|
|
||||||
getProps,
|
|
||||||
{
|
|
||||||
tableData,
|
|
||||||
getPaginationInfo,
|
|
||||||
setLoading,
|
|
||||||
setPagination,
|
|
||||||
getFieldsValue: formActions.getFieldsValue,
|
|
||||||
clearSelectedRowKeys,
|
|
||||||
},
|
|
||||||
emit,
|
|
||||||
)
|
|
||||||
|
|
||||||
function handleTableChange(...args) {
|
|
||||||
onTableChange.call(undefined, ...args)
|
|
||||||
emit('change', ...args)
|
|
||||||
// 解决通过useTable注册onChange时不起作用的问题
|
|
||||||
const { onChange } = unref(getProps)
|
|
||||||
onChange && isFunction(onChange) && onChange.call(undefined, ...args)
|
|
||||||
}
|
|
||||||
|
|
||||||
const {
|
|
||||||
getViewColumns,
|
|
||||||
getColumns,
|
|
||||||
setCacheColumnsByField,
|
|
||||||
setColumns,
|
|
||||||
getColumnsRef,
|
|
||||||
getCacheColumns,
|
|
||||||
} = useColumns(getProps, getPaginationInfo)
|
|
||||||
|
|
||||||
const { getScrollRef, redoHeight } = useTableScroll(
|
|
||||||
getProps,
|
|
||||||
tableElRef,
|
|
||||||
getColumnsRef,
|
|
||||||
getRowSelectionRef,
|
|
||||||
getDataSourceRef,
|
|
||||||
wrapRef,
|
|
||||||
formRef,
|
|
||||||
)
|
|
||||||
|
|
||||||
const { scrollTo } = useTableScrollTo(tableElRef, getDataSourceRef)
|
|
||||||
|
|
||||||
const { customRow } = useCustomRow(getProps, {
|
|
||||||
setSelectedRowKeys,
|
|
||||||
getSelectRowKeys,
|
|
||||||
clearSelectedRowKeys,
|
clearSelectedRowKeys,
|
||||||
getAutoCreateKey,
|
},
|
||||||
emit,
|
emit,
|
||||||
})
|
)
|
||||||
|
|
||||||
|
function handleTableChange(...args) {
|
||||||
|
onTableChange.call(undefined, ...args)
|
||||||
|
emit('change', ...args)
|
||||||
|
// 解决通过useTable注册onChange时不起作用的问题
|
||||||
|
const { onChange } = unref(getProps)
|
||||||
|
onChange && isFunction(onChange) && onChange.call(undefined, ...args)
|
||||||
|
}
|
||||||
|
|
||||||
const { getRowClassName } = useTableStyle(getProps, prefixCls)
|
const {
|
||||||
|
getViewColumns,
|
||||||
|
getColumns,
|
||||||
|
setCacheColumnsByField,
|
||||||
|
setColumns,
|
||||||
|
getColumnsRef,
|
||||||
|
getCacheColumns,
|
||||||
|
} = useColumns(getProps, getPaginationInfo)
|
||||||
|
|
||||||
|
const { getScrollRef, redoHeight } = useTableScroll(
|
||||||
|
getProps,
|
||||||
|
tableElRef,
|
||||||
|
getColumnsRef,
|
||||||
|
getRowSelectionRef,
|
||||||
|
getDataSourceRef,
|
||||||
|
wrapRef,
|
||||||
|
formRef,
|
||||||
|
)
|
||||||
|
|
||||||
|
const { scrollTo } = useTableScrollTo(tableElRef, getDataSourceRef)
|
||||||
|
|
||||||
|
const { customRow } = useCustomRow(getProps, {
|
||||||
|
setSelectedRowKeys,
|
||||||
|
getSelectRowKeys,
|
||||||
|
clearSelectedRowKeys,
|
||||||
|
getAutoCreateKey,
|
||||||
|
emit,
|
||||||
|
})
|
||||||
|
|
||||||
|
const { getRowClassName } = useTableStyle(getProps, prefixCls)
|
||||||
|
|
||||||
|
const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
|
||||||
|
getProps,
|
||||||
|
tableData,
|
||||||
|
emit,
|
||||||
|
)
|
||||||
|
|
||||||
|
const handlers: InnerHandlers = {
|
||||||
|
onColumnsChange: (data: ColumnChangeParam[]) => {
|
||||||
|
emit('columns-change', data)
|
||||||
|
// support useTable
|
||||||
|
unref(getProps).onColumnsChange?.(data)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
|
const { getHeaderProps } = useTableHeader(getProps, slots, handlers)
|
||||||
getProps,
|
|
||||||
tableData,
|
const { getFooterProps } = useTableFooter(
|
||||||
emit,
|
getProps,
|
||||||
)
|
getScrollRef,
|
||||||
|
tableElRef,
|
||||||
const handlers: InnerHandlers = {
|
getDataSourceRef,
|
||||||
onColumnsChange: (data: ColumnChangeParam[]) => {
|
)
|
||||||
emit('columns-change', data)
|
|
||||||
// support useTable
|
const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
|
||||||
unref(getProps).onColumnsChange?.(data)
|
useTableForm(getProps, slots, fetch, getLoading)
|
||||||
},
|
const getBindValues = computed(() => {
|
||||||
|
const dataSource = unref(getDataSourceRef)
|
||||||
|
let propsData: Recordable = {
|
||||||
|
...attrs,
|
||||||
|
customRow,
|
||||||
|
...unref(getProps),
|
||||||
|
...unref(getHeaderProps),
|
||||||
|
scroll: unref(getScrollRef),
|
||||||
|
loading: unref(getLoading),
|
||||||
|
tableLayout: 'fixed',
|
||||||
|
rowSelection: unref(getRowSelectionRef),
|
||||||
|
rowKey: unref(getRowKey),
|
||||||
|
columns: toRaw(unref(getViewColumns)),
|
||||||
|
pagination: toRaw(unref(getPaginationInfo)),
|
||||||
|
dataSource,
|
||||||
|
footer: unref(getFooterProps),
|
||||||
|
...unref(getExpandOption),
|
||||||
}
|
}
|
||||||
|
// if (slots.expandedRowRender) {
|
||||||
|
// propsData = omit(propsData, 'scroll');
|
||||||
|
// }
|
||||||
|
|
||||||
|
propsData = omit(propsData, ['class', 'onChange'])
|
||||||
|
return propsData
|
||||||
|
})
|
||||||
|
|
||||||
|
const getWrapperClass = computed(() => {
|
||||||
|
const values = unref(getBindValues)
|
||||||
|
return [
|
||||||
|
prefixCls,
|
||||||
|
attrs.class,
|
||||||
|
{
|
||||||
|
[`${prefixCls}-form-container`]: values.useSearchForm,
|
||||||
|
[`${prefixCls}--inset`]: values.inset,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
const { getHeaderProps } = useTableHeader(getProps, slots, handlers)
|
const getEmptyDataIsShowTable = computed(() => {
|
||||||
|
const { emptyDataIsShowTable, useSearchForm } = unref(getProps)
|
||||||
const { getFooterProps } = useTableFooter(
|
if (emptyDataIsShowTable || !useSearchForm) {
|
||||||
getProps,
|
return true
|
||||||
getScrollRef,
|
|
||||||
tableElRef,
|
|
||||||
getDataSourceRef,
|
|
||||||
)
|
|
||||||
|
|
||||||
const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
|
|
||||||
useTableForm(getProps, slots, fetch, getLoading)
|
|
||||||
const getBindValues = computed(() => {
|
|
||||||
const dataSource = unref(getDataSourceRef)
|
|
||||||
let propsData: Recordable = {
|
|
||||||
...attrs,
|
|
||||||
customRow,
|
|
||||||
...unref(getProps),
|
|
||||||
...unref(getHeaderProps),
|
|
||||||
scroll: unref(getScrollRef),
|
|
||||||
loading: unref(getLoading),
|
|
||||||
tableLayout: 'fixed',
|
|
||||||
rowSelection: unref(getRowSelectionRef),
|
|
||||||
rowKey: unref(getRowKey),
|
|
||||||
columns: toRaw(unref(getViewColumns)),
|
|
||||||
pagination: toRaw(unref(getPaginationInfo)),
|
|
||||||
dataSource,
|
|
||||||
footer: unref(getFooterProps),
|
|
||||||
...unref(getExpandOption),
|
|
||||||
}
|
|
||||||
// if (slots.expandedRowRender) {
|
|
||||||
// propsData = omit(propsData, 'scroll');
|
|
||||||
// }
|
|
||||||
|
|
||||||
propsData = omit(propsData, ['class', 'onChange'])
|
|
||||||
return propsData
|
|
||||||
})
|
|
||||||
|
|
||||||
const getWrapperClass = computed(() => {
|
|
||||||
const values = unref(getBindValues)
|
|
||||||
return [
|
|
||||||
prefixCls,
|
|
||||||
attrs.class,
|
|
||||||
{
|
|
||||||
[`${prefixCls}-form-container`]: values.useSearchForm,
|
|
||||||
[`${prefixCls}--inset`]: values.inset,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
const getEmptyDataIsShowTable = computed(() => {
|
|
||||||
const { emptyDataIsShowTable, useSearchForm } = unref(getProps)
|
|
||||||
if (emptyDataIsShowTable || !useSearchForm) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return !!unref(getDataSourceRef).length
|
|
||||||
})
|
|
||||||
|
|
||||||
function setProps(props: Partial<BasicTableProps>) {
|
|
||||||
innerPropsRef.value = { ...unref(innerPropsRef), ...props }
|
|
||||||
}
|
}
|
||||||
|
return !!unref(getDataSourceRef).length
|
||||||
|
})
|
||||||
|
|
||||||
const tableAction: TableActionType = {
|
function setProps(props: Partial<BasicTableProps>) {
|
||||||
reload,
|
innerPropsRef.value = { ...unref(innerPropsRef), ...props }
|
||||||
getSelectRows,
|
}
|
||||||
setSelectedRows,
|
|
||||||
clearSelectedRowKeys,
|
|
||||||
getSelectRowKeys,
|
|
||||||
deleteSelectRowByKey,
|
|
||||||
setPagination,
|
|
||||||
setTableData,
|
|
||||||
updateTableDataRecord,
|
|
||||||
deleteTableDataRecord,
|
|
||||||
insertTableDataRecord,
|
|
||||||
findTableDataRecord,
|
|
||||||
redoHeight,
|
|
||||||
setSelectedRowKeys,
|
|
||||||
setColumns,
|
|
||||||
setLoading,
|
|
||||||
getDataSource,
|
|
||||||
getRawDataSource,
|
|
||||||
setProps,
|
|
||||||
getRowSelection,
|
|
||||||
getPaginationRef: getPagination,
|
|
||||||
getColumns,
|
|
||||||
getCacheColumns,
|
|
||||||
emit,
|
|
||||||
updateTableData,
|
|
||||||
setShowPagination,
|
|
||||||
getShowPagination,
|
|
||||||
setCacheColumnsByField,
|
|
||||||
expandAll,
|
|
||||||
expandRows,
|
|
||||||
collapseAll,
|
|
||||||
scrollTo,
|
|
||||||
getSize: () => {
|
|
||||||
return unref(getBindValues).size as SizeType
|
|
||||||
},
|
|
||||||
}
|
|
||||||
createTableContext({ ...tableAction, wrapRef, getBindValues })
|
|
||||||
|
|
||||||
expose(tableAction)
|
const tableAction: TableActionType = {
|
||||||
|
reload,
|
||||||
|
getSelectRows,
|
||||||
|
setSelectedRows,
|
||||||
|
clearSelectedRowKeys,
|
||||||
|
getSelectRowKeys,
|
||||||
|
deleteSelectRowByKey,
|
||||||
|
setPagination,
|
||||||
|
setTableData,
|
||||||
|
updateTableDataRecord,
|
||||||
|
deleteTableDataRecord,
|
||||||
|
insertTableDataRecord,
|
||||||
|
findTableDataRecord,
|
||||||
|
redoHeight,
|
||||||
|
setSelectedRowKeys,
|
||||||
|
setColumns,
|
||||||
|
setLoading,
|
||||||
|
getDataSource,
|
||||||
|
getRawDataSource,
|
||||||
|
setProps,
|
||||||
|
getRowSelection,
|
||||||
|
getPaginationRef: getPagination,
|
||||||
|
getColumns,
|
||||||
|
getCacheColumns,
|
||||||
|
emit,
|
||||||
|
updateTableData,
|
||||||
|
setShowPagination,
|
||||||
|
getShowPagination,
|
||||||
|
setCacheColumnsByField,
|
||||||
|
expandAll,
|
||||||
|
expandRows,
|
||||||
|
collapseAll,
|
||||||
|
scrollTo,
|
||||||
|
getSize: () => {
|
||||||
|
return unref(getBindValues).size as SizeType
|
||||||
|
},
|
||||||
|
}
|
||||||
|
createTableContext({ ...tableAction, wrapRef, getBindValues })
|
||||||
|
|
||||||
emit('register', tableAction, formActions)
|
expose(tableAction)
|
||||||
const resizeColumn = (w, col) => {
|
|
||||||
setCacheColumnsByField(col.dataIndex, { width: w })
|
emit('register', tableAction, formActions)
|
||||||
}
|
const resizeColumn = (w, col) => {
|
||||||
return {
|
setCacheColumnsByField(col.dataIndex, { width: w })
|
||||||
formRef,
|
}
|
||||||
tableElRef,
|
return {
|
||||||
getBindValues,
|
formRef,
|
||||||
getLoading,
|
tableElRef,
|
||||||
registerForm,
|
getBindValues,
|
||||||
handleSearchInfoChange,
|
getLoading,
|
||||||
getEmptyDataIsShowTable,
|
registerForm,
|
||||||
handleTableChange,
|
handleSearchInfoChange,
|
||||||
getRowClassName,
|
getEmptyDataIsShowTable,
|
||||||
wrapRef,
|
handleTableChange,
|
||||||
tableAction,
|
getRowClassName,
|
||||||
redoHeight,
|
wrapRef,
|
||||||
fetch,
|
tableAction,
|
||||||
getFormProps: getFormProps as any,
|
redoHeight,
|
||||||
replaceFormSlotKey,
|
fetch,
|
||||||
getFormSlotKeys,
|
getFormProps: getFormProps as any,
|
||||||
getWrapperClass,
|
replaceFormSlotKey,
|
||||||
columns: getViewColumns,
|
getFormSlotKeys,
|
||||||
resizeColumn
|
getWrapperClass,
|
||||||
}
|
columns: getViewColumns,
|
||||||
},
|
resizeColumn
|
||||||
})
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@border-color: #cecece4d;
|
@border-color: #cecece4d;
|
||||||
|
|
||||||
@prefix-cls: ~'@{namespace}-basic-table';
|
@prefix-cls: ~'@{namespace}-basic-table';
|
||||||
|
|
||||||
[data-theme='dark'] {
|
[data-theme='dark'] {
|
||||||
.ant-table-tbody > tr:hover.ant-table-row-selected > td,
|
|
||||||
.ant-table-tbody > tr.ant-table-row-selected td {
|
.ant-table-tbody>tr:hover.ant-table-row-selected>td,
|
||||||
background-color: #262626;
|
.ant-table-tbody>tr.ant-table-row-selected td {
|
||||||
}
|
background-color: #262626;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&-row__striped {
|
&-row__striped {
|
||||||
td {
|
td {
|
||||||
background-color: @app-content-background;
|
background-color: @app-content-background;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-form-container {
|
&-form-container {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
.ant-form {
|
.ant-form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px 8px 10px;
|
padding: 10px 8px 10px;
|
||||||
background-color: #F5F9FC;
|
background-color: #F5F9FC;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ant-tag {
|
.ant-tag {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-wrapper {
|
.ant-table-wrapper {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background-color: @component-background;
|
background-color: @component-background;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
.ant-table.ant-table-bordered .ant-table-title {
|
|
||||||
border: none !important;
|
.ant-table.ant-table-bordered .ant-table-title {
|
||||||
}
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ant-table {
|
.ant-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
&-title {
|
|
||||||
display: flex;
|
|
||||||
padding: 8px 6px;
|
|
||||||
border-bottom: none;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
//.ant-table-tbody > tr.ant-table-row-selected td {
|
&-title {
|
||||||
//background-color: fade(@primary-color, 8%) !important;
|
display: flex;
|
||||||
//}
|
padding: 8px 6px;
|
||||||
|
border-bottom: none;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-footer {
|
//.ant-table-tbody > tr.ant-table-row-selected td {
|
||||||
padding: 0;
|
//background-color: fade(@primary-color, 8%) !important;
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
.ant-table-wrapper {
|
.ant-table-footer {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
.ant-table-wrapper {
|
||||||
border: none !important;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-body {
|
table {
|
||||||
overflow-x: hidden !important;
|
border: none !important;
|
||||||
// overflow-y: scroll !important;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
.ant-table-body {
|
||||||
padding: 12px 6px!important;
|
overflow-x: hidden !important;
|
||||||
}
|
// overflow-y: scroll !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--inset {
|
td {
|
||||||
.ant-table-wrapper {
|
padding: 12px 6px !important;
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// .basic-table-search-form {
|
|
||||||
// .ant-form-item-no-colon {
|
&--inset {
|
||||||
// color: @main-color;
|
.ant-table-wrapper {
|
||||||
// }
|
padding: 0;
|
||||||
// }
|
}
|
||||||
// .ant-table-small {
|
}
|
||||||
// font-size: 12px !important;
|
}
|
||||||
// .ant-table-cell {
|
|
||||||
// padding: 9px 15px !important;
|
// .basic-table-search-form {
|
||||||
// }
|
// .ant-form-item-no-colon {
|
||||||
// }
|
// color: @main-color;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .ant-table-small {
|
||||||
|
// font-size: 12px !important;
|
||||||
|
// .ant-table-cell {
|
||||||
|
// padding: 9px 15px !important;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
.table-wrapper{
|
||||||
|
display:flex;
|
||||||
|
.basic-table{
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue