cnhis-design-vue 3.1.13-beta.7 → 3.1.13

package/es/packages/form-render/src/FormRender.vue_vue_type_script_setup_true_lang.js

@@ -2,9 +2,10 @@ import { defineComponent, computed, watch, openBlock, createBlock, unref, withCt
 import { createForm, onFieldValueChange, isField } from '@formily/core';
 import { FormProvider, FormConsumer } from '@formily/vue';
 import { cloneDeep } from 'lodash-es';
-import { NForm, NTabs, NTabPane } from 'naive-ui';
+import { NForm, NTabs, NTabPane, NConfigProvider } from 'naive-ui';
 import { FormItemLineBarDepKeyPrepend } from '../../../packages/form-render/src/constants';
 import { queryDecorator, queryInput, getParentLinebar } from '../../../packages/form-render/src/utils';
+import { useNuiThemeOverrides } from '../../../packages/form-table/src/hooks/useNuiThemeOverrides';
 import { useFormContext } from './hooks/useFormContext.js';
 import { useInitialData } from './hooks/useInitialData.js';
 import { useFieldListAdaptor } from './hooks/useFieldListAdaptor.js';
@@ -42,6 +43,7 @@ var script = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { expose, emit }) {
     const props = __props;
+    const { nuiThemeOverrides } = useNuiThemeOverrides();
     const { SchemaField, businessCollector, formItemDepsCollector, changeContextCollector, formUUID } = useFormContext(props);
     const formModel = createForm({
       initialValues: useInitialData().assignInitialData(props.initialData, props.fieldList),
@@ -125,7 +127,10 @@ var script = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(NForm), { class: "form-render" }, {
+      return openBlock(), createBlock(unref(NForm), {
+        class: "form-render",
+        "require-mark-placement": "left"
+      }, {
         default: withCtx(() => [
           __props.anchor ? (openBlock(), createElementBlock("section", _hoisted_1, [
             createVNode(unref(NTabs), {
@@ -138,35 +143,40 @@ var script = /* @__PURE__ */ defineComponent({
                   return openBlock(), createBlock(unref(NTabPane), {
                     name: anchor.name,
                     tab: anchor.title,
-                    key: anchor
+                    key: anchor.name
                   }, null, 8, ["name", "tab"]);
                 }), 128))
               ]),
               _: 1
             }, 8, ["value"])
           ])) : createCommentVNode("v-if", true),
-          createElementVNode("section", {
-            class: "form-render__wrapper",
-            style: normalizeStyle({ "--column": __props.column, "--form-height": unref(formHeight) }),
-            ref_key: "scrollbarRef",
-            ref: scrollbarRef,
-            onScroll: _cache[1] || (_cache[1] = (...args) => unref(onScroll) && unref(onScroll)(...args))
-          }, [
-            createVNode(unref(FormProvider), { form: unref(formModel) }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "default", { schemaFiled: unref(SchemaField) }, () => [
-                  createVNode(unref(SchemaField), { schema: unref(parsedSchema) }, null, 8, ["schema"])
-                ]),
-                __props.consumer ? (openBlock(), createBlock(unref(FormConsumer), { key: 0 }, {
-                  default: withCtx(({ form }) => [
-                    createElementVNode("div", _hoisted_2, toDisplayString(JSON.stringify(form.values, null, 2)), 1)
+          createVNode(unref(NConfigProvider), { "theme-overrides": unref(nuiThemeOverrides) }, {
+            default: withCtx(() => [
+              createElementVNode("section", {
+                class: "form-render__wrapper",
+                style: normalizeStyle({ "--column": __props.column, "--form-height": unref(formHeight) }),
+                ref_key: "scrollbarRef",
+                ref: scrollbarRef,
+                onScroll: _cache[1] || (_cache[1] = (...args) => unref(onScroll) && unref(onScroll)(...args))
+              }, [
+                createVNode(unref(FormProvider), { form: unref(formModel) }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "default", { schemaFiled: unref(SchemaField) }, () => [
+                      createVNode(unref(SchemaField), { schema: unref(parsedSchema) }, null, 8, ["schema"])
+                    ]),
+                    __props.consumer ? (openBlock(), createBlock(unref(FormConsumer), { key: 0 }, {
+                      default: withCtx(({ form }) => [
+                        createElementVNode("div", _hoisted_2, toDisplayString(JSON.stringify(form.values, null, 2)), 1)
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("v-if", true)
                   ]),
-                  _: 1
-                })) : createCommentVNode("v-if", true)
-              ]),
-              _: 3
-            }, 8, ["form"])
-          ], 36)
+                  _: 3
+                }, 8, ["form"])
+              ], 36)
+            ]),
+            _: 3
+          }, 8, ["theme-overrides"])
         ]),
         _: 3
       });

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

