:art: 权限列表样式调整

src/common/menu.js

@@ -135,11 +135,11 @@ const menuData = () => {
       name: '终端用户',
       path: 'user',
     }, {
+      name: '权限列表',
+      path: 'auth',
+    }, {
       name: '白名单',
       path: 'whitelist',
-    }, {
-      name: '用户权限',
-      path: 'resource',
     }],
     authority: ['admin', 'platform', 'channel'],
   }, {

src/common/router.js

@@ -182,11 +182,11 @@ export const getRouterData = (app) => {
     '/terminal/whitelist/edit/:id': {
       component: dynamicWrapper(app, ['terminal'], () => import('../routes/Terminal/WhiteList/WhiteListCreate')),
     },
-    '/terminal/resource': {
-      component: dynamicWrapper(app, ['terminal'], () => import('../routes/Terminal/Resource')),
+    '/terminal/auth': {
+      component: dynamicWrapper(app, ['terminal'], () => import('../routes/Terminal/Auth')),
     },
-    '/terminal/resource/list': {
-      component: dynamicWrapper(app, ['terminal'], () => import('../routes/Terminal/Resource/ResourceList')),
+    '/terminal/auth/list': {
+      component: dynamicWrapper(app, ['terminal'], () => import('../routes/Terminal/Auth/AuthList')),
     },
     // 产品管理相关路由注册
     '/product/courseware': {

src/models/terminal.js

@@ -11,7 +11,7 @@ import {
   createSpecialTerminalItem,
   updateSpecialTerminalItem,
   deleteSpecialTerminalItem,
-  queryTerminalResourceList,
+  queryTerminalAuthList,
 } from '../services/terminal';
 
 export default {
@@ -145,8 +145,8 @@ export default {
         });
       }
     },
-    *fetchTerminalResourceList({ payload }, { call, put }) {
-      const response = yield call(queryTerminalResourceList, payload);
+    *fetchTerminalAuthList({ payload }, { call, put }) {
+      const response = yield call(queryTerminalAuthList, payload);
       if (response.success) {
         yield put({
           type: 'querySuccess',
@@ -183,6 +183,9 @@ export default {
         ...state,
         currentItem: {},
         list: [],
+        pageNo: 1,
+        pageSize: 15,
+        totalSize: 0,
       };
     },
   },

src/routes/Terminal/Resource/ResourceList.js

@@ -2,18 +2,22 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
-import { Card, message } from 'antd';
+import { Card, Badge, message } from 'antd';
 import { StandardTableList } from '../../../components/AXList';
-import { addRowKey, renderStatus } from '../../../utils/utils';
+import Ellipsis from '../../../components/Ellipsis';
+import { addRowKey } from '../../../utils/utils';
+import styles from './AuthList.less';
 
 const Message = message;
 
+const timestamp2Str = ts => moment(ts).format('YYYY-MM-DD HH:mm:ss');
+
 @connect(({ terminal, loading }) => ({
   terminal,
   loading: loading.models.terminal,
 }))
 
-export default class TerminalResourceListPage extends Component {
+export default class TerminalAuthListPage extends Component {
   constructor(props) {
     super(props);
     const { state } = props.location;
@@ -22,25 +26,30 @@ export default class TerminalResourceListPage extends Component {
       Queryers: (state || {}).Queryers, // 查询的条件参数
     };
   }
+  componentWillMount() {
+    this.props.dispatch({
+      type: 'terminal/cleanState',
+    });
+  }
   componentDidMount() {
     this.props.dispatch({
-      type: 'terminal/fetchTerminalResourceList',
+      type: 'terminal/fetchTerminalAuthList',
       payload: { ...this.state.Queryers },
     });
   }
   handleFilterOperation = (params, states) => {
     this.props.dispatch({
-      type: 'terminal/fetchTerminalResourceList',
+      type: 'terminal/fetchTerminalAuthList',
       payload: params,
     });
     this.setState({
       UIParams: states,
       Queryers: params,
     });
-  }
+  };
   handleBatchOperation = () => {
     Message.info('暂不支持批量操作!');
-  }
+  };
   render() {
     const { terminal, loading } = this.props;
     const { pageNo, pageSize, totalSize, list } = terminal;
@@ -63,46 +72,60 @@ export default class TerminalResourceListPage extends Component {
       title: '终端编号',
       key: 1,
       dataIndex: 'ucode',
-      width: '12%',
+      width: '15%',
+      render: text => (
+        <Ellipsis tooltip lines={1}>{text}</Ellipsis>
+      ),
     }, {
-      title: '终端名称',
+      title: '产品编号',
       key: 2,
-      dataIndex: 'uname',
-      width: '12%',
+      dataIndex: 'pcode',
+      width: '15%',
+      render: text => (
+        <Ellipsis tooltip lines={1}>{text}</Ellipsis>
+      ),
     }, {
       title: '产品名称',
       key: 3,
       dataIndex: 'pname',
-      width: '22%',
+      width: '18%',
+      render: text => (
+        <Ellipsis tooltip lines={1}>{text}</Ellipsis>
+      ),
     }, {
-      title: '产品编号',
+      title: '权限有效期',
       key: 4,
-      dataIndex: 'pcode',
-      width: '14%',
+      render: (_, record) => {
+        const {startTime, endTime} = record;
+        return (
+          <div className={styles.authDesc}>
+            <p><span>起始时间:&nbsp;&nbsp;</span>{`${timestamp2Str(startTime)}`}</p>
+            <p><span>到期时间:&nbsp;&nbsp;</span>{`${timestamp2Str(endTime)}`}</p>
+          </div>
+        );
+      },
+      width: '25%',
+      align: 'center',
     }, {
-      title: '开始时间',
+      title: '权限有效时长',
       key: 5,
-      dataIndex: 'startTime',
-      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
-      width: '10%',
-    }, {
-      title: '终止时间',
-      key: 6,
-      dataIndex: 'startTime',
-      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
-      width: '10%',
+      dataIndex: 'endTime',
+      render: (text) => {
+        const day = moment(text).diff(moment(), 'days');
+        if (day < 0) {
+          return <Badge status="error" text="已到期" />;
+        }
+        return <span><span style={{ color: '#52c41a', fontWeight: 'bold' }}>{day}</span>天到期</span>;
+      },
+      width: '12%',
+      align: 'center',
     }, {
       title: '修改时间',
-      key: 7,
+      key: 6,
       dataIndex: 'updateTime',
-      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
-      width: '10%',
-    }, {
-      title: '状态',
-      dataIndex: 'status',
-      key: 8,
-      render: text => renderStatus(text),
-      width: '10%',
+      render: text => timestamp2Str(text),
+      width: '15%',
+      align: 'center',
     }];
     return (
       <Card>
@@ -120,6 +143,7 @@ export default class TerminalResourceListPage extends Component {
             onBatchClick: this.handleBatchOperation,
           }}
           keepUIState={{ ...this.state.UIParams }}
+          showStatusSelect={false}
         />
       </Card>
     );

src/routes/Terminal/Auth/AuthList.less

@@ -0,0 +1,10 @@
+@import "../../../../node_modules/antd/lib/style/themes/default.less";
+
+.authDesc {
+  p {
+    margin-bottom: unset !important;
+  }
+  & > p > span {
+    font-weight: bold;
+  }
+}

src/routes/Terminal/Resource/index.js

@@ -24,7 +24,7 @@ export default class Index extends Component {
               )
             )
           }
-          <Redirect exact from="/terminal/resource" to="/terminal/resource/list" />
+          <Redirect exact from="/terminal/auth" to="/terminal/auth/list" />
         </Switch>
       </PageHeaderLayout>
     );

src/routes/Terminal/User/TerminalList.js

@@ -53,6 +53,11 @@ export default class TerminalListPage extends Component {
       filterModalDestroy: true,
     };
   }
+  componentWillMount() {
+    this.props.dispatch({
+      type: 'terminal/cleanState',
+    });
+  }
   componentDidMount() {
     const { merchants, campuses } = this.state;
     let merchantId;

src/routes/Terminal/WhiteList/WhiteList.js

@@ -22,6 +22,11 @@ export default class WhiteListPage extends Component {
       Queryers: (state || {}).Queryers, // 查询的条件参数
     };
   }
+  componentWillMount() {
+    this.props.dispatch({
+      type: 'terminal/cleanState',
+    });
+  }
   componentDidMount() {
     this.props.dispatch({
       type: 'terminal/fetchSpecialTerminalList',
@@ -33,7 +38,7 @@ export default class WhiteListPage extends Component {
       pathname: '/terminal/whitelist/create',
       state: this.state,
     }));
-  }
+  };
   handleDeleteOperation = (item) => {
     Modal.confirm({
       okText: '确定',
@@ -48,7 +53,7 @@ export default class WhiteListPage extends Component {
         });
       },
     });
