uas手机版

搭建首页布局框架

uas-office-web/uas-mobile/config-overrides.js

@@ -79,7 +79,7 @@ module.exports = {
       loaders[7].use.push({
         loader: 'style-resources-loader',
         options: {
-          patterns: path.resolve('@/configs/theme.config.less'),//全局引入公共的less文件
+          patterns: path.resolve(__dirname, 'src/configs/theme.config.less'),//全局引入公共的less文件
         },
       })
       return config

uas-office-web/uas-mobile/src/configs/api.config.js

@@ -2,3 +2,11 @@
  * Created by RaoMeng on 2020/10/21
  * Desc: 项目接口
  */
+
+export const _host = window.location.origin
+
+export const _baseURL = _host + (process.env.REACT_APP_ROUTER_BASE_NAME || '')
+
+export const API = {
+  test: _baseURL + '',
+}

uas-office-web/uas-mobile/src/configs/iconfont.conig.js

@@ -5,7 +5,7 @@ import { createFromIconfontCN } from '@ant-design/icons'
  * Desc: iconfont图标库
  */
 const UasIcon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_1650368_rupnaa7p26o.js',
+  scriptUrl: '//at.alicdn.com/t/font_2183203_fb28jzmhkjg.js',
 })
 
 export default UasIcon

uas-office-web/uas-mobile/src/configs/router.config.js

@@ -19,6 +19,9 @@ const PageNotFound = PageLoadable(
 const AccessDenied = PageLoadable(
   import(/* webpackChunkName:'common' */'@/pages/common/AccessDenied'))
 
+const HomaPage = PageLoadable(
+  import(/* webpackChunkName:'home' */'@/pages/private/homePage/HomePage'))
+
 /**
  * 自定义页面返回事件拦截框
  * @param message
@@ -51,8 +54,10 @@ class Routes extends React.Component {
         <Switch>
           {/* 默认页面、404页面 */}
           <Route exact path='/' component={PageNotFound}/>
+          {/*权限缺失页面*/}
           <Route exact path='/accessDenied' component={AccessDenied}/>
 
