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

package/es/packages/form-config/src/constants/index.d.ts

@@ -0,0 +1,28 @@
+import { WithUndefined } from '../../../../../es/src/types';
+import { InjectionKey, Ref } from 'vue';
+import { FieldItem } from '../../../../../es/packages/form-render';
+export declare const WidgetTextMap: {
+    INPUT: string;
+    SELECT: string;
+    TEXTAREA: string;
+    CASCADER: string;
+    SWITCH: string;
+    RADIO: string;
+    TEXT: string;
+    BUTTON: string;
+    CHECKBOX: string;
+    LINEBAR: string;
+    LINE_BREAKS: string;
+};
+export declare enum EditAbleField {
+    ALIAS = "alias",
+    TIP = "tip",
+    DEFAULT_VAL = "default_val",
+    ELEM_WIDTH = "elem_width",
+    PLACEHOLDER = "placeholder",
+    IS_SHOW = "is_show",
+    IS_NOT_FOLD = "is_not_fold",
+    IS_NULL = "is_null",
+    IS_EDIT = "is_edit"
+}
+export declare const InjectionActiveFieldItem: InjectionKey<Ref<WithUndefined<FieldItem>>>;

package/es/packages/form-config/src/constants/index.js

@@ -0,0 +1,28 @@
+const WidgetTextMap = {
+  INPUT: "\u8F93\u5165\u6846",
+  SELECT: "\u4E0B\u62C9\u6846",
+  TEXTAREA: "\u6587\u672C\u57DF",
+  CASCADER: "\u7EA7\u8054\u4E0B\u62C9\u6846",
+  SWITCH: "\u5F00\u5173",
+  RADIO: "\u5355\u9009",
+  TEXT: "\u6587\u672C",
+  BUTTON: "\u6309\u94AE",
+  CHECKBOX: "\u591A\u9009",
+  LINEBAR: "\u5206\u884C\u7B26",
+  LINE_BREAKS: "\u5206\u7EBF\u680F"
+};
+var EditAbleField = /* @__PURE__ */ ((EditAbleField2) => {
+  EditAbleField2["ALIAS"] = "alias";
+  EditAbleField2["TIP"] = "tip";
+  EditAbleField2["DEFAULT_VAL"] = "default_val";
+  EditAbleField2["ELEM_WIDTH"] = "elem_width";
+  EditAbleField2["PLACEHOLDER"] = "placeholder";
+  EditAbleField2["IS_SHOW"] = "is_show";
+  EditAbleField2["IS_NOT_FOLD"] = "is_not_fold";
+  EditAbleField2["IS_NULL"] = "is_null";
+  EditAbleField2["IS_EDIT"] = "is_edit";
+  return EditAbleField2;
+})(EditAbleField || {});
+const InjectionActiveFieldItem = Symbol("InjectionActiveFieldItem");
+
+export { EditAbleField, InjectionActiveFieldItem, WidgetTextMap };

package/es/packages/form-config/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePresetRenderer';
+export * from './useSortable';

package/es/packages/form-config/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { usePresetRenderer } from './usePresetRenderer.js';
+export { useSortable } from './useSortable.js';

package/es/packages/form-config/src/hooks/useConfigurationField.d.ts

@@ -0,0 +1,6 @@
+import { EditAbleField } from '../../../../../es/packages/form-config/src/constants';
+import { FieldItem } from '../../../../../es/packages/form-render';
+export declare function useConfigurationField(): {
+    generateFieldListByKeys: (keyList: EditAbleField[]) => FieldItem[];
+    generateFieldListByFieldItem: (fieldItem: FieldItem) => FieldItem[];
+};

package/es/packages/form-config/src/hooks/useConfigurationField.js

