123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385 |
- <template>
- <div ref="wrapRef" :class="getWrapperClass">
- <BasicForm
- submitOnReset
- v-bind="getFormProps"
- v-if="getBindValues.useSearchForm"
- :submitButtonOptions="{ loading: getLoading }"
- :tableAction="tableAction"
- @register="registerForm"
- @submit="handleSearchInfoChange"
- @advanced-change="redoHeight"
- >
- <template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
- <slot :name="item" v-bind="data"></slot>
- </template>
- </BasicForm>
- <Table
- ref="tableElRef"
- v-bind="getBindValues"
- :rowClassName="getRowClassName"
- v-show="getEmptyDataIsShowTable"
- @change="handleTableChange"
- >
- <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
- <slot :name="item" v-bind="data"></slot>
- </template>
- <template #[`header-${column.dataIndex}`] v-for="column in columns" :key="column.dataIndex">
- <HeaderCell :column="column" />
- </template>
- </Table>
- </div>
- </template>
- <script lang="ts">
- import type { BasicTableProps, TableActionType, SizeType } from './types/table';
- import { defineComponent, ref, computed, unref, toRaw } from 'vue';
- import { Table } from 'ant-design-vue';
- import { BasicForm, useForm } from '/@/components/Form/index';
- import expandIcon from './components/ExpandIcon';
- import HeaderCell from './components/HeaderCell.vue';
- import { usePagination } from './hooks/usePagination';
- import { useColumns } from './hooks/useColumns';
- import { useDataSource } from './hooks/useDataSource';
- import { useLoading } from './hooks/useLoading';
- import { useRowSelection } from './hooks/useRowSelection';
- import { useTableScroll } from './hooks/useTableScroll';
- import { useCustomRow } from './hooks/useCustomRow';
- import { useTableStyle } from './hooks/useTableStyle';
- import { useTableHeader } from './hooks/useTableHeader';
- import { useTableExpand } from './hooks/useTableExpand';
- import { createTableContext } from './hooks/useTableContext';
- import { useTableFooter } from './hooks/useTableFooter';
- import { useTableForm } from './hooks/useTableForm';
- import { useExpose } from '/@/hooks/core/useExpose';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { omit } from 'lodash-es';
- import { basicProps } from './props';
- export default defineComponent({
- components: {
- Table,
- BasicForm,
- HeaderCell,
- },
- props: basicProps,
- emits: [
- 'fetch-success',
- 'fetch-error',
- 'selection-change',
- 'register',
- 'row-click',
- 'row-dbClick',
- 'row-contextmenu',
- 'row-mouseenter',
- 'row-mouseleave',
- 'edit-end',
- 'edit-cancel',
- 'edit-row-end',
- 'edit-change',
- 'expanded-rows-change',
- ],
- setup(props, { attrs, emit, slots }) {
- const tableElRef = ref<ComponentRef>(null);
- const tableData = ref<Recordable[]>([]);
- const wrapRef = ref<Nullable<HTMLDivElement>>(null);
- const innerPropsRef = ref<Partial<BasicTableProps>>();
- const { prefixCls } = useDesign('basic-table');
- const [registerForm, formActions] = useForm();
- const getProps = computed(() => {
- return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
- });
- const { getLoading, setLoading } = useLoading(getProps);
- const {
- getPaginationInfo,
- getPagination,
- setPagination,
- setShowPagination,
- getShowPagination,
- } = usePagination(getProps);
- const {
- getRowSelection,
- getRowSelectionRef,
- getSelectRows,
- clearSelectedRowKeys,
- getSelectRowKeys,
- deleteSelectRowByKey,
- setSelectedRowKeys,
- } = useRowSelection(getProps, tableData, emit);
- const {
- handleTableChange,
- getDataSourceRef,
- getDataSource,
- setTableData,
- fetch,
- getRowKey,
- reload,
- getAutoCreateKey,
- updateTableData,
- } = useDataSource(
- getProps,
- {
- tableData,
- getPaginationInfo,
- setLoading,
- setPagination,
- getFieldsValue: formActions.getFieldsValue,
- clearSelectedRowKeys,
- },
- emit
- );
- const {
- getViewColumns,
- getColumns,
- setCacheColumnsByField,
- setColumns,
- getColumnsRef,
- getCacheColumns,
- } = useColumns(getProps, getPaginationInfo);
- const { getScrollRef, redoHeight } = useTableScroll(
- getProps,
- tableElRef,
- getColumnsRef,
- getRowSelectionRef,
- getDataSourceRef
- );
- const { customRow } = useCustomRow(getProps, {
- setSelectedRowKeys,
- getSelectRowKeys,
- clearSelectedRowKeys,
- getAutoCreateKey,
- emit,
- });
- const { getRowClassName } = useTableStyle(getProps, prefixCls);
- const { getExpandOption, expandAll, collapseAll } = useTableExpand(getProps, tableData, emit);
- const { getHeaderProps } = useTableHeader(getProps, slots);
- const { getFooterProps } = useTableFooter(
- getProps,
- getScrollRef,
- tableElRef,
- getDataSourceRef
- );
- const {
- getFormProps,
- replaceFormSlotKey,
- getFormSlotKeys,
- handleSearchInfoChange,
- } = useTableForm(getProps, slots, fetch);
- const getBindValues = computed(() => {
- const dataSource = unref(getDataSourceRef);
- let propsData: Recordable = {
- size: 'middle',
- // ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),
- ...attrs,
- customRow,
- expandIcon: expandIcon(),
- ...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');
- 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 };
- }
- const tableAction: TableActionType = {
- reload,
- getSelectRows,
- clearSelectedRowKeys,
- getSelectRowKeys,
- deleteSelectRowByKey,
- setPagination,
- setTableData,
- redoHeight,
- setSelectedRowKeys,
- setColumns,
- setLoading,
- getDataSource,
- setProps,
- getRowSelection,
- getPaginationRef: getPagination,
- getColumns,
- getCacheColumns,
- emit,
- updateTableData,
- setShowPagination,
- getShowPagination,
- setCacheColumnsByField,
- expandAll,
- collapseAll,
- getSize: () => {
- return unref(getBindValues).size as SizeType;
- },
- };
- createTableContext({ ...tableAction, wrapRef, getBindValues });
- useExpose<TableActionType>(tableAction);
- emit('register', tableAction, formActions);
- return {
- tableElRef,
- getBindValues,
- getLoading,
- registerForm,
- handleSearchInfoChange,
- getEmptyDataIsShowTable,
- handleTableChange,
- getRowClassName,
- wrapRef,
- tableAction,
- redoHeight,
- getFormProps,
- replaceFormSlotKey,
- getFormSlotKeys,
- getWrapperClass,
- columns: getViewColumns,
- };
- },
- });
- </script>
- <style lang="less">
- @border-color: #cecece4d;
- @prefix-cls: ~'@{namespace}-basic-table';
- .@{prefix-cls} {
- &-row__striped {
- td {
- background-color: content-background;
- }
- }
- &-form-container {
- padding: 16px;
- .ant-form {
- padding: 12px 10px 6px 10px;
- margin-bottom: 16px;
- background-color: @component-background;
- border-radius: 2px;
- }
- }
- &--inset {
- .ant-table-wrapper {
- padding: 0;
- }
- }
- .ant-tag {
- margin-right: 0;
- }
- .ant-table-wrapper {
- padding: 6px;
- background-color: @component-background;
- border-radius: 2px;
- .ant-table-title {
- padding: 0 0 8px 0 !important;
- }
- .ant-table.ant-table-bordered .ant-table-title {
- border: none !important;
- }
- }
- .ant-table {
- width: 100%;
- 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 {
- background-color: fade(@primary-color, 8%) !important;
- }
- }
- .ant-pagination {
- margin: 10px 0 0 0;
- }
- .ant-table-footer {
- padding: 0;
- .ant-table-wrapper {
- padding: 0;
- }
- table {
- border: none !important;
- }
- .ant-table-body {
- overflow-x: hidden !important;
- overflow-y: scroll !important;
- }
- td {
- padding: 12px 8px;
- }
- }
- }
- </style>
|