tav-ui/es/packages/components/table/src/table2.mjs

Tav UI

import { defineComponent, provide, ref, computed, unref, inject, watchEffect, toRaw, watch, onMounted, onActivated, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, withDirectives, createElementVNode, vShow, createVNode } from 'vue';
import { omit, isEqual } from 'lodash-es';
import { Table as Table$1 } from 'ant-design-vue';
import { mitt } from '../../../utils/mitt2.mjs';
import { warn } from '../../../utils/log2.mjs';
import { isNullOrUnDef, isFunction } from '../../../utils/is2.mjs';
import { useGlobalConfig } from '../../../hooks/global/useGlobalConfig2.mjs';
import { onUnmountedOrOnDeactivated } from '../../../hooks/core/onUnmountedOrOnDeactivated2.mjs';
import { useForm } from '../../form/src/hooks/useForm2.mjs';
import BasicForm from '../../form/index2.mjs';
import CustomAction from './components/CustomAction2.mjs';
import expandIcon from './components/ExpandIcon2.mjs';
import Filter from './components/Filter2.mjs';
import HeaderCell from './components/HeaderCell2.mjs';
import { useColumns } from './hooks/useColumns2.mjs';
import { useCustomRow } from './hooks/useCustomRow2.mjs';
import { useDataSource } from './hooks/useDataSource2.mjs';
import { useLoading } from './hooks/useLoading2.mjs';
import { useMasking } from './hooks/useMasking2.mjs';
import { usePagination } from './hooks/usePagination2.mjs';
import { useRowSelection } from './hooks/useRowSelection2.mjs';
import { createTableContext } from './hooks/useTableContext2.mjs';
import { useTableExpand } from './hooks/useTableExpand2.mjs';
import { useTableFooter } from './hooks/useTableFooter2.mjs';
import { useTableForm } from './hooks/useTableForm2.mjs';
import { useTableHeader } from './hooks/useTableHeader2.mjs';
import { useTableScroll } from './hooks/useTableScroll2.mjs';
import { useTableScrollTo } from './hooks/useTableScrollTo2.mjs';
import { useTableStyle } from './hooks/useTableStyle2.mjs';
import { tableProps } from './props2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';

