jnpf6/jnpf-web-monorepo-npm.git

/**
 * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
 * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
 */
 
import type { Component } from 'vue';
 
import type { BaseFormComponentType } from '@vben/common-ui';
 
import { defineComponent, h, ref } from 'vue';
 
import { useMessage } from '@jnpf/hooks';
import {
  AButton,
  BasicCaption,
  BasicHelp,
  JnpfAlert,
  JnpfAreaSelect,
  JnpfAutoComplete,
  JnpfBarcode,
  JnpfCalculate,
  JnpfCascader,
  JnpfCheckbox,
  JnpfCheckboxSingle,
  JnpfColorPicker,
  JnpfCron,
  JnpfDateCalculate,
  JnpfDatePicker,
  JnpfDateRange,
  JnpfDivider,
  JnpfEditor,
  JnpfEmpty,
  JnpfGroupSelect,
  JnpfI18nInput,
  JnpfIconPicker,
  JnpfIframe,
  JnpfInput,
  JnpfInputNumber,
  JnpfLink,
  JnpfLocation,
  JnpfMarkdown,
  JnpfMarkdownViewer,
  JnpfNumberRange,
  JnpfOpenData,
  JnpfOrganizeSelect,
  JnpfPopupAttr,
  JnpfPopupSelect,
  JnpfPopupTableSelect,
  JnpfPosSelect,
  JnpfQrcode,
  JnpfRadio,
  JnpfRate,
  JnpfRelationForm,
  JnpfRelationFormAttr,
  JnpfRoleSelect,
  JnpfSelect,
  JnpfSign,
  JnpfSignature,
  JnpfSlider,
  JnpfSwitch,
  JnpfText,
  JnpfTextarea,
  JnpfTimePicker,
  JnpfTimeRange,
  JnpfTreeSelect,
  JnpfUploadFile,
  JnpfUploadImg,
  JnpfUploadImgSingle,
  JnpfUserSelect,
  JnpfUsersSelect,
} from '@jnpf/ui';
 
import { globalShareState } from '@vben/common-ui';
import { $t } from '@vben/locales';
 
import { Checkbox as ACheckbox, Radio as ARadio, InputPassword, Mentions, notification, Space } from 'ant-design-vue';
 
import { chunkMerge, getDownloadUrl, getMapAroundList, getMapTextList, getPackDownloadUrl, previewFile } from '#/api/core/common';
import { getConfigData, getDataChange, getFieldDataSelect } from '#/api/onlineDev/visualDev';
import { getGroupByCondition } from '#/api/permission/group';
import { getOrganizeSelector, getOrgByOrganizeCondition, getOrgSelectedList } from '#/api/permission/organize';
import { getPositionByCondition, getPositionSelectedList, getPositionSelector, getPositionSelectorTree } from '#/api/permission/position';
import { getRoleByCondition } from '#/api/permission/role';
import { getSelectedList, getSelectedUserList, getUserInfoList, getUserList } from '#/api/permission/user';
import { createSign, getSignList } from '#/api/permission/userSetting';
import { getAreaByIds, getAreaSelector } from '#/api/system/area';
import { create as createBaseLang, getBaseLangList } from '#/api/system/baseLang';
import { createCollectMenu } from '#/api/system/collectMenu';
import { getSignatureListByIds } from '#/api/system/signature';
import { getDataInterfaceDataInfoByIds, getDataInterfaceDataSelect } from '#/api/systemData/dataInterface';
import { useAuthStore, useBaseStore, useGeneratorStore, useOrganizeStore } from '#/store';
import RelationFormDetail from '#/views/common/dynamicModel/list/detail/index.vue';
 
import { initSetupVbenForm } from '../form';
import { initSetupVxeTable } from '../vxe-table';
 
const { createMessage } = useMessage();
 
const withDefaultPlaceholder = <T extends Component>(component: T, type: 'input' | 'select', componentProps: Recordable<any> = {}) => {
  return defineComponent({
    name: component.name,
    inheritAttrs: false,
    setup: (props: any, { attrs, expose, slots }) => {
      const placeholder = props?.placeholder || attrs?.placeholder || $t(`ui.placeholder.${type}`);
      // 透传组件暴露的方法
      const innerRef = ref();
      // const publicApi: Recordable<any> = {};
      expose(
        new Proxy(
          {},
          {
            get: (_target, key) => innerRef.value?.[key],
            has: (_target, key) => key in (innerRef.value || {}),
          },
        ),
      );
      // const instance = getCurrentInstance();
      // instance?.proxy?.$nextTick(() => {
      //   for (const key in innerRef.value) {
      //     if (typeof innerRef.value[key] === 'function') {
      //       publicApi[key] = innerRef.value[key];
      //     }
      //   }
      // });
      h(component, { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef }, slots);
    },
  });
};
 
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
export type ComponentType =
  | 'Alert'
  | 'AreaSelect'
  | 'Barcode'
  | 'Button'
  | 'Calculate'
  | 'Cascader'
  | 'Checkbox'
  | 'CheckboxSingle'
  | 'ColorPicker'
  | 'Cron'
  | 'DatePicker'
  | 'DateRange'
  | 'DefaultButton'
  | 'Divider'
  | 'Editor'
  | 'GroupSelect'
  | 'GroupTitle'
  | 'I18nInput'
  | 'IconPicker'
  | 'Iframe'
  | 'Input'
  | 'InputNumber'
  | 'InputPassword'
  | 'Link'
  | 'Location'
  | 'Markdown'
  | 'MarkdownViewer'
  | 'Mentions'
  | 'NumberRange'
  | 'OpenData'
  | 'OrganizeSelect'
  | 'PopupAttr'
  | 'PopupSelect'
  | 'PopupTableSelect'
  | 'PosSelect'
  | 'PrimaryButton'
  | 'Qrcode'
  | 'Radio'
  | 'Rate'
  | 'RelationForm'
  | 'RelationFormAttr'
  | 'RoleSelect'
  | 'Select'
  | 'Sign'
  | 'Signature'
  | 'Slider'
  | 'Space'
  | 'Switch'
  | 'Text'
  | 'Textarea'
  | 'TimePicker'
  | 'TimeRange'
  | 'TreeSelect'
  | 'UploadFile'
  | 'UploadImg'
  | 'UploadImgSingle'
  | 'UserSelect'
  | 'UsersSelect'
  | BaseFormComponentType;
 
