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

package/src/components/select/base/DefaultSelect.vue

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { TableKeyboardConfig } from '@oinone/kunlun-engine';
+import { OioSelectItem, StringHelper } from '@oinone/kunlun-shared';
+import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { computed, createVNode, defineComponent, PropType } from 'vue';
+import BaseSelect from './BaseSelect.vue';
+import { DefaultSelectProps } from './props';
+
+export default defineComponent({
+  name: 'DefaultSelect',
+  components: {},
+  inheritAttrs: false,
+  props: {
+    ...DefaultSelectProps,
+    notFoundContent: {
+      type: [Object, Function]
+    },
+    tableKeyboardConfig: {
+      type: Object as PropType<TableKeyboardConfig>
+    }
+  },
+  setup(props) {
+    const isEnterSubmit = computed(() => props.tableKeyboardConfig?.enter?.key === 'Enter');
+
+    const onChange = (val: OioSelectItem | OioSelectItem[] | null | undefined) => {
+      if (!val) {
+        props.change?.(null);
+        return;
+      }
+      if (Array.isArray(val)) {
+        const finalOptions: unknown[] = [];
+        for (const item of val) {
+          let { data } = item;
+          if (data) {
+            finalOptions.push(data);
+          } else {
+            const { key } = item;
+            data = props.initSelectedOptions?.find((vv) => vv.key === key)?.data;
+            if (data) {
+              finalOptions.push(data);
+            }
+          }
+        }
+        if (finalOptions.length) {
+          props.change?.(finalOptions);
+        } else {
+          props.change?.(null);
+        }
+        return;
+      }
+      props.change?.(val.data);
+    };
+
+    return {
+      isEnterSubmit,
+      onChange
+    };
+  },
+  render() {
+    const {
+      $attrs,
+      $slots,
+
+      mode,
+      selected,
+      searchValue,
+      onUpdateSearchValue,
+      options,
+      dropdownClassName,
+      placeholder,
+      loadMoreLoading,
+      loadCompleted,
+      allowArrow,
+      allowSearch,
+      searchArea,
+      allowClear,
+      onChange,
+      focus,
+      blur,
+      search,
+      initLoad,
+      loadMore,
+      notFoundContent,
+      isEnterSubmit
+    } = this;
+    const classNames = ['oio-default-select'];
+    if (options == null) {
+      classNames.push('oio-default-select-none-options');
+    }
+    return createVNode(
+      BaseSelect,
+      {
+        ...PropRecordHelper.collectionBasicProps($attrs, classNames),
+        dropdownClassName: StringHelper.append(['oio-default-select-dropdown'], dropdownClassName),
+        mode,
+        value: selected,
+        searchValue,
+        'onUpdate:search-value': onUpdateSearchValue,
+        options,
+        placeholder,
+        loadMoreLoading,
+        loadCompleted,
+        allowArrow,
+        allowSearch,
+        searchArea,
+        allowClear,
+        change: onChange,
+        focus,
+        blur,
+        search,
+        initLoad,
+        loadMore,
+        notFoundContent,
+        isEnterSubmit
+      },
+      $slots
+    );
+  }
+});
+</script>
+<style lang="scss">
+.oio-default-select {
+  &.oio-default-select-none-options {
+    .ant-select-single.ant-select-open .ant-select-selection-item {
+      color: var(--oio-select-text-color);
+    }
+  }
+}
+</style>

package/src/components/select/base/index.ts

@@ -0,0 +1,4 @@
+export * from './props';
+export * from './typing';
+export { default as BaseSelect } from './BaseSelect.vue';
+export { default as DefaultSelect } from './DefaultSelect.vue';

package/src/components/select/base/props.ts

@@ -0,0 +1,96 @@
+import { SelectSearchArea } from '@oinone/kunlun-engine';
+import { OioSelectItem } from '@oinone/kunlun-shared';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { PropType } from 'vue';
+import { OioCommonProps, OioMetadataProps } from '../../../basic/props';
+
+const AppearanceProps = {
+  dropdownClassName: {
+    type: [String, Array] as PropType<string | string[]>
+  },
+  placeholder: {
+    type: String
+  },
+  allowArrow: {
+    type: Boolean,
+    default: undefined
+  },
+  allowClear: {
+    type: Boolean,
+    default: undefined
+  },
+  getTriggerContainer: {
+    type: Function
+  }
+};
+
+const ControlProps = {
+  mode: {
+    type: String as PropType<SelectMode | keyof typeof SelectMode>,
+    default: SelectMode.single
+  },
+  value: {
+    type: [Object, Array]
+  },
+  options: {
+    type: Array as PropType<object[]>
+  },
+  initLoad: {
+    type: Function
+  },
+  loadMore: {
+    type: Function
+  },
+  loadMoreLoading: {
+    type: Boolean,
+    default: undefined
+  },
+  loadCompleted: {
+    type: Boolean,
+    default: undefined
+  }
+};
+
+const SearchProps = {
+  allowSearch: {
+    type: Boolean,
+    default: undefined
+  },
+  searchArea: {
+    type: String as PropType<SelectSearchArea | keyof typeof SelectSearchArea>
+  },
+  searchValue: {
+    type: String
+  },
+  search: {
+    type: Function
+  }
+};
+
+export const BaseSelectProps = {
+  ...OioCommonProps,
+  ...OioMetadataProps,
+  ...AppearanceProps,
+  ...ControlProps,
+  ...SearchProps,
+  'onUpdate:search-value': {
+    type: Function
+  }
+};
+
+export const DefaultSelectProps = {
+  ...OioCommonProps,
+  ...OioMetadataProps,
+  ...AppearanceProps,
+  ...ControlProps,
+  ...SearchProps,
+  onUpdateSearchValue: {
+    type: Function
+  },
+  initSelectedOptions: {
+    type: Array as PropType<OioSelectItem[]>
+  },
+  selected: {
+    type: [Object, Array] as PropType<OioSelectItem | OioSelectItem[]>
+  }
+};

package/src/components/select/base/typing.ts

@@ -0,0 +1,6 @@
+export interface SelectItemRenderOption {
+  key: string;
+  label: string;
+  title?: string;
+  render: Function;
+}

package/src/components/select/company-select/CompanySelect.vue

@@ -0,0 +1,159 @@
+<script lang="ts">
+import { PamirsCompany, TableKeyboardConfig } from '@oinone/kunlun-engine';
+import { OioSelectItem } from '@oinone/kunlun-shared';
+import { CastHelper, OioButton, PropRecordHelper, StringHelper } from '@oinone/kunlun-vue-ui-antd';
+import { computed, createVNode, defineComponent, PropType } from 'vue';
+import { DefaultSelect, DefaultSelectProps } from '../base';
+import { selectorCompanySelectOptionRender } from './render';
+
+export default defineComponent({
+  name: 'CompanySelect',
+  components: {
+    DefaultSelect,
+    OioButton
+  },
+  inheritAttrs: false,
+  props: {
+    ...DefaultSelectProps,
+    bizStyle: {
+      type: String
+    },
+    tableKeyboardConfig: {
+      type: Object as PropType<TableKeyboardConfig>
+    }
+  },
+  setup(props) {
+    const optionRender = computed(() => selectorCompanySelectOptionRender(props.bizStyle));
+
+    return {
+      optionRender
+    };
+  },
+  render() {
+    const {
+      $attrs,
+
+      dropdownClassName,
+      bizStyle,
+      tableKeyboardConfig,
+      optionRender
+    } = this;
+    const classNames = ['oio-company-select'];
+    const dropdownClassNames = ['oio-company-select-dropdown'];
+    if (bizStyle) {
+      classNames.push(`oio-company-select-${bizStyle}`);
+      dropdownClassNames.push(`oio-company-select-dropdown-${bizStyle}`);
+    }
+    return createVNode(
+      DefaultSelect,
+      {
+        ...PropRecordHelper.convert(DefaultSelectProps, CastHelper.cast(this)),
+        ...PropRecordHelper.collectionBasicProps($attrs, classNames),
+        dropdownClassName: StringHelper.append(dropdownClassNames, dropdownClassName),
+        tableKeyboardConfig
+      },
+      {
+        option: (data: OioSelectItem<PamirsCompany>) => optionRender(data)
+      }
+    );
+  }
+});
+</script>
+<style lang="scss">
+.oio-company-select-dropdown {
+  .ant-select-item {
+    padding: 0 8px;
+    margin: 0 4px;
+    border-radius: 4px;
+  }
+
+  .ant-select-item-option-content > .oio-company-select-option-label {
+    padding: 5px 0;
+  }
+
+  .oio-company-select-option {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+
+    .oio-company-select-option-logo {
+      text-align: center;
+      color: #ffffff;
+    }
+
+    .oio-company-select-option-label {
+      font-size: 14px;
+      line-height: 22px;
+      font-weight: 400;
+    }
+  }
+
+  .oio-company-select-option-style1 {
+    height: 32px;
+
+    .oio-company-select-option-logo {
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      border-radius: 4px;
+
+      img {
+        width: 20px;
+        height: 20px;
+        margin-bottom: 1em;
+      }
+    }
+
+    .oio-company-select-option-logo-label {
+      padding: 3px 5px;
+      background-color: #4589ff;
+      font-size: 10px;
+      line-height: 14px;
+    }
+
+    .oio-company-select-option-label {
+      flex: 1;
+    }
+  }
+
+  .oio-company-select-option-style2 {
+    height: 52px;
+
+    .oio-company-select-option-wrapper {
+      flex: 1;
+    }
+
+    .oio-company-select-option-logo {
+      width: 36px;
+      height: 36px;
+      border-radius: 6px;
+
+      img {
+        width: 36px;
+        height: 36px;
+        border-radius: 6px;
+      }
+    }
+
+    .oio-company-select-option-logo-label {
+      padding: 4px 8px;
+      background-color: #4589ff;
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    .oio-company-select-option-info {
+      display: flex;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.25);
+      line-height: 14px;
+      font-weight: 400;
+      align-items: center;
+
+      .oio-divider {
+        margin: 0 4px;
+      }
+    }
+  }
+}
+</style>

package/src/components/select/company-select/index.ts

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

package/src/components/select/company-select/render/index.ts

@@ -0,0 +1 @@
+export * from './optionRender';

package/src/components/select/company-select/render/logo.ts

@@ -0,0 +1,18 @@
+import { PamirsCompany } from '@oinone/kunlun-engine';
+import { OioSelectItem, StringHelper } from '@oinone/kunlun-shared';
+import { createVNode, VNode } from 'vue';
+
+export default function render(data: OioSelectItem<PamirsCompany>): VNode {
+  const { logoUrl } = data.data;
+  const classNames = ['oio-company-select-option-logo'];
+  if (logoUrl) {
+    classNames.push('oio-company-select-option-logo-img');
+    return createVNode('div', { class: classNames }, [createVNode('img', { src: logoUrl })]);
+  }
+  classNames.push('oio-company-select-option-logo-label');
+  let first = data.label.trim().charAt(0);
+  if (StringHelper.isLetter(first.charCodeAt(0))) {
+    first = first.toUpperCase();
+  }
+  return createVNode('div', { class: classNames }, [createVNode('span', {}, first)]);
+}

package/src/components/select/company-select/render/optionRender.ts

