mirror of
https://github.com/bufanyun/hotgo.git
synced 2026-04-30 23:14:31 +08:00
tt
This commit is contained in:
孟帅
385
hotgo-web/src/utils/pt/layout/baseMouldStyles.js
Normal file
385
hotgo-web/src/utils/pt/layout/baseMouldStyles.js
Normal file
@@ -0,0 +1,385 @@
|
||||
/**
|
||||
* 控制表单列数布局
|
||||
* @param layout 列布局: 1,2,3,4
|
||||
*/
|
||||
const formColLayout = function (layout, colSetting, fixedSetting) {
|
||||
if (layout && layout === '1') {
|
||||
// 1列
|
||||
return {
|
||||
cols: colSetting && colSetting.cols ? colSetting.cols : { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
colSetting && colSetting.labelCol ? colSetting.labelCol : { xs: 6, sm: 6, lg: 6, xl: 6 },
|
||||
wrapperCol:
|
||||
colSetting && colSetting.wrapperCol
|
||||
? colSetting.wrapperCol
|
||||
: { xs: 18, sm: 18, lg: 18, xl: 18 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
fixedSetting && fixedSetting.labelCol
|
||||
? fixedSetting.labelCol
|
||||
: { xs: 6, sm: 6, lg: 6, xl: 6 },
|
||||
wrapperCol:
|
||||
fixedSetting && fixedSetting.wrapperCol
|
||||
? fixedSetting.wrapperCol
|
||||
: { xs: 18, sm: 18, lg: 18, xl: 18 }
|
||||
}
|
||||
}
|
||||
} else if (layout && layout === '2') {
|
||||
// 2列
|
||||
return {
|
||||
cols: colSetting && colSetting.cols ? colSetting.cols : { xs: 12, sm: 12, lg: 12, xl: 12 },
|
||||
labelCol:
|
||||
colSetting && colSetting.labelCol ? colSetting.labelCol : { xs: 8, sm: 8, lg: 8, xl: 8 },
|
||||
wrapperCol:
|
||||
colSetting && colSetting.wrapperCol
|
||||
? colSetting.wrapperCol
|
||||
: { xs: 16, sm: 16, lg: 16, xl: 16 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
fixedSetting && fixedSetting.labelCol
|
||||
? fixedSetting.labelCol
|
||||
: { xs: 4, sm: 4, lg: 4, xl: 4 },
|
||||
wrapperCol:
|
||||
fixedSetting && fixedSetting.wrapperCol
|
||||
? fixedSetting.wrapperCol
|
||||
: { xs: 20, sm: 20, lg: 20, xl: 20 }
|
||||
}
|
||||
}
|
||||
} else if (layout && layout === '3') {
|
||||
// 3列
|
||||
return {
|
||||
cols: colSetting && colSetting.cols ? colSetting.cols : { xs: 8, sm: 8, lg: 8, xl: 8 },
|
||||
labelCol:
|
||||
colSetting && colSetting.labelCol ? colSetting.labelCol : { xs: 9, sm: 9, lg: 9, xl: 9 },
|
||||
wrapperCol:
|
||||
colSetting && colSetting.wrapperCol
|
||||
? colSetting.wrapperCol
|
||||
: { xs: 15, sm: 15, lg: 15, xl: 15 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
fixedSetting && fixedSetting.labelCol
|
||||
? fixedSetting.labelCol
|
||||
: { xs: 3, sm: 3, lg: 3, xl: 3 },
|
||||
wrapperCol:
|
||||
fixedSetting && fixedSetting.wrapperCol
|
||||
? fixedSetting.wrapperCol
|
||||
: { xs: 21, sm: 21, lg: 21, xl: 21 }
|
||||
}
|
||||
}
|
||||
} else if (layout && layout === '4') {
|
||||
// 4列
|
||||
return {
|
||||
cols: colSetting && colSetting.cols ? colSetting.cols : { xs: 6, sm: 6, lg: 6, xl: 6 },
|
||||
labelCol:
|
||||
colSetting && colSetting.labelCol ? colSetting.labelCol : { xs: 8, sm: 8, lg: 8, xl: 8 },
|
||||
wrapperCol:
|
||||
colSetting && colSetting.wrapperCol
|
||||
? colSetting.wrapperCol
|
||||
: { xs: 16, sm: 16, lg: 16, xl: 16 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
fixedSetting && fixedSetting.labelCol
|
||||
? fixedSetting.labelCol
|
||||
: { xs: 2, sm: 2, lg: 2, xl: 2 },
|
||||
wrapperCol:
|
||||
fixedSetting && fixedSetting.wrapperCol
|
||||
? fixedSetting.wrapperCol
|
||||
: { xs: 22, sm: 22, lg: 22, xl: 22 }
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 默认1列
|
||||
return {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol: { xs: 4, sm: 4, lg: 4, xl: 4 },
|
||||
wrapperCol: { xs: 20, sm: 20, lg: 20, xl: 20 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol: { xs: 4, sm: 4, lg: 4, xl: 4 },
|
||||
wrapperCol: { xs: 20, sm: 20, lg: 20, xl: 20 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 控制详情页表单列数布局
|
||||
* @param layout 列布局: 1,2,3,4
|
||||
*/
|
||||
const flowformColLayout = function (layout, colSetting, fixedSetting) {
|
||||
if (layout && layout === '1') {
|
||||
// 1列
|
||||
return {
|
||||
cols: colSetting && colSetting.cols ? colSetting.cols : { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
colSetting && colSetting.labelCol
|
||||
? colSetting.labelCol
|
||||
: { xs: 22, sm: 22, lg: 22, xl: 22 },
|
||||
wrapperCol:
|
||||
colSetting && colSetting.wrapperCol
|
||||
? colSetting.wrapperCol
|
||||
: { xs: 22, sm: 22, lg: 22, xl: 22 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
fixedSetting && fixedSetting.labelCol
|
||||
? fixedSetting.labelCol
|
||||
: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
wrapperCol:
|
||||
fixedSetting && fixedSetting.wrapperCol
|
||||
? fixedSetting.wrapperCol
|
||||
: { xs: 20, sm: 20, lg: 20, xl: 20 }
|
||||
}
|
||||
}
|
||||
} else if (layout && layout === '2') {
|
||||
// 2列
|
||||
return {
|
||||
cols: colSetting && colSetting.cols ? colSetting.cols : { xs: 12, sm: 12, lg: 12, xl: 12 },
|
||||
labelCol:
|
||||
colSetting && colSetting.labelCol ? colSetting.labelCol : { xs: 6, sm: 6, lg: 6, xl: 6 },
|
||||
wrapperCol:
|
||||
colSetting && colSetting.wrapperCol
|
||||
? colSetting.wrapperCol
|
||||
: { xs: 18, sm: 18, lg: 18, xl: 18 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
fixedSetting && fixedSetting.labelCol
|
||||
? fixedSetting.labelCol
|
||||
: { xs: 3, sm: 3, lg: 3, xl: 3 },
|
||||
wrapperCol:
|
||||
fixedSetting && fixedSetting.wrapperCol
|
||||
? fixedSetting.wrapperCol
|
||||
: { xs: 21, sm: 21, lg: 21, xl: 21 }
|
||||
}
|
||||
}
|
||||
} else if (layout && layout === '3') {
|
||||
// 3列
|
||||
return {
|
||||
cols: colSetting && colSetting.cols ? colSetting.cols : { xs: 8, sm: 8, lg: 8, xl: 8 },
|
||||
labelCol:
|
||||
colSetting && colSetting.labelCol ? colSetting.labelCol : { xs: 6, sm: 6, lg: 6, xl: 6 },
|
||||
wrapperCol:
|
||||
colSetting && colSetting.wrapperCol
|
||||
? colSetting.wrapperCol
|
||||
: { xs: 18, sm: 18, lg: 18, xl: 18 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
fixedSetting && fixedSetting.labelCol
|
||||
? fixedSetting.labelCol
|
||||
: { xs: 2, sm: 2, lg: 2, xl: 2 },
|
||||
wrapperCol:
|
||||
fixedSetting && fixedSetting.wrapperCol
|
||||
? fixedSetting.wrapperCol
|
||||
: { xs: 22, sm: 22, lg: 22, xl: 22 }
|
||||
}
|
||||
}
|
||||
} else if (layout && layout === '4') {
|
||||
// 4列
|
||||
return {
|
||||
cols: colSetting && colSetting.cols ? colSetting.cols : { xs: 6, sm: 6, lg: 6, xl: 6 },
|
||||
labelCol:
|
||||
colSetting && colSetting.labelCol
|
||||
? colSetting.labelCol
|
||||
: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
wrapperCol:
|
||||
colSetting && colSetting.wrapperCol
|
||||
? colSetting.wrapperCol
|
||||
: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol:
|
||||
fixedSetting && fixedSetting.labelCol
|
||||
? fixedSetting.labelCol
|
||||
: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
wrapperCol:
|
||||
fixedSetting && fixedSetting.wrapperCol
|
||||
? fixedSetting.wrapperCol
|
||||
: { xs: 24, sm: 24, lg: 24, xl: 24 }
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 默认1列
|
||||
return {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol: { xs: 4, sm: 4, lg: 4, xl: 4 },
|
||||
wrapperCol: { xs: 20, sm: 20, lg: 20, xl: 20 },
|
||||
fixed: {
|
||||
cols: { xs: 24, sm: 24, lg: 24, xl: 24 },
|
||||
labelCol: { xs: 4, sm: 4, lg: 4, xl: 4 },
|
||||
wrapperCol: { xs: 20, sm: 20, lg: 20, xl: 20 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 控制弹窗modal的宽高
|
||||
* @param widthRatio 弹窗modal宽度占屏幕比例
|
||||
* @param heightRatio 弹窗modal高度占屏幕比例
|
||||
* @param cutHeight 弹窗modal的body的高度比整个弹窗modal少的高度
|
||||
* @param bodyOverflowY 弹窗modal的body的overflow-y属性
|
||||
*/
|
||||
const modalWidthAndHeight = function (
|
||||
widthRatio = 0.7,
|
||||
heightRatio = 0.7,
|
||||
cutHeight = 40,
|
||||
bodyOverflowY = 'auto',
|
||||
backgroundColor = '#fff'
|
||||
) {
|
||||
const modalStyleWidth = document.documentElement.clientWidth * widthRatio + 'px'
|
||||
// let modalStyleHeight = document.documentElement.clientHeight * heightRatio + 'px';
|
||||
const bodyStyleWidth = document.documentElement.clientWidth * widthRatio + 'px'
|
||||
const bodyStyleHeight = document.documentElement.clientHeight * heightRatio - cutHeight + 'px'
|
||||
return {
|
||||
modalStyle: {
|
||||
// 弹窗宽高控制
|
||||
width: modalStyleWidth,
|
||||
height: 'auto'
|
||||
},
|
||||
bodyStyle: {
|
||||
// 弹窗body宽高控制
|
||||
width: bodyStyleWidth,
|
||||
height: bodyStyleHeight,
|
||||
overflowY: bodyOverflowY,
|
||||
backgroundColor
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 根据布局列数控制弹窗modal的宽高
|
||||
* （单列： 580*420 适用于1~6项内容时、
|
||||
* 两列：960*500 适用于6~12项内容时、
|
||||
* 三列：1280*600） 适用于12项以上
|
||||
* @param layout 列数
|
||||
* @param cutHeight 弹窗modal的body的高度比整个弹窗modal少的高度
|
||||
* @param bodyOverflowY 弹窗modal的body的overflow-y属性
|
||||
*/
|
||||
const modalWidthAndHeightBylayout = function (
|
||||
layout = 1,
|
||||
cutHeight = 40,
|
||||
bodyOverflowY = 'auto',
|
||||
backgroundColor = '#fff'
|
||||
) {
|
||||
let modalStyleWidth = null
|
||||
// let modalStyleHeight = document.documentElement.clientHeight * heightRatio + 'px';
|
||||
let bodyStyleWidth = null
|
||||
let bodyStyleHeight = null
|
||||
let bodyStylePadding = null
|
||||
if (layout === 1) {
|
||||
modalStyleWidth = 580 + 'px'
|
||||
bodyStyleWidth = 580 + 'px'
|
||||
bodyStyleHeight = 420 - cutHeight + 'px'
|
||||
bodyStylePadding = '20px 50px'
|
||||
} else if (layout === 2) {
|
||||
modalStyleWidth = 960 + 'px'
|
||||
bodyStyleWidth = 960 + 'px'
|
||||
bodyStyleHeight = 500 - cutHeight + 'px'
|
||||
bodyStylePadding = '20px'
|
||||
} else if (layout === 3) {
|
||||
modalStyleWidth = 1280 + 'px'
|
||||
bodyStyleWidth = 1280 + 'px'
|
||||
bodyStyleHeight = 600 - cutHeight + 'px'
|
||||
bodyStylePadding = '20px 40px'
|
||||
}
|
||||
return {
|
||||
modalStyle: {
|
||||
// 弹窗宽高控制
|
||||
width: modalStyleWidth,
|
||||
height: 'auto'
|
||||
},
|
||||
bodyStyle: {
|
||||
// 弹窗body宽高控制
|
||||
width: bodyStyleWidth,
|
||||
height: bodyStyleHeight,
|
||||
padding: bodyStylePadding,
|
||||
overflowY: bodyOverflowY,
|
||||
backgroundColor
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取内容高度: 传入元素的父元素高度 - 父元素除去内容之外的元素的高度
|
||||
* @param wrapId 元素的id
|
||||
* @param cutHeight 内容与父元素相差的高度,一般包括:父元素padding,按钮高度及margin,及其他
|
||||
*/
|
||||
const getContentHeight = function (params) {
|
||||
// 默认值auto
|
||||
let contentHeight = 'auto'
|
||||
if (params) {
|
||||
// 获取元素父元素
|
||||
const el = document.querySelector('#' + params.wrapId)
|
||||
if (el) {
|
||||
// 获取父元素高度
|
||||
const parentHeight = el.parentNode.offsetHeight
|
||||
// 传入的元素高度设为父元素高度
|
||||
// el.style.height = parentHeight + 'px'; 为加resize改变大小,注释掉这句.
|
||||
// 内容高度为 父元素高度 减去 父元素除去内容之外的元素的高度
|
||||
if (params.cutHeight) {
|
||||
contentHeight = parentHeight - params.cutHeight + 'px'
|
||||
} else {
|
||||
contentHeight = parentHeight + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
return contentHeight
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验不通过,滚动到校验不通过元素位置,提示用户
|
||||
*/
|
||||
const getFirstCheckErrorElement = function (err) {
|
||||
for (const key in err) {
|
||||
// return document.querySelector("div[for='" + key + "']") || document.querySelector("div[for='" + key + "Alias']") || document.querySelector("div[for='" + key + "Name']");
|
||||
return document.querySelector('#' + key)
|
||||
}
|
||||
}
|
||||
const appointModalWidthAndHeight = function (
|
||||
height,
|
||||
width,
|
||||
cutHeight,
|
||||
bodyOverflowY = 'auto',
|
||||
backgroundColor = '#fff'
|
||||
) {
|
||||
let modalStyleWidth
|
||||
let bodyStyleWidth
|
||||
let bodyStyleHeight
|
||||
if (width === '100%' && height === '100%') {
|
||||
// 全屏模式
|
||||
modalStyleWidth = document.documentElement.clientWidth + 'px'
|
||||
bodyStyleWidth = document.documentElement.clientWidth + 'px'
|
||||
bodyStyleHeight = document.documentElement.clientHeight - cutHeight + 'px'
|
||||
} else {
|
||||
// 指定宽高
|
||||
modalStyleWidth = width + 'px'
|
||||
bodyStyleWidth = width + 'px'
|
||||
bodyStyleHeight = height - cutHeight + 'px'
|
||||
}
|
||||
return {
|
||||
modalStyle: {
|
||||
// 弹窗宽高控制
|
||||
width: modalStyleWidth,
|
||||
height: 'auto'
|
||||
},
|
||||
bodyStyle: {
|
||||
// 弹窗body宽高控制
|
||||
width: bodyStyleWidth,
|
||||
height: bodyStyleHeight,
|
||||
overflowY: bodyOverflowY,
|
||||
backgroundColor
|
||||
}
|
||||
}
|
||||
}
|
||||
export {
|
||||
formColLayout,
|
||||
flowformColLayout,
|
||||
modalWidthAndHeight,
|
||||
modalWidthAndHeightBylayout,
|
||||
getContentHeight,
|
||||
getFirstCheckErrorElement,
|
||||
appointModalWidthAndHeight
|
||||
}
|
||||
Reference in New Issue
Block a user