Merge branch 'leeyeh-master'

leancloud · Aug 3, 2018 · 3f996e4 · 3f996e4
2 parents aa86664 + 218b34f
commit 3f996e4
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 55 deletions.
diff --git a/modules/CustomerServiceTickets.css b/modules/CustomerServiceTickets.css
@@ -1,12 +1,25 @@
-.ticket {
-  padding: 10px 0 15px;
+.row {
+  display: flex;
   border-bottom: 1px solid #eee;
 }
-
-.ticket:last-child {
+.row:last-child {
   border-bottom: none;
 }
 
+.ticket {
+  padding: 10px 0 12px;
+  align-items: center;
+}
+
+
+.ticketSelectCheckbox {
+  line-height: 0;
+}
+
+.ticketContent {
+  flex: 1;
+}
+
 .heading {
   display: flex;
   margin-bottom: 4px;

diff --git a/modules/CustomerServiceTickets.js b/modules/CustomerServiceTickets.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
 import { Link } from 'react-router'
-import {Grid, Row, Col, Form, FormGroup, ButtonToolbar, ButtonGroup, Button, DropdownButton, MenuItem, Checkbox, FormControl, Pager} from 'react-bootstrap'
+import { Form, FormGroup, ButtonToolbar, ButtonGroup, Button, DropdownButton, MenuItem, Checkbox, FormControl, Pager} from 'react-bootstrap'
 import qs from 'query-string'
 import moment from 'moment'
 import AV from 'leancloud-storage/live-query'
@@ -197,11 +197,9 @@ export default class CustomerServiceTickets extends Component {
       const joinedCustomerServices = <span>{customerServices}</span>
       const category = depthFirstSearchFind(this.state.categoriesTree, c => c.id == ticket.get('category').objectId)
       return (
-        <Row className={css.ticket} key={ticket.get('nid')}>
-          <Col md={1}>
-            <Checkbox onClick={this.handleClickCheckbox.bind(this)} value={ticket.id} checked={this.state.checkedTickets.has(ticket.id)}></Checkbox>
-          </Col>
-          <Col md={11}>
+        <div className={`${css.ticket} ${css.row}`} key={ticket.get('nid')}>
+          <Checkbox className={css.ticketSelectCheckbox} onClick={this.handleClickCheckbox.bind(this)} value={ticket.id} checked={this.state.checkedTickets.has(ticket.id)}></Checkbox>
+          <div className={css.ticketContent}>
             <div className={css.heading}>
               <div className={css.left}>
                 <Link className={css.title} to={'/tickets/' + ticket.get('nid')}>{ticket.get('title')}</Link>
@@ -236,8 +234,8 @@ export default class CustomerServiceTickets extends Component {
                 <span className={css.contributors}>{joinedCustomerServices}</span>
               </div>
             </div>
-          </Col>
-        </Row>
+          </div>
+        </div>
       )
     })
 
@@ -337,30 +335,35 @@ export default class CustomerServiceTickets extends Component {
 
     if (ticketTrs.length === 0) {
       ticketTrs.push(
-        <Row key='0'>
+        <div className={css.ticket} key='0'>
           未查询到相关工单
-        </Row>
+        </div>
       )
     }
+
+    let pager
+    const isFirstPage = filters.page === '0'
+    const isLastPage = parseInt(filters.size) !== this.state.tickets.length
+    if (!(isFirstPage && isLastPage)) {
+      pager = (
+        <Pager>
+          <Pager.Item disabled={isFirstPage} previous onClick={() => this.updateFilter({page: (parseInt(filters.page) - 1) + ''})}>&larr; 上一页</Pager.Item>
+          <Pager.Item disabled={isLastPage} next onClick={() => this.updateFilter({page: (parseInt(filters.page) + 1) + ''})}>下一页 &rarr;</Pager.Item>
+        </Pager>
+      )
+    }
+
     return (
-      <Grid>
+      <div>
         <DocumentTitle title='客服工单列表 - LeanTicket' />
-        <Row>
-          <Col md={1}>
-            <Checkbox onClick={this.handleClickCheckAll.bind(this)} checked={this.state.isCheckedAll}></Checkbox>
-          </Col>
-          <Col>
-            {this.state.checkedTickets.size && ticketCheckedOperations || ticketAdminFilters}
-          </Col>
-        </Row>
+        <div className={css.row}>
+          <Checkbox className={css.ticketSelectCheckbox} onClick={this.handleClickCheckAll.bind(this)} checked={this.state.isCheckedAll}></Checkbox>
+          {this.state.checkedTickets.size && ticketCheckedOperations || ticketAdminFilters}
+        </div>
 
         {ticketTrs}
-
-        <Pager>
-          <Pager.Item disabled={filters.page === '0'} previous onClick={() => this.updateFilter({page: (parseInt(filters.page) - 1) + ''})}>&larr; 上一页</Pager.Item>
-          <Pager.Item disabled={parseInt(filters.size) !== this.state.tickets.length} next onClick={() => this.updateFilter({page: (parseInt(filters.page) + 1) + ''})}>下一页 &rarr;</Pager.Item>
-        </Pager>
-      </Grid>
+        {pager}
+      </div>
     )
   }
 

diff --git a/modules/Tickets.js b/modules/Tickets.js
@@ -60,34 +60,36 @@ export default class Tickets extends Component {
       })
       const joinedCustomerServices = <span>{customerServices}</span>
       return (
-        <div className={css.ticket} key={ticket.get('nid')}>
-          <div className={css.heading}>
-            <div className={css.left}>
-              <span className={css.nid}>#{ticket.get('nid')}</span>
-              <Link className={css.title} to={'/tickets/' + ticket.get('nid')}>{ticket.get('title')}</Link>
-              <span className={css.category}>{getCategoryPathName(ticket.get('category'), this.state.categoriesTree)}</span>
+        <div className={`${css.ticket} ${css.row}`} key={ticket.get('nid')}>
+          <div className={css.ticketContent}>
+            <div className={css.heading}>
+              <div className={css.left}>
+                <span className={css.nid}>#{ticket.get('nid')}</span>
+                <Link className={css.title} to={'/tickets/' + ticket.get('nid')}>{ticket.get('title')}</Link>
+                <span className={css.category}>{getCategoryPathName(ticket.get('category'), this.state.categoriesTree)}</span>
+              </div>
+              <div className={css.right}>
+                {ticket.get('replyCount') &&
+                  <Link className={css.commentCounter} title={'reply ' + ticket.get('replyCount')} to={'/tickets/' + ticket.get('nid')}>
+                    <span className={css.commentCounterIcon + ' glyphicon glyphicon-comment'}></span>
+                    {ticket.get('replyCount')}
+                  </Link>
+                }
+              </div>
             </div>
-            <div className={css.right}>
-              {ticket.get('replyCount') &&
-                <Link className={css.commentCounter} title={'reply ' + ticket.get('replyCount')} to={'/tickets/' + ticket.get('nid')}>
-                  <span className={css.commentCounterIcon + ' glyphicon glyphicon-comment'}></span>
-                  {ticket.get('replyCount')}
-                </Link>
-              }
-            </div>
-          </div>
 
-          <div className={css.meta}>
-            <div className={css.left}>
-              <span className={css.status}><TicketStatusLabel status={ticket.get('status')} /></span>
-              <span className={css.creator}><UserLabel user={ticket.get('author')} /></span> 创建于 {moment(ticket.get('createdAt')).fromNow()}
-              {moment(ticket.get('createdAt')).fromNow() === moment(ticket.get('updatedAt')).fromNow() ||
-                <span>，更新于 {moment(ticket.get('updatedAt')).fromNow()}</span>
-              }
-            </div>
-            <div className={css.right}>
-              <span className={css.assignee}><UserLabel user={ticket.get('assignee')} /></span>
-              <span className={css.contributors}>{joinedCustomerServices}</span>
+            <div className={css.meta}>
+              <div className={css.left}>
+                <span className={css.status}><TicketStatusLabel status={ticket.get('status')} /></span>
+                <span className={css.creator}><UserLabel user={ticket.get('author')} /></span> 创建于 {moment(ticket.get('createdAt')).fromNow()}
+                {moment(ticket.get('createdAt')).fromNow() === moment(ticket.get('updatedAt')).fromNow() ||
+                  <span>，更新于 {moment(ticket.get('updatedAt')).fromNow()}</span>
+                }
+              </div>
+              <div className={css.right}>
+                <span className={css.assignee}><UserLabel user={ticket.get('assignee')} /></span>
+                <span className={css.contributors}>{joinedCustomerServices}</span>
+              </div>
             </div>
           </div>
         </div>