-  }
+  };
   handleEditOperation = (item) => {
     this.props.dispatch(routerRedux.push({
       pathname: `/terminal/whitelist/edit/${item.userId}`,
@@ -57,7 +62,7 @@ export default class WhiteListPage extends Component {
         ...this.state,
       },
     }));
-  }
+  };
   handleFilterOperation = (params, states) => {
     this.props.dispatch({
       type: 'terminal/fetchSpecialTerminalList',
@@ -67,10 +72,10 @@ export default class WhiteListPage extends Component {
       UIParams: states,
       Queryers: params,
     });
-  }
+  };
   handleBatchOperation = () => {
     Message.info('暂不支持批量操作!');
-  }
+  };
 
   render() {
     const { loading, terminal } = this.props;

src/services/terminal.js

@@ -76,10 +76,10 @@ export async function deviceUnbound({ id }) {
   return request(`${api.terminalUnbound}/${id}`, options);
 }
 
-export async function queryTerminalResourceList(params) {
+export async function queryTerminalAuthList(params) {
   const newParams = {
     pageSize: Hotax.PAGE_SIZE,
     ...params,
   };
-  return request(`${api.terminalResourceList}?${stringify(newParams)}`);
+  return request(`${api.terminalAuth}?${stringify(newParams)}`);
 }

src/utils/config.js

@@ -101,7 +101,7 @@ const apiObj = {
   terminal: '/user/list',
   terminalItem: '/user',
   terminalUnbound: '/device/unbind',
-  terminalResourceList: '/user/auth/list',
+  terminalAuth: '/user/auth/list',
   specialTerminal: '/white/user/list',
   specialTerminalItem: '/white/user',
   cmsUser: '/cms/user/list',