uas手机版

常用应用管理页面

uas-office-web/uas-mobile/src/components/common/func/FuncGroup.jsx

@@ -26,7 +26,7 @@ export default class FuncGroup extends Component {
   }
 
   render () {
-    let { funcGroup, line } = this.props
+    let { funcGroup, line, onRightClick, onFuncClick } = this.props
     let funcItems = []
     if (!isObjEmpty(funcGroup.funcList)) {
       funcGroup.funcList.forEach((funcItem, funcIndex) => {
@@ -34,7 +34,7 @@ export default class FuncGroup extends Component {
           <FuncItem
             funcObj={funcItem}
             line={line}
-            onFuncClick={this.onFuncClick}
+            onFuncClick={onFuncClick}
             key={funcIndex}/>,
         )
       })
@@ -45,7 +45,7 @@ export default class FuncGroup extends Component {
         style={{
           overflowX: 'hidden',
         }}>
-        <FuncTltle funcTitle={funcGroup}/>
+        <FuncTltle funcTitle={funcGroup} onRightClick={onRightClick}/>
         <div
           style={{
             marginRight: line ? '-1px' : '0px',

uas-office-web/uas-mobile/src/components/common/func/FuncItem.jsx

@@ -39,15 +39,10 @@ export default class FuncItem extends Component {
             <span className='func-func-text'>{funcObj.name}</span>
           </div>
           {
-            funcObj.cancelable && <Icon
-              type='uas-cancel'
-              size='xs'
-              style={{
-                position: 'absolute',
-                top: '6px',
-                right: '6px',
-              }}
-              onClick={this.onCancelClick}
+            funcObj.operation && <Icon
+              type={funcObj.operation}
+              className='func-operation-icon'
+              onClick={this.onOperationClick}
             />
           }
 
@@ -59,7 +54,7 @@ export default class FuncItem extends Component {
     this.props.onFuncClick && this.props.onFuncClick(this.props.funcObj)
   }
 
-  onCancelClick = () => {
+  onOperationClick = () => {
 
   }
 }

uas-office-web/uas-mobile/src/components/common/func/FuncTltle.jsx

@@ -16,7 +16,7 @@ export default class FuncTltle extends Component {
   }
 
   componentDidMount () {
-    document.title = ''
+
   }
 
   componentWillUnmount () {

uas-office-web/uas-mobile/src/components/common/func/common-func.less

@@ -1,5 +1,5 @@
 .func-group-layout {
-  padding: 10px;
+  padding: 8px 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -55,3 +55,12 @@
   padding-top: 6px;
   text-align: center;
 }
+
+.func-operation-icon {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: @com-operation-icon-size;
+  height: @com-operation-icon-size;
+  padding: 0;
+}

uas-office-web/uas-mobile/src/components/private/subscribe/comp-subscrive.less

@@ -111,7 +111,7 @@
 /********************************订阅管理*************************************/
 .comp-sub-already-item-root {
   .com-row-flex;
-  padding: 18px;
+  padding: 16px;
   background-color: white;
   border-bottom: 1px solid @com-color-divide-gray-line;
 
@@ -132,7 +132,7 @@
 .comp-sub-left-menu {
   width: 100%;
   box-sizing: border-box;
-  padding: 18px;
+  padding: 16px;
   text-align: center;
   color: #333;
   //border-bottom: 1px solid #999;

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

@@ -31,3 +31,10 @@
   font-size: 12px !important;
   margin-top: 2px !important;
 }
+
+/********************Button按钮的样式***********************/
+.am-button {
+  height: @com-button-height !important;
+  line-height: @com-button-height !important;
+  font-size: @com-button-fontsize !important;
+}

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

@@ -9,3 +9,13 @@
  */
 export const SUBSCRIBE_ITEM_NOT = 'SUBSCRIBE_ITEM_NOT'
 export const SUBSCRIBE_ITEM_ALREADY = 'SUBSCRIBE_ITEM_ALREADY'
+
+/**
+ * 应用操作类型
+ */
+export const FUNC_OPERATION_CANCEL = 'uas-cancel'
+export const FUNC_OPERATION_ADD = 'uas-add'
+export const FUNC_OPERATION_ADD_DISABLE = 'uas-add-disable'
+
+
+

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_2183203_xf62r4jphaq.js',
+  scriptUrl: '///at.alicdn.com/t/font_2183203_4acr6qjbroc.js',
 })
 
 export default UasIcon

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

@@ -14,6 +14,7 @@ import PageLoadable from '../components/common/pageLoad/PageLoadable'
  * Desc: 全局路由配置
  */
 
+/**************************************************公用**************************************************/
 const PageNotFound = PageLoadable(
   import(/* webpackChunkName:'common' */'@/pages/common/PageNotFound'))
 const AccessDenied = PageLoadable(
@@ -21,17 +22,24 @@ const AccessDenied = PageLoadable(
 const UasEntry = PageLoadable(
   import(/* webpackChunkName:'common' */'@/pages/common/UasEntry'))
 
+/**************************************************主页**************************************************/
 const HomaPage = PageLoadable(
   import(/* webpackChunkName:'home' */'@/pages/private/homePage/HomePage'))
 
+/**************************************************日程**************************************************/
 const SchedulePage = PageLoadable(
   import(/* webpackChunkName:'schedule' */'@/pages/private/schedulePage/SchedulePage'))
 
+/**************************************************订阅**************************************************/
 const SubscribeList = PageLoadable(
   import(/* webpackChunkName:'subscribe' */'@/pages/private/subscribe/SubscribeList'))
 const SubscribeManage = PageLoadable(
   import(/* webpackChunkName:'subscribe' */'@/pages/private/subscribe/SubscribeManage'))
 
+/**************************************************应用**************************************************/
+const OftenFuncManage = PageLoadable(
+  import(/* webpackChunkName:'subscribe' */'@/pages/private/oftenFunc/OftenFuncManage'))
+
 /**
  * 自定义页面返回事件拦截框
  * @param message
@@ -82,6 +90,10 @@ class Routes extends React.Component {
           {/*订阅管理*/}
           <Route path='/subscribeManage' component={SubscribeManage}/>
 
+          {/***************************************应用*******************************************/}
+          {/*常用应用管理*/}
+          <Route path='/oftenFuncManage' component={OftenFuncManage}/>
+
           {/*所有错误路由跳转页面*/}
           <Route render={() => (
             <Redirect to={'/'}/>

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

@@ -6,6 +6,9 @@
 /***********************大小、距离************************/
 @com-page-padding: 16px; // 页面内边距
 @com-list-item-padding: 10px; //默认列表item内边距
+@com-operation-icon-size: 18px; //应用item操作icon大小
+@com-button-height: 38px; //全局按钮高度
+@com-button-fontsize: 16px; //全局按钮文字大小
 
 /*************************颜色****************************/
 @com-text-color-normal: #333333; //默认字体颜色

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

@@ -9,6 +9,8 @@ import FuncTltle from '../../../components/common/func/FuncTltle'
 import MainHeader from '../../../components/common/mainHeader/MainHeader'
 import './main-root.less'
 import { withRouter } from 'react-router-dom'
+import FuncGroup from '../../../components/common/func/FuncGroup'
+import OftenFuncGrid from '../oftenFunc/OftenFuncGrid'
 
 class MainRoot extends Component {
 
@@ -27,7 +29,6 @@ class MainRoot extends Component {
   }
 
   render () {
-
     return (
       <div>
         {/* 首页固定头部 */}
@@ -36,11 +37,7 @@ class MainRoot extends Component {
         </div>
         {/* 首页常用功能模块 */}
         <div className="main-common">
-          <FuncTltle funcTitle={{
-            groupText: '常用',
-            rightIcon: 'uas-edit',
-          }}/>
-          <div style={{ minHeight: '200px' }}></div>
+          <OftenFuncGrid/>
         </div>
         {/* 首页看板展示 */}
         <div className="main-kanban">
@@ -58,6 +55,7 @@ class MainRoot extends Component {
   onKanbanManage = () => {
     this.props.history.push('/subscribeManage')
   }
+
 }
 
 let mapStateToProps = (state) => ({})

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

@@ -7,6 +7,10 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import FuncItem from '../../../components/common/func/FuncItem'
 import FuncGroup from '../../../components/common/func/FuncGroup'
+import {
+  FUNC_OPERATION_ADD, FUNC_OPERATION_ADD_DISABLE,
+  FUNC_OPERATION_CANCEL,
+} from '../../../configs/constans.config'
 
 class ReportRoot extends Component {
 
@@ -41,13 +45,12 @@ class ReportRoot extends Component {
       groupText: '采购管理',
       rightIcon: 'uas-edit',
       funcList: [
-        { name: '报表', cancelable: true },
-        { name: '报表', cancelable: true },
-        { name: '报表', cancelable: true },
-        { name: '报表', cancelable: true },
-        { name: '报表', cancelable: true },
-        { name: '报表', cancelable: true },
-        { name: '报表', cancelable: true },
+        { name: '报表', operation: FUNC_OPERATION_CANCEL },
+        { name: '报表', operation: FUNC_OPERATION_ADD },
+        { name: '报表', operation: FUNC_OPERATION_ADD_DISABLE },
+        { name: '报表', operation: FUNC_OPERATION_CANCEL },
+        { name: '报表', operation: FUNC_OPERATION_ADD },
+        { name: '报表', operation: FUNC_OPERATION_ADD_DISABLE },
       ],
     }
     return (

uas-office-web/uas-mobile/src/pages/private/oftenFunc/OftenFuncGrid.jsx

@@ -0,0 +1,58 @@
+/**
+ * Created by RaoMeng on 2020/11/12
+ * Desc: 常用应用 网格列表
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import FuncGroup from '../../../components/common/func/FuncGroup'
+import { withRouter } from 'react-router-dom'
+
+class OftenFuncGrid extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {}
+  }
+
+  componentDidMount () {
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    const oftenFunc = {
+      groupText: '常用',
+      rightIcon: 'uas-edit',
+      funcList: [
+        { name: '销售订单' },
+        { name: '出货通知单' },
+        { name: '退货申请' },
+        { name: '销售订单' },
+        { name: '出货通知单' },
+        { name: '退货申请' },
+        { name: '销售订单' },
+        { name: '出货通知单' },
+        { name: '退货申请' },
+        { name: '销售订单' },
+      ],
+    }
+    return (
+      <FuncGroup
+        funcGroup={oftenFunc}
+        onRightClick={this.onOftenManage}
+      />
+    )
+  }
+
+  onOftenManage = () => {
+    this.props.history.push('/oftenFuncManage')
+  }
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(withRouter(OftenFuncGrid))

uas-office-web/uas-mobile/src/pages/private/oftenFunc/OftenFuncManage.jsx

@@ -0,0 +1,72 @@
+/**
+ * Created by RaoMeng on 2020/11/12
+ * Desc: 常用应用 管理页面
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import OftenFuncGrid from './OftenFuncGrid'
+import { Button } from 'antd-mobile'
+import './often-func.less'
+import {
+  FUNC_OPERATION_ADD, FUNC_OPERATION_ADD_DISABLE,
+  FUNC_OPERATION_CANCEL,
+} from '../../../configs/constans.config'
+import FuncGroup from '../../../components/common/func/FuncGroup'
+
+class OftenFuncManage extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {}
+  }
+
+  componentDidMount () {
+    document.title = '常用管理'
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    let funcGroup = {
+      groupText: '采购管理',
+      rightIcon: 'uas-edit',
+      funcList: [
+        { name: '报表', operation: FUNC_OPERATION_ADD },
+        { name: '报表', operation: FUNC_OPERATION_ADD },
+        { name: '报表', operation: FUNC_OPERATION_ADD_DISABLE },
+        { name: '报表', operation: FUNC_OPERATION_ADD },
+        { name: '报表', operation: FUNC_OPERATION_ADD },
+        { name: '报表', operation: FUNC_OPERATION_ADD_DISABLE },
+      ],
+    }
+    return (
+      <div className='often-func-root'>
+        <div className='often-func-header'>
+          <OftenFuncGrid/>
+        </div>
+        <div className='often-func-all-list'>
+          <FuncGroup
+            funcGroup={funcGroup}
+          />
+          <FuncGroup
+            funcGroup={funcGroup}
+          />
+          <FuncGroup
+            funcGroup={funcGroup}
+          />
+        </div>
+        <div className='often-func-save-btn'>
+          <Button type={'primary'}>保存</Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(OftenFuncManage)

uas-office-web/uas-mobile/src/pages/private/oftenFunc/often-func.less

@@ -0,0 +1,26 @@
+.often-func-root {
+  .com-column-flex;
+  width: 100%;
+  height: 100vh;
+  overflow: inherit;
+
+  .often-func-header {
+
+  }
+
+  .often-func-all-list {
+    border-top: 4px solid @com-color-divide-gray-line;
+    width: 100%;
+    flex: 1;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .often-func-save-btn {
+    padding: 16px;
+  }
+}

uas-office-web/uas-mobile/src/pages/private/subscribe/SubscribeAlready.jsx

@@ -17,7 +17,7 @@ class SubscribeAlready extends Component {
   }
 
   componentDidMount () {
-    document.title = ''
+
   }
 
   componentWillUnmount () {

uas-office-web/uas-mobile/src/pages/private/subscribe/SubscribeNot.jsx

@@ -19,7 +19,7 @@ class SubscribeNot extends Component {
   }
 
   componentDidMount () {
-    document.title = ''
+
   }
 
   componentWillUnmount () {