组件说明

Splitpanes分割面板

$3

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|horizontal|布局方向|bool|false|
|styles|样式|ISplitPaneStyle|{ width: '100%', height: '100%' }|

$3

``ts
interface ISplitPaneStyle {
[name: string]: string | number,
width: string,
height: string
}
`

Pane子面板

$3

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|styles|样式|IPaneStyle||

$3

`ts
interface IPaneStyle {
[name: string]: string | number
}
`

Layout布局

$3

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|asideWidth|侧边栏的宽度|number|220|
|headerMaxHeight|头部的最大高度|number|60|
|horizontal|布局方向|boolean|false|

$3

|属性名|说明|
|-----|----|
|aside|侧边栏|
|header|头部|

UpLoadFile单文件上传

$3

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|size|组件大小|'small' \| 'default' \| 'large'|default|
|name|上传按钮名称|string|上传文件|
|icon|自@element-plus/icons-vue导入的图标|Component|Upload|
|type|选择文件和上传文件的按钮类型|ButtonType|success|
|accept|选择文件的类型|string|*|

$3

|方法名|说明|类型|默认值|
|-----|----|-----|----|
|upload|上传文件方法，返回选中的File|Function|(file: File): void|

$3

|变量名|说明|类型|默认值|
|-----|----|-----|----|
|Clear|清空选中文件|Function||

UpLoadFiles多文件上传

$3

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|size|组件大小|'small' \| 'default' \| 'large'|default|
|accept|选择文件的类型|string|*|

$3

|方法名|说明|类型|默认值|
|-----|----|-----|----|
|upload|上传文件方法，返回选中的File|Function|(files: File[]): void|

TableForm表单表格

$3

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|maxHeight|表格的最大高度|string|550|
|size|表格的大小|'large' \| 'default' \| 'small'|default|
|tableData|表格的数据|Array|-|
|tableColumn|表格的列配置|Array|-|
|stripe|是否为斑马纹|boolean|true|
|border|是否带有纵向边框|boolean|false|
|highLight|是否高亮当前行|boolean|false|
|headStyle|表头样式|object|{}|
|type|是否有索引、展开、多选框|'selection' \| 'index' \| 'expand'|-|
|typeLabel|索引、展开时的列名，type == 'index'和type == 'expand'时有效|string|序号|
|typeWidth|索引、展开、多选框的宽度|number|60|
|typeIsFixed|索引、展开、多选框是否固定在左侧|typeIsFixed|false|
|operate|是否有操作列|boolean|false|
|operateLabel|操作列列名|string|''|
|operateWidth|操作列的宽度|number|''|
|operateIsFixed|操作列是否固定在右侧|boolean|false|
|search|是否显示搜索按钮|boolean|false|
|clear|是否显示清空按钮|boolean|false|
|edit|是否显示行内修改按钮|boolean|false|
|delete|是否显示行内删除按钮|boolean|false|
|operateSize|搜索清楚按钮大小|'large' \| 'default' \| 'small'|default|
|rowButtonSize|删除修改按钮大小|'large' \| 'default' \| 'small'|default|
|deleteTitle|删除按钮的提示信息|string|是否要删除当前行？|
|pagination|是否有分页|boolean|false|
|small|分页是否使用小型分页|boolean|false|
|total|数据数量|number|0|
|hideOnSinglePage|只有一页时是否隐藏|boolean|false|
|defaultSelect|默认选中|(val: ITableData) => boolean|-|
|defaultSize|分页默认数量|number|5|
|filter|是否允许筛选列|boolean|false|

$3

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|prop|列绑定的字段，必填|string|-|
|label|列的名称，必填|string|-|
|width|列宽|number|''|
|minWidth|最小列宽|number|''|
|fixed|是否固定|'left' \| 'right'|false|
|hidden|是否隐藏列|boolean|false|
|align|对齐方式|'left' \| 'center' \| 'right'|left|
|search|是否支持搜索|boolean|false|
|disabled|是否禁用搜索框，search=true时有效|boolean|false|
|size|搜索框大小，search=true时有效|'large' \| 'default' \| 'small'|default|
|searchWidth|搜索框的宽度，search=true时有效|number|92%|
|placeholder|自定义搜索提示，多项用&&分割，search=true时有效|string|请输入{label}或请选择{label}|
|type|搜索框类型，text=文本框、select=单选/多选框、number=数字框、date=日期框、time=时间框、datetime=日期时间框、daterange=日期范围选择框、timerange=时间范围选择框，datetimerange=日期时间范围选择框、switch=开关按钮，search=true时有效|'text' \| 'select' \| 'number' \| 'date' \| 'datetime' \| 'time' \| 'daterange' \| 'timerange' \| 'datetimerange' \| 'switch'|text|
|options|搜索框的下拉列表，search=true&&type='select'时有效|IOptions|-|
|multiple|是否支持多选，search=true&&type='select'时有效|boolean|false|
|omit|多选时省略，search=true&&type='select'时有效|boolean|false|
|closeText|开关关闭文字，search=true&&type='switch'时有效|string|-|
|openText|开关打开文字，search=true&&type='switch'时有效|string|-|
|max|数字框的最大值，search=true&&type='number'时有效|number|Infinity|
|min|数字框的最小值，search=true&&type='number'时有效|number|-Infinity|
|step|数字框的跳动步数，search=true&&type='number'时有效|number|1|
|costom|自定义内容，支持html|Function|ITableData|
|component|自定义组件|Component|-|
|filter|列是否允许筛选|boolean|false|
|check|表格列是否默认选中|boolean|false|

$3

|方法名|说明|参数|
|-----|----|-----|
|row-click|行点击事件|(e: 'row-click', item: ITableData): void;|
|row-dblclick|行双击事件|(e: 'row-dblclick', item: ITableData): void;|
|selection-change|选中行改变事件|(e: 'selection-change', item: ITableData[]): void;|
|search|搜索按钮点击、输入框回车事件|(e: 'search', item: ITableData): void;|
|clear|清空按钮点击事件|(e: 'clear', pageIndex: number, pageSize: number): void;|
|delete|删除按钮点击事件|(e: 'delete', item: ITableData): void;|
|edit|修改按钮点击事件|(e: 'edit', item: ITableData): void;|
|page-change|页码、每页数量变化事件|(e: "page-change", pageIndex: number, pageSize: number): void;|
|filter|筛选按钮点击事件|(e: 'filter', callback: Function): void;|

$3

|方法名|说明|参数|
|-----|----|-----|
|Assignment|初始操作赋值|(items: Array): void;|
|GetParameters|获取搜索参数|(): ITableData;|
|SetFilter|初始化筛选状态|(items: any): void;|

`ts
[
{
prop: "", //列参数
label: "" //列值
}
]
`

$3

|插槽名|说明|
|-----|----|
|header|表格上方的内容|
|expand|展开的内容，row参数携带行数据|
|operate-front|操作列头的自定义内容，位置在搜索、清空之前|
|operate-middle|操作列头的自定义内容，位置在搜索之后、清空之前|
|operate|操作列头的自定义内容，位置在搜索、清空之后|
|row-operate-front|操作列的自定义内容，位置在修改、删除之前,row参数携带行数据|
|row-operate-middle|操作列的自定义内容，位置在修改之后、删除之前，row参数携带行数据|
|row-operate|操作列的自定义内容，位置在修改、删除之后，row参数携带行数据|

$3

`ts
export interface ITableColumn {
/**
* 列绑定的字段
*/
prop: string,
/**
* 列的名称
*/
label: string,
/**
* 列宽
*/
width?: number,
/**
* 是否固定
*/
fixed?: 'left' | 'right',
/**
* 对齐方式
*/
align?: 'left' | 'center' | 'right',
/**
* 是否支持搜索
*/
search?: boolean,
/**
* 禁用搜索框
*/
disabled?: boolean,
/**
* 搜索框大小
*/
size?: 'large' | 'default' | 'small',
/**
* 搜索框的宽度
*/
searchWidth?: number,
/**
* 自定义搜索提示，多项用&&分割
*/
placeholder?: string,
/**
* 搜索框类型
*/
type?: 'text' | 'select' | 'number' | 'date' | 'datetime' | 'time' | 'daterange' | 'timerange' | 'datetimerange' | 'switch',
/**
* 搜索框的下拉列表，type='select'有效
*/
options?: IOptions[],
/**
* 是否支持多选
*/
multiple?: boolean,
/**
* 多选时省略
*/
omit?: boolean,
/**
* 开关关闭文字
*/
closeText?: string,
/**
* 开关打开文字
*/
openText?: string,
/**
* 数字框的最大值
*/
max?: number,
/**
* 数字框的最小值
*/
min?: number,
/**
* 数字框步长
*/
step?: number,
/**
* 自定义
*/
costom?: (val: ITableData) => string,
/**
* 表格内容溢出
*/
overflow?: boolean,
/**
* 是否隐藏列
*/
hidden?: boolean,
/**
* 组件
*/
component?: Component,
/**
* 允许筛选
*/
filter?: boolean,
/**
* 是否默认选中
*/
check?: boolean
}
/**
* 表单格式
*/
export interface ITableData {
[name: string]: unknown
}
/**
* 下拉框选项
*/
export interface IOptions {
/**
* 显示文本
*/
label?: string,
/**
* 选择的值
*/
value: string | number,
/**
* 是否禁用
*/
disabled?: boolean
}

