cnhis-design-vue 3.1.14-beta.2 → 3.1.14-beta.5

package/es/packages/form-render/src/types/index.d.ts

@@ -0,0 +1,50 @@
+import { AnyObject } from '../../../../../es/src/types';
+import { DataField, Field } from '@formily/core';
+import { FIELD_BUSINESS_TYPE } from '../../../../../es/packages/form-render/src/constants';
+import { FieldItem } from '../types';
+import { AsyncQueue } from '../hooks';
+export * from './fieldItem';
+export interface FieldVisitorContext {
+    field: FieldItem;
+    replace(f: FieldItem): void;
+    insertBefore(f: FieldItem | FieldItem[]): void;
+    insertAfter(f: FieldItem | FieldItem[]): void;
+}
+export declare type FieldVisitor = Record<string, (context: FieldVisitorContext) => void>;
+export declare type FormRequestType = 'post' | 'get' | 'patch' | 'delete' | 'put';
+export interface FormAsyncQueueItem {
+    key: any;
+    url: string;
+    method: FormRequestType;
+    params?: AnyObject;
+}
+export declare type FormAsyncQueue = AsyncQueue<FormAsyncQueueItem, any, AnyObject[]>;
+export declare type AgeContext = Record<'age' | 'day' | 'month' | 'year', number>;
+export declare type IdCardParseInfo = Record<'sex' | 'birthday', string> & AgeContext;
+export declare type FormRenderExpose = {
+    validate(path?: string): Promise<void>;
+    getFormValues(): AnyObject;
+    setFieldState(path: string, setter: (field: Field) => void): void;
+    resetFields(path?: string): void;
+    queryWidget(key: string): Promise<{
+        widgetElement: HTMLInputElement | null;
+        widgetElementList: HTMLInputElement[];
+        decoratorElement: HTMLElement | null;
+    }>;
+};
+export declare type FormChangeContext = Partial<{
+    currentOption: AnyObject;
+}>;
+export declare type FormChangePayload = {
+    value: any;
+    fieldKey: string;
+    fieldName: string;
+    fieldInstance: DataField;
+    context: FormChangeContext;
+};
+export declare type FormBusinessFilter = (payload: {
+    fieldKey: string;
+    value: unknown;
+    type: FIELD_BUSINESS_TYPE;
+    context?: any;
+}) => unknown;

package/es/packages/form-render/src/types/index.js

@@ -0,0 +1 @@
+

package/es/packages/form-render/src/utils/index.d.ts

@@ -0,0 +1,30 @@
+import { AnyObject, ArrayAble } from '../../../../../es/src/types';
+import { ISchema } from '@formily/json-schema/esm/types';
+import { GeneralField } from '@formily/core';
+import { InjectionKey, VNode } from 'vue';
+import { AgeContext, FieldItem, IdCardParseInfo } from '../types';
+export declare function formRenderLog(message: string, type?: keyof Console): void;
+export declare function arrayed<T>(maybeArray: T): T extends Array<any> ? T : [T];
+export declare function assignUpdateValue(props: AnyObject, field: GeneralField): {
+    [x: string]: any;
+};
+export declare function transformDateFormat(format?: string): "date" | "datetime";
+export declare function isIdCard(idCardNo: string): boolean;
+export declare function isMobile(mobile: string): boolean;
+export declare function parseBirthday(birthday: string): AgeContext;
+export declare function parseIdCard(idCardNo: string): IdCardParseInfo;
+export declare function injectOrProvide<T>(key: InjectionKey<T>, creator: () => T): T;
+export declare function generateUrlParams(field: GeneralField, dependKeys?: string | string[]): AnyObject;
+export declare function traverseSchema(schema: ISchema, handler: (_s: ISchema) => void): void;
+export declare function uuidGenerator(): string;
+export declare function createSlot(renderer: unknown, props: any): Record<string, () => ArrayAble<VNode>> | {
+    default(): any;
+};
+export declare function queryDecorator(key: string, wrapperElement: HTMLElement, formUUID: string): HTMLElement | null;
+export declare function queryInput(decoratorElement?: HTMLElement | null): {
+    widgetElement: HTMLInputElement | null | undefined;
+    widgetElementList: HTMLInputElement[];
+};
+export declare function getParentLinebar(key: string, fieldList: FieldItem[]): string | null;
+export declare function createLinebarId(id: string): string;
+export declare function fieldKeyEscape(fieldList: FieldItem[]): string;