const PageWrapperFixedHeightKey = "PageWrapperFixedHeight";
const _sfc_main = defineComponent({
  name: "TaTable",
  components: {
    Table: Table$1,
    BasicForm,
    HeaderCell,
    Filter,
    CustomAction
  },
  props: tableProps,
  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",
    "change",
    "columns-change"
  ],
  setup(props, { attrs, emit, slots, expose }) {
    const tableEmitter = mitt();
    provide("tableEmitter", tableEmitter);
    const tableElRef = ref(null);
    const tableData = ref([]);
    const wrapRef = ref(null);
    const formRef = ref(null);
    const actionRef = ref(null);
    const innerPropsRef = ref();
    const cacheActionWidths = ref({});
    const columnsForAction = ref([]);
    const maxWidthForAction = ref(0);
    const prefixCls = "ta-basic-table";
    const [registerForm, formActions] = useForm();
    const getProps = computed(() => {
      return { ...props, ...unref(innerPropsRef) };
    });
    const filterElRef = ref(null);
    const useFilter = computed(() => {
      const { filter } = unref(getProps);
      const result = {
        isVisible: false,
        isInputFormVisible: false,
        isPannelFormVisible: false
      };
      if (!filter) {
        result.isVisible = false;
      } else {
        const { inputForm, pannelForm } = filter;
        if (inputForm && Object.keys(inputForm).length > 0) {
          result.isInputFormVisible = true;
        } else {
          result.isInputFormVisible = false;
        }
        if (pannelForm && pannelForm.length > 0) {
          result.isPannelFormVisible = true;
        } else {
          result.isPannelFormVisible = false;
        }
        if (result.isInputFormVisible || result.isPannelFormVisible) {
          result.isVisible = true;
        } else {
          result.isVisible = false;
        }
      }
      return result;
    });
    const getFilterProps = computed(() => {
      return getProps.value.filter;
    });
    const useInnerCustomAction = computed(() => {
      const { useAdd, useDelete, useImport, useExport, useRefresh, permission } = unref(getProps);
      let isAddVisible = false;
      let isDeleteVisible = false;
      let isImportVisible = false;
      let isExportVisible = false;
      let isRefreshVisible = false;
      const Permissions = useGlobalConfig("permissions");
      isAddVisible = isNullOrUnDef(permission?.add) ? useAdd?.ifShow : unref(Permissions)[permission.add]?.ifShow && useAdd?.ifShow;
      isDeleteVisible = isNullOrUnDef(permission?.delete) ? useDelete?.ifShow : unref(Permissions)[permission.delete]?.ifShow && useDelete?.ifShow;
      isImportVisible = isNullOrUnDef(permission?.import) ? useImport?.ifShow : unref(Permissions)[permission.import]?.ifShow && useImport?.ifShow;
      isExportVisible = isNullOrUnDef(permission?.export) ? useExport?.ifShow : unref(Permissions)[permission.export]?.ifShow && useExport?.ifShow;
      isRefreshVisible = isNullOrUnDef(permission?.refresh) ? useRefresh?.ifShow : unref(Permissions)[permission.refresh]?.ifShow && useRefresh?.ifShow;
      const result = {
        isVisible: isAddVisible || isDeleteVisible || isImportVisible || isExportVisible || isRefreshVisible || !!slots.customAction,
        isAddVisible,
        addHandle: useAdd?.handleAction,
        isDeleteVisible,
        deleteHandle: useDelete?.handleAction,
        isImportVisible,
        importHandle: useImport?.handleAction,
        isExportVisible,
        exportHandle: useExport?.handleAction,
        isRefreshVisible
      };
      return result;
    });
    const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false);
    watchEffect(() => {
      unref(isFixedHeightPage) && props.canResize && warn("'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)");
    });
    const { getLoading, setLoading } = useLoading(getProps);
    const { getMasking, setMasking } = useMasking(getProps);
    const {
      getPaginationInfo,
      getPagination,
      setPagination,
      setShowPagination,
      getShowPagination
    } = usePagination(getProps);
    const {
      getRowSelection,
      getRowSelectionRef,
      getSelectRows,
      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(tableElRef, getProps, {
      tableData,
      getPaginationInfo,
      setLoading,
      setPagination,
      getFieldsValue: formActions.getFieldsValue,
      clearSelectedRowKeys
    }, emit, filterElRef);
    function handleTableChange(...args) {
      onTableChange.call(void 0, ...args);
      emit("change", ...args);
      const { onChange } = unref(getProps);
      onChange && isFunction(onChange) && onChange.call(void 0, ...args);
    }
    const {
      getViewColumns,
      getColumns,
      setCacheColumnsByField,
      setColumns,
      getColumnsRef,
      getCacheColumns
    } = useColumns(getProps, getPaginationInfo);
    const { getScrollRef, redoHeight, fnInit, keepScrollIns } = useTableScroll(getProps, tableElRef, getColumnsRef, getRowSelectionRef, getDataSourceRef, slots, wrapRef, formRef, actionRef);
    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 = {
      onColumnsChange: (data) => {
        emit("columns-change", data);
        unref(getProps).onColumnsChange?.(data);
      }
    };
    const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
    const { getFooterProps } = useTableFooter(getProps, getScrollRef, tableElRef, getDataSourceRef);
    const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } = useTableForm(getProps, slots, fetch, getLoading);
    const _getColumns = computed(() => {
      let columns = unref(getViewColumns);
      if (unref(columnsForAction) && unref(columnsForAction).length > 0) {
        columns = unref(columnsForAction);
      }
      return columns;
    });
    const getBindValues = computed(() => {
      const dataSource = unref(getDataSourceRef);
      let propsData = {
        ...attrs,
        customRow,
        expandIcon: slots.expandIcon ? null : expandIcon(),
        ...unref(getProps),
        ...unref(getHeaderProps),
        scroll: unref(getScrollRef),
        loading: unref(getLoading),
        masking: unref(getMasking),
        tableLayout: "fixed",
        rowSelection: unref(getRowSelectionRef),
        rowKey: unref(getRowKey),
        columns: unref(_getColumns),
        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,
          [`${prefixCls}--full-height`]: values.fullHeight
        }
      ];
    });
    const getEmptyDataIsShowTable = computed(() => {
      const { emptyDataIsShowTable, useSearchForm } = unref(getProps);
      if (emptyDataIsShowTable || !useSearchForm) {
        return true;
      }
      return !!unref(getDataSourceRef).length;
    });
    function setProps(props2) {
      innerPropsRef.value = { ...unref(innerPropsRef), ...props2 };
    }
    const getFilterForm = () => {
      return filterElRef.value.pannelFormRef;
    };
    const setCacheActionWidths = ({ key = "", value = 0 }) => {
      if (key) {
        cacheActionWidths.value[key] = value;
      }
    };
    watch(() => [unref(getViewColumns), cacheActionWidths], ([newCol], [preCol]) => {
      const _tableData = unref(tableData);
      const maxWidth = Math.max(...Object.values(unref(cacheActionWidths)));
      if (!isEqual(newCol, preCol) || _tableData && maxWidth > unref(maxWidthForAction)) {
        const columns = unref(getViewColumns).map((column) => {
          if (typeof column.dataIndex === "string" && ["action", "actions"].includes(column.dataIndex)) {
            column.width = Math.ceil(maxWidth);
            column.minWidth = Math.ceil(maxWidth);
            return column;
          }
          return column;
        });
        columnsForAction.value = columns;
        maxWidthForAction.value = maxWidth;
      }
    }, {
      deep: true
    });
    onMounted(() => {
      fnInit();
    });
    onActivated(() => {
      if (keepScrollIns.value) {
        keepScrollIns.value.scrollFn();
      }
    });
    onUnmountedOrOnDeactivated(() => {
      cacheActionWidths.value = {};
      columnsForAction.value = [];
      maxWidthForAction.value = 0;
    });
    const tableAction = {
      reload,
      getSelectRows,
      clearSelectedRowKeys,
      getSelectRowKeys,
      deleteSelectRowByKey,
      setPagination,
      setTableData,
      updateTableDataRecord,
      deleteTableDataRecord,
      insertTableDataRecord,
      findTableDataRecord,
      redoHeight,
      setSelectedRowKeys,
      setColumns,
      setLoading,
      setMasking,
      getDataSource,
      getRawDataSource,
      setProps,
      getRowSelection,
      getPaginationRef: getPagination,
      getColumns,
      getCacheColumns,
      emit,
      updateTableData,
      setShowPagination,
      getShowPagination,
      setCacheColumnsByField,
      expandAll,
      expandRows,
      scrollTo,
      collapseAll,
      getFilterForm,
      getSize: () => {
        return unref(getBindValues).size;
      }
    };
    createTableContext({ ...tableAction, wrapRef, getBindValues, setCacheActionWidths });
    watchEffect(() => {
      if (tableElRef.value) {
        tableEmitter.emit("table:fetch-refs", {
          table: tableElRef.value.$el
        });
      }
    });
    expose(tableAction);
    emit("register", tableAction, formActions);
    return {
      tableData,
      filterElRef,
      useFilter,
      getFilterProps,
      useInnerCustomAction,
      tableElRef,
      getBindValues,
      getLoading,
      registerForm,
      handleSearchInfoChange,
      getEmptyDataIsShowTable,
      handleTableChange,
      getRowClassName,
      wrapRef,
      tableAction,
      redoHeight,
      getFormProps,
      replaceFormSlotKey,
      getFormSlotKeys,
      getWrapperClass,
      columns: getViewColumns,
      formRef,
      actionRef
    };
  }
});
const _hoisted_1 = {
  ref: "actionRef",
  class: "ta-basic-table-operations flex flex-wrap align-center justify-between"
};
const _hoisted_2 = {
  key: 1,
  class: "ta-basic-table-custom-title"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_BasicForm = resolveComponent("BasicForm");
  const _component_Filter = resolveComponent("Filter");
  const _component_CustomAction = resolveComponent("CustomAction");
  const _component_HeaderCell = resolveComponent("HeaderCell");
  const _component_Table = resolveComponent("Table", true);
  return openBlock(), createElementBlock("div", {
    ref: "wrapRef",
    class: normalizeClass(_ctx.getWrapperClass)
  }, [
    _ctx.getBindValues.useSearchForm ? (openBlock(), createBlock(_component_BasicForm, mergeProps({ key: 0 }, _ctx.getFormProps, {
      ref: "formRef",
      "submit-on-reset": "",
      "table-action": _ctx.tableAction,
      onRegister: _ctx.registerForm,
      onSubmit: _ctx.handleSearchInfoChange,
      onAdvancedChange: _ctx.redoHeight
    }), createSlots({ _: 2 }, [
      renderList(_ctx.getFormSlotKeys, (item) => {
        return {
          name: _ctx.replaceFormSlotKey(item),
          fn: withCtx((data) => [
            renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
          ])
        };
      })
    ]), 1040, ["table-action", "onRegister", "onSubmit", "onAdvancedChange"])) : createCommentVNode("v-if", true),
    createCommentVNode(" ::==================== i7eo\uFF1A\u6DFB\u52A0 ///// start ///// ====================:: "),
    withDirectives(createElementVNode("div", _hoisted_1, [
      _ctx.useFilter.isVisible ? (openBlock(), createBlock(_component_Filter, {
        key: 0,
        ref: "filterElRef",
        forms: _ctx.getFilterProps,
        "table-action": _ctx.tableAction,
        "filter-exclusion": _ctx.filterExclusion
      }, null, 8, ["forms", "table-action", "filter-exclusion"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
        renderSlot(_ctx.$slots, "customTitle", normalizeProps(guardReactiveProps(_ctx.$slots["customTitle"] || {})))
      ])),
      _ctx.useInnerCustomAction.isVisible ? (openBlock(), createBlock(_component_CustomAction, {
        key: 2,
        visible: _ctx.useInnerCustomAction,
        handlers: _ctx.useInnerCustomAction,
        "table-action": _ctx.tableAction
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "customAction", normalizeProps(guardReactiveProps(_ctx.$slots["customAction"] || {})))
        ]),
        _: 3
      }, 8, ["visible", "handlers", "table-action"])) : createCommentVNode("v-if", true),
      createCommentVNode(' <div v-if="!tableData.length" class="ta-basic-table-operations-mask"></div> ')
    ], 512), [
      [vShow, _ctx.showTableAction]
    ]),
    createCommentVNode(" ::==================== i7eo\uFF1A\u6DFB\u52A0 ///// end  ///// ====================:: "),
    withDirectives(createVNode(_component_Table, mergeProps({ ref: "tableElRef" }, _ctx.getBindValues, {
      "row-class-name": _ctx.getRowClassName,
      onChange: _ctx.handleTableChange
    }), createSlots({
      bodyCell: withCtx((data) => [
        renderSlot(_ctx.$slots, "bodyCell", normalizeProps(guardReactiveProps(data || {})))
      ]),
      footer: withCtx((data) => [
        renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(data || {})))
      ]),
      _: 2
    }, [
      renderList(_ctx.columns, (column) => {
        return {
          name: `header-${column.dataIndex}`,
          fn: withCtx(() => [
            createVNode(_component_HeaderCell, { column }, null, 8, ["column"])
          ])
        };
      })
    ]), 1040, ["row-class-name", "onChange"]), [
      [vShow, _ctx.getEmptyDataIsShowTable]
    ]),
    createCommentVNode(' <div v-show="getBindValues.masking" class="ta-basic-table-mask"></div> ')
  ], 2);
}
var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/table/src/table.vue"]]);

export { Table as default };
//# sourceMappingURL=table2.mjs.map