基于 Vue3.0,使用 Element Plus 框架,对 table ,form 功能按钮 进行二次封装操作,对查询区域和列表展示合二为一,也可单独使用
1、使用该框架插件,要先安装依赖文件
pnpm install element-plus @element-plus/icons-vue
- 第一步 选择一个你喜欢的包管理器
# NPM
$ npm install @axewo/ubasic-ui --save
# Yarn
$ yarn add @axewo/ubasic-ui
# pnpm
$ pnpm install @axewo/ubasic-ui
需要在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);
//...
需要在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>
函数名 | 参数类型 | 返回值 | 备注 |
---|---|---|---|
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/性别 |
函数名 | 参数类型 | 返回值 | 备注 |
---|---|---|---|
-------- | -------- | -------- | -------- |
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>