react mobx状态管理

最新推荐文章于 2023-06-08 11:16:24 发布
最新推荐文章于 2023-06-08 11:16:24 发布
阅读量200 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21138747/article/details/111243304
版权 
//list.js
const { Button } = WeaverMobile;
const { TabBar, Icon,Tabs, WhiteSpace, Badge ,Accordion, List} = WeaverMobile;
const { Provider,inject,observer } = mobxReact;
const { NavBar } = WeaverMobile;
const { Carousel, WingBlank } = WeaverMobile;
const {toJS} = mobx;

const tabs2 = [
  { title: 'First Tab1221', sub: '1' },
  { title: 'Second Tab', sub: '2' },
  { title: 'Third Tab', sub: '3' },
];
//react组件层，用来定义视图和交互
//inject获取baseFormStore到组件props中
//observer来支持集成mobx
@inject("homeStore")
@observer
class ListComponent extends React.Component {
  constructor(props) { //初始化，固定语法
    super(props);
      this.state = {
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: false,

      data: ['1', '2', '3'],
      imgHeight: 130,
    };
  }
  componentDidMount() {
    // console.log('componentDidMount()')
    const { homeStore }=this.props;

      // window.onload = function(){
      //   var box=document.getElementById("test");
      //     if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
      //       console.log(box.offsetHeight)
      //       if(box.offsetHeight > 75){//超过3行
      //         homeStore.setScaleCollpased(true) ;
      //         homeStore.setsSaleNeedCollpased(true) ;
      //       }
      //     }
      // }

  }

  componentDidUpadte(){
    // console.log('componentDidUpadte()')
  }

  componentWillMount(){ 
    if(Tools.mobileDetect().is('iPhone')&&window.iNoBounce&&window.iNoBounce.isEnabled()){ 
      window.iNoBounce.disable(); 
    } 
    // console.log('componentWillMount()')
  } 

  componentWillUnmount() { 
    if(Tools.mobileDetect().is('iPhone')&&window.iNoBounce&&window.iNoBounce.isEnabled()){ 
      window.iNoBounce.enable(); 
    } 
  }


  onChange = (key) => {
    // console.log(key);
  }

  scaleExpand = () =>{
    const { homeStore } = this.props; //获取store
    const {scaleCollpased} = homeStore;
    
    homeStore.setScaleCollpased(!scaleCollpased) ;

  }

  scaleSpan = () =>{
    const { homeStore } = this.props; //获取store
    let {previousInfo, scaleCollpased, scaleNeedCollpased} = homeStore;
    // console.log('scaleCollpased:' + scaleCollpased +', scaleNeedCollpased:' + scaleNeedCollpased);
    // console.log(previousInfo.scale);
 
    let _scale = '';
    if(previousInfo.scale != undefined && previousInfo.scale.length > 45 && scaleNeedCollpased == false){
      // console.log(previousInfo.scale.length);
      homeStore.setScaleCollpased(true) ;
      homeStore.setsSaleNeedCollpased(true);
          // console.log('111111111')
    }

    if(previousInfo.scale != undefined && previousInfo.scale == ''){
      scaleCollpased = false;
      scaleNeedCollpased = false;
    }
    // else{
    //   homeStore.setScaleCollpased(false) ;
    //   homeStore.setsSaleNeedCollpased(false);
    //       console.log('222222222222222222222')
    // }

    if(scaleCollpased){
      _scale = previousInfo.scale.substring(0,45) + '...'
    }else{
      _scale = previousInfo.scale
    }

    // console.log(_scale)

    

    // var box=document.getElementById("test");
    // if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
    //   console.log(box.offsetHeight)
    //     if(box.offsetHeight > 75){//超过3行
    //     homeStore.setScaleCollpased(true) ;
    //     homeStore.setsSaleNeedCollpased(true) ;
    //   }
    // }

    

      return(
        <div><span  className='left-span'>建设规模</span>
          <span ref = {() => {}} className='right-span'>{_scale}<span onClick={this.scaleExpand} style={{display:scaleNeedCollpased?'block':'none',color:'#036DD7'}}>{scaleCollpased?'展开':'收起'}</span></span>
        </div>
      )

    


  }