@@ -0,0 +1,101 @@
+import { EditAbleField } from '../../../../packages/form-config/src/constants';
+
+function useConfigurationField() {
+  const fieldMap = /* @__PURE__ */ new Map([
+    [EditAbleField.ALIAS, { alias: "\u540D\u79F0", elem_width: 12, is_null: "0", val_key: "alias", html_type: "INPUT" }],
+    [EditAbleField.TIP, { alias: "\u95EE\u53F7\u63D0\u793A", elem_width: 12, val_key: "tip", html_type: "INPUT" }],
+    [
+      EditAbleField.DEFAULT_VAL,
+      { alias: "\u9ED8\u8BA4\u503C", val_key: "default_val", elem_width: 12, html_type: "INPUT", validate: { max_length: 20 } }
+    ],
+    [
+      EditAbleField.ELEM_WIDTH,
+      {
+        alias: "\u5BBD\u5EA6",
+        fieldType: "number",
+        val_key: "elem_width",
+        html_type: "SELECT",
+        elem_width: 12,
+        option: [
+          { text: "\u6574\u884C", value: 12 },
+          { text: "5/6", value: 10 },
+          { text: "4/6", value: 8 },
+          { text: "3/6", value: 6 },
+          { text: "2/6", value: 4 },
+          { text: "1/6", value: 2 }
+        ]
+      }
+    ],
+    [
+      EditAbleField.PLACEHOLDER,
+      { alias: "\u8BF4\u660E\u6587\u672C", elem_width: 12, val_key: "placeholder", html_type: "INPUT", validate: { max_length: 30 } }
+    ],
+    [
+      EditAbleField.IS_SHOW,
+      {
+        val_key: "is_show",
+        alias: "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00",
+        html_type: "SWITCH",
+        elem_width: 12,
+        open: { describe: "\u9ED8\u8BA4\u5C55\u5F00", value: "1" },
+        close: { describe: "\u9ED8\u8BA4\u6536\u8D77", value: "0" }
+      }
+    ],
+    [
+      EditAbleField.IS_NOT_FOLD,
+      {
+        val_key: "is_not_fold",
+        alias: "\u662F\u5426\u53EF\u6298\u53E0",
+        html_type: "SWITCH",
+        elem_width: 12,
+        open: { describe: "\u53EF\u6298\u53E0", value: "0" },
+        close: { describe: "\u4E0D\u53EF\u6298\u53E0", value: "1" }
+      }
+    ],
+    [
+      EditAbleField.IS_EDIT,
+      {
+        val_key: "is_edit",
+        alias: "\u662F\u5426\u53EF\u7F16\u8F91",
+        html_type: "SWITCH",
+        elem_width: 12,
+        open: { describe: "\u53EF\u7F16\u8F91", value: "1" },
+        close: { describe: "\u4E0D\u53EF\u7F16\u8F91", value: "0" }
+      }
+    ],
+    [
+      EditAbleField.IS_NULL,
+      {
+        val_key: "is_null",
+        alias: "\u662F\u5426\u5FC5\u586B",
+        html_type: "SWITCH",
+        elem_width: 12,
+        open: { describe: "\u5FC5\u586B", value: "0" },
+        close: { describe: "\u4E0D\u5FC5\u586B", value: "1" }
+      }
+    ]
+  ]);
+  function generateFieldListByKeys(keyList) {
+    return keyList.map((key) => fieldMap.get(key));
+  }
+  function generateFieldListByFieldItem(fieldItem) {
+    const htmlMap = new Map([
+      ["LINEBAR", [EditAbleField.ALIAS, EditAbleField.ELEM_WIDTH, EditAbleField.IS_SHOW, EditAbleField.IS_NOT_FOLD]],
+      ...["LINE_BREAKS", "COMPLEX", "COMBINATION"].map((key) => [key, [EditAbleField.ALIAS, EditAbleField.ELEM_WIDTH]])
+    ]);
+    const defaultItems = [
+      EditAbleField.ALIAS,
+      EditAbleField.DEFAULT_VAL,
+      EditAbleField.ELEM_WIDTH,
+      EditAbleField.PLACEHOLDER,
+      EditAbleField.TIP,
+      EditAbleField.IS_EDIT,
+      EditAbleField.IS_NULL
+    ];
+    const keys = htmlMap.get(fieldItem.html_type) || defaultItems;
+    return generateFieldListByKeys(keys);
+  }
+  return { generateFieldListByKeys, generateFieldListByFieldItem };
+}
+
+export { useConfigurationField };

