cnhis-design-vue 3.1.24-beta.7 → 3.1.24-beta.8

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

@@ -0,0 +1,156 @@
+import { defineComponent, computed, ref, inject, watch, createVNode } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { isString, cloneDeep, isEqual } from 'lodash-es';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { InjectAsyncQueue, InjectionChangeContextCollector } from '../../constants/index.js';
+import '../../../../../shared/utils/index.js';
+import '../../../index.js';
+import { formRenderLog, optionMatcher } from '../../utils/index.js';
+import { useFormRequest } from '../../hooks/useFormRequest.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 '../../hooks/useFormValidator.js';
+import '@formily/core';
+import '@vue/shared';
+import { connect, mapProps } from '@formily/vue';
+import './index.js';
+import { NSelect } from 'naive-ui';
+import { visitedDecorator, assignUpdateValue, assignClearBindVisited } from '../../utils/schema.js';
+
+const script = defineComponent({
+  name: "FormSearch",
+  props: {
+    value: {
+      type: String
+    },
+    autograph: {
+      type: String,
+      required: true
+    },
+    lazyRequest: {
+      type: Boolean,
+      default: true
+    },
+    requestCache: {
+      type: Boolean,
+      default: true
+    },
+    wordbook: {
+      type: Object,
+      required: true
+    },
+    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, _c;
+      return (_c = (_b = (_a = props.wordbook) == null ? void 0 : _a.render_key) == null ? void 0 : _b[0]) != null ? _c : "text";
+    });
+    const valueKey = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.wordbook) == null ? void 0 : _a.value_key) != null ? _b : "value";
+    });
+    const {
+      field,
+      fieldKey
+    } = useFormField();
+    const asyncQueue = inject(InjectAsyncQueue);
+    const {
+      getSearchRequestInfo
+    } = useFormRequest();
+    const fetchData = useDebounceFn(async function(content) {
+      lastSearch.value = content || "";
+      if (remoteOptions.value && props.requestCache)
+        return;
+      try {
+        remoteOptions.value = await asyncQueue.addAsync(createParams(props.wordbook, props.autograph, field.value, fieldKey.value));
+      } catch (e) {
+        isString(e) && formRenderLog(e);
+      }
+      function createParams(wordbook, autograph, field2, key2) {
+        const params = {
+          autograph,
+          wordbookId: wordbook.id,
+          wordbookType: wordbook.type,
+          fieldKeys: wordbook.search_key,
+          keyword: "",
+          page: 1
+        };
+        return {
+          ...getSearchRequestInfo(),
+          params,
+          key: key2,
+          cache: props.requestCache
+        };
+      }
+    }, 300);
+    const parsedOptions = computed(() => {
+      return remoteOptions.value ? optionMatcher(remoteOptions.value, lastSearch.value, labelKey.value) : [];
+    });
+    const changeContextCollector = inject(InjectionChangeContextCollector);
+    changeContextCollector.setContext(fieldKey.value, (v) => {
+      return {
+        currentOption: cloneDeep(getCurrentOption(v))
+      };
+      function getCurrentOption(v2) {
+        return parsedOptions.value.find((option) => option[valueKey.value] === v2);
+      }
+    });
+    watch(() => props.wordbook, (wordbook, oldWordbook) => {
+      if (isEqual(wordbook, oldWordbook))
+        return;
+      remoteOptions.value = null;
+      if (!wordbook)
+        return;
+      (valueRef.value || !props.lazyRequest) && fetchData();
+    }, {
+      immediate: true
+    });
+    const {
+      injectValueValidate,
+      injectValueWatchFromEmpty,
+      injectValueBindKey
+    } = useCommonInjection();
+    injectValueWatchFromEmpty(valueRef, fetchData);
+    injectValueValidate(valueRef);
+    const key = injectValueBindKey(valueRef);
+    return () => createVNode(NSelect, {
+      "remote": true,
+      "filterable": true,
+      "key": key.value,
+      "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": visitedDecorator(field, props.onFocus)
+    }, slots);
+  }
+});
+const SEARCH = connect(script, mapProps(assignUpdateValue, assignClearBindVisited));
+
+export { SEARCH };

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

