@oinone/kunlun-vue-admin-base 6.3.8 → 6.4.0

package/src/basic/form/DefaultForm.vue

@@ -2,12 +2,17 @@
 import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
 import { DEFAULT_PREFIX } from '@oinone/kunlun-theme';
 import { OioForm, OioFormInstance } from '@oinone/kunlun-vue-ui-antd';
-import { OioFormProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import {
+  OioFormProps,
+  PropRecordHelper,
+  useInjectOioDefaultFormContext,
+  useProviderOioDefaultFormContext
+} from '@oinone/kunlun-vue-ui-common';
 import { DslRenderDefinition } from '@oinone/kunlun-vue-widget';
 import { createVNode, defineComponent, onMounted, PropType, ref } from 'vue';
 import { defaultFlexResolve } from '../../tags/resolve/helper';
+import { FormBizStyle } from '../../typing';
 import { ManualWidget } from '../mixin';
-import { useInjectOioDefaultFormContext, useProviderOioDefaultFormContext } from './context';
 
 export default defineComponent({
   name: 'DefaultForm',
@@ -28,6 +33,9 @@ export default defineComponent({
     formData: {
       type: Object,
       default: () => {}
+    },
+    bizStyle: {
+      type: String as PropType<FormBizStyle>
     }
   },
   setup(props) {
@@ -58,7 +66,7 @@ export default defineComponent({
     };
   },
   render() {
-    const { template } = this;
+    const { template, bizStyle } = this;
     const { default: defaultSlot } = PropRecordHelper.collectionSlots(this.$slots, [
       {
         origin: 'default',
@@ -66,14 +74,16 @@ export default defineComponent({
       }
     ]);
     const defaultChildren = defaultFlexResolve(template, defaultSlot);
+
+    const classNames = [`${DEFAULT_PREFIX}-default-form`];
+    if (bizStyle === FormBizStyle.WORD) {
+      classNames.push(`${DEFAULT_PREFIX}-default-word-form`);
+    }
+
     return createVNode(
       'div',
       {
-        ...PropRecordHelper.collectionBasicProps(
-          this.$attrs,
-          StringHelper.append([`${DEFAULT_PREFIX}-default-form`], CastHelper.cast(this.template?.class)),
-          CastHelper.cast(this.template?.style)
-        ),
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames),
         ref: 'origin'
       },
       [

package/src/basic/form/index.ts

@@ -1,3 +1,2 @@
 export { default as DefaultForm } from './DefaultForm.vue';
 export * from './BaseFormWidget';
-export * from './context';

package/src/basic/form/style/index.scss

@@ -1,4 +1,5 @@
 @import '../../../style/global-parameters.scss';
+@import './word-form.scss';
 
 .oio-default-form {
   position: relative;

package/src/basic/form/style/word-form.scss

@@ -0,0 +1,287 @@
+.oio-default-form {
+  &.oio-default-word-form {
+    .oio-form {
+      .oio-row {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        row-gap: 0 !important;
+      }
+
+      .default-container-wrapper {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }
+
+      // region 分组、折叠面板、选项卡
+      .oio-col {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        &:not(:first-child) {
+          & > .oio-tabs,
+          & > .oio-group,
+          & > .oio-collapse {
+            margin-top: var(--oio-margin);
+            border-radius: 0;
+
+            .oio-tabs,
+            .oio-group,
+            .oio-collapse {
+              margin-bottom: var(--oio-margin);
+            }
+          }
+        }
+
+        .oio-collapse .ant-collapse-content-box {
+          padding: 0;
+        }
+
+        .oio-collapse.oio-collapse-stripe {
+          .ant-form-item-label {
+            background: unset;
+          }
+        }
+      }
+
+      // endregion
+
+      // region 通用样式
+      .oio-form-item {
+        height: 100%;
+        align-items: stretch;
+      }
+
+      &.ant-form-vertical .oio-form-item-horizontal > .ant-form-item-control {
+        max-width: unset;
+      }
+
+      &.ant-form-vertical .oio-form-item-vertical > .ant-form-item-label {
+        margin: 0;
+      }
+      .ant-form-item-label {
+        box-shadow: 0 0 0 1px var(--oio-border-color);
+        background: #f7f8fa;
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        max-height: none;
+        height: auto;
+        align-self: unset;
+      }
+
+      .ant-form-item-control:not(:has(.inline-table)) {
+        max-width: 100%;
+        box-shadow: 0 0 0 1px var(--oio-border-color);
+        background-color: var(--oio-input-background);
+      }
+
+      .widget-container {
+        & > div:first-child:not(.inline-table),
+        & > span:first-child {
+          border: none !important;
+          border-radius: 0 !important;
+          box-shadow: 0 0 0 1px var(--oio-border-color);
+          padding: 3px 0;
+        }
+
+        .form-rich-text .w-e-toolbar,
+        .form-rich-text .w-e-text-container {
+          border: none !important;
+        }
+
+        .oio-select-dropdown .oio-input {
+          border: 0;
+          -webkit-box-shadow: none;
+          box-shadow: none;
+          border-radius: 0;
+          border-bottom: 1px solid var(--oio-border-color);
+        }
+
+        .ant-select-selector {
+          & > .ant-select-selection-search > input {
+            height: var(--oio-height);
+            line-height: var(--oio-select-line-height);
+          }
+        }
+      }
+
+      // endregion
+
+      // region 字段上下布局
+      .oio-form-item.oio-form-item-vertical {
+        .ant-form-item-label,
+        .ant-form-item-label > label {
+          height: calc(var(--oio-label-height) + 4px);
+          line-height: calc(var(--oio-label-height) + 4px);
+        }
+
+        .ant-form-item-label {
+          flex-basis: calc(var(--oio-label-height) + 4px);
+        }
+
+        .ant-form-item-control-input,
+        .ant-form-item-control-input-content,
+        .widget-container {
+          height: 100%;
+        }
+        .widget-container {
+          & > div:first-child,
+          & > span:first-child {
+            text-align: center;
+            height: 100%;
+            width: 100%;
+
+            input {
+              text-align: center;
+            }
+          }
+
+          .form-bool-switch {
+            justify-content: center;
+          }
+
+          div.form-rich-text {
+            text-align: left;
+          }
+
+          .ant-picker {
+            padding-right: var(--oio-margin-md);
+          }
+
+          .ant-picker ~ div {
+            padding: 0;
+          }
+
+          .form-multi-string-tag {
+            justify-self: center;
+          }
+
+          .oio-select-dropdown .oio-input {
+            border-bottom: 1px solid var(--oio-border-color) !important;
+            padding: 0 var(--oio-padding-sm);
+          }
+        }
+      }
+
+      // endregion
+
+      // region 字段横向布局
+      .oio-form-item.oio-form-item-horizontal {
+        & > .ant-form-item-label {
+          margin-right: 0;
+          max-height: none;
+          padding: var(--oio-padding-md) var(--oio-padding-md);
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          text-align: right;
+          .ant-form-item-no-colon {
+            padding: 0;
+          }
+        }
+
+        .form-field-widget-label-content {
+          text-align: right;
+          text-align-last: right;
+        }
+
+        .ant-form-item-control-input,
+        .ant-form-item-control-input-content,
+        .widget-container {
+          height: 100%;
+        }
+        .widget-container {
+          & > div:first-child,
+          & > span:first-child {
+            text-align: left;
+            height: 100%;
+            width: 100%;
+            padding: 3px var(--oio-padding);
+            box-sizing: border-box;
+          }
+
+          .form-single-select,
+          .form-multi-select {
+            & > div {
+              display: flex;
+              align-items: center;
+              height: 100%;
+              .ant-select {
+                flex: 1;
+              }
+            }
+          }
+
+          .oio-input,
+          .ant-select-selection-placeholder,
+          .el-input,
+          .el-input > .el-input__wrapper,
+          input {
+            padding-left: 0;
+            margin-left: 0;
+          }
+
+          .ant-select-selection-search {
+            padding: 0 !important;
+          }
+
+          .oio-select-dropdown .oio-input {
+            border-bottom: 1px solid var(--oio-border-color) !important;
+            padding: 0 var(--oio-padding-sm);
+          }
+
+          .form-multi-select {
+            .ant-select-selector {
+              padding: 0;
+            }
+          }
+
+          .ant-select-selector {
+            &:not(:has(.ant-select-selection-overflow .ant-select-selection-item)) {
+              .ant-select-selection-overflow-item {
+                display: none;
+              }
+              .ant-select-selection-placeholder {
+                left: 0;
+              }
+            }
+          }
+        }
+      }
+
+      // endregion
+
+      // region 控件边框、阴影隐藏
+      .ant-input-affix-wrapper {
+        border: none !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+        z-index: 0;
+      }
+
+      .ant-select-selector {
+        border: none !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+      }
+
+      .ant-upload-list-picture-card-container {
+        border: none !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+        margin: 0;
+      }
+
+      .el-input__wrapper:not(.el-dialog .el-input__wrapper),
+      .el-input-group__append,
+      .el-input__wrapper,
+      .oio-date-time-picker.ant-picker,
+      .oio-textarea {
+        border: none !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+      }
+
+      // endregion
+    }
+  }
+}

package/src/basic/form-item/BaseFormItemWidget.ts

@@ -255,6 +255,10 @@ export class BaseFormItemWidget<
     return this.validation;
   }
 
+  public setValidatorInfo(validatorInfo: ValidatorInfo): void {
+    this.validation = validatorInfo;
+  }
+
   @Widget.Reactive()
   protected blurValue: string | null | undefined;
 
@@ -490,6 +494,26 @@ export class BaseFormItemWidget<
     return Expression.run(params, expression, errorValue);
   }
 
+  public executeExpressionByParameters<T>(
+    parameters: Partial<ExpressionRunParam>,
+    expression: string,
+    errorValue?: T
+  ): T | string | undefined {
+    const activeRecords = parameters.activeRecords || [this.formData || {}];
+    return Expression.run(
+      {
+        activeRecords,
+        rootRecord: parameters.rootRecord || this.rootData?.[0] || {},
+        openerRecord: parameters.openerRecord || this.openerActiveRecords?.[0] || {},
+        scene: parameters.scene || this.scene,
+        activeRecord: parameters.activeRecord || activeRecords[0] || {},
+        parentRecord: parameters.parentRecord || this.parentViewActiveRecords?.[0] || []
+      } as ExpressionRunParam,
+      expression,
+      errorValue
+    );
+  }
+
   public executeCompute?(trigger: ComputeTrigger);
 
   /**

package/src/basic/form-item/DefaultFormItem.vue

@@ -2,10 +2,10 @@
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { translateValueByKey } from '@oinone/kunlun-engine';
 import { BooleanHelper } from '@oinone/kunlun-shared';
-import { OioFormItem, PropRecordHelper } from '@oinone/kunlun-vue-ui-antd';
+import { DEFAULT_PREDEFINE, OioFormItem, PropRecordHelper } from '@oinone/kunlun-vue-ui-antd';
 import { Tooltip as ATooltip } from 'ant-design-vue';
 import { computed, createVNode, defineComponent, PropType, Slot, VNode, vShow, withDirectives } from 'vue';
-import { ValidatorStatus } from '../../typing';
+import { FormBizStyle, ValidatorStatus } from '../../typing';
 import { BaseFormItemProps } from './props';
 
 export default defineComponent({
@@ -24,6 +24,9 @@ export default defineComponent({
     labelInvisible: {
       type: Boolean,
       default: false
+    },
+    elementBizStyle: {
+      type: String as PropType<FormBizStyle>
     }
   },
   setup(props) {
@@ -35,6 +38,10 @@ export default defineComponent({
   },
   render() {
     const classList = ['form-field-widget', 'item'];
+    if (this.elementBizStyle) {
+      classList.push(`oio-form-field-${this.elementBizStyle.toLocaleLowerCase()}`);
+    }
+
     const defaultSlots = PropRecordHelper.collectionSlots(this.$slots, [
       { origin: 'default', isNotNull: true }
     ]).default();

package/src/basic/form-item/style/index.scss

@@ -64,7 +64,7 @@
     text-overflow: ellipsis;
     word-break: break-all;
     line-height: 1.1em;
-    font-weight: var(--oio-font-weight-bold);
+    font-weight: var(--oio-form-item-label-weight);
     text-align: left;
   }
 

package/src/basic/gallery-item/DefaultGalleryItem.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="['gallery-common-item', showLabel ? '' : 'gallery-common-item-hide-label']" v-show="!invisible">
+  <div
+    class="gallery-common-item"
+    :class="[!showLabel && 'gallery-common-item-hide-label', layout && `gallery-common-item-${layout}`]"
+    v-show="!invisible"
+  >
     <div class="gallery-common-item-label" v-if="showLabel" :title="label">{{ label }}</div>
     <div class="gallery-common-item-content">
       <slot />

package/src/basic/gallery-item/props.ts

@@ -1,3 +1,6 @@
+import { PropType } from 'vue';
+import { FormLayout } from '@oinone/kunlun-vue-ui-common';
+
 export const BaseGalleryItemProps = {
   label: {
     type: [String, Boolean],
@@ -10,5 +13,8 @@ export const BaseGalleryItemProps = {
   invisible: {
     type: Boolean,
     default: false
+  },
+  layout: {
+    type: [String, Object] as PropType<FormLayout>
   }
 };

package/src/basic/gallery-item/style/index.scss

@@ -7,24 +7,36 @@ $labelWidth: 72px;
   flex-flow: row nowrap;
   overflow: hidden;
 
+  &.gallery-common-item-vertical {
+    flex-direction: column;
+    gap: var(--oio-padding-sm);
+    .gallery-common-item-label {
+      flex: auto;
+      width: 100%;
+    }
+    .gallery-common-item-content {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
   .gallery-common-item-label {
     flex: 1 0 $labelWidth;
     width: $labelWidth;
+    color: var($parameterPrefix + -text-color-secondary);
     margin-right: 8px;
-    font-size: var($parameterPrefix + -font-size);
-    font-weight: var($parameterPrefix + -font-weight-bold);
-    text-align: right;
+    font-size: var($parameterPrefix + -font-size-sm);
+    padding-top: 5px;
+    text-align: left;
     align-self: flex-start;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding-top: 5px;
   }
 
   .gallery-common-item-content {
     flex: 1 0 100%;
     max-width: calc(100% - #{$labelWidth} - 8px);
-    min-height: 32px;
     display: flex;
     align-items: center;
   }

package/src/basic/mixin/ManualWidget.ts

@@ -1,5 +1,5 @@
+import { useInjectMetaContext, useProviderMetaContext } from '@oinone/kunlun-vue-widget';
 import { ComponentOptionsMixin, computed } from 'vue';
-import { useInjectMetaContext, useProviderMetaContext } from '../../tags/context';
 
 export const ManualWidget: ComponentOptionsMixin = {
   props: {