385 lines
9.6 KiB
TypeScript
385 lines
9.6 KiB
TypeScript
export interface Dialog {
|
|
/** 对话框是否可见 */
|
|
visible: boolean;
|
|
/** 是否显示关闭按钮 */
|
|
close: boolean;
|
|
/** 对话框标题 */
|
|
title: string;
|
|
/** 对话框宽度 */
|
|
width: string;
|
|
/**自定义弹窗数据 */
|
|
custom: {
|
|
/** 自定义对话框高度 */
|
|
height: string;
|
|
/** 自定义对话框数据 */
|
|
data: any[];
|
|
/** 自定义组件路径 */
|
|
src?: string;
|
|
/** 自定义配置项 */
|
|
custom: Record<string, any>;
|
|
/** 自定义对话框是否可见 */
|
|
visible: boolean;
|
|
/** 异步加载组件 */
|
|
component: any;
|
|
};
|
|
edit: {
|
|
/** 编辑项ID */
|
|
id: number;
|
|
/** 编辑对话框标题 */
|
|
title: string;
|
|
/** 编辑对话框是否可见 */
|
|
visible: boolean;
|
|
row?: any;
|
|
tagData?: any;
|
|
};
|
|
}
|
|
|
|
/** 按钮自定义配置 */
|
|
export interface ButtonCustomConfig {
|
|
/** 弹出框标题 */
|
|
title: string;
|
|
/** 组件路径 */
|
|
src: string;
|
|
/** 弹框宽度 */
|
|
width: string;
|
|
/** 弹框高度 */
|
|
height: string;
|
|
}
|
|
|
|
/** 操作按钮配置 */
|
|
export interface OperationButton {
|
|
/** 是否为头部按钮 */
|
|
topBtn: boolean;
|
|
/** 按钮权限码 */
|
|
perms?: string;
|
|
/** 是否显示 */
|
|
show?: boolean;
|
|
/** 按钮文本 */
|
|
label: string;
|
|
/** 按钮点击事件
|
|
* @tips btnType 为空时触发
|
|
* @param obj 当前按钮配置对象
|
|
* @param row 当前行数据
|
|
* @param handleReloadPaged 父表单刷新函数
|
|
*/
|
|
click?: (obj, row, handleReloadPaged: (reload?: boolean) => void) => void;
|
|
/** 按钮类型 */
|
|
btnType?: "add" | "edit" | "del" | "custom";
|
|
/** 按钮样式 */
|
|
btnStyle?: "success" | "info" | "primary" | "danger" | "warning";
|
|
/** 自定义按钮配置 */
|
|
custom?: ButtonCustomConfig;
|
|
}
|
|
|
|
/** 类型判断枚举 */
|
|
export enum ConditionalType {
|
|
Equal,
|
|
Like,
|
|
GreaterThan,
|
|
GreaterThanOrEqual,
|
|
LessThan,
|
|
LessThanOrEqual,
|
|
In,
|
|
NotIn,
|
|
LikeLeft,
|
|
LikeRight,
|
|
NoEqual,
|
|
IsNullOrEmpty,
|
|
IsNot,
|
|
NoLike,
|
|
EqualNull,
|
|
InLike,
|
|
Range
|
|
}
|
|
|
|
/** 字段设置项 */
|
|
export class FieldSetting {
|
|
|
|
constructor() {
|
|
this.datasource = [];
|
|
this.mapValue= "value",
|
|
this.maplabel= "text"
|
|
|
|
}
|
|
/**map 时Value的取值的属性 */
|
|
mapValue?: string;
|
|
/**map 时label的取值的属性 */
|
|
maplabel?: string;
|
|
/**
|
|
* 图片地址 获取方式
|
|
* @param value 当前值
|
|
* @param row 当前行值
|
|
* @returns 预期返回有效图片地址url
|
|
*/
|
|
imgUrl?: (value: any, row: any) => string;
|
|
/** 数据源 */
|
|
datasource?: ComboModel[];
|
|
}
|
|
///** 表格列配置 */
|
|
//export interface TableEditColumn {}
|
|
export interface ComboModel {
|
|
value: any;
|
|
text: string;
|
|
}
|
|
/** 新增修改的配置 */
|
|
export class TableColumnEdit {
|
|
/**
|
|
*
|
|
* @param add 字段可以添加
|
|
* @param edit 字段可以修改
|
|
* @param multiple [type=dropdown]是否多选
|
|
* @param editShow 编辑时显示列
|
|
* @param editRows [type=textarea]编辑时的行数
|
|
* @param rules 校验规则
|
|
*/
|
|
constructor(
|
|
add: boolean = false,
|
|
edit: boolean = false,
|
|
multiple: boolean = false,
|
|
editShow: boolean = true,
|
|
editRows: number = 3,
|
|
editDefault: any = "",
|
|
rules: any | Array<any> = null,
|
|
change: () => void = null
|
|
) {
|
|
this.add = add;
|
|
this.edit = edit;
|
|
this.multiple = multiple;
|
|
this.editShow = editShow;
|
|
this.editRows = editRows;
|
|
this.editDefault = editDefault;
|
|
this.rules = rules;
|
|
this.change = change;
|
|
}
|
|
/** 是否允许添加 [false]*/
|
|
add?: boolean;
|
|
/** 是否允许修改 [false]*/
|
|
edit?: boolean;
|
|
/** [type=dropdown]是否多选 */
|
|
multiple?: boolean;
|
|
/** 编辑时显示列 */
|
|
editShow?: boolean;
|
|
/**校验规则 */
|
|
rules?: any | Array<any>;
|
|
/** [type=textarea]编辑时的行数 */
|
|
editRows?: number;
|
|
|
|
/** 新增编辑时的缓存值 */
|
|
valueE?: Array<string> | string | number | boolean | Date;
|
|
/** 新增编辑时的默认 */
|
|
editDefault?: Array<string> | string | number | boolean | Date;
|
|
|
|
/**编辑时值发生变化 */
|
|
change?: () => void;
|
|
}
|
|
/** 查询的配置 */
|
|
export class TableColumnSearch {
|
|
/**
|
|
*
|
|
* @param yes 列是否可以查询
|
|
* @param sort 列是否可以排序
|
|
* @param searchType 查询时候的值比较类型
|
|
*/
|
|
constructor(yes: boolean = false,
|
|
searchType: ConditionalType = ConditionalType.Like,sort: boolean = false){
|
|
this.yes = yes;
|
|
this.sort = sort;
|
|
this.searchType = searchType;
|
|
}
|
|
/**可以查询 [false] */
|
|
yes?: boolean;
|
|
/** 可以排序 [false]*/
|
|
sort?: boolean;
|
|
/** 搜索类型 */
|
|
searchType?: ConditionalType;
|
|
/** 查询缓存值 */
|
|
value?: Array<string> | string | number | boolean | Date;
|
|
}
|
|
|
|
/** 表格列配置 */
|
|
export class TableColumn {
|
|
constructor(
|
|
) {
|
|
|
|
this.type = "string";
|
|
this.show = true;
|
|
this.search = new TableColumnSearch();
|
|
this.edit = new TableColumnEdit();
|
|
this.setting = {};
|
|
}
|
|
|
|
/** 显示标签 */
|
|
label: string;
|
|
/** 查询配置 */
|
|
search?: TableColumnSearch;
|
|
/** 编辑配置 */
|
|
edit?: TableColumnEdit;
|
|
/** Table中展示宽度 [auto]*/
|
|
width?: string;
|
|
/** 字段类型 */
|
|
type?: "string" | "dropdown" | "switch" | "img" | "datetime" | "textarea";
|
|
/** 显示列 [不会动态计算]*/
|
|
show?: boolean;
|
|
/** 字段设置 */
|
|
setting?: FieldSetting;
|
|
/**列值初始化时 如何获取默认取对应列*/
|
|
custom?: (row: any) => string;
|
|
}
|
|
|
|
|
|
|
|
/** 表格列配置 */
|
|
// export interface TableColumn {
|
|
// /** 显示标签 */
|
|
// label: string;
|
|
|
|
// /** 是否可搜索 */
|
|
// search: boolean;
|
|
// /** 搜索类型 */
|
|
// searchType?: ConditionalType;
|
|
// /** 是否允许添加 [false]*/
|
|
// add?: boolean;
|
|
// /** 是否允许修改 [false]*/
|
|
// edit?: boolean;
|
|
// /** Table中展示宽度 [auto]*/
|
|
// width?: string;
|
|
// /** 字段类型 */
|
|
// type?: "string" | "dropdown" | "switch" | "img" | "datetime" | "textarea";
|
|
// /** 是否多选 */
|
|
// multiple?: boolean;
|
|
// /** 编辑时显示列 */
|
|
// editShow?: boolean;
|
|
// /**校验规则 */
|
|
// rules?: any | Array<any>;
|
|
// /** 显示列 */
|
|
// show?: boolean;
|
|
// /** 字段设置 */
|
|
// setting?: FieldSetting;
|
|
// /** 修改时的编辑值 */
|
|
// valueE?: Array<string> | string | number | boolean | Date;
|
|
// /** 查询值 */
|
|
// value?: Array<string> | string | number | boolean | Date;
|
|
// /** textarea编辑时的行数 */
|
|
// editRows?: number;
|
|
// /**编辑时值发生变化 */
|
|
// change?: () => void;
|
|
// /**列值初始化时 如何获取默认取对应列*/
|
|
// custom?: (row: any) => string;
|
|
// }
|
|
|
|
/** 分页数据 */
|
|
export interface PageData {
|
|
/** 总条数 */
|
|
total: number;
|
|
}
|
|
|
|
/** 分页数据 */
|
|
export interface ConditionalModel {
|
|
/** 字段名称 */
|
|
FieldName: string;
|
|
/** 字段查询值 */
|
|
FieldValue: string;
|
|
/** 查询方式 */
|
|
ConditionalType?: ConditionalType;
|
|
/** C#类型名称 */
|
|
CSharpTypeName?: string;
|
|
}
|
|
|
|
/** 搜索条件 */
|
|
export interface SearchConditions {
|
|
/** 是否显示搜索 */
|
|
show: boolean;
|
|
/** 当前页码 */
|
|
PageIndex: number;
|
|
/** 每页大小 */
|
|
PageSize: number;
|
|
/** 排序字段 */
|
|
OrderBy: string;
|
|
/**排序顺序
|
|
* @tips 0:升序 1:降序
|
|
* @默认 = 1
|
|
*/
|
|
OrderByType?: 0 | 1;
|
|
/** 默认查询条件 */
|
|
defaultConditions: ConditionalModel[];
|
|
/** 查询条件 */
|
|
Conditions: any[];
|
|
}
|
|
|
|
/** 表格配置 */
|
|
export interface TableConfig {
|
|
/** 搜索回调函数 */
|
|
searchCallback?: (s: SearchConditions) => void;
|
|
/** 新增/修改回调函数 */
|
|
editCallback?: (from: any) => void;
|
|
/** API地址 */
|
|
apiUrl: string;
|
|
/** 是否显示选择列 */
|
|
selectColumn: boolean;
|
|
/** 搜索配置 */
|
|
search: SearchConditions;
|
|
/** 是否显示操作列 */
|
|
operationColumn: boolean;
|
|
/** 操作按钮配置 */
|
|
operationColumnData: OperationButton[];
|
|
/** 列配置 */
|
|
column: Record<string, TableColumn>;
|
|
/** 表格数据 */
|
|
data: any[];
|
|
/**显示头部操作按钮 */
|
|
operationTop?: boolean;
|
|
/** 分页数据 */
|
|
pageData: PageData;
|
|
/** 选中行 */
|
|
selectRows: any[];
|
|
/** 是否显示边框 */
|
|
border: boolean;
|
|
/**是否显示 */
|
|
show?: boolean;
|
|
}
|
|
/** 初始化表格数据 */
|
|
export function intTableData(tValue: TableConfig): TableConfig {
|
|
if (!tValue.data) tValue.data = [];
|
|
if (!tValue.selectRows) tValue.selectRows = [];
|
|
if (tValue.border == null) tValue.border = true;
|
|
if (!tValue.pageData) tValue.pageData = { total: 0 };
|
|
if (tValue.operationTop === undefined) tValue.operationTop = true;
|
|
|
|
// 处理 column 的属性
|
|
for (const key in tValue.column) {
|
|
tValue.column[key] = { ...new TableColumn(), ...tValue.column[key] };
|
|
const element = tValue.column[key];
|
|
|
|
element.edit = { ...new TableColumnEdit(), ...element.edit };
|
|
element.search = { ...new TableColumnSearch(), ...element.search };
|
|
element.setting = { ...new FieldSetting(), ...element.setting };
|
|
|
|
if (
|
|
element.custom == undefined &&
|
|
(element.type === "switch" ||
|
|
element.type === "dropdown" ||
|
|
element.type === "string" ||
|
|
element.type === undefined)
|
|
) {
|
|
if (element.type === "string" || element.type === undefined)
|
|
element.custom = row => row[key];
|
|
else {
|
|
element.custom = row => {
|
|
let sc = element.setting.datasource.find(
|
|
s => s[element.setting.mapValue] + "" == row[key] + ""
|
|
);
|
|
return !sc ? row[key] : sc[element.setting.maplabel];
|
|
};
|
|
}
|
|
} else if (element.custom == undefined) {
|
|
element.custom = row => row[key];
|
|
}
|
|
}
|
|
|
|
// 处理 operationColumnData 的属性
|
|
for (const key in tValue.operationColumnData) {
|
|
const element = tValue.operationColumnData[key];
|
|
if (element.show === undefined) element.show = true;
|
|
}
|
|
return tValue;
|
|
} |