ubasic-ui 组件库

基于 Vue3.0，使用 Element Plus 框架,对 table ，form 功能按钮 进行二次封装操作，对查询区域和列表展示合二为一，也可单独使用

使用说明

1、使用该框架插件，要先安装依赖文件

pnpm install element-plus   @element-plus/icons-vue

安装教程

1. 第一步 选择一个你喜欢的包管理器

# NPM
$ npm install @axewo/ubasic-ui --save

# Yarn
$ yarn add @axewo/ubasic-ui

# pnpm
$ pnpm install @axewo/ubasic-ui

在全局中注册UBasicUI 组件

需要在main.ts 文件中引入文件

import { createApp } from 'vue';
import App from './App.vue'
import '@axewo/ubasic-ui/dist/style.css';
import UBasicUI from '@axewo/ubasic-ui';

const app = createApp(App);
app.use(UBasicUI);
//...

在局部中注册UBasicUI 组件

需要在main.ts 文件中引入样式文件

<script setup lang="ts">
import { UBasePage } from '@axewo/ubasic-ui';

</script>

工具类函数使用

1、包含一个tools类，一个colors 颜色转换类

<script setup lang="ts">
import { tools，colors } from '@axewo/ubasic-ui';
//使用 转换字符串，每个单词首字母大写，
  const word=  tools.camelCase(xxx)
</script>

tools函数介绍

