cnhis-design-vue 3.1.17 → 3.1.18-beta.4

package/es/components/form-render/src/components/renderer/select.js

@@ -0,0 +1,195 @@
+import { defineComponent, computed, ref, inject, nextTick, watch, createVNode } from 'vue';
+import { isField } from '@formily/core';
+import { cloneDeep, isEqual, isString } from 'lodash-es';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { InjectAsyncQueue, InjectionChangeContextCollector, InjectionFormItemDepsCollector } from '../../constants/index.js';
+import '@vueuse/core';
+import '../../../index.js';
+import { formRenderLog } from '../../utils/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
+import '../../../../../shared/utils/tapable/SyncHook.js';
+import '../../../../../shared/utils/tapable/SyncBailHook.js';
+import '../../../../../shared/utils/tapable/SyncWaterfallHook.js';
+import '../../../../../shared/utils/tapable/SyncLoopHook.js';
+import '../../../../../shared/utils/tapable/AsyncParallelHook.js';
+import '../../../../../shared/utils/tapable/AsyncParallelBailHook.js';
+import '../../../../../shared/utils/tapable/AsyncSeriesHook.js';
+import '../../../../../shared/utils/tapable/AsyncSeriesBailHook.js';
+import '../../../../../shared/utils/tapable/AsyncSeriesLoopHook.js';
+import '../../../../../shared/utils/tapable/AsyncSeriesWaterfallHook.js';
+import '@vue/shared';
+import { connect, mapProps } from '@formily/vue';
+import './input.js';
+import './formItem.js';
+import './textarea.js';
+import './inputNumber.js';
+import './linebar.js';
+import './inputGroup.js';
+import './date.js';
+import './cascader.js';
+import './jsonCombination/index.js';
+import './combination.js';
+import './checkbox.js';
+import './switch.js';
+import './radio.js';
+import './labelSelect.js';
+import './slider.js';
+import './complex.js';
+import './simpleComponent.js';
+import { NSelect } from 'naive-ui';
+import { assignUpdateValue, traverseDependKey } from '../../utils/schema.js';
+
+const script = defineComponent({
+  name: "FormSelect",
+  props: {
+    value: {
+      type: String
+    },
+    lazyRequest: {
+      type: Boolean,
+      default: true
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    urlConfig: {
+      type: Object
+    },
+    onFocus: {
+      type: Function
+    },
+    onChange: {}
+  },
+  emits: ["update:value"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const valueRef = computed({
+      get: () => props.value,
+      set: (v) => emit("update:value", v)
+    });
+    const remoteOptions = ref(null);
+    const lastSearch = ref("");
+    const labelKey = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.urlConfig) == null ? void 0 : _a.nameKey) != null ? _b : "text";
+    });
+    const valueKey = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.urlConfig) == null ? void 0 : _a.valueKey) != null ? _b : "value";
+    });
+    const {
+      field,
+      fieldKey
+    } = useFormField();
+    const asyncQueue = inject(InjectAsyncQueue);
+    async function fetchData(content) {
+      lastSearch.value = content || "";
+      if (!configFor(props)) {
+        return remoteOptions.value = null;
+      }
+      if (remoteOptions.value)
+        return;
+      try {
+        remoteOptions.value = await asyncQueue.addAsync(await createParams(configFor(props), field.value, fieldKey.value));
+      } catch (e) {
+        isString(e) && formRenderLog(e, "warn");
+      }
+      async function createParams(config, field2, key) {
+        const _params = {};
+        try {
+          traverseDependKey(config.dependKey, (dependKey, valueKey2, required) => {
+            const _field = field2.query(dependKey).take();
+            if (!isField(_field))
+              return;
+            if (required && _field.value == null) {
+              throw `\u7F3A\u5C11\u5FC5\u987B\u7684\u53C2\u6570=>${dependKey}`;
+            }
+            _params[valueKey2] = _field.value;
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+        return {
+          ...config,
+          params: Object.assign({}, config.params, _params),
+          key
+        };
+      }
+      function configFor(target) {
+        return target.urlConfig;
+      }
+    }
+    const parsedOptions = computed(() => {
+      if (remoteOptions.value)
+        return filterOption(remoteOptions.value, lastSearch.value);
+      if (!Array.isArray(props.options))
+        return [];
+      return filterOption(props.options, lastSearch.value);
+      function filterOption(options, searchContent) {
+        return options.filter((option) => {
+          return !searchContent || String(option[labelKey.value]).includes(searchContent);
+        });
+      }
+    });
+    const changeContextCollector = inject(InjectionChangeContextCollector);
+    changeContextCollector.setContext(fieldKey.value, async () => {
+      await nextTick();
+      return {
+        currentOption: cloneDeep(getCurrentOption())
+      };
+      function getCurrentOption() {
+        return parsedOptions.value.find((option) => option[valueKey.value] === valueRef.value);
+      }
+    });
+    const formItemDepsCollector = inject(InjectionFormItemDepsCollector);
+    watch(() => props.urlConfig, (config, oldConfig) => {
+      if (isEqual(config, oldConfig))
+        return;
+      remoteOptions.value = null;
+      if (!config)
+        return;
+      formItemDepsCollector.setDeps(fieldKey.value, config.dependKey || [], async () => {
+        remoteOptions.value = null;
+        valueRef.value = null;
+        !props.lazyRequest && await fetchData();
+      });
+      (valueRef.value || !props.lazyRequest) && fetchData();
+    }, {
+      immediate: true
+    });
+    const {
+      injectValueValidate,
+      injectValueWatchFromEmpty
+    } = useCommonInjection();
+    injectValueWatchFromEmpty(valueRef, fetchData);
+    injectValueValidate(valueRef);
+    function focusDecorator(onFocus) {
+      return (...args) => {
+        if (isField(field.value)) {
+          field.value.visited = true;
+        }
+        return onFocus == null ? void 0 : onFocus(...args);
+      };
+    }
+    return () => createVNode(NSelect, {
+      "remote": true,
+      "filterable": true,
+      "value": valueRef.value,
+      "onUpdate:value": ($event) => valueRef.value = $event,
+      "labelField": labelKey.value,
+      "valueField": valueKey.value,
+      "options": parsedOptions.value,
+      "onSearch": fetchData,
+      "onUpdate:show": (show) => show && fetchData(),
+      "onFocus": focusDecorator(props.onFocus)
+    }, slots);
+  }
+});
+const SELECT = connect(script, mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+
+export { SELECT };

package/es/components/form-render/src/components/renderer/simpleComponent.d.ts

@@ -0,0 +1,17 @@
+import { AnyObject } from '../../../../../../es/shared/types';
+export declare const TEXT: {
+    (props: AnyObject): JSX.Element;
+    props: {
+        content: {};
+        fieldItem: {};
+        value: {};
+    };
+};
+export declare const BUTTON: {
+    (props: AnyObject): JSX.Element;
+    props: {
+        onClick: {};
+        fieldItem: {};
+        content: {};
+    };
+};

package/es/components/form-render/src/components/renderer/simpleComponent.js

@@ -0,0 +1,53 @@
+import { createVNode } from 'vue';
+import { connect, mapProps } from '@formily/vue';
+import { isFunction } from 'lodash-es';
+import { NButton } from 'naive-ui';
+import { createSlot } from '../../utils/index.js';
+
+function createPropFor(props) {
+  return (property) => {
+    var _a;
+    return (_a = props.fieldItem) == null ? void 0 : _a[property];
+  };
+}
+const textScript = (props) => {
+  var _a, _b, _c;
+  return createVNode("div", null, [(_c = (_b = createSlot((_a = props.content) != null ? _a : props.value, props)).default) == null ? void 0 : _c.call(_b)]);
+};
+textScript.props = {
+  content: {},
+  fieldItem: {},
+  value: {}
+};
+const TEXT = connect(textScript, mapProps((props) => {
+  var _a;
+  return {
+    ...props,
+    content: (_a = props.fieldItem) == null ? void 0 : _a.content
+  };
+}));
+const buttonScript = (props) => {
+  const propFor = createPropFor(props);
+  function onClick() {
+    var _a;
+    const cb = propFor("onClick") || ((_a = propFor("componentProps")) == null ? void 0 : _a.onClick);
+    return () => isFunction(cb) && cb(props.fieldItem);
+  }
+  return createVNode(NButton, {
+    "onClick": onClick()
+  }, createSlot(props.content, props));
+};
+buttonScript.props = {
+  onClick: {},
+  fieldItem: {},
+  content: {}
+};
+const BUTTON = connect(buttonScript, mapProps((props) => {
+  var _a;
+  return {
+    ...props,
+    content: (_a = props.fieldItem) == null ? void 0 : _a.content
+  };
+}));
+
+export { BUTTON, TEXT };

package/es/components/form-render/src/components/renderer/switch.js

@@ -0,0 +1,51 @@
+import { defineComponent, computed, createVNode, createTextVNode } from 'vue';
+import { NSwitch } from 'naive-ui';
+import '@formily/path';
+import '@vue/shared';
+import 'lodash-es';
+import 'date-fns';
+import { assignUpdateValue } from '../../utils/schema.js';
+import { connect, mapProps } from '@formily/vue';
+
+const script = defineComponent({
+  name: "FormSwitch",
+  props: {
+    openDescription: {
+      type: Object
+    },
+    closeDescription: {
+      type: Object
+    },
+    onChange: {}
+  },
+  setup(props) {
+    return () => {
+      const checkedValue = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.openDescription) == null ? void 0 : _a.value) != null ? _b : true;
+      });
+      const uncheckedValue = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.closeDescription) == null ? void 0 : _a.value) != null ? _b : false;
+      });
+      const checked = () => {
+        var _a, _b;
+        return createTextVNode((_b = (_a = props.openDescription) == null ? void 0 : _a.describe) != null ? _b : "");
+      };
+      const unchecked = () => {
+        var _a, _b;
+        return createTextVNode((_b = (_a = props.closeDescription) == null ? void 0 : _a.describe) != null ? _b : "");
+      };
+      return createVNode(NSwitch, {
+        "checkedValue": checkedValue.value,
+        "uncheckedValue": uncheckedValue.value
+      }, {
+        checked,
+        unchecked
+      });
+    };
+  }
+});
+const SWITCH = connect(script, mapProps(assignUpdateValue));
+
+export { SWITCH };

