好用的内置组件

一、背景与问题

在开发的过程中经常会复用一些组件，这些组件没有业务属性，但是很常用。

二、Loading组件

内置SmartLoading组件，代码位于src/framework/smart-loading

• 此Loading基于 pinia状态管理，全局唯一
• 使用时候直接import 引入
• 开启： SmartLoadin.show()
• 关闭： SmartLoadin.hide()

举例：

  import { SmartLoading } from '/@/components/framework/smart-loading';

  async function getUserTableColumns(tableId, columns) {
    // 开始loading
    SmartLoading.show();
    let userTableColumnArray = [];
    try {
      let res = await tableColumnApi.getColumns(tableId);
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      // 隐藏loading
      SmartLoading.hide();
    }
  }

三、枚举组件

枚举组件支持:

• 下拉框 smart-enum-select
• 单选框 smart-enum-radio
• 复选框 smart-enum-checkbox

具体代码，请见src/components/framework;

使用举例：

<template 中>
<SmartEnumSelect enum-name="GOODS_STATUS_ENUM" v-model:value="queryForm.goodsStatus" width="160px" />
....
<script 中>
import { GOODS_STATUS_ENUM } from '/@/constants/business/erp/goods-const';
import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
...

四、字典组件

dict-select 字典下拉框。 代码在 src/components/support/dict-select;

五、文件组件

• 文件预览 file-priview
• 文件预览弹窗 file-priview-modal
• 文件上传 file-upload