package/es/packages/form-render/src/utils/index.js

@@ -0,0 +1,146 @@
+import { isObject, isFunction } from 'lodash-es';
+import { FIELD_SEX_VALUE } from '../constants/index.js';
+import { isField } from '@formily/core';
+import differenceInDays from '../../../../node_modules/date-fns/esm/differenceInDays/index.js';
+import differenceInMonths from '../../../../node_modules/date-fns/esm/differenceInMonths/index.js';
+import differenceInYears from '../../../../node_modules/date-fns/esm/differenceInYears/index.js';
+import '../../../../node_modules/date-fns/esm/parse/_lib/parsers/index.js';
+import { inject, provide } from 'vue';
+
+function formRenderLog(message, type = "log") {
+  console[type](`[FormRender]: ${message}`);
+}
+function arrayed(maybeArray) {
+  if (Array.isArray(maybeArray))
+    return maybeArray;
+  return [maybeArray];
+}
+function assignUpdateValue(props, field) {
+  const _props = { ...props };
+  if (isField(field)) {
+    Object.assign(_props, {
+      "onUpdate:value"(value) {
+        field.setValue(value);
+      }
+    });
+  }
+  return _props;
+}
+function transformDateFormat(format = "") {
+  return format.includes("HH") ? "datetime" : "date";
+}
+function isIdCard(idCardNo) {
+  return /^\d{6}(((19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|x|X))|(\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}))$/.test(idCardNo);
+}
+function isMobile(mobile) {
+  return /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(mobile);
+}
+function parseBirthday(birthday) {
+  const result = {};
+  const d = new Date();
+  const birthDate = new Date(birthday);
+  result.day = differenceInDays(d, birthDate);
+  result.month = differenceInMonths(d, birthDate);
+  result.age = result.year = differenceInYears(d, birthDate);
+  return result;
+}
+function parseIdCard(idCardNo) {
+  const parseInner = (certificateNo, idxSexStart, birthYearSpan) => {
+    const res = {};
+    const idxSex = 1 - certificateNo.substr(idxSexStart, 1) % 2;
+    res.sex = idxSex === 1 ? FIELD_SEX_VALUE.FEMALE : FIELD_SEX_VALUE.MALE;
+    const year = (birthYearSpan == 2 ? "19" : "") + certificateNo.substr(6, birthYearSpan);
+    const month = certificateNo.substr(6 + birthYearSpan, 2);
+    const day = certificateNo.substr(8 + birthYearSpan, 2);
+    res.birthday = year + "-" + month + "-" + day;
+    const d = new Date();
+    const monthFloor = d.getMonth() + 1 < parseInt(month, 10) || d.getMonth() + 1 == parseInt(month, 10) && d.getDate() < parseInt(day, 10) ? 1 : 0;
+    Object.assign(res, parseBirthday(res.birthday));
+    res.age = res.year = d.getFullYear() - parseInt(year, 10) - monthFloor;
+    return res;
+  };
+  return parseInner(idCardNo, idCardNo.length == 15 ? 14 : 16, idCardNo.length == 15 ? 2 : 4);
+}
+function injectOrProvide(key, creator) {
+  let injected = inject(key, null);
+  if (!injected) {
+    injected = creator();
+    provide(key, injected);
+  }
+  return injected;
+}
+function generateUrlParams(field, dependKeys) {
+  const result = {};
+  if (dependKeys) {
+    arrayed(dependKeys).forEach((dependKey) => {
+      const _field = field.query(dependKey).take();
+      if (isField(_field)) {
+        result[dependKey] = _field.value;
+      }
+    });
+  }
+  return result;
+}
+function traverseSchema(schema, handler) {
+  handler(schema);
+  if (isObject(schema.properties)) {
+    Object.values(schema.properties).forEach((_s) => {
+      traverseSchema(_s, handler);
+    });
+  }
+}
+function uuidGenerator() {
+  return "key" + "xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function createSlot(renderer, props) {
+  if (isObject(renderer) && !isFunction(renderer)) {
+    const result = {};
+    Object.entries(renderer).forEach(([key, renderer2]) => {
+      isFunction(renderer2) && (result[key] = () => renderer2(props));
+    });
+    return result;
+  }
+  return {
+    default() {
+      return isFunction(renderer) ? renderer(props) : renderer;
+    }
+  };
+}
+function queryDecorator(key, wrapperElement, formUUID) {
+  return wrapperElement.querySelector(`#${formUUID}-${key}`);
+}
+function queryInput(decoratorElement) {
+  var _a;
+  return {
+    widgetElement: decoratorElement == null ? void 0 : decoratorElement.querySelector("input"),
+    widgetElementList: Array.from((_a = decoratorElement == null ? void 0 : decoratorElement.querySelectorAll("input")) != null ? _a : [])
+  };
+}
+function getParentLinebar(key, fieldList) {
+  let result = null;
+  for (const fieldItem of fieldList) {
+    if (fieldItem.val_key === key) {
+      if (isLinebar(fieldItem))
+        result = null;
+      break;
+    }
+    if (isLinebar(fieldItem)) {
+      result = fieldItem.val_key;
+    }
+  }
+  return result;
+  function isLinebar(field) {
+    return field.html_type === "LINEBAR";
+  }
+}
+function createLinebarId(id) {
+  return `id-${id}`;
+}
+function fieldKeyEscape(fieldList) {
+  return fieldList.map((f) => f.val_key).join("-").replace(/[.]/g, "_");
+}
+
+export { arrayed, assignUpdateValue, createLinebarId, createSlot, fieldKeyEscape, formRenderLog, generateUrlParams, getParentLinebar, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, queryDecorator, queryInput, transformDateFormat, traverseSchema, uuidGenerator };

