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

package/src/field/form/o2m/select/FormO2MSelectFieldWidget.ts

@@ -1,10 +1,8 @@
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
-import { CastHelper } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
-import { isEmpty } from 'lodash-es';
 import { FormFieldWidget, FormSelectComplexFieldWidget } from '../../../../basic';
-import SelectWidget from './SelectWidget.vue';
+import DefaultMultipleSelect from '../../abstract/select/DefaultMultipleSelect.vue';
 
 @SPI.ClassFactory(
   FormFieldWidget.Token({
@@ -13,60 +11,15 @@ import SelectWidget from './SelectWidget.vue';
   })
 )
 export class FormO2MSelectFieldWidget extends FormSelectComplexFieldWidget {
-  public async fetchData() {
-    // const model = await getModel(this.field.references!);
-    // const labelModelFields = getLabelFieldList4query(this.getDsl().optionLabel, model.labelFields!, model.modelFields);
-    // const dataList = await queryFieldDataList4Form(
-    //   this.field,
-    //   this.fieldElement,
-    //   labelModelFields,
-    //   this.getSelfViewWidget()!.getDsl(),
-    //   this.formData,
-    //   [this.formData],
-    //   this.rootData,
-    //   useMatched().matched.segmentParams.page.scene
-    // );
-    // this.formData[this.field.name] = dataList;
-    // if (!this.field.relationStore && dataList) {
-    //   this.viewWidget?.loadData(dataList);
-    //   return;
-    // }
-    // if (this.dataList.length > 0) {
-    //   await this.fillOptions(this.dataList, true);
-    // }
-    // if (dataList && dataList.length > 0) {
-    //   this.selectedValues = dataList;
-    // }
-  }
-
   public initialize(props) {
     super.initialize(props);
-    this.setComponent(SelectWidget);
+    this.setComponent(DefaultMultipleSelect);
     return this;
   }
 
   @Widget.Method()
-  public change(value: { value: string }[]) {
-    if (value == null) {
-      super.change(value);
-      this.handleEmpty();
-    } else {
-      if (!value.length) {
-        this.handleEmpty();
-      }
-      // focus的时候才会查询数据，这时候dataList为空，如果开始有value，会导致剩下的已选数据匹配不到值
-      const list = isEmpty(this.dataList) ? this.value || [] : this.dataList;
-      const submitData = value
-        .map((item) => {
-          return (list as any[])?.find((d) => d[this.relationFieldKey] === item.value);
-        })
-        .filter((a) => !!a);
-      super.change(CastHelper.cast(submitData));
-    }
-  }
-
-  protected async fillOptions(dataList: Record<string, unknown>[], insetDefaultValue = true) {
-    await super.fillOptionsForMulti(dataList);
+  public change(value) {
+    this.x2mChange(value);
   }
 
   protected async mounted() {

package/src/field/form/o2m/select/FormO2MSelectModalFieldWidget.ts

@@ -0,0 +1,27 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget, SelectModalFieldWidget } from '../../../../basic';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: [ViewType.Form, ViewType.Search],
+    ttype: ModelFieldType.OneToMany,
+    widget: 'SelectModal'
+  })
+)
+export class FormO2MSelectModalFieldWidget extends SelectModalFieldWidget {
+  @Widget.Reactive()
+  protected get selectMode() {
+    return SelectMode.multiple;
+  }
+
+  protected filterX2mChangeValue(value: any) {
+    return value;
+  }
+
+  protected async mounted() {
+    await this.loadOriginValue();
+  }
+}

package/src/field/form/o2m/select/FormO2MSelectTableFieldWidget.ts

@@ -0,0 +1,23 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget, SelectTableFieldWidget } from '../../../../basic';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: [ViewType.Form, ViewType.Search],
+    ttype: ModelFieldType.OneToMany,
+    widget: 'SelectTable'
+  })
+)
+export class FormO2MSelectTableFieldWidget extends SelectTableFieldWidget {
+  @Widget.Reactive()
+  protected get selectMode() {
+    return SelectMode.multiple;
+  }
+
+  protected async mounted() {
+    await this.loadOriginValue();
+  }
+}