  render() { //渲染
    const { homeStore } = this.props; //获取store
    const { hidden } = this.state; //获取store
    const {previousInfo} = homeStore;
    if(previousInfo == undefined || previousInfo == null){
      return alert('没有数据');
    }

    let telInfo = 'tel:'+ previousInfo.contactMobile;
    let leadTelInfo = 'tel:'+ previousInfo.leaderMobile;
    // console.log(telInfo)


    //    console.log('render()')
     return (
       
      <div>
       <div>
       <div>
                <Accordion openAnimation={{}} defaultActiveKey={['1','2']} className="my-accordion" onChange={this.onChange}>
                  <Accordion.Panel className="panel"  header="项目基本信息" key={'1'}>
                    <List className="my-list">
                      <List.Item>
                        <div><span className='left-span'>项目名称</span><span  className='right-span'>{previousInfo.projectName}</span></div>
                      </List.Item>
                      <List.Item multipleLine wrap>
                         {/**<div><span  className='left-span'>建设规模</span><span id='test' ref = {() => { console.log('*********')}} className='right-span'>{previousInfo.scale}</span></div> */}
                         {this.scaleSpan()}
                      </List.Item>
                       <List.Item>
                        <div><span className='left-span'>总投资</span><span  className='right-span'>{(Number(previousInfo.planTotalFund)/10000).toFixed(2)}亿元</span></div>
                      </List.Item>
                      <List.Item>
                        <div><span className='left-span'>计划年份</span><span  className='right-span'>{previousInfo.planStartYear}</span></div>
                      </List.Item>
                    </List>
                  </Accordion.Panel>
                  <Accordion.Panel className="panel"  header="责任单位" key={'2'}>
                    <List className="my-list">
                      <List.Item>
                        <div><span className='left-span'>单位名称</span><span  className='right-span'>{previousInfo.unitName}</span></div>
                      </List.Item>
                      <List.Item>
                         <div><span className='left-span'>责任领导</span><span  className='right-span'>{previousInfo.leader}</span></div>
                      </List.Item>
                       <List.Item>
                        <div><span className='left-span'>责任领导电话</span><span  className='right-span tel-num'><img src="${appRes}/tel-icon.png"/>{previousInfo.leaderMobile}<a style={{display:(previousInfo.leaderMobile == '' || previousInfo.leaderMobile == 'undefined')?'none':''}} href={leadTelInfo}>点击拨号 ></a></span></div>
                      </List.Item>
                       <List.Item>
                        <div><span className='left-span'>联系人</span><span  className='right-span'>{previousInfo.contacts}</span></div>
                      </List.Item>
                       <List.Item>
                        <div>
                          <span className='left-span'>联系人电话</span><span  className='right-span tel-num'><img src="${appRes}/tel-icon.png"/>{previousInfo.contactMobile}<a style={{display:(previousInfo.contactMobile == '' || previousInfo.contactMobile == 'undefined')?'none':''}} href={telInfo}>点击拨号 ></a></span>
                        </div>
                      </List.Item>
                    </List>
                  </Accordion.Panel>
                </Accordion>
        </div>
       </div>
      </div>

     )
  }
}

ecodeSDK.exp(ListComponent);


//mobx store状态管理

const {observable,action} = mobx;
const { RouteLayout } = WeaverMobilePage;
class HomeStore { //store层，用来定义和处理前端纯数据
  @observable previousInfo = {};
  @observable progressInfo = {};
  @observable projectId = 'test0000001';
  @observable scaleCollpased = false;//建设规模是否收起
  @observable scaleNeedCollpased = false;//建设规模是否收起
  @observable oneWordCollpased = false;//建设规模是否收起
  @observable oneWordNeedCollpased = false;//建设规模是否收起
  @observable preProgress = [];//建设规模是否收起

  @action
  getPreviousInfo = (param) => {
    // console.log('getPreviousInfo');
    API.getPreviousInfo(param).then(action(res => {
      // console.log('getPreviousInfo');
      if (res.api_status) { // 接口请求成功/失败处理
        this.scaleCollpased = false; //初始化
        this.scaleNeedCollpased = false;//初始化
        this.previousInfo = res.data;
      } else {
        message.error(res.msg || 'getPreviousInfo 接口调用失败！')
      }
    }));
  }

  @action
  getProgress = (param) => {
    // console.log('getProgress');
    API.getProgress(param).then(action(res => {
      // console.log('getProgress');
      if (res.api_status) { // 接口请求成功/失败处理
        this.oneWordCollpased = false;
        this.oneWordNeedCollpased = false;
        this.progressInfo = res.data;
      } else {
        message.error(res.msg || 'getProgress 接口调用失败！')
      }
    }));
  }