@@ -13,8 +13,7 @@ const script = defineComponent({
     annotation: {}
   },
   setup(props, {
-    slots,
-    attrs
+    slots
   }) {
     const annotation = inject(InjectionAnnotation);
     const annotationContent = computed({
@@ -85,7 +84,7 @@ const script = defineComponent({
           "is-active": !!annotationContent.value
         }],
         "style": {
-          "--icon-right": attrs.required ? "-30" : "-20"
+          "--icon-right": "-5"
         },
         "form-item-hover-show": !annotationContent.value && !isEdit.value
       }, [createVNode(NPopover, {
@@ -109,6 +108,7 @@ const script = defineComponent({
       }
       function renderTrigger() {
         return createVNode("div", {
+          "class": "form-render__formItemLabel--icon",
           "onMouseleave": iconMouseleave,
           "onMouseenter": iconMouseenter,
           "onDblclick": iconDbClick,
@@ -126,7 +126,9 @@ const script = defineComponent({
       return showLabel.value ? createVNode("section", {
         "class": "form-render__formItemLabel"
       }, [createVNode("span", {
-        "class": "form-render__formItemLabel--text"
+        "class": ["form-render__formItemLabel--text", {
+          "has-annotation": showAnnotation.value
+        }]
       }, [props.label]), showAnnotation.value ? renderAnnotation() : null]) : null;
     }
     return () => createVNode(NFormItem, null, {

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

@@ -3,7 +3,7 @@ import { useDebounceFn } from '@vueuse/core';
 import { isNumber } from 'lodash-es';
 import { ref, computed, watch, nextTick } from 'vue';
 import { FormItemLineBarDepKeyPrepend } from '../../../../packages/form-render/src/constants';
-import { traverseSchema } from '../../../../packages/form-render/src/utils';
+import { traverseSchema, createLinebarId } from '../../../../packages/form-render/src/utils';
 
 function useAnchor(props, collector) {
   const __currentAnchor = ref("");
@@ -31,14 +31,14 @@ function useAnchor(props, collector) {
         return;
       collector.trigger(FormItemLineBarDepKeyPrepend + id, true);
       await nextTick();
-      const targetAnchor = scrollbarRef.value.querySelector(`#${id}`);
+      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 });
-        }, "easeInBounce", resolve);
+        }, "easeInSine", resolve);
       });
     } finally {
       scrollLock = false;

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

@@ -1,7 +1,7 @@
 import { isObject } from '@vueuse/core';
 import { isArray, pick } from 'lodash-es';
 import { useFormValidator, useTypeNormalize } from '../../../../packages/form-render';
-import { arrayed, transformDateFormat } from '../utils/index.js';
+import { createLinebarId, arrayed, transformDateFormat } from '../utils/index.js';
 
 function useFieldListAdaptor(collector, uuid) {
   const { createValidatorSchema } = useFormValidator();
@@ -139,7 +139,7 @@ function useFieldListAdaptor(collector, uuid) {
       "x-component-props": {
         line: item.__line,
         disabled: item.is_not_fold === "1",
-        id: item.val_key,
+        id: createLinebarId(item.val_key),
         show: !!item.is_show
       }
     };

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

@@ -9,6 +9,9 @@ function useFieldVisitor() {
       if (Array.isArray(field.children)) {
         field.children = traverse(field.children, visitorMap, key);
       }
+      if (Array.isArray(field.properties)) {
+        field.properties = traverse(field.properties, visitorMap, key);
+      }
       if (field.suffixConfig) {
         field.suffixConfig = traverse(arrayed(field.suffixConfig), visitorMap, key);
       }

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

@@ -1,3 +1,4 @@
+import { isFunction } from 'lodash-es';
 import { arrayed } from '../../../../packages/form-render/src/utils';
 
 class FormItemDepsCollector {
@@ -14,9 +15,7 @@ class FormItemDepsCollector {
   }
   trigger(dependKey, payload) {
     const map = this.collector.get(dependKey);
-    map && map.forEach((cb) => {
-      typeof cb === "function" && cb(payload);
-    });
+    map && map.forEach((cb) => isFunction(cb) && cb(payload));
   }
 }
 function useFormItemDeps() {

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

@@ -26,3 +26,4 @@ export declare function queryInput(decoratorElement?: HTMLElement | null): {
     widgetElementList: HTMLInputElement[];
 };
 export declare function getParentLinebar(key: string, fieldList: FieldItem[]): string | null;
+export declare function createLinebarId(id: string): string;

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

@@ -136,5 +136,8 @@ function getParentLinebar(key, fieldList) {
     return field.html_type === "LINEBAR";
   }
 }
+function createLinebarId(id) {
+  return `id-${id}`;
+}
 
-export { arrayed, assignUpdateValue, createSlot, formRenderLog, generateUrlParams, getParentLinebar, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, queryDecorator, queryInput, transformDateFormat, traverseSchema, uuidGenerator };
+export { arrayed, assignUpdateValue, createLinebarId, createSlot, formRenderLog, generateUrlParams, getParentLinebar, injectOrProvide, isIdCard, isMobile, parseBirthday, parseIdCard, queryDecorator, queryInput, transformDateFormat, traverseSchema, uuidGenerator };

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

@@ -1,7 +1,8 @@
 .form-render__wrapper {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  align-items: start;
+  gap: 0 16px;
   max-height: var(--form-height);
   overflow-y: auto;
   position: relative;
@@ -17,14 +18,24 @@
   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: 0;
+  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);
@@ -35,17 +46,20 @@
 .form-render__linebarHeader {
   cursor: pointer;
   display: flex;
-  background: #fafafa;
-  height: 36px;
+  background: #f2f2f2;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 500;
   align-items: center;
   padding: 0 16px;
   margin-bottom: 8px;
-  border: 1px solid #d9d9d9;
+  border-radius: 4px;
 }
 .form-render__linebarItem {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  align-items: start;
+  gap: 0 16px;
 }
 .form-render__inputGroup {
   grid-column: span var(--column) / span var(--column);
@@ -108,12 +122,16 @@
 .form-render__complexContent--grid {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  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;
 }

package/es/packages/form-table/src/hooks/useNuiThemeOverrides.d.ts

@@ -0,0 +1,4 @@
+import { GlobalThemeOverrides } from 'naive-ui';
+export declare function useNuiThemeOverrides(): {
+    nuiThemeOverrides: GlobalThemeOverrides;
+};

package/es/packages/form-table/src/hooks/useNuiThemeOverrides.js

@@ -0,0 +1,18 @@
+function useNuiThemeOverrides() {
+  const nuiThemeOverrides = {
+    Input: { paddingMedium: "8px", paddingSmall: "8px", paddingLarge: "8px", paddingTiny: "8px" },
+    InternalSelection: { paddingSingle: "8px", paddingMultiple: "8px" },
+    Form: {
+      feedbackHeightMedium: "16px",
+      feedbackHeightLarge: "16px",
+      feedbackHeightSmall: "16px",
+      feedbackFontSizeLarge: "12px",
+      feedbackFontSizeMedium: "12px",
+      feedbackFontSizeSmall: "12px",
+      feedbackPadding: "0px"
+    }
+  };
+  return { nuiThemeOverrides };
+}
+
+export { useNuiThemeOverrides };

package/es/packages/index.css

@@ -2479,11 +2479,13 @@ body > .vxe-table--tooltip-wrapper {
   font-size: 14px;
   margin-bottom: 10px;
 }
-.c-time-line .content-name {
+.c-time-line .content-name,
+.c-time-line .content-extra {
   font-size: 16px;
   font-weight: 600;
 }
-.c-time-line .content-name + span {
+.c-time-line .content-name + span,
+.c-time-line .content-extra + span {
   color: #666;
 }
 .c-time-line .content p {
@@ -2491,6 +2493,9 @@ body > .vxe-table--tooltip-wrapper {
   line-height: 20px;
   text-align: left;
 }
+.c-time-line .content-extra {
+  margin-bottom: 8px !important;
+}
 .clearfix:after {
   visibility: hidden;
   display: block;
@@ -2641,7 +2646,8 @@ body > .vxe-table--tooltip-wrapper {
 .form-render__wrapper {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  align-items: start;
+  gap: 0 16px;
   max-height: var(--form-height);
   overflow-y: auto;
   position: relative;
@@ -2657,14 +2663,24 @@ body > .vxe-table--tooltip-wrapper {
   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: 0;
+  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);
@@ -2675,17 +2691,20 @@ body > .vxe-table--tooltip-wrapper {
 .form-render__linebarHeader {
   cursor: pointer;
   display: flex;
-  background: #fafafa;
-  height: 36px;
+  background: #f2f2f2;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 500;
   align-items: center;
   padding: 0 16px;
   margin-bottom: 8px;
-  border: 1px solid #d9d9d9;
+  border-radius: 4px;
 }
 .form-render__linebarItem {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  align-items: start;
+  gap: 0 16px;
 }
 .form-render__inputGroup {
   grid-column: span var(--column) / span var(--column);
@@ -2748,12 +2767,16 @@ body > .vxe-table--tooltip-wrapper {
 .form-render__complexContent--grid {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
-  gap: 0 8px;
+  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;
 }
@@ -2814,3 +2837,164 @@ body > .vxe-table--tooltip-wrapper {
   display: flex;
   gap: 12px;
 }
+.stepOut {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+.stepOut .stepItem {
+  width: 15%;
+  min-width: 65px;
+  height: 180px;
+  float: left;
+  font-family: SimSun;
+  font-size: 16px;
+  text-align: center;
+  position: relative;
+  top: 48px;
+}
+.stepOut .stepItem .lineCircleRight {
+  left: 55%;
+  top: 6px;
+  position: absolute;
+  display: block;
+  border-left-color: white;
+  border-left-width: 0px;
+  width: 30%;
+  border-color: white white white white;
+  border-left-style: hidden;
+  border-left: none;
+  border-top: 1px dashed rgba(3, 2, 2, 0.4);
+  border-right: 1px dashed rgba(3, 2, 2, 0.4);
+  border-bottom: 1px dashed rgba(3, 2, 2, 0.4);
+  border-left: 0px dashed rgba(3, 2, 2, 0.4) !important;
+  height: 100%;
+  border-radius: 0px 25px 25px 0px;
+}
+.stepOut .stepItem .lineCircleLeft {
+  left: 15%;
+  top: 6px;
+  position: absolute;
+  display: block;
+  border-left-color: white;
+  border-left-width: 0px;
+  width: 30%;
+  border-color: white white white white;
+  border-left-style: hidden;
+  border-left: none;
+  border-top: 1px dashed rgba(3, 2, 2, 0.4);
+  border-right: 0px dashed rgba(3, 2, 2, 0.4) !important;
+  border-bottom: 1px dashed rgba(3, 2, 2, 0.4);
+  border-left: 1px dashed rgba(3, 2, 2, 0.4);
+  height: 100%;
+  border-radius: 25px 0px 0px 25px;
+}
+.stepOut .stepItem .lineCircleActive {
+  border-top: 1px solid #2563f4;
+  border-right: 1px solid #2563f4;
+  border-bottom: 1px solid #2563f4;
+  border-left: 1px solid #2563f4;
+}
+.stepOut .stepItem .icon {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #969696;
+  margin: 0 auto;
+  position: relative;
+  z-index: 888;
+}
+.stepOut .stepItem .active {
+  background-color: #2563f4;
+}
+.stepOut .stepItem .finished {
+  background-color: #5dc055 !important;
+  color: #fff !important;
+  border-color: #5dc055 !important;
+}
+.stepOut .stepItem .labelFinsh {
+  color: #5dc055 !important;
+}
+.stepOut .stepItem .line {
+  position: absolute;
+  top: 6px;
+  left: 55%;
+  border-bottom: 1px dashed rgba(3, 2, 2, 0.4);
+  width: 90%;
+  z-index: 111;
+}
+.stepOut .stepItem .lineActive {
+  border-bottom: 1px solid #2563f4;
+}
+.stepOut .stepItem .stepTopBox {
+  position: absolute;
+  top: -48px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 70%;
+  min-width: 65px;
+  height: 40px;
+  line-height: 40px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  background: rgba(110, 153, 255, 0.11);
+  border-radius: 4px;
+  color: #2563f4;
+  padding: 0px 5px;
+  cursor: pointer;
+}
+.stepOut .stepItem .stepBottomBox {
+  cursor: pointer;
+  width: 100%;
+  min-width: 65px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.stepOut .stepItem .stepLabel {
+  width: 100%;
+  color: #212121;
+  line-height: 36px;
+  margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.stepOut .stepItem .stepExtra {
+  width: 68px;
+  height: 26px;
+  border-radius: 4px;
+  border: 1px solid #cacaca;
+  margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.stepOut .stepItem .statusTime {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  width: 89px;
+  height: 34px;
+  margin: 0;
+}
+.nodeTipContent {
+  max-height: 200px;
+  max-width: 400px;
+  overflow: auto;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+.nodeTipContent li {
+  list-style: none;
+  margin-bottom: 5px;
+}
+.nodeTipContent li p {
+  margin: 0;
+}

package/es/packages/index.d.ts

@@ -13,6 +13,7 @@ import CFormTable from './form-table';
 import CInfoHeader from './info-header';
 import CTimeLine from './time-line';
 import CBpmnWorkflow from './bpmn-workflow';
+import CStepsWheel from './steps-wheel';
 import Editor from './editor';
 import CFormRender from './form-render';
 import CFabricChart from './fabric-chart';
@@ -21,7 +22,7 @@ import CShortcutSetter from './shortcut-setter';
 export * from './form-render';
 export * from './shortcut-provider';
 declare function install(app: App): void;
-export { CGrid, CBigTable, CFieldSet, CDragLayout, CButtonPrint, CSelectPerson, CSelectLabel, CLabelFormContent, CScaleView, CMap, CVodChunkUpload, CRadio, CCheckbox, CSelect, CDatetime, CFormTable, CInfoHeader, CTimeLine, CBpmnWorkflow, Editor, CFormRender, CFabricChart, CShortcutProvider, CShortcutSetter };
+export { CGrid, CBigTable, CFieldSet, CDragLayout, CButtonPrint, CSelectPerson, CSelectLabel, CLabelFormContent, CScaleView, CMap, CVodChunkUpload, CRadio, CCheckbox, CSelect, CDatetime, CFormTable, CInfoHeader, CTimeLine, CBpmnWorkflow, CStepsWheel, Editor, CFormRender, CFabricChart, CShortcutProvider, CShortcutSetter };
 declare const _default: {
     install: typeof install;
 };

package/es/packages/index.js

@@ -26,6 +26,8 @@ import TimeLine from './time-line/index.js';
 export { default as CTimeLine } from './time-line/index.js';
 import BpmnWorkflow from './bpmn-workflow/index.js';
 export { default as CBpmnWorkflow } from './bpmn-workflow/index.js';
+import StepsWheel from './steps-wheel/index.js';
+export { default as CStepsWheel } from './steps-wheel/index.js';
 import Editor from './editor/index.js';
 export { default as Editor } from './editor/index.js';
 import FormRender from './form-render/index.js';
@@ -73,6 +75,7 @@ const components = {
   CInfoHeader: InfoHeader,
   CTimeLine: TimeLine,
   CBpmnWorkflow: BpmnWorkflow,
+  CStepsWheel: StepsWheel,
   Editor,
   CFormRender: FormRender,
   CFabricChart: FabricChart,