ttk-app-core
Version:
enterprise develop framework
323 lines (311 loc) • 11.1 kB
JavaScript
import React from 'react'
import { action as MetaAction, AppLoader } from 'edf-meta-engine'
import { fromJS } from 'immutable'
import config from './config'
import Sortable from './Sortable'
class action {
constructor(option) {
this.metaAction = option.metaAction
this.config = config.current
this.webapi = this.config.webapi
}
onInit = ({ component, injections }) => {
this.component = component
this.injections = injections
injections.reduce('init')
this.isScroll = false
this.resize()
let addEventListener = this.component.props.addEventListener
if (addEventListener) {
addEventListener('onTabFocus', this.load)
addEventListener('onResize', this.resize)
}
this.load()
}
load = async (param) => {
let response = await this.webapi.desktop.initApp()
let data = {}
let dataState = {}
this.loadData()
let appList = this.metaAction.gf('data.desktopAppList')
if(appList) appList = appList.toJS()
response.sort(function(a, b) {
return a.showIndex - b.showIndex
})
response.forEach((item, index) => {
item.showIndex = index
let nullData = {}
data[item.appName] = null
dataState[item.appName] = {
empty: true
}
})
// response = this.loadPanel(response)
let json = {
'data.desktopAppList': fromJS(response),
'data.other.dataState': dataState,
'data.other.mathRandom': Math.random(),
'data.data': data
}
this.metaAction.sfs(json)
this.move()
}
loadData = async () => {
let period = this.transPeriod()
this.metaAction.sf('data.other.period', period)
let data = await this.webapi.desktop.initAppData(period)
let dataState = this.metaAction.gf('data.other.dataState')
let keys = Object.keys(dataState)
for(let i = 0 ; i < keys.length ; i++) {
if(keys[i] == 'ttk-edf-app-desktop-init') continue
if(keys[i] == 'ttk-edf-app-article') {
dataState[keys[i]].empty = false
continue
}
dataState[keys[i]].empty = data[keys[i]].empty || false
}
// dataState['app-home-business-state'].empty = true
this.metaAction.sf('data.other.dataState', dataState)
this.metaAction.sf('data.data', data)
this.metaAction.sf('data.other.mathRandom', Math.random())
this.move()
}
//判断app位置是否变化
isReload = (appList, response) => {
if(!appList) return false
for(let i = 0 ; i < appList.length ; i++) {
if(response[i] && (appList[i].appName != response[i].appName)) {
return false
}else if(!response[i]){
return true
}
}
return true
}
transPeriod = () => {
let currentOrg = this.metaAction.context.get("currentOrg")
let periodParam = {}
let arr = currentOrg.periodDate.split('-')
periodParam.year = arr[0]
periodParam.period = arr[1]
// let currentOrgTime = new Date(currentOrg.enabledYear + '-' + currentOrg.enabledMonth).getTime()
// let systemTime = new Date().getTime()
// if(currentOrgTime > systemTime) {
// periodParam.period = currentOrg.enabledMonth
// periodParam.year = currentOrg.enabledYear
// }else {
// periodParam.year = new Date().getFullYear()
// periodParam.period = new Date().getMonth() + 1
// }
return periodParam
}
//绑定move事件
move = () => {
let that = this
let grid = document.querySelector('.edfx-app-home-content')
if (!grid)
return setTimeout(() => {
this.move()
}, 0)
let sortable = new Sortable(grid, {
animation:500,
onEnd: function(evt) {
that.moveEnd(evt)
}
})
}
componentWillUpdate = () => {
}
//拖动结束事件
moveEnd = async (evt) => {
let newIndex = evt.newIndex
let oldIndex = evt.oldIndex
let appList = await this.metaAction.gf('data.desktopAppList').toJS()
for(let i = 0; i < appList.length ; i++) {
if(appList[i].showIndex == oldIndex) {
appList[i].showIndex = newIndex
continue
}
if(newIndex < oldIndex) {
if(appList[i].showIndex >= newIndex && appList[i].showIndex < oldIndex) {
appList[i].showIndex++
}
}else if(newIndex > oldIndex) {
if(appList[i].showIndex <= newIndex && appList[i].showIndex > oldIndex) {
appList[i].showIndex--
}
}
}
let response = await this.webapi.desktop.saveAppList(appList)
this.metaAction.sf('data.desktopAppList', fromJS(appList))
// this.testBorder()
}
// testBorder = () => {
// let DOM = document.querySelector('.edfx-app-home-content')
// if(!DOM) {
// return setTimeout(() => {this.testBorder()}, 500)
// }
// let base = 0
// let arr = []
// DOM = DOM.children
// for(let i = 0 ; i < DOM.length ; i++ ){
// let ratio = parseInt(DOM[i].getAttribute('cust_ratio'))
// if(base < 4) {
// base += ratio
// arr.push(i)
// }else if(base >= 4){
// base = ratio
// arr = []
// arr.push(i)
// }
// }
// for(let i = 0 ; i < DOM.length ; i++) {
// i < arr[0] ? DOM[i].style.paddingBottom = '10px' : DOM[i].style.paddingBottom = '0px'
// }
// }
//缩放
zoom = async (index, type) => {
let DOM = document.querySelector('.edfx-app-home-content')
if(!DOM) return
DOM = DOM.children
if( type == 'open') {
this.metaAction.sf('data.other.isMax', true)
for(let i = 0 ; i < DOM.length ; i++ ){
DOM[i].style.display = 'none'
if(i == index) {
DOM[i].className = 'zoom'
DOM[i].style.display = 'block'
}
}
}else {
this.metaAction.sf('data.other.isMax', false)
for(let i = 0 ; i < DOM.length ; i++ ){
DOM[i].style.display = 'block'
if(i == index) {
DOM[i].setAttribute('class', '')
}
}
}
}
//resize判断分辨率
resize = () => {
let isMax = this.metaAction.gf('data.other.isMax')
if(!isMax) {
this.metaAction.sf('data.other.mathRandom', Math.random())
this.move()
}
}
//计算宽度
calculateWidth = (num) => {
let base = window.innerWidth < 1280 ? 3 : 4
let ratio = ''
if (base == 4) {
switch (num) {
case 1:
ratio = '25%'
break;
case 2:
ratio = '50%'
break;
case 3:
ratio = '75%'
break;
case 4:
ratio = '100%'
break;
}
} else if (base == 3) {
switch (num) {
case 1:
ratio = '33.3333333%'
break;
case 2:
ratio = '66.666666%'
break;
case 3:
ratio = '100%'
break;
case 4:
ratio = '100%'
break
}
}
return { width: ratio}
// return { width: 'calc('+ratio+' - 3px)'}
}
addPanelEventListener = (eventName, appName, handler) => {
this.injections.reduce('addEventListener', eventName, appName, handler)
}
removePanelEventListener = (eventName) => {
this.injections.reduce('removeEventListener', eventName)
}
//判断panel是否已都占位
loadPanel = (response) => {
let top = 94,
base = 320,
screenHeight = document.body.clientHeight,
line = Math.ceil((screenHeight - top) / base),
// ratio = window.innerWidth < 1280 ? 3 : 4,
ratio = 4,
count = 0
for(let i = 0 ; i < response.length ; i++) {
count += 2 || response[i].widthRatio
if(count <= (ratio * line)) {
response[i].enterScreen = true
}else {
response[i].enterScreen = false
}
}
return response
}
//懒加载
desktopScroll = () => {
if(this.isScroll) return
this.isScroll = true
this.isEnterScreen()
}
//判断Applist中APP是否在屏幕内
isEnterScreen = async () => {
let appList = this.metaAction.gf('data.desktopAppList')
if(appList) {
appList = appList.toJS()
}
let list = []
let DOM = document.querySelector('.edfx-app-home-content')
let screenHeight = document.documentElement.clientHeight
if(!DOM) return
DOM = DOM.children
for(let i = 0 ; i < DOM.length ; i++ ){
let appName = DOM[i].getAttribute('cust_appname')
let top = DOM[i].getBoundingClientRect().top
if(top < screenHeight) {
let item = appList.find((o) => o.appName == appName)
if(!item.enterScreen) {
item.enterScreen = true
list.push(appName)
}
}
}
this.injections.reduce('enterScreen', list)
this.metaAction.sf('data.desktopAppList', fromJS(appList))
this.isScroll = false
}
//判断是否需要滤镜
isFilterNeeded = () => {
return 'grayFilter'
}
//设置灰色
mouseOverEvent = (appName) => {
this.injections.reduce('setHighlight', appName)
}
mouseLeaveEvent = (appName) => {
this.injections.reduce('setGray', appName)
}
}
export default function creator(option) {
const metaAction = new MetaAction(option),
o = new action({ ...option, metaAction }),
ret = { ...metaAction, ...o }
metaAction.config({ metaHandlers: ret })
return ret
}