package/src/field/form/o2m/select/index.ts

@@ -0,0 +1,3 @@
+export * from './FormO2MSelectFieldWidget';
+export * from './FormO2MSelectModalFieldWidget';
+export * from './FormO2MSelectTableFieldWidget';

package/src/field/form/o2m/table/FormO2MTableFieldWidget.ts

@@ -1,8 +1,9 @@
 import { RuntimeO2MField, SubmitRelationHandler, SubmitValue } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
 import { Condition } from '@oinone/kunlun-request';
-import { ReturnPromise } from '@oinone/kunlun-shared';
+import { BooleanHelper, Optional, ReturnPromise } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
 import { BaseFieldWidget, FormSubviewListFieldWidget, RelationQueryHelper } from '../../../../basic';
 import { TABLE_WIDGET } from '../../../../typing';
 
@@ -16,6 +17,30 @@ import { TABLE_WIDGET } from '../../../../typing';
   })
 )
 export class FormO2MTableFieldWidget extends FormSubviewListFieldWidget<RuntimeO2MField> {
+  /**
+   * 一对多的表格底部显示添加一行
+   */
+  @Widget.Provide()
+  @Widget.Reactive()
+  protected get showAddBtn() {
+    if (this.readonly) {
+      return false;
+    }
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().showAddBtn)).orElse(true);
+  }
+
+  /**
+   * 一对多的表格底部显示快速填报
+   */
+  @Widget.Provide()
+  @Widget.Reactive()
+  protected get showQuickFill() {
+    if (this.readonly) {
+      return false;
+    }
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().showQuickFill)).orElse(true);
+  }
+
   protected async refreshValueProcess() {
     if (this.isDataSourceProvider) {
       await super.refreshValueProcess();

package/src/field/form/o2o/index.ts

@@ -1,6 +1,6 @@
 export * from './cascader/FormO2OCascaderFieldWidget';
 export * from './form/FormO2OFormFieldWidget';
 export * from './radio';
-export * from './select/FormO2OSelectFieldWidget';
+export * from './select';
 export * from './tree-select/FormO2OTreeSelectFieldWidget';
 export * from './upload';

package/src/field/form/o2o/select/FormO2OSelectModalFieldWidget.ts

@@ -0,0 +1,34 @@
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { FormFieldWidget, SelectModalFieldWidget } from '../../../../basic';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: [ViewType.Form, ViewType.Search],
+    ttype: ModelFieldType.OneToOne,
+    widget: 'SelectModal'
+  })
+)
+export class FormO2OSelectModalFieldWidget extends SelectModalFieldWidget {
+  @Widget.Reactive()
+  @Widget.Provide()
+  protected get domainO2o() {
+    const domain = this.domain;
+    const essentialCondition = [] as string[];
+    if (this.field.relationFields.length) {
+      for (const rel of this.field.relationFields) {
+        const single = `${rel} == null`;
+        essentialCondition.push(single);
+      }
+    }
+    let essentialConditionStr = '';
+    if (essentialCondition.length) {
+      essentialConditionStr = `${essentialCondition.join(' and ')}`;
+    }
+    if (domain === 'null' || !domain) {
+      return essentialConditionStr;
+    }
+    return `${domain} and ${essentialConditionStr}`;
+  }
+}

package/src/field/form/o2o/select/FormO2OSelectTableFieldWidget.ts

@@ -0,0 +1,35 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget } from '../../../../basic';
+import { FormM2OSelectTableFieldWidget } from '../../m2o';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: [ViewType.Form, ViewType.Search],
+    ttype: ModelFieldType.OneToOne,
+    widget: 'SelectTable'
+  })
+)
+export class FormO2OSelectTableFieldWidget extends FormM2OSelectTableFieldWidget {
+  @Widget.Reactive()
+  @Widget.Provide()
+  protected get domainO2o() {
+    const domain = this.domain;
+    const essentialCondition = [] as string[];
+    if (this.field.relationFields.length) {
+      for (const rel of this.field.relationFields) {
+        const single = `${rel} == null`;
+        essentialCondition.push(single);
+      }
+    }
+    let essentialConditionStr = '';
+    if (essentialCondition.length) {
+      essentialConditionStr = `${essentialCondition.join(' and ')}`;
+    }
+    if (domain === 'null' || !domain) {
+      return essentialConditionStr;
+    }
+    return `${domain} and ${essentialConditionStr}`;
+  }
+}

