add search bar in ticketlist with service

src/pages/TicketList/TicketList.tsx

@@ -1,12 +1,12 @@
 import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
-import { AtList, AtPagination } from 'taro-ui';
+import { AtList, AtPagination, AtSearchBar } from 'taro-ui';
 import Taro from '@tarojs/taro';
 import moment from 'moment';
 import pt from '@/plain-text';
 import PageFooter from '@/components/PageFooter/PageFooter';
 import { RequestState } from '@/service';
-import { getTicketList } from '@/service/ticketList';
+import { getTicketList, searchTicketList } from '@/service/ticketList';
 import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
 import './TicketList.scss';
 
@@ -16,6 +16,7 @@ interface TicketListState {
   currentPage: number;
   totalPage: number;
   pageSize: number;
+  search: string;
 }
 
 export default class TicketListPage extends Component<{}, TicketListState> {
@@ -25,6 +26,7 @@ export default class TicketListPage extends Component<{}, TicketListState> {
     currentPage: 1,
     totalPage: 1,
     pageSize: 8,
+    search: '',
   };
 
   componentDidMount(): void {
@@ -41,6 +43,20 @@ export default class TicketListPage extends Component<{}, TicketListState> {
     getTicketList(this);
   }
 
+  onSearchChange(search): void {
+    this.setState({
+      search: search,
+    });
+    return search;
+  }
+
+  onActionClick(): void {
+    this.setState({
+      rs: new RequestState(),
+    });
+    searchTicketList(this);
+  }
+
   render(): ReactNode {
     if (this.state.rs.loading) {
       return <View>loading</View>;
@@ -51,9 +67,15 @@ export default class TicketListPage extends Component<{}, TicketListState> {
     const fixListRenderer = this.state.fixList.map((item) => item.render());
     return (
       <View>
-        <View style={{ marginTop: '40rpx' }}>
-          <AtList>{fixListRenderer}</AtList>
+        <View style={{ marginTop: '20rpx', marginBottom: '20rpx' }}>
+          <AtSearchBar
+            actionName={pt.get().ticketList.search}
+            value={this.state.search}
+            onChange={this.onSearchChange.bind(this)}
+            onActionClick={this.onActionClick.bind(this)}
+          />
         </View>
+        <AtList>{fixListRenderer}</AtList>
         <View style={{ marginTop: '40rpx' }}>
           <AtPagination
             total={this.state.totalPage}

src/plain-text/TicketList.ts

@@ -3,6 +3,7 @@ import { FixStatus } from '@/common';
 export interface TicketListText {
   createdAt(time: string): string;
   statusMap: Map<FixStatus, string>;
+  search: string;
 }
 
 export const ticketListZhCn: TicketListText = {
@@ -19,6 +20,7 @@ export const ticketListZhCn: TicketListText = {
     [6, '维修翻车待取回'],
     [7, '维修翻车已取回'],
   ]),
+  search: '搜索',
 };
 
 export const ticketListEnUs: TicketListText = {
@@ -35,4 +37,5 @@ export const ticketListEnUs: TicketListText = {
     [6, 'Pending Retrieval (Failed)'],
     [7, 'Retrieved (Failed)'],
   ]),
+  search: 'search',
 };

src/service/ticketList.ts

@@ -57,3 +57,56 @@ export function getTicketList(that: TicketListPage) {
       console.log(reason);
     });
 }
+
+export function searchTicketList(that: TicketListPage) {
+  Taro.request({
+    url: getUrl('/tickets/search'),
+    method: 'GET',
+    data: {
+      token: wechatUser.getToken(),
+      pageId: that.state.currentPage,
+      count: that.state.pageSize,
+      value: that.state.search,
+      querytype: 0,
+    },
+  })
+    .then((res) => {
+      let former = that.state.rs;
+      const data = res.data.data;
+      if (!res.data.success) {
+        that.setState({
+          rs: former.trans(false),
+        });
+        return;
+      }
+      that.setState({
+        rs: former.trans(true),
+        fixList: data.data.map(
+          (item: {
+            id: number;
+            device: string;
+            deviceModel: string;
+            status: FixStatus;
+            createdTime: moment.MomentInput;
+          }) =>
+            new TicketListItem(
+              item.id,
+              item.device,
+              item.deviceModel,
+              item.status,
+              moment(item.createdTime),
+            ),
+        ),
+        currentPage: data.pageIndex,
+        pageSize: data.size,
+        totalPage: data.pageCount,
+      });
+    })
+    .catch((reason) => {
+      let former = that.state.rs;
+      that.setState({
+        rs: former.trans(false),
+      });
+      console.log(reason);
+    });
+}