增加查询功能

src/components/AuthButton/index.jsx

+import React from 'react';
+
+let allBtns = [];
+let current = [];
+
+const AuthButton = ({ children, name, noRight }) => {
+  const btn = allBtns.filter(x => x.code === name)[0]
+
+  // 没维护的按钮, 或者不需要权限的按钮直接通过
+  // if (!btn || !btn.roles || !btn.roles.length) {
+  //   return <>{children}</>
+  // }
+
+  // const hasRight = btn.roles.some(x => current.some(y => x === y))
+
+  if (!btn) {
+    return <>{children}</>
+  }
+
+  const hasRight = current.filter(x => x.code === name)[0]
+  
+  return hasRight ? <>{children}</> : <>{noRight}</>
+}
+
+const setAllBtnAuth = x => allBtns = x;
+const setUserBtnAuth = x => current = x;
+
+export default AuthButton;
+export {
+  setAllBtnAuth,
+  setUserBtnAuth,
+};

src/pages/UserManage/index.jsx

 import React, { useState, useEffect } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Pagination, Card, Button, Icon, Tooltip, notification, Modal } from 'antd';
+import { Pagination, Form, Input, Card, Button, Icon, Tooltip, notification, Modal } from 'antd';
 import router from 'umi/router';
 import moment from 'moment';
 import className from 'classnames';
 import Style from './style.less';
 import { fetch, apis } from '../../utils/request';
 import PasswordText from './passwordText';
+import AuthButton from '@/components/AuthButton';
 
 const { Meta } = Card;
 
   </div>
 )
 
-export default (props) => {
+const header = props => {
   const [members, setMembers] = useState([]);
   const [pageNavi, setPageNavi] = useState({ current: 1, pageSize: 10, total: 0, size: 0 })
   // const [pageNavi, setPageNavi] = useState({ current: 1, pageSize: 10, total: 0 })
   // const [submitting, setSubmitting] = useState(false)
-  const [visibleData, setVisibleData] = useState({ visible: false, userId: '', oldPassword:'', newPassword: '', confirmPassword: '' })
+  const [visibleData, setVisibleData] = useState({ visible: false, userId: '', oldPassword: '', newPassword: '', confirmPassword: '' })
 
   useEffect(() => {
     getMembers({ params: { pageNum: pageNavi.current, pageSize: pageNavi.pageSize } }).then((dt) => {
    * @param {*} record
    */
   const editPassword = (record) => () => {
-    setVisibleData({ visible: true, userId: record.userId, oldPasswod: '', newPassword: '', confirmPassword: '',submitting:submitting})
+    setVisibleData({ visible: true, userId: record.userId, oldPasswod: '', newPassword: '', confirmPassword: '', submitting: submitting })
   }
 
   const CardBody = (cbProps) => {
           title: '确定禁用当前用户?',
           onOk() {
             turnMember({ urlData: { type: 'off', id: cbProps.userId } }).then(() => {
-              notification.success({ message: '禁用成功'});
+              notification.success({ message: '禁用成功' });
               // window.location.reload();
               changeMemberStatus(cbProps, 9)
             }).catch()
         });
       } else {
         turnMember({ urlData: { type: 'on', id: cbProps.userId } }).then(() => {
-          notification.success({ message: '开启成功'});
+          notification.success({ message: '开启成功' });
           // window.location.reload();
           changeMemberStatus(cbProps, 1)
         }).catch()
           cbProps.status != 1 ?
             (<Button type="link" onClick={handleSwitch(true)} style={{ color: colorSucces }}>开启<Icon type="check" /></Button>) :
             (<Button type="link" onClick={handleSwitch(false)} style={{ color: colorDanger }}>关闭<Icon type="delete" /></Button>)
-          }>
+        }>
           <h3>{cbProps.miniappId ? cbProps.miniappName : <Warn>(小程序)未设置</Warn>}</h3>
         </Cell>
         <div>
       </>
     )
   }
-  
+
   const createUser = () => {
     router.push('/member/new');
   }
     }).catch()
   }
 