package/es/components/form-render/src/components/renderer/textarea.js

@@ -0,0 +1,16 @@
+import 'vue';
+import '@formily/path';
+import '@vue/shared';
+import 'lodash-es';
+import 'date-fns';
+import { assignUpdateValue } from '../../utils/schema.js';
+import { connect, mapProps } from '@formily/vue';
+import { NInput } from 'naive-ui';
+
+const TEXTAREA = connect(NInput, mapProps((props, field) => {
+  const _props = assignUpdateValue(props, field);
+  _props.type = "textarea";
+  return _props;
+}));
+
+export { TEXTAREA };

package/es/components/form-render/src/constants/index.d.ts

@@ -0,0 +1,41 @@
+import { Nullable } from '../../../../../es/shared/types';
+import { ContextCollector } from '../../../../../es/components/form-render/src/hooks/useChangeContext';
+import { BusinessCollector, FormItemDepsCollector } from '../hooks';
+import { FormAsyncQueue } from '../types';
+import { Component, InjectionKey, WritableComputedRef } from 'vue';
+export declare const InjectAsyncQueue: InjectionKey<FormAsyncQueue>;
+export declare const InjectionSchemaField: InjectionKey<Component>;
+export declare const InjectionBusinessCollector: InjectionKey<BusinessCollector>;
+export declare const InjectionChangeContextCollector: InjectionKey<ContextCollector>;
+export declare const InjectionFormItemDepsCollector: InjectionKey<FormItemDepsCollector>;
+export declare const InjectionFormUUID: InjectionKey<string>;
+export declare const InjectionAnnotation: InjectionKey<WritableComputedRef<Nullable<Record<string, string>>>>;
+export declare const FormItemLineBarDepKeyPrepend = "__dep_LINEBAR_";
+export declare enum FIELD_BUSINESS_TYPE {
+    PASSWORD = "password",
+    ID_CARD = "id_card",
+    AGE = "age",
+    AGE_UNIT = "age_unit",
+    MOBILE = "mobile",
+    TELEPHONE = "telephone",
+    EMAIL = "email",
+    SEX = "sex",
+    BIRTHDAY = "birthday",
+    BANK_CARD = "bank_card",
+    WEBSITE = "website",
+    GESTATIONAL_WEEKS = "gestational_weeks",
+    GESTATIONAL_STAGE = "gestational_stage",
+    CUSTOMER_NAME = "customer_name"
+}
+export declare enum FIELD_SEX_VALUE {
+    MALE = "1",
+    FEMALE = "2"
+}
+export declare enum FIELD_AGE_UNIT {
+    DAY = "D",
+    MONTH = "M",
+    YEAR = "Y",
+    HOUR = "H",
+    WEEK = "W",
+    MINUTE = "N"
+}