| 函数名 | 参数类型 | 返回值 |备注 | -------- | -------- | -------- | -------- | | messageBoxConfirm | (content: string, title="提示,options={}) | Promise | 二次确认提示| | messageBoxAlert | (content: string, title="提示,options={}) | null | 提框示| | messageBoxPrompt | (content: string, title="提示,options={}) | Promise | 提框示输入确认| | formatUrlParams | (url: string, row: any) | string | 对路径进行解析， /system/dict/type/$[dictId]/$[dictName] 根据row传的参数替换成/system/dict/type/1/性别|

colors函数介绍 -待完善

| 函数名 | 参数类型 | 返回值 |备注 | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |

组件属性配置说明

type TBtnType = "primary" | "danger" | "warning" | "success" | "default"; //按钮类型
type TColumnType =
  | "Input"
  | "DatePicker"
  | "RangePicker"
  | "RadioGroup"
  | "CheckboxGroup"
  | "ApiSelect"
  | "Select"
  | "Rate"
  | "Switch"
  | "InputNumber"; //组件类型
type TMethodType = "get" | "post" | "put" | "delete"; //请求方式

declare global {
  type TRequestConfig = {
    apiFunc: string|((...args) => Promise<any>) ; //列表接口地址
    mapping?: TMapping; //字典映射
    method?: TMethodType; //请求方式
    params?: Recordable; //请求参数
  };
  type Recordable<T = any> = Record<string, T>;
  type LocaleType = "zh_CN" | "en" | "ru" | "ja" | "ko";
  interface Window {
    VConsole: unknown;
  }

  type TResponesData<T = Recordable> = {
    records?: T[];
    total?: number;
    size?: number;
    current?: number;
    pages?: number;
  };
  //请求返回的数据类型
  interface Result<T = Recordable> {
    msg: string;
    code: number;
    data?: T;
  }
  //=====================自定义别表，表单begin=======================================================
  //列表操作按钮属性
  type TOperateBtn = {
    label?: string; //按钮名称
    uniqueKey: string; //按钮key
    type?: TBtnType; //按钮类型
    link?: boolean; //是否是链接
    permissions?: string[]; //权限标识
    icon?: VNode | string; //图标
    request?: TRequestConfig | ((data: TFormConfig) => Recordable); //请求配置
    isCustom?: boolean; //是否自定义方法体
    express?: ((args) => boolean | undefined) | undefined; //表达式
    disabledFormItem?: string[]; //禁用项
  };
  type TMapping = {
    //映射字段
    label?: string;
    value: string;
    format?: string[];
    requestField?: string;
  };
  type TComponentProp = {
    format?: string;
    valueFormat?: string;
    request?: TRequestConfig | ((data: TFormConfig) => Recordable);
    multiple?: boolean;
    disabled?: boolean;
    min?: number;
    max?: number;
    onChange?: (...args) => void;
    onInput?: (...args) => void;
  };
  type TFormConfig = {
    schema?: TTableColumn[]; //列表字段
    formModel?: Recordable; //表单model
    formAction?: object; //表单action
    rowsData?: Recordable | Recordable[]; //列表数据
    reload?: () => void; //刷新
  };
  //列表行属性
  type TTableColumn = {
    width?: number | undefined; //列表宽度
    alias?: string; //别名，用户搜索展示
    prop: string; //列表字段
    label: string; //列表名称
    type?: TColumnType; //字段类型
    search?: boolean; //搜索展示要查询的字段
    hide?: boolean; //列表中需要展示或者隐藏  默认false 展示 ｜true 隐藏
    display?: boolean; //弹框中是否要展示改字段 默认false 不展示 ｜true 展示
    attrs?: TComponentProp; //element 组件属性
    rules?: FormItemRule[]; //动态表单验证
    isValidSearchForm?: boolean; //是否对查询条件进行验证
    tooltip?: boolean; //是否需要提示
    slot?: boolean; //是否是插槽
    align?: string; //label对齐方式
    fixed?: boolean | string; //是否浮动
    minWidth?: string; //最小宽度
    children?: TTableColumn[]; //是否有子级
    render?: (...args) => VNode | string; //动态渲染
    dictType?: string; //字典类型
    option?: any[]; //下拉框静态数据
    isLink?: boolean; //是否是链接
    to?: string; //跳转地址
    isDictType?: boolean; //是否属于要字典
    defaultValue?: any;
  };
  //表格参数属性
  type TUTableConfig = {
    rowKey: string; // 表格唯一id
    schema: TTableColumn[]; //列表列配置
    request: {
      //请求配置
      list?: TRequestConfig;
    };

    isIndex?: boolean; // 是否需要序号
    isIndexFixed?: boolean; //序号是否浮动
    isIndexOrder?: boolean; //序号是否需要计数，如果没有展示10行，那么在第二行序号从1开始
    isSelection?: boolean; // 是否需要多选
    isPagination?: boolean; // 是否需要翻页
    isBorder?: boolean; //是否要边框
    isHeader?: boolean; // 是否需要table头部操作区域，
    isSearch?: boolean; //是否需要搜索
    isShowFormAction?: boolean; //是否展示操作按钮组
    propMapToTime?: [string, [string, string], string?][]; //分解多个字段展示
    isAuto?: boolean; //是否自动请求
    labelPosition?: "top" | "left" | "right"; //表单label位置
    labelWidth?: number | string; //列宽
    span?: number; //搜索表单展示的宽度
    inlineBtn?: TOperateBtn[]; //列表操作按钮
    operateBtn?: TOperateBtn[]; //功能按钮配置
    dialog?: {
      //弹框配置
      labelWidth?: number | string; //弹框表单列宽
      width?: number | string; //弹框宽度
      span?: number; //弹框表单栅格
      isFooter?: boolean; //是否展示底部
      title?: string; //弹框标题
      draggable?: boolean; //是否可拖拽
      modal?: boolean; //是否需要遮罩层
      closeOnClickModal?: boolean; //是否可点击遮罩层关闭
      showClose?: boolean; //是否展示关闭按钮
      closeOnPressEscape?: boolean; //是否可点击esc关闭
      zIndex?: number; //遮罩层z-index
    };
  };
  //分页参数
  type TPagination = {
    pageNum: number;
    pageSize: number;
    total?: number;
  };

如何使用？

1、新建ts文件或者js文件，可以是对象或者函数。根据实际情况返回，如果需要从外面传参数到配置，那么就用函数方式，如果只是纯展示，就使用对象方式

export const optionsFlowConfig = (dict: Recordable): TUTableConfig => ({
    rowKey: 'id', // 表格唯一id
    dialog: {
        width: 700,
        labelWidth: 120,
    },
    inlineBtn: [
        {
            label: '修改',
            uniqueKey: 'modify',
            type: 'primary',
            link: true,
            icon: 'Edit',
            disabledFormItem: ['processIndex'],
            permissions: ['closeAccount:flow:update'],
            request: {
                apiFunc: modifyFunc,
            },
        },
        {
            label: '删除',
            uniqueKey: 'remove',
            type: 'danger',
            link: true,
            icon: 'Delete',
            
            request: {
                apiFunc: removeFunc,
                mapping: {
                    value: 'id',
                },
            },
        },
    ],
    operateBtn: [
        {
            label: '创建流程',
            uniqueKey: 'create',
            type: 'primary',
            icon: 'Plus',
            permissions: ['closeAccount:flow:create'],
            request: {
                apiFunc: createdFunc,
            },
        },
        {
            label: '修改',
            uniqueKey: 'modify',
            type: 'primary',
            icon: 'Edit',
            disabledFormItem: ['processIndex'],
            request: {
                apiFunc: modifyFunc,
            },
            express: (row: Recordable[]) => {
                return row && row.length === 1;
            },
        },
        {
            label: '删除',
            uniqueKey: 'remove',
            type: 'danger',
            icon: 'Delete',
            request: {
                apiFunc: removeFunc,
                mapping: {
                    value: 'id',
                },
            },
            express: (row: Recordable[]) => {
                return row && row.length > 0;
            },
        },
    ],
    request: {
        // 请求参数
        list: {
            apiFunc: listPageFunc,
        },
    },
    propMapToTime: [['processName1', ['startTime', 'endTime'], 'YYYY-MM']],
    schema: [
        {
            label: '关账流程标识',
            prop: 'processIndex',
            isLink: true,
            to: '/closeAccount/configure-task/index/$[id]',
            rules: [{ required: true, message: '关账流程标识', trigger: ['blur', 'change'] }],
        },
        {
            label: '关账流程名称',
            prop: 'processName',
            rules: [{ required: true, message: '关账流程名称', trigger: ['blur', 'change'] }],
        },
        {
            label: '流程业务类型',
            prop: 'busiType',
            search: true,
            type: 'Select',
            option: dict['busi_type'],
            isDictType: true,
            rules: [{ required: true, message: '流程业务类型', trigger: ['blur', 'change'] }],
        },
        {
            label: '流程所属机构',
            prop: 'comCode',
            search: true,
            type: 'Select',
            option: dict['com_code'],
            isDictType: true,
            rules: [{ required: true, message: '流程所属机构', trigger: ['blur', 'change'] }],
        },
        {
            label: '关账频度',
            prop: 'frequency',
            type: 'Select',
            option: dict['frequency'],
            isDictType: true,
            rules: [{ required: true, message: '关账频度', trigger: ['blur', 'change'] }],
        },
        {
            prop: '_operate_',
            width: 150,
            label: '操作',
        },
    ],
});

2、在vue中使用

<template>
    <UBasePage  :options="optionsFlow" @handleButtonEvent="handleBtnEvents"/>
</template>

<script setup lang="ts">
// import { inject } from 'vue';
import { optionsFlowConfig } from './config';

/**
 * 根据实际情况，传入
const { useDict } = inject('globalProperties') as Recordable;
const dict = useDict('busi_type', 'frequency', 'com_code');
 */
const optionsFlow = optionsFlowConfig({});
//自定义按钮事件
const handleBtnEvents = (btnConfig: TOperateBtn, row: Recordable = {}) => {
    console.log(btnConfig,row);
};
</script>

效果展示