Learn.Archives.Web/src/components/hTable/hTable.ts

451 lines
12 KiB
TypeScript

import { array } from "vue-types";
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.fixed = false;
this.setting = {};
}
/** 显示标签 */
label: string;
fixed?: 'left' | 'right'| boolean;
/** 查询配置 */
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 class SearchConditions {
/**
*
*/
constructor() {
this.show = true;
this.showPage = true;
this.PageIndex = 0;
this.PageSize = 20;
this.OrderBy = "Id";
this.OrderByType = 1;
this.defaultConditions = [];
this.Conditions = [];
}
/** 是否显示搜索 */
show?: boolean;
/** 显示分页器 */
showPage?: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;
/** 展开行的回调 */
expandChange?: (row: any, expandedRows: any[]) => void;
/** API地址 */
apiUrl: string;
/** 是否显示选择列 */
selectColumn: boolean;
/** 搜索配置 */
search: SearchConditions;
/** 是否显示操作列 */
operationColumn: boolean;
/** 操作列是否固定列 */
operationColumnFixed?: "left" | "right" | boolean;
/** 是否允许展开列 */
expandColumn?: 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.operationColumnFixed == null) tValue.operationColumnFixed = false;
if (tValue.expandColumn == null) tValue.expandColumn = false;
if (!tValue.pageData) tValue.pageData = { total: 0 };
if (tValue.operationTop === undefined) tValue.operationTop = true;
//分页查询配置
tValue.search= { ...new SearchConditions(), ...tValue.search };
// 处理 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) continue;
switch (element.type) {
case "switch":
case "dropdown": {
element.custom = row => {
const value = Array.isArray(row[key]) ? row[key] : [row[key]];
const res = value.map(item => {
const sc = element.setting.datasource.find(
s => s[element.setting.mapValue] + "" == item + ""
);
return !sc ? item : sc[element.setting.maplabel];
});
return res.join(",");
};
break;
}
case "string":
case undefined: {
element.custom = row => row[key];
break;
}
default: {
element.custom = row => row[key];
break;
}
}
}
// 处理 operationColumnData 的属性
for (const key in tValue.operationColumnData) {
const element = tValue.operationColumnData[key];
if (element.show === undefined) element.show = true;
}
return tValue;
}
/**
* 生成 毕业届下拉
*/
export function gradeComboModel(): ComboModel[] {
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1;
const isAfterAugust = currentMonth >= 9;
const baseYear = isAfterAugust ? currentYear : currentYear - 1;
const gradeOffsets = [
{ baseGradeName: "初", yearOffset: 0, grade: "初一" }, // 初一
{ baseGradeName: "初", yearOffset: 1, grade: "初二" }, // 初二
{ baseGradeName: "初", yearOffset: 2, grade: "初三" }, // 初三
{ baseGradeName: "高", yearOffset: 0, grade: "高一" }, // 高一
{ baseGradeName: "高", yearOffset: 1, grade: "高二" }, // 高二
{ baseGradeName: "高", yearOffset: 2, grade: "高三" }, // 高三
];
return gradeOffsets.map(
(item): ComboModel => {
const entranceYear = baseYear - item.yearOffset;
const graduationYear = entranceYear + 3;
let v = `${item.baseGradeName}${graduationYear}`;
return { text: v + ` [${item.grade}]`, value: v };
}
);
}