package/es/components/form-render/src/hooks/useAnchor.d.ts

@@ -0,0 +1,16 @@
+import { UndefinedAble } from '../../../../../es/shared/types';
+import { ISchema } from '@formily/json-schema/esm/types';
+import { Ref } from 'vue';
+import { FormItemDepsCollector, FormRenderProps } from '../../../../../es/components/form-render';
+export declare function useAnchor(props: Readonly<FormRenderProps>, scrollbarRef: Ref<UndefinedAble<HTMLElement>>, collector: FormItemDepsCollector): {
+    currentAnchor: import("vue").WritableComputedRef<string>;
+    onScroll: () => void;
+    formHeight: import("vue").ComputedRef<string | undefined>;
+    anchorIdList: Ref<{
+        name: string;
+        title: string;
+    }[]>;
+    generateAnchorList: (schema: ISchema) => void;
+    scrollbarRef: Ref<UndefinedAble<HTMLElement>>;
+    scrollTo: (id: string) => Promise<void>;
+};

package/es/components/form-render/src/hooks/useAnchor.js

@@ -0,0 +1,90 @@
+import { doAnimation } from '../../../../shared/utils/anime.js';
+import { useDebounceFn } from '@vueuse/core';
+import { isNumber } from 'lodash-es';
+import { ref, computed, watch, nextTick } from 'vue';
+import { FormItemLineBarDepKeyPrepend } from '../constants/index.js';
+import '@formily/path';
+import '@vue/shared';
+import 'date-fns';
+import { createLinebarId, traverseSchema } from '../utils/schema.js';
+
+function useAnchor(props, scrollbarRef, collector) {
+  const __currentAnchor = ref("");
+  const formHeight = computed(() => {
+    if (isNumber(props.maxHeight))
+      return props.maxHeight + "px";
+    return props.maxHeight;
+  });
+  const anchorIdList = ref([]);
+  function generateAnchorList(schema) {
+    anchorIdList.value.length = 0;
+    traverseSchema(schema, (_schema) => {
+      var _a;
+      if (_schema["x-component"] === "LINEBAR") {
+        anchorIdList.value.push({ title: _schema.title, name: ((_a = _schema.name) == null ? void 0 : _a.toString()) || "" });
+      }
+    });
+  }
+  let scrollLock = false;
+  async function scrollTo(id) {
+    scrollLock = true;
+    try {
+      if (!scrollbarRef.value)
+        return;
+      collector.trigger(FormItemLineBarDepKeyPrepend + id, true);
+      await nextTick();
+      const targetAnchor = scrollbarRef.value.querySelector(`#${createLinebarId(id)}`);
+      if (!targetAnchor)
+        return;
+      await new Promise((resolve) => {
+        doAnimation(scrollbarRef.value.scrollTop, targetAnchor.offsetTop, 300, (top) => {
+          var _a;
+          (_a = scrollbarRef.value) == null ? void 0 : _a.scrollTo({ top });
+        }, "easeInSine", () => setTimeout(resolve, 300));
+      });
+    } finally {
+      scrollLock = false;
+    }
+  }
+  const onScroll = useDebounceFn(function() {
+    var _a;
+    if (scrollLock || !scrollbarRef.value)
+      return;
+    const { scrollTop, clientHeight } = scrollbarRef.value;
+    const result = anchorIdList.value.find((anchor, idx, arr) => {
+      const nextAnchor = arr[idx + 1];
+      if (!nextAnchor)
+        return true;
+      const node = scrollbarRef.value.querySelector(`#${createLinebarId(nextAnchor.name)}`);
+      if (!node)
+        return;
+      return node.offsetTop > scrollTop + clientHeight / 2;
+    }) || anchorIdList.value[anchorIdList.value.length - 1];
+    __currentAnchor.value = (_a = result == null ? void 0 : result.name) != null ? _a : "";
+  }, 300);
+  watch(anchorIdList, (_anchorIdList) => {
+    var _a, _b;
+    __currentAnchor.value = (_b = (_a = _anchorIdList[0]) == null ? void 0 : _a.name) != null ? _b : "";
+  }, { deep: true, immediate: true });
+  const currentAnchor = computed({
+    get() {
+      return __currentAnchor.value;
+    },
+    async set(id) {
+      __currentAnchor.value = id;
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      await scrollTo(id);
+    }
+  });
+  return {
+    currentAnchor,
+    onScroll,
+    formHeight,
+    anchorIdList,
+    generateAnchorList,
+    scrollbarRef,
+    scrollTo
+  };
+}
+
+export { useAnchor };