@@ -0,0 +1,58 @@
+import { AnyObject, Func } from '../../../../../../es/shared/types';
+import { UrlConfig } from '../../../../../../es/components/form-render';
+import { PropType } from 'vue';
+export declare const SEARCH_CASCADE: import("vue").DefineComponent<{
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    depth: {
+        type: (NumberConstructor | StringConstructor)[];
+    };
+    urlConfig: {
+        type: PropType<UrlConfig>;
+    };
+    requestCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onFocus: {
+        type: PropType<Func<any[], any>>;
+    };
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {};
+    value: {};
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    depth: {
+        type: (NumberConstructor | StringConstructor)[];
+    };
+    urlConfig: {
+        type: PropType<UrlConfig>;
+    };
+    requestCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onFocus: {
+        type: PropType<Func<any[], any>>;
+    };
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {};
+    value: {};
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    options: AnyObject[];
+    requestCache: boolean;
+    filterable: boolean;
+}>;

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

@@ -0,0 +1,235 @@
+import { defineComponent, ref, computed, inject, watch, createVNode } from 'vue';
+import { isField } from '@formily/core';
+import { isEqual, isArray } from 'lodash-es';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { InjectAsyncQueue } from '../../constants/index.js';
+import '../../../../../shared/utils/index.js';
+import '../../../index.js';
+import '../../utils/index.js';
+import { useFormField } from '../../hooks/useFormField.js';
+import '@vueuse/core';
+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 '../../hooks/useFormValidator.js';
+import '@vue/shared';
+import { connect, mapProps } from '@formily/vue';
+import './index.js';
+import { NCascader } from 'naive-ui';
+import { assignUpdateValue, traverseDependKey } from '../../utils/schema.js';
+
+const script = defineComponent({
+  name: "FormCascader",
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    depth: {
+      type: [Number, String]
+    },
+    urlConfig: {
+      type: Object
+    },
+    requestCache: {
+      type: Boolean,
+      default: true
+    },
+    onFocus: {
+      type: Function
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    onChange: {},
+    value: {}
+  },
+  emits: ["update:value"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const remoteOptions = ref();
+    const {
+      field,
+      title
+    } = useFormField();
+    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 valueRef = computed(() => {
+      try {
+        const parsed = Array.isArray(props.value) ? props.value : JSON.parse(props.value || "");
+        if (!Array.isArray(parsed) || !parsed.length)
+          return null;
+        return parsed.map((option) => option[labelKey.value]).join(" / ");
+      } catch (e) {
+        return null;
+      }
+    });
+    function updateValue(_, __, options) {
+      emit("update:value", options.map(optionSimplify));
+      function optionSimplify(option) {
+        return {
+          ...option,
+          label: option[labelKey.value],
+          children: void 0,
+          parent: void 0
+        };
+      }
+    }
+    const asyncQueue = inject(InjectAsyncQueue);
+    function fetchData(option) {
+      return props.filterable ? fetchFullData() : fetchGradeData(option);
+    }
+    async function fetchFullData() {
+      if (!props.urlConfig || remoteOptions.value && props.requestCache)
+        return;
+      const data = await asyncQueue.addAsync({
+        ...props.urlConfig,
+        params: {
+          lvlnr: 1 + ""
+        },
+        key: title.value,
+        cache: props.requestCache
+      });
+      remoteOptions.value = data.map((item) => optionNormalize(item, 0));
+      function optionNormalize(data2, depth) {
+        const result = {
+          [labelKey.value]: data2[labelKey.value],
+          [valueKey.value]: data2[valueKey.value],
+          depth: depth + 1,
+          isLeaf: true
+        };
+        if (isArray(data2.children)) {
+          result.children = data2.children.map((child) => optionNormalize(child, depth + 1));
+          result.isLeaf = !data2.children.length;
+        }
+        return result;
+      }
+    }
+    async function fetchGradeData(option) {
+      if (notNeedToFetchData(props, option))
+        return;
+      const data = await asyncQueue.addAsync(createRequestParams(deepFor(option), configFor(props), title.value, option));
+      if (!data.length && option) {
+        option.isLeaf = true;
+        updateValue(null, null, getOptionChain(option));
+        show.value = false;
+        return;
+      }
+      const result = data.map((item) => optionNormalize(item, deepFor(option)));
+      option ? option.children = result : remoteOptions.value = result;
+      function notNeedToFetchData(props2, option2) {
+        return !configFor(props2) || !option2 && remoteOptions.value && props2.requestCache || deepFor(option2) >= deepFor(props2) - 1;
+      }
+      function createRequestParams(deep, config, key2, option2) {
+        const params = {
+          lvlnr: deep + 1 + ""
+        };
+        if (option2 && config.dependKey) {
+          traverseDependKey(config.dependKey, (dependKey, valueKey2) => {
+            params[valueKey2] = option2[dependKey];
+          });
+        }
+        return {
+          params,
+          ...config,
+          key: key2,
+          cache: props.requestCache
+        };
+      }
+      function getOptionChain(option2) {
+        let currentOption = option2;
+        const result2 = [option2];
+        while (currentOption.parent) {
+          result2.unshift(currentOption.parent);
+          currentOption = currentOption.parent;
+        }
+        return result2;
+      }
+      function optionNormalize(data2, depth) {
+        return {
+          [labelKey.value]: data2[labelKey.value],
+          [valueKey.value]: data2[valueKey.value],
+          depth: depth + 1,
+          parent: option,
+          isLeaf: depth + 2 >= deepFor(props)
+        };
+      }
+      function configFor(target) {
+        return target.urlConfig;
+      }
+      function deepFor(target) {
+        var _a;
+        return (_a = target == null ? void 0 : target.depth) != null ? _a : -1;
+      }
+    }
+    const {
+      injectValueValidate,
+      injectValueWatchFromEmpty,
+      injectValueBindKey
+    } = useCommonInjection();
+    injectValueWatchFromEmpty(() => props.value, fetchData);
+    injectValueValidate(() => props.value);
+    watch(() => props.urlConfig, async (config, oldConfig) => {
+      if (isEqual(config, oldConfig))
+        return;
+      remoteOptions.value = null;
+      await fetchData();
+    });
+    const show = ref(false);
+    function updateShow(v) {
+      show.value = !!v;
+      v && fetchData();
+    }
+    const parsedOptions = computed(() => {
+      return remoteOptions.value || props.options || [];
+    });
+    function visitedDecorator(onFocus) {
+      return (...args) => {
+        if (isField(field.value)) {
+          field.value.visited = true;
+        }
+        onFocus == null ? void 0 : onFocus(...args);
+      };
+    }
+    const remote = computed(() => !props.filterable);
+    const key = injectValueBindKey(valueRef);
+    return () => {
+      return createVNode(NCascader, {
+        "key": key.value,
+        "remote": remote.value,
+        "filterable": props.filterable,
+        "checkStrategy": "child",
+        "show": !!show.value,
+        "onUpdate:show": updateShow,
+        "value": valueRef.value,
+        "onUpdate:value": updateValue,
+        "labelField": labelKey.value,
+        "valueField": valueKey.value,
+        "options": parsedOptions.value,
+        "onLoad": fetchData,
+        "onFocus": visitedDecorator(props.onFocus)
+      }, slots);
+    };
+  }
+});
+const SEARCH_CASCADE = connect(script, mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+
+export { SEARCH_CASCADE };

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

@@ -0,0 +1,56 @@
+import { AnyObject, ArrayAble, Func } from '../../../../../../es/shared/types';
+import { UrlConfig } from '../../types';
+import { PropType } from 'vue';
+export declare const SELECT: import("vue").DefineComponent<{
+    value: {
+        type: PropType<ArrayAble<string>>;
+    };
+    lazyRequest: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    requestCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    urlConfig: {
+        type: PropType<UrlConfig>;
+    };
+    onFocus: {
+        type: PropType<Func<any[], any>>;
+    };
+    onChange: {};
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<ArrayAble<string>>;
+    };
+    lazyRequest: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    requestCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    urlConfig: {
+        type: PropType<UrlConfig>;
+    };
+    onFocus: {
+        type: PropType<Func<any[], any>>;
+    };
+    onChange: {};
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    options: AnyObject[];
+    lazyRequest: boolean;
+    requestCache: boolean;
+}>;

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

