页面列表与按钮样式 调整

src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/index.tsx

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from "react";
 //第三方UI库/组件
-import { Form, Button, Table , Input, Tree, Row, Col, Space, Tooltip } from 'antd';
-import { SearchOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Form, Button, Table, Input, Tree, Space, Tooltip } from 'antd';
+import { SearchOutlined, DeleteOutlined, DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
 //类型定义
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
 //umi 相关
-import {  connect } from 'umi';
+import { connect } from 'umi';
 //本地组件、弹窗、业务逻辑
 import SupplierViewModal from './components/SupplierViewModal';
 import SupplierDetailModal from './components/SupplierDetailModal';
 //本地服务/接口
-import { treeData, systemDict, getPagePe } from './services';
+import { treeData, getPagePe } from './services';
+//统一列表分页
+import tableProps from '@/utils/tableProps'
 
 //下拉数据接口
 type OptionType = { label: string; value: string };
@@ -105,27 +107,6 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
   };
   // 初始化时选中树第一个叶子节点，并请求右表
   useEffect(() => {
-    // 境内/境外 下拉
-    systemDict('regionOptions').then((res) => {
-      const { code, data } = res;
-      if (code == 200) {
-        setRegionOptions(data)
-      }
-    });
-    // 集采类别 下拉
-    systemDict('categoryOptions').then((res) => {
-      const { code, data } = res;
-      if (code == 200) {
-        setCategoryOptions(data)
-      }
-    });
-    // 集采库 下拉
-    systemDict('storeOptions').then((res) => {
-      const { code, data } = res;
-      if (code == 200) {
-        setStoreOptions(data)
-      }
-    });
     //tree数据
     treeData().then((res) => {
       const { code, data } = res;
@@ -157,9 +138,9 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
       key: 'personName',
       align: 'center',
       ellipsis: true,
-      render: (dom, record) => 
+      render: (dom, record) =>
         <Tooltip title={record.personName}>
-            <a
+          <a
             onClick={() => {
               dispatch({
                 type: 'globalModal/show',
@@ -225,72 +206,78 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
       ),
     },
   ];
-
+  const [collapsed, setCollapsed] = useState(false);
   return (
     <>
-      <div style={{ width: '100%', height: '100%' }}>
-        <Row gutter={16} style={{ height: 'calc(100% - 30px)' }} >
-          {/* 左侧树 */}
-          <Col flex="250px" >
-            <div style={{
-              background: '#fff', height: '100%', padding: '20px 10px',
-              overflowX: 'auto',
-              overflowY: 'auto',
-              width: '250px',
-              boxSizing: 'border-box',
-              whiteSpace: 'nowrap',
-            }}>
-             {dataTree.length > 0 && (
-                <Tree
-                  treeData={dataTree}
-                  defaultExpandAll
-                  selectedKeys={treeSelected}
-                  onSelect={handleTreeSelect}
-                />
-              )}
-             
-            </div>
-          </Col>
-          {/* 右侧主体 */}
-          <Col flex="auto" style={{ background: '#fff', width: 'calc(100% - 270px)', height: '100%', padding: '20px' }}>
-            {/* 查询表单 */}
-            <Form
-              form={form}
-              layout="inline"
-              style={{ marginBottom: 12, }}
-            >
-              <Form.Item name="personName" label="姓名">
-                <Input placeholder="请输入姓名关键字" style={{ width: 180 }} maxLength={20} allowClear />
-              </Form.Item>
+      <div className="common-container on">
+        <div className="filter-action-row" style={{ backgroundColor: '#fff', padding: '24px' }}>
+          <Form
+            form={form}
+            layout="inline"
+            className="filter-form"
+          >
+            <Form.Item name="personName" label="姓名">
+              <Input placeholder="请输入姓名关键字" style={{ width: 180 }} maxLength={20} allowClear />
+            </Form.Item>
 
-              <Form.Item name="idCard" label="身份证号">
-                <Input placeholder="请输入身份证号关键字" style={{ width: 180 }} maxLength={18} allowClear />
-              </Form.Item>
-               
-              <Form.Item>
-                <Button type="primary" icon={<SearchOutlined />} htmlType="submit" onClick={handleSearch}>
-                  查询
-                </Button>
-                <Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>
-                  重置
-                </Button>
-                <Button type="primary" icon={<DownloadOutlined />} style={{ marginLeft: 8 }} onClick={handleExport}>
-                  数据导出
-                </Button>
-              </Form.Item>
-            </Form>
-            {/* 表格 */}
+            <Form.Item name="idCard" label="身份证号">
+              <Input placeholder="请输入身份证号关键字" style={{ width: 180 }} maxLength={18} allowClear />
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} >
+                搜索
+              </Button>
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
+            </Form.Item>
+            <Form.Item style={{ marginLeft: 'auto' }}>
+              <Button className="buttonOther" type="primary" onClick={handleExport}>
+                数据导出
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <div className={`treeBlock${collapsed ? ' collapsed' : ''}`}>
+            {!collapsed && (
+              <>
+                <div className="dataTree">
+                  {dataTree.length > 0 && (
+                    <Tree
+                      treeData={dataTree}
+                      defaultExpandAll
+                      selectedKeys={treeSelected}
+                      onSelect={handleTreeSelect}
+                    />
+                  )}
+                </div>
+                <div className="shrinkBlock">
+                  <div className="btn" onClick={() => setCollapsed(true)}><DoubleLeftOutlined /></div>
+                </div>
+              </>
+            )}
+            {collapsed && (
+              <div className="shrinkBlock expandOnly">
+                <div className="btn" onClick={() => setCollapsed(false)}><DoubleRightOutlined /></div>
+              </div>
+            )}
+          </div>
+          <div className="rightMain" style={{ width: collapsed ? 'calc(100% - 30px)' : 'calc(100% - 310px)' }}>
             <Table
               rowKey="id"
               columns={columns}
               dataSource={data}
               loading={loading}
-              pagination={pagination}
+              pagination={{ ...tableProps.pagination, total: pagination.total }}
               onChange={(pagination) => getList(selectedKeys, pagination.current!, pagination.pageSize!)}
+              style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
             />
-          </Col>
-        </Row>
+          </div>
+        </div>
       </div>
+
       {/* 查看组件 */}
       <SupplierViewModal
         visible={viewVisible}