package/es/components/form-render/src/hooks/useAsyncQueue.d.ts

@@ -0,0 +1,45 @@
+import { AnyObject, UndefinedAble } from '../../../../../es/shared/types';
+import { FormAsyncQueueItem } from '../types';
+declare type ProcessorOption = Partial<{
+    afterRequest(key: string, payload?: unknown): AnyObject[];
+    beforeRequest(key: string, params?: unknown): UndefinedAble<AnyObject> | void;
+}>;
+interface EntryCallback {
+    (err?: any, result?: any): void;
+}
+interface Processor<T, R = any> {
+    (item: T, cb: (err?: any, result?: R) => void, removeCache: () => void): void;
+}
+interface AsyncQueueOptions<T = any, K = any> {
+    name: string;
+    processor: Processor<T>;
+    parallelism: number;
+    getKey: (item: T) => K;
+}
+/**
+ * @constructor 并发控制器
+ */
+export declare class AsyncQueue<T = any, K = any, R = any> {
+    readonly name: string;
+    private readonly processor;
+    private readonly getKey;
+    private readonly parallelism;
+    private readonly _queued;
+    private readonly _entries;
+    private _activeTasks;
+    private _processingLock;
+    private _stopped;
+    constructor({ name, processor, getKey, parallelism }: AsyncQueueOptions<T>);
+    add(item: T, callback: EntryCallback): void;
+    addAsync(item: T): Promise<R>;
+    private _ensureProcessing;
+    private _startProcess;
+    private _handlerResult;
+}
+export declare function useAsyncQueue(): {
+    create: (parallelism?: number, option?: ProcessorOption) => AsyncQueue<FormAsyncQueueItem, any, {
+        label: string;
+        value: unknown;
+    }[]>;
+};
+export {};