+  // 重置搜索
+  function handleReset() {
+    props.form.resetFields();
+  }
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('提交数据: ', values)
+        getMembers({ params: { pageNum: pageNavi.current, pageSize: pageNavi.pageSize, miniAppName: values.miniAppName } }).then((dt) => {
+          const { records, ...pagenavi } = dt || {};
+          setMembers(records);
+          setPageNavi({
+            ...pageNavi,
+            ...pagenavi
+          })
+        }).catch()
+      }
+    });
+  }
+
   const handlePageChange = e => {
     getMembers({ params: { pageNum: e, pageSize: pageNavi.pageSize } }).then((dt) => {
       const { records, ...pagenavi } = dt || {};
     Modal.confirm({
       title: '确定重置当前用户密码?',
       onOk() {
-        resetMemberPassword({ urlData: {id: member.userId}}).then((message) => {
+        resetMemberPassword({ urlData: { id: member.userId } }).then((message) => {
           notification.success({ message })
         }).catch()
       },
     });
   }
 
+  const { getFieldDecorator } = props.form
+
   return (
     <>
-    <PageHeaderWrapper extra={<Button type="primary" icon="plus" onClick={createUser}>新建</Button>}>
-      <div className={Style['flex-box']}>
-        {
-          members.map((member, inx) => {
-            return (
-              <div className={className(Style['flex-item'], Style.member)} key={inx}>
-                <Card
-                  style={{width: '360px', boxShadow:'3px 3px 5px #ccc', borderRadius: '12px', overflow: 'hidden'}}
-                  cover={<div className={Style.square} style={{ width: '100%', background: `no-repeat center/80% url(${member.qrCode})` }} />}
-                  actions={[
-                    <Tooltip title="编辑">
-                      <Icon type="edit" key="edit" onClick={gotoDetail(member)}/>
-                    </Tooltip>,
-                    <Tooltip title="权限分配">
-                      <Icon type="setting" key="rights" onClick={gotoDetail(member, 3)}/>
-                    </Tooltip>,
-                    <Tooltip title="重置密码">
-                      <Icon type="block" key="resetpass" onClick={resetPassword(member)}/>
-                    </Tooltip>
-                  ]}
-                >
-                  <CardBody {...member}/>
-                </Card>
-              </div>
-            );
-          })
-        }
-      </div>
-      <Pagination
-        showSizeChanger
-        current={pageNavi.current}
-        total={pageNavi.total}
-        pageSize={pageNavi.size}
-        onChange={handlePageChange}
-        onShowSizeChange={handleSizeChange}
-      />
-    </PageHeaderWrapper>
-    <PasswordText visibleData={visibleData} key="PasswordText" onSuccess={() => onModalChange()}/>
+      <PageHeaderWrapper extra={
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Form layout="inline" onSubmit={e => handleSubmit(e)}>
+            <Form.Item>
+              {getFieldDecorator('miniAppName')(
+                <Input
+                  prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                  placeholder="小程序名称"
+                />,
+              )}
+            </Form.Item>
+            <Form.Item>
+              <AuthButton name="admin.buildingDynamic.search" noRight={null}>
+                <Button type="primary" htmlType="submit" className={Style.searchBtn}>
+                  搜索
+            </Button>
+              </AuthButton>
+              <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                重置
+            </Button>
+            </Form.Item>
+          </Form> <Button type="primary" icon="plus" onClick={createUser}>新建</Button>
+        </div>
+      }>
+        <div className={Style['flex-box']}>
+          {
+            members.map((member, inx) => {
+              return (
+                <div className={className(Style['flex-item'], Style.member)} key={inx}>
+                  <Card
+                    style={{ width: '360px', boxShadow: '3px 3px 5px #ccc', borderRadius: '12px', overflow: 'hidden' }}
+                    cover={<div className={Style.square} style={{ width: '100%', background: `no-repeat center/80% url(${member.qrCode})` }} />}
+                    actions={[
+                      <Tooltip title="编辑">
+                        <Icon type="edit" key="edit" onClick={gotoDetail(member)} />
+                      </Tooltip>,
+                      <Tooltip title="权限分配">
+                        <Icon type="setting" key="rights" onClick={gotoDetail(member, 3)} />
+                      </Tooltip>,
+                      <Tooltip title="重置密码">
+                        <Icon type="block" key="resetpass" onClick={resetPassword(member)} />
+                      </Tooltip>
+                    ]}
+                  >
+                    <CardBody {...member} />
+                  </Card>
+                </div>
+              );
+            })
+          }
+        </div>
+        <Pagination
+          showSizeChanger
+          current={pageNavi.current}
+          total={pageNavi.total}
+          pageSize={pageNavi.size}
+          onChange={handlePageChange}
+          onShowSizeChange={handleSizeChange}
+        />
+      </PageHeaderWrapper>
+      <PasswordText visibleData={visibleData} key="PasswordText" onSuccess={() => onModalChange()} />
     </>
   )
 }
+
+const Base = Form.create({ name: 'header' })(header);
+export default Base;