package/src/field/form/o2o/select/index.ts

@@ -0,0 +1,3 @@
+export * from './FormO2OSelectFieldWidget';
+export * from './FormO2OSelectModalFieldWidget';
+export * from './FormO2OSelectTableFieldWidget';

package/src/field/form/string/input/FormStringInputFieldWidget.ts

@@ -46,6 +46,6 @@ export class FormStringInputFieldWidget extends FormStringFieldWidget {
 }
 
 /**
- * @deprecated please using FormStringInputFieldWidget
+ * @deprecated 6.0.0 please using FormStringInputFieldWidget
  */
 export const FormStringFieldSingleWidget = FormStringInputFieldWidget;

package/src/field/form/string/tag/FormStringMultiTagFieldWidget.ts

@@ -21,6 +21,11 @@ export class FormStringMultiTagFieldWidget extends FormFieldWidget<string, Runti
     return this;
   }
 
+  @Widget.Reactive()
+  protected get inputType(): string {
+    return 'text';
+  }
+
   @Widget.Reactive()
   private get limit() {
     return this.field.limit;

package/src/field/form/string/tag/Tag.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="form-multi-string-tag" :class="[readonly && 'readonly', disabled && 'disabled']">
-    <a-tag :title="item" :visible="true" :closable="!readonly" v-for="(item, index) in tags" :key="index">
+    <a-tag
+      :class="{
+        'ready-delete-tag': readyDeleteTag && index === tags.length - 1
+      }"
+      :title="item"
+      :visible="true"
+      :closable="!readonly"
+      v-for="(item, index) in tags"
+      :key="index"
+    >
       {{ item }}
       <template #closeIcon>
         <CloseOutlined @click="delTag(index)" />
@@ -12,9 +21,10 @@
       :placeholder="tags.length > 0 ? '' : placeholder"
       :maxlength="unitValueLength"
       :value="current"
-      @change.stop="currentChange"
-      @keyup.enter="addTag"
-      @blur="addTag"
+      :oninput="onInputValue"
+      @keydown="onKeydown"
+      @mouseup="onMouseup"
+      @blur="onBlur"
     />
     <div v-if="clearStatus" class="clear">
       <CloseCircleFilled class="anticon anticon-close-circle ant-input-clear-icon" @click="clearTag" />