package/es/packages/form-config/src/hooks/usePresetRenderer.d.ts

@@ -0,0 +1,5 @@
+import { FieldItem } from '../../../../../es/packages/form-render';
+import { FormConfigTextFilter } from '../types';
+export declare function usePresetRenderer(textFilter: FormConfigTextFilter): {
+    getRenderer: (fieldItem: FieldItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
+};

package/es/packages/form-config/src/hooks/usePresetRenderer.js

@@ -0,0 +1,117 @@
+import { defineComponent, computed, createVNode, mergeProps, inject } from 'vue';
+import { isString, isArray, isFunction } from 'lodash-es';
+import Draggable from 'vuedraggable';
+import { InjectionActiveFieldItem, WidgetTextMap } from '../../../../packages/form-config/src/constants';
+import { useSortable } from '../../../../packages/form-config/src/hooks';
+import { NEllipsis } from 'naive-ui';
+
+function usePresetRenderer(textFilter) {
+  const renderDefaultNode = {
+    matcher: () => true,
+    renderer({
+      fieldItem
+    }) {
+      const currentActiveEditField = inject(InjectionActiveFieldItem);
+      return createVNode("section", {
+        "onClick": () => currentActiveEditField.value = fieldItem,
+        "class": {
+          "is-active": currentActiveEditField.value === fieldItem
+        }
+      }, [createVNode(NEllipsis, {
+        "class": ["form-config__renderer--default", {
+          "is-required": fieldItem.is_null === "0",
+          "is-disabled": fieldItem.is_edit === "0"
+        }]
+      }, {
+        default: () => getDisplayText()
+      })]);
+      function getDisplayText() {
+        return textFilter(fieldItem, `${fieldItem.alias}(${WidgetTextMap[fieldItem.html_type] || "\u63A7\u4EF6"})`);
+      }
+    }
+  };
+  const renderComplexNode = {
+    matcher: ["COMPLEX", "COMBINATION"],
+    renderer: defineComponent({
+      props: {
+        fieldItem: {
+          type: Object,
+          required: true
+        }
+      },
+      setup(props) {
+        function fieldFor(key) {
+          return props.fieldItem[key];
+        }
+        const classList = computed(() => {
+          return `form-config__renderer--complex form-config__renderer--complex--${fieldFor("display") || "grid"}`;
+        });
+        const style = computed(() => {
+          return {
+            "--item-column": fieldFor("elem_width"),
+            ...fieldFor("wrapperStyle")
+          };
+        });
+        function renderField(fieldItem) {
+          const Renderer = getRenderer(fieldItem);
+          return createVNode("div", {
+            "class": "form-config__displayContentItem",
+            "style": {
+              "--item-column": fieldItem.elem_width
+            }
+          }, [createVNode(Renderer, {
+            "fieldItem": fieldItem
+          }, null)]);
+        }
+        const childrenList = computed({
+          get() {
+            return fieldFor("html_type") === "COMBINATION" ? fieldFor("children") : fieldFor("properties");
+          },
+          set(v) {
+            if (fieldFor("html_type") === "COMBINATION") {
+              props.fieldItem.children = v;
+            } else {
+              props.fieldItem.properties = v;
+            }
+          }
+        });
+        const {
+          commonConfig
+        } = useSortable();
+        const DraggableComponent = Draggable;
+        return () => createVNode(DraggableComponent, mergeProps(commonConfig, {
+          "class": classList.value,
+          "style": style.value,
+          "group": fieldFor("val_key"),
+          "modelValue": childrenList.value,
+          "onUpdate:modelValue": ($event) => childrenList.value = $event
+        }), {
+          item: ({
+            element
+          }) => renderField(element)
+        });
+      }
+    })
+  };
+  const rendererWithPreset = computed(() => {
+    return [renderComplexNode, renderDefaultNode];
+  });
+  function getRenderer(fieldItem) {
+    return rendererWithPreset.value.find(({
+      matcher
+    }) => {
+      if (isString(matcher))
+        return matcher === fieldItem.html_type;
+      if (isArray(matcher))
+        return matcher.includes(fieldItem.html_type);
+      if (isFunction(matcher))
+        return matcher(fieldItem.html_type);
+      return matcher.test(fieldItem.html_type);
+    }).renderer;
+  }
+  return {
+    getRenderer
+  };
+}
+
+export { usePresetRenderer };

package/es/packages/form-config/src/hooks/useSortable.d.ts

@@ -0,0 +1,11 @@
+import Sortable from 'sortablejs';
+export declare function useSortable(): {
+    commonConfig: {
+        onMove: ({ to, from }: Sortable.SortableEvent) => void;
+        onChoose: ({ target, item }: Sortable.SortableEvent) => void;
+        onUnchoose: ({ from, to, target, item }: Sortable.SortableEvent) => void;
+        tag: string;
+        animation: string;
+        'item-key': string;
+    };
+};

package/es/packages/form-config/src/hooks/useSortable.js

@@ -0,0 +1,31 @@
+function useSortable() {
+  let timer = null;
+  function onChoose({ target, item }) {
+    timer = setTimeout(() => {
+      target.classList.add("is-choosing-area");
+      item.classList.add("is-choosing");
+    }, 200);
+  }
+  function onUnchoose({ from, to, target, item }) {
+    clearTimeout(timer);
+    [from, to, target].forEach((ele) => {
+      ele.classList.remove("is-choosing-area");
+    });
+    item.classList.remove("is-choosing");
+  }
+  let prevTo;
+  function onMove({ to, from }) {
+    if (to === from) {
+      prevTo == null ? void 0 : prevTo.classList.remove("is-choosing-area");
+      prevTo = null;
+    } else {
+      from.classList.remove("is-choosing-area");
+      prevTo = to;
+    }
+    to.classList.add("is-choosing-area");
+  }
+  const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "val_key" };
+  return { commonConfig };
+}
+
+export { useSortable };

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