package/es/components/form-render/src/hooks/useAsyncQueue.js

@@ -0,0 +1,144 @@
+import { isFunction } from 'lodash-es';
+import '../../index.js';
+import { useCommonLog } from './useCommonLog.js';
+import { useFormRequest } from './useFormRequest.js';
+
+class AsyncQueueEntry {
+  constructor(item, key, callback) {
+    this.item = item;
+    this.key = key;
+    this.state = 0 /* PENDING */;
+    this.callback = callback;
+  }
+}
+class ArrayQueue {
+  constructor(items) {
+    this._list = items ? Array.from(items) : [];
+  }
+  enqueue(item) {
+    this._list.push(item);
+  }
+  dequeue() {
+    return this._list.shift();
+  }
+}
+class AsyncQueue {
+  constructor({ name, processor, getKey, parallelism }) {
+    this._queued = new ArrayQueue();
+    this._entries = /* @__PURE__ */ new Map();
+    this._activeTasks = 0;
+    this._processingLock = false;
+    this._stopped = false;
+    this.name = name;
+    this.processor = processor;
+    this.getKey = getKey;
+    this.parallelism = parallelism || 100;
+  }
+  add(item, callback) {
+    if (this._stopped)
+      return callback(new Error("Queue was stopped"));
+    const key = this.getKey(item);
+    if (this._entries.has(key)) {
+      const entry = this._entries.get(key);
+      if (entry.state === 1 /* DONE */) {
+        setTimeout(() => {
+          callback && callback(entry.error, entry.result);
+        });
+      } else if (!entry.callbacks) {
+        entry.callbacks = [callback];
+      } else {
+        entry.callbacks.push(callback);
+      }
+      return;
+    }
+    const newEntry = new AsyncQueueEntry(item, key, callback);
+    this._entries.set(key, newEntry);
+    this._queued.enqueue(newEntry);
+    if (!this._processingLock) {
+      this._processingLock = true;
+      Promise.resolve().then(this._ensureProcessing.bind(this));
+    }
+  }
+  addAsync(item) {
+    return new Promise((resolve, reject) => {
+      this.add(item, (err, result) => {
+        err && reject(err);
+        resolve(result);
+      });
+    });
+  }
+  _ensureProcessing() {
+    while (this._activeTasks < this.parallelism) {
+      const entry = this._queued.dequeue();
+      if (!entry)
+        break;
+      this._activeTasks++;
+      entry.state = 0 /* PENDING */;
+      this._startProcess(entry);
+    }
+    this._processingLock = false;
+  }
+  _startProcess(entry) {
+    this.processor(entry.item, (e, r) => {
+      if (e) {
+        this._handlerResult(entry, e);
+        return;
+      }
+      this._handlerResult(entry, e, r);
+    }, () => this._entries.delete(entry.key));
+  }
+  _handlerResult(entry, e, r) {
+    const callback = entry.callback;
+    entry.state = 1 /* DONE */;
+    entry.callback = void 0;
+    entry.result = r;
+    entry.error = e;
+    this._activeTasks--;
+    callback && callback(e, r);
+    if (entry.callbacks) {
+      entry.callbacks.forEach((cb) => cb(e, r));
+    }
+    if (!this._processingLock) {
+      this._processingLock = true;
+      Promise.resolve().then(this._ensureProcessing.bind(this));
+    }
+  }
+}
+function useAsyncQueue() {
+  const { getHttpInstance } = useFormRequest();
+  function create(parallelism = 3, option) {
+    return new AsyncQueue({
+      name: "FormRenderAsyncQueue",
+      parallelism,
+      async processor({ key, method = "post", params, url }, cb, removeCache) {
+        var _a;
+        const http = getHttpInstance();
+        if (!http) {
+          useCommonLog().invalidHttpInstanceLog();
+          cb();
+          removeCache();
+          return;
+        }
+        try {
+          if (option && isFunction(option.beforeRequest)) {
+            params = (_a = option.beforeRequest(key, params)) != null ? _a : {};
+          }
+          let res = await http[method](url, params);
+          if (option && isFunction(option.afterRequest)) {
+            res = option.afterRequest(key, res);
+          }
+          cb(void 0, Array.isArray(res) ? res : []);
+        } catch (e) {
+          cb(new Error(`Request error => ${e}`));
+          removeCache();
+        }
+      },
+      getKey({ url, method = "post", params }) {
+        return url + method + JSON.stringify(params || {});
+      }
+    });
+  }
+  return { create };
+}
+
+export { AsyncQueue, useAsyncQueue };