@@ -23,15 +33,20 @@
 </template>
 <script lang="ts">
 import { CloseCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
+import { TableKeyboardConfig, translateValueByKey } from '@oinone/kunlun-engine';
+import { ViewType } from '@oinone/kunlun-meta';
 import { BooleanHelper } from '@oinone/kunlun-shared';
-import { translateValueByKey } from '@oinone/kunlun-engine';
 import { OioNotification } from '@oinone/kunlun-vue-ui-antd';
-import { ViewType } from '@oinone/kunlun-meta';
 import { Tag as ATag } from 'ant-design-vue';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent, PropType, ref, watch } from 'vue';
 import { OioCommonProps, OioMetadataProps, usePlaceholderProps } from '../../../../basic';
 
 export default defineComponent({
+  components: {
+    CloseCircleFilled,
+    CloseOutlined,
+    ATag
+  },
   props: {
     ...OioCommonProps,
     ...OioMetadataProps,
@@ -62,22 +77,23 @@ export default defineComponent({
     },
     rootViewType: {
       type: String
+    },
+    tableKeyboardConfig: {
+      type: Object as PropType<TableKeyboardConfig>
     }
   },
-  components: {
-    CloseCircleFilled,
-    CloseOutlined,
-    ATag
-  },
   setup(props) {
     const current = ref('');
+
     const tags = ref<any>(props.defaultValue || []);
+
     const readonly = computed(() => {
       if (props.rootViewType === ViewType.Detail) {
         return true;
       }
       return BooleanHelper.toBoolean(props.readonly);
     });
+
     const disabled = computed(() => {
       if (props.rootViewType === ViewType.Detail) {
         return true;
@@ -85,36 +101,32 @@ export default defineComponent({
       return BooleanHelper.toBoolean(props.disabled);
     });
 
+    const readyDeleteTag = ref(false);
+
     const clearStatus = computed(() => {
       return !readonly.value && !disabled.value && tags.value.length > 0 && props.allowClear;
     });
 
-    const currentChange = (val) => {
-      current.value = val.target.value;
+    const addTag = (e: KeyboardEvent) => {
+      const val = (e.target as HTMLInputElement).value;
+      addTag0(val);
+      if (val && e.key === props.tableKeyboardConfig?.enter?.key) {
+        e.stopPropagation();
+      }
     };
 
-    const addTag = (e) => {
-      let val = e.target.value;
+    const addTag0 = (val: string) => {
       if (!val) {
         props.blur?.();
         return;
       }
-      if (props.inputRegular) {
-        val = val.replace(props.inputRegular, '');
-      }
       if (tags.value.includes(val)) {
         if (!props.allowRepeat) {
           OioNotification.error(translateValueByKey('错误'), translateValueByKey('标签已经存在，不可重复'));
           return;
         }
       }
-      if (!val) {
-        props.blur?.();
-        current.value = '';
-        return;
-      }
       tags.value.push(val);
-      current.value = '';
       props.tagChange?.(tags.value);
     };
 
@@ -126,7 +138,55 @@ export default defineComponent({
     const clearTag = () => {
       tags.value = [];
       props.tagChange?.(tags.value);
-      current.value = '';
+    };
+
+    const onInputValue = (e: InputEvent) => {
+      const input = e.target as HTMLInputElement;
+      let val = input.value;
+      if (val && props.inputRegular) {
+        val = val.replace(props.inputRegular, '');
+      }
+      input.value = val;
+    };
+
+    const onKeydown = (e: KeyboardEvent) => {
+      const { key } = e;
+      if (key !== 'Backspace') {
+        readyDeleteTag.value = false;
+      }
+      switch (key) {
+        case 'Enter':
+          addTag(e);
+          break;
+        case 'Backspace':
+          delTagByBackspace(e);
+          break;
+      }
+    };
+
+    const delTagByBackspace = (e: KeyboardEvent) => {
+      const val = (e.target as HTMLInputElement).value;
+      if (val) {
+        return;
+      }
+      if (tags.value.length >= 1) {
+        if (readyDeleteTag.value) {
+          delTag(tags.value.length - 1);
+          readyDeleteTag.value = false;
+        } else {
+          readyDeleteTag.value = true;
+        }
+      }
+    };
+
+    const onMouseup = () => {
+      readyDeleteTag.value = false;
+    };
+
+    const onBlur = (e: Event) => {
+      readyDeleteTag.value = false;
+      const val = (e.target as HTMLInputElement).value;
+      addTag0(val);
     };
 
     watch(
@@ -140,18 +200,25 @@ export default defineComponent({
       },
       { immediate: true }
     );
+
     const { placeholder } = usePlaceholderProps(props);
+
     return {
       placeholder,
       current,
       tags,
       readonly,
       disabled,
+      readyDeleteTag,
       clearStatus,
-      currentChange,
       addTag,
       delTag,
-      clearTag
+      clearTag,
+
+      onInputValue,
+      onKeydown,
+      onMouseup,
+      onBlur
     };
   }
 });

package/src/field/form/text/DomainExpGenerator/ExpRight.vue

@@ -6,6 +6,7 @@
       class="oio-select"
       dropdown-class-name="oio-select-dropdown"
       :mode="field.ttype === 'O2M' || field.ttype === 'M2M' ? 'multiple' : 'default'"
+      show-arrow
       :value="exp.right.val"
       @change="changeValue"
       style="width: 20%"

package/src/field/gallery/common/style/index.scss

@@ -6,13 +6,31 @@ $height: 20px;
   width: 100%;
   line-height: $height;
   color: var($parameterPrefix + -text-color);
+  font-size: var($parameterPrefix + -font-size-sm);
   white-space: pre-wrap;
   display: flex;
   flex-flow: row nowrap;
 
+  .ant-upload-list-picture-card-container {
+    width: 50px;
+    height: 50px;
+    .ant-upload-list-item {
+      padding: 0;
+      border: 1px solid var(--oio-border-color);
+    }
+  }
+
   .gallery-common-field-value {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 }
+
+.default-card-title-wrap,
+.default-card-content-wrap {
+  .gallery-common-field-value {
+    text-wrap: wrap;
+    word-wrap: break-word;
+  }
+}

package/src/field/gallery/string/default/GalleryString.vue

@@ -102,4 +102,12 @@ export default defineComponent({
     color: var(--oio-text-color-secondary);
   }
 }
+
+.default-card-title-wrap,
+.default-card-content-wrap {
+  .gallery-string-value {
+    text-wrap: wrap;
+    word-wrap: break-word;
+  }
+}
 </style>

package/src/field/gallery/string/hyperlinks/GalleryHyperlinks.vue

@@ -41,4 +41,12 @@ export default defineComponent({
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.default-card-title-wrap,
+.default-card-content-wrap {
+  .gallery-string-hyperlinks {
+    text-wrap: wrap;
+    word-wrap: break-word;
+  }
+}
 </style>

package/src/field/gallery/string/media-player/GalleryMediaPlayer.vue

@@ -1,12 +1,12 @@
 <template>
   <gallery-common-field :value="value" :justify-content="justifyContent" :empty-style="emptyStyle">
     <template #default>
-      <div class="gallery-media-widget-internal" @click.stop>
+      <div class="gallery-media-internal-widget" @click.stop>
         <div class="gallery-media-widget-item" v-if="currentValue.src" @click="onPreview">
           <div class="gallery-media-video" v-if="currentValue.video">
             <video :src="currentValue.src" alt="" style="width: 100%; height: 100%"></video>
             <div class="gallery-media-video-play">
-              <i class="iconfont oinone-zantingbofang"></i>
+              <oio-icon color="#fff" size="16" icon="oinone-zantingbofang"></oio-icon>
             </div>
           </div>
           <a-image :src="currentValue.src" alt="" v-else @click.stop style="width: 100%; height: 100%" />
@@ -21,15 +21,16 @@
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
 import { Image as AImage } from 'ant-design-vue';
+import { VIDEO_SUFFIX_LIST, OioIcon } from '@oinone/kunlun-vue-ui-common';
 import { PreviewMedia } from '../../../../components';
 import GalleryCommonField from '../../common/GalleryCommonField.vue';
-import { VIDEO_SUFFIX_LIST } from '@oinone/kunlun-vue-ui-common';
 
 export default defineComponent({
   components: {
     PreviewMedia,
     GalleryCommonField,
-    AImage
+    AImage,
+    OioIcon
   },
   inheritAttrs: false,
   props: {
@@ -67,16 +68,16 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.gallery-media-widget-internal {
+.gallery-media-internal-widget {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: var(--oio-row-gap);
 
   .gallery-media-widget-item {
     cursor: pointer;
     position: relative;
-    width: 32px;
-    height: 32px;
+    width: 48px;
+    height: 48px;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -90,23 +91,18 @@ export default defineComponent({
   .gallery-media-video-play {
     position: absolute;
     background: rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(227, 231, 238, 1);
-    border-radius: 4px;
+    border: 1px solid var(--oio-border-color);
+    border-radius: var(--oio-border-radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
-
-    i {
-      font-size: 12px;
-      color: #fff;
-    }
+    width: 48px;
+    height: 48px;
   }
 
   img {
-    border: 1px solid rgba(227, 231, 238, 1);
-    border-radius: 4px;
+    border: 1px solid var(--oio-border-color);
+    border-radius: var(--oio-border-radius-sm);
   }
 }
 </style>