vue-admin-core/es/formily/__builtins__/shared/effects.mjs

A Component Library for Vue 3

import { isArrayField, isField, onFieldValueChange, onFieldInit, onFieldMount } from '@formily/core';
import { isArray, isString } from 'lodash-es';
import findTree from 'xe-utils/findTree.js';
import '../../../components/index.mjs';
import { toJS } from '@formily/reactive';
import { useFieldSchema } from '@formily/vue';
import { useEventListener } from '@vueuse/core';
import { useRequest } from 'vue-admin-core';
import { watch } from 'vue';
import { globalConfig, useGlobalConfig } from '../../../components/config-provider/src/hooks/use-global-config.mjs';

const getOptions = (field) => {
  if (field.dataSource && field.dataSource.length > 0)
    return field.dataSource;
  if (field.componentProps.data && field.componentProps.data.length > 0)
    return field.componentProps.data;
  if (field.componentProps.options && field.componentProps.options.length > 0)
    return field.componentProps.options;
  return [];
};
const getItem = (value, options, props) => {
  var _a;
  const config = (_a = globalConfig) == null ? void 0 : _a.value;
  const dictValueKey = config == null ? void 0 : config.dictValueKey;
  const _props = { label: "label", value: "value", children: "children", ...props };
  const item = findTree(
    options,
    (item2) => item2[_props.value] === value || item2[dictValueKey] === value,
    {
      children: _props.children
    }
  );
  return item.item;
};
const createField = (field, form, keymap) => {
  const fields = {};
  for (const key in keymap) {
    const name = keymap[key];
    fields[key] = form.createField({
      name,
      basePath: field.address.splice(field.address.entire.split(".").length - 1, 1)
    });
  }
  return fields;
};
const transformFieldValueToLabel = (field, form) => {
  var _a;
  const config = (_a = globalConfig) == null ? void 0 : _a.value;
  const fieldData = field["data"] || {};
  const labelKey = fieldData["formLabelKey"];
  const separator = fieldData["separator"] || ",";
  const keymap = fieldData["keymap"];
  if (!labelKey && !keymap)
    return;
  const props = field.componentProps.props;
  const _map = {
    ...keymap,
    ...labelKey ? { [(props == null ? void 0 : props.label) || (config == null ? void 0 : config.dictLabelKey)]: labelKey } : {}
  };
  const fields = createField(field, form, _map);
  const options = getOptions(field);
  const value = toJS(field.value);
  if (isArrayField(field)) {
    if (value && isArray(value)) {
      const mapValue = {};
      value.forEach((value2) => {
        const item = getItem(value2, options, props);
        for (const key in fields) {
          if (mapValue[key]) {
            mapValue[key].push(item[key]);
          } else {
            mapValue[key] = [item[key]];
          }
        }
      });
      for (const key in fields) {
        fields[key].setValue(mapValue[key]);
      }
    } else {
      for (const key in fields) {
        fields[key].setValue("");
      }
    }
    return;
  }
  if (isField(field)) {
    if (value && isString(value)) {
      if (value.indexOf(separator) !== -1) {
        const list = value.split(separator);
        const mapValue = {};
        list.forEach((value2) => {
          const item = getItem(value2, options, props);
          for (const key in fields) {
            if (mapValue[key]) {
              mapValue[key].push(item[key]);
            } else {
              mapValue[key] = [item[key]];
            }
          }
        });
        for (const key in fields) {
          fields[key].setValue(mapValue[key].join(separator));
        }
      } else {
        const item = getItem(value, options, props);
        for (const key in fields) {
          fields[key].setValue(item[key]);
        }
      }
    } else {
      for (const key in fields) {
        fields[key].setValue("");
      }
    }
  }
};
function fieldLabelEffect(targets = "*") {
  onFieldValueChange(targets, transformFieldValueToLabel);
}
function remoteDatasourceEffect(pattern = "*") {
  onFieldInit(pattern, async (field) => {
    var _a, _b, _c;
    const schema = useFieldSchema();
    const config = useGlobalConfig();
    if (isField(field) && ((_a = schema == null ? void 0 : schema.value) == null ? void 0 : _a["x-remote"])) {
      const params = schema.value["x-remote"];
      const _config = {
        listKey: "content",
        totalKey: "totalElements",
        currentPageKey: "page",
        ...config.value
      };
      const request = useRequest(params.service, {
        cacheTime: -1,
        staleTime: -1,
        cacheKey: params.service.name + JSON.stringify((_c = (_b = params.options) == null ? void 0 : _b.defaultParams) == null ? void 0 : _c[0]),
        ...params.options
      });
      watch(
        request.loading,
        (loading) => {
          field.setLoading(loading);
        },
        { immediate: true }
      );
      watch(
        [request.data],
        ([data]) => {
          if (!data)
            return;
          if (field.componentType === "TableSelect") {
            field.setDataSource(data[_config.listKey]);
            field.setComponentProps({
              total: data[_config.totalKey],
              // @ts-ignore
              onCurrentChange: (value) => request.run({ [_config.currentPageKey]: value })
            });
          } else {
            field.setDataSource(data);
          }
        },
        { immediate: true, deep: true }
      );
    }
  });
}
function inputEnterEffect(pattern = "*", fn, components = ["Input", "InputNumber"]) {
  onFieldMount(pattern, (field) => {
    if (field.invoke("getInstance") && isField(field) && components.includes(field.component[0])) {
      const el = field.invoke("getInstance").$el;
      useEventListener(el.querySelector("input"), "keydown", (e) => {
        if (e.key === "Enter") {
          fn(e, field);
        }
      });
    }
  });
}

export { fieldLabelEffect, inputEnterEffect, remoteDatasourceEffect };
//# sourceMappingURL=effects.mjs.map