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

package/src/components/sortable-group/SortableGroup.vue

@@ -0,0 +1,346 @@
+<template>
+  <div class="sortable-group-component">
+    <div class="sortable-group-body">
+      <!-- 添加下拉 -->
+      <a-popover
+        overlay-class-name="oio-popover sortable-group-popover"
+        trigger="click"
+        placement="bottomLeft"
+        :visible="visiblePopover"
+      >
+        <template #content>
+          <oio-input :placeholder="$translate('搜索')" v-model:value="searchKey">
+            <template #prefix>
+              <oio-icon icon="oinone-sousuo2" size="16"></oio-icon>
+            </template>
+          </oio-input>
+          <div class="sortable-group-select">
+            <div
+              v-for="field in showModelFields"
+              class="sortable-group-select-item"
+              :class="[existingFields.includes(field.name) && 'sortable-group-select-item-disabled']"
+              @click="onSelectField(field)"
+            >
+              {{ field.disabled || field.label }}
+            </div>
+          </div>
+        </template>
+        <span class="sortable-group-title" @click="visiblePopover = !visiblePopover">
+          <span class="sortable-group-title-content">
+            <oio-icon size="14" icon="oinone-tianjia" color="var(--oio-primary-color)"></oio-icon>
+            <span>{{ $translate(title) }}</span>
+          </span>
+        </span>
+      </a-popover>
+
+      <!-- 列表 -->
+      <draggable
+        v-model="draggableList"
+        item-key="sort"
+        :class="[draggableList.length && 'sortable-group-draggable-content']"
+        handle=".sortable-group-field-drag-icon"
+      >
+        <template #item="{ element, index }">
+          <div class="sortable-group-field">
+            <oio-icon
+              icon="oinone-tuodong"
+              size="14"
+              color="var(default-icon-color)"
+              class="sortable-group-field-drag-icon"
+            />
+            <span class="sortable-group-field-label">{{ element.displayName }}</span>
+            <a-radio-group v-model:value="element[directionKey]">
+              <a-radio-button :value="EDirection.ASC">{{ $translate('升序') }}</a-radio-button>
+              <a-radio-button :value="EDirection.DESC">{{ $translate('降序') }}</a-radio-button>
+            </a-radio-group>
+            <oio-icon class="sortable-group-field-remove" icon="oinone-shanchu3" size="14" @click="onRemove(index)" />
+          </div>
+        </template>
+      </draggable>
+    </div>
+
+    <!-- 确认按钮 -->
+    <div class="sort-group-footer">
+      <oio-button type="primary" @click="onSubmit" size="small">
+        {{ $translate(sureText) }}
+      </oio-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { RuntimeModelField } from '@oinone/kunlun-engine';
+import { EDirection } from '@oinone/kunlun-service';
+import { OioButton, OioIcon, OioInput } from '@oinone/kunlun-vue-ui-antd';
+import { computed, defineComponent, PropType, ref, watch } from 'vue';
+import Draggable from 'vuedraggable';
+import { SortableGroupOption } from './typing';
+
+export default defineComponent({
+  props: {
+    list: {
+      type: Array as PropType<any[]>,
+      default: () => []
+    },
+    fieldKey: {
+      type: String,
+      default: 'sortField'
+    },
+    directionKey: {
+      type: String,
+      default: 'direction'
+    },
+    title: {
+      type: String
+    },
+    sureText: {
+      type: String,
+      default: '确定'
+    },
+    modelFields: {
+      type: Array as PropType<SortableGroupOption[]>,
+      default: () => []
+    }
+  },
+  emits: ['update:list', 'change'],
+  components: {
+    OioIcon,
+    OioButton,
+    OioInput,
+    Draggable
+  },
+  setup(props, { emit }) {
+    const draggableList = ref<{ displayName?: string; [key: string]: any }[]>([]);
+    const searchKey = ref('');
+    const visiblePopover = ref(false);
+
+    const showModelFields = computed(() => {
+      if (!searchKey.value) {
+        return props.modelFields;
+      }
+      return props.modelFields.filter((field) => field.label?.includes(searchKey.value));
+    });
+
+    const existingFields = computed(() => {
+      return draggableList.value.map((v) => v[props.fieldKey]);
+    });
+
+    const onSelectField = (field: RuntimeModelField) => {
+      if (existingFields.value.includes(field.name)) {
+        return;
+      }
+
+      visiblePopover.value = false;
+      draggableList.value.push({
+        displayName: field.label,
+        [props.fieldKey]: field.name,
+        [props.directionKey]: EDirection.ASC
+      });
+    };
+
+    const onRemove = (index: number) => {
+      draggableList.value.splice(index, 1);
+    };
+
+    const onSubmit = () => {
+      emit('update:list', [...draggableList.value]);
+      emit('change', [...draggableList.value]);
+    };
+
+    const getPopupContainer = () => {
+      return (target) => target.parentNode || document.body;
+    };
+
+    watch(
+      () => props.list,
+      (val) => {
+        const fieldDisplayNameMap = new Map(props.modelFields.map((v) => [v.name, v.label]));
+
+        draggableList.value = val.map((v) => ({
+          ...v,
+          displayName: fieldDisplayNameMap.get(v[props.fieldKey])
+        }));
+      },
+      {
+        immediate: true
+      }
+    );
+
+    return {
+      existingFields,
+      draggableList,
+      showModelFields,
+      EDirection,
+      searchKey,
+      visiblePopover,
+      onRemove,
+      onSubmit,
+      getPopupContainer,
+      onSelectField
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.sortable-group-component {
+  .sortable-group-body {
+    padding: var(--oio-padding-lg) var(--oio-padding-sm);
+
+    .sortable-group-title {
+      display: inline-block;
+      padding: 0 0 0 var(--oio-padding-sm);
+    }
+
+    .sortable-group-title-content {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      color: var(--oio-primary-color);
+    }
+
+    .sortable-group-draggable-content {
+      margin-top: var(--oio-margin);
+    }
+
+    .sortable-group-field {
+      display: flex;
+      align-items: center;
+      padding: 5px var(--oio-padding-sm);
+      cursor: pointer;
+      border-radius: var(--oio-border-radius);
+
+      &:hover {
+        background-color: var(--oio-table-thead-bg);
+
+        .oio-icon {
+          color: var(--oio-primary-color);
+        }
+      }
+
+      .sortable-group-field-label {
+        flex: 1;
+      }
+
+      .sortable-group-field-remove {
+        margin-left: var(--oio-margin-sm);
+      }
+
+      .ant-radio-group {
+        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
+          border-color: var(--oio-primary-color);
+          color: var(--oio-primary-color);
+        }
+
+        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+          box-shadow: none;
+        }
+
+        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):last-child {
+          border-color: var(--oio-primary-color);
+        }
+
+        .ant-radio-button-wrapper:not(:first-child):before {
+          background-color: var(--oio-primary-color);
+        }
+
+        .ant-radio-button-wrapper {
+          height: 30px;
+          padding: 0 var(--oio-padding-lg);
+          font-size: var(--oio-font-size-sm);
+
+          &:first-child {
+            border-radius: var(--oio-border-radius) 0 0 var(--oio-border-radius);
+          }
+
+          &:last-child {
+            border-radius: 0 var(--oio-border-radius) var(--oio-border-radius);
+          }
+        }
+
+        .ant-radio-button-wrapper-checked span {
+          color: var(--oio-primary-color);
+        }
+      }
+    }
+  }
+
+  .sort-group-footer {
+    padding: var(--oio-padding-md);
+    border-top: 1px solid var(--oio-border-color);
+
+    .oio-button {
+      line-height: var(--oio-line-height-sm);
+      padding: 2px var(--oio-padding-sm);
+      height: auto;
+      text-align: center;
+
+      &.ant-btn > span {
+        font-size: var(--oio-font-size-sm);
+        line-height: unset;
+      }
+    }
+  }
+
+  .oio-icon {
+    margin-right: var(--oio-margin-sm);
+    cursor: pointer;
+  }
+}
+
+.sortable-group-popover {
+  width: 250px;
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
+  border-radius: var(--oio-border-radius);
+  padding: 0;
+
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+
+  .oio-input {
+    border: 0;
+
+    &:hover,
+    &:focus {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  .sortable-group-select {
+    max-height: 200px;
+    padding: 4px;
+    overflow-y: scroll;
+    border-top: 1px solid var(--oio-border-color);
+
+    .sortable-group-select-item {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: middle;
+      line-height: var(--oio-height);
+      color: var(--oio-text-color);
+      border-radius: var(--oio-border-radius-md);
+      line-height: normal;
+      padding: 5px;
+      margin-bottom: 4px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      cursor: pointer;
+
+      &.sortable-group-select-item-disabled {
+        color: var(--oio-disabled-color);
+        cursor: no-drop;
+      }
+
+      &:hover {
+        background: var(--oio-select-dropdown-hover-background);
+        color: var(--oio-select-dropdown-hover-color);
+      }
+    }
+  }
+}
+</style>

package/src/components/sortable-group/index.ts

@@ -0,0 +1,2 @@
+export * from './typing';
+export { default as SortableGroup } from './SortableGroup.vue';

package/src/components/sortable-group/typing.ts

@@ -0,0 +1,5 @@
+export interface SortableGroupOption {
+  data: string;
+  name: string;
+  label: string;
+}

package/src/components/table-line-height/TableLineHeight.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-dropdown
+    overlay-class-name="default-table-line-height-dropdown"
+    trigger="click"
+    placement="bottomRight"
+    @visible-change="handleVisibleChange"
+  >
+    <div class="default-view-control-item default-table-line-height">
+      <a-tooltip placement="bottom" class="oio-tooltip" v-model:visible="tooltipStatus">
+        <template #title>
+          <span>{{ $translate('行高切换') }}</span>
+        </template>
+        <oio-icon size="16" :icon="icon"></oio-icon>
+      </a-tooltip>
+    </div>
+    <template #overlay>
+      <a-menu>
+        <a-menu-item
+          v-for="option in options"
+          :class="[active === option.value && 'ant-dropdown-menu-item-active ']"
+          :key="option.value"
+          @click="onChange(option.value)"
+        >
+          <oio-icon size="16" :icon="option.icon"></oio-icon>
+          <span>{{ option.label }}</span>
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts">
+import { translateValueByKey } from '@oinone/kunlun-engine';
+import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
+import { Dropdown as ADropdown, Menu as AMenu, MenuItem as AMenuItem, Tooltip as ATooltip } from 'ant-design-vue';
+import { computed, defineComponent, PropType, ref } from 'vue';
+import { TableLineHeightEnum } from '../../typing';
+
+export default defineComponent({
+  name: 'DefaultTableLineHeight',
+  props: {
+    value: {
+      type: String as PropType<TableLineHeightEnum>
+    }
+  },
+  emits: ['change', 'update:value'],
+  components: {
+    ADropdown,
+    AMenu,
+    AMenuItem,
+    OioIcon,
+    ATooltip
+  },
+  setup(props, { emit }) {
+    const options = [
+      { label: translateValueByKey('默认'), icon: 'oinone-a-defaultrowheight', value: TableLineHeightEnum.DEFAULT },
+      { label: translateValueByKey('高'), icon: 'oinone-height-outlined', value: TableLineHeightEnum.LARGE },
+      { label: translateValueByKey('中'), icon: 'oinone-medium-height-outlined', value: TableLineHeightEnum.MIDDLE },
+      { label: translateValueByKey('低'), icon: 'oinone-low-height-outlined', value: TableLineHeightEnum.SMALL },
+      { label: translateValueByKey('自适应'), icon: 'oinone-adaptive-outlined', value: TableLineHeightEnum.AUTO }
+    ];
+
+    const tooltipStatus = ref(false);
+
+    const handleVisibleChange = (visible: boolean) => {
+      if (visible) {
+        tooltipStatus.value = false;
+      }
+    };
+
+    const active = ref(props.value == null ? TableLineHeightEnum.DEFAULT : props.value);
+    const icon = computed(() => options.find((item) => item.value === active.value)?.icon);
+
+    const onChange = (value: TableLineHeightEnum) => {
+      active.value = value;
+      emit('update:value', value);
+      emit('change', value);
+    };
+
+    return {
+      options,
+      icon,
+      active,
+      tooltipStatus,
+      onChange,
+      handleVisibleChange
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.default-table-line-height-dropdown {
+  .ant-dropdown-menu-item {
+    margin: 4px;
+
+    &.ant-dropdown-menu-item-active,
+    &:not(.ant-dropdown-menu-item-disabled):hover {
+      background: #f4f4f4;
+      border-radius: var(--oio-border-radius);
+    }
+  }
+
+  .ant-dropdown-menu-title-content {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    color: var(--oio-text-color-secondary);
+  }
+}
+</style>

package/src/components/table-line-height/index.ts

@@ -0,0 +1 @@
+export { default as TableLineHeight } from './TableLineHeight.vue';

package/src/components/user-prefer/DefaultUserPrefer.vue

@@ -34,6 +34,9 @@ export default defineComponent({
     },
     resetCallback: {
       type: Function
+    },
+    title: {
+      type: String
     }
   },
   setup(props) {
@@ -91,6 +94,7 @@ export default defineComponent({
       visibleFields,
       selected,
       visible,
+      title,
       onUpdateSelected,
 
       onClick,
@@ -134,6 +138,7 @@ export default defineComponent({
     } else {
       children.push(
         createVNode(StandardUserPreferSetting, {
+          title,
           visible,
           fields,
           invisibleFields,

package/src/components/user-prefer/StandardUserPreferSetting.vue

@@ -44,6 +44,10 @@ export default defineComponent({
     visible: {
       type: Boolean
     },
+    title: {
+      type: String,
+      default: '表头设置'
+    },
     fields: {
       type: Array as PropType<DataOption[]>
     },
@@ -385,7 +389,7 @@ export default defineComponent({
   render() {
     const {
       modalId,
-
+      title,
       visible,
       onUpdateVisible,
 
@@ -409,7 +413,7 @@ export default defineComponent({
     return createVNode(
       OioModal,
       {
-        title: this.$translate('表头设置'),
+        title: this.$translate(title),
         wrapperClassName: `${classNamePrefix}-modal`,
         wrapperProps: {
           id: modalId

package/src/container/block/DefaultBlock.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
-import { DslDefinition } from '@oinone/kunlun-dsl';
-import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { CastHelper } from '@oinone/kunlun-shared';
 import {
   FormLayout,
   OioBlock,
@@ -18,9 +17,6 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...OioBlockProps,
-    template: {
-      type: Object as PropType<DslDefinition>
-    },
     layout: {
       type: [String, Object] as PropType<FormLayout>
     },
@@ -40,11 +36,7 @@ export default defineComponent({
         OioBlock,
         {
           ...PropRecordHelper.convert(OioBlockProps, CastHelper.cast(this)),
-          ...PropRecordHelper.collectionBasicProps(
-            this.$attrs,
-            StringHelper.append([], CastHelper.cast(this.template?.class)),
-            CastHelper.cast(this.template?.style)
-          )
+          ...PropRecordHelper.collectionBasicProps(this.$attrs)
         },
         PropRecordHelper.collectionSlots(this.$slots, [{ origin: 'default', isNotNull: true }])
       ),

package/src/container/block/DefaultCol.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
-import { DslDefinition } from '@oinone/kunlun-dsl';
-import { CastHelper, CSSStyle, StringHelper } from '@oinone/kunlun-shared';
+import { CastHelper, CSSStyle } from '@oinone/kunlun-shared';
 import {
   FlexColMode,
   FlexDirection,
@@ -22,9 +21,6 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...OioColProps,
-    template: {
-      type: Object as PropType<DslDefinition>
-    },
     invisible: {
       type: Boolean,
       default: false
@@ -65,7 +61,7 @@ export default defineComponent({
     };
   },
   render() {
-    const { $attrs, $slots, template, mode, invisible, rowFlexDirection, rowWrap } = this;
+    const { $attrs, $slots, mode, invisible, rowFlexDirection, rowWrap } = this;
     const classList: string[] = [];
     if (mode === FlexColMode.FULL) {
       classList.push('default-col-full');
@@ -76,11 +72,7 @@ export default defineComponent({
     }
     let colProps = {
       ...PropRecordHelper.convert(OioColProps, CastHelper.cast(this)),
-      ...PropRecordHelper.collectionBasicProps(
-        $attrs,
-        StringHelper.append(classList, CastHelper.cast(template?.class)),
-        CastHelper.cast(template?.style)
-      )
+      ...PropRecordHelper.collectionBasicProps($attrs, classList)
     } as OioColModel & Record<string, unknown>;
     if ((mode && [FlexColMode.FULL, FlexColMode.AUTO].includes(mode)) || rowFlexDirection === FlexDirection.Column) {
       colProps = {

package/src/container/block/DefaultContainer.vue

@@ -1,13 +1,11 @@
 <script lang="ts">
-import { DslDefinition } from '@oinone/kunlun-dsl';
-import { CastHelper, CSSStyle, StringHelper } from '@oinone/kunlun-shared';
+import { CastHelper, CSSStyle } from '@oinone/kunlun-shared';
 import {
   FlexDirection,
   FormLayout,
   OioRow,
   OioRowProps,
   PropRecordHelper,
-  StyleHelper,
   useOioFormLayoutContext
 } from '@oinone/kunlun-vue-ui-antd';
 import { onAllMounted } from '@oinone/kunlun-vue-widget';
@@ -22,9 +20,6 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...OioRowProps,
-    template: {
-      type: Object as PropType<DslDefinition>
-    },
     invisible: {
       type: Boolean,
       default: false
@@ -121,7 +116,6 @@ export default defineComponent({
       const borderStyle = `${props.borderSize} ${props.borderStyle} ${props.borderColor}`;
 
       const style: CSSStyle = {
-        ...CastHelper.cast(StyleHelper.parse(props.template?.style) || {}),
         flexDirection: props.flexDirection || '',
         padding: props.padding,
         margin: props.margin,
@@ -166,18 +160,14 @@ export default defineComponent({
     };
   },
   render() {
-    const { $attrs, $slots, template, invisible, style, offsetLeftAndRight } = this;
+    const { $attrs, $slots, invisible, style, offsetLeftAndRight } = this;
     return withDirectives(
       createVNode('div', { class: 'default-container-wrapper', style: offsetLeftAndRight }, [
         createVNode(
           OioRow,
           {
             ...PropRecordHelper.convert(OioRowProps, CastHelper.cast(this)),
-            ...PropRecordHelper.collectionBasicProps(
-              $attrs,
-              StringHelper.append([], CastHelper.cast(template?.class)),
-              style
-            ),
+            ...PropRecordHelper.collectionBasicProps($attrs, ['default-container'], style),
             gutter: this.gutter
           },
           PropRecordHelper.collectionSlots($slots, [{ origin: 'default', isNotNull: true }])

package/src/container/block/DefaultContainerWidget.ts

@@ -1,11 +1,11 @@
-import { BooleanHelper } from '@oinone/kunlun-shared';
+import { BooleanHelper, CSSStyle } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { Widget } from '@oinone/kunlun-vue-widget';
 import { StyleHelper } from '@oinone/kunlun-vue-ui-common';
+import { Widget } from '@oinone/kunlun-vue-widget';
 import { isNil, isString } from 'lodash-es';
 import { BasePackWidget } from '../../basic';
-import { DefaultRowWidget } from './DefaultRowWidget';
 import DefaultContainer from './DefaultContainer.vue';
+import { DefaultRowWidget } from './DefaultRowWidget';
 
 @SPI.ClassFactory(BasePackWidget.Token({ widget: 'container' }))
 export class DefaultContainerWidget extends DefaultRowWidget {
@@ -16,7 +16,12 @@ export class DefaultContainerWidget extends DefaultRowWidget {
   }
 
   @Widget.Reactive()
-  protected style = { height: '100%' } as CSSStyleDeclaration;
+  protected get style(): string | Partial<CSSStyle> | undefined {
+    return {
+      ...(StyleHelper.parse(super.style as string) || {}),
+      height: '100%'
+    } as CSSStyle;
+  }
 
   @Widget.Reactive()
   public get layout(): string | undefined {