vue-admin-core/es/hooks/formily/useFormilyTable.mjs

A Component Library for Vue 3

import { isVNode, getCurrentInstance, toValue, watch, defineComponent, createVNode } from 'vue';
import '../useRequest/index.mjs';
import { useForm, FormProvider } from '@formily/vue';
import { createForm } from '@formily/core';
import '../../components/config-provider/index.mjs';
import '../../formily/index.mjs';
import { autorun } from '@formily/reactive';
import { isService } from '../useRequest/__utils__/isService.mjs';
import defaultProps from 'element-plus/es/components/table/src/table/defaults';
import { map } from 'lodash-es';
import { useGlobalConfig } from '../../components/config-provider/src/hooks/use-global-config.mjs';
import { ArrayTable } from '../../formily/array-table/src/index.mjs';
import useRequest from '../useRequest/src/useRequest.mjs';

function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const transformTableSchema = (schemas) => {
  const _map = {};
  map(schemas, (schema, key) => {
    if (schema["x-column-props"]) {
      _map[key] = {
        type: "void",
        "x-component": "ArrayTable.Column",
        "x-component-props": schema["x-column-props"],
        ...schema
      };
    } else {
      _map[key] = schema;
    }
    if (schema["properties"]) {
      _map[key]["properties"] = transformTableSchema(schema["properties"]);
    }
  });
  return _map;
};
const useFormilyTable = (request, options, SchemaField) => {
  const form = useForm();
  const config = useGlobalConfig();
  const pageSizeKey = config.value.pageSizeKey || "pageSize";
  const currentPageKey = config.value.currentPageKey || "currentPage";
  const totalKey = config.value.totalKey || "totalElements";
  const listKey = config.value.listKey || "content";
  const tableUid = "dataSource";
  const app = getCurrentInstance();
  const SelfSchemaField = (app == null ? void 0 : app.appContext.components.SchemaField) || SchemaField;
  if (!SelfSchemaField) {
    throw new Error(`SchemaField \u627E\u4E0D\u5230\uFF0C\u5728\u5168\u5C40\u8BBE\u7F6Eapp.use(setupFormily)\u6216\u8005\u4F20\u5165SchemaField`);
  }
  const {
    formProps,
    ...others
  } = options || {};
  if (!form.value) {
    form.value = createForm(formProps);
  }
  const pagination = ArrayTable.createPagination();
  const table = ArrayTable.createTable();
  let result = request;
  if (isService(request)) {
    result = useRequest(request, {
      manual: true,
      current: 1,
      ...others
    });
  }
  autorun(() => {
    var _a;
    const params = (_a = toValue(result.params)) == null ? void 0 : _a[0];
    result.run({
      ...params,
      [pageSizeKey]: pagination.pageSize,
      [currentPageKey]: pagination.current
    });
  });
  watch(result.loading, (value) => {
    form.value.query(tableUid).take((field) => {
      field.setComponentProps({
        loading: value
      });
    });
  }, {
    immediate: true
  });
  watch([result.data], ([data]) => {
    if (Array.isArray(data)) {
      form.value.query(tableUid).take((field) => {
        field.setValue(data);
      });
    } else {
      form.value.query(tableUid).take((field) => {
        field.setValue(data[listKey]);
        pagination.setTotal(data[totalKey]);
      });
    }
  });
  const Table = defineComponent({
    name: "UseSearchTableTable",
    props: {
      ...defaultProps,
      schema: {
        type: Object,
        required: true
      },
      components: {
        type: Object
      },
      scope: {
        type: Object
      },
      name: {
        type: [String, Number]
      },
      definitions: {
        type: Object
      }
    },
    setup(props, {
      slots
    }) {
      const {
        schema,
        components,
        scope,
        name,
        ...reset
      } = props;
      const _form = useForm();
      if (_form.value)
        form.value = _form.value;
      const _schema = {
        type: "object",
        definitions: props.definitions,
        properties: {
          [tableUid]: {
            type: "array",
            "x-component": "ArrayTable",
            "x-component-props": {
              ...reset,
              pagination,
              table,
              loading: result.loading.value
            },
            items: {
              type: "object",
              properties: transformTableSchema(schema)
            }
          }
        }
      };
      return () => createVNode(FormProvider, {
        "form": form.value
      }, {
        default: () => [createVNode(SelfSchemaField, {
          "schema": _schema,
          "components": components,
          "name": name,
          "scope": scope
        }, _isSlot(slots) ? slots : {
          default: () => [slots]
        })]
      });
    }
  });
  return {
    form,
    Table,
    request: result,
    table
  };
};

export { useFormilyTable as default, transformTableSchema, useFormilyTable };
//# sourceMappingURL=useFormilyTable.mjs.map