+          <Route path='/homePage' component={HomaPage}/>
           {/* 所有错误路由跳转页面 */}
           <Route render={() => (
             <Redirect to={'/'}/>

uas-office-web/uas-mobile/src/configs/theme.config.less

@@ -4,3 +4,11 @@
  */
 
 @com-page-padding: 16px; // 页面内边距
+
+//竖向flex布局
+.column-flex {
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}

uas-office-web/uas-mobile/src/pages/private/homePage/DocRoot.jsx

@@ -0,0 +1,37 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 应用
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+class DocRoot extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {}
+  }
+
+  componentDidMount () {
+
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    return (
+      <div>
+        应用
+      </div>
+    )
+  }
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(DocRoot)
+

uas-office-web/uas-mobile/src/pages/private/homePage/HomePage.jsx

@@ -0,0 +1,205 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 主页
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import './home-page.less'
+import { TabBar, SearchBar } from 'antd-mobile'
+import UasIcon from '../../../configs/iconfont.conig'
+import { freshHomeState } from '../../../redux/actions/homeState'
+import MainRoot from './MainRoot'
+import ReportRoot from './ReportRoot'
+import DocRoot from './DocRoot'
+import MineRoot from './MineRoot'
+
+class HomePage extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {
+      tabBarHidden: false,//底部TabBar是否隐藏
+    }
+  }
+
+  componentDidMount () {
+    document.title = 'UAS系统'
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    const { tabBarHidden } = this.state
+
+    return (
+      <div className='home-root'>
+        <TabBar
+          unselectedTintColor="#949494"
+          tintColor="#33A3F4"
+          barTintColor="white"
+          prerenderingSiblingsNumber={0}
+          hidden={tabBarHidden}
+        >
+          {this.getMainTab()}
+          {this.getReportTab()}
+          {this.getDocTab()}
+          {this.getMineTab()}
+        </TabBar>
+      </div>
+    )
+  }
+
+  getMainTab = () => {
+    return (
+      <TabBar.Item
+        title="首页"
+        key="Main"
+        icon={<UasIcon type="uas-main-normal"/>}
+        selectedIcon={<UasIcon type="uas-main-select"/>}
+        selected={this.props.homeState.selectedTab === 0}
+        // badge={''}
+        onPress={this.onMainTabSelected}
+      >
+        {this.renderMainTab()}
+      </TabBar.Item>
+    )
+  }
+
+  getReportTab = () => {
+    return (
+      <TabBar.Item
+        title="报表"
+        key="Report"
+        icon={<UasIcon type="uas-report-normal"/>}
+        selectedIcon={<UasIcon type="uas-report-select"/>}
+        selected={this.props.homeState.selectedTab === 1}
+        // badge={''}
+        onPress={this.onReportTabSelected}
+      >
+        {this.renderReportTab()}
+      </TabBar.Item>
+    )
+  }
+
+  getDocTab = () => {
+    return (
+      <TabBar.Item
+        title="应用"
+        key="Doc"
+        icon={<UasIcon type="uas-doc-normal"/>}
+        selectedIcon={<UasIcon type="uas-doc-select"/>}
+        selected={this.props.homeState.selectedTab === 2}
+        // badge={''}
+        onPress={this.onDocTabSelected}
+      >
+        {this.renderDocTab()}
+      </TabBar.Item>
+    )
+  }
+
+  getMineTab = () => {
+    return (
+      <TabBar.Item
+        title="我的"
+        key="Mine"
+        icon={<UasIcon type="uas-mine-normal"/>}
+        selectedIcon={<UasIcon type="uas-mine-select"/>}
+        selected={this.props.homeState.selectedTab === 3}
+        // badge={''}
+        onPress={this.onMineTabSelected}
+      >
+        {this.renderMineTab()}
+      </TabBar.Item>
+    )
+  }
+
+  /**
+   * 首页布局
+   * @returns {*}
+   */
+  renderMainTab () {
+    return (
+      <MainRoot/>
+    )
+  }
+
+  /**
+   * 报表布局
+   * @returns {*}
+   */
+  renderReportTab () {
+    return (
+      <ReportRoot/>
+    )
+  }
+
+  /**
+   * 应用布局
+   * @returns {*}
+   */
+  renderDocTab () {
+    return (
+      <DocRoot/>
+    )
+  }
+
+  /**
+   * 我的布局
+   * @returns {*}
+   */
+  renderMineTab () {
+    return (
+      <MineRoot/>
+    )
+  }
+
+  /**
+   * 切换首页
+   */
+  onMainTabSelected = () => {
+
+    freshHomeState({
+      selectedTab: 0,
+    })()
+  }
+
+  /**
+   * 切换报表
+   */
+  onReportTabSelected = () => {
+
+    freshHomeState({
+      selectedTab: 1,
+    })()
+  }
+
+  /**
+   * 切换应用
+   */
+  onDocTabSelected = () => {
+
+    freshHomeState({
+      selectedTab: 2,
+    })()
+  }
+
+  /**
+   * 切换我的
+   */
+  onMineTabSelected = () => {
+
+    freshHomeState({
+      selectedTab: 3,
+    })()
+  }
+}
+
+let mapStateToProps = (state) => ({
+  homeState: { ...state.homeState },
+})
+
+export default connect(mapStateToProps)(HomePage)

uas-office-web/uas-mobile/src/pages/private/homePage/MainRoot.jsx

@@ -0,0 +1,36 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 首页
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+class MainRoot extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {}
+  }
+
+  componentDidMount () {
+
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    return (
+      <div>
+        首页
+      </div>
+    )
+  }
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(MainRoot)

uas-office-web/uas-mobile/src/pages/private/homePage/MineRoot.jsx

@@ -0,0 +1,36 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 我的
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+class MineRoot extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {}
+  }
+
+  componentDidMount () {
+
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    return (
+      <div>
+        我的
+      </div>
+    )
+  }
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(MineRoot)

uas-office-web/uas-mobile/src/pages/private/homePage/ReportRoot.jsx

@@ -0,0 +1,36 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 报表
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+class ReportRoot extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {}
+  }
+
+  componentDidMount () {
+
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    return (
+      <div>
+        报表
+      </div>
+    )
+  }
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(ReportRoot)

uas-office-web/uas-mobile/src/pages/private/homePage/home-page.less

@@ -0,0 +1,9 @@
+.home-root {
+  width: 100%;
+  height: 100vh;
+  .column-flex
+}
+
+.home-root::-webkit-scrollbar {
+  display: none;
+}