@@ -0,0 +1,18 @@
+import { Component, FunctionalComponent } from 'vue';
+import { ArrayAble } from '../../../../../es/src/types';
+import { FieldItem } from '../../../../../es/packages/form-render';
+interface Matcher {
+    (type: string): boolean;
+}
+export declare type FormConfigRenderer = {
+    matcher: ArrayAble<string> | RegExp | Matcher;
+    renderer: Component | FunctionalComponent;
+};
+export interface FormConfigTextFilter {
+    (fieldItem: FieldItem, parsedText: string): string;
+}
+export interface FormConfigExpose {
+    loadData(payload: Record<'fieldList' | 'materialList', FieldItem[]>): void;
+    getData(): Record<'fieldList' | 'materialList', FieldItem[]>;
+}
+export {};

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,108 @@
+.form-config {
+  display: flex;
+  justify-content: space-between;
+}
+.form-config__material {
+  padding: 16px;
+  box-sizing: border-box;
+  width: 200px;
+  min-height: 400px;
+  background: white;
+}
+.form-config__materialHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__materialContent {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.form-config__materialContentItem {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px dashed #d9d9d9;
+  box-sizing: border-box;
+  background-color: #fafafa;
+  grid-column: span var(--item-column) / span var(--item-column);
+}
+.form-config__displayWrapper {
+  padding: 16px;
+  box-sizing: border-box;
+  flex: 1;
+  padding: 16px 0;
+}
+.form-config__displayHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__displayContent {
+  padding: 16px;
+  box-sizing: border-box;
+  height: fit-content;
+  background: #eeeeee;
+  display: grid !important;
+  grid-template-columns: repeat(12, minmax(0px, 1fr));
+  gap: 8px 16px;
+}
+.form-config__displayContentItem {
+  grid-column: span var(--item-column) / span var(--item-column);
+  position: relative;
+}
+.form-config__config {
+  padding: 16px;
+  box-sizing: border-box;
+  width: 220px;
+  background: white;
+}
+.form-config__renderer--default {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px dashed #d9d9d9;
+  box-sizing: border-box;
+  background-color: #fafafa;
+  user-select: none;
+  position: relative;
+  width: 100%;
+}
+.form-config__renderer--complex {
+  border: 1px dashed lightblue;
+  padding: 8px;
+}
+.form-config__renderer--complex--grid {
+  display: grid !important;
+  grid-template-columns: repeat(12, minmax(0px, 1fr));
+  gap: 8px 16px;
+  grid-column: span var(--item-column) / span var(--item-column);
+}
+.form-config__renderer--complex--flex {
+  display: flex;
+}
+.form-config .is-disabled {
+  background: #e5e5e5;
+}
+.form-config .is-required {
+  padding-left: 16px !important;
+}
+.form-config .is-required::before {
+  position: absolute;
+  content: '*';
+  left: 8px;
+  color: red;
+}
+.form-config .is-active {
+  color: #5585f5;
+}
+.form-config .is-choosing {
+  box-shadow: #5585f5 0 0 0 2px !important;
+}
+.form-config .is-choosing-area {
+  background: #f0f7ff;
+}

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

@@ -5,7 +5,7 @@ export declare const DATE: import("vue").DefineComponent<{
     validate: {
         type: PropType<Partial<{
             [key: string]: any;
-            obj_type: "password" | "sex" | "age" | "email" | "birthday" | "id_card" | "age_unit" | "mobile" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name";
+            obj_type: "password" | "sex" | "age" | "email" | "id_card" | "age_unit" | "mobile" | "telephone" | "birthday" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name";
             vali_obj: string;
             max_value: string | number;
             min_value: string | number;
@@ -22,7 +22,7 @@ export declare const DATE: import("vue").DefineComponent<{
     validate: {
         type: PropType<Partial<{
             [key: string]: any;
-            obj_type: "password" | "sex" | "age" | "email" | "birthday" | "id_card" | "age_unit" | "mobile" | "telephone" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name";
+            obj_type: "password" | "sex" | "age" | "email" | "id_card" | "age_unit" | "mobile" | "telephone" | "birthday" | "bank_card" | "website" | "gestational_weeks" | "gestational_stage" | "customer_name";
             vali_obj: string;
             max_value: string | number;
             min_value: string | number;

package/es/packages/form-render/src/components/renderer/formItem.js

@@ -18,7 +18,8 @@ const script = defineComponent({
     const annotation = inject(InjectionAnnotation);
     const annotationContent = computed({
       get() {
-        return annotation.value[props.propertyKey];
+        var _a, _b;
+        return (_b = (_a = annotation.value) == null ? void 0 : _a[props.propertyKey]) != null ? _b : "";
       },
       set(value) {
         annotation.value = {

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

@@ -51,7 +51,6 @@ const script = defineComponent({
       emit("update:value", v);
     }
     const {
-      title,
       field,
       fieldKey
     } = useFormField();
@@ -106,6 +105,7 @@ const script = defineComponent({
       formItemDepsCollector.setDeps(fieldKey.value, config.dependKey || [], async () => {
         remoteOptions.value = null;
         emit("update:value", null);
+        !props.lazyRequest && await fetchData();
       });
       (props.value || !props.lazyRequest) && fetchData();
     }, {

package/es/packages/form-render/src/hooks/useFieldListAdaptor.js

@@ -51,7 +51,8 @@ function useFieldListAdaptor(collector, uuid) {
   const createSelectSchema = (item) => {
     const schema = createStandardSchema(item);
     Object.assign(schema["x-component-props"], {
-      ...pick(item, ["lazyRequest", "urlConfig", "option"]),
+      ...pick(item, ["lazyRequest", "urlConfig"]),
+      options: item.option,
       multiple: item.multi_select === "0",
       maxTagCount: +item.multi_select_value
     });

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

@@ -8,7 +8,7 @@ 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 transformDateFormat(format?: string): "date" | "datetime" | "month";
 export declare function isIdCard(idCardNo: string): boolean;
 export declare function isMobile(mobile: string): boolean;
 export declare function parseBirthday(birthday: string): AgeContext;

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

@@ -26,7 +26,12 @@ function assignUpdateValue(props, field) {
   }
   return _props;
 }
+function isMonthType(format) {
+  return format && format.replace(/yyyy-MM/gi, "YYYY-MM") === "YYYY-MM";
+}
 function transformDateFormat(format = "") {
+  if (isMonthType(format))
+    return "month";
   return format.includes("HH") ? "datetime" : "date";
 }
 function isIdCard(idCardNo) {

package/es/packages/index.css

@@ -3178,3 +3178,111 @@ body > .vxe-table--tooltip-wrapper {
 .nodeTipContent li p {
   margin: 0;
 }
+.form-config {
+  display: flex;
+  justify-content: space-between;
+}
+.form-config__material {
+  padding: 16px;
+  box-sizing: border-box;
+  width: 200px;
+  min-height: 400px;
+  background: white;
+}
+.form-config__materialHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__materialContent {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.form-config__materialContentItem {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px dashed #d9d9d9;
+  box-sizing: border-box;
+  background-color: #fafafa;
+  grid-column: span var(--item-column) / span var(--item-column);
+}
+.form-config__displayWrapper {
+  padding: 16px;
+  box-sizing: border-box;
+  flex: 1;
+  padding: 16px 0;
+}
+.form-config__displayHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__displayContent {
+  padding: 16px;
+  box-sizing: border-box;
+  height: fit-content;
+  background: #eeeeee;
+  display: grid !important;
+  grid-template-columns: repeat(12, minmax(0px, 1fr));
+  gap: 8px 16px;
+}
+.form-config__displayContentItem {
+  grid-column: span var(--item-column) / span var(--item-column);
+  position: relative;
+}
+.form-config__config {
+  padding: 16px;
+  box-sizing: border-box;
+  width: 220px;
+  background: white;
+}
+.form-config__renderer--default {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px dashed #d9d9d9;
+  box-sizing: border-box;
+  background-color: #fafafa;
+  user-select: none;
+  position: relative;
+  width: 100%;
+}
+.form-config__renderer--complex {
+  border: 1px dashed lightblue;
+  padding: 8px;
+}
+.form-config__renderer--complex--grid {
+  display: grid !important;
+  grid-template-columns: repeat(12, minmax(0px, 1fr));
+  gap: 8px 16px;
+  grid-column: span var(--item-column) / span var(--item-column);
+}
+.form-config__renderer--complex--flex {
+  display: flex;
+}
+.form-config .is-disabled {
+  background: #e5e5e5;
+}
+.form-config .is-required {
+  padding-left: 16px !important;
+}
+.form-config .is-required::before {
+  position: absolute;
+  content: '*';
+  left: 8px;
+  color: red;
+}
+.form-config .is-active {
+  color: #5585f5;
+}
+.form-config .is-choosing {
+  box-shadow: #5585f5 0 0 0 2px !important;
+}
+.form-config .is-choosing-area {
+  background: #f0f7ff;
+}