`

带表单弹出框

$3

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|form|表单值|FormType|{}|
|title|弹框标题|string|弹出框|
|width|弹框大小|string|500px|
|fullscreen|全屏模式|boolean|false|
|draggable|可拖动|boolean|true|
|footer|底部按钮|boolean|true|
|buttonSize|底部按钮大小|'large' \| 'default' \| 'small'|'default'|
|loading|按钮的提交状态|boolean|false|
|rules|表单验证|any|{}|
|formSize|表单大小|'large' \| 'default' \| 'small'|'default'|
|lableWidth|标签长度|string|120px|

#### FormType定义

`ts

export interface FormType {
[key: string]: FormItemType;
}

`

#### 表单FormItemType配置

|属性名|说明|类型|默认值|
|-----|----|-----|----|
|label|标签名|string||
|default|表单项的值|string\| number\| null\| boolean\| Date\| Object\| Array>||
|type|表单项类型text=文本框、select=单选/多选框、number=数字框、date=日期框、time=时间框、datetime=日期时间框、daterange=日期范围选择框、timerange=时间范围选择框，datetimerange=日期时间范围选择框、switch=开关按钮|'text'\| 'select'\| 'number'\| 'date'\| 'datetime'\| 'time'\| 'daterange'\| 'timerange'\| 'datetimerange'\| 'switch'|text|
|size|输入框大小|'large' \| 'default' \| 'small'|'default'|
|width|标签宽度|string|90%|
|disabled|是否禁用|boolean|false|
|readonly|只读 select和switch无效|boolean|false|
|placeholder|输入框提示 日期范围使用&&分割|string|请输入${label} \| 请选择${label} |
|max|最大数值 type=number生效|number|Infinity|
|min|最小数值 type=number生效|number|-Infinity|
|step|步序 type=number生效|number|1|
|multiple|是否支持多选 type=select生效|boolean|false|
|omit|多选时省略 type=select生效|boolean|false|
|options|搜索框的下拉列表，type='select'有效, 参考表格配置|IOptions[]|[]|
|closeText|开关关闭文字 type=switch生效|string|null|
|openText|开关打开文字 type=switch生效|string|null|

$3

|方法名|说明|参数|
|-----|----|-----|
|close|弹窗关闭回调|(e: 'close'): void|
|submit|提交按钮回调|(e: 'submit'): void|

$3

`ts
/**
*
* @param rule 自定义为空检验
* @param value
* @param callback
* @returns
*/
export function FormValidate(rule: any, value: FormItemType, callback: any) {
if (value.default == null || value.default.toString() == "") {
return callback(new Error(value.label + "不能为空"));
}
return callback();
}

``