  @action
  getPreProgress = (param) => {
    API.preProgress(param).then(action(res => {
      if (res.api_status) {//preProgress
        let rdd = res.data;
        var table = [];
        if(rdd == undefined) {
          this.preProgress = [];
          return;
        }
        table.push({name:"红线用地(亩)",pre:rdd.preHxyd,act:rdd.actHxyd,rate:rdd.hxydRate});
        table.push({name:"大临用地(亩)",pre:rdd.preDlyd,act:rdd.actDlyd,rate:rdd.dlydRate});
        table.push({name:"民房拆迁(㎡)",pre:rdd.preMfcq,act:rdd.actMfcq,rate:rdd.mfcqRate});
        table.push({name:"厂房拆迁(㎡)",pre:rdd.preCfcq,act:rdd.actCfcq,rate:rdd.cfcqRate});
        table.push({name:"坟墓迁移(处)",pre:rdd.preFmcq,act:rdd.actFmcq,rate:rdd.fmcqRate});
        table.push({name:"110KV及以上电力迁改(处)",pre:rdd.preDlqg,act:rdd.actDlqg,rate:rdd.dlqgRate});
        table.push({name:"通讯线路迁改(处)",pre:rdd.preTxxl,act:rdd.actTxxl,rate:rdd.txxlRate});
        table.push({name:"给排水管线迁改(处)",pre:rdd.preGpsg,act:rdd.actGpsg,rate:rdd.gpsgRate});
        table.push({name:"油气管线迁改(处)",pre:rdd.preYqgx,act:rdd.actYqgx,rate:rdd.yqgxRate});
        this.preProgress = table;
      } else {
        message.error(res.msg || 'preProgress 接口调用失败！')
      }
    }));
  }

  @action
  setProjectId = (param) => {
    this.projectId = param;
  }

  @action
  setScaleCollpased = (param) => {
    this.scaleCollpased = param;
  }  
  
  @action
  setsSaleNeedCollpased = (param) => {
    this.scaleNeedCollpased = param;
  }

  @action
  setOneWordCollpased = (param) => {
    this.oneWordCollpased = param;
  }  
  
  @action
  setOneWordNeedCollpased = (param) => {
    this.oneWordNeedCollpased = param;
  }
}
ecodeSDK.exp(HomeStore);






//api.js接口封装

const { Tools } = WeaverMobile;
ecodeSDK.imp(ThreeBattleMobileAjax)

const getPreviousInfo = params => {
    options={
    url:'/api/detail/getPreviousInfo',
    method:'GET',
    params
  }  
  return ThreeBattleMobileAjax.callApi(options);
};

const getProgress = params => {
    options={
    url:'/api/detail/getProgress',
    method:'GET',
    params
  }  
  return ThreeBattleMobileAjax.callApi(options);
};
const preProgress = params => {
    options={
    url:'/api/projectItem/preProgress',
    method:'GET',
    params
  }  
  return ThreeBattleMobileAjax.callApi(options);
};

const API = {
  getPreviousInfo,
  getProgress,
  preProgress
}


ecodeSDK.exp(API);


