:feature: 增加登录设备展示

src/models/terminal.js

@@ -21,6 +21,7 @@ import {
   queryTerminalRecommendCourse,
   updateTerminalRecommendCourse,
   copyMerchantTag,
+  queryTerminalLoggedDevice,
 } from '../services/terminal';
 
 export default {
@@ -35,6 +36,7 @@ export default {
     userTagList: [],
     userRecCourse: [],
     currentUserTagItem: {},
+    currentUserLoggedRecs: [],
   },
 
   effects: {
@@ -269,6 +271,17 @@ export default {
         });
       }
     },
+    *fetchTerminalLoggedDevice({ payload }, { call, put }) {
+      const response = yield call(queryTerminalLoggedDevice, payload);
+      if (response.success) {
+        yield put({
+          type: 'querySuccess',
+          payload: {
+            currentUserLoggedRecs: response.data || [],
+          },
+        });
+      }
+    },
   },
 
   reducers: {

src/routes/Terminal/User/TerminalEdit.js

@@ -1,10 +1,11 @@
 import React, { PureComponent } from 'react';
+import moment from 'moment';
 import { Card, Form, Table, Input, Button, Icon, Switch, message } from 'antd';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
 import FooterToolbar from '../../../components/FooterToolbar';
 import styles from './TerminalCreate.less';
-import { renderStatus, statusToBool, boolToStatus } from '../../../utils/utils';
+import { renderStatus, deviceType, statusToBool, boolToStatus } from '../../../utils/utils';
 
 const fieldLabels = {
   campus: '校区信息',
@@ -39,11 +40,11 @@ function campusDataFormatter(item) {
   } = item;
   return [{
     key: 1,
-    field: '终端编号',
+    field: '账户编号',
     text: code,
   }, {
     key: 2,
-    field: '终端名称',
+    field: '账户名称',
     text: name,
   }, {
     key: 3,
@@ -86,11 +87,19 @@ export default class TerminalEditPage extends PureComponent {
     currentItem: {},
     passwordEdit: false,
   };
-  componentDidMount() {
+  componentWillMount() {
     this.setState({
       currentItem: this.props.location.state.currentItem,
     });
   }
+  componentDidMount() {
+    const { currentItem } = this.state;
+    const { id } = currentItem;
+    this.props.dispatch({
+      type: 'terminal/fetchTerminalLoggedDevice',
+      payload: { uid: id },
+    });
+  }
   checkPassword = (rule, value, callback) => {
     if (value && value !== this.props.form.getFieldValue('password')) {
       callback('两次输入的密码不一致');
@@ -143,7 +152,8 @@ export default class TerminalEditPage extends PureComponent {
   };
 
   render() {
-    const { form, submitting } = this.props;
+    const { form, submitting, terminal } = this.props;
+    const { currentUserLoggedRecs } = terminal;
     const { currentItem, passwordEdit } = this.state;
     const { getFieldDecorator } = form;
     const { name, password, status } = currentItem;
@@ -159,10 +169,39 @@ export default class TerminalEditPage extends PureComponent {
       dataIndex: 'text',
       width: '75%',
     }];
+    const deviceColumns = [{
+      title: '设备名称',
+      dataIndex: 'deviceName',
+      render: text => (text || '-'),
+      width: '20%',
+      align: 'center',
+    }, {
+      title: '设备型号',
+      dataIndex: 'deviceModel',
+      width: '20%',
+      align: 'center',
+    }, {
+      title: '设备类型',
+      dataIndex: 'deviceType',
+      render: text => deviceType[text] || '未知',
+      width: '20%',
+      align: 'center',
+    }, {
+      title: '登录次数',
+      dataIndex: 'num',
+      width: '20%',
+      align: 'center',
+    }, {
+      title: '登录时间',
+      dataIndex: 'gmtCreated',
+      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
+      width: '20%',
+      align: 'center',
+    }];
 
     return (
       <div>
-        <Card title="终端详情" style={{ marginBottom: 16 }}>
+        <Card title="账号详情" style={{ marginBottom: 16 }}>
           <Form>
             <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
               <Table
@@ -177,7 +216,7 @@ export default class TerminalEditPage extends PureComponent {
             </Form.Item>
           </Form>
         </Card>
-        <Card title="修改终端" style={{ marginBottom: 70 }}>
+        <Card title="编辑账户" style={{ marginBottom: 16 }}>
           <Form>
             <Form.Item label={fieldLabels.name} {...formItemLayout}>
               {getFieldDecorator('name', {
@@ -240,6 +279,15 @@ export default class TerminalEditPage extends PureComponent {
             </Form.Item>
           </Form>
         </Card>
+        <Card title="登录设备记录" style={{ marginBottom: 70 }}>
+          <Table
+            pagination={false}
+            rowKey={record => record.id}
+            columns={deviceColumns}
+            dataSource={currentUserLoggedRecs}
+            scroll={{ y: 500 }}
+          />
+        </Card>
         <FooterToolbar style={{ width: '100%' }}>
           <Button
             onClick={this.handlePageBack}

src/services/terminal.js

@@ -239,3 +239,12 @@ export async function updateTerminalRecommendCourse({ uid, idList }) {
   };
   return request(`${api.userRecommend}/${uid}`, options);
 }
+
+/**
+ * 查询用户登录设备记录
+ * @param uid
+ * @returns {Promise<Object>}
+ */
+export async function queryTerminalLoggedDevice({ uid }) {
+  return request(`${api.userDevice}/${uid}`);
+}

src/utils/config.js

@@ -2,6 +2,10 @@
 /********************* 1.项目常量定义 **********************/
 class Hotax {}
 
+// 设备类型
+Hotax.DEVICE_PC = 'COMPUTER';
+Hotax.DEVICE_MOBILE = 'MOBILE';
+
 // 资源类型 <视频|音频|直播|图片>
 Hotax.RESOURCE_VIDEO = 0;
 Hotax.RESOURCE_AUDIO = 1;
@@ -134,6 +138,7 @@ const apiObj = {
   userTag: '/userTag',
   userTagCopy: '/userTag/copy',
   userRecommend: '/user/userRecommend/uid',
+  userDevice: '/userDevice/list',
 };
 
 /**

src/utils/utils.js

@@ -467,6 +467,12 @@ export function getResourceTypeName(type) {
   }
 }
 
+// 设备类型
+const deviceType = {
+  [Hotax.DEVICE_MOBILE]: '移动设备',
+  [Hotax.DEVICE_PC]: 'PC设备',
+};
+
 // 资源类型 - 中文名称map
 const resourceTypes = {
   [Hotax.RESOURCE_AUDIO]: '音频',
@@ -502,4 +508,4 @@ const sortMap = {
   [Hotax.CHARGE_UNIT_HALF_YEAR]: 2,
   [Hotax.CHARGE_UNIT_YEAR]: 3,
 };
-export { resourceTypes, resourceQuality, chargeUnitMap, durationMap, sortMap };
+export { deviceType, resourceTypes, resourceQuality, chargeUnitMap, durationMap, sortMap };