来源链接
个人类
公司封装后的Ag-grid常用方式
import type { GridApi } from '@ag-grid-community/core'
const [gridApi, setGridApi] = useState<GridApi>()
/**
* 导出表格
* onlySelected: 是否导出表格勾选项
* columnKeys: 具体表头
**/
gridTools.exportToExcel(gridApi, {
fileName: `公司机构管理.xlsx`,
onlySelected: true,
columnKeys: ['COMPANY_TYPE',],
})
1. react 回车换行 dom方式
class加 focusFlag
useEffect(() => {
// input挂载回车换行事件
const inputs = document.querySelectorAll<HTMLElement>('.focusFlag input, .focusFlag textarea')
let item: HTMLElement
for (let i = 0; i < inputs.length; i += 1) {
item = inputs[i]
const next = i + 1 < inputs.length ? i + 1 : 0
item.onkeydown = (event) => {
const eve = event || window.event
if (eve.keyCode === 13) {
inputs[next].focus()
}
}
}
}, [])
2. 公司转换表头方法
/**
* 将从后端获取到的表头字段转换为贴合xinherc XDataGrid 表格控件的表头的数据
* @param data
* @param isAutoFitWidth 是否主动自适应宽度
*/
export const refactorXinhercTableColumns = (data: any[] | never[], isAutoFitWidth?: boolean) => {
let columns: any[] = []
if (isAutoFitWidth) {
columns = data.map((d) => {
const newData = {
field: d?.dataIndex,
headerName: d?.title,
sortable: false,
suppressMovable: true, // 是否禁止拖动列
filter: false, // 过滤方式
resizable: false, // 是否允许调整列宽
suppressMenu: true, // 是否关闭表头筛选功能
}
return newData
})
} else {
columns = data.map((d) => {
const newData = {
field: d?.dataIndex,
headerName: d?.title,
sortable: false,
suppressMovable: true, // 是否禁止拖动列
filter: false, // 过滤方式
resizable: false, // 是否允许调整列宽
suppressMenu: true, // 是否关闭表头筛选功能
}
if (Number(d?.FIELD_WIDTH) > 0) {
newData.width = Number(d?.FIELD_WIDTH)
newData.minWidth = Number(d?.FIELD_WIDTH)
newData.maxWidth = Number(d?.FIELD_WIDTH)
} else {
newData.flex = 1
// newData['suppressSizeToFit'] = true
}
return newData
})
}
return columns || []
}
通用类
1. verifyIDCard 验证身份证格式
function isIdCard(idCard) => {
// 15位和18位身份证号码的正则表达式
const regIdCard =
/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
// 如果通过该验证，说明身份证格式正确，但准确性还需计算
if (regIdCard.test(idCard)) {
if (idCard.length == 18) {
// 将前17位加权因子保存在数组里
let idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2)
// 这是除以11后，可能产生的11位余数、验证码，也保存成数组
let idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2)
let idCardWiSum = 0
for (var i = 0; i < 17; i++) {
idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i]
}
var idCardMod = idCardWiSum % 11 // 计算出校验码所在数组的位置
var idCardLast = idCard.substring(17) // 得到最后一位身份证号码
// 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
if (idCardMod == 2) {
if (idCardLast == 'X' || idCardLast == 'x') {
return true
} else {
return false
}
} else {
// 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
if (idCardLast == idCardY[idCardMod]) {
return true
} else {
return false
}
}
} else {
return true
}
} else {
return false
}
}
2. fetchSexAndAgeByIDCard 根据身份证获取性别和年龄
function fetchSexAndAgeByIDCard(IDCard) => {
let sexAndAge = {
age: 0,
sex: '',
}
let userCard = IDCard
//如果用户身份证号码为undefined则返回空
if (!userCard) {
return sexAndAge
}
// 获取性别
if (parseInt(userCard.substr(16, 1)) % 2 == 1) {
sexAndAge.sex = '男'
} else {
sexAndAge.sex = '女'
}
// 获取出生日期
let yearBirth = userCard.substring(6, 10)
let monthBirth = userCard.substring(10, 12)
let dayBirth = userCard.substring(12, 14)
// 获取当前年月日并计算年龄
let myDate = new Date()
let monthNow = myDate.getMonth() + 1
let dayNow = myDate.getDate()
let age = myDate.getFullYear() - yearBirth
if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {
age--
}
sexAndAge.age = age
return sexAndAge
}
3. isArray 判断数组
可以通过 toString() 来获取每个对象的类型，一般返回值是 Boolean 类型的函数，命名都以 is 开头
function isArray(val) {
const toString = Object.prototype.toString;
return toString.call(val) === '[object Array]';
}
4. isUndefined 判断Undefined
注意 typeof null === 'object'
function isUndefined(val) {
return typeof val === 'undefined'
}
5. isObject 判断对象
function isObject(val) {
return val !== null && typeof val === 'object'
}
6. isPlainObject 判断 纯对象
纯对象：用{}或new Object()创建的对象
function isPlainObject(val) {
if (Object.prototype.toString.call(val) !== '[object Object]') {
return false;
}
const prototype = Object.getPrototypeOf(val);
return prototype === null || prototype === Object.prototype;
}
7. isDate 判断Date
function isDate(val) {
return Object.prototype.toString.call(val) === '[object Date]';
}
8. isFile 判断文件类型
function isFile(val) {
return Object.prototype.toString.call(val) === '[object File]';
}
9. isFunction 判断函数
function isFunction(val) {
return Object.prototype.toString.call(val) === '[object Function]';
}
10. isStream 判断是否是流
// 这里`isObject`、`isFunction`为上文提到的方法
function isStream(val) {
return isObject(val) && isFunction(val.pipe);
}
11. sURLSearchParams 判断URLSearchParams
URLSearchParams，很方便用于解析路径参数
function isURLSearchParams(val) {
return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams;
}
12. trim 去除首尾空格
function trim(str) {
return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
}
13. NodeList循环处理
var divs = document.querySelectorAll('div');
[].forEach.call(divs, function(div) {
// do whatever
div.style.color = "red";
});
14. 获取参数路径
/**
* 获取路径参数
* @param name
* @returns
*/
const toGetUrlParams = (name) => {
let searchParams = new URLSearchParams(window.location.search)
let result = searchParams.get(name)
return result
}
15. 去除特殊字符。如转义、换行等
/**
* 去除特殊字符。例如转义、换行
* @param s
* @returns
*/
export const toRemoveSpecial = (s: string) => {
// 去掉转义字符
let newS = s?.replace(/[\'\"\\\/\b\f\n\r\t]/g, '')
// 去掉特殊字符
// s = s.replace(/[\@\#\$\%\^\&\*\{\}\:\"\L\<\>\?]/)
return newS
}