@@ -0,0 +1,175 @@
+import { defineComponent, computed, ref, inject, watch, createVNode } from 'vue';
+import { isField } from '@formily/core';
+import { useDebounceFn } from '@vueuse/core';
+import { isString, cloneDeep, isEqual } from 'lodash-es';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { InjectAsyncQueue, InjectionChangeContextCollector, InjectionFormItemDepsCollector } from '../../constants/index.js';
+import '../../../../../shared/utils/index.js';
+import '../../../index.js';
+import { formRenderLog, optionMatcher } 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 '../../hooks/useFormValidator.js';
+import '@vue/shared';
+import { connect, mapProps } from '@formily/vue';
+import './index.js';
+import { NSelect } from 'naive-ui';
+import { traverseDependKey, visitedDecorator, assignUpdateValue, assignClearBindVisited } from '../../utils/schema.js';
+
+const script = defineComponent({
+  name: "FormSelect",
+  props: {
+    value: {
+      type: [String, Array]
+    },
+    lazyRequest: {
+      type: Boolean,
+      default: true
+    },
+    requestCache: {
+      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);
+    const fetchData = useDebounceFn(async function(content) {
+      lastSearch.value = content || "";
+      if (!configFor(props)) {
+        return remoteOptions.value = null;
+      }
+      if (remoteOptions.value && props.requestCache)
+        return;
+      try {
+        remoteOptions.value = await asyncQueue.addAsync(await createParams(configFor(props), field.value, fieldKey.value));
+      } catch (e) {
+        isString(e) && formRenderLog(e);
+      }
+      async function createParams(config, field2, key2) {
+        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: key2,
+          cache: props.requestCache
+        };
+      }
+      function configFor(target) {
+        return target.urlConfig;
+      }
+    }, 300);
+    const parsedOptions = computed(() => {
+      if (remoteOptions.value)
+        return optionMatcher(remoteOptions.value, lastSearch.value, labelKey.value);
+      if (!Array.isArray(props.options))
+        return [];
+      return optionMatcher(props.options, lastSearch.value, labelKey.value);
+    });
+    const changeContextCollector = inject(InjectionChangeContextCollector);
+    changeContextCollector.setContext(fieldKey.value, (v) => {
+      return {
+        currentOption: cloneDeep(getCurrentOption(v))
+      };
+      function getCurrentOption(v2) {
+        return parsedOptions.value.find((option) => option[valueKey.value] === v2);
+      }
+    });
+    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,
+      injectValueBindKey
+    } = useCommonInjection();
+    injectValueWatchFromEmpty(valueRef, fetchData);
+    injectValueValidate(valueRef);
+    const key = injectValueBindKey(valueRef);
+    return () => createVNode(NSelect, {
+      "key": key.value,
+      "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": visitedDecorator(field, props.onFocus)
+    }, slots);
+  }
+});
+const SELECT = connect(script, mapProps({
+  dataSource: "options"
+}, assignUpdateValue, assignClearBindVisited));
+
+export { SELECT };

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

@@ -0,0 +1,18 @@
+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: {};
+    };
+};
+export declare const LINE_BREAKS: () => JSX.Element;