Merge branch 'master' of git://192.168.1.116/bolan-root/frontend/manager-app-sz into wq

package-lock.json

@@ -2463,6 +2463,14 @@
         "warning": "3.0.0"
       }
     },
+    "dva-loading": {
+      "version": "1.0.3",
+      "resolved": "http://registry.npm.taobao.org/dva-loading/download/dva-loading-1.0.3.tgz",
+      "integrity": "sha1-7/qUSW+086OvHhWUEPDtxVrPneg=",
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
     "ecc-jsbn": {
       "version": "0.1.1",
       "resolved": "http://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.1.tgz",
@@ -2966,11 +2974,6 @@
       "resolved": "http://registry.npm.taobao.org/event-target-shim/download/event-target-shim-1.1.1.tgz",
       "integrity": "sha1-qG5e5r2qFgVEddp5fM3fDFVphJE="
     },
-    "events": {
-      "version": "1.1.1",
-      "resolved": "http://registry.npm.taobao.org/events/download/events-1.1.1.tgz",
-      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
-    },
     "exec-sh": {
       "version": "0.2.1",
       "resolved": "http://registry.npm.taobao.org/exec-sh/download/exec-sh-0.2.1.tgz",
@@ -3242,11 +3245,6 @@
         "pinkie-promise": "2.0.1"
       }
     },
-    "fingerprintjs": {
-      "version": "0.5.3",
-      "resolved": "http://registry.npm.taobao.org/fingerprintjs/download/fingerprintjs-0.5.3.tgz",
-      "integrity": "sha1-ACZCL64asQA2keE2wUPhm3UnslU="
-    },
     "flat-cache": {
       "version": "1.3.0",
       "resolved": "http://registry.npm.taobao.org/flat-cache/download/flat-cache-1.3.0.tgz",
@@ -8175,11 +8173,6 @@
       "resolved": "http://registry.npm.taobao.org/time-stamp/download/time-stamp-1.1.0.tgz",
       "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM="
     },
