6.28 党建攻坚第二版

src/pages/PartyMemberTopic/PersonInfor/index.tsx

@@ -1,62 +1,44 @@
 import React, { useEffect, useState } from 'react';
 import '../Style/ld_style.less';
-import { Input, List } from 'antd';
-import { getMemberList } from './service';
-import { getDetailData } from '../utils';
+import { Input, List, Spin } from 'antd';
+import { getMemberList, memberListSearch } from './service';
+import { isNotEmpty } from '../utils';
+import emblem from '@/assets/topic/emblem.png'
 import { history } from 'umi';
 
 const { Search } = Input;
 
-const data = [
-  {
-    title: '集团党支部',
-    name: '张三',
-    position: '党委书记',
-  },
-  {
-    title: '集团党支部',
-    name: '李四',
-    position: '党委副书记',
-  },
-  {
-    title: '集团党支部',
-    name: '李四',
-    position: '党委副书记',
-  },
-  {
-    title: '集团党支部',
-    name: '李四',
-    position: '党委副书记',
-  },
-  {
-    title: '集团党支部',
-    name: '李四',
-    position: '党委副书记',
-  },
-  {
-    title: '集团党支部',
-    name: '李四',
-    position: '党委副书记',
-  },
-  {
-    title: '集团党支部',
-    name: '李四',
-    position: '党委副书记',
-  }
-];
-
-const PersonInfor: React.FC<{}> = () => {
+const PersonInfor: React.FC<{}> = (props: any) => {
   //member list
   const [memberData, setMemberData] = useState<any[]>([]);
-
-  //get session
-  const item = getDetailData();
+  //loading
+  const [loading, setLoading] = useState<boolean>(false);
   //get member list
-  const getMemberData = () => {
-    getMemberList({ belongBranch: 4 }).then(res => {
+  const getMemberData = (branchCode: string) => {
+    setLoading(true);
+    getMemberList({ belongBranch: branchCode }).then(res => {
       if (res?.code == 200) {
         setMemberData(res?.data);
       }
+    }).finally(() => {
+      setLoading(false);
+    })
+  }
+  //search member
+  const onSearch = (value: string) => {
+    const params = {
+      param: value
+    }
+    if (isNotEmpty(props.location.state?.branchCode)) {
+      params['belongBranch'] = props.location.state?.branchCode;
+    }
+    setLoading(true);
+    memberListSearch(params).then(res => {
+      if (res?.code == 200) {
+        setMemberData(res?.data);
+      }
+    }).finally(() => {
+      setLoading(false);
     })
   }
   //to home
@@ -68,8 +50,13 @@ const PersonInfor: React.FC<{}> = () => {
     window.history.go(-1);
   }
   useEffect(() => {
-    getMemberData();
+    if (isNotEmpty(props.location.state?.branchCode)) {//有党支部
+      getMemberData(props.location.state?.branchCode);
+    } else {
+      onSearch(props.location.state?.param);
+    }
   }, [])
+
   return (
     <div className="page-container">
       <div className="top-banner">
@@ -78,39 +65,45 @@ const PersonInfor: React.FC<{}> = () => {
           <span onClick={() => toGoBack()}>上一页</span>
         </div>
       </div>
-      <div className="search">
-        <span className="text"><span>党员名录</span>(当前共270条)</span>
-        <div className="search-box">
-          <Search
-            placeholder="输入姓名/邮箱/电话"
-            allowClear
-            enterButton="搜索"
-            style={{ width: 322 }}
+      <Spin spinning={loading}>
+        <div className="search">
+          <span className="text"><span>党员名录</span>(当前共{memberData.length}条)</span>
+          <div className="search-box">
+            <Search
+              placeholder="输入姓名/邮箱/电话"
+              allowClear
+              defaultValue={props.location.state?.param}
+              enterButton="搜索"
+              style={{ width: 322 }}
+              onSearch={onSearch}
+            />
+          </div>
+        </div>
+        <div className="mess-box mess-detail">
+          <List
+            grid={{ gutter: 16, column: 4 }}
+            dataSource={memberData}
+            renderItem={item => (
+              <List.Item>
+                <div className="wrapper">
+                  <div className="top-bg">
+                    <div className="tit">{item.branchName}</div>
+                    <div className="text-r">
+                      <img src={emblem} />{item.contactName}
+                    </div>
+                    <div className="text-r yellow">{item.job}</div>
+                  </div>
+                  <div className="mess-content">
+                    <div>部门：{item.contactUnit}</div>
+                    <div>邮箱：{item.contactEmail}</div>
+                    <div>电话：{item.contactMobiphone}</div>
+                  </div>
+                </div>
+              </List.Item>
+            )}
           />
         </div>
-      </div>
-      <div className="mess-box mess-detail">
-        <List
-          grid={{ gutter: 16, column: 4 }}
-          dataSource={memberData}
-          renderItem={item => (
-            <List.Item>
-              <div className="wrapper">
-                <div className="top-bg">
-                  <div className="tit">{item.branchName}</div>
-                  <div className="text-r">{item.contactName}</div>
-                  <div className="text-r yellow">{item.contactUnit}</div>
-                </div>
-                <div className="mess">
-                  <div>部门：{item.contactUnit}</div>
-                  <div>邮箱：{item.contactEmail}</div>
-                  <div>电话：{item.contactMobiphone}</div>
-                </div>
-              </div>
-            </List.Item>
-          )}
-        />
-      </div>
+      </Spin>
     </div>
   )
 }

src/pages/PartyMemberTopic/PersonInfor/service.ts

@@ -6,4 +6,12 @@ export async function getMemberList(params: any) {
         method: 'GET',
         params: params
     });
+}
+
+//党员列表模糊查询
+export async function memberListSearch(data: any) {
+    return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/partyMember/paramQuery', {
+        method: 'POST',
+        data: { ...data },
+    });
 }