454 lines
12 KiB
TypeScript
454 lines
12 KiB
TypeScript
import { Ref } from "vue";
|
|
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;
|
|
/** 编辑表单初始化回调函数 */
|
|
editInitCallback?: (from: Ref<Record<string, TableColumn>>) => 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 };
|
|
}
|
|
);
|
|
} |