-    "timers": {
-      "version": "0.1.1",
-      "resolved": "http://registry.npm.taobao.org/timers/download/timers-0.1.1.tgz",
-      "integrity": "sha1-hqxceMHuQZaU81pY3k/UGDz7nB4="
-    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "http://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",

package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "antd-mobile": "^2.0.0",
     "dva-core": "^1.1.0",
+    "dva-loading": "^1.0.3",
     "fastjson_ref_resolver": "0.0.3",
     "lodash": "^4.17.4",
     "moment": "^2.19.1",

src/index.js

@@ -6,14 +6,13 @@ import dva from './utils/dva';
 import Router from './router';
 import models from './models';
 import routerModel from './models/router';
+import { processError } from './utils/error';
 
 const app = dva({
   initialState: {},
   models: [...models, routerModel],
   extraEnhancers: [autoRehydrate()],
-  onError(e) {
-    console.log('onError', e);
-  },
+  onError: processError,
 });
 
 const App = app.start(<Router />);

src/models/index.js

 import welcome from './welcome';
 import login from './login';
+import listHouse from './listhouse';
+import houseDetail from './houseDetail';
 
 export default [
   welcome,
   login,
+  listHouse,
+  houseDetail,
 ];

src/models/listhouse.js

+import { connect } from 'react-redux';
+
+export default {
+  namespace: 'ListHouse',
+  state: {
+    sourceData: [],
+  },
+  reducers: {
+    setList(state, { payload: { arrayData } }) {
+      return { ...state, sourceData: [...state.sourceData, ...arrayData] };
+    },
+    // 下拉刷新用到的，清空列表的数据
+    clearList(state) {
+      return { ...state, sourceData: [] };
+    },
+  },
+  effects: {
+    *getHouseList({ payload }, { take, put, call, select }) {
+      if (payload === 'clear') {
+        yield put({ type: 'clearList', payload: {} });
+      }
+      const { sourceData } = yield select(state => state.ListHouse);
+      console.info(sourceData);
+      const size = sourceData.length;
+      const result = yield call('', 'query-DSRFWInfo', 'QueryfwTable', { pst: size, psz: 10 });
+      const { arrayData } = result;
+      for (const row of arrayData) {
+        yield put({ type: 'addHouse', payload: row });
+        yield take('addHouse/@@end');
+      }
+    },
+    *addHouse({ payload }, { put }) {
+      yield put({ type: 'setList', payload: { arrayData: [payload] } });
+    },
+  },
+};

src/routes/main/fwInfo.js

 import React, { Component } from 'react';
-import { Image, StyleSheet, Button } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
+import { Button, SearchBar } from 'antd-mobile';
 import chatsIcon from '../../../image/chats-icon.png';
+import ListHouContent from './houseinfo/listhouse';
+import { createAction } from '../../utils/index';
+
 
 class fwInfo extends Component {
   static navigationOptions = {
+    lazy: true,
     tabBarLabel: '房屋信息',
+    title: '房屋信息',
+    headerRight: <Button />,
     // Note: By default the icon is only shown on iOS. Search the showIcon option below.
-    tabBarIcon: ({ tintColor }) => (
+    tabBarIcon: () => (
       <Image
         source={chatsIcon}
-        style={[styles.icon, { tintColor }]}
+        style={[styles.icon]}
       />
     ),
   };
+  state = {
+    value: '美食',
+  };
 
   render() {
     return (
-      <Button
-        onPress={() => this.props.navigation.navigate('Welcome')}
-        title="Go to notifications"
-      />
+      <View style={{ flex: 1 }}>
+        <SearchBar
+          value={this.state.value}
+          placeholder="搜索"
+          onSubmit={value => console.log(value, 'onSubmit')}
+          onClear={value => console.log(value, 'onClear')}
+          onFocus={() => console.log('onFocus')}
+          onBlur={() => console.log('onBlur')}
+          onCancel={() => console.log('onCancel')}
+          onChange={(value) => {
+            this.setState({
+              value,
+            });
+          }}
+        />
+        <ListHouContent />
+      </View>
     );
   }
 }

src/routes/main/houseinfo/FlatListItem.js

+import React, { PureComponent } from 'react';
+import { TouchableOpacity, Text, View, StyleSheet, Dimensions, Image } from 'react-native';
+
+const totalWidth = Dimensions.get('window').width;
+class FlatListItem extends PureComponent {
+  onPress = () => {
+    this.props.onPressItem(this.props.item[1]);
+  };
+
+  render() {
+    return (
+      <TouchableOpacity
+        {...this.props}
+        style={{ height: 60 }}
+        onPress={this.onPress}
+      >
+        <View style={styles.item}>
+          <View style={styles.width50}>
+            <Text style={{ color: '#1BB7FF', fontSize: 16 }}>{this.props.item[3]}</Text>
+          </View>
+          <View style={styles.nameView}>
+            <Text style={styles.nm}>发布时间：2017/10/27</Text>
+            <Text style={styles.nm1}>点击量：5</Text>
+          </View>
+        </View>
+        <View style={{ marginBottom: 10 }}>
+          <Text style={styles.rightIcon}>dddd</Text>
+          <Image style={styles.rightIcon} source={{ uri: 'right_07' }} />
+        </View>
+
+      </TouchableOpacity>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  row: {
+    height: 60,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  part: {
+    marginLeft: 5,
+    flex: 1,
+  },
+  unColor: {
+    color: '#575656',
+    marginTop: 8,
+    fontSize: 12,
+  },
+  link: {
+    color: '#1BB7FF',
+    marginTop: 2,
+  },
+  ScrollView: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    marginLeft: 10,
+    marginRight: 10,
+    flexDirection: 'column',
+    backgroundColor: 'white',
+  },
+  nm: {
+    color: '#333',
+    fontSize: 12,
+  },
+  nm1: {
+    color: '#333',
+    fontSize: 12,
+    marginLeft: 30,
+  },
+  nameView: {
+    paddingTop: 2,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginLeft: 1,
+  },
+  item: {
+    flex: 1,
+    height: 60,
+    width: totalWidth,
+    padding: 1,
+    borderBottomWidth: 2,
+    borderBottomColor: '#ddd',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  width50: {
+    marginLeft: 1,
+    marginRight: 40,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    backgroundColor: 'white',
+  },
+  rightIcon: {
+    position: 'absolute',
+    right: -2,
+    top: -30,
+    height: 15,
+    width: 15,
+  },
+
+});
+export default FlatListItem;

src/routes/main/houseinfo/HouseDetail.js

+import { calcModuleDatasource } from '../services/datasource';
+
+export default {
+  namespace: 'HouseDetail',
+  state: {
+    sourceData: [],
+  },
+  reducers: {
+    setList(state, { payload: { arrayData } }) {
+      return { ...state, sourceData: [...state.sourceData, ...arrayData] };
+    },
+    // 下拉刷新用到的，清空列表的数据
+    clearList(state) {
+      return { ...state, sourceData: [] };
+    },
+  },
+  effects: {
+    *getHouseList({ payload }, { take, put, call, select }) {
+      if (payload === 'clear') {
+        yield put({ type: 'clearList', payload: {} });
+      }
+      const { sourceData } = yield select(state => state.ListHouse);
+      console.info(sourceData);
+      const size = sourceData.length;
+      const result = yield call(calcModuleDatasource, 'query-DSRFWInfo', 'QueryfwTable', { pst: size, psz: 10 });
+      const { arrayData } = result;
+      for (const row of arrayData) {
+        yield put({ type: 'addHouse', payload: row });
+        yield take('addHouse/@@end');
+      }
+    },
+    *addHouse({ payload }, { put }) {
+      yield put({ type: 'setList', payload: { arrayData: [payload] } });
+    },
+  },
+};

src/routes/main/houseinfo/listhouse.js

+import React, { Component } from 'react';
+import { View, StyleSheet, FlatList, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { createAction } from '../../../utils';
+import FlatListItem from './FlatListItem';
+
+@connect(({ ListHouse, loading }) => ({ ListHouse, loading: !!loading.effects['ListHouse/getHouseList'] }))
+class ListHouContent extends Component {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch(createAction('ListHouse/getHouseList')({ pst: 1, psz: 10 }));
+  }
+
+  // 上拉加载更多
+  onEndReached = () => {
+    // 以下是制造新数据
+    if (!this.props.loading) {
+      this.props.dispatch(createAction('ListHouse/getHouseList')({pst: 11, psz: 10}));
+    }
+  };
+  getItemLayout = (data, index) => (
+    { length: 60, offset: (60 + 1) * index, index }
+  );
+  /**
+   * 使用箭头函数防止不必要的re-render；
+   * 如果使用bind方式来绑定onPressItem，每次都会生成一个新的函数，导致props在===比较时返回false，
+   * 从而触发自身的一次不必要的重新render，也就是FlatListItem组件每次都会重新渲染。
+   *
+   * @param id
+   * @private
+   */
+  _onPressItem = (id: string) => {
+    this.props.dispatch(createAction('ListHouse/setSelected')({ id }));
+  };
+  /**
+   * 此函数用于为给定的item生成一个不重复的Key。
+   * Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。
+   * 若不指定此函数，则默认抽取item.key作为key值。
+   * 若item.key也不存在，则使用数组下标
+   *
+   * @param item
+   * @param index
+   * @private
+   */
+  // 这里指定使用数组下标作为唯一索引
+  keyExtractor = (item, index) => `${item[0]}`;
+
+  // 自定义分割线
+  renderItemSeparatorComponent = ({ highlighted }) => (
+    <View style={{ height: 1, backgroundColor: '#ccc' }}></View>
+  );
+  // Footer布局
+  renderFooter = () => (
+    <View><Text>Footer</Text></View>
+  );
+  // 空布局
+  renderEmptyView = () => (
+    <View><Text>EmptyView</Text></View>
+  );
+  // 下拉刷新
+  renderRefresh = () => {
+    if (!this.props.loading) {
+      this.props.dispatch(createAction('ListHouse/getHouseList')('clear'));
+    }
+  };
+  /**
+   * 使用箭头函数防止不必要的re-render；
+   * 如果使用bind方式来绑定onPressItem，每次都会生成一个新的函数，导致props在===比较时返回false，
+   * 从而触发自身的一次不必要的重新render，也就是FlatListItem组件每次都会重新渲染。
+   *
+   * @param id
+   * @private
+   */
+  renderItem = ({ item }) => {
+    return (
+      <FlatListItem
+        item={item}
+        onPressItem={this.onPressItem}
+      />
+    );
+  };
+
+  render() {
+    return (
+      <FlatList
+        data={this.props.ListHouse.sourceData}
+        keyExtractor={this.keyExtractor}
+        renderItem={this.renderItem}
+        // 决定当距离内容最底部还有多远时触发onEndReached回调；数值范围0~1，例如：0.5表示可见布局的最底端距离content最底端等于可见布局一半高度的时候调用该回调
+        onEndReachedThreshold={0.3}
+        // 当列表被滚动到距离内容最底部不足onEndReacchedThreshold设置的距离时调用
+        onEndReached={this.onEndReached}
+        ListHeaderComponent={this.renderHeader}
+        ListFooterComponent={this.renderFooter}
+        ItemSeparatorComponent={this.renderItemSeparatorComponent}
+        ListEmptyComponent={this.renderEmptyView}
+        refreshing={this.props.loading}
+        onRefresh={this.renderRefresh}
+        // 是一个可选的优化，用于避免动态测量内容，+1是加上分割线的高度
+      />
+
+    );
+  }
+}
+
+export default ListHouContent;

src/routes/main/index.js

 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
-import { TabNavigator } from 'react-navigation';
+import { TabNavigator, TabView } from 'react-navigation';
 import userInfoPageScreen from './userinfopage';
 import fwInfo from './fwInfo';
 
@@ -16,16 +16,23 @@ const Content = TabNavigator({
   animationEnabled: true,
   tabBarOptions: {
     activeTintColor: '#e91e63',
+    inactiveTintColor: 'gray',
+    labelStyle: {
+      fontSize: 12,
+    },
     showIcon: true,
   },
 });
 
 class MainPage extends Component {
   render() {
-    console.log(this.props.navigation);
     return (
       <View style={{ flex: 1 }}>
-        <Text>abc</Text>
+        <View style={{ height: 36, backgroundColor: '#08BBF9', flexDirection: 'row' }}>
+          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text style={{ fontSize: 18, color: 'white', alignSelf: 'center' }}>深圳房屋普查</Text>
+          </View>
+        </View>
         <Content navigation={this.props.navigation} />
       </View>
     );

src/routes/welcome.js

@@ -33,6 +33,7 @@ const styles = StyleSheet.create({
     height: 200,
     resizeMode: 'contain',
   },
-})
+});
+
 
 export default WelcomeScreen;

src/utils/dva.js

 import React from 'react';
 import { create } from 'dva-core';
+import createLoading from 'dva-loading';
 import { Provider, connect } from 'react-redux';
 
 export { connect };
 
 export default function (options) {
   const app = create(options);
+  app.use(createLoading({
+    effects: true,
+  }));
   const { models } = options;
   // noinspection JSUnresolvedVariable
   if (!global.registered) models.forEach(model => app.model(model));

src/utils/index.js

@@ -2,4 +2,4 @@ export { NavigationActions } from 'react-navigation';
 
 export const delay = time => new Promise(resolve => setTimeout(resolve, time));
 
-export const createAction = type => payload => ({ type, payload });
\ No newline at end of file
+export const createAction = type => payload => ({ type, payload });