//ajax.js请求
const server = 'https://mobile.cncico.com:9453'
// const server = 'http://10.100.218.8'
var fetchOld = window.fetch;
var fetchnew = function (options){
  let userId = localStorage.getItem("userId");
  let loginId = localStorage.getItem("loginId");
  // options.headers = options.headers
  if(options.method == 'GET'){
    // return fetchOld(server + options.url + jasonToString(options.params),{
    //   method: 'get',
    //   headers: {
    //     'userId':userId
    //   }
    // })
    return new Promise((resolve, reject) => {
      if (window.XMLHttpRequest)
      {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr=new XMLHttpRequest();
      }
      else
      {
        // IE6, IE5 浏览器执行代码
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      xhr.onload = () => {
          if(xhr.readyState==4 && xhr.status==200){
            resolve(xhr.response);
          }
        };
             
            xhr.open('GET', server + options.url + jasonToString(options.params), false);
            xhr.setRequestHeader('userId', userId);// 设置content-type
            // xhr.setRequestHeader('userPhone', loginId);// 设置content-type
            // xhr.setRequestHeader('userPhone', 13505711755);

            xhr.send();
        });
  }else{
    return fetchOld(server + options.url,{
      method: 'post',
      headers: {
        'userId':userId
      },
      body:options.params
    })
  }

}

//jason格式转化为?key=value&格式的字符串
var jasonToString = function(params){
  let str = '';
  if(params){
    str = '?'
  }else{
    return '';
  }
  for(var param in params){
    str = str + param + '=' + params[param] + '&';
  }
  return str;
}

callApi = (options) =>{
  return fetchnew(options).then(res=>{
        return JSON.parse(res);
      
    })
}


const ThreeBattleMobileAjax = {
  callApi
}

ecodeSDK.exp(ThreeBattleMobileAjax);
qq_21138747
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
e-cology Ecode实现给浏览按钮赋默认值
滕青山博客
03-28 367
期间遇到问题：已经修改了value和replaceDatas，但是点了提交还是会显示未填写，换成使用onChange方法即可解决。如果不知道浏览按钮选中的replaceDatas具体是什么，可以在console控制台copy object来复制对象。e-cology Ecode实现浏览按钮默认值。
泛微OA 浮点数数据类型更新说明
07-14
可用于生产环境,直接按文档操作修改数据库表类型 十分安全 方便
E9:知识文档页面多附件自由拖动排序（ECODE)
qq_34975043的博客
11-21 428
ECODE知识文档页面多附件自由拖动排序
React使用MobX作为全局状态管理
小火车况且况且况且的博客
07-19 875
`React`使用`MobX`作为全局状态管理
泛微Ecology9.0流程二开演示：使用Ecode对流程浏览框进行赋值
svsou的专栏
06-08 2884
创建请假流程时，明细字段部门通过Ecode代码进行赋值，部门字段属性支持只读属性。
【泛微 weaver E9 前端梳理】
qq_46202995的博客
12-19 4079
weaver E9 前端梳理
mobx react状态管理 1
qq_56042698的博客
02-10 101
mobx react 状态管理 redux
用 Mobx 实现 React 应用的状态管理
梅花寺
02-28 926
将 MobX 与 React 结合在一起的关键在于用 observer 包裹组件以及在组件中读取可观察对象，observer 不关心可观察对象从哪里来，也不关心如何读取可观察对象，只关心在组件中可观察对象是否可读。对于习惯面向对象编程的工程师而言，用 MobX 做状态管理会比用 Redux 做状态管理更得心应手。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
泛微协同办公e-cology9.0的Ecode二次开发实例说明
热门推荐
weixin_44439208的博客
03-09 1万+
泛微e-cology 9.0的ecode核心是解决EC所有界面无侵入定制和扩展二次开发，采用动态注册，不直接修改源码的方案解决开发需求。除了新开发页面的之外，它还支持标准页面的修改。 ecode包含了整套前端编辑器、编译器，可以让用户无需搭建开发环境直接通过浏览器开始single page前端开发，同时采用ecode开发的内容 都是插件化，支持一键共享、复用、二次封装。 基于泛微e-co...
泛微E9 OA ecode 拦截按钮请求添加二开处理逻辑
RG4KJzjG6h)e
12-31 2445
泛微E9 ecode 拦截按钮请求添加二开处理逻辑
react-mobx:react状态管理之mobx
05-02
react状态管理之mobx 将所有需要公共管理的状态纳入容器类。 添加修饰@observable，被观察者。 需要改变状态的组件添加修饰@observer，观察者。 在组件中监听@action。 在任何组件内部都能访问这个容器类，并改变其...
react-mobx typescript 状态管理
03-26
用vite搭建一个 react 、mobx、typescript、 状态管理模块 版本 "antd": "^4.17.4", "mobx-react": "^7.2.1", "mobx-state-tree": "^5.1.0", "react-router-dom": "^6.2.1", "typescript": "^4.4.4", "vite": ...
mobx-react-form：React性MobX表单状态管理
02-05
React式MobX表单状态管理 产品特点 可扩展验证插件。 同步和异步验证（带有承诺和自动错误）。 嵌套字段（带有序列化和验证）。 嵌套表格（带有嵌套提交和验证挂钩）。 事件挂钩，事件处理程序和验证挂钩 观察者...
react-揭秘React状态管理
08-14
React 是 Facebook 提出的前端框架，作为 View 层很好地解决了视图层渲染问题，但是却缺乏有效的状态管理，在构建大型的前端应用就会显得十分乏力时，需要有一个良好的状态管理，如：Flux，Redux，Mobx 等等.
mobx-react-router:使MobX状态与react-router保持同步
04-22
通过RouterStore使MobX状态与react-router保持同步。 路由器的位置状态是可观察到的，因此在MobX组件中对其进行的任何引用都会在位置更改时使组件重新呈现。 非常受启发（并复制自） 。 该分支（主节点）与react-...
通信电源蓄电池组容量性充放电试验三措一案.docx
04-27
5G通信行业、网络优化、通信工程建设资料。
铁塔维护检测手段.docx
04-27
5G通信行业、网络优化、通信工程建设资料
通信设备安装施工组织方案.doc
04-27
5G通信、网络优化与通信建设
299-教育行业信息化与数据平台建设分享.pptx
最新发布
04-27
299-教育行业信息化与数据平台建设分享.pptx
react MobX
09-16
MobX提供了简单且可扩展的状态管理机制，当应用状态更新时，任何与应用状态相关的内容将自动更新。 通过React和MobX的组合，React负责将应用状态转换为可渲染的组件树并进行渲染，而MobX提供了存储和更新应用状态的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值