package/es/packages/form-render/style/index.css

@@ -0,0 +1,140 @@
+.form-render__wrapper {
+  display: grid !important;
+  grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
+  align-items: start;
+  gap: 0 16px;
+  max-height: var(--form-height);
+  overflow-y: auto;
+  position: relative;
+}
+.form-render__formItem {
+  grid-column: span var(--form-item-column) / span var(--form-item-column);
+}
+.form-render__formItem .n-date-picker {
+  width: 100%;
+}
+.form-render__formItemLabel {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.form-render__formItemLabel--text.has-annotation {
+  margin-right: 15px;
+}
+.form-render__formItemLabel--icon {
+  display: inline-flex;
+  align-items: center;
+}
+.form-render__formItemLabel--annotation {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: calc(var(--icon-right) * 1px);
+  cursor: pointer;
+  color: #0067ee;
+  font-size: 16px;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+}
+.form-render__formItemLabel--annotation.is-active {
+  color: rgba(255, 152, 40);
+}
+.form-render__linebar {
+  grid-column: span var(--column) / span var(--column);
+}
+.form-render__linebarHeader {
+  cursor: pointer;
+  display: flex;
+  background: #f2f2f2;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  align-items: center;
+  padding: 0 16px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+}
+.form-render__linebarItem {
+  display: grid !important;
+  grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
+  align-items: start;
+  gap: 0 16px;
+}
+.form-render__inputGroup {
+  grid-column: span var(--column) / span var(--column);
+  display: flex;
+  align-items: flex-start;
+}
+.form-render__inputGroup > div {
+  flex: 1;
+}
+.form-render__inputGroup > div:not(:last-of-type) .n-input__border,
+.form-render__inputGroup > div:not(:last-of-type) .n-base-selection__border {
+  border-right: 0;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.form-render__inputGroup > div:last-of-type .n-input__border,
+.form-render__inputGroup > div:last-of-type .n-base-selection__border {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.form-render__combination {
+  width: 100%;
+}
+.form-render__combinationHeader {
+  display: flex;
+  gap: 12px;
+}
+.form-render__combinationHeader > h3 {
+  font-size: 16px;
+  font-weight: 700;
+  padding: 0;
+  margin: 0;
+}
+.form-render__combinationHeaderText {
+  font-size: 16px;
+  font-weight: 500;
+}
+.form-render__combinationClose {
+  position: absolute;
+  right: 0;
+  top: 5px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: red;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  vertical-align: middle;
+  font-size: 16px;
+}
+.form-render__combinationContent {
+  position: relative;
+}
+.form-render__complex {
+  width: 100%;
+}
+.form-render__complexContent--grid {
+  display: grid !important;
+  grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
+  align-items: start;
+  gap: 0 16px;
+}
+.form-render__complexContent--flex {
+  display: flex !important;
+  gap: 0 8px;
+}
+.form-render .n-form-item-label {
+  display: inline-flex;
+}
+.form-render .n-form-item-label [form-item-hover-show='true'] {
+  visibility: hidden;
+}
+.form-render .n-form-item-label:hover [form-item-hover-show='true'] {
+  visibility: visible;
+}