页面列表与按钮样式 调整

src/pages/supplier/supplierBlacklist/blacklistAudit/index.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { Form, Button, Table, Select, Input, DatePicker, Modal, message } from "antd";
-import { SearchOutlined, ReloadOutlined, PlusOutlined } from "@ant-design/icons";
+import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
 import type { ColumnsType } from 'antd/es/table';
 import moment from 'moment';
+//接口
 import { getDictList } from '@/servers/api/dicts'
 import { getPage, submit, restoreSubmit } from './services'
-
-
+//统一列表分页
+import tableProps from '@/utils/tableProps'
 
 interface Columns {
   themeName: string;
@@ -101,15 +102,16 @@ const blacklistManage: React.FC = () => {
       width: 60,
       render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
     },
-    { title: "申请主题", dataIndex: "themeName", key: "themeName", align: "center" },
+    { title: "申请主题", dataIndex: "themeName", key: "themeName", align: "left", ellipsis: true },
     { title: "发起单位", dataIndex: "unitName", key: "unitName", align: "center" },
     { title: "发起部门", dataIndex: "deptName", key: "deptName", align: "center" },
-    { title: "发起时间", dataIndex: "createTime", key: "createTime", align: "center" },
+    { title: "发起时间", dataIndex: "createTime", key: "createTime", align: "center", width: 180 },
     { title: "审批记录状态", dataIndex: "approveStatusName", key: "approveStatusName", align: "center" },
     {
       title: "操作",
       key: "option",
       align: "center",
+      width: 180,
       render: (record: any) => {
         const showSubmit = record.approveStatus;
         const showRestoreSubmi = record.restoreApproveStatus;
@@ -129,47 +131,48 @@ const blacklistManage: React.FC = () => {
 
   return (
     <>
-      {/* 查询表单 */}
-      <Form form={form} layout="inline" style={{ marginBottom: 12 }}>
-        <Form.Item name="exitTheme" label="申请主题">
-          <Input placeholder="请输入供应商名称关键字" style={{ width: 150 }} allowClear maxLength={50} />
-        </Form.Item>
-        <Form.Item name="deptId" label="发起单位">
-        </Form.Item>
-        <Form.Item name="approveStatus" label="审批记录状态">
-          <Select style={{ width: 150 }} placeholder="请选择审批记录状态" allowClear>
-            {enterpriseType?.map(item => (
-              <Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
+      <div className="common-container">
+        <div className="filter-action-row">
+          <Form form={form} layout="inline" className="filter-form">
+            <Form.Item name="exitTheme" label="申请主题">
+              <Input placeholder="请输入供应商名称关键字" style={{ width: 150 }} allowClear maxLength={50} />
+            </Form.Item>
+            <Form.Item name="deptId" label="发起单位">
+            </Form.Item>
+            <Form.Item name="approveStatus" label="审批记录状态">
+              <Select style={{ width: 150 }} placeholder="请选择审批记录状态" allowClear>
+                {enterpriseType?.map(item => (
+                  <Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
 
-        <Form.Item name="time" label="发起时间">
-          <DatePicker.RangePicker style={{ width: 220 }} allowClear />
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>查询</Button>
-          <Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
-        </Form.Item>
-      </Form>
-      {/* 顶部按钮区 */}
+            <Form.Item name="time" label="发起时间">
+              <DatePicker.RangePicker style={{ width: 220 }} allowClear />
+            </Form.Item>
 
-      {/* 表格 */}
-      <Table
-        rowKey="id"
-        columns={columns}
-        dataSource={data}
-        loading={loading}
-        pagination={{
-          ...pagination,
-          showQuickJumper: true,
-          showSizeChanger: true,
-          showTotal: total => `共${total}条`,
-        }}
-        onChange={handleTableChange}
-        bordered
-      />
+            <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>
+        </div>
+        <Table
+          rowKey="id"
+          columns={columns}
+          dataSource={data}
+          loading={loading}
+          onChange={handleTableChange}
+          pagination={{...tableProps.pagination, total: pagination.total }}
+          style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
+        />
+      </div>
 
     </>
   );

src/pages/supplier/supplierBlacklist/blacklistManage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Form, Button, Table, Select, Input, DatePicker, Space, message } from "antd";
-import { SearchOutlined, ReloadOutlined, PlusOutlined } from "@ant-design/icons";
+import { Form, Button, Table, Select, Input, DatePicker } from "antd";
+import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
 import type { ColumnsType } from 'antd/es/table';
 //组件
 import ViewBlacklistModal from './components/ViewBlacklistModal';
@@ -9,7 +9,8 @@ import moment from 'moment';
 //字典与接口
 import { getDictList } from '@/servers/api/dicts'
 import { getPage } from './services'
-
+//统一列表分页
+import tableProps from '@/utils/tableProps'
 
 interface Columns {
   themeName: string;
@@ -95,10 +96,10 @@ const blacklistManage: React.FC = () => {
       width: 60,
       render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
     },
-    { title: "申请主题", dataIndex: "exitTheme", key: "exitTheme", align: "center" },
+    { title: "申请主题", dataIndex: "exitTheme", key: "exitTheme", align: "left" },
     { title: "发起单位", dataIndex: "deptId", key: "deptId", align: "center" },
     { title: "发起部门", dataIndex: "deptName", key: "deptName", align: "center" },
-    { title: "发起时间", dataIndex: "createTime", key: "createTime", align: "center" },
+    { title: "发起时间", dataIndex: "createTime", key: "createTime", align: "center", width: 180 },
     { title: "审批记录状态", dataIndex: "approveStatusText", key: "approveStatusText", align: "center" },
     {
       title: "操作",
@@ -119,51 +120,56 @@ const blacklistManage: React.FC = () => {
 
   return (
     <>
-      {/* 查询表单 */}
-      <Form form={form} layout="inline" style={{ marginBottom: 12 }}>
-        <Form.Item name="exitTheme" label="申请主题">
-          <Input placeholder="请输入供应商名称关键字" style={{ width: 150 }} allowClear maxLength={50} />
-        </Form.Item>
-        <Form.Item name="deptId" label="发起单位">
-        </Form.Item>
-        <Form.Item name="approveStatus" label="审批记录状态">
-          <Select style={{ width: 150 }} placeholder="请选择审批记录状态" allowClear>
-            {enterpriseType?.map(item => (
-              <Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
+      <div className="common-container">
+        <div className="filter-action-row">
+          <Form form={form} layout="inline" className="filter-form">
+            <Form.Item name="exitTheme" label="申请主题">
+              <Input placeholder="请输入供应商名称关键字" style={{ width: 150 }} allowClear maxLength={50} />
+            </Form.Item>
+            <Form.Item name="deptId" label="发起单位">
+            </Form.Item>
+            <Form.Item name="approveStatus" label="审批记录状态">
+              <Select style={{ width: 150 }} placeholder="请选择审批记录状态" allowClear>
+                {enterpriseType?.map(item => (
+                  <Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
 
-        <Form.Item name="time" label="发起时间">
-          <DatePicker.RangePicker style={{ width: 220 }} allowClear />
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>查询</Button>
-          <Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
-        </Form.Item>
-      </Form>
-      {/* 顶部按钮区 */}
-      <div style={{ marginBottom: 16 }}>
-        <Button type="primary" icon={<PlusOutlined />} onClick={handleApply}>
-          发起申请
-        </Button>
+            <Form.Item name="time" label="发起时间">
+              <DatePicker.RangePicker style={{ width: 220 }} 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="buttonFunctionBlock" type="primary" onClick={handleApply} >
+                发起申请
+              </Button>
+            </Form.Item>
+
+          </Form>
+
+        </div>
+        <Table
+          rowKey="id"
+          columns={columns}
+          dataSource={data}
+          loading={loading}
+          pagination={{...tableProps.pagination, total: pagination.total }}
+          onChange={handleTableChange}
+          style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
+        />
       </div>
-      {/* 表格 */}
-      <Table
-        rowKey="id"
-        columns={columns}
-        dataSource={data}
-        loading={loading}
-        pagination={{
-          ...pagination,
-          showQuickJumper: true,
-          showSizeChanger: true,
-          showTotal: total => `共${total}条`,
-        }}
-        onChange={handleTableChange}
-        bordered
-      />
-
       <CreateBlacklistModal visible={createVisible} onCancel={() => setCreateVisible(false)} onOk={() => setCreateVisible(false)} />
       <ViewBlacklistModal
         visible={viewVisible}