uas-office-web/uas-mobile/src/redux/actions/homeState.js

@@ -0,0 +1,34 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 首页数据处理
+ */
+import store from '../store/store'
+import {
+  CLEAR_HOME_STATE,
+  FRESH_HOME_STATE,
+} from '../constants/actionTypes'
+
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 刷新首页状态
+ */
+export const freshHomeState = (data) => {
+  return () => {
+    store.dispatch({
+      type: FRESH_HOME_STATE,
+      ...data,
+    })
+  }
+}
+
+/**
+ * 清除首页状态
+ * @returns {Function}
+ */
+export const clearHomeState = () => {
+  return () => {
+    store.dispatch({
+      type: CLEAR_HOME_STATE,
+    })
+  }
+}

uas-office-web/uas-mobile/src/redux/constants/actionTypes.js

@@ -2,3 +2,7 @@
  * Created by RaoMeng on 2020/10/22
  * Desc: action操作标识常量
  */
+
+/**********************************首页********************************************/
+export const CLEAR_HOME_STATE = 'CLEAR_HOME_STATE'
+export const FRESH_HOME_STATE = 'FRESH_HOME_STATE'

uas-office-web/uas-mobile/src/redux/reducers/index.js

@@ -1,5 +1,18 @@
-/*合并reducer*/
-
 import { combineReducers } from 'redux'
+import redHomeState from './redHomeState'
+import redMainState from './redMainState'
+import redReportState from './redReportState'
+import redDocState from './redDocState'
+import redMineState from './redMineState'
 
-export const appReducer = combineReducers({})
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 合并reducer，数据中心
+ */
+export const appReducer = combineReducers({
+  homeState: redHomeState,
+  mainState: redMainState,
+  reportState: redReportState,
+  docState: redDocState,
+  mineState: redMineState,
+})

uas-office-web/uas-mobile/src/redux/reducers/redDocState.js

@@ -0,0 +1,20 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 应用数据缓存
+ */
+
+const initDocState = {}
+
+const redDocState = (state = initDocState, action) => {
+  if (action === undefined) {
+    return state
+  }
+
+  switch (action.type) {
+
+    default:
+      return state
+  }
+}
+
+export default redDocState

uas-office-web/uas-mobile/src/redux/reducers/redHomeState.js

@@ -0,0 +1,35 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 首页数据缓存
+ */
+import {
+  CLEAR_HOME_STATE,
+  FRESH_HOME_STATE,
+} from '../constants/actionTypes'
+
+const initHomeState = {
+  selectedTab: 0,
+
+}
+
+const redHomeState = (state = initHomeState, action) => {
+  if (action === undefined) {
+    return state
+  }
+
+  switch (action.type) {
+    case FRESH_HOME_STATE:
+      //更新首页数据
+      return {
+        ...state,
+        ...action,
+      }
+    case CLEAR_HOME_STATE:
+      //清空首页数据
+      return initHomeState
+    default:
+      return state
+  }
+}
+
+export default redHomeState

uas-office-web/uas-mobile/src/redux/reducers/redMainState.js

@@ -0,0 +1,20 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 主页数据缓存
+ */
+
+const initMainState = {}
+
+const redMainState = (state = initMainState, action) => {
+  if (action === undefined) {
+    return state
+  }
+
+  switch (action.type) {
+
+    default:
+      return state
+  }
+}
+
+export default redMainState

uas-office-web/uas-mobile/src/redux/reducers/redMineState.js

@@ -0,0 +1,20 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 我的数据缓存
+ */
+
+const initMineState = {}
+
+const redMineState = (state = initMineState, action) => {
+  if (action === undefined) {
+    return state
+  }
+
+  switch (action.type) {
+
+    default:
+      return state
+  }
+}
+
+export default redMineState

uas-office-web/uas-mobile/src/redux/reducers/redReportState.js

@@ -0,0 +1,20 @@
+/**
+ * Created by RaoMeng on 2020/11/9
+ * Desc: 报表数据缓存
+ */
+
+const initReportState = {}
+
+const redReportState = (state = initReportState, action) => {
+  if (action === undefined) {
+    return state
+  }
+
+  switch (action.type) {
+
+    default:
+      return state
+  }
+}
+
+export default redReportState