vue-admin-core/lib/formily/__builtins__/shared/effects.js

A Component Library for Vue 3

'use strict';

var core = require('@formily/core');
var lodashEs = require('lodash-es');
var findTree = require('xe-utils/findTree.js');
require('../../../components/index.js');
var reactive = require('@formily/reactive');
var vue = require('@formily/vue');
var core$1 = require('@vueuse/core');
var vueAdminCore = require('vue-admin-core');
var vue$1 = require('vue');
var useGlobalConfig = require('../../../components/config-provider/src/hooks/use-global-config.js');

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 = useGlobalConfig.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 = useGlobalConfig.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 = reactive.toJS(field.value);
  if (core.isArrayField(field)) {
    if (value && lodashEs.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 (core.isField(field)) {
    if (value && lodashEs.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 = "*") {
  core.onFieldValueChange(targets, transformFieldValueToLabel);
}
function remoteDatasourceEffect(pattern = "*") {
  core.onFieldInit(pattern, async (field) => {
    var _a, _b, _c;
    const schema = vue.useFieldSchema();
    const config = useGlobalConfig.useGlobalConfig();
    if (core.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 = vueAdminCore.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
      });
      vue$1.watch(
        request.loading,
        (loading) => {
          field.setLoading(loading);
        },
        { immediate: true }
      );
      vue$1.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"]) {
  core.onFieldMount(pattern, (field) => {
    if (field.invoke("getInstance") && core.isField(field) && components.includes(field.component[0])) {
      const el = field.invoke("getInstance").$el;
      core$1.useEventListener(el.querySelector("input"), "keydown", (e) => {
        if (e.key === "Enter") {
          fn(e, field);
        }
      });
    }
  });
}

exports.fieldLabelEffect = fieldLabelEffect;
exports.inputEnterEffect = inputEnterEffect;
exports.remoteDatasourceEffect = remoteDatasourceEffect;
//# sourceMappingURL=effects.js.map