@@ -0,0 +1,55 @@
+import { PamirsCompany } from '@oinone/kunlun-engine';
+import { OioSelectItem } from '@oinone/kunlun-shared';
+import { createVNode, VNode } from 'vue';
+import styleRender1 from './style1';
+import styleRender2 from './style2';
+
+export type CompanySelectOptionRender = (data: OioSelectItem<PamirsCompany>) => string | VNode | VNode[];
+
+export interface CompanySelectOption {
+  key: string;
+  label: string;
+}
+
+const options = new Map<string, CompanySelectOption>();
+const renders = new Map<string, CompanySelectOptionRender>();
+
+export function registerCompanySelectOptionRender(option: CompanySelectOption, render: CompanySelectOptionRender) {
+  options.set(option.key, option);
+  renders.set(option.key, render);
+}
+
+export function selectorCompanySelectOptionRender(bizStyle: string | null | undefined): CompanySelectOptionRender {
+  if (bizStyle) {
+    return renders.get(bizStyle) || defaultRender;
+  }
+  return defaultRender;
+}
+
+export function getCompanySelectOptions(): CompanySelectOption[] {
+  return Array.from(options.values());
+}
+
+export enum CompanySelectBizStyle {
+  style1 = 'style1',
+  style2 = 'style2'
+}
+
+function defaultRender(data: OioSelectItem<PamirsCompany>) {
+  return createVNode('div', { class: 'oio-company-select-option-label' }, data.label);
+}
+
+registerCompanySelectOptionRender(
+  {
+    key: CompanySelectBizStyle.style1,
+    label: '精简样式'
+  },
+  styleRender1
+);
+registerCompanySelectOptionRender(
+  {
+    key: CompanySelectBizStyle.style2,
+    label: '详细样式'
+  },
+  styleRender2
+);

package/src/components/select/company-select/render/style1.ts

@@ -0,0 +1,11 @@
+import { PamirsCompany } from '@oinone/kunlun-engine';
+import { OioSelectItem } from '@oinone/kunlun-shared';
+import { createVNode, VNode } from 'vue';
+import createLogo from './logo';
+
+export default function render(data: OioSelectItem<PamirsCompany>): string | VNode | VNode[] {
+  return createVNode('div', { class: 'oio-company-select-option oio-company-select-option-style1' }, [
+    createLogo(data),
+    createVNode('div', { class: 'oio-company-select-option-label' }, data.label)
+  ]);
+}

package/src/components/select/company-select/render/style2.ts

@@ -0,0 +1,33 @@
+import { PamirsCompany, StaffSize } from '@oinone/kunlun-engine';
+import { OioSelectItem } from '@oinone/kunlun-shared';
+import { OioDivider, Optional } from '@oinone/kunlun-vue-ui-antd';
+import { createVNode, VNode } from 'vue';
+import createLogo from './logo';
+
+export default function render(data: OioSelectItem<PamirsCompany>): string | VNode | VNode[] {
+  const optionInfos: VNode[] = [];
+  const pushOptionInfo = (optionInfo: VNode): void => {
+    if (optionInfos.length) {
+      optionInfos.push(createVNode(OioDivider, { type: 'vertical' }));
+    }
+    optionInfos.push(optionInfo);
+  };
+  Optional.ofNullable(data.data.responsiblePerson?.name)
+    .map((v) => createVNode('div', { class: 'oio-company-select-option-legal-person' }, v))
+    .ifPresent(pushOptionInfo);
+  Optional.ofNullable(data.data.staffSize)
+    .map((v) => StaffSize[v])
+    .map((v) => createVNode('div', { class: 'oio-company-select-option-staff-size' }, v))
+    .ifPresent(pushOptionInfo);
+  Optional.ofNullable(data.data.licenseRegisterTime)
+    .map((v) => createVNode('div', { class: 'oio-company-select-license-register-time' }, v))
+    .ifPresent(pushOptionInfo);
+  const wrapperNodes: VNode[] = [createVNode('div', { class: 'oio-company-select-option-label' }, data.label)];
+  if (optionInfos.length) {
+    wrapperNodes.push(createVNode('div', { class: 'oio-company-select-option-info' }, optionInfos));
+  }
+  return createVNode('div', { class: 'oio-company-select-option oio-company-select-option-style2' }, [
+    createLogo(data),
+    createVNode('div', { class: 'oio-company-select-option-wrapper' }, wrapperNodes)
+  ]);
+}