async function initComponentAdapter() {
  const components: Partial<Record<ComponentType, Component>> = {
    // 如果你的组件体积比较大，可以使用异步加载
    // Button: () =>
    // import('xxx').then((res) => res.Button),
 
    Button: AButton,
    BasicHelp,
    AutoComplete: JnpfAutoComplete,
    Checkbox: JnpfCheckbox,
    CheckboxSingle: JnpfCheckboxSingle,
    DatePicker: JnpfDatePicker,
    // 自定义默认按钮
    DefaultButton: (props, { attrs, slots }) => {
      return h(AButton, { ...props, attrs, type: 'default' }, slots);
    },
    Divider: JnpfDivider,
    Input: JnpfInput,
    InputNumber: JnpfInputNumber,
    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
    Mentions: withDefaultPlaceholder(Mentions, 'input'),
    // 自定义主要按钮
    PrimaryButton: (props, { attrs, slots }) => {
      return h(AButton, { ...props, attrs, type: 'primary' }, slots);
    },
    Radio: JnpfRadio,
    Rate: JnpfRate,
    Select: JnpfSelect,
    Space,
    Switch: JnpfSwitch,
    Textarea: withDefaultPlaceholder(JnpfTextarea, 'input'),
    TimePicker: JnpfTimePicker,
    TreeSelect: withDefaultPlaceholder(JnpfTreeSelect, 'select'),
    UploadFile: JnpfUploadFile,
    UploadImg: JnpfUploadImg,
    UploadImgSingle: JnpfUploadImgSingle,
    Alert: JnpfAlert,
    AreaSelect: JnpfAreaSelect,
    Barcode: JnpfBarcode,
    Calculate: JnpfCalculate,
    Cascader: JnpfCascader,
    ColorPicker: JnpfColorPicker,
    Cron: JnpfCron,
    DateCalculate: JnpfDateCalculate,
    DateRange: JnpfDateRange,
    Editor: JnpfEditor,
    GroupSelect: JnpfGroupSelect,
    GroupTitle: BasicCaption,
    IconPicker: JnpfIconPicker,
    Iframe: JnpfIframe,
    Link: JnpfLink,
    Location: JnpfLocation,
    I18nInput: JnpfI18nInput,
    Markdown: JnpfMarkdown,
    MarkdownViewer: JnpfMarkdownViewer,
    NumberRange: JnpfNumberRange,
    OpenData: JnpfOpenData,
    OrganizeSelect: JnpfOrganizeSelect,
    PopupAttr: JnpfPopupAttr,
    PopupSelect: JnpfPopupSelect,
    PopupTableSelect: JnpfPopupTableSelect,
    PosSelect: JnpfPosSelect,
    Qrcode: JnpfQrcode,
    RelationForm: JnpfRelationForm,
    RelationFormAttr: JnpfRelationFormAttr,
    RoleSelect: JnpfRoleSelect,
    Sign: JnpfSign,
    Signature: JnpfSignature,
    Slider: JnpfSlider,
    Text: JnpfText,
    TimeRange: JnpfTimeRange,
    UserSelect: JnpfUserSelect,
    UsersSelect: JnpfUsersSelect,
    Empty: JnpfEmpty,
    ACheckbox,
    ARadio,
    RelationFormDetail,
  };
 
  const api: any = {
    chunkMerge,
    getDownloadUrl,
    getPackDownloadUrl,
    previewFile,
    getAreaByIds,
    getAreaSelector,
    getDataInterfaceDataInfoByIds,
    getDataInterfaceDataSelect,
    getSignatureListByIds,
    createSign,
    getSignList,
    getMapAroundList,
    getMapTextList,
    getSelectedList,
    getSelectedUserList,
    getUserList,
    getUserInfoList,
    getOrganizeSelector,
    getOrgByOrganizeCondition,
    getOrgSelectedList,
    getGroupByCondition,
    getPositionSelectorTree,
    getPositionSelector,
    getPositionByCondition,
    getPositionSelectedList,
    getRoleByCondition,
    getFieldDataSelect,
    getDataChange,
    getConfigData,
    getBaseLangList,
    createBaseLang,
    createCollectMenu,
  };
 
  const store: any = {
    useAuthStore,
    useGeneratorStore,
    useOrganizeStore,
    useBaseStore,
  };
 
  // 将组件注册到全局共享状态中
  globalShareState.setComponents(components);
 
  // 将api注册到全局共享状态中
  globalShareState.setApi(api);
 
  // 将store注册到全局共享状态中
  globalShareState.setStores(store);
 
  // 定义全局共享状态中的消息提示
  globalShareState.defineMessage({
    // 复制成功消息提示
    copyPreferencesSuccess: (title, content) => {
      notification.success({
        description: content,
        message: title,
        placement: 'bottomRight',
      });
    },
    createMessage,
  });
 
  // 初始化表单组件
  initSetupVbenForm();
  // 初始化VxeTable
  initSetupVxeTable();